JavaScript

Na przestrzeni ostatnich lat można zauważyć bardzo szybki rozwój Internetu. Nic więc dziwnego, że nastąpiła wielka popularyzacja języków i technologii służących do tworzenia interaktywnych stron WWW, lub rozszerzania możliwości najpowszechniej używanego języka HTML. Wszelkiego rodzaju aplikacje i programy, których działanie możemy podziwiać podczas codziennego surfowania po Internecie można podzielić na dwie grupy.

W dalszej części tej lekcji zajmować się będziemy tylko programami skryptowymi, które należą do drugiej grupy przytoczonego wcześniej podziału. Skupimy się na przybliżeniu idei programowania skryptowego w oparciu o język JavaScript.

Wielu ludzi popełnia błąd myląc i utożsamiając go z językiem Java. Po uważniejszym zapoznaniu się z obydwoma technologiami łatwo można dostrzec bardzo istotne różnice pomiędzy nimi. Najważniejszą z nich jest to, że programy napisane w JavaScript nie wymagają kompilacji ( proces tłumaczenia programu napisanego w języku "ludzkim" na język zrozumiały dla komputerów), a ich kod jest interpretowany bezpośrednio przez przeglądarkę.

Język JavaScript pozwala na stworzenie wrażenia interaktywnego zachowania stron WWW. Udostępniane przez niego dynamiczne elementy, sprawiają wrażenie, że witryna internetowa w efektowny sposób reaguje na różne zdarzenia wywołane przez użytkownika.


Sposób osadzania skryptu w dokumencie

Aby skrypt umieszczony na stronie został prawidłowo zinterpretowany przez przeglądarkę musi on zostać wprowadzony do wnętrza struktury strony w ściśle określony sposób. Jego treść musi zostać otoczona specjalnymi znacznikami <SCRIPT> i </SCRIPT>. W ich wnętrzu mogą znaleźć się dowolne, poprawne instrukcje napisane w jakimkolwiek języku skryptowym. Przeglądarka musi zostać poinformowana o języku w jakim został napisany dany fragment kodu.
Odbywa się to przez parametr "Language = JavaScript" umieszczony wewnątrz znacznika otwierającego <SCRIPT>.

Czasami dochodzi do sytuacji, że dokument jest analizowany przez przeglądarkę, w której nie zaimplementowano obsługi JavaScript. Aby zabezpieczyć się przed tego rodzaju problemem kod skryptu powinien zostać umieszczony wewnątrz znaków komentarza "<!-- -->". Wszystkie znaki znajdujące się pomiędzy tymi znacznikami zostaną zignorowane, natomiast treść skryptu zostanie zinterpretowana poprawnie.

<HTML>
<HEAD>
</HEAD>
<SCRIPT Language = "JavaScript">
<!--
Tutaj może znaleźć się dowolna treść skryptu
-->
</SCRIPT>
<BODY>
</BODY>
</HTML>

W trosce o użytkowników przeglądarek, które z różnych względów nie są w stanie poprawnie wykonać skryptu wewnątrz dokumentu można zastosować dodatkowe znaczniki <NOSCRIPT> </NOSCRIPT>, pomiędzy którymi zamieszcza się informacje, o zaistnieniu tej nietypowej sytuacji.

<HTML>
<HEAD>
</HEAD>
<SCRIPT Language = "JavaScript">
<!--
Tutaj może znaleźć się dowolna treść skryptu
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
<BODY>
</BODY>
</HTML>


Obiekt document - sterowanie wyglądem dokumentu

Aby skrypt mógł w jakikolwiek sposób zmodyfikować zawartość strony na której się znajduje, w jego treści musi znaleźć się symboliczne odwołanie do niej. Obiektem reprezentującym aktualną stronę w skryptach JavaScript jest obiekt document. Udostępnia on szereg funkcji, których wywołanie pozwala wpływać na wygląd strony WWW. Wywołuje się je w ściśle określony sposób. Po nazwie obiektu należy postawić znak kropki, a następnie wywołać funkcję z odpowiednimi dla niej parametrami. W terminologii programowania obiektowego funkcje te nazywane są metodami. Przykładowo gdybyśmy chcieli napisać najprostszy skrypt, który wyświetliłby napis "Witaj świecie !" musielibyśmy wywołać metodę write obiektu document. Jako jej parametr - w cudzysłowie - należy podać napis który ma się wyświetlić.

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
document.write("Witaj Swiecie!");
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Strona wyświetlająca napis "Witaj Swiecie!" jest generowana w sposób dynamiczny - jej treść stanowi argument funkcji write. Jeśli wewnątrz nawiasów umieścimy słowa, które zostaną rozpoznane przez przeglądarkę jako słowa kluczowe wtedy możemy posłużyć się nimi i w prosty sposób wpływać na wygląd prezentowanego napisu.

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
document.write("<BR><BR>");
document.write("<HR>");
document.write("<FONT COLOR=#FFFFFF><H2>Witaj Swiecie!<H2></FONT>");
document.write("<IMG SRC=\"./zdjecia/mars.jpg\" width=\"200\" height=\"200\">");
document.write("<BR><HR>");
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY BGCOLOR=#000000>
</BODY>
</HTML>

Powyższy przykład pokazuje sposób generowania bardziej złożonych strony WWW przy pomocy skryptów JavaScript. Czasami gdy wewnątrz argumentów metody zaistnieje potrzeba użycia któregoś ze znaków zastrzeżonych (w tym przypadku znaków "" ) wtedy koniecznie należy poprzedzić go znakiem backslash. Inne znaki zastrzeżone będą pojawiać się w kolejnych przykładach.
Skrypt powoduje wyświetlenie strony internetowej na której będzie zawarty formatowany tekst "Witaj Swiecie!" z góry i z dołu ograniczony liniami poziomymi. Pod tekstem umieszczone zostanie zdjęcie "mars.jpg".

Funkcja "window.prompt()"

avaScript powstał by umożliwić interakcję z użytkownikiem. Jego zadaniem jest ożywiać strony internetowe, sprawiać by potrafiły właściwie reagować na akcje użytkownika. Bardzo często zachodzi konieczność pobrania pewnych danych i przekazania ich do dalszej obróbki. Nic więc dziwnego, że JavaScript potrafi zautomatyzować ten proces. Dostarcza metod które wyświetlają okienka pozwalające na wprowadzenie danych. Najprostszą z nich jest metoda "prompt". Jako jej parametr podaje się nazwę pola, która wyświetli się na formatce, oraz wartość początkową, którą zostanie zainicjowane pole tekstowe. Metoda ta jest udostępniana przez obiekt window, który symbolizuje aktualne okno przeglądarki. Jest on uważany za najważniejszy i domyślny, dlatego jego metody mogą być wywoływane bez notacji kropkowej. Pełne, prawidłowe użycie funkcji prompt jest pokazane poniżej:

window.prompt("powitanie","");

W przypadku gdy chcielibyśmy aby pole w okienku nazywało się "powitanie" i przed wpisaniem jakichkolwiek danych było puste to funkcja prompt musi mieć następujący wygląd:

window.prompt("powitanie","");

Metoda ta zwraca wartość tekstową, która została wprowadzona przez użytkownika. Można ją przypisać dowolnej z
zmiennej, a potem używać w dalszej części skryptu. Mechanizmy te zostaną szczegółowo omówione w dalszej części lekcji - na tym etapie wystarczającą umiejętnością będzie przyswojenie sposobu wywołania tej metody.

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
window.prompt("powitanie","");
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY BGCOLOR=#000000>
</BODY>
</HTML>


Funkcja "window.alert()"

Obiekt window posiada rozbudowaną funkcjonalność i posiada szereg metod służących do kontrolowania wyglądu aktualnie wyświetlanej strony. Godną zwrócenia uwagi jest metoda window.alert() służąca do wyświetlania okienka dialogowego. Wywołanie tej metody ma następującą postać:

window.alert("tekst_wyświetlony_w_oknie_dialogowym");

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
window.alert("powitanie");
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY BGCOLOR=#000000>
</BODY>
</HTML>

