. - JavaScript od podstaw

Wprowadzenie

HTML można powiedzieć, że był rewolucją. Umożliwił prezentowanie danych na stronach www. Oczywiście był on bardzo prosty i posiadał wiele wad, czyli prezentowanie danych w najprostszej statycznej formie.

Wraz z rozwojem Internetu rosły aspiracje osób tworzących strony www. Chciano uzyskać większą kontrolę nad stronami oraz (co najważniejsze) umożliwić interakcję użytkownika z przeglądarka. Naprzeciw tym potrzebom wyszedł Netscape, który opracował JavaScript - język programowania pozwalający tworzyć do pewnego stopnia dynamiczne i interaktywne strony www.

W JavaScript tworzone są programy który współdziałają z HTML. Umożliwia to wprowadzenie elementów interaktywnych na stronach internetowych. W wyniku tego przeglądarka może reagować nawet na najmniejszy ruch myszką!
JavaScript można zastosować m.in. w:
- interaktywnych grach
- dynamicznych formularzach, w których możemy np. sprawdzić poprawność danych
- tworzeniu efektów (ruchomy tekst, animacje, wykorzystanie dźwięku)
- tworzenie komunikatów, okienek dialogowych
- dynamiczne modyfikacje wyglądu strony (zmiana tła, tekstu, ...)
- tworzenie stron html w zależności od potrzeb użytkownika
- wykonywanie skomplikowanych obliczeń matematycznych
- komunikacja pomiędzy elementami strony (np. ramki)
- wykorzystanie JavaScriptu jako "silnika napędzającego" DHTML !
...

i wiele, wiele więcej :-)

Nie sposób dokładnie przedstawić wszystkich zastosowań języka JavaScript. Jest on ciągle modernizowany i ulepszany. Dzięki temu, że jest on zorientowany obiektowo pozwala osiągnąć znakomite efekty wykorzystując obiekty i ich metody. W następnych częściach kursu będę starał się przybliżyć Wam te zagadnienia jak najlepiej.

Tak więc, jeżeli chcesz zgłębić JavaScript to zapraszam dalej, postaram się wytłumaczyć Ci to jak najlepiej...

Jak pisać skrypty?

Na samym początku całego kursu JavaScript powinieneś szczegółowo zapoznać się z tą lekcją. Przedstawię tutaj podstawowe zasady którymi powinieneś kierować się w dalszej pracy z JavaScriptem. Więc... zapraszam dalej :-)

Ogólny schemat skryptu wygląda następująco:

Cały kod naszego skryptu umieszczamy pomiędzy znacznikami <SCRIPT></SCRIPT> oraz znakami komentarza. Więcej na ten temat przeczytasz w następnej lekcji. Nas teraz interesuje zawartość kodu.

W kodzie JavaScript możemy znaleźć instrukcje. To dzięki nim wykonywane są wszystkie zaplanowane czynności skryptu. Możemy użyć dowolnej liczby instrukcji, musimy je jedynie umieścić pomiędzy klamrami:

{instrukcja 1
instrukcja 2
instrukcja 3
...
}

Wpisanie samych instrukcji nic nam nie da. Nie zostaną one w żaden sposób wywołane. Aby je wywołać muszą być zamieszczone w jakiejś funkcji, schemat:

function Nazwa(zmienna)
{instrukcja 1
instrukcja 2
instrukcja 3
...
}

W zależności od tego jakie warunki ustawimy w naszej funkcji, instrukcje zostaną wykonane. Więcej o funkcji możesz przeczytać w następnych lekcjach.

Ostatnią bardzo pożyteczną sprawą są komentarze. Dzięki nim nasz skrypt stanie się bardziej czytelny ponieważ w każdej chwili będziemy mogli skomentować sobie dany fragment kodu co w efekcie pozwoli nam uniknąć zagubienia się w skrypcie.
Mam kilka rodzajów komentarzy:

// To jest krótki komentarz zajmujący jedną linię

/* To jest komentarz
zajmujący więcej linii
*/

Na koniec przedstawię jeszcze przykładowy skrypt, który pokaże prawidłową budowę kodu:

<SCRIPT LANGUAGE="JavaScript"> <!-

//To jest prosty skrypt wypisujący zdanie na ekranie :-)

document.write("Pierwsze zdanie w JavaScript")

//Koniec kodu skryptu

//-->
</SCRIPT>

Umieszczanie skryptów na stronie

Możemy wyróżnić trzy główne miejsca gdzie istnieje możliwość umieszczenia skryptów JavaScript: pomiędzy znacznikami <HEAD></HEAD>, w zewnętrznych plikach lub pomiędzy znacznikami <BODY> i </BODY>

Oczywiście kod JavaScript także umieszczamy pomiędzy specjalnymi znacznikami <SCRIPT></SCRIPT>. Znaczniki te wyznaczają w dokumencie HTML miejsce na kod JavaScript np.

<HTML>

<HEAD>
</HEAD>
<BODY>

<SCRIPT>
document.write("Mój pierwszy skrypt")
</SCRIPT>

</BODY>
</HTML>

Podobnie postępujemy umieszczając nasz skrypt w sekcji HEAD zamiast BODY.

Znacznik <SCRIPT> posiada dwa atrybuty:

LANGUAGE - określa język w którym został napisany skrypt, w naszym przypadku

<SCRIPT LANGUAGE="JavaScript">

SRC - służy do określenia ścieżki do zewnętrznego pliku zawierającego kod JavaScript. Jest to ostatni sposób umieszczania skryptów na stronach. Cały kod piszemy w pliku tekstowym (bez żadnych znaczników <SCRIPT>). Powiedzmy, że nasz plik nazywa się skrypt.txt wówczas znacznik SCRIPT będzie wyglądał następująco:

<SCRIPT LANGUAGE="JavaScript" SRC="skrypt.txt">

Teraz umieścimy kilka skryptów na stronie, wykorzystując każdy z możliwych sposobów. Każdy ze skryptów będzie wypisywał jakiś tekst:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
document.write("To jest tekst wyświetlany przez pierwszy skrypt")
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript" SRC="skrypcik.txt"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
document.write("To jest tekst wyświetlany przez trzeci skrypt")
</SCRIPT>

</BODY>
</HTML>

Zawartość pliku skrypcik.txt :

document.write("To jest tekst wyświetlany przez drugi skrypt ")

Tak wyglądają wszystkie możliwości wstawiania skryptów na stronę www. Ale co zrobić jeżeli dana przeglądarka nie obsługuje JavaScript? Na to też jest metoda :-)
Jeżeli mamy do czynienia ze starą wersją przeglądarki (Netscape 1.x i IE 3) to najlepiej jeżeli kod JavaScript będzie ignorowany. Służa d tego znaczniki komentarza, dzięki temu to, czego przeglądarka nie będzie mogła obsłużyć zostanie zignorowane! Oto przykład:

