javascript - instytut informatyki politechniki … · samym co java (opracowana przez...
TRANSCRIPT
![Page 1: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/1.jpg)
JAVASCRIPT
![Page 2: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/2.jpg)
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
![Page 3: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/3.jpg)
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)
![Page 4: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/4.jpg)
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
![Page 5: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/5.jpg)
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
![Page 6: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/6.jpg)
WERSJA DLA STARSZYCH PRZEGLĄDAREK
<script type="text/javascript">
<!–
....
polecenia JavaScript
...
//-->
</script>
![Page 7: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/7.jpg)
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
![Page 8: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/8.jpg)
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
![Page 9: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/9.jpg)
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}
![Page 10: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/10.jpg)
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
}
![Page 11: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/11.jpg)
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
![Page 12: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/12.jpg)
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")
![Page 13: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/13.jpg)
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>
![Page 14: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/14.jpg)
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>
![Page 15: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/15.jpg)
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ść
}
![Page 16: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/16.jpg)
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)
![Page 17: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/17.jpg)
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
![Page 18: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/18.jpg)
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
![Page 19: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/19.jpg)
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ę
![Page 20: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/20.jpg)
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
![Page 21: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/21.jpg)
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
}
![Page 22: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/22.jpg)
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
![Page 23: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/23.jpg)
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
![Page 24: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/24.jpg)
ZNAKI SPACJALNE W ŁAŃCUCHACH
Poprzedzane znakiem \
\'
\"
\&
\\
\n – new line
\r – powrót karetki
\t - tabulacja
\b - backspace
\f – form feed
![Page 25: JAVASCRIPT - Instytut Informatyki Politechniki … · samym co Java (opracowana przez SunMicrosystems) ZASTOSOWANIA JAVASCRIPTU](https://reader036.vdocuments.site/reader036/viewer/2022062601/5b96c3db09d3f25a5a8beac2/html5/thumbnails/25.jpg)
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 */