Powyższy przykład spowoduje wyświetlenie prostego okienka dialogowego, w którego wnętrzu pojawi się słowo "powitanie". Istnieje możliwość połączenia ze sobą dwóch ostatnio omówionych konstrukcji. Wewnątrz nawiasów metody "window.alert" musi pojawić się tekst przeznaczony do wyświetlenia. Zastanówmy się co mogłoby się stać gdyby w ich wnętrzu umieścić wywołanie metody "window.prompt()"

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
window.alert(window.prompt("powitanie",""));
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

W powyższym przypadku jako pierwsza wywołana zostanie metoda wewnętrzna, której nazwa jest otoczona nawiasami - window.prompt(). Jako wynik zwraca ona łańcuch znaków - słowo, które zostało wpisane przez użytkownika. Łańcuch ten automatycznie staje się argumentem drugiej, zewnętrznej funkcji - window.alert(). Mechanizm ten powoduje, że słowo powitania zostanie wyświetlone w okienku dialogowym. Powyższy przykład pokazuje sposób zagnieżdżania wywołań funkcji. Wynik działania jednej z nich staje się argumentem wywołania drugiej.


Zmienne i typy danych


Podczas pisania najprostszych nawet programów często staje się przed problemem dotyczącym sposobu przechowywania danych. Nawiązując do poprzedniego przykładu bardzo łatwo jest wyobrazić sobie sytuację, że przed wywołaniem funkcji window.alert() chcielibyśmy zmodyfikować wartość łańcucha znakowego zwróconego przez funkcję window.prompt(). Aby rozwiązać ten problem potrzebujemy swoistego kontenera, we wnętrzu którego moglibyśmy przechować tymczasową wartość zwróconą przez pierwszą metodę, potem ją zmodyfikować i wreszcie podać jako argument wywołania drugiej metody. Tym kontenerem - "opakowaniem na dane" - jest zmienna. Nie posiada ona stałej wartości, dlatego gdy wykorzystamy już łańcuch przez nią przechowywany to nic nie stoi na przeszkodzie by wykorzystać ją ponownie. Każda zmienna używana w programie powinna zostać wcześniej zadeklarowana. Deklaracja polega na użyciu słowa kluczowego var i po nim nazwy zmiennej. Wygląda ona następująco:



var zmienna1, zmienna2,zmienna3;

Języki skryptowe, a wśród nich też JavaScript nie wymagają deklaracji zmiennej. Może ona zostać wprowadzona i od razu używana. Jest to duże uproszczenie w stosunku do skomplikowanych języków wysokiego poziomu takich jak np. Java.

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
var powitanie=window.prompt("powitanie","")
window.alert("wpisales powitanie "+powitanie);
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

W powyższym przykładzie wartość uzyskiwana w wyniku wywołania funkcji window.prompt() zostaje zapisana do wnętrza zmiennej "powitanie". Od tego momentu może ona podlegać dowolnym modyfikacjom i obróbce. W naszym przykładzie zostaje ona przekazana jako argument dla funkcji window.alert(). Wartość zmiennej może zostać używana wielokrotnie.

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
var powitanie=window.prompt("powitanie","");
window.alert("wpisales powitanie "+powitanie);
document.write("<H2>" + powitanie +"<H2>");
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

W powyższym przykładzie zmienna jest wykorzystywana dwa razy. Najpierw przekazywana jest jako argument funkcji, a następnie wyświetlana w postaci nagłówka drugiego stopnia na stronie HTML. W tym momencie należałoby się przyjrzeć argumentowi wywołania funkcji document.write(). Nazwa zmiennej występuje poza znakiem cudzysłowu, a cały argument składa się z wielu części, pomiędzy którymi występuje operator "+". Jeśli zmienna zostałaby umieszczona wewnątrz cudzysłowu, wtedy zostałaby potraktowana jako zwykły napis. Na ekranie nie pokazałaby się jej zawartość, lecz nazwa. Interpreter JavaSript spodziewa się, że pomiędzy nawiasami stojącymi przy funkcji powinien znaleźć się łańcuch tekstowy, dlatego operator "+" nie jest w tym przypadku traktowany jako zwykły symbol dodawania arytmetycznego. Powoduje on sklejenie ze sobą argumentów, które stoją po jego prawej i lewej stronie.

Wszystkie zmienne występujące w programach można usystematyzować według typów wartości które mogą one przechowywać. W języku JavaScript możemy doszukać się następujących rodzajów danych:

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
// deklaracja zmiennych tekstowych
var powitanie_pol= "Dzien Dobry";
var powitanie_ang="Good Morning";
var powitanie_franc="Bonjour";
// deklaracja zmiennych liczbowych
var liczba1=3;
var liczba2=5;
var liczba3;
// operacja dodawania arytmetycznego
liczba3=liczba1+liczba2;
//wyświetlanie zmiennych tekstowych
document.write("<H1>"+powitanie_pol+"<H1> <BR>");
document.write("<H2>"+powitanie_ang+"<H2> <BR>");
document.write("<H3>"+powitanie_franc+"<H3> <BR>");
//wyświetlanie zmiennych liczbowych
document.write("<H4>"+liczba1 + "+" +liczba2+"="+liczba3 +"<H3> <BR>");
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

W powyższym przykładzie można dopatrzeć się deklaracji trzech zmiennych łańcuchowych. Zainicjowano je tekstami powitań w różnych językach. Zmienne te są ponownie wykorzystane w dalszej części programu - powitania wyświetlone są w postaci nagłówków HTML.
W przykładzie umieszczono też deklarację trzech wartości liczbowych. Wykonywane jest na nich proste dodawanie arytmetyczne, a jego którego wynik jest później wyświetlany na ekranie monitora. W treści przykładu zawarte są komentarze, które wyjaśniają sposób działania kolejnych części programu. Umieszcza się je poza dwoma znakami "slash". Jeśli interpreter napotka te dwa znaki wtedy ignoruje resztę zawartości linii.

Operatory

Operatory arytmetyczne

W języku JavaScript zaimplementowano szereg operatorów, które pozwalają na konstruowanie dowolnie złożonych instrukcji i wyrażeń logicznych i arytmetycznych. Zestawienia wszelkich operatorów dokonano w poniższych tabelach.

Operator Opis Przykład
+ dodawanie 1+6 wynik 7
- odejmowanie 5-3 wynik 2
* mnożenie 1*6 wynik 6
/ zielenie wynik 3
% modulo (reszta z dzielenia) 3%2 wynik 1

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
var X=3;
var Y=2;
var Z;
//dodawanie
Z=X+Y;
document.write("<H2><BR><BR>Dodawanie<br><BR>");
document.write(X+ "+ " + Y + "= " + Z );
//odejmowanie
Z=X-Y;
document.write("<H2><BR><BR>Odejmowanie<br><BR>");
document.write(X + "- " + Y + "= " + Z );
//mnozenie
Z=X*Y;
document.write("<H2><BR><BR>Mnozenie<br><BR>");
document.write(X + "* "+ Y + "= " + Z );
//dzielenie
Z=X/Y;
document.write("<H2><BR><BR>Dzielenie<br><BR>");
document.write(X + "/ " + Y + "= " + Z );
//modulo
Z=X%Y;
document.write("<H2><BR><BR>Dzielenie modulo<br><BR>");
document.write(X + "% " + Y + "= " + Z );
//dodawanie i mnozenie --- 1 ----
Z=X+Y*3;
document.write("<H2><BR><BR>Dodawanie i mnozenie ---1---<br><BR>");
document.write(X + "+ " + Y + "*3 = " + Z );
//dodawanie i mnozenie --- 2 ----
Z=(X+Y)*3;
document.write("<H2><BR><BR>Dodawanie i mnozenie ---2---<br><BR>");
document.write("("+X + "+ " + Y +")"+ "*3 = " + Z );
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Powyższy skrypt prezentuje sposób działania operatorów arytmetycznych. W dwóch ostatnich instrukcjach, w których wykonywane jest dodawanie i mnożenie istotna jest kolejność wykonywania działań. Tak jak w matematyce działania mnożenia i dzielenia wykonane zostają przed operacjami dodawania i odejmowania. Jeśli zechcielibyśmy odwrócić tą kolejność, wtedy należy zastosować nawiasy. Działanie to zaprezentowano w ostatnim przypadku skryptu. W instrukcji oznaczonej numerem 2, najpierw wykonane zostanie działanie w nawiasie (a więc dodawanie) a dopiero potem mnożenie.