W ten sposób można w łatwy sposób ukryć skrypt, co może zapobiec błędnemu zinterpretowaniu kodu.

Zmienne

Wszystkie zmienne tworzone w JavaScript mogą przechowywać dane różnorodnych typów. Mogą to być liczby, zestaw liter tworzących wyrazy lub nawet zdania oraz ciągi liczb i liter.

Zmienne deklaruje się za pomocą instrukcji var. Podczas definiowania zmiennej możemy przypisać jej jakąś wartość np.

var liczba=24 var tekst="Jakiś tekst"

W pierwszym przypadku do zmiennej liczba przypisaliśmy 24, natomiast za drugim razem do zmiennej tekst przypisaliśmy wartość: Jakiś tekst.

Zmienne w języku JavaScript nie mają ustalonych typów - mogą one przechowywać wartośći dowolnego typu danych.

Na koniec kilka bardzo ważnych rad które musisz zapamiętać. W przyszłości z całą pewnością zaoszczędzą Ci wiele stresów :-)

1. Nazwy zmiennych w przeciwieństwie do wartości znakowych nie zapisuje się w cudzysłowach.
2. JS rozróżnia duże i małe litery. Tak więc zmienna Tekst nie będzie traktowana jako zmienna TeKsT.
3. Nazwa zmiennych nie może zawierać spacji.
4. Nazwa nie może być słowem zarezerwowanych dla JavaScript.
5. Nazwa zmiennych powinna zacząć się od litery lub znaku podkreślenia "_".

Zmienne mogą przyjmować następujące wartości:
wartości liczbowe, łańcuchy znaków, wartości logiczne, wartość null

Więcej o typach zmiennych możesz przeczytać w dalszej części kursu.

Typy danych: Liczby

Jedną z wartości w JavaScript są liczby. Oczywiście mogą one mieć różne formy zapisu, tak więc możemy mieć liczby całkowite jak i zmiennoprzecinkowe. Liczby możemy także zapisywać w trzech różnych systemach:
- dziesiętny, np. 243
- ósemkowy, z prefiksem 0, np. 064 (zapis ten może posiadać jedynie cyfry od 0 do 7)
- szesnastkowy, z prefiksem 0x lub 0X, np. 0x26A, 0X34F (cyfry 0-9 i litery A-F)

Systemy te bardzo przydadzą się w innych językach programowania. W sumie jest to podstawa informatyki więc nie zaniedbuj tego tematu :-)

Jeżeli chcesz zapisać liczbę z przecinkiem to pamiętaj (!), że zamiast przecinka używamy kropki "."

Na koniec do zmiennej "liczba" dopiszemy wartość liczbową:

var liczba=20.5 // system dziesiątkowy
var liczba=20 // liczba całkowita

Jak łatwo zauważyć wartości liczbowej nie przypisujemy w cudzysłowach. Robimy tak natomiast gdy do zmiennej przypisujemy łańcuchy znaków. Ale o tym w następnej części.

Typy danych: Łańcuchy

Łańcuchy znaków najprościej mówiąc jest to zestaw dowolnych liter, cyfr i innych znaków. Łańcuchy umieszczane są pomiędzy cudzysłowami "i" lub apostrofami 'i'.

"wyraz"
"to zdanie też jest łańcuchem znaków"
"45561"
"ulica 25"

Łańcuchy znaków można także zagnieżdżać. Aby to wykonać zewnętrzny łańcuch musi znajdować się w cudzysłowach a wewnętrzny w apostrofach np.

"najpierw łańcuch 'tutaj już wewnętrzny' zewnętrzny"

Jak widzisz łańcuch może się składać z dowolnych znaków i mieć dowolną długość.

Ale co zrobić jeżeli chcemy w jakiś sposób sformatować tekst w łańcuchu? lub użyć cudzysłów? Otóż należy zauważyć, że umieszczenie w łańcuchu lewego ukośnika "" zmienia znaczenie znaku, który występuje za nim. Jak możemy to wykorzystać pokazuje poniższa tabela:
b - cofnięcie (backspace)
f - Wysunięcie strony
n - Nowy wiersz
r - Powrót karetki
t - Tabulacja
' - apostrof
" - cudzysłów
- znak lewego ukośnika

Tak więc, jeżeli chcemy w naszym łańcuchu użyć cudzysłowa to nasz zapis będzie musiał wyglądać mniej więcej tak:

"Tytuł spektaklu "Zemsta i kara" "

Typy danych: Wartości logiczne i null

Wartości logiczne
Wartości logiczne są także nazywane typem boolowskim. Mogą one przybierać jedną z dwóch wartości - True lub False. Jak łatwo się domyśleć pierwsza prezentuje prawdę i może być zastąpiona wartością YES lub 1. Natomiast druga to fałsz i może przyjmować wartości NO lub 0.

Tego typu wartości są używane gdy zachodzi potrzeba porównania dwóch zmiennych lub podczas podejmowania jednej z dwóch decyzji.

Wartości logiczne
Jest to wartość która oznacza... brak wartości ! :-) Wartość ta jest zwracana przez funkcję np. gdy nie zostanie znaleziony jakiś element.

Typy danych: Tablice

Jest to uporządkowana struktura zmiennych związanych wspólną nazwą. Aby odwołać się do konkretnego elementu tablicy musimy podać jej nazwę a następnie indeks (numer) elementu. Tablice umożliwiają "zarządzanie" dużą liczbą zmiennych. Są one układna w logiczną całosć co umożliwia później ich wygodne wykorzystanie. Poprzez strukturę indeksów nie musimy już wymyślać nazw dla powiedzmy 50 zmiennych. Wystarczy, że znamy zasady posługiwania się tablicą.

Aby stworzyć nową tablicę musimy zadeklarować nowy obiekt new Array(). Aby stworzyć tablicę o nazwie tabelka musimy napisać:

tabelka = new Array()

tabelka = new Array(1,2,3) //nasza tabela posiada trzy elementy: 1,2 i 3

lub

tabelka = new Array(1,"wyraz",3)

Teraz spróbujemy odwołać się do poszczególnego elementu w tablicy. Aby tego dokonać najpierw piszemy nazwę tabeli później w nawiasach prostokątnych indeks. Zwróć uwagę, że pierwszy element ma indeks 0 np.

tabelka[0] = 1
tabelka[1] = wyraz
tabelka[2] = 3

Z tablicami można zrobić jeszcze jedną sztuczkę. Każdemu elementowi w tabeli można przypisać jeszcze jakąś wartość, np.

tabelka = new Array("element","wyraz")

tabelka[element] = 10
tabelka[wyraz] = 5

Gdybyśmy w naszym skrypcie napisali

document.write(tabelka[0])

to w efekcie skrypt wyświetliłby element, natomiast

document.write(tabelka[tabelka[element]])

wyświetli liczbę 10.

