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