View
216
Download
0
Category
Preview:
Citation preview
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 ... elseif (warunek)
{kod wykonywany, gdy warunek spełniony}
else
{kod wykonywany, gdy warunek niespełniony}
Składnia instrukcji if ... else if ... elseif (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 switchswitch (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)+
Warunkowyzmienna=(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...catchtry
{
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łaniuonerror = 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 */
Recommended