Instrukcje

If... else
Jest to bardzo łatwa a zarazem podstawowa funkcja wyboru. Wybór dokonywany jest w zależności czy dany warunek jest spełniony czy też nie. Tłumacząc tą instrukcję wychodzi nam, że "jeśli coś to coś, w przeciwnym razie coś innego". Najlepiej wytłumaczy Ci to poniższy schemat:

if (warunek)
{
instrukcje //wykonywane są gdy warunek jest spełniony
}
else
{
instrukcje //wykonywane są jeżeli warunek nie jest spełniony
}

A oto najprostszy przykład pokazujący działanie instrukcji:

var x=5;

if (x==5) // znak "==" oznacza porównanie jednej i drugiej strony
{
document.write("To jest liczba 5 !")
}
else
{
document.write("To z całą pewnością nie jest liczba 5")

}

Oczywiście zmienna x równa się 5 dlatego warunek jest spełniony. W efekcie uzyskamy zdanie "To jest liczba 5 !". Prawda, że łatwe ? :-)

No dobra. Ale co jeżeli potrzebujemy instrukcji, która sprawdzałaby kilka warunków, powiedzmy trzy? Nic prostszego, otóż JavaScript dysponuje bardziej rozbudowaną wersją instrukcji If...else. Powstaje ona w wyniku zastosowania kolejnych jej powtórzeń:

if (warunek)
{
instrukcje
}
else if (warunek)
{
instrukcje
}
else if (warunek)
{
instrukcje
}
....

Zasada działania też jest prosta. Gdy nie sprawdzi się pierwszy warunek, skrypt sprawdza warunek drugi i jeżeli jest on spełniony wykonuje jego instrukcje. Natomiast jeżeli pierwsze dwa nie są spełnione a spełniony jest ostatni warunek, to wykonywane są właśnie jego instrukcje. Na pierwszy rzut oka wydaje się to skomplikowane ale spójrz na przykład:

var x=5;

if (x==3)
{
document.write("To jest liczba 3")
}
else if (x==4)
{
document.write("To jest liczba 4")
}
else if (x==5)
{
document.write("To jest liczba 5")
}

Teraz w zależności od zmiennej, dany warunek będzie spełniony. W naszym przypadku zmienną x jest liczba 5, dlatego wyświetlona będzie ostatnia część "To jest liczba 5". Mam nadzieję, że to rozumiesz :-)

Switch
Jest to bardzo ciekawa a zarazem bardzo przydatna instrukcja JavaScript. Jest ona dość prosta w zastosowaniu i najczęściej wykorzystuje się ją gdy mamy kilka opcji do wyboru. Oto jej schemat:

switch (wyrażenie)
{
case wartość_wyrażenia : instrukcje; break
case wartość_wyrażenia : instrukcje; break
}

Zamknięcie instrukcją break nie jest konieczne, jednak ja polecam taką metodę aby zapobiec nieoczekiwanym wynikom skryptu.
Ciężko wytłumaczyć działanie "słownie" dlatego posłużę się prostym przykladem:

var x=5;

switch (x)
{
case 4 : document.write("Wyrażenie równe jest 4"); break
case 5 : document.write("Wyrażenie równe jest 5"); break
}

Na początku stworzyliśmy zmienną x równą 5. Zmienna ta jest naszym wyrażeniem które wykorzystujemy na początku instrukcji: switch (x) . Teraz w zależności od wartości jaką posiada nasze wyrażenie (w naszym przypadku 5) jesteśmy kierowani do konkretnego case.
W tym przykładzie będzie to case 5 ponieważ wartość wynosi 5. Sam widzisz, że jest to łatwe :-). Jedyne co musisz zrobić to zdefiniować case dla każdej z możliwych opcji. OK, ale co zrobić jeżeli chcemy zakończyć tylko na tych dwóch opcjach? Otóż wystarczy, że na końcu napiszemy:

default: instrukcje

Wszystki zawarte tu instrukcje zostaną wykonane jeżeli do danej wartości nie będzie przypisany żaden case np.

switch (x)
{
case 4 : document.write("Wyrażenie równe jest 4"); break
case 5 : document.write("Wyrażenie równe jest 5"); break
default: document.write("To nie jest ani liczba 4 ani 5"); break
}

Pętle

Pętla umożliwia powtarzanie wybranych czynności (instrukcji) określoną liczbę razy. Chciałbym zwrócić uwagę na to, że wykorzystanie pętli bardzo ułatwia pracę i tworzenie w miarę zaawansowanych skryptów. Pętle pozwalają także uczynić nasz kod bardziej przejrzystym i czytelnym.

Wyróżniamy trzy rodzaje pętli:
- for - "dla"
- while - "dopóki"
- do... while - "powtarzaj dokópki"

Pętle te różnią się głównie ich przeznaczeniem. Wszystko zależy od warunków i celu jaki chcemy osiągnąć używając poszczególnej pętli. Oczywiście wszystko okaże się w praktyce i bez problemu będziecie mogli wykorzystać poszczególną pętlę.

Pętla FOR
Jest ona bardzo łatwa w użyciu. Jest to pętla licznikowa co oznacza, że wykorzystuje ona pewną zmienną, której wartość na początku zazwyczaj równa jest zero. Wykonywanie pętli kończy się, gdy spełniony zostaje określony warunek. Najlepiej wytłumaczyć działanie pętli na schemacie:

for (ustawienie_licznika; warunek_kończący_pętlę; modyfikacja_licznika)
{
instrukcje które ma wykonać pętla
}

Gdy zostanie osiągnięty warunek_kończący_pętlę to jej wykonanie zostanie wstrzymane.
Dla przykładu stworzymy pętlę która wypisze nam liczby od 0 do 10.

