javascript - instytut informatyki politechniki … · samym co java (opracowana przez...

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>


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>


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 */

javascript - instytut informatyki politechniki … · samym co java (opracowana przez...

Documents