JavaScript - sosw.poznan.pl

Tworzenie aplikacji
internetowych – E14
JavaScript w przykładach
Tomasz Fitzermann
Język JavaScript
JavaScript - język skryptowy rozszerzający standardowy HTML m.in. o możliwość interakcji z użytkownikiem
przeglądającym stronę.
Zastosowania:
• Zdarzenia (reakcja na kliknięcie lub ruch myszy, dynamiczna zmiana zawartości i stylu)
• Animacje na stronie (np. galeria LightBox, proste gry, animowany zegarek)
• Przetwarzanie formularzy po stronie klienta
• Kalkulatory, testy on-line
• Sprawdzanie poprawności wprowadzanych danych do formularzy (walidacja) przed wysłaniem do
serwera
• AJAX (przeładowanie – interakcja z użytkownikiem bez przeładowywania całej strony)
• Ciasteczka (zapamiętanie preferencji użytkownika – np. kolor tła strony, ułożenie menu itp.)
.
Cechy:
• Język interpretowany po stronie klienta (przez przeglądarkę internetową)
• Kod programu jest umieszczony w kodzie HTML lub dołączany z zewnętrznych plików
• Język posiada predefiniowane obiekty (window, history, document, location, Array, Date, Math)
• Zmienne i ich typ nie muszą być deklarowane przed użyciem
• JavaScript rozróżnia wielkość liter
• Ze względów bezpieczeństwa nie ma możliwości zapisu na dysk twardy
2
Obiekty, zdarzenia
Obiekt jest to struktura zawierająca dane (właściwości) i metody (funkcje)
Właściwości – atrybuty, cechy obiektu (np. szerokość, kolor tła)
document.bgColor='#00FF66' - zmiana właściwości koloru tła strony
Metody – funkcje służące do wykonywania zadań na obiekcie
history.back() - wywołanie metody realizującej powrót do poprzedniej
strony
Zdarzenia - to czynności, które użytkownik wykonuje podczas odwiedzania
naszej strony. Zdarzeniami mogą być np. przesunięcie kursora na obrazek,
kliknięcie odnośnika lub przycisku, wysłanie formularza, zaznaczenie elementu,
naciśnięcie klawisza itp. Istnieją też zdarzenia, które nie są bezpośrednio
spowodowane przez użytkownika - np. zdarzenie onload, które zachodzi np. gdy
załaduje się strona.
3
Zdarzenia - przykłady
Przykład: Rejestrowanie zdarzeń w odnośnikach - zmiana koloru tła
<a href="#" onclick="document.bgColor='red'">Czerwony</a>
<a href="#" onmouseover="document.bgColor='green'">Zielony</a>
Przykład: Przycisk menu , którego kliknięcie spowoduje przejście do innej strony
<input type="button" value="WP" onclick="window.location='http://www.wp.pl'" />
Przykład: Wywołanie okna dialogowego po podwójnym kliknięciu myszy
<span ondblclick="alert('test')">Kliknij mnie dwa razy</span>
Przykład: Zamiana obrazka
<img src="z1.src" name="obrazek" />
<img src="z2.src" onclick="obrazek.src='z2.jpg'" />
4
Zdarzenia
Nazwa
onAbort
onBlur
onChange
onClick
onDblClick
onDragDrop
onError
onFocus
onKeyDown
onKeyUp
onLoad
onMouseDown
onMouseOut
onMouseOver
onMouseUp
onMove
onReset
onResize
onSelect
onSubmit
onUnload
Zdarzenie
Anulowanie,zaniechanie pobrania strony, grafiki
Element przestaje być aktywny
Obiekt zmieni swoją zawartość
Kliknięcie na element
Reakcja na podwójne kliknięcie
Przecięgnięcie obiektu poza okno
Ładowanie powoduje błędy
Uaktywnienie elementu
Wciśnięcie klawisza na klawiaturze
Puszczenie klawisza
Załadowanie elementu
Wciśnięcie klawisza myszy
Zjechanie kursora myszy poza dany obszar
Najechanie kursorem myszy nad dany obszar
Puszczenie klawisza myszy
Poruszenie oknem
Wyczyszczenie formularza przyciskiem reset
Zmiana rozmiaru okna
Zaznaczenie danego elementu
Zatwierdzenie formularza
Wyjście ze strony (np. kliknięto link i następuje przekierowanie)
5
Umieszczanie skryptów w kodzie
HTML
Skrypt osadzony w kodzie HTML
<script type="text/javascript">
kod (instrukcje) skryptu
</script>
Skrypt zewnętrzny (zapisany w pliku skrypt.js)
<script type="text/javascript" src="skrypt.js"></script>
Przykład: Wyskakujące okno dialogowe
<script type="text/javascript">
alert("Mój pierwszy skrypt");
</script>
6