for(i=0; i<=10; i++)
{
document.write(i+"
")
}

Przyjrzyjmy się teraz pierwszej linii skryptu - tej która definiuje pętle. Na początku ustawiamy licznik na wartość 0 (i=0), następnie ustalamy, że pętla zakończy się gdy nasz licznik "dojedzie" do dziesięciu (i<=10). Na końcu określamy w jaki sposób ma być zmieniana wartość licznika. W naszym wypadku jest to i++ co oznacza, że wartość zwiększa się o jeden. W praktyce oznacza to, że wypisywana wartość pętli zaczyna się od zera i jest zwiększana o jeden aż osiągnie liczbę 10. Zapis document.write(i+"< br>") oznacza, że pętla będzie wypisywała po kolei wartości a po każdej z nich będzie umieszczony znacznik
przechodzący do nowej linii.

Pętla FOR... IN
Jest ona bardzo podobna do tej opisanej wyżej. Różnica polega na tym, że została przystosowana do opisywania właściwości wybranego obiektu co pozwala na wygodne odwoływanie się do poszczególnych właściwości.

for (zmienna in obiekt)
{
instrukcje
}

Dla przykładu wypiszemy wszystkie właściwości obiektu document:

for (i in document)
{
document.write(i+"<br>")

}

W tym przykładzie naszą zmienną jest "i" dzięki której wypisujemy wszystkie właściwości elementu document. Pętla ta jest bardzo użyteczna jeżeli bliżej poznasz JavaScript i będzie Ci zależało na poznaniu konkretnych właściwości poszczególnych elementów.

Pętla WHILE
Pętla while jest podstawową pętlą warunkową. Warunek jest sprawdzany zawsze na początku pętli i gdy jest on spełniony pętla wywołuje instrukcje. Oto podstawowy schemat:

while (warunek)
{
instrukcje
}

Funkcja ta powoduje cykliczne wykonywanie instrukcji tak długo, jak długo spełniony jest warunek. Pętla ta jest bardzo łatwa a zastosowanie bardzo różnorodne. Powiedzmy, że jeżeli chcemy aby pętla cały czas się powtarzała tak długo aż zmienna "z" będzie mniejsza od 20 to piszemy:

var z = 3; while (z < 20) //w tym wypadku zmienną z jest liczba 3
{
document.write("Liczba z jest mniejsza od dwudziestu")
}

Zmienna "z" jest mniejsza od 20 dlatego warunek pętli jest cały czas spełniony (3 < 20). Przez to pętla w nieskończoność będzie wypisywała "Liczba z jest mniejsza od dwudziestu" :-)

Istnieje jeszcze pętla DO... WHILE . Jest to także pętla warunkowa, która różni się tylko tym od poprzedniej (while), że warunek sprawdzany jest dopiero na końcu pętli.

do
{
instrukcje
}
while (warunek)

Na przykład:

z=0
Do
{
z+=1
document.write (z+"<br>")
}
while (z<5)

Najpierw zostaje wykonana instrukcja która zwiększa zmienną o jeden. Będzie ona wywoływana tak długo, jak długo zmienna "z" będzie mniejsza od liczby 5 i jeżeli końcowy warunek jest spełniony to znów trafiamy na początek gdzie najpierw wywołana jest instrukcja a dopiero potem sprawdzany jest warunek. Dlatego zamiast wyświetlić liczby 0,1,2,3,4 pętla wyświetli 0,1,2,3,4,5

Break i Continue
To już nie są pętle a jedynie instrukcje języka JavaScript które można wykorzystać w pisaniu pętli. Instrukcja break powoduje przerwanie wykonywanej pętli i przejście do pierwszego polecenia znajdującego się po niej. Natomiast instrukcja continue pozwala przerwać wykonywanie pętli i przejść na jej początek. W tym wypadku instrukcje umieszczone po instrukcji continue nie są już wykonywane.
Należy zauważyć, że obie instrukcje działają tylko i wyłącznie z pętlami for i while.

Funkcje w JavaScript

Funkcje to zbiór instrukcji które mają na celu wykonać jakieś określone zadanie. Funkcje wywołane są za pomocą nazwy i ewentualnie przy użyciu argumentów. Należy pamiętać, że każda funkcja musi mieć własną niepowtarzalną nazwę. Aby zdefiniować funkcję najpierw piszemy function następnie jej nazwę, oraz jeżeli istnieje taka potrzeba wpisujemy parametry. Wszystkie instrukcje, które mają być wykonane po wywołaniu funkcji umieszczamy pomiędzy klamrami { }. Całość wygląda następująco:

function nazwa (parametr1, parametr2,...)
{
instrukcje...
}

Jeżeli nie są nam potrzebne żadne parametry to nawias pozostaje pusty. Oto jak wygląda przykładowa funkcja bez parametrów:

function wyswietl_napis()
{
tekst="To jest przykładowy tekst"
document.write("Funkcja o nazwie wyswietl_napis() wywołała tekst: " +tekst)
}

Teraz musimy jeszcze tylko wywołać naszą funkcję - uruchomić ją. Używa się zazwyczaj do tego zdarzeń w JavaScript. Zdarzeniem może być kliknięcie na obrazek lub pole formularza. Nasz funkcja zostanie wywołana po załadowaniu się strony, służy do tego zdarzenie onLoad.

Teraz napiszemy nową funkcję gdzie użyjemy parametrów.

function pokaz(tekst)
{
alert(tekst)
}

Funkcja ta zostanie wywołana po kliknięciu na obrazek:

No to po kolei. Wywołana funkcja wyświetli okienko z napisem fajny tekst. Dzieje się tak ponieważ zmienna tekst jest parametrem. Dostarcza ona funkcji tekst, który zostanie wykorzystany w okienku. Jego zawartość zależy tylko i wyłącznie od tego co zdefiniujemy w wywołaniu funkcji, w naszym przypadku: onClick="pokaz('fajny tekst')". Więcej na temat wywoływania funkcji dowiesz się w temacie poświęconym zdarzeniom.

Obiekty

Obiekty pełnia bardzo ważną rolę w języku JavaScript, który w końcu jest językiem zorientowanym obiektowo. JavaScript umożliwia tworzenie własnych obiektów lub używania gotowych, a następnie korzystanie z ich właściwości lub z ich metod. Każdy element strony można uważać jako osobny obiekt posiadający własne metody i właściwości. Większość pomniejszych obiektów (tekst, obrazki) należą do jednego dużego obiektu document. Oto jak w otaczającej nas rzeczywistości możemy znaleźć odniesienie do obiektów: Powiedzmy, że naszym głównym obiektem będzie auto

auto.kola //najpierw odwołujemy się do głównego obiektu auto a później do kół
auto.kola.przednie
auto.kolor

auto.kolor = "czerwony" //przypisanie właściwości do obiektu kolor
auto.jedz() //metoda która powoduje jazdę samochodu :-)

Prawda, że łatwe? Teraz spróbujemy przełożyć to na obiekty JavaScript:

document.form.pole_wyboru //odnosimy się do konkretnego pola wyboru w formularzu

document.form.pole_wyboru.value = "tak" //pole_wyboru ma przypisana wartość tak

document.form.pole_wyboru.checked() //metoda zaznaczająca pole wyboru

Wiem, że zapewne zadajesz sobie teraz pytanie "skąd mam wiedzieć kiedy i w jakiej kolejności mam coś wpisać ?". Pomoże Ci w tym tabela hierarchii w JavaScript:

Wybierając konkretny obiekt musisz poruszać się po polach od samej góry.
Dobra, na pewno przypominasz sobie wcześniejsze przykłady: document.form.pole_wyboru . Dlaczego są tam nazwy których nie ma w hierarchii? Otóż większość elementów na stronie może mieć własne nazwy (obrazki, pola formularza) w tym wypadku odwołujemy się właśnie do ich nazw.
Najlepiej przedstawi Ci to poniższy przykład formularza:

<Form name="moj_formularz">
Imię: <input type="text" name="imie" size="15"><br>