Operatory relacyjne

Operatory relacyjne porównują ze sobą argumenty stojące po ich prawej i lewej stronie a wynikiem ich działania jest jedna z opisywanych wcześniej wartości logicznych. Jako przykład niech posłuży operator mniejszości. W wyniku porównania 7<9 zostanie zwrócona wartość TRUE, ponieważ liczba 7 jest rzeczywiście mniejsza od liczby 9. Operatora "!=" zwraca TRUE jeżeli porównywane przez niego argumenty są różne, w przeciwnym wypadku zwraca wartość FALSE. Zestawienia operatorów relacyjnych dokonano w tabeli:

Operator Opis Przykład
> większy 5>6 wynik FALSE
< mniejszy 7<9 wynik TRUE
== porównanie logiczne 7==7 wynik TRUE
>= większy równy 7>=7 wynik TRUE
<= mniejszy równy 7<=9 wynik TRUE
!= różny 9!=7 wynik TRUE

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
var X=5;
var Y=6;
//operator != - zwraca prawde gdy jego argumenty nie sa sobie rowne
document.write("<H2><BR><BR>Operator !=<BR>");
document.write(X+ "!=" + Y + " wynik " + (X!=Y) );
//operatory mniejszosci I wiekszosci
document.write("<H2><BR>Operator mniejszosci < <H2>");
document.write(X+ "<" + Y + " wynik " + (X<Y)+ "<BR>" );
document.write(Y+ "<" + X + " wynik " + (Y<X));
//operator porownania
document.write("<H2><BR>Operator porownania ==<H2>");
document.write(X+ "==" + Y + " wynik " + (X==Y)+ "<BR>" );
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Powyższy skrypt prezentuje sposób działania operatorów relacyjnych. Każdorazowo porównywane są ze sobą te same zmienne X=5 i Y=6. W pierwszym przypadku otrzymana została wartość "TRUE" - była ona spodziewana, bo argumenty rzeczywiście nie są sobie równe. W podpunkcie dotyczącym operatora mniejszościowego otrzymano najpierw wartość "TRUE", a po zamianie liczb miejscami wartość "FALSE". W przypadku operatorów mniejszości i większości dopuszczających równość "<=" i ">=" zastosowanych do naszych liczb 5 i 6 otrzymalibyśmy te same wyniki. W ostatnim paragrafie dotyczącym operatora porównania "==" zwrócony został wynik "FALSE", z uwagi na to że argumenty nie są sobie równe.

Operatory logiczne

Operatory logiczne jako swe argumenty pobierają wartości logiczne. Operator negacji jest jednoargumentowy. Neguje wartość swojego argumentu. Suma logiczna zwraca wartość TRUE gdy którykolwiek z jej argumentów posiada wartość TRUE. W przypadku iloczynu sytuacja jest odwrotna. Zwraca on wartość TRUE jeśli obydwa jego argumenty są prawdziwe, w przeciwnym wypadku zwraca on wartość FALSE.

Operator Opis Przykład
! negacja !(FALSE) wynik TRUE
&& iloczyn logiczny ((1<2)&&(3>2)) wynik TRUE
|| suma logiczna ((1<2)&&(2<3)) wynik TRUE

Operatory bitowe

Operatory bitowe działają na poziomie bitowym swych argumentów. Ich zestawienia dokonano w tabeli:

Operator Opis Przykład
& iloczyn bitowy -
| suma bitowa -
^ XOR -
<< przesunięcie bitowe w lewo -
>> przesunięcie bitowe w prawo -

Operator przypisania

Operator przypisania jest operatorem dwuargumentowym. Zmiennej, która stoi z jego lewej strony przypisywana jest wartość stałej, lub zmiennej znajdującej się po jego prawej stronie.

Operator Opis Przykład
= przypisanie x=2

W celu uproszczenia zapisu istnieje możliwość połączenia operatora przypisania z dowolnym innym operatorem arytmetycznym bądź bitowym. W takiej sytuacji przypisanie odbywa się na końcu, po obliczeniu operacji bitowej lub arytmetycznej. Poniższa tabela zawiera zestawienie prostego przypisania z kolejnymi operatorami arytmetycznymi.

Operator Opis Przykład
+= dodawanie z przypisaniem x+=2 wynik x=(x+2)
-= odejmowanie z przypisaniem x-=3 wynik x=(x-3)
*= mnożenie z przypisaniem x*=2 wynik x=(x*2)
/= dzielenie z przypisaniem x/=3 wynik x=(x/3)


Operatory inkrementacji i dekrementacji

Użycie tych jednoargumentowych operatorów, powoduje, że zmiennej, która przy nim występuje zostaje przypisana wartość o jeden większa lub o jeden mniejsza.

Operator Opis Przykład
++ inkrementacja wynik x=(x+1)
-- dekrementacja wynik x=(x-1)

Istotną różnicę stanowi to czy operator pojawia się bezpośrednio przed zmienną czy poza nią. Jeśli występuje on jako pierwszy wartość zmiennej zostaje zmieniona przed jej wykorzystaniem. W przypadku odwrotnym, zmienna zostaje najpierw użyta w wyrażeniu, a dopiero potem następuje zmiana jej wartości.

Instrukcje wykonywane warunkowo

Instrukcja if-else

Podczas pisania programów często dochodzi do sytuacji, gdy wykonanie jakiegoś fragmentu kodu chcemy uzależnić od spełnienia (lub nie spełnienia) określonego warunku logicznego.
Najprostszą instrukcją umożliwiającą takie działanie jest instrukcja if-else. Jej wygląd jest następujący:

if (warunek_logiczny){
// instrukcje, które zostaną wykonane gdy warunek logiczny będzie prawdziwy
}else{
// instrukcje, które zostaną wykonane gdy warunek logiczny będzie fałszywy
};

W przypadku gdy warunek logiczny będzie prawdziwy, wtedy wykonane zostaną wszystkie instrukcje objęte pierwszą parą nawiasów klamrowych. W sytuacji odwrotnej, gdy warunek logiczny będzie miał wartość FALSE, wtedy blok instrukcji znajdujący się przed słowem kluczowym else zostanie pominięty. Wykonany zostanie fragment programu znajdujący się wewnątrz drugiej pary nawiasów klamrowych.
W miejsce warunku logicznego może zostać wstawione dowolne wyrażenia operatorowe, lub funkcje zwracające wartości logiczne - TRUE lub FALSE.

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
//Instrukcja powodująca wyświetlenie okienka dialogowego i pobranie wartości od użytkownika
var liczba= prompt("liczba","0");
if(isNaN(liczba)==true){
// Blok instrukcji wykonywany w przypadku gdy
// podana wartość nie będzie liczbą
//************ KOMUNIKAT 1 ******************************
document.write("<H3>Podana wartość nie jest liczbą<H3>");
}else{
// Blok instrukcji wykonywany w przypadku gdy
// podana wartość będzie liczbą
if(liczba>=0){
// Blok instrukcji wykonywany w przypadku gdy
// podana wartość będzie liczbą i będzie ona nieujemna
//************ KOMUNIKAT 2 ******************************
document.write("<H3>Podana wartość jest liczbą nieujemną<H3>");
}else{
// Blok instrukcji wykonywany w przypadku gdy
// podana wartość będzie liczbą i będzie ona ujemna
//************ KOMUNIKAT 3 ******************************
document.write("<H3>Podana wartość jest liczbą ujemną<H3>");
};
};
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Zaprezentowany powyżej przykład najpierw wyświetla okno dialogowe, w którym użytkownik wprowadza dowolną liczbę. Jej wartość jest zwracana przez funkcję window.prompt() i przechowywana wewnątrz zmiennej liczba . Pierwsza instrukcja warunkowa wywołuje funkcję isNaN() (inNotaNumber). Sprawdza ona, czy wartość podana w jej argumencie nie jest liczbą (zwraca wtedy TRUE). Jeśli dojdzie do takiej sytuacji wyświetlany jest KOMUNIKAT 1 i program kończy swoje działanie. W przypadku odwrotnym, jeśli funkcja zwróci wartość FALSE wykonany zostanie blok instrukcji występujący po słowie kluczowym else . Umieszczona została tam druga instrukcja warunkowa, mająca na celu sprawdzenia znaku wprowadzonej przez użytkownika liczby (skoro znaleźliśmy się w tym miejscu programu to mamy już pewność, że użytkownik wprowadził poprawną daną liczbową). Jeśli jest ona większa lub równa zero, wtedy wyświetlony zostanie na ekranie KOMUNIKAT 2 , w przeciwnym wypadku KOMUNIKAT 3. Powyższy przykład pokazuje, że instrukcje warunkowe mogą być zagnieżdżone.

