JAVASCRIPT
JAVASCRIPT - CECHY Język skryptowy stosowany w sieci WWW Stosowany przez autorów witryn WWW głównie w celu: poprawy wyglądu stron walidacji danych z formularzy wykrywania typu przeglądarki tworzenia plików cookie itd. Najpopularniejszy język skryptowy w Internecie Język bardzo łatwy do opanowania Język obsługiwany przez większość przeglądarek: MSIE, Firefox, Opera, Mozilla, Netscape
CZYM JEST JAVASCRIPT? Język zaprojektowany by dodać interaktywność do stron WWW Język skryptowy Składa się z linii wykonywalnego kodu komputerowego Zazwyczaj kod JavaScriptu jest wbudowany w stronę WWW Jest językiem interpretowanym Nie wymaga zakupu licencji JavaScript (opracowany przez Netscape) nie jest tym samym co Java (opracowana przez SunMicrosystems)
ZASTOSOWANIA JAVASCRIPTU Nieskomplikowane narzędzie programistyczne dla autorów stron WWW korzystające z języka skryptowego o bardzo prostej składnii Umożliwia tworzenie dynamicznej zawartości strony WWW Oferuje możliwości reakcji na zdarzenia Umożliwia odczyt i zmianę zawartości elementów HTML Umożliwia walidację zawartości formularzy przed wysłaniem jej do serwera Umożliwia wykrycie przeglądarki i w zależności od uzyskanej odpowiedzi załadowanie właściwej strony Może być stosowany do tworzenia i obsługi plików cookie Inne
WSTAWIANIE KODU JAVASCRIPT Znacznik: <script>... </script> Atrybut: type="text/javascript" Zawartość: kod w języku JavaScript pojedyncze polecenia mogą kończyć się średnikiem bądź znakiem końca linii obiekty, metody, właściwości
WERSJA DLA STARSZYCH PRZEGLĄDAREK <script type="text/javascript"> <!... polecenia JavaScript... //--> </script>
GDZIE I KIEDY ZAPISAĆ KOD JAVASCRIPT W sekcji <body>... </body> pliku HTML wykonywane podczas ładowania strony W sekcji <head>... </head> pliku HTML wykonywane przez wywołanie lub jako obsługa zdarzeń Zarówno w sekcji <head>, jak i w sekcji <body> możliwe jest zastosowanie nieograniczonej liczby skryptów W osobnym pliku plik z rozszerzeniem.js stosowane wtedy, gdy ten sam kod ma wystąpić na wielu stronach plik nie zawiera znacznika <script>... </script> plik z kodem JavaScript należy wywołać w pliku HTML używając znacznika <script> z atrybutem <src>, którego wartością jest ścieżka dostępu do pliku.js przykład: <head> <script src="plik.js"> </script> </head> Uwaga!: Znacznik <script> odwołujący się do pliku zewnętrznego.js musi być umieszczony dokładnie w tym miejscu, w którym byłby umieszczony kod JavaScript
ZMIENNE Zastosowanie: przechowywanie informacji wartość może się zmienić w trakcie wykonywania kodu JS Nazwy zmiennych: muszą zaczynać się literą lub znakiem "_" wielkość liter ma znaczenie Deklaracje zmiennych: var nazwa_zmiennej = wartość nazwa_zmiennej = wartość Przypisanie wartości: var nazwa_zmiennej = wartość nazwa_zmiennej = wartość Zasięg i czas życia zmiennych: lokalne - zadeklarowane wewnątrz funkcji dostępne tylko wewnątrz funkcji, podczas jej wywołania od deklaracji do końca funkcji (mogą mieć te same nawy w różnych funkcjach) globalne zadeklarowane poza jakąkolwiek funkcją, dostępne we wszystkich funkcjach od chwili zadeklarowania tej zmiennej do zamknięcia strony
INSTRUKCJE WARUNKOWE Składnia instrukcji if: if (warunek) kod wykonywany, gdy warunek spełniony Składnia instrukcji if... else if (warunek) kod wykonywany, gdy warunek spełniony else kod wykonywany, gdy warunek niespełniony Składnia instrukcji if... else if... else if (warunek1) kod wykonywany, gdy warunek1 spełniony else if (warunek2) kod wykonywany, gdy warunek2 spełniony else kod wykonywany, gdy obydwa warunki niespełnione
INSTRUKCJE WARUNKOWE C.D. Składnia instrukcji switch switch (wyrażenie) case wartość1: kod_wykonywany_gdy_wyrażenie==wartość1 break case wartość2: kod_wykonywany_gdy_wyrażenie==wartość2 break... default: kod_wykonywany_w_pozostałych przypadkach
OPERATORY Arytmetyczne: binarne (x operator y): +, -, *, /, %, unarne(x operator): --, ++ Przypisania: =, += (także dla ciągu znaków), -=, /=, */, %/ Porównania: ==,!=, <, >, <=, >=, === (sprawdza również zgodność typów) Logiczne &&, II,! Łańcuchowe (konkatenacji) + Warunkowy zmienna=(warunek)?wartość1:wartość2
WYSKAKUJĄCE OKIENKA Okienka informacyjne: wyświetlenie okna z informacją i przyciskiem OK składnia: alert("tekst komunikatu") Okienka dialogowe: okno typu confirm z przyciskami OK i Anuluj zwraca wartości logiczne składnia: confirm("tekst komunikatu") okno typu prompt z polem tekstowym oraz przyciskami OK i Anuluj zwraca wartość pola tekstowego lub wartość null składnia: prompt("tekst komunikatu", "wartość_domyślna")
PRZYKŁAD OKIENKO INFORMACYJNE <html> <head> <script type="text/javascript"> function display_alert() alert("witaj, przykład pokazuje," + '\n' + "jak podzielić linię w oknie informacyjnym!") </script> </head> <body> <input type="button" onclick="display_alert()" value="naciśnij" /> </body> </html>
PRZYKŁAD OKIENKO TYPU PROMPT <html> <head> <script type="text/javascript"> function dislay_prompt() var imie=prompt("podaj swoje imię","bożydar") if (name!=null && name!="") document.write("witaj " + name + "!") </script> </head> <body> <input type="button" onclick="display_prompt()" value="naciśnij" /> </body> </html>
FUNKCJE Funkcje to powtarzale fragmenty kodu Mogą być wywołane przez użytkownika bądź przez zdarzenie Deklarowane w sekcji <head> pliku HTML lub w pliku.js Składnia: funkcja bezargumentowa: function nazwa_funkcji () kod_funkcji funkcja z argumentami: function nazwa_funkcji (arg1, arg2,..., argn) kod_funkcji funkcja zwracająca wartość: function nazwa_funkcji (arg1, arg2,..., argn) kod_funkcji return wartość
PĘTLE FOR, WHILE ORAZ DO...WHILE Pętla for wykonywana określoną liczbę razy, pętle while i do...while wykonywane tak długo, jak spełniony jest odpowiedni warunek, pętla do...while wykonywana co najmniej 1 raz Składnia: pętla for: for (ustawienie_wartości_początkowej_licznika; warunek_wykonania; inkrementacja_licznika) kod_pętli pętla while: while (warunek) kod_pętli pętla do...while: do kod_pętli while (warunek)
INSTRUKCJE BREAK I CONTINUE Instrukcje zazwyczaj używane w pętlach Instrukcja break powoduje natychmiastowe wyjście z pętli Instrukcja continue powoduje przerwanie wykonywania pętli i powrót na początek pętli
PĘTLA FOR... IN Specjalna wersja pętli for dla elementów tablicy lub własności projektu Składnia: for (zmienna in obiekt) kod pętli Kod_pętli jest wykonywany raz dla każdego elementu/właściwości Zmienna może być nazwą zmiennej, elementem tablicy lub właściwością obiektu
ZDARZENIA Działania, które mogą być wykryte przez JavaScript Zdarzenia: onabort przerwanie ładowania obrazka onblur element utracił fokus onchange zawartość pola zmieniła się onclick kliknięcie na obiekcie ondblclick podwójne kliknięcie na obiekcie onerror podczas ładowania strony/obrazka wystapił błąd onfocus element uzyskał fokus onkeydown naciśnięto klawisz onkeypress naciśnięto i przytrzymano klawisz onkeyup zwolniono klawisz onload koniec ładowania strony/obrazka onmousedown naciśnięty przycisk myszki onmousemove przesunięto myszkę onmouseout kursor myszki opuścił obiekt onmouseover kursor myszki przesunieto nad obiekt onmouseup zwolniono przycisk myszki onreset wybrano przycisk "reset" onresize zmiana rozmieru okna lub ramki onselect zaznaczono tekst onsubmit wybrano przycisk "submit" onunload użytkownik opuścił stronę
PRZYKŁADY OBSŁUGI ZDARZEŃ onload i onunload: sprawdzenie typu i wersji przeglądarki klienta i wyświetlenie odpowiedniej strony obsługa plików cookie onfocus, onblur, onchange walidacja pojedynzych pól formularza onsubmit walidacja wszystkich pól formularza przed wysłaniem na serwer onmouseover, onmouseout tworzenie animowanych przycisków
PRZECHWYTYWANIE I OBSŁUGA BŁĘDÓW Błędy w JavaScript najczęściej objawiają się odpowiednim komunikatem po stronie klienta, który na ogół opuszcza taką stronę Przechwytywanie błędów: instrukcja try... catch zdarzenie onerror Składnia try...catch try jakiś_kod catch(blad) kod_obsługi_błędu
WYJĄTKI Instrukcja throw pozwala stworzyć wyjątek Składnia: throw (wyjątek) Wyjątek może być: łańcuchem, liczbą całkowitą, wartością logiczną lub obiektem Wyjątki pozwalają rozróżniać błędy i na tej podstawie podejmować różne akcje
ZDARZENIE ONERROR Zachodzi m.in., gdy pojawia się błąd wykonania kodu JavaScript Obsługa tego zdarzenia polega na wywołaniu onerror = funkcja_obsługi_błędu Zdarzenie onerror zwraca trzy wartości msg komunikat o błędzie url adres url strony, która spowodowała błąd line linia w której wystąpił błąd Wartość zdarzenia onerror (true lub false) określa, czy ma pojawić się standardowy komunikat o błędzie, czy też nie
ZNAKI SPACJALNE W ŁAŃCUCHACH Poprzedzane znakiem \ \' \" \& \\ \n new line \r powrót karetki \t - tabulacja \b - backspace \f form feed
INNE CECHY JAVASCRIPT Rozróżnialność wielkości liter Białe znaki ignorowane Długie linie kodu można łamać znakiem \, ale tylko wewnątrz łańcucha znaków Komentarze: do końca linii po znaku // od znaku /* do znaku */