Nazwisko: <input type="text" name="nazwisko" size="15"><br>

<input type="submit" value="Wyślij"><br> </form>

Teraz odwołując się w JavaScript do pola "Imię" musimy napisać:

document.moj_formularz.imie //odwołujemy się do imienia
lub
document.moj_formularz.nazwisko //odwołujemy się do nazwiska

Jak widzisz, aby dojść do konkretnego obiektu, trzeba "jechać" od tych najbardziej zewnętrznych do najbardziej szczegółowych obiektów.

Na koniec przedstawię jeszcze właściwości poszczególnych obiektów, które w przyszłości bardzo Ci się przydadzą. Jak z tego korzystać? Powiedzmy, że opisuję obiekt Window a jedną z właściwości jest Status. Wówczas żeby to wykorzystać piszę: window.status , no i wszystko jasne :-)

Metody i właściowści obiektów

1. Obiekt window

Obiekt window jest obiektem najwyższego poziomu w dokumencie HTML.Właściwości

frames[]	macierz ramek potomnych w oknie; porządek w macierzy odpowiada porządkowi definiowania w dokumencie
frames.length	liczba zdefiniowanych ramek
self	bieżące okno
parent	okno rodzicielskie ramki potomnej w zestawie zdefiniowanym znacznikiem <FRAMESET>
top	okno najwyższego rzędu, które jest właścicielem wszystkich widocznych ramek; okna 'top' są swymi własnymi rodzicami
status	komunikat pojawiający się w pasku stanu okna przeglądarki
defaultStatus	komunikat pojawiający się w pasku stanu okna przeglądarki standardowo, które oczekuje na wprowadzenie jakichś danych przez użytkownika
name	wewnętrzny identyfikator okna otwartego metodą window.open() (może być niezdefiniowany)

Metody

alert("komunikat")	wyświetla okienko dialogowe "JavaScript Alert" z podanym komunikatem
confirm("komunikat")	wyświetla okno dialogowe "Confirm" (tj. okienko z przyciskiem OK i przyciskiem CANCEL) z podanym komunikatem; zwraca TRUE po użyciu przycisku OK, zaś FALSE po użyciu przycisku CANCEL
prompt("komunikat")	wyświetla okno dialogowe "Prompt" z podanym komunikatem, które oczekuje na wprowadzenie jakichś danych przez użytkownika
open("URL","nazwa")	otwiera na ekranie nowe okno, nadaje mu wewnętrzny identyfikator "nazwa" i ściąga do niego dokument wskazany lokalizatorem "URL"
close()	zamyka okno z dokumentem, w którym znajduje się instrukcja użycia tej metody ("samobójstwo okna")

2. Obiekt frame

Obiekt frame (ramka) to okno znajdujące się wewnątrz okna głównego w przeglądarce. Właściwości i metody są bardzo podobne do właściwości i metod obiektu window (brak jest jedynie właściwości name, status oraz defaultStatus).

3. Obiekt location.

Obiekt location zawiera informacje o bieżącym adresie URL.

Właściwości

href	łańcuch zawierający cały adres URL dokumentu
protocol	łańcuch zawierający początek adresy URL wraz z pierwszym dwukropkiem; przykładową wartością może być "http:" (HyperText Transfer Protocol) lub wartość "javascript:" (określa kod JavaScript)
host	łańcuch zawierający nazwę serwera, nazwę domeny, np. 'www.domena.pl'
hostname	łańcuch zawierający pełną nazwę serwera łącznie z numerem portu, przykład 'www.domena.pl:80'
port	łańcuch określający używany przez serwer port komunikacyjny; jeśli nie zostanie określona wartość portu, wtedy przyjmie on wartość 80; port jest numerem kanału wejściowego na serwer
pathname	łańcuch zawierający część adresy URL, tj. po trzecim ukośniku, np. '~userkatalogindex.html'
hash	łańcuch rozpoczynający się od '#', który określa nazwę zakotwiczenia w dokumencie; powoduje przejście do zakotwiczenia bez odświeżania dokumentu
search	łańcuch rozpoczynający się znakiem '?', który określa zapytanie w adresie URL; może on wyglądać następująco: '?x=3&y=7'

4. Obiekt document

Obiekt zawiera informacje o aktualnie otwartym dokumencie.

Właściwości