Pętla for(;;)

W przypadku gdy zaistnieje konieczność wykonania danej operacji wiele razy istnieje możliwość skorzystania ze specjalnej instrukcji warunkowej pozwalającej na automatyzację tego procesu. Jest nią pętla. Istnieje kilka rodzajów pętli. Jedną z najczęściej stosowanych jest pętla for(;;). Jej konstrukcja jest następująca.

for(wartość_startowa;test_logiczny;wyrażenie_modyfikujące){
//instrukcje wykonywane wewnątrz pętli
}

Jako pierwszy argument instrukcji podaje się wartość startową specjalnej zmiennej zwanej licznikiem obrotów pętli. Jest ona inicjowana tylko raz - przy pierwszym wykonaniu. Każdorazowo, po pojedynczym obrocie pętli zmieniana jest jej wartość - dokonuje się tego przez odpowiednio zbudowane wyrażenie_modyfikujące, które podawane jako trzeci argument instrukcji. Warunkiem wykonania instrukcji zawartych w bloku instrukcji jest prawdziwy wynik testu_logicznego. Może to być dowolna funkcja lub wyrażenie operatorowe zwracające wartości logiczne TRUE lub FALSE. W przypadku gdy zwróci ono wartość TRUE wtedy wykonany zostanie fragment programu ograniczony nawiasami klamrowymi, w przeciwnym razie sterowanie zostanie przekazane na zewnątrz pętli.

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
for(var i=0;i<6;i++){
   var rozmiar=i+1;
   document.write("<H"+rozmiar+">Dzień Dobry</H"+rozmiar+">");
}
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Powyższy skrypt wyświetla tekst powitania w pięciu różnych rozmiarach nagłówków. Przy pierwszym uruchomieniu inicjowana jest zmienna "i" służąca jako licznik obrotów pętli. Jej wartość początkowa ustawiana jest na 0. Następnie sprawdzany jest warunek logiczny. Ponieważ jest on spełniony, wykonany zostanie blok instrukcji zawartych pomiędzy nawiasami klamrowymi. Dokonywana jest inicjacja zmiennej rozmiar a jej wartość jest zawsze o jeden większa niż wartość licznika pętli (gdy i=0 to rozmiar=1 itd...- dzieje się tak dlatego, że w języku HTML najmniejszy rząd nagłówka, który może zostać poprawnie wyświetlony i zinterpretowany przez przeglądarkę jest równy jeden). W kolejnej linii programu, przy pomocy operatora konkatenacji łańcucha tekstowego zbudowane zostaje wyrażenie, które przeglądarka rozpozna jako nagłówek pierwszego rzędu :

<H1>Dzień Dobry</H1>

Po wyświetleniu powyższego tekstu sterowanie przekazane zostanie znowu do wnętrza instrukcji warunkowej, w tym momencie wyrażenie_modyfikujące zwiększa wartość licznika obrotów pętli, a następnie sprawdzany jest warunek_logiczny. Cały proces rozpoczyna się od nowa z tą jednak różnicą, że licznik pętli ma już wartość o jeden większą niż poprzednio, a skoro i=1 to rozmiar=2, więc przeglądarka otrzyma treść nagłówka drugiego rzędu:

<H2>Dzień Dobry</H2>

W tym momencie zadać można pytanie jak długo trwał będzie ten proces. Odpowiedź jest prosta: to zależy tylko i wyłącznie od tego kiedy test logiczny zwróci wartość FALSE. W powyższym przykładzie nastąpi to po piątym obrocie pętli. Wtedy to sterowanie zostanie zwrócone do wnętrza instrukcji sterującej, wartość licznika pętli zostanie zwiększona o jeden, a więc i=6. W wyniku porównania 6<6 zostanie zwrócony FAŁSZ, co spowoduje, że proces powtarzania instrukcji zostanie przerwany.

Pętla while()

Pętla while ma działanie podobne do opisywanej wcześniej pętli for. Różnica pomiędzy nimi jest taka, że zarówno nadawanie wartości początkowej licznikowi pętli, jak i jego modyfikacja odbywają się poza samym blokiem warunkowym pętli. W jego wnętrzu umieszczony jest tylko i wyłącznie test logiczny, od którego to wyniku zależy czy instrukcje ograniczone nawiasami klamrowymi zostaną wykonane czy też nie. W przypadku tej instrukcji bardzo ważne jest, aby zwrócić uwagę na prawidłowe zbudowanie testu logicznego. Musi on mieć taką konstrukcję, która zagwarantuje skończenie się pętli. Instrukcja ta ma następującą postać:

while(test_logiczny){
//instrukcje wykonywane w przypadku spełnienia warunku logicznego
};

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
//nadanie wartości początkowej
var i=0;
while(i<6){
var rozmiar=i+1;
document.write("<H"+rozmiar+">Dzień Dobry</H"+rozmiar+">");
// modyfikacja licznika obrotów pętli
i++;
}
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Powyższy skrypt ma działanie analogiczne do skryptu opisywanego we wcześniejszym przykładzie. Tym razem jednak zadanie zostało zrealizowane przy pomocy instrukcji warunkowej while. Nadanie wartości początkowej licznikowi obrotów zostaje wykonane przed blokiem warunkowym pętli. Tak samo jak poprzednio, zmienna i otrzymuje wartość 0. Przed wykonaniem instrukcji ograniczonych nawiasami klamrowymi dokonywane jest sprawdzenie wyniku testu logicznego. W przypadku gdy zwróci on wartość TRUE wykonywana jest pętla. Jej treść jest prawie identyczna z omawianym poprzednio przykładem. Widać tylko jedną różnicę. Pojawiło się nowe wyrażenie i++. Bez większego trudu można domyślić się, że służy ono do modyfikacji licznika obrotów pętli. Tak samo jak poprzednio, w trakcie piątego wykonania instrukcji nastąpi zwiększenie wartości zmiennej i i=6.Przez to test logiczny umieszczony wewnątrz bloku warunkowego pętli zwróci wartość FALSE i pętla już więcej się nie wykona.

Instrukcje pomocnicze break i continue

Istnieją dwie instrukcje pomocnicze, które pozwalają na przerwanie procesu wykonywania się pętli. Są to instrukcje continue i break. Chociaż mają one podobne zastosowanie to różni je jedna subtelna różnica. W przypadku instrukcji break pętla przerywana jest bezwarunkowo i natychmiastowo, po jej wywołaniu wykonywany jest kod, który znajduje się poza klamrowym nawiasem zamykającym pętle. W przypadku instrukcji continue sytuacja jest nieco inna. Jej wywołanie powoduje natychmiastowe, ponowne sprawdzenie warunku pętli, a więc sterowanie przenosi się do bloku warunkowego pętli. Działanie to sprawia, że wystąpienie instrukcji continue nie zawsze jest równoznaczne z przerwaniem wykonywania się cyklu instrukcji. Można powiedzieć, że continue powoduje tylko sprawdzenie warunku, zawsze dopuszczona jest możliwość ponownego wykonania pętli.

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
for(var i=0;i<6;i++){
var rozmiar=i+1;
if(rozmiar==4){
// kod zostanie wykonany gdy zmienna rozmiar będzie miała wartość 4
break;
};
document.write("<H"+rozmiar+">Dzień Dobry</H"+rozmiar+">");
}
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Pętla for w normalnych warunkach powtórzyłaby swoje działanie pięć razy, jednak w jej wnętrzu umieszczona została instrukcja przerywająca jej działanie. Przy każdym obrocie dodatkowo następuje sprawdzenie wartości zmiennej rozmiar, w chwili gdy okaże się, że ma ona wartość 4 wtedy powtarzanie bloku instrukcji zostaje przerwane.

Tablice

Tablica jest uporządkowaną strukturą danych służącą do przechowywania wielu wartości. Można ją porównać do swoistego rodzaju kontenera na dane. Każdej wartości wpisanej do jej wnętrza, automatycznie przypisywany jest indeks, przy pomocy którego można się do niej odwołać. Wyobraźmy sobie szereg ludzi stojący w długiej kolejce. Każdy z nich ma przeznaczoną dla nas jakąś informacje, którą przekazuje w chwili wywołania numeru oznaczającego jego pozycję w szeregu (pierwsza osoba ma numer pierwszy, druga drugi, itd...). Opisywany szereg, traktowany jako całość można porównać do tablicy, której kolejne elementy są symbolizowane przez stojących w kolejce ludzi. Wywołanie osoby o określonym numerze to nic innego jak odwołanie się do elementu tablicy o podanym indeksie. Indeksy tablic w języku JavaScript, tak samo jak w C, C++ czy Javie rozpoczynają się od zera. Tak więc pierwszy element znajduje się na pozycji zerowej, a największy indeks n-elementowej tablicy ma wartość (n-1). Liczba ta jest przechowywana w specjalnej właściwości skojarzonej z każdą tablicą. Jej wywołanie jest bardzo intuicyjne. Po nazwie tablicy umieszcza się kropkę, a bezpośrednio po niej nazwę właściwości, w tym przypadku length. Przed użyciem tablicy należy ją zainicjować. Dokonuje się tego przez użycie słowa kluczowego "new" i wywołanie specjalnej instrukcji Array(ilość_elementów_w_tablicy), jako jej parametr podaje się liczbę elementów tablicy - w języku JavaScript jest on jednak opcjonalny i spokojnie można go pominąć. Sposób wykorzystania tablic pokazany jest w poniższym przykładzie:

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
//*** Deklaracja tablicy dane[]
var dane= new Array();
//*** Nadanie wartości elementom tablicy dane
dane[0]="Mariusz";
dane[1]="Wojcik";
dane[2]=23;
//*** Odwolanie sie do wartosci elementow za pomoca indeksow
document.write("Nazywam sie "+dane[0]+" "+dane[1]+" i mam "+dane[2]+" lata");
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

W powyższym przykładzie najpierw następuje inicjacja trzyelementowej tablicy dane[] zawierającej dane osobowe. Potem do tablicy wpisywane są dwie wartości łańcuchowe i jedna liczbowa. Ostatni fragment skryptu korzysta z tych danych i wyświetla je w oknie przeglądarki.

Dostęp do danych umieszczonych w tablicy można zautomatyzować przy pomocy omawianych wcześniej pętli. Sposób ten prezentuje następujący przykład:

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
//*** Deklaracja tablicy dane[]
var dane= new Array();
//*** Nadanie wartości elementom tablicy dane
dane[0]="Mariusz";
dane[1]="Wojcik";
dane[2]=23;
//*** Odwolanie sie do wartosci elementow za pomoca petli for
for(i=0;i<dane.length;i++){
document.write("<H2>Element o indeksie "+i+" jest rowny: "+dane[i]+"<H2>");
};

-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Powyższy przykład jest analogiczny do poprzedniego. Jest w nim wykorzystana taka sama tablica. Istnieje tylko jedna drobna różnica w sposobie wydobywania wartości. W tym przypadku wykorzystany został fakt, elementy tablicy ułożone są kolejno, a różnica wartości dwóch kolejnych indeksów jest równa jeden. Umieszczona w skrypcie zostanie wykonana dopóki licznik pętli "i" nie zrówna się z wartością "dane.length", a więc trzy razy- tyle ile elementów umieszczonych zostało w tablicy. Licznik pętli zmienia się cyklicznie, a więc nic nie stoi na przeszkodzie aby wykorzystać go do indeksowania tablicy.

Funkcje oraz metody

Funkcja jest to stanowiący pewną całość fragment kodu, który jest wykonywany dopiero po jawnym wywołaniu przypisanej mu nazwy. Funkcje mogą zostać wykonywane wielokrotnie, z różnymi parametrami. Posługiwanie się funkcjami w znaczący sposób wpływa na usprawnienie procesu tworzenia programów. Pozwala uniknąć niepotrzebnego powielania kodu. Gotowe funkcje skojarzone ze standardowymi obiektami, które można wykorzystywać przy pisaniu skryptów nazywane są metodami. Przy definiowaniu funkcji należy posługiwać się następującym schematem. Jako pierwsze umieszczone musi zostać słowo kluczowe "function", bezpośrednio po nim znajduje się nazwa funkcji, będąca jej identyfikatorem w treści skryptu, a następnie nawiasy okrągłe, wewnątrz których należy wyspecyfikować listę pobieranych przez nią parametrów. Później, wewnątrz nawiasów klamrowych umieścić należy blok instrukcji, które będą powtarzane przy każdorazowym odwołaniu się do nazwy funkcji.

function nazwa_funkcji(parametr1, parametr2,...,parametr_n){
//blok instrukcji funkcji
};

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
function dzien_dobry(powitanie){
document.write("<H3>"+powitanie+"</H3>");
};
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
<SCRIPT Language = "JavaScript">
dzien_dobry("Dzien Dobry");
dzien_dobry("Good Morning");
dzien_dobry("Gutten Morgen");
</SCRIPT>
</BODY>
</HTML>

W powyższym przykładzie dopatrzeć się można dwóch skryptów. W pierwszym z nich znajduje się definicja funkcji, która jako swój parametr przyjmuje tekst powitania. Wykorzystuje go wewnątrz metody document.write. Jego wartość zostaje wyświetlona jako nagłówek trzeciego stopnia. Drugi skrypt dokonuje trzykrotnego wywołania zdefiniowanej wcześniej funkcji. Za każdym razem przekazana zostaje do niej inna zawartość zmiennej tekstowej. Dzięki temu na ekranie ukazują się trzy różne nagłówki.

Formatowanie tekstów - obiekt String

Wszystkie zmienne tekstowe- a więc te, których wartości objęte są znakiem cudzysłowu są to traktowane przez JavaScript jako obiekty klasy string. Dostarcza ona szereg metod, które ułatwiają formatowanie tekstów. Ich użyteczność polega na tym, że tekst do którego się je zastosuje, zostaje przekazany przeglądarce w otoczeniu odpowiednich znaczników HTML-a, które wpływają na jego wygląd. Poniżej zamieszczona został przykład pokazujące wybrane metody formatowania.

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
//*** powstaje zmienna tekstowa powitanie zawierajaca tekst "Dzien Dobry"
var powitanie=new String("Dzien Dobry!");
//*** przykladowe wykorzystanie metod klasy string
//***<H2><BOLD>Dzien Dobry</BOLD></H2>
document.write("<H2>"+powitanie.bold()+"</H2>");
//***<H2><FONT COLOR="yellow">Dzien Dobry</FONT></H2>
document.write("</H2>"+powitanie.fontcolor("yellow")+"</H2>");
//***<H2><I>Dzien Dobry</I></H2>
document.write("<H2>"+powitanie.italics()+"</H2>");
//***<H2><A HREF="www.okno.pw.edu.pl">Dzien Dobry</A></H2>
document.write("<H2>"+powitanie.link("www.okno.pw.edu.pl")+"</H2>");
//***<H2><SMALL>Dzien Dobry</SMALL></H2>
document.write("<H2>"+powitanie.small()+"</H2>");
//***<H2><BIG>Dzien Dobry</BIG></H2>
document.write("<H2>"+powitanie.big()+"</H2>");
//***<H2><SMALL><I>Dzien Dobry<I></SMALL></H2>
document.write("<H2>"+powitanie.italics().small()+"</H2>");
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