title	łańcuch określający tytuł dokumentu; jeśli tytuł nie został zdefiniowany jego wartość jest null
location	łańcuch zawierający pełny adres URL aktualnie otwartego dokumentu
lastModified	łańcuch zawierający datę ostatniej modyfikacji dokumentu; jest on formatu Date; jeśli serwer nie wyśle tej informacji do klienta, JavaScript ustawia wartość na 0 (tj. 1 styczeń 1970 GMT)
referrer	zawiera adres URL, spod którego wywołany został bieżący dokument
bgColor	łańcuch określający kolor tła dokumentu; jest wyrażony w postaci wartości szesnastkowej, określającej poziom intensywności kolorów RGB (np. #FF0000 - kolor czerwony); jest odpowiednikiem atrybutu BGCOLOR znacznika <BODY>
fgColor	łańcuch określający kolor tekstu w dokumencie; jest wyrażony w postaci wartości szesnastkowej, określającej poziom intensywności kolorów RGB (np. #000000 - kolor czarny); jest odpowiednikiem atrybutu TEXT znacznika <BODY>
linkColor	łańcuch określający kolor odsyłaczy hipertekstowych w dokumencie; jest wyrażony w postaci wartości szesnastkowej, określającej poziom intensywności kolorów RGB (np. #0000FF - kolor niebieski); jest odpowiednikiem atrybutu LINK znacznika <BODY>
vlinkColor	łańcuch określający kolor odwiedzonych odsyłaczy hipertekstowych; jest wyrażony w postaci wartości szesnastkowej, określającej poziom intensywności kolorów RGB (np. #00FF00 - kolor zielony); jest odpowiednikiem atrybutu VLINK znacznika <BODY>
alinkColor	łańcuch określający kolor aktywnego odsyłacza hipertekstowego (odsyłacz nad którym znajduje się aktualnie kursor myszki); jest wyrażony w postaci wartości szesnastkowej, określającej poziom intensywności kolorów RGB (np. #0000FF - kolor niebieski); jest odpowiednikiem atrybutu ALINK znacznika <BODY>
forms[]	tablica zawierająca pozycję każdego formularza; przykład użycia w przypadku formularza o nazwie formularz1: - document.forms["formularz1"] - document.forms[0] - document.formularz1 kolejność numeracji formularzy w tablicy jest taka sama jak kolejność ich umieszczenia w dokumencie HTML
forms.length	przechowuje wartość ilości formularzy w dokumencie
links[]	tablica zawierająca pozycję każdego obiektu Area (<AREA HREF=""> </AREA>) i Link (<A HREF=""> </A>), tj. odsyłaczy, w dokumencie; każdemu odsyłaczowi odpowiada jeden obiekt Area lub obiekt Link
links.length	przechowuje wartość ilości odsyłaczy (obiektów Link i Area) w dokumencie
anchors[]	tablica zawierająca pozycję każdego zakotwiczenia (<A NAME=""> </A>)
anchors.length	przechowuje wartość ilości zakotwiczeń w dokumencie

Metody

write("łańcuch")	wypisuje wyrażenie HTML (łańcuch, który może zawierać znaczniki HTML, w tym przypadku jest to łańcuch zawierający napis: łańcuch) w dokumencie w bieżącym oknie
writeln("łańcuch")	działa podobnie jak write("łańcuch"), z tą jednak różnicą, że na końcu dodaje znak przejścia do następnej linii; HTML ignoruje przejście do nowej linii chyba, że znajduje się to wewnątrz znacznika <PRE> </PRE>
clear()	czyści zawartość bieżącego okna
close()	powoduje zamknięcie bieżącego okna

5. Obiekt form.

Pozwala użytkownikowi wprowadzić tekst i dokonać wyboru przy pomocy elementów formularza, tj. przyciski, przełączniki, pola tekstowe, listy wyboru. Odpowiada znacznikowi <FORM> w dokumencie HTML. Każdy formularz posiada osobny obiekt form.

Właściwości

name	łańcuch określający nazwę formularza; odpowiada atrybutowi NAME
method	łańcuch określający sposób wysyłania formularza do serwera; odpowiada atrybutowi METHOD
action	łańcuch określający docelowy adres URL, pod który zostanie wysłany formularz; odpowiada atrybutowi ACTION
target	łańcuch określający nazwę okna do którego zostanie przesłana odpowiedź po wypełnieniu i wysłaniu formularza; odpowiada atrybutowi TARGET
elements[indeks]	tablica obiektów (elementów) formularza takich jak przyciski, przełączniki, klucze pola tekstowe, listy wyboru
length	zawiera informację o ilości elementów w formularzu; można otrzymać tą samą informację wpisując: form.elements.length

Metody

submit()	symuluje wciśnięcie przycisku typu submit; powoduje wysłanie formularza; nie wywołuje zdarzenia onSubmit()
reset()	symuluje wciśnięcie przycisku typu reset w formularzu; ustawia wszystkie wartości elementów formularza na wartości domyślne; nie wywołuje zdarzenia onReset()

Obsługa zdarzeń

onSubmit()	wykonywane w momencie wciśnięcia przycisku typu submit
onReset()	wykonywane w momencie wciśnięcia przycisku typu reset

6. Obiekt text i textarea.

Obiekty TEXT i TEXTAREA są elementami formularz pozwalającymi użytkownikowi wprowadzić dowolny tekst. W przypadku obiektu TEXT ograniczeniem jest tylko jedna linia tekstu. TEXTAREA to pole formularza, które umożliwia wprowadzenie inforacji tekstowej bez ograniczeń co do ilości linii.

Właściwości

name	łańcuch przechowujący nazwę elementu; odpowiada atrybutowi NAME
value	łańcuch przechowujący bieżącą zawartość tekstową znajdującą się w oknie tekstowym elementu
defaultValue	łańcuch przechowujący domyślną (początkową) wartość tekstową wyświetlaną w elemencie formularza; odpowiada atrybutowi VALUE

Metody

focus()	uaktywnia bieżący element (podświetla go, ale nie zmienia jego stanu); nie wywołuje zdarzenia onFocus
blur()	usuwa aktywność bieżącego elementu (nie zmienia jego stanu); nie wywołuje zdarzenia onBlur
select()	uaktywnia bieżący element (podświetla go) i umieszcza w polu tekstowym kursor; nie wywołuje zdarzenia onSelect

Obsługa zdarzeń

onFocus()	wykonywane kiedy użytkownik podświetli (aktywuje) bieżący element
onBlur()	wykonywane kiedy użytkownik deaktywuje bieżący element
onSelect()	wykonywane w momencie kliknięcia myszą na polu tekstowym elementu
onChange()	wykonywane kiedy wystąpi jakakolwiek zmiana w polu elementu zakończona opuszczeniem tego elementu

7. Obiekt checkbox.

Checkbox jest elementem formularza pozwalającym użytkownikowi jego włączenie lub wyłączenie. Jest zdefiniowany znacznikiem: <input type="checkbox">.

Właściwości

name	łańcuch zawierający nazwę bieżącego elementu; jest odpowiednikiem atrybutu NAME
value	łańcuch który przyjmuje wartość ON jeśli bieżący element (tj. checkbox) jest włączony i wartość OFF jeśli element jest wyłączony (niezaznaczony); odpowiada atrybutowi VALUE
checked	zawiera wartość boolowską określającą stan bieżącego elementu (TRUE - włączony [zaznaczony], FALSE - wyłączony [niezaznaczony])
defaultValue	określa stan początkowy bieżącego elementu (włączony/wyłączony)

Metody

click()	symuluje kliknięcie myszą na bieżącym elemencie, ale nie wywołuje zdarzenia onClick
focus()	uaktywnia bieżący element (podświetla go, ale nie zmienia jego stanu); nie wywołuje zdarzenia onFocus
blur()	usuwa aktywność bieżącego elementu (nie zmienia jego stanu); nie wywołuje zdarzenia onBlur

Obsługa zdarzeń

onClick()	wykonywane kiedy użytkownik kliknie na bieżącym elemencie
onFocus()	wykonywane kiedy użytkownik podświetli (aktywuje) bieżący element
onBlur()	wykonywane kiedy użytkownik deaktywuje bieżący element

8. Obiekt radio.

Element formularza umożliwiający wybór tylko jednego elementu z listy przez użytkownika wypełniającego formularz.

Właściwości

name	zawiera łańcuch przechowujący nazwę elementu; odpowiada atrybutowi NAME
length
value	zawiera łańcuch przechowujący wartość danego elementu; odpowiada atrybutowi VALUE
checked	wartość boolowska pozwalająca programowo zaznaczyć bieżący element formularza
defaultChecked	wartość boolowska, która określa domyślne zaznaczenie/odznaczenie elementu; odpowiada atrybutowi CHECKED

Metody

click()

symuluje kliknięcie myszą na bieżącym elemencie, ale nie wywołuje zdarzenia onClick

Obsługa zdarzeń

onClick()

wykonywane kiedy użytkownik kliknie na bieżącym elemencie

9. Obiekt select.

Element SELECT to lista wyboru, która umożliwia użytkownikowi wypełniającemu formularz dokonanie wyboru jednego lub więcej elementów z listy.

Właściwości

length	zawiera liczbę odpowiadającą ilości dostępnych pozycji do wyboru z bieżącej listy; jest to to samo co zapis: options.length
name	zawiera łańcuch przechowujący nazwę listy wyboru; odpowiada atrybutowi NAME
selectIndex	przechowuje wartość wybranej pozycji z listy lub wartość pierwszej wybranej pozycji z listy, jeśli wybranych jest ich więcej niż jedna
options	tablica zawierająca pozycje wszystkich elementów bieżącej listy wyboru
options[].text	zawiera łańcuch który będzie wyświetlany w liście wyboru jako nazwa pozycji w liście
options[].value	zawiera wartość jaka zostanie przesłana do serwera w momencie wybrania bieżącej pozycji i wysłaniu formularza
options[].selected	wartość boolowska określająca stan wyboru bieżącej pozycji listy wyboru

options[].defaultSelected

zawiera wartość boolowską określającą czy pozycja domyślnie (początkowo) jest zaznaczona/odznaczona

Metody

focus()	uaktywnia bieżący element (podświetla go, ale nie zmienia jego stanu); nie wywołuje zdarzenia onFocus
blur()	usuwa aktywność bieżącego elementu (nie zmienia jego stanu); nie wywołuje zdarzenia onBlur

Obsługa zdarzeń

onFocus()	wykonywane kiedy użytkownik podświetli (aktywuje) bieżący element
onBlur()	wykonywane kiedy użytkownik deaktywuje bieżący element
onChange()	wykonywane kiedy użytkownik zmieni stan (wartość) bieżącego elementu

10. Obiekty button, submit oraz reset.

Elementy formularza występujące w postaci przycisków.

Właściwości

value	zawiera łańcuch przechowujący wartość reprezentyjącą bieżący element (przycisk); odpowiada atrybutowi VALUE
name	zawiera łańcuch określający nazwę bieżącego elementu; odpowiada atrybutowi NAME
type	określa rodzaj (typ) przycisku, np.: BUTTON, SUBMIT, RESET; odpowiada atrybutowi TYPE

Metody

focus()	uaktywnia bieżący element (podświetla go, ale nie zmienia jego stanu); nie wywołuje zdarzenia onFocus
blur()	usuwa aktywność bieżącego elementu (nie zmienia jego stanu); nie wywołuje zdarzenia onBlur
click()	symuluje kliknięcie myszą na bieżącym elemencie, ale nie wywołuje zdarzenia onClick

Obsługa zdarzeń

onFocus()	wykonywane kiedy użytkownik podświetli (aktywuje) bieżący element
onBlur()	wykonywane kiedy użytkownik deaktywuje bieżący element
onClick()	wykonywane kiedy użytkownik kliknie na bieżącym elemencie

11. Obiekt password.

Pole tekstowe formularza, które w momencie wpisania jakiejkolwiek wartośći wyświetla wszystkie znaki jako *. Jest to pole, które może posłużyć do wprowadzania hasła dostępu.

Właściwości

defaultValue	zawiera łańcuch przechowujący wartość domyślną (początkową) elementu formularza; odpowiada atrybutowi VALUE
value	zawiera aktualny łańcuch znajdujący się w polu tekstowym bieżącego elementu
name	zawiera łańcuch określający nazwę elementu; odpowiada atrybutowi NAME
type	określa rodzaj elementu formularza; w tym przypadku wartością jest PASSWORD; odpowiada atrybutowi TYPE

Metody

focus()	uaktywnia bieżący element (podświetla go, ale nie zmienia jego stanu); nie wywołuje zdarzenia onFocus
blur()	usuwa aktywność bieżącego elementu (nie zmienia jego stanu); nie wywołuje zdarzenia onBlur
select()	uaktywnia bieżący element (podświetla go) i umieszcza w polu tekstowym kursor; nie wywołuje zdarzenia onSelect

Obsługa zdarzeń

onFocus()	wykonywane kiedy użytkownik podświetli (aktywuje) bieżący element
onBlur()	wykonywane kiedy użytkownik deaktywuje bieżący element
onSelect()	wykonywane w momencie kliknięcia myszą na polu tekstowym elementu

12. Obiekty navigator.

Obiekt navigator przechowuje informacje na temat używanej przeglądarki, jej wersji, itp.

Właściwości

appCodeName	określa "codename" przeglądarki; w przypadku IE oraz Netscape jest to wartość "Mozilla"
appVersion	określa numer wersji przeglądarki
userAgent	przechowuje informacje na temat przeglądarki, tj. "codename", wersja, system operacyjny, itd.
appName	określa nazwę przeglądarki
mimeTypes	tablica wszystkich MIME obsługiwanych przez przeglądarkę
platform	określa typ środowiska, w którym jest uruchomiona przeglądarka (np. Win32, Win16, Mac68k, MacPPC, środowiska Unix)
plugins	tablica wszystkich zainstalowanych plug-inów przeglądarki

13. Obiekt string.

Obiekt string przechowuje dane w postaci łańcucha znakowego.

Właściwości

length

zwraca wartość liczbową charakteryzującą ilość znaków w łańcuchu

Metody

big()

zwiększa rozmiar czcionki; odpowiednik znacznika <BIG>; przykład

	tekst = "Cześć!"
	tekst.big();	// zwraca łańcuch "<BIG>Cześć!</BIG>"

blink()

tekst migający; odpowiednik znacznika <BLINK>

bold()

tekst pogrubiony; odpowiednik znacznika <B>

fixed()

italics()

tekst pochylony; odpowiednik znacznika <I>

small()

zmniejsza rozmiar czcionki; odpowiednik znacznika <SMALL>

sub()

odpowiednik znacznika <SUB>

strike()

tekst przekreślony; odpowiednik znacznika <STRIKE>

sup()

odpowiednik znacznika <SUP>

fontColor(kolor)

ustawia kolor czcionki (tekstu) na wartość kolor; odpowiednik znacznika <FONT COLOR="#...">

fontSize(rozmiar)

ustawia rozmiar czcionki na wartość rozmiar; odpowiednik znacznika <FONT SIZE=...>

charAt(indeks)

zwraca znak z pozycji określonej przez indeks

indexOf(podłańcuch [,indeks])

przeszukuje łańcuch w poszukiwaniu podłańcucha i zwraca pozycję pierwszego znalezionego znaku; jeśli podana jest wartość indeks, to rozpoczyna przeszukiwanie od pozycji określonej przez indeks; jeśli nie znajdzie odpowiednika podłańcucha to zwraca wartość -1; przykład:

	"niebieski".indexOf("nieb")	// zwróci 0
	"niebieski".indexOf("nieba")	// zwróci -1
	"niebieski".indexOf("ski")	// zwróci 6

lastindexOf(podłańcuch [,indeks])

jej działanie jej podobne do indexOf(podłańcuch [, indeks]), lecz zaczyna przeszukiwanie odbywa się w kierunku przeciwnym, czyli od końca

substring(indeksA, indeksB)

zwraca podłańcuch wycięty z łańcucha od pozycji indeksA do pozycji indeksB; przypadki:

-	jeśli indeksA < 0, to indeksA jest równy 0
-	jeśli indeksB > długość łańcucha (nazwaŁańcucha.length), to indeksB jest równy długości łańcucha
-	jeśli indeksA = indeksB, to zwrócony podłańcuch jest łańcuchem pustym
-	jeśli indeksB został pominięty, to podłańcuch będzie zawierał znaki od pozycji indeksA do końca łańcucha
-	jeśli indeksA > indeksB, to JavaScript1.2 wygeneruje błąd (out of memory), pozostałe wersje zwracają łańcuch rozpoczynający się od pozycji indeksB, a kończący na pozycji indeksA - 1

toLowerCase()

konwertuje znaki w łańcuchu na małe litery

toUpperCase()

konwertuje znaki w łańcuchu na wielkie litery

14. Obiekt Date.

Obiekt Date pozwala operować datą oraz czasem. W celu stworzenia obiektu typu data/czas musimy posłużyć się konstruktorem Date w następujący sposób:

new Date();
new Date(milisekundy);
new Date(łańcuch_Data);
new Date(rok, miesiąc, dzień [, godzina, minuta, sekunda, milisekunda]);

milisekundy - wartość liczbowa określająca ilość milisekund, jakie upłynęły od dnia 1 stycznia 1970, 00:00:00
łańcuch_Data - łańcuch reprezentujący datę
rok, miesiąc, dzień - wartości całkowite reprezentujące część daty; miesiąc przyjmuje wartości 0-11 (0-styczeń, 1-luty, ..., 11-grudzień)
godzina, minuta, sekunda, milisekunda - wartości całkowite przedstawiające część daty

W przypadku, gdy konstruktor nie będzie posiadał argumentów, np.:
dzisiaj = new Date();
zwrócona wartość będzie dotyczyła daty/czasu bieżącego.

Metody

getDay()	zwraca dzień tygodnia
getDate()	zwraca dzień miesiąca
getHours()	zwraca wartość reprezentującą godzinę
getMinutes()	zwraca wartość reprezentującą minuty
getMonth()	zwraca wartość reprezentującą numer miesiąca
getSeconds()	zwraca wartość reprezentującą sekundy
getTime()	zwraca wartość numeryczną określającą czas; wartość w milisekundach
getYear()	zwraca rok
setDate()	ustawia dzień miesiąca
setHour()	ustawia godzinę
setMinutes()	ustawia minutę
setMonth()	ustawia miesiąc
setSeconds()	ustawia sekundy
setTime()	ustawia wartość obiektu Date; wartość w milisekundach
setYear()	ustawia rok
toGMTString()	zwraca datę w systemie GMT
toLocaleString()	zwraca datę w formacie lokalnym
parse(date)	zwraca ilość milisekund, jakie upłynęły od 1 stycznia 1970, 00:00:00

15. Obiekt Math.

Obiekt Math przechowuje wartości i funkcje matematyczne pozwalające wykonywać podstawowe operacje matematyczne.

Właściwości

LN10	stała wartość; logarytm naturalny z 10	=	2.302585...
LN2	stała wartość; logarytm naturalny z 2	=	0.693147...
PI	stała wartość; liczba pi	=	3.141592...
SQRT1_2	stała wartość; pierwiastek kwadratowy z 1/2	=	0.707107...
SQRT2	stała wartość; pierwiastek kwadratowy z 2	=	1.414213...

Metody

abs(x)	przekazuje wartość bezwzględną x
acos(x)	przekazuje arcus cosinus x
asin(x)	przekazuje arcus sinus x
atan(x)	przekazuje arcus tangens x
ceil(x)	przekazuje najmniejszą liczbę całkowitą większą niż lub równą x
cos(x)	przekazuje cosinus x
exp(x)	przekazuje e (stała Eulera) podniesione do potęgi x
floor(x)	przekazuje największą liczbę całkowitą mniejszą niż lub równą x
log(x)	przekazuje logarytm naturalny x
max(x, y)	przekazuje większą z liczb x, y
min(x, y)	przekazuje mniejszą z liczb x, y
pow(x, y)	przekazuje x do potęgi y
round(x)	przekazuje x zaokrąglone do najbliższej liczby całkowitej
sin(x)	przekazuje sinus x
sqrt(x)	przekazuje pierwiastek kwadratowy z x
tan(x)	przekazuje tangens x

Zdarzenia

JavaScript jest używany głównie do reagowania na konkretne zdarzenia na stronie www. Zdarzenia są to czynności, które wykonuje użytkownik podczas poruszania się po stronie. Może to być wypełnienie formularza lub nawet najprostsze przejechanie wskaźnikiem myszki nad obrazkiem lub innym elementem strony.
To właśnie dzięki zdarzeniom możliwa jest interakcja na stronach www. Dla przykładu po naciśnięciu przycisku formularza, skrypt sprawdza czy zawartość pól jest wypełniona. Oczywiście zastosowań jest mnóstwo i nawet nie ma sensu ich wypisywać. Przejdźmy do konkretów.

onAbort	Zatrzymano ładowanie strony/obrazka
onBlur	Obiekt przestał być aktywny (wybrany). Może to być okno przeglądarki lub pole formularza
onClick	Gdy użytkownik kliknie na odsyłaczu lub jakimś innym elemencie
onChange	Zachodzi gdy stan elementu ulegnie zmianie, np. pole formularza
onError	Zachodzi gdy nastąpi błąd w skrypcie oraz gdy wystąpi on podczas ściąganiu obrazka lub strony
onFocus	Występuje gdy użytkownik uaktywni jakiś element. W formularzu może np. kliknąć na pole
onLoad	Gdy zakończy się ładowanie strony
onMouseOver	Gdy obiekt (link, obrazek...) )został wskazany myszką
onMouseOut	Gdy obiekt przestał być wskazywany myszką
onReset	Wystąpi wówczas gdy użytkownik kliknie przycisk typu "reset" formularza.
onSelect	Nastąpi gdy użytkownik zaznaczy zawartość obiektu. Może to być zaznaczenie tekstu w polu formularza
onSubmit	Zachodzi gdy użytkownik prześle zawartość formularza do serwera
onUnload	Zachodzi gdy zmieniono wyświetlaną stronę

Mam nadzieję, ze wszystko w tabelce wystarczająco wytłumaczyłem. Jeżeli tak to dalsza obsługa zdarzeń nie powinna sprawić Ci kłopotów. Dla przykładu wywołamy funkcję sprawdz(). Zostanie ona wywołana gdy strona zostanie załadowana:

< body onLoad="sprawdz()">

Załadowanie strony (patrz tabelka) spowoduje wywołanie funkcji sprawdz(). No i na tym polega cała filozofia zdarzeń, wystarczy tylko, że zapoznasz się z tabelką :-)