W powyższym przykładzie zainicjowany został bardzo prosty obiekt tekstowy zawierający tekst powitania. Kolejne linie skryptu pokazują możliwe sposoby jego modyfikacji przy pomocy gotowych metod JavaScript. Niewątpliwie jest to duże ułatwienie, ponieważ dzięki temu uniknąć można żmudnego i uciążliwego wpisywania znaczników HTML. Zaprezentowany przykład dotyczy tylko wybranych metod dostępnych w klasie string- więc ma charakter poglądowy.

Odczyt daty systemowej - obiekt Date

Język JavaScript udostępnia obiekt, którego metody pozwalają na odczytywanie i modyfikacje daty systemowej. Krótki przegląd najważniejszych, wybranych metod dostarczanych z obiektem Date przedstawia poniższa tabela:

Metoda Opis
getMinutes() zwraca liczbę określającą minuty
getHours() zwraca liczbę określającą godziny
getDay() zwraca liczbę określającą numer dnia w tygodniu
getDate() zwraca liczbę określającą numer dnia w miesiącu
getYear() zwraca liczbę określającą rok
toLocaleString() przekształca datę do formatu lokalnego

Poniższy przykład pokazuje sposób wykorzystania zaprezentowanych metod.

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
//*** tworzymy obiekt daty
var date= new Date();
//*** tworzymy pomocniczy obiekt do przechowywania nazw dni
var dzien;
//*** pobieramy liczbe okreslajaca rok
var rok = date.getYear();
//*** pobieramy liczbe okreslajaca dzien tygodnia
var dzien_tygodnia = date.getDay();
//*** pobieramy liczbe okreslajaca godzine
var godzina = date.getHours();
//*** pobieramy liczbe okreslajaca minuty
var minuty = date.getMinutes();
if(dzien_tygodnia==0) dzien="niedziela";
else
if(dzien_tygodnia==1) dzien="poniedzialek";
else
if(dzien_tygodnia==2) dzien="wtorek";
else
if(dzien_tygodnia==3) dzien="sroda";
else
if(dzien_tygodnia==4) dzien="czwartek";
else
if(dzien_tygodnia==5) dzien="piatek";
else
if(dzien_tygodnia==6) dzien="sobota";
document.write("<H1>Dzis jest "+dzien+" - "+dzien_tygodnia+" dzien tygodnia </H1>");
document.write("<H2>Jest "+minuty+" minut po godzinie "+godzina+"</H2>");
document.write("<H3>Aktualnie mamy rok "+rok+"</H3>");
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Na samym początku skryptu tworzony jest obiekt reprezentujący aktualną datę. Potem zostaje on wykorzystany do nadania wartości pomocniczym obiektom, które przechowują informacje dotyczące roku, dnia tygodnia, godzin i minut. W wyniku wykonania serii instrukcji "if-else" zmienna "dzien" otrzymuje wartość tekstową określającą nazwę aktualnego dnia tygodnia. Przy pomocy instrukcji "document.write()" wyświetlone zostają wszystkie uzyskane w ten sposób informacje.

Funkcje matematyczne - obiekt Math

Język JavaScript umożliwia wykorzystanie standardowych funkcji matematycznych skojarzonych z obiektem klasy Math. Encyklopedyczne zestawienie wybranych metod zamieszczono poniżej:

Metoda Opis
abs(wartość) zwraca wartość bezwzględną argumentu
sin(wartość_w_radianach) analogicznie cos(wartość_w_radianach) zwraca wartość sinusa (cosinusa) w radianach
asin(wartość) analogicznieacos(wartość) zwraca wartość arcus sinus(arcus cosinus)
log(wartość) zwraca wartość logarytmu dziesiętnego
pow(podstawa,wykładnik) podnosi jedną liczbę do potęgi drugiej
sqrt() zwraca wartość pierwiastka liczby
random() losuje liczbę z zakresu (0-1)

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
//*** argument w stopniach
var stopnie=30;
//*** argument w radianach
var radiany=(Math.PI*stopnie)/180;
//*** liczby pomocnicze
var podstawa=3,wykladnik=3;
//*** tekstowy reprezentant liczby wykladnika
var wykladnik_tekst=new String(wykladnik);
document.write("<H3>Sinus 30 stopni "+ (Math.sin(radiany))+"<H3>");
document.write("<H3>Cosinus 30 stopni "+ (Math.cos(radiany))+"<H3>");
document.write("<H3>Tangens 30 stopni "+ (Math.tan(radiany))+"<H3>");
document.write("<H3>"+ podstawa + wykladnik_tekst.sup()+" = "+ (Math.pow(podstawa,wykladnik))+"<H3>");
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

W zamieszczonym przykładzie pokazany został sposób wykorzystania niektórych funkcji matematycznych. Na samym początku tworzone są argumenty dla funkcji trygonometrycznych- pierwszy w stopniach, drugi w radianach. Potem umieszczona została deklaracja dwóch liczb całkowitych - "podstawa" i "wykładnik". Bezpośrednio poniżej tworzony jest obiekt klasy String, którego wartością jest liczba przechowywana w zmiennej "wykładnik" - w tym przypadku -3. Trzy kolejne linie pokazują sposób działania matematycznych funkcji trygonometrycznych, a ostatnia funkcji podnoszącej jedną liczbę do potęgi drugiej liczby.

Obiekt document - sterowanie wyglądem dokumentu

Obiekt ten reprezentuje aktualnie wyświetlany dokument. Udostępniane przez niego metody i atrybuty pozwalają kontrolować i aktywnie wpływać na sposób prezentacji strony HTML. Umożliwiają wpływanie na większość parametrów ustalanych wewnątrz znacznika <BODY>. Krótkie zestawienie niektórych z nich zamieszczono poniżej:

Atrybut Opis
document.title definiuje tytuł dokumentu
document.bgColor definiuje kolor tła dokumentu
document.fgColor definiuje kolor tekstu dokumentu
document.linkColor definiuje kolor nieużywanego linku
document.alinkColor definiuje kolor aktywowanego linku
document.location zwraca pełny adres dokumentu
document.lastModified zwraca datę ostatniej modyfikacji
document.referrer zwraca adres dokumentu z którego został wywołany

<HTML>
<HEAD>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD> <BODY>
<SCRIPT Language = "JavaScript">
<!--
//*** definicja tytulu dokumentu
document.title="Wlasciwosci obiektu Document";
//*** definicja koloru tla dokumentu
document.bgColor="black";
//*** definicja koloru tekstu dokumentu
document.fgColor="yellow";
//*** definicja koloru linkow
document.linkColor="red";
document.alinkColor="green";
//*** wyswietlenie adresu dokumentu
document.write("<H4>Dokument ktory przegladasz ma adres: "+document.location+"</H4>");
//*** wyswietlenie daty ostatniej modyfikacji
document.write("<H4>Ostatnio byl on modyfikowany: "+document.lastModified+"</H4>");
-->
</SCRIPT>
<A HREF="http://www.okno.pw.edu.pl">www.okno.pw.edu.pl</A>
</BODY>
</HTML>


Sterowaniem wyglądu aktualnego okna - obiekt window

Obiekt window jest zdecydowanie najważniejszy. Jego właściwości i metody pozwalają wpływać na zachowanie i wygląd okna przeglądarki. Poniżej zestawiono przegląd jego głównych atrybutów i metod.

Metoda Opis
window.open() powoduje otwarcie nowego okna
window.prompt() otwarcie okna dialogowego
window.alert() otwarcie okna informacyjnego
window.confirm() otwarcie okna informacyjnego
window.close() zamknięcie okna

Za pomocą atrybutów związanych z obiektem window można również kontrolować i wpływać na tekst, który pojawia się na pasku statusu przeglądarki. Dokonuje się tego przez modyfikację właściwości window.status.

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
//*** otwiera okno przegladarki
window.status="otwiera okno przegladarki";
window.open("http://www.okno.pw.edu.pl");

//*** otwiera okno dialogowe
window.status="otwiera okno dialogowe window.confirm()";
window.confirm("Okno dialogowe window.confirm()");
//*** otwiera okno ostrzezen
window.status="otwiera okno ostrzezen window.alert()";
window.alert("Okno dialogowe window.alert()");
//*** otwiera okno dialogowe sluzace do pobierania danych
window.status="otwiera okno dialogowe window.prompt()";
window.prompt("Okno dialogowe window.prompt()");
//*** zamyka okno przegladarki
window.status="zamyka okno przegladarki";
window.close();
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

W wyżej zaprezentowanym przykładzie następuje seria kolejnych wywołań opisywanych wcześniej metod. Przy każdym wywołaniu modyfikowany jest pasek statusu przeglądarki.

Zastosowanie języka JavaScript do weryfikacji danych wprowadzonych przez użytkownika

Bardzo ważnym elementem, w znaczący sposób wpływającym na interaktywność stron WWW jest wspomagana przez JavaScript obsługa formularzy. Zgodnie z omawianym na samym początku lekcji hierarchicznym modelem DOM istnieje możliwość wykrycia pewnych zdarzeń, które miały miejsce na formularzu, a także dotarcia i modyfikacji danych wprowadzonych przez użytkownika z poziomu skryptów stworzonych w języku JavaScript.

Dostęp do wszystkich formularzy zamieszczonych na stronie jest możliwy dzięki istnieniu specjalnego obiektu podległego obiektowi document. Nazywa się on document.forms[] i jest to tablica, w której przechowywane są wszystkie formularze. Odwołanie się do jej elementów odbywa się tak samo jak w zwykłej tablicy - przez kolejne indeksy. Każdy formularz ma swoją nazwę, która została wyspecyfikowana wewnątrz znacznika <FORM> zamieszczającego go na stronie:

<FORM Name="nazwa_formularza"> </FORM>


We wnętrzu formularza umieszczać można różne typy elementów, najczęściej używane to :
Pole tekstowe definiowane jako:

Można wyobrazić sobie bardzo prostą funkcję napisaną w języku JavaScript, która będzie weryfikowała poprawność wprowadzonych danych w formularzu. Dostęp do wartości poszczególnych pól uzyskuje się dzięki następującym odwołaniom:

zmienna=document.forms[0].nazwa_pola.value

W jego wyniku dowolnej zmiennej zostanie przypisana wartość pola o nazwie "nazwa_pola" pierwszego formularza na stronie. O tym do którego formularza się odwołujemy decyduje indeks tablicy forms[]. Pierwszy formularz ma indeks zerowy, drugi ma indeks równy 1 - jest to całkowicie zgodne z omówionymi wcześniej regułami dotyczącymi indeksowania tablic.

Wyobraźmy sobie sytuację, że budujemy witrynę w jakimś systemie, wymagającym uwierzytelniania użytkownika. Dane uzyskane od niego są wprowadzane do bazy danych, a więc zależy nam na tym by były one poprawne. Poniższy przykład prezentuje prosty skrypt dokonujący weryfikacji poprawności danych. Zostaną one uznane za prawidłowe jeśli:

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
function sprawdz_dane(){
var mojFormularz = document.forms[0];
//*** sprawdz czy uzytkownik podal swoj login
if(mojFormularz.login.value==""){
alert("Nie zdefiniowales pola Login!");
}else
//*** sprawdz czy uzytkownik podal haslo
if(mojFormularz.haslo.value==""){
alert("Pole haslo musi zostac wypelnione!");
}else
//*** sprawdz czy uzytkownik potwierdzil haslo
if(mojFormularz.potwierdzenie.value==""){
alert("Pole Powierdzenie musi zostac wypelnione!");
}else
//*** sprawdz czy uzytkownik podal imie
if(mojFormularz.imie.value==""){
alert("Pole Imie musi zostac wypelnione!");
}else
//*** sprawdz czy uzytkownik podal nazwisko
if(mojFormularz.nazwisko.value==""){
alert("Pole Nazwisko musi zostac wypelnione!");
}else
//*** sprawdz czy uzytkownik podal adres e-mail
if(mojFormularz.email.value==""){
alert("Pole E-mail musi zostac wypelnione!");
}else
//*** sprawdz czy uzytkownik haslo jest prawidlowo potwierdzone
if(mojFormularz.haslo.value!=mojFormularz.potwierdzenie.value){
alert("Haslo nie zostalo poprawnie potwierdzone!");
}else
//*** sprawdz czy haslo ma odpowiednia dlugosc
if(mojFormularz.haslo.length<5){
alert("Haslo nie moze byc krotsze niz 5 znakow!");
}else
//*** sprawdz czy adres email jest prawidlowy
if(mojFormularz.email.value.indexOf("@")<2){
alert("Adres e-mail zostal podany blednie!");
}else
alert("Formularz jest poprawny!");
}
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY bgcolor=#FF9744>
<BR><BR><BR>
<FORM NAME="rejestrajcja">
<TABLE ALIGN="center">
<TR>
<TD>Login (*)</TD><TD><INPUT TYPE="text" NAME="login" ></TD>
<TD>Imie(*)</TD><TD><INPUT TYPE="text" NAME="imie" ></TD>
</TR>
<TR>
<TD>Haslo(*)</TD><TD><INPUT TYPE="password" NAME="haslo" ></TD>
<TD>Nazwisko(*)</TD><TD><INPUT TYPE="text" NAME="nazwisko" ></TD>
</TR>
<TR>
<TD>Potwierdzenie(*)</TD><TD><INPUT TYPE="password" NAME="potwierdzenie">
</TD>
<TD>Miasto</TD><TD><INPUT TYPE="text" NAME="miasto" ></TD>
</TR>
<TR>
<TD>E-mail(*)</TD><TD><INPUT TYPE="text" NAME="email" ></TD>
<TD>Konto</TD><TD><INPUT TYPE="text" NAME="konto" ></TD>
</TR>
<TR>
<TD COLSPAN="4" ALIGN="center"><INPUT TYPE="button" VALUE="Weryfikacja" onClick="sprawdz_dane()"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Działanie skryptu jest bardzo proste. Po naciśnięciu przycisku (zajściu zdarzenia onClick dla przycisku button) uruchamiana jest funkcja sprawdz_dane(). Przy pomocy instrukcji if-else wykonywana jest seria testów na danych. Gdy wartość nie spełnia któregokolwiek z kryteriów, wtedy wyświetlane jest okno informacyjne i dalsze testy są przerywane. W przypadku gdy wszystkie kryteria poprawności zostaną spełnione, wtedy wyświetlane jest okienko dialogowe potwierdzające poprawność danych.

Co to jest zdarzenie?

Zajście zdarzenia informuje nas o tym, że doszło do jakiejś określonej sytuacji np.: nastąpiło kliknięcie przyciskiem myszki, bądź przesunięcie kursora myszki nad jakimś obiektem. JavaScript jest wyposażony w bogaty mechanizm reagowania na zdarzenia. Wychwytuje je, potem klasyfikuje i w zależności od jego rodzaju podejmuje odpowiednią, przypisaną do niego akcję. Pozwala to na tworzenie interaktywnych stron WWW, które potrafią "inteligentnie" reagować na różne zachowania użytkownika.

Sposób obsługi zdarzenia

Aby zdarzenie mogło zostać poprawnie obsłużone musi dojść do skojarzenia jego nazwy z instrukcjami, które mają zostać wykonane w chwili jego zajścia. Kojarzenia tego dokonuje się we wnętrzu znacznika obiektu, którego ono dotyczy. Jego postać jest następująca:

<nazwa_obiektu parametry_obiektu nazwa_zdarzenia="instrukcje">

Wewnątrz znaku cudzysłowu może znaleźć się również nazwa funkcji, która ma zostać wywołana w przypadku zajścia zdarzenia.

Zdarzenie onLoad()

Zdarzenie zachodzi, jeżeli dokument, którego dotyczy, zostanie poprawnie załadowany. Umieszcza się go wewnątrz znacznika <BODY>. Procedura jego obsługi ma ogólną postać:

<BODY parametry_obiektu onLoad="instrukcje_JavaScript">

Jego praktyczne zastosowanie prezentuje przykład:

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
function dzien_dobry(powitanie){
document.write("<H3>"+powitanie+"</H3>");
window.alert("Strona zostala zaladowana poprawnie");
};
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY onLoad="dzien_dobry('Hej dzien dobry! Gratulacje! Strona zaladowala sie poprawnie')">
</BODY>
</HTML>

Obsługa zdarzenia onLoad znajduje się wewnątrz znacznika <BODY>. W przypadku jego zajścia, a więc po całkowitym załadowaniu strony wywoływana jest zdefiniowana wcześniej funkcja "dzien_dobry()". Jako jej parametr podawany jest łańcuch tekstowy z treścią powitania. Funkcja ta oprócz wyświetlenia tekstu wywołuje jeszcze okienko informacyjne, które powiadamia użytkownika, że proces ładowania strony przebiegł pomyślnie.

Zdarzenie onUnload()

Obsługa tego zdarzenia jest wykonywana wtedy, gdy użytkownik zamyka okno przeglądarki. Jego postać jest analogiczna do wcześniej opisywanej konstrukcji dotyczącej zdarzenia onLoad. Sposób użycia procedury obsługi zdarzenia wyjaśnia przykład:

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
function start(){
window.alert("Gratulacje! Strona zaladowala sie poprawnie");
};

function stop(){
window.alert("Do zobaczenia znowu!");
};
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY onLoad="start()" onUnload = "stop()">
</BODY>
</HTML>

Powyższy skrypt definiuje dwie funkcje- jedna z nich -start()-wykonywana jest przy wchodzeniu na stronę, a druga- stop()- przy zamykaniu okna przeglądarki.

Zdarzenie onClick()

Zdarzenie to zachodzi wtedy gdy użytkownik kliknie lewym przyciskiem myszki na obiekcie z którym jest ono związane. Sposób jego wykorzystania pokazuje następujący skrypt:

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--

function wyswietl_opis(id){
if(id==1)nazwa="Merkury";
else
if(id==2)nazwa="Wenus";
else
if(id==3)nazwa="Ziemia";
else
if(id==4)nazwa="Mars";
else
if(id==5)nazwa="Jowisz";

window.alert(nazwa);
}

function wyswietl_planety(){
document.write("<H3 ALIGN='CENTER'><FONT COLOR='YELLOW'>Kliknij na zdjecie!</FONT></H3>");
document.write("<TABLE BORDER='1' ALIGN='CENTER'>");
document.write("<TR>");
for(var i=1;i<=5;i++){

//*** Budujemy sciezki dostepu do zdjec kolejnych planet
//*** Wykorzystujemy fakt ze roznia sie one miedzy soba
//*** Tylko numerem kolejnym, ktory zmienia sie tak jak
//*** licznik obrotow petli
sciezka="'./zdjecia/planeta"+i+".jpg'";

//*** Budujemy wyrazenie opisujace procedure obslugi zdarzenia
//*** onClick
zdarzenie="onClick='wyswietl_opis("+i+")'";

//*** Laczymy stworzone wczesniej wyrazenia w jedna calosc
document.write("<TD><IMG SRC="+sciezka+"width='60'height='60'"+zdarzenie+"></TD>");
};

document.write("<TR>");
document.write("</TABLE>");

};
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY BGCOLOR="black">
<SCRIPT Language = "JavaScript">wyswietl_planety()</SCRIPT>
</BODY>
</HTML>

Wewnątrz przykładu bez trudu można doszukać się definicji dwóch funkcji. Pierwsza z nich wyswietl_planety() pełni kluczową rolę. Pierwsze trzy linie powodują wyświetlenie nagłówka, oraz wstawiają znaczniki wstawiające tabelę do dokumentu. Poniżej występuje instrukcja powtarzania warunkowego, która zostanie wykonana pięciokrotnie (dla i=1,2,3,4,5). Pliki, w których zapisane są zdjęcia mają specjalną budowę. Pierwszy z nich nazywa się planeta1.jpg, drugi planeta2.jpg, itd... Własność ta została wykorzystana w kolejnym wierszu pętli. Przy pomocy operatora konkatenacji (łączenia) napisów, budowane jest wyrażenie opisujące ścieżkę dostępu do pliku zdjęcia. Stała wartość łańcucha, każdorazowo łączona jest ze zmieniającym się przy każdym obrocie pętli licznikiem i. Przykładowo, przy pierwszym obrocie pętli gdy i=1, następujące przypisanie:

sciezka="'./zdjecia/planeta"+i+".jpg'";

sprawi, że zmiennej tekstowej sciezka przypisana zostanie wartość "sciezka='./zdjecia/planeta1.jpg'". Analogiczna właściwość została wykorzystana do budowy wyrażenia tekstowego opisującego procedurę obsługi zdarzenia onClick.

zdarzenie="onClick='wyswietl_opis("+i+")'";

Powoduje ono, że po kliknięciu przez użytkownika na obrazku danej planety, wywoływana jest funkcja wyswietl_opis(), której parametrem jest numer danej planety. Wewnątrz tej funkcji następuje sprawdzenie parametru i przypisanie zmiennej tekstowej odpowiadającej mu wartości. W ostatnim kroku wywoływana jest metoda window.alert(), z nazwą planety.

Zdarzenie onMouseOver()

Zdarzenie to zachodzi gdy kursor myszki znajdzie się nad elementem z którym jest ono skojarzone. Aby zaprezentować specyfikę jego działania można się posłużyć poprzednim przykładem. Konieczna będzie jednak jego drobna modyfikacja.

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
function wyswietl_opis(id){
if(id==1)nazwa="Merkury";
else
if(id==2)nazwa="Wenus";
else
if(id==3)nazwa="Ziemia";
else
if(id==4)nazwa="Mars";
else
if(id==5)nazwa="Jowisz";
window.alert(nazwa);
}

function wyswietl_planety(){
document.write("<H3 ALIGN='CENTER'><FONT COLOR='YELLOW'>Kliknij na zdjecie!</FONT></H3>");
document.write("<TABLE BORDER='1' ALIGN='CENTER'>");
document.write("<TR>");
for(var i=1;i<=5;i++){
//*** Budujemy sciezki dostepu do zdjec kolejnych planet
//*** Wykorzystujemy fakt ze roznia sie one miedzy soba
//*** Tylko numerem kolejnym, ktory zmienia sie tak jak
//*** licznik obrotow petli
sciezka="'./zdjecia/planeta"+i+".jpg'";

//*** Budujemy wyrazenie opisujace procedure obslug zdarzenia
//*** onMouseOver
zdarzenie="onMouseOver='wyswietl_opis("+i+")'";

//*** Laczymy stworzone wczesniej wyrazenia w jedna calosc
document.write("<TD><IMG SRC="+sciezka+"width='60'height='60'"+zdarzenie+"></TD>");
};

document.write("<TR>");
document.write("</TABLE>");

};
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY BGCOLOR="black">
<SCRIPT Language = "JavaScript">wyswietl_planety()</SCRIPT>
</BODY>
</HTML>

Od razu można dostrzec, że obydwa skrypty są prawie identyczne. Różni je tylko jedna linia:

zdarzenie="onClick='wyswietl_opis("+i+")'";

Powyższą linię z poprzedniego przykładu należy wymienić na zamieszczoną poniżej:

zdarzenie="onMouseOver='wyswietl_opis("+i+")'";

Jak widać zmienie uległa tylko nazwa zdarzenia.

Zdarzenie onMouseOut()

Zdarzenie onMouseOut jest generowane w chwili gdy kursor myszki opuszcza krawędź obiektu. Specyfika jego działania jest bardzo zbliżona do omawianego poprzednio. Za przykład niech posłuży następujący skrypt:

<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
<!--
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY BGCOLOR="black">
<IMG SRC="./zdjecia/planeta2.jpg" width="200" height="200" ALIGN="CENTER"
onMouseOut="window.alert('Oops! Zdarzenie onMouseOut!')">
</BODY>
</HTML>

Skrypt ten wyświetla jedno zdjęcie, jeśli użytkownik najpierw wskaże je kursorem, a potem poruszy myszką to zostanie wyświetlone okienko informacyjne informujące o zajściu zdarzenia onMouseOut.