Java - teoria

Jeżeli chcesz umieścić ten kurs na swojej stronie, płycie lub dołączyć do programu - [image] napisz do mnie.

Wprowadzenie
0. Oznaczenia w kursie
1. Co to jest "Java Script"?
2. Czy "Java Script" = "Java"?
3. Co zrobić, aby korzystać na stronie ze skryptów?
4. Korzystanie ze skryptów umieszczonych w osobnych plikach
5. Piszemy pierwszy skrypt
6. Definiowanie zmiennych
7. Funkcje
8. Zdarzenia
9. Okienka dialogowe
10. Pasek statusu
11. Historia
12. Instrukcja warunkowa if...else...
13. Instrukcja warunkowa switch
14. Operatory
15. Tablice
16. Pętle
17. Liczby losowe
18. Obsługa formularzy
19. Instrukcja with
20. Formatowanie tekstu
21. Pliki graficzne
22. Cykliczne wykonywanie czynności
23. Data i czas na stronie
24. Ramki
25. Otwieranie okien
26. Pliki Cookie
27. Tworzenie obiektów
28. Przechwytywanie zdarzeń
29. Kompilacja warunkowa
30. Linki do stron o "JavaScript"
Zakończenie

Dodatki

  • Wbudowane typy obiektów
    • Array
    • Boolean
    • Date
    • Function
    • Global
    • Math
    • Number
    • Object
    • String

  • Predefiniowane obiekty
    • window
      • document
        • anchor
        • applet
        • area
        • form
          • button
          • checkbox
          • file
          • hidden
          • password
          • radio
          • reset
          • select
            • option
          • submit
          • text
          • textarea
        • image
        • link
      • frame
      • history
      • location
    • navigator

  • Słowa zarezerwowane
  • Zdarzenia
  • Kolory
  • Znaki specjalne
  • Operatory
  • Priorytet operatorów
  • Predefiniowane wartości kompilacji warunkowej

SONDA
Jak oceniasz kurs JavaScript?

Zobacz wyniki

Kurs ukazuje się na płytach pism:

copyright © 2002 Rafał Hawrylak
wszelkie prawa zastrzeżone


Java - teoria

Wprowadzenie

Witam serdecznie tych, którzy postanowili się nauczyć języka JavaScript oraz tych, którzy są tutaj przypadkiem. Dziękuję Ci, że wybrałeś ten właśnie kurs. Jeżeli używałeś już internetu, a konkretnie przeglądałeś strony www, zetknąłeś się zapewne ze skryptami napisanymi właśnie w JavaScript. Są to zazwyczaj polecenia usprawniające działanie stron, jednak są i takie, które pełnią tylko funkcję zdobniczą. Niemniej jednak, zachęcam do nauki tego języka, ponieważ w obecnych czasach strony internetowe korzystające z dobrodziejstw JavaScript to standard. Oczywiście osoby, które miały do czynienia z pisaniem programów, będą miały łatwiejsze zadanie, znając zasady działania programów, sposób interpretacji kodu, posiadając znajomość zmiennych, instrukcji sterujących oraz zdolność szybkiego odnalezienia błędu w skrypcie. Jednak zaczynający od początku nie muszą się martwić, ponieważ do nauki JavaScript nie jest wymagana znajomość programowania w innych językach. Jedynymi rzeczami, które są potrzebne to znajomość HTML, odrobina czasu, chęci i cierpliwości. Kurs zawiera całą potrzebną wiedzę do opanowania JavaScript oraz do szybkiego i efektywnego tworzenia skryptów, włączając w to bardziej zaawansowane techniki jak: obsługa Cookie, tworzenie i zarządzanie własnymi obiektami, czy kompilacja warunkowa. To między innymi, dzięki wielu zamieszczonym tu przykładom oraz ich analizie, możecie szybko poznać tajniki JavaScript. Kurs jest równie atrakcyjny dla osób umiejących ten język, ze względu na dodatki takie jak: wbudowane typy obiektów, predefiniowane obiekty, słowa zarezerwowane, zdarzenia, kolory, znaki specjalne, operatory oraz ich priorytet, a także predefiniowane wartości kompilacji warunkowej.

Zatem zapraszam do nauki i życzę przyjemnej pracy. Jeżeli czegoś nie będziesz pewien - [image] napisz do mnie. Powodzenia!

Rafał Hawrylak


Java - teoria

0. Oznaczenia w kursie

document.write() - zwykły tekst oraz polecenia JavaScript
<B>, <SCRIPT> - znaczniki HTML
BORDER, HREF, WIDTH - parametry znaczników
"middle", "bold", pink, 85 - wartości tych parametrów
onLoad, onClick, onMouseOver - zdarzenia
function, for, return - słowa kluczowe
==, != , <=, && - operatory


Java - teoria

1. Co to jest "Java Script"?

Java Script jest to język skryptowy dla dokumentów internetowych. Skrypty można umieszczać w plikach stron WWW *.htm czy *.html jak i zarówno w osobnych plikach (o rozszerzeniu *.js). Jest to język bardzo przydatny, ze względu na jego możliwości, których nie posiada czysty HTML, czyli wszelkiego rodzaju obsługa obiektów, zdarzeń i wiele innych. Bardzo pomocny przy używaniu formularzy. Pozwala na sprawdzenie wprowadzonych danych lub ich przetworzenie do postaci jaką chcemy otrzymać. JavaScript nie potrzebuje osobnego kompilatora, jak inne języki programowania, gdyż do pisania skryptów potrzebny jest jedynie Notatnik. Chcąc używać tego języka, niezbędna jest znajomość, chociażby podstawowa, HTML-a. Przed rozpoczęciem nauki trzeba się również upewnić, czy jesteśmy przygotowani do używania Javy. Powinieneś posiadać przeglądarkę internetową Internet Explorer (minimalnie 3.0) lub Netscape Navigator (min. 2.0). Niestety pozostaje wiele niezgodności między tymi dwoma potętnymi przeglądarkami w interpretowaniu skryptów (jak i HTML-a) :(.


Java - teoria

2. Czy "Java Script" = "Java"?

Na wstępie od razu udzielę odpowiedzi: między tymi pojęciami nie można postawić znaku równości. Oba języki są bardzo podobne, aczkolwiek bardzo różne. Na pierwszy rzut oka, mają prawie identyczną składnię. Jednak "JavaScript" posiada mniej poleceń niż "Java". "JavaScript" jest to "okrojona" wersja "Javy" przeznaczona do pisania prostych apletów używanych na stronach www oraz kompilowanych "w locie". Jest bardzo dobrym rozwiązaniem dla webmasterów i obecnie niepodzielnie króluje jako język skryptowy (chociaż ostatnio coraz popularniejsze stają się CGI i PHP). Poniższa tabelka przedstawia główne względy, które każą nam uważać, że "JavaScript" to nie to samo, co "Java":

JavaScript | Java
interpretowana (nie kompilowana) przez klienta | skompilowany aplet jest ściągany z serwera i wykonywany u klienta
obiektowo-utwierdzony; nie wyróżnia się typów obiektów; dziedziczenie odbywa się za pomocą mechanizmu prototypu; własności i metody dowolnego obiektu mogą być dodawane dynamicznie | zorientowany obiektowo; obiekty można podzielić na klasy i instancje, w których wszelkie dziedziczenie odbywa się poprzez hierarchię klasy
kod zintegrowany i zagnieżdżony w HTML | aplety są oddzielnie od HTML (dostęp na stronie)
nie deklarowane typy zmiennych | typy zmiennych muszą być zadeklarowane
odwołania obiektu sprawdzane są na bieżąco | wszystkie referencje obieku muszą istnieć już podczas kompilacji
nie może automatycznie zapisywać na dysk | nie może automatycznie zapisywać na dysk


Java - teoria

3. Jak korzystać ze skryptów na stronie?

Skrypty umieszcza się w sekcji nagłówkowej (między znacznikami <HEAD></HEAD>) lub w sekcji ciała strony (między znacznikami <BODY></BODY>). W sekcji nagłówkowej najczęsciej deklaruje się funkcje, a w sekcji ciała wywołuje oraz pisze się inne polecenia wykonywane podczas ładownia strony. Skrypty wstawiamy na stronę dzięki tagom (znacznikom) <SCRIPT></SCRIPT>.

Wygląda to tak:

<SCRIPT LANGUAGE="JavaScript">
    <!--
        Tutaj wstawiamy deklaracje funkcji oraz polecenia
    -->
</SCRIPT>

LANGUAGE jest parametrem znacznika <SCRIPT> i oznacza język, którego użyjemy do pisania skryptu. Jak pewnie zauważyłeś, użyte zostały znaczniki komentarza (<!--komentarz-->). Dzięki temu przeglądarki nie interpretujące JavaScript po prostu omijają go.

Kilka zasad:

  • jeśli występuje więcej niż jedno polecenie, to oddzielamy je średnikiem
  • przeglądarki są bardzo wrażliwe na błędy w skryptach (brak nawiasu czy średnika i wszystko się sypie)
  • wstawiając bardzo użyteczne komentarze, mamy do wyboru:
    • wielowierszowe:
      /* treść komentarza */
    • jednowierszowe:
      // treść komentarza


Java - teoria

4. Skrypty z plików

Często się zdarza, że skrypt, którego chcemy używać ma dosyć dużą objętość, a my chcemy korzystać z niego na kilku podstronach naszego serwisu www. Umieszczenie takiego skryptu w osobnym pliku jest dużo wygodniejsze z kilku powodów:

  • mniejsza objętość naszej strony
  • większa czytelność kodu
  • łatwiejsza modyfikacja skryptu (nie musisz zmieniać go na wszystkich stronach, gdzie go używasz)

Znacznik <SCRIPT> posiada taki parametr jak SRC. Jest to adres url do pliku skryptu. W związku z tym, że przeglądarka poznaje język skryptu po rozszerzeniu pliku (.js lub .vbs), nie koniecznie trzeba deklarować język parametrem LANGUAGE.

<SCRIPT SRC="powitanie.js">
</SCRIPT>

Zauważamy, że nie ma tu już komentarza (<!-- oraz -->). Mając wcześniej odpowiednio przygotowany plik "powitanie.js" skrypt wyglądałby następująco:

A ten napisano w zwykłym HTML


Java - teoria

5. Piszemy pierwszy skrypt

Jak już pisałem w poprzednim punkcie kursu skrypty wstawiamy w sekcji nagłówkowej strony lub w sekcji ciała. Napiszmy przykładowy skrypt:

<HTML>
 <HEAD>
  <META HTTP-EQUIV="Content-Type" CONTENT="Text/html; charset=Windows-1250">
 </HEAD>
 <BODY BGCOLOR=LightBlue>
  <SCRIPT LANGUAGE="JavaScript">
     document.write("<FONT COLOR=Red><B>Ten tekst został napisany w Javie Scipt</B></FONT>");
  </SCRIPT>
  <P><I>A ten napisano w zwykłym HTML</I></P>
 </BODY>
</HTML>

Efekt działania:

A ten tekst napisano w zwykłym HTML

Polecenie document.write("twój tekst") wprowadza z poziomu Javy polecenia HTML na stronę. Można w cudzysłowiu wpisywać ciąg znaczników HTML i tekstów, które będą traktowane tak samo jak są interpretowane w czystym HTML.


Java - teoria

6. Definiowanie zmiennych

Zmienna jest to miejsce w pamięci, gdzie możemy przechowywać dane. Zmienne możemy podzielić na te deklarowane w dokumencie, czyli zmienne globalne oraz te deklarowane wewnątrz funkcji - zmienne lokalne. Deklarując zmienną lokalną o takiej samej nazwie jak zmienna globalna, nie musimy się obawiać, że funkcja zmodyfikuje wartość danej globalnej, gdyż odnosi się ona tylko do zmiennej lokalnej (pod warunkiem, że poprzedzimy ją słowem var). Zmienne rozróżniamy również ze względu na to, jakiego typu dane przechowujemy pod nimi. Są to liczby, łańcuchy tekstowe, wartości logiczne oraz null. Deklarujemy je na jeden z trzech sposobów:

var a;

var a = 4;

a = 4;

Zauważmy, że słówko kluczowe var, może być ominięte bez żadnych konsekwencji. Przy deklaracji nie definiujemy również, jakiego typu jest to zmienna. Jej typ ustala się przy jej inicjowaniu, czyli pierwszym nadaniu wartości. Pierwszy przykład jest tylko deklaracją zmiennej, której tymczasowa wartość to undefined. Deklarując zmienną musimy zwracać uwagę na wielkość liter, gdyż kompilator rozróżnia je również pod tym względem.

W apletach JavaScript możemy posługiwać się następującymi typami zmiennych:

NUMBER - zmienna liczbowa; w JavaScript nie ma podziału na podtypy liczbowe (całkowite, całkowite długie, dziesiętne, itd). Trzeba tutaj pamiętać, że wpisując liczbę jako ułamek dziesiętny używamy kropki zamiast przecinka, np:

zmienna = 7;
zmienna = 20.35;
zmienna = 43e-2; /* to samo co 43*10^(-2) czyli 43/100 */

STRING - zmienna tekstowa; w JavaScript nie ma podziału na podtypy zmiennych tekstowych (pojedyncze znaki i całe łańcuchy). Możemy umieszczać je w pojedynczych lub podwójnych cudzysłowiach. Jeżeli chcemy połączyć dwa łańcuchy, to robimy to operatorem +, np:

zmienna = "jakiś_tekst ze spacjami";
zmienna = 'tak też można';
zmienna = "czy 2 jest równe " + 2;
imię = "Rafał"; nazwisko = "Hawrylak";
zmienna = "imię: " + imię + " nazwisko: " + nazwisko;

BOOLEAN - zmienna logiczna; przyjmuje wartości TRUE = 1 lub FALSE = 0. , np:

zmienna = true;

NULL - ten typ oznacza "nic", czyli brak jakiejkolwiek wartości, np:

zmienna = null;

Chcąc sprawdzić typ zmiennej, używamy operatora typeof(zmienna). Podaje on typ jako łańcuch znaków.


Java - teoria

7. Funkcje

Funkcje są to bloki instrukcji. Aby wyjaśnić konieczność ich istnienia posłużę się przykładem. Tak wygląda aplet zawierający ciąg instrukcji:

<SCRIPT LANGUAGE="JavaScript">
 <!--
  document.write("To jest pierwsza linijka tekstu<BR>");
  document.write("To jest druga linijka tekstu<BR>");
  document.write("To jest trzecia linijka tekstu<BR>");
 //-->
</SCRIPT>

Efekt działania:

A teraz ten sam skrypt z wykorzystaniem funkcji:

<SCRIPT LANGUAGE="JavaScript">
 <!--
  document.write("To jest pierwsza linijka tekstu<BR>");

 function napis()
  {
   document.write("To jest druga linijka tekstu<BR>");
  }

  document.write("To jest trzecia linijka tekstu<BR>");
 //-->
</SCRIPT>

I jaka jest różnica:

Można stąd wywnioskować, że funkcja nie wykonuje się dopóki nie jest ona wywołana. Funkcje wywołuje się poprzez napisanie w kodzie jej nazwy wraz z jej ewentualnymi parametrami (w nawiasie), a deklaruje się ją w następujący sposób:

function Nazwa_Funkcji(parametr1, ...)
 {
   polecenie;
   polecenie;
   polecenie;
 }

Nazwa funkcji, paramtru jak i zmiennej są podporządkowane kilku zasadom:

  • nie mogą zawierać spacji
  • nie mogą zaczynać się od cyfry
  • mogą zawierać tylko litery, cyfry i znaki podkreślenia (_)
  • nie może być słowem kluczowym

Jak już wspomniałem na początku tej lekcji, funkcja jest to blok instrukcji. Takie bloki umieszczamy w nawiasach klamrowych { }. Jeżeli znasz podstawy programowania w jakimkolwiek języku, to wiesz zapewne, że jest podział między takimi osobnymi blokami instrukcji na procedury, czyli takie, które się poprostu wykonują, oraz funkcje, które po wykonaniu wszystkich instrukcji zwracają jakiś produkt swojej działalności. W JavaScript nie ma procedur, a ich rolę spełniają funkcje, które nic nie zwracają. Funkcja może zwrócić jakąś wartość dzięki poleceniu return. Skoro funkcja coś zwraca, zapewne chcielibyśmy, aby efekt tej pracy został zapisany do jakiejś zmiennej. Dokonuje się to zwykłym przypisaniem wartości zmiennej, tyle że zamiast wyrażenia po prawej stronie jest wywołanie funkcji. Jest ono traktowane jak normalna zmienna typu zwracanego przez funkcję, toteż można na nim wykonywać dalsze operacje. Zobacz przykład:

<SCRIPT LANGUAGE="JavaScript">
 <!--

  function kwadrat(liczba)
   {
    wynik = liczba * liczba;
    return wynik; /* zwrócenie wartości */
   }

  function oblicz() /* niby procedura */
   {
    liczba2 = 3 * kwadrat(2);
    window.alert("Potrojony kwadrat liczby 2 wynosi " + liczba2);
   }

 //-->
</SCRIPT>

w sekcji <BODY>

<IMG SRC="obrazek.gif" ALT="Kliknij mnie" onClick="oblicz()">


Java - teoria

8. Zdarzenia

Jak już wspomniałem w lekcji drugiej, skrypt można umieścić w sekcji nagłówkowej lub w sekcji ciała. Po umieszczeniu go sekcji ciała, wykonuje się on wraz z ładowaniem strony. A co jeżeli chcemy, aby wykonał się on w późniejszym czasie, np: po kliknięciu na jakiś element strony. Rozwiązanie jest proste. JavaScript jest językiem doskonale nadającym się do obsługi wszelkich zdarzeń występujących w obrębie naszego okna. Generalnie zdarzenia możemy podzielić na trzy główne grupy, związane z obsługą myszki, klawiatury oraz ładowaniem się strony, jednak jest to podział niedokładny, ponieważ niektóre zdarzenia można przypisać do dwóch grup (np: onSubmit należy do tych związanych z myszką i klawiaturą). Zdarzenia obsługujemy poprzez wpisanie do danego obiektu jako parametru (dla kliknięcia) onClick="Jakaś_Funkcja(...parametry...)" Oczywiście nie wszystkie obiekty posiadają jednakowe zdarzenia. Dla przykładu poniższy kod HTML i JavaScript:

<HTML>
 <HEAD>
  <TITLE>Przykładowy skrypt - obsługa zdarzeń</TITLE>
  <SCRIPT LANGUAGE="JavaScript">
   <!--

    fuction Napis(parametr)
     {
      window.alert(parametr);
     }
   //-->
  </SCRIPT>
 </HEAD>
 <BODY>
  <IMG SRC="obrazek.gif" onClick="Napis('Dzięki, że mnie kliknąłeś')">
 </BODY>
</HTML>

A tak by to wyglądało w praktyce (kliknij na obrazek i zobacz co się dzieje):

Obsługę zdarzeń możemy również zrobić za pomocą zadeklarowania skryptu w nagłówku strony, posiadającego prametry FOR="nazwa_obiektu" oraz EVENT="zdarzenie". Dla powyżwszego przykładu wyglądało by to tak:

<HTML>
 <HEAD>
  <TITLE>Przykład obsługi zdarzeń</TITLE>
  <SCRIPT FOR="obrazek1" EVENT=onClick>
   <!--

    window.alert("Dzięki, że mnie kliknąłeś");

   //-->
  </SCRIPT>
 </HEAD>
 <BODY>
  <IMG SRC="obrazek.gif" ID="obrazek1">
 </BODY>
</HTML>

Mimo wszystko nie polecam korzystania z tej metody, ponieważ niektóre przeglądarki (w tym Netscape Navigator) nie obsługują tych parametrów znacznika <SCRIPT>.

Bardzo ciekawym aspektem korzystania ze zdarzeń jest możliwość ich przechwytywania. Więcej dowiesz się z lekcji 28.

Wykaz wszystkich zdarzeń.


Java - teoria

9. Okienka dialogowe

Okienka dialogowe służą do komunikowania się komputera z użytkownikiem. W JavaScript dostępne są trzy rodzaje takich okienek:

ALERT - okienko z jednym przyciskiem OK. Służy do wyświetlania komunikatu. Może pełnić rolę źródła wskazówek dla internauty.

Składnia:

window.alert("To jest okienko typu ALERT");

CONFIRM - okienko z przyciskami OK i ANULUJ. Służy do zadawania użytkownikowi pytań. Aby móc w pełni korzystać z okienka CONFIRM musisz przeczytać lekcję o instrukcjach warunkowych. Jeżeli użytkownik wybierze OK funkcja zwróci TRUE, w przeciwnym wypadku FALSE.

Wywołanie:

i = confirm("To jest komunikat typu CONFIRM");

PROMPT - Jest to okienko zawierające monit o wpisanie zadanych danych do niego. Jeżeli użytkownik wybierze OK to funkcja zwróci łańcuch tekstowy wpisany do okienka, w przeciwnym przypadku funkcja zwróci NULL. Zmienna i będzie zawierała tekst wpisany przez użytkownika.

Składnia:

i = window.prompt("To jest komunikat typu PROMPT","to jest
 domyślna wartość");

Czasami mamy potrzebę zaczęcia pisania komunikatu w nowej linijce. W JavaScript służy do tego \n. Do wprowadzenia tabulacji używamy \t.

window.alert("To jest pierwsza linijka komunikatu\n
To jest druga linijka komunikatu\n
\tA trzecia linijka jest poprzedzona tabulacją");

Przykład:
Kliknij mnie

Dostępnych jest jeszcze kilka znaków specjalnych, których opis znajdziesz tutaj.


Java - teoria

10. Pasek statusu

Pasek statusu jest to dolna część strony, której zazwyczaj pisane są adresy URL po najechaniu kursorem na odsyłacz. Tekst statusu można w każdej chwili modyfikować. Ponadto można ustalić domyślny tekst statusu. Ten umieszczony w sekcji nagłówkowej wyświetli się zanim strona się załaduje. Przykład wykorzystania (spójrz do statusu):

<HEAD>
 <SCRIPT LANGUAGE="JavaScript">
  <!--
   defaultStatus = "Witam na mojej stronie";
  //-->
 </SCRIPT>
</HEAD>

Do zmiany statusu używamy:

<IMG SRC="obrazek.gif" onMouseOver="window.status='Dzięki za najechanie na mnie'">

Efekt działania (najedź na obrazek):


Java - teoria

11. Historia

Wykorzystanie historii na stronie jest jednym z niestety licznych przykładów na to, jaka jest rozbieżność między przeglądarkami w interpretowaniu skryptów oraz składni HTML. Takie wykorzystanie historii odpowiada w Internet Explorerze kliknięciu "Wstecz", "Dalej" oraz "Odśwież". Realizuje się to bardzo prosto, za pomocą pojedynczych poleceń:

history.back();  /* wstecz */
history.go(0);  /* odśwież */
history.forward();  /* dalej */

Wywołanie tych funkcji nie powinno Ci już nastręczać kłopotów, jeżeli przeczytałeś lekcję 8. zdarzenia. Często używa się do tego celu elementów formularza:

<FORM name="formularz1">
 <INPUT TYPE="button" VALUE="Wstecz" onClick="history.back()">
 <INPUT TYPE="button" VALUE="Odśwież" onClick="history.go(0)">
 <INPUT TYPE="button" VALUE="Dalej" onClick="history.forward()">
</FORM>

Co daje efekt następującej postaci:

Jednak moim skromnym zdaniem (pewnie nie tylko moim) wygląda to mało estetycznie, poza tym zawiera dużo miejsca na stronie (dla webmasterów, którzy je oszczędzają jest to ważne). Zatem można zrobić to samo tylko z obrazkami:

<IMG SRC="str0.gif" onClick="history.back()">
<IMG SRC="refresh.gif" onClick="history.go(0)">
<IMG SRC="str1.gif" onClick="history.forward()">

Co prezentuje się tak:

Jak już wspomniałem istnieją niezgodności pomiędzy przeglądarkami w interpretowaniu apletów praz HTML. Tak też powyższy zapis nie działa w Netscape Navigator. Jednak Java Script jest językiem szybko się rozwijającym, a więc musi być elestyczny i oferować kilka rozwiązań tego samego problemu i oto:

<A HREF="javascript:history.back()">
 <IMG SRC="str0.gif" BORDER=0>
</A>
<A HREF="javascript:history.go(0)">
 <IMG SRC="refresh.gif" BORDER=0>
</A>
<A HREF="javascript:history.forward()">
 <IMG SRC="str1.gif" BORDER=0>
</A>

Efekt:

Oto polecenia, które możemy stosować zamiennie:

history.back() <=> history.go(-1)
history.go(0) <=> history.go() (tylko IE) <=> location.reload()
history.forward() <=> history.go(1)

Obiekt history jest opisany również w dodatkach.


Java - teoria

12. Instrukcja warunkowa If...else...

Zdarzy się pewnie, że będziesz chciał, aby twój skrypt wykonał różne polecenia w zależności od pewnych okoliczności. Przykładowo, wyświetlasz okienko dialogowe typu CONFIRM, gdzie użytkownik ma do wyboru przyciski OK oraz ANULUJ. Pytając się go, zapewne chciałbyś wykonać jakieś czynności uzależnione od jego wyboru. Język JavaScript nie udostępnia na razie okienka dialogowego z przyciskami TAK | NIE, toteż okienko CONFIRM może nam posłużyć jako takie. Zadając pytanie: "Czy jesteś tutaj pierwszy raz?", można uzależnić wygląd i działąnie strony od tej odpowiedzi, np:

<SCRIPT LANGUAGE="JavaScript">
 <!--

  function sprawdz()
   {
    i = window.confirm("Czy jesteś tutaj pierwszy raz?");
    if (i == true)
     {
      document.write("Mam nadzieję, że spdoba Ci się tutaj");
      document.write("<P align=right>Rafał Hawrylak</P>");
      document.write("<BR><BR><A HREF='jt11.html'>Powrót</A>");
     }
    else
      document.write("Mam nadzieję, że znajdziesz tutaj zawsze
coś nowego i ciekawego<BR><BR><A HREF='jt11.html'>Powrót</A>");
   }

 //-->
</SCRIPT>

Działanie:

Instrukcja if sprawdza, czy warunek podany w nawiasie jest prawdziwy (true) i jeżeli tak to wykonuje instrukcje w pierwszym bloku, a jeżeli nie to wykonuje instrukcje w drugim bloku za else. Jeżeli jest to więcej niż jedno polecenie, to umieszczamy je w nawiasach klamrowych { }, w przeciwnym wypadku omijamy je. Wykorzystanie else nie jest oczywiście konieczne i możemy pisać jedynie instrukcje dla warunku true.

Do pełnego wykorzystania instrukcji warunkowej if...else... pownieneś zapoznać się z operatorami.


Java - teoria

13. Instrukcja warunkowa switch

W poprzedniej lekcji poznałeś zasady działania instrukcji warunkowej if...else.... Po sprawdzeniu wartości logicznej wyrażenia wykonywała ona odpowiednie polecenia. Jeżeli jednak chciałbyś wykonać polecenia w zależności od więcej niż dwóch wartości, to powinieneś zastosować instrukcję sterującą switch. Składnia:

switch (wyrażenie) {
    case etykieta1 :
        polecenie;
        polecenie;
        ...
        break;
    case etykieta2 :
        polecenie;
        polecenie;
        ...
        break;
     ...
     ...
   default :
        polecenie;
        polecenie;
}

Jeżeli wartość podawana jako wyrażenie (expression - ang.) zostanie zidentyfikowana jako jedna z etykiet (label - ang.), to program wykonuje blok instrukcji znajdujący się za dwukropkiem przy danej etykiecie. Blok zakończony jest instrukcją break, po której skrypt wykonywany jest od miejsca za klamrowym nawiasem kończącym intrukcję switch (przeskakuje po wszystkich etykietach do końca omijając default). W instrukcji warunkowej switch, polecenie break wstawiamy na końcu każdego bloku należącego do danej etykiety, za wyjątkiem ostatniej etykiety. Opcjonalnie ostatnią etykietą może być default (domyślna - pol.) (zauważ, że nie ma już przy niej case). Służy ona do obsługi zdarzenia w przypadku, kiedy użytkownik podał etykietę nie pasującą do żadnej z zadeklarowanych. Przykład:

<SCRIPT LANGUAGE="JavaScript">
 <!--

  function pytanko()
   {
    odp = window.prompt("Jak masz na imię?"
    ,"Tutaj wpisz swoje imię");
    switch (odp) {
      case "Rafał" :
        window.alert("Ja też mam na imię Rafał");
        break;
      case "Agata" :
        window.alert("Masz na imię tak, jak moja siostra");
        break;
      case "Nan Mian" :
        window.alert("Cześć Nan Mian! Kopę lat!");
        break;
      default :
        window.alert("Miło mi Cię poznać " + odp + "!");
    }
   }

 //-->
</SCRIPT>

w BODY:

<FORM>
 <INPUT TYPE="button" VALUE="Kliknij mnie" onClick="pytanko()">
</FORM>

Działanie:


Java - teoria

14. Operatory

Operator jest to znak lub grupa znaków do wykonywania operacji na zmiennej lub zmiennych. Wyróżniamy takie rodzaje operatorów jak: arytmetyczne, bitowe, logiczne, przypisania i inne. Ich działanie jest bardzo podobne do funkcji, ponieważ pobierają one parametry (czasem tylko jeden) i zwracają wartość. Niektóre operatory mają wiele zastosowań, np: + jako operator arytmetyczny operujący na liczbach działa jako znak dodawania liczb, jednak zastosowany do zmiennych typu string, łączy łańcuchy znakowe.

Najpowszechniej stosowaną grupą są operatory przypisania. Prym wśród nich wiedzie operator zwykłego przypisania - =. Jednakże istnieje ich o wiele więcej. Nazwa grupy dokładnie określa, jaką funkcję pełnią te operaatory, a mianowicie - przypisywania. Zazwyczaj tam dokąd przypisywane są wartości to zmienne lub właściwości obiektów. A przypisać można bardzo wiele: literały, wartości wyrażeń, to co zwracają funkcje, wartości innych zmiennych oraz właściwości. Tak więc pole do popisu jest tutaj duże.

Często stosowanymi są również operatory logiczne. Służą one do porównywania wyrażeń. Najczęściej używa się ich w różnych instrukcjach sterujących oraz warunkowych. Operatory logiczne mogą zwrócić jedną z dwóch wartości - true lub false (prawda lub fałsz).

Równie znaną grupę stanowią operatory arytmetyczne. Są to dobrze wszystkim znane z lekcji matematyki "plus", "minus", "razy" i "podzielić". Oprócz nich jest jeszcze operator, który zwraca resztę z dzielenia - %.

Wszystkie operatory podlegają pewnemu porządkowi określającemu kolejność ich wykonywania. Więcej na ten temat dowiesz się z priorytetu operatorów.

Dokładny opis tych i wszystkich pozostałych operatorów znajdziesz w dodatkach.


Java - teoria

15. Tablice

Tablice są to takie zmienne potrafiące przechowywać wiele danych określonego typu. Są to zwykle informacje powiązane ze sobą w jakiś sposób, np: lista nazwisk, lista dostępnych urządzeń w systemie. Pewnie zapytacie, skoro są to całe zbiory danych, to jak skutecznie można operawać na takiej tablicy, jeżeli jest to tylko jedna zmienna. Rozwiązanie jest banalne - wszystkie pole tablicy są poindexowane (każdemu polu przypisana jest kolejna liczba licząc od zera włącznie).

Tablicę deklarujemy w następujący sposób:

Pracownicy = new Array;

Zauważmy, że nie podaliśmy, z ilu elementów składać się będzie tablica. Można tę wielkość podać przy deklarowaniu:

Pracownicy = new Array(9);

Powyższa tablica zawiera 10 pól. Aby ustawiać lub odczytać daną wartość z tablicy, używamy indexu charakteryzującego dane pole w nawiasie kwadratowym za nazwą zmiennej, np:

Pracownicy[0] = "Abramowski";
Pracownicy[1] = "Malinowski"
Pracownicy[2] = "Kowalski"

Istnieje możliwość zainicjowania wartości pól tablicy już podczas deklaracji:

Pracownicy = new Array("Abramowski", "Malinowski", "Kowalski");

JavaScript umożliwia deklarowanie tablic wielowymiarowych, to znaczy takich, dla których do opisania pola takiej tablicy wymagane jest podanie kilku indexów. Tworzy się ją w taki sposób, że najpierw tworzymy standardową tablicę, a w miejsce jej pól deklarujemy kolejne tablice:

Pracownicy = new Array(2);
Pracownicy[0] = new Array(1);
Pracownicy[1] = new Array(1);
Pracownicy[2] = new Array(1);

Pracownicy[0][0] = "Abramowski";
Pracownicy[0][1] = "ul. Poprzeczna 3";
Pracownicy[1][0] = "Malinowski";
Pracownicy[1][1] = "ul. Przybyszewskiego 95";
Pracownicy[2][0] = "Kowalski";
Pracownicy[2][1] = "ul. Piotrkowska 246";

Do sprawnego wykorzystywania tablic potrzebna Ci będzie znajomość pętli.

Obiekt Array posiada kilka użytecznych funkcji (metod). Oto one:

concat([element1], [element2] ...) - dodaje do tablicy kolejne pola lub pola z tablic. Elementy dodawane są od lewej do prawej. Jeżeli element jest tablicą to wszystkie jego pola są dodawane po kolei na koniec tablicy

join([separator]) - funkcja zwracająca wartość typu String reprezentującą połączone wszystkie elementy tablicy (opcjonalnie oddzielone separatorem)

pop() - usuwa ostatni element tablicy i zwraca go

push([element1], [element2] ...) - dodaje do tablicy element/elementy i zwraca nową długość tablicy

reverse() - zwraca tablicę z odwróconymi elementami (ostatni jest pierwszy, itd)

sort([sortFunction]) - sortuje tablicę. Możemy podać nazwę funkcji, która będzie określać sortowanie. Normalnie dane są sortowane według ich odpowiedników w kodzie ASCII. Funkcja powinna być dwuparametrowa i zwracać WARTOŚĆ UJEMNĄ - jeżeli pierwszy przekazany argument jest mniejszy od drugiego, ZERO - jeżeli argumenty są sobie równe, WARTOŚĆ DODATNIĄ - jeżeli pierwszy argument jest większy od drugiego.

splice(start, deleteCount, [element1], [element2] ...) - usuwa wyznaczoną część tablicy, gdzie start określa początkowy index, a deleteCount ilość pól do usunięcia. Do tablicy wstawiane są opcjonalnie w miejsce skasowanych pól nowe. Funkcja zwraca tablicę zawierającą skasowane elementy

toString() - zwraca łańcuch tekstowy reprezentujący wszystkie elementy tablicy rozdzielone przecinkami

Więcej znajdziesz w dodatku - Array.

Na koniec tej lekcji chciałbym przedstawić przykład ilustrujący działanie tablic oraz ich metod. Jest on trochę bardziej skomplikowany niż wszystkie przykłady do tej pory przedstawione w kursie, ale czynię to celowo jako pewne powtórzenie wiadomości. Jeśli uważnie studiowałeś ten kurs, poniższy przykład nie powinien sprawić Ci żadnych kłopotów. Jeżeli jednak coś wydaje Ci się niejasne to przeczytaj odpowiednią lekcję jeszcze raz lub [image] napisz do mnie. Poniższy kod wstawmy do sekcji głowy:

<SCRIPT LANGUAGE="JavaScript">
<!--

Tablica = new Array();

 function dodaj(p_lub_k)
  {
   if (Tablica.length != 10)
    {
     if (document.forms["imiona"].imie.value != "")
      {
       if (p_lub_k == 'p')
        {
         for (i = Tablica.length; i >= 1; i--)
          {
           Tablica[i] = Tablica[i - 1];
          }
         Tablica[0] = document.forms["imiona"].imie.value;
         /* dla JavaScript w wersji co najmniej 5.5 piszemy poprostu:
            Tablica.unshift(document.forms["imiona"].imie.value);
         */
        }
       else
        {
         Tablica[Tablica.length] = document.forms["imiona"].imie.value;
         /* dla JavaScript w wersji co najmniej 5.5 piszemy poprostu:
            Tablica.push(document.forms["imiona"].imie.value);
         */
        }
       document.forms["imiona"].ile_jeszcze.value = 10 - Tablica.length;
       document.forms["imiona"].imie.value = "";
     }
    }
   else window.alert("Tablica jest już pełna");
   if (document.forms["imiona"].opcje.checked) f_wypisz();
   document.forms["imiona"].imie.focus();
  }

 function usun(p_lub_k)
  {
   if (Tablica.length != 0)
    {
     if (p_lub_k == 'p')
      {
       for (i = 0; i <= Tablica.length - 2; i++)
        {
         Tablica[i] = Tablica[i + 1];
        }
         /* dla JavaScript w wersji co najmniej 5.5 piszemy po prostu:
            do usuniecia elementu z końca:
            Tablica.pop(document.forms["imiona"].imie.value);
            do usuniecia elementu z początku:
            Tablica.shift(document.forms["imiona"].imie.value);
         */
      }
      Tablica.length--;
      document.forms["imiona"].ile_jeszcze.value = 10 - Tablica.length;
    }
   else window.alert("Tablica jest pusta");
   if (document.forms["imiona"].opcje.checked) f_wypisz();
   document.forms["imiona"].imie.focus();
  }

 function usun_wszystkie()
  {
   if (window.confirm("Ta operacja wyczyści całą tablicę. Kontunuować?"))
    {
     Tablica.length = 0;
     document.forms["imiona"].ile_jeszcze.value = 10 - Tablica.length;
     if (document.forms["imiona"].opcje.checked) f_wypisz();
     document.forms["imiona"].imie.focus();
    }
  }

 function f_sortuj()
  {
   Tablica = Tablica.sort();
   if (document.forms["imiona"].opcje.checked) f_wypisz();
   document.forms["imiona"].imie.focus();
  }

 function f_odwroc()
  {
   Tablica = Tablica.reverse();
   if (document.forms["imiona"].opcje.checked) f_wypisz();
   document.forms["imiona"].imie.focus();
  }

 function f_wypisz()
  {
   s = "Oto nasza tablica: ";
   s += Tablica.join(", ");
   document.forms["imiona"].wypisane.value = s;
   document.forms["imiona"].imie.focus();
  }

//-->
</SCRIPT>

Natomiast tę część umieść w sekcji ciała:

<FORM name=imiona>
Zostało wolnych miejsc w tablicy:
<INPUT TYPE=text readonly SIZE=1 name=ile_jeszcze VALUE=10><BR>
Wpisz tutaj imię: <INPUT TYPE=text SIZE=20 name=imie><BR>
<INPUT TYPE=button VALUE="Dodaj na koniec" onClick="dodaj('k')" name=dodaj_k>
<INPUT TYPE=button VALUE="Dodaj na początek" onClick="dodaj('p')" name=dodaj_p><BR><BR>
<INPUT TYPE=button VALUE="Usuń z końca" onClick="usun('k')" name=usun_k>
<INPUT TYPE=button VALUE="Usuń z początku" onClick="usun('p')" name=usun_p>
<INPUT TYPE=button VALUE="Wyczyść wszystko" onClick="usun_wszystkie()" name=wyczysc><BR><BR>
<INPUT TYPE=button VALUE="Sortuj" onClick="f_sortuj()" name=sortuj>
<INPUT TYPE=button VALUE="Odwróć" onClick="f_odwroc()" name=odwroc><BR><BR>
<INPUT TYPE=button VALUE="Wypisz" onClick="f_wypisz()" name=wypisz>
<INPUT TYPE=checkbox VALUE=autowypisywanie checked name=opcje> wypisywać automatycznie<BR>
<INPUT TYPE=text SIZE=80 name=wypisane>
</FORM>

Co w praktyce wygląda następująco:

Zostało wolnych miejsc w tablicy:
Wpisz tutaj imię:

wypisywać automatycznie


Java - teoria

16. Pętle

Pętle są bardzo użytecznym elementem języka JavaScript (innych również :). Pozwalają one na wykonywanie zawartych w nich poleceń wielokrotnie, przez co zmniejsza się objętość kodu skryptu, a zarazem oszczędza pracy programiście. W języku JavaScript (w wersji 5.5) istnieją 3 rodzaje pętli oraz stosowanie tzw. etykietek, które nie są uznawane za iterację (pętlę), jednakże ich używanie głównie do takiej funkcji się sprowadza.

Pierwszą pętlą jest pętla for. Jej składnia wygląda następująco:

for ([wartość początkowa licznika]; [warunek]; [zmiana licznika])
 {
  ... polecenia;
  ... polecenia;
 }

Występuje tutaj taka zmienna, jak licznik pętli. Jego wartość początkową ustawiamy w polu wartość początkowa. Zazwyczaj identyfikuje on liczbę przebiegów pętli, zwiększaną w miejscu zmiana licznika. Licznik może być również dekrementowany (zmniejszany) i wtedy pętla wykonuje się jakby od końca do początku.

Struktura działania pętli wygląda następująco:

  1. Inicjowana jest wartość początkowa licznika
  2. Sprawdzany jest warunek. Jeżeli wynosi on true to pętla będzie chodzić dalej, a jeżeli wynosi false - pętla zostaje przerwana
  3. Następuje zmiana licznika
  4. Wykonują się wszystkie polecenia znajdujące się w bloku, po czym pętla przechodzi do kroku drugiego

Możliwe jest zagnieżdżanie jednej pętli w drugiej, to znaczy umieszczenie jednej pętli w bloku drugiej. Jest to często wykorzystywane przy obsłudze wielowymiarowych tablic.

Oto przykład wykorzystania pętli for:

<SCRIPT LANGUAGE="JavaScript">
<!--

 function potega()
  {
   var wynik = 1;
   l = parseInt(document.forms["matma"].podstawa.value);
   w = parseInt(document.forms["matma"].wykladnik.value);
   for (i = 1; i <= w; i++)
    {
     wynik *= l;
    }
   window.alert("Wynik to: " + wynik);
  }

//-->
</SCRIPT>

.. i jeszcze potrzebne elementy formularza:

<FORM name="matma">
 <INPUT TYPE="text" VALUE=2 SIZE=2 name="podstawa"> do potęgi
 <INPUT TYPE="text" VALUE=3 SIZE=2 name="wykladnik">
 <INPUT TYPE="button" VALUE="Oblicz" onClick="potega()">
</FORM>

Oraz efekt działania:

do potęgi

Kolejna pętla do..while różni się tym od poprzedniej, że nie posiada ona licznika pętli. Podobnie zresztą pętla while. Niektórzy uważają obie powyższe jako jedną i tą samą. Ze względu na zasadniczą różnicę w działaniu (mimo podobnej składni i użytych słów kluczowych), wiele osób rozróżnia je jako dwie osobne. Różnica polega na tym, że w pierwszym przypadku pętla sprawdza warunek po wykonaniu się instrukcji, natomiast w drugim przypadku - przed. Obie pętle wykonują się tak długo, jak długo podany warunek jest prawdziwy (ma wartość logiczną true).

Składnia pętli do...while:

do
 {
  ... polecenie;
  ... polecenie;
 }
while (warunek);

Przepiszmy funkcję potega() używając tej właśnie pętli:

function potega2()
 {
  var wynik = 1;
  l = parseInt(document.forms["matma"].podstawa.value);
  w = parseInt(document.forms["matma"].wykladnik.value);
  i = 1
  do
   {
    wynik *= l;
    i++;
   }
  while (i <= w);
  window.alert("Wynik to: " + wynik);
 }

Widzimy, że mimo wszystko musieliśmy zadeklarować sobie swój licznik pętli, zatem zauważamy, że wybór odpowiedniej pętli zależy od algorytmu. Nie jest oczywiście błędem, stosowanie cały czas jednej pętli, jednak stosowanie różnych pętli w różnych sytuacjach na pewno ułatwi nam życie.

Tak wygląda składnia pętli while:

while (warunek)
 {
  ... polecenie;
  ... polecenie;
 }

A funkcja potega() przepisana z użyciem pętli while:

function potega3()
 {
  var wynik = 1;
  l = parseInt(document.forms["matma"].podstawa.value);
  w = parseInt(document.forms["matma"].wykladnik.value);
  i = 1
  while (i <= w)
   {
    wynik *= l;
    i++;
   }
  window.alert("Wynik to: " + wynik);
 }

W tym przypadku nie widać różnicy między obiema pętlami, ponieważ wykonywane polecenia nie zależą od licznika pętli. Jednak na przykład przy użyciu pętli do tablicy zauważymy odmienność działania tych pętli.

Począwszy od wersji 5 JavaScript, możliwe jest używanie takiej pętli jak for...in. Pętla wykonuje polecenia dla każdej własności obiektu lub elementu tablicy. Składnia:

for (wartość in [ obiekt | tablica ])
 {
  ... polecenie;
  ... polecenie;
 }

Należy pamiętać, że nie ma możliwości ustalenia kierunku wykonywania się pętli. Wartość jest zmieniana zawsze na następną (nie można zmienić na poprzednią).

Czy zwróciłeś uwagę na fakt, że w deklaracji pętli for użyłem nawiasów kwadratowych przy inicjacji licznika, warunku działania pętli oraz wartości zmiany licznika? Zatem pominięcie ich i napisanie czegoś takiego, nie wywoła błędu:

for (;;)
 {
  ... Polecenie;
  ... Polecenie;
 }

Zastanawiasz się jak zachowa się przeglądarka interpretująca taki skrypt, a zachowa się dokładnie tak samo jak podczas wykonywania pętli while, w której warunek jest cały czas prawdziwy (np.: 1==1). Skoro taka pętla się nigdy nie kończy, to po co jej używać, jeśli ma doprowadzić do zawieszenia przeglądarki, tudzież Explorera (Internet Explorer ma zabezpieczenie na taką ewentualność i pozwala wyłączyć aplet, który znacznie spowalnia jego pracę).

Pętlę można przerwać za pomocą instrukcji break, poznanej w lekcji o instrukcji switch. Polecenia w pętli znajdujące się za break nie zostaną wykonane. Przeanalizujmy taki przykład:

for (;;)
 {
  odp = prompt("Podaj hasło dostępu:");
  if (odp == "nikomu_nie_znane_hasło") then break;
  alert("Niestety! Podałeś nieprawidłowe hasło.");
 }

Jeżeli użytkownik poda nieprawidłowe hasło, to wyświetli mu się na ekranie stosowny komunikat, natomiast po wpisaniu prawidłowego hasła, przeglądarka przeskoczy do linii znajdujących się zaraz za pętlą, nie wyświetlając komunikatu.

Użytecznym poleceniem jest continue, które umieszczone w pętli przekazuje jej działanie na początek, zmieniając licznik zgodnie z deklaracją. Służy to zwiększeniu szybkości algorytmu, ponieważ polecenia za continue nie są wykonywane. Zobaczmy to na przykładzie:

 function przykl_continue()
 {
  for (i = 1; i <= 10; i++)
   {
    if (i % 2 == 0) continue;
    alert("To jest " + i + " przebieg pętli");
   }
 }

Co w praktyce wygląda następująco:

Widzimy, że wyświetlane są komunikaty dla nieparzystych indexów pętli. Dla parzystych (reszta z dzielenia % przez 2 wynosi zero, zob. [operatory]) indexów pętla przeskakuje na swój początek.

Sporadycznie używa się zamiennie z prawdziwymi pętlami tzw. etykietek (od ang. label - etykieta). Dekalruje się je tak:

label:
 {
  ... Polecenie;
  ... Polecenie;
 }

W miejsce "label" wstawiamy tekst identyfikujący etykietkę. Aby teraz zapętlić skrypt oraz wyjść z iteracji, używa się instrukcji continue i break:

start:
 {
  ... Polecenie;
  ... Polecenie;
  if (warunek wyjscia) break start;
  continue start;
 }

Osobiście bardzo odradzam stosowania etykietek na rzecz innych pętli, które są czytelniejsze, wygodniejsze i trudniej się w nich pogubić.

Trochę się rozpisałem, ale pętle są tymi elementami języka JavaScript, których bedziesz używał bardzo często, więc dobrze jest w tym temacie dokładnie wiedzieć "co i jak".


Java - teoria

17. Liczby losowe

Korzysatnie z liczb losowych w niektórych skryptach może okazać się nie zastąpione. Do generowania takich liczb służy metoda wbudowanego obiektu Math:

i = Math.round();

Problemem jest jednak to, że zwraca ona liczby z przedziału <0;1). Oznacza to, że może przyjmować wszystkie wartości od 0 do 1, z zerem włącznie, jednak bez 1. Dlatego jeśli chcemy wylosować liczbę całkowitą z zakresu od 0 do 10 to piszemy:

i = Math.round(10 * Math.random())

Zapewne zdarzy się, że będziemy chcieli wylosować liczby z zakresu innego niż <0;n>, czyli <m;n>, wtedy powinniśmy użyć takiej funkcji:

i = Math.round((n - m) * Math.round) + m;

Zobaczmy to na przykładzie:

Całkowita liczba losowa z zakresu <3;14>:

Istnieje także sposób do generowania liczb pseudolosowych, w którym pobieramy aktualny czas stanowiący parametr dla funkcji sinus. Z tego wszystkiego bierzemy jeszcze wartość bezwzględną, ponieważ sinus zwraca wartości z przedziału <-1;1>. Liczba pseudolosowa:

teraz = new Date();
i = Math.abs(Math.sin(teraz.getTime()));

Chcąc losować liczbę w konkretnym przedziale <m;n> piszemy:

teraz = new Date();
i = (n - m) * Math.abs(Math.sin(teraz.getTime())) + m;


Java - teoria

18. Obsługa formularzy

Jednym z postawowych zastosowań JavaScript jest interakcja z użytkownikiem za pomocą formularzy. Skrypty wykorzystywane są tutaj, aby sprawdzać poprawność wprowadzonych danych, wyświetlać dynamicznie jakieś informacje, tworzyć proste gry (bez użycia dHTML'a).

Jeżeli chcesz nauczyć się korzystać z formularzy z poziomu JavaScript powinieneś znać hierarchę obiektów występujących w tym języku:

Jeżeli miałeś już styczność z jakimś językiem programowania, to wiesz zapewne, że obiekty są to takie struktury danych, które mają swoje właściwości oraz metody. Aby wykonać metodę przypisaną danemu obiektowi, ustawić lub odczytać właściwość, poprzedzamy je obiektem, a oddzielamy kropką:

obiekt.własność;
obiekt.metoda();

Wiecej dowiecie się z lekcji 27.

Taki obiekt może być pojemnikiem dla innych obiektów, to znaczy, że jest w stosunku do nich nadrzędny i jedynie za pomocą tego właśnie obiektu można do nich dotrzeć. Przykładowo obiekt Form jest obiektem należącym do document. Grupy obiektów, które nie posiadają własnych właściwości ani metod są często nazywane kolekcjami.

Chcąc skorzystać z właściwości value obiektu Text (pod tą zmienną przechowywany jest tekst wyświetlany w obiekcie Input typu Text) piszemy:

document.nazwa_formy.nazwa_text.value = "Cześć";

W miejsce nazwa_formy wstawiamy nazwę zadeklarowaną w znaczniku Form pod parametrem NAME. Analogicznie postępujemy z nazwa_text, np:

<SCRIPT LANGUAGE="JavaScript">
<!--
 function zwieksz()
  {
   document.rachunek.procent.value++;
   document.rachunek.procent.focus();
  }

 function zmniejsz()
  {
   document.rachunek.procent.value--;
   document.rachunek.procent.focus();
  }

//-->
</SCRIPT>

.. i w sekcji BODY:

<FORM NAME="rachunek">
 <INPUT TYPE="text" NAME="procent" Value="7" SIZE="1"> %
 <INPUT TYPE="button" Value="+" onClick="zwieksz()">
 <INPUT TYPE="button" Value="-" onClick="zmniejsz()">
</FORM>

.. i w efekcie mamy:

%

Zaprezentowana tu metoda odwoływania się do pól formularza nie jest jedyną dostępną. Korzystając z naszego przykładu pokażę jak można napisać to w inny sposób:

document.forms["rachunek"].procent.value;
document.rachunek.elements["procent"].value;
document.forms["rachunek"].elements["procent"].value;

Metoda korzystająca z tablic elementów czasami jest wygodniejsza, ponieważ nie musimy się odwoływać za pomocą nazw danych pól, a jedynie podać index elementu, np.:

document.forms[1].elements[0]

W ten sposób mamy dostęp do pierwszego elementu drugiego formularza.

Praktycznie tą drogą możemy odwoływać się do każdego elementu formularza poza Select. Odwołanie w tym wypadku wygląda następująco:

document.rachunek.waluta.options[index]

Właściwości i metody wszystkich predefiniowanych obiektów dostępne są w dodatkach.


Java - teoria

19. Instrukcja with

Istotą tej instrukcji jest zmniejszenie kodu skryptu oraz uczynienie go bardziej czytelnym. Ustawia ona mianowicie domyślnie używany obiekt. O co konkretnie chodzi? Najlepiej widać to będzie na przykładzie:

function NiewiadomoJakieRachunki()
 {
  a = Math.E + Math.sin(2 * Math.PI);
  b = 3 * Math.log(Math.SQRT2 - Math.abs(Math.LN2 - 10));
 }

..oraz..

function NiewiadomoJakieRachunki()
 {
  with (Math)
   {
    a = E + sin(2 * PI);
    b = 3 * log(SQRT2 - abs(LN2 - 10));
   }
 }

Prawda, że dużo przyjemniej. Jako domyślny obiekt został ustawiony Math. W objętym bloku można używać właściwości oraz metod, bez konieczności pisania, przy każdej z nich słowa Math.

Używanie tej instrukcji jest wygodne i bardzo przydatne.


Java - teoria

20. Formatowanie tekstu

JavaScript daje nam możliwość formatowania wypisywanego za jej pomocą tekstu. Jak już wiemy używając polecenia document.write() możemy używać znaczników HTML. Jednak do formatowania łańcuchów znakowych jest to metoda stosunkowo żmudna, ponieważ istnieje znacznie szybsza.

Każda zmienna przechowująca łańcuch znakowy jest obiektem String, którego wszystkie właściwości i metody znajdziesz w dodatkach. W tej lekcji przedstawię tylko te, które bezpośrednio odpowiadają za formatowanie tekstu.

Formatowany tekst może być napisem umieszczonym w cudzysłowiu lub jako zmienna, czyli:

imie = new String("Rafał");
document.write(imie.bold() + " Hawrylak".italics());

i w efekcie otrzymujemy:

Oto lista możliwych formatowań:

  • .bold() -
  • .italics() -
  • .strike() -
  • .sup() -
  • .sub() -
  • .fixed() -
  • .big() -
  • .small() -
  • .fontcolor("kolor") -
  • .fontsize(rozmiar) -
  • .blink() -
  • .toLowerCase() -
  • .toUpperCase() -

Można oczywiście używać wszelkich kombinacji. Nie trzeba tutaj stosować żadnej specjalnej kolejności. Przy używaniu .fontcolor() należy pamiętać, żeby kolory podawać zawsze w cudzysłowiach. Rozmiar czcionki podawany jest w siedmiopunktowej skali, takiej jaka jest używana w HTML'u.


Java - teoria

21. Pliki graficzne

JavaScript umożliwia modyfikowanie obrazków umieszczonych na stronie za pomocą HTML'a. Głównie zmienia się rozmiary obrazków oraz ich źródło. Wszystko to jest możliwe dzięki kolekcji images należącej do obiektu document. Jest to tablica asocjacyjna zawierająca unikalne nazwy obrazków, zdefniowanych poprzez parametr NAME w znaczniku <IMG>. Można wykorzystać jeden z trzech sposobów:

document.NazwaObrazka
document.images["NazwaObrazka"]
document.images[index]

index jest liczbą całkowitą przypisaną obrazkowi podczas ładowania strony, oznaczającą, który z kolei jest to obrazek.

Z powodu konieczności ograniczenia rozmiaru ładowanej strony (to nie tylko rozmiar pliku *.html, ale również suma rozmiarów plików wszystkich obrazków, skryptów oraz zagnieżdżonych plików multimedialnych), często stosuje się wyświetlanie tylko jednego obrazka, a następnie za pomocą skryptów modyfikowanie jego źródła. Taki preceder używany jest głównie w galeriach. Polega on na zmienianiu wartości parametru SRC. Napiszmy funkcję, która w zależności od parametru będzie zmieniać pliki:

function zmien(nr)
 {
  switch (nr)
   {
    case 0:
     document.images["Galeria"].src = "../graphic/przyk1.gif";
     break;
    case 1:
     document.images["Galeria"].src = "../graphic/przyk2.gif";
     break;
    case 2:
     document.images["Galeria"].src = "../graphic/przyk3.gif";
     break;
   }
 }

Potrzebne jest jeszcze wywołanie:

<CENTER>
<IMG NAME="Galeria" SRC="..\graphic\przyk1.gif"><BR>
<A HREF="javascript: zmien(0)">Obrazek 1</A> |
<A HREF="javascript: zmien(1)">Obrazek 2</A> |
<A HREF="javascript: zmien(2)">Obrazek 3</A>
</CENTER>

Co daje następujący efekt:

Obrazek 1 | Obrazek 2 | Obrazek 3

Każdy link wywołuje funkcję z innym parametrem, odpowiadającym numerowi kolejnego obrazka. Funkcja opiera się na instrukcji warunkowej switch. Korzystanie z niej ma jedynie sens przy obrazkach, których nazwy plików nie są ze sobą powiązane. W naszym przypadku są to przyk1.gif, przyk2.gif oraz przyk3.gif. Różnią się one tylko cyferkami, zatem można napisać dużo krótsze ciało funkcji:

function zmien(nr)
 {
  document.Galeria.src = "..graphic/przyk" + (nr + 1) + ".gif";
 }

Już przy klikunastu obrazkach może się pojawić problem, ponieważ może nieciekawie wyglądać tyle linków do obrazków. Oczywiście jest to kwestią gustu. Alternatywnym rozwiązaniem jest rozwijana lista, element formularza. Zajmuje on dużo mniej miejsca zarówno w kodzie jak i na stronie. Zobaczmy przykład:

<CENTER>
<IMG NAME="Galeria2" SRC="..\graphic\przyk1.gif">
<FORM>
<SELECT onChange="zmien2(this.selectedIndex)">
 <OPTION VALUE="p1" SELECTED>Obrazek 1
 <OPTION VALUE="p2">Obrazek 2
 <OPTION VALUE="p3">Obrazek 3
</SELECT>
</FORM>
</CENTER>

Wykorzystane jest tutaj zdarzenie onChange, które ma miejsce jeżeli zmieni się aktywny index elementu <Select>. Wywoływana jest wtedy funkcja z aktywnym indexem.

Możemy jeszcze zmieniać takie parametry znacznika <IMG> jak szerokość (WIDTH), wysokość (HEIGHT), odległość od innych obiektów w poziomie (HSPACE), odległość od innych obiektów w pionie (VSPACE), wyrównanie (ALIGN), obwódkę (BORDER) oraz tekst w dymku (ALT).

Bardzo popularnym obecnie zastosowaniem zmiany obrazków jest widoczne po lewej stronie jako menu. Mianowicie chodzi o zmianę obrazka po najechaniu na link, który on sam stanowi. Wykorzystane jest tam zdarzenie onMouseOver i onMouseOut. Zobaczmy to na przykładzie:

<CENTER>
<A HREF="http://www.coolerzone.prv.pl/" TARGET="_blank"
 onMouseOver="document.Przycisk.src='../graphic/przyk2.gif'"
 onMouseOut="document.Przycisk.src='../graphic/przyk1.gif'">
<IMG NAME="Przycisk" SRC="..\graphic\przyk1.gif" BORDER="0">
</A>
</CENTER>

Ciekawym efektem jest umieszczenie jako pierwszego obrazka (widocznego po załadowaniu strony) statycznego i obrazka animowanego jako tego ukazującego się po najechaniu kursorem.

Obiekt image jest opisany w dodatkach.


Java - teoria

22. Cykliczne wykonywanie czynności

Może zaistnieć taka potrzeba, że będziesz chciał, aby jakieś polecenia wykonywały się co pewien odstęp czasu, np.: wyświetlanie godziny co sekundę. JavaScript udostępnia takie polecenia jak setTimeout oraz setInterval, kóre są metodami obiektu window.

Pierwsze z nich określa, za ile sekund ma się wykonać dana funkcja lub polecenie. Używa się go w następujący sposób:

setTimeout("nazwa_funkcji()", czas_w_milisekundach);

Najlepiej, jeśli zilustruję to przykładem:

var timerID;

function zwieksz()
 {
  document.forms[0].elements[0].value++;
  timerID = setTimeout("zwieksz()", 1000);
 }

..i jeszcze element formularza..

<BODY onLoad="zwieksz()">

<FORM>
 <INPUT TYPE="text" VALUE="0">
</FORM>

Co w praktyce wygląda tak

Podczas ładowania formularza, przy użyciu zdarzenia onLoad wywoływana jest pierwszy raz funkcja zwieksz(), zwiększa ona warość wyświetlaną w elemencie formularza i następnie ustawia swoje własne wywołanie za 1 sekundę, czyli 1000 milisekund. Jest to taki najprostszy rodzaj rekurencji (funkcja wywołująca samą siebie).

Polecenie setInterval działa w ten sposób, że ustala, co ile milisekund ma wykonywać się dana funkcja lub polecenie. Eliminuje to konieczność zastosowania rekurencji. Składnia tego polecenia wygląda identycznie:

setInterval("nazwa_funkcji()", czas_w_milisekundach);

Teraz funkcja z naszego przykładu wyglądałaby następująco:

var timerID2;

function zwieksz2()
 {
  document.forms[1].elements[0].value++;
 }

..i jeszcze element formularza..

<BODY onLoad="timerID2 = setInterval('zwieksz2()', 1000)">

<FORM>
 <INPUT TYPE="text" VALUE="0">
</FORM>

Co w praktyce wygląda tak

Zauważyłeś, że setTimeout oraz setInterval są funkcjami i zwracają pewne wartości. Są to identyfikatory, które można wykorzystać do odwołania się do aktywnego timera, a konkretnie do jego wyczyszczenia. Do tego celu używamy polecenia clearTimeout() oraz clearInterval(). Zobaczmy je w akcji:

function Stop()
 {
  clearTimeout(timerID);
 }

function Stop2()
 {
  clearInterval(timerID2);
 }

..co daje efekt:

Polecenie setTimeout znajduje najpowszechniejsze zastosowanie w wyświetlaniu daty i czasu na stronie, które poznasz w następnej lekcji.


Java - teoria

23. Data i czas na stronie

Operowanie na datach i czasie ma szczególnie znaczenie w JavaScript, ponieważ przydaje się w wielu sytuacjach, chociażby przy obsłudze ciasteczek, czy przy tworzeniu zegarków, czym konkretnie zajmiemy się w tej lekcji.

Generalnie korzystanie z daty i czasu opiera się na znajomości formularzy, umiejętności wywoływania danej funkcji po upływie określonego czasu oraz znajomości obiektu Date. Cały kod takiego skryptu można zatem podzielić na trzy główne części: pobranie daty i jej sformatowanie, wypisanie na formularzu oraz rekurencujne wywołanie z opóźnieniem jednej sekundy.

Zobaczmy jak wyglądał by najprostszy zegarek i data:

<SCRIPT LANGUAGE="JavaScript">
<!--

 function Data_i_czas()
  {
   data = new Date();
   s_data = data.getYear() + "/" + data.getMonth() + "/"
    + data.getDate();
   document.form1.data.value = s_data;
   s_czas = data.getHours() + ":" + data.getMinutes() + ":"
    + data.getSeconds();
   document.form1.czas.value = s_czas;
   setTimeout("Data_i_czas()", 1000);
  }

//-->
</SCRIPT>

i część sekcji ciała:

<BODY onLoad="Data_i_czas()">

<FORM name="form1">
Dzisiaj mamy <INPUT TYPE="text" NAME="data" SIZE="8">
 i godzinę <INPUT TYPE="text" NAME="czas" SIZE="8">
</FORM>

Co daje efekt:

Dzisiaj mamy i godzinę

Można poświęcić większą uwagę formatowaniu daty, np.: jednocyfrowe jednoski zamieniać na dwucyfrowe o postaci "0#", wyświetlać czas w systemie 12-godzinnym "AM/PM", wypisywać dzień tygodnia lub miesiąc słownie, itp.

Z zamianą jednocyfrowych znaków na dwucyfrowe nie powinniście mieć kłopotu znając instrukcję warunkową if lub operator () ? :. To samo tyczy się zamiany na system "AM\PM". Dla tych, którzy nie mogą sobie poradzić z taką implementacją, funkcja wyglądała by tak (jeżeli jednak wiesz jak to zrobić, nakłaniam do napisania tego samodzielnie - trening czyni mistrza):

s_czas = (document.form2.ampm.checked && (data.getHours() > 12))
 ? data.getHours() - 12: data.getHours();
s_czas += ":" + (((data.getMinutes() <= 9) ? "0" : "")
 + data.getMinutes();
s_czas += ":" + (((data.getSeconds() <= 9) ? "0" : "")
 + data.getSeconds();

Zakładając, że "ampm" jest obiektem typu checkbox należącym do formularza "form2", powinniśmy otrzymać coś takiego:

AM\PM

Do zamiany miesięcy i dni tygodnia na słowne odpowiedniki przypisanych im liczb, najlepsza będzie instrukcja warunkowa switch lub umieścić w tablicach nazwy dni tygodnia i miesięcy:

Dziś jest <SCRIPT LANGUAGE="JavaScript">
<!--

DayName = new Array(7)
DayName[0] = "niedziela, "
DayName[1] = "poniedziałek, "
DayName[2] = "wtorek, "
DayName[3] = "środa, "
DayName[4] = "czwartek, "
DayName[5] = "piątek, "
DayName[6] = "sobota, "
MonthName = new Array(12)
MonthName[0] = " stycznia "
MonthName[1] = " lutego "
MonthName[2] = " marca "
MonthName[3] = " kwietnia "
MonthName[4] = " maja "
MonthName[5] = " czerwca "
MonthName[6] = " lipca "
MonthName[7] = " sierpnia "
MonthName[8] = " września "
MonthName[9] = " października "
MonthName[10] = " listopada "
MonthName[11] = " grudnia "
today = new Date();
weekDay = today.getDay();
nowDate = today.getDate();
nowMonth = today.getMonth();
nowYear = today.getYear();
document.write(DayName[weekDay])
document.write(nowDate)
document.write(MonthName[nowMonth])
nowYear = ((nowYear >= 0 && nowYear < 100 ) ? '19' : '' ) + nowYear
document.write(nowYear)

//-->
</SCRIPT>
Dziś jest

Inne przykłady zegarków znajdziesz w gotowych skryptach.


Java - teoria

24. Ramki

Przydatną rzeczą jest możliwość operowania danymi między różnymi ramkami. To co umożliwia nam korzystanie z ramek w skryptach to ich indywidualne nazwy definiowane pod parametrem NAME obiektu <FRAME>.

Więcej o budowie strony z wykorzystaniem ramek dowiesz się tutaj.

Wiedząc, że dana ramka jest potomkiem okna głównego, musimy się do niego odwołać poprzez obiekt parent. Zawiera on kolekcję frames, w której odszukujemy drugą ramkę, z którą będziemy korespondować. Przypuśćmy, że aplet wykonujemy z ramki "opis" i chcemy pobrać wartość zmiennej zadeklarowanej w ramce "lista". Możemy to zrobić na jeden z trzech sposobów:

parent.opis.zmienna
parent.frames["lista"]
parent.frames[index]

index określa numer ramki, jako, że zostały one zadeklarowane w ustalonej kolejności.

Chcąc dowiedzieć się o ilości ramek możemy skorzystać z polecenia:

parent.length

Może się zdarzyć, że ramki są zagnieżdżone i wtedy, aby skorzystać z niej należy napisać jedno z trzech poleceń:

parent.lista.menu.zmienna
parent.frames["lista"].frames["menu"].zmienna
parent.frames[index1].frames[index2].zmienna

Dobrze, a teraz czas na przykład:

<SCRIPT LANGUAGE="JavaScript">
<!--

function Zobacz()
 {
  window.alert(parent.lista.godz);
 }

//-->
</SCRIPT>

..i działanie:

Po kliknięciu na przycisk zobaczysz okienko z liczbą reprezentującą godzinę, którą widać zegarku (w ramce z menu na samej górze).


Java - teoria

25. Otwieranie okien

W JavaScript możemy otworzyć drugie okienko przeglądarki zawierające jakąś zadaną stronę. Wystarczy skorzystać z wbudowanej metody obiektu window - open() o danej składni:

window.open("adres pliku", "nazwa_okna", "parametry");

W miejsce "adres pliku" wstawiamy relatywny adres do pliku lub cały adres URL (często spotykane w różnego rodzaju głosowaniach i rankingach okienka pop-up - często niepożądane). Pod "nazwa_okna" wstawiamy nazwę, dzięki której będziemy mogli się odwoływać do takiego okienka z poziomu innych stron (podobnie jak odwoływanie się do ramek). "parametry" określają wygląd tworzonego okienka. Wszystkie one (za wyjątkiem określających rozmiar i położenie) przyjmują wartości yes/no.

Oto lista dostępnych parametrów:

  • toolbar - pasek narzędzi
  • menubar - pasek menu
  • location - pasek lokacji strony
  • personalbar - pasek zakładek (Netscape Navigator)
  • status - pasek statusu
  • resizable - możliwość zmieniania rozmiaru okna
  • scrollbars - paski przewijania
  • directories - paski łącza
  • copyhistory - określa, czy historia okna przeglądarki ma być skopiowana do nowego okna
  • fullscreen - określa, czy okno ma być wyświetlone w trybie pełnoekranowym (Internet Explorer 4.0+)
  • channelmode - określa, czy okno ma być wyświetlone w trybie kanałowym (Internet Explorer 4.0+)
  • width - szerokość okna
  • height - wysokość okna
  • top - odległość od górnej krawędzi ekranu
  • left - odległość od lewej krawędzi ekranu

Zobaczmy jak to wygląda w praktyce:

function otworz1()
 {
  window.open("../javat.html", "okienko", "toolbar=no,
 menubar=no, location=no, personalbar=no, status=no,
 resizable=yes, scrollbars=yes, copyhistory=yes,
 width=400, height=300, top=300, left=0");
 }

Kliknij, aby zobaczyć efekt

Chcąc mieć kontrolę nad otwartym okienkiem, musimy pod zmienną podstawić to, co zwraca metoda window.open() jako funkcja:

var zmienna1 = window.open("info.html", "infobox");

..i korzystamy z niego:

zmienna1.metoda();
i = zmienna1.własność;
j = zmienna1.obiekt_podrzędny.własność;

Często używane jest także wywoływanie pustego okienka oraz wypełnienie go dynamicznie:

function otworz2()
 {
  var okienko = window.open("", "", "toolbar=no, menubar=yes,
 width=200, height=100");
  okienko.document.open("menubar=no");
  okienko.document.write("<HTML>\n<HEAD>\n\t<TITLE>Nowe okienko
</TITLE>\n</HEAD>\n<BODY>\n\nNowe okienko otworzone za pomocą
 JavaScript wraz z dynamicznie wypełnioną zawartością
\n\n</BODY>\n</HTML>");
  okienko.document.close();
  okienko.focus();
 }

Kliknij, aby zobaczyć efekt

W pierwszej linijce otwieramy okinko w celu dalszej jego edycji. Następna linijka zawiera dobrze znane już polecenie write(). Umieszczamy tutaj znaczniki. Jeżeli chcemy, aby w kodzie źródłowym było przejście do następnej linii, to wstawiamy taki znak specjalny \n. Znak \t oznacza wstawienie tabulacji. Więcej o znakach specjalnych dowiesz się tutaj. Następnie zamykamy okienko poleceniem close(). Tej instrukcji możemy używać, aby zamknąć również bieżące okno przeglądarki:

window.close();

Zauważysz pewnie różnicę w działaniu między nimi. Zamykanie bieżącego okna wymaga potwierdzenia, natomiast zamykanie okienka wywołanego z innego okienka nie wiąże się z wyświetleniem żadnego komunikatu.

Okienka takie mają różne zastosowania. Głównie używa się ich do wyświetlania informacji zaraz po załadowaniu strony (tak jak na tej stronie - w górnej listwie, przycisk "Informacje"). Można również w osobnym okienku odgrywać plik dźwiękowy, zrobić menu nawigacyjne lub umieścić przydatne skrypty (np.: kalkulator). Jednak nie należy ich nadużywać, ponieważ jest to powszechnie nie lubiane.


Java - teoria

26. Pliki Cookie

Pliki Cookie, nazywane popularnie ciasteczkami, są to dane zapisywane w pliku tekstowym u internauty odwiedzającego stronę. Można w nich zapamiętywać przydatne informacje, takie jak data ostatnich odwiedzin strony, imię internauty, aby potem wykorzystać je na stronie powitalnej.

Każde ciasteczko może zawierać więcej niż jedną informację. Rozdzielane one są przecinkami. Są one poukładane w następujący sposób:

Cookie: nazwa1:wartość1; nazwa2=wartość2; ...

Do ciasteczek możemy dotrzeć za pomocą document.cookie. Zobaczmy przykład funkcji, która zapisuje do ciasteczka imię internauty, poproszonego o jego podanie.

<SCRIPT LANGUAGE="JavaScript">
<!--

function ZapiszCiacho()
 {
  imie = window.prompt("Jak masz na imię?");
  if (imie != null)
   {
    dzis = new Date();
    dzis.setTime(dzis.getTime() + 20*24*60*60*1000);
    s = dzis.toGMTString();
    document.cookie = "user_ID=" + escape(imie) + "; expires=" + s;
   }
 }

ZapiszCiacho();

//-->
</SCRIPT>

Zaraz po pobraniu od użytkownika potrzebnych danych, sprawdzane jest, czy zostały one w ogóle wpisane. Następnie pobierany jest bieżący czas przy użyciu obiektu Date. Zmienna dzis zawiera od tej pory ilość milisekund jaka upłynęła od północy pierwszego stycznia 1970 roku do teraz. Wykorzystamy to, aby wyznaczyć czas, po upływie którego ciasteczko wygaśnie (parametr expires). Zawiera on również czas w milisekundach, więc do bieżącego czasu należy dodać ilość milisekund, przez które ciasteczko będzie użyteczne. Jeżeli chcemy, aby to było 20 dni to musimy pomnożyć je przez ilość milisekund w sekundzie (1000), następnie przez ilość sekund w minucie (60), potem przez ilość minut w godzinie (60) i dalej przez ilość godzin w dobie (24) - czyli 20*24*60*60*1000. Po upływie tego czasu skrypt zachowa się jakby wcześniej nie zapisywano naszego ciasteczka.

Przy każdorazowym wchodzeniu na stronę aplet pyta się nas o imię. Jedank nie o to nam chodziło. Trzeba zatem napisać jeszcze funkcję, która odczytywałaby nasz Cookie. W tym celu będziemy musieli również zmodyfikować funkcję zapisującą:

<SCRIPT LANGUAGE="JavaScript">
<!--

function ZapiszCiacho(u_imie)
 {
  if (u_imie == null)
   {
    imie = window.prompt("Jak masz na imię?");
   }
  else
   {
    imie = u_imie;
   }
  if (imie != null)
   {
    dzis = new Date();
    dzis.setTime(dzis.getTime() + 20*24*60*60*1000);
    s = dzis.toGMTString();
    document.cookie = "user_ID=" + escape(imie) + "; expires=" + s;
   }
 }

function OdczytajCiacho(nazwa)
 {
  var start = document.cookie.indexOf(nazwa + "=");
  var len = start + nazwa.length + 1;
  if ((!start) && (document.cookie.substring(0, nazwa.length) != nazwa))
   {
    return null;
   }
  if (start == -1)
   {
    return null;
   }
  var end = document.cookie.indexOf(";", len);
  if (end == -1) end = document.cookie.length;
  return unescape(document.cookie.substring(len, end));
 }

var ciacho = OdczytajCiacho("user_ID");
if (ciacho == null)
 {
  ZapiszCiacho()
 }
else
 {
  window.alert("Witam Cię ponownie " + ciacho);
  ZapiszCiacho(ciacho);
 }

//-->
</SCRIPT>

Rzućmy okiem najpierw do tej części kodu, w której wywoływane są funkcje. Zadeklarowana i zainicjowana jest tam zmienna ciacho. Przypisany jest jej wynik działania funkcji OdczytajCiacho(), która jako parametr pobiera nazwę ciasteczka. Cookie jest przetrzymywane jako łańcuch znakowy, toteż instrukcje w funkcji odczytującej głównie próbują odnaleźć zadaną wartość w stringu. Jeżeli nie znajdą - funkcja zwraca null, co oznacza, że Cookie nie było nigdy zapisywane lub już wygasło. W przeciwnym wypadku zwracana jest nasza wartość. Warunek ten jest sprawdzany zaraz po deklaracji ciacho. Funkcja ZapiszCiacho() posiada teraz parametr. Może on zostać pominięty, co ma miejsce, gdy funkcja odczytująca nie zwróci żądanej, i wtedy użytkownik pytany jest o imię. Jeżeli parametr nie jest pominięty, oznacza to, że uaktualniamy ciasteczko, aby nie wygasło, mimo wizyty na stronie.

Można również wywołać odczyt ciasteczka już po załadowaniu strony. Należy wtedy umieścić polecenia między znacznikami <SCRIPT></SCRIPT> i przy końcu sekcji ciała (zaraz przed zakończeniem taga <BODY>).

Musimy pamiętać o tym, aby zapisywać datę w expires, ponieważ ciasteczko przestałoby istnieć, kiedy użytkownik zakończy swoją sesję.

Jednak przy tworzeniu Cookie na naszych stronach nie możemy za mocno poszaleć, ponieważ obowiązują nas pewne ograniczenia. Użytkownik nie może mieć więcej niż 300 plików Cookie, w tym co najwyżej 20 z jedego serwera lub domeny. Co więcej plik ciasteczka nie może przekraczać 4 KB.

Bardzo dużą zaletą plików Cookie jest to, że zapisane przez daną stronę, mogą być odczytywane przez nią i tylko przez nią.

Na koniec tej lekcji chciałbym wspomnieć jeszcze o zastosowaniach Cookie. Dzięki nim możemy zapamiętywać preferencje użytkowników. Powiedzmy, że internauta przesiaduje głównie w dziale poświęconemu algorytmom. Dlaczegóżby nie ułatwić mu życia i od razu po jego wejściu nie przekierować go na stronę z algorytmami. Wspomniałem już o obliczaniu odstępu czasu, kiedy użytkownik ostatnio był na stronie. Posiadając takie informacje, można wyświetlić odpowidnie newsy. Jak widać nie trzeba od razu sięgać PHP, aby uzyskać takie efekty.


Java - teoria

27. Tworzenie obiektów

JavaScript jest językiem skryptowym obiektowo utwierdzonym. Obiekt jest to taka struktura, która może posiadać swoje właściwości, którymi są należące do tego obiektu zmienne. Obiekt może również posiadać powiązane ze sobą funkcje, które nazywa się metodami. Oprócz obiektów predefiniowanych, JavaScript umożliwia nam tworzenie własnych obiektów, co zwiększa komfort pracy, ponieważ kod skryptu staje się wtedy dużo czytelniejszy i łatwiej się nam jest w nim poruszać.

Obiekt w JavaScript może posiadać powiązane z nim właściwości. Dostęp do nich odbywa się w nastepujący sposób:

obiekt.własność

Podczas odnoszenia się do obiektów i ich właściwości trzeba zwracać uwagę na wielkość liter, ponieważ dla interpretatora języka obiekt i Obiekt to nie to samo.

Jest jeszcze druga metoda odnoszenia się do własności obiektu, wynikająca z tego, że te są ściśle powiązane z tablicami, a mianowicie:

obiekt["własność"]

Przypuśćmy, że mamy stworzony obiekt "Ja" (jak deklarować same obiekty powiem już za chwilę). Stworzenie nowych właściwości odbywa się poprzez zainincjowanie dla nich wartości, np.:

Ja.imię = "Rafał";
Ja.wiek = 19;
Ja.wzrost = 1.92;

Używając sposobu z tablicami, zwanymi asocjacyjnymi, dzięki interacji for..in, możemy szybko pobrać i wypisać wszystkie właściwości obiektu:

function wypisz(obiekt)
 {
  var wynik = "";
  for (var i in obiekt)
   wynik += "." + i " = " + obiekt[i] + "\n";
  return wynik;
 }

Efektem będzie:

.imię = Rafał
.wiek = 19
.wzrost = 1.92

Jeśli nie wierzysz, zobacz sam:

Istnieją dwie metody stworzenia obiektu. Jeśli chesz używać tylko jednej instancji obiektu, możesz użyć inicjatora obiektu. Natomiast jeżeli będą tworzone wielokrotne instancje tego obiektu, powinieneś zadeklarować funkcję konstruktor, którą będziesz używał do stworzenia obiektu poprzez operator new.

Inicjator obiektu jest w miarę prosty w swej konstrukcji:

nazwa_obiektu = {własność1:wartość1,własność2:wartość2 ...};

Czyli dla naszego obiektu Ja taka deklaracja wygląda tak:

var Ja = {imię:"Rafał",wiek:19,wzrost:1.92};

Obiekt może mieć również obiekty podrzędne. Aby zadeklarować taki piszemy:

var Ja = {imię:"Rafał",zainteresowania:{sport:"koszykówka",
komputery:"programowanie"}};

W tym przypadku obiekt Ja posiada jedną właściowość: imię oraz obiekt podrzędny zainteresowania z dwiema właściwościami.

Aby uzyskać dostęp do właściwości sport piszemy analogicznie zwracając uwagę na hierarchię obiektów:

Ja.zainteresowania.sport

Alternatywnym rozwiązaniem dla tego typu deklaracji jest napisanie konstruktora, czyli funkcji inicjującej tworzony obiekt. Funkcja taka zazwyczaj pobiera parametry, które ustawia jako nowe właściwości obiektu oraz inicjuje ich wartości. Konstruktor określa typ obiektu, czyli oznacza to, że będziemy deklarować nasz obiekt z użyciem operatora new. Aby stworzyć obiekt Ja musimy napisać konstruktor dla typu o nazwie powiedzmy "osoba":

function osoba(imię,wiek)
 {
  this.imię = imię;
  this.wiek = wiek;
 }

var Ja = new osoba("Rafał",19);
Ja.wzrost = 1.92;

Przypisanie następuje poprzez instrukcję this, dlatego, aby te dane nie były wartościami lokalnymi a powiązanymi z obiektem właściwościami. Zauważmy, że konstruktor nie deklaruje właściwości wzrost, która deklarowana jest dopiero później poprzez nadanie jej wartości. Taki rodzaj deklaracji (używając new) poznałeś już deklarując obiekty typu String, czy Date.

Korzystając z naszej funkcji wypisującej właściwości obiektów, zobaczmy, czy to działa:

Aby stworzyć obiekt podrzędny, trzeba napisać, np.:

function hobby()
 {
  this.sport = "koszykówka";
  this.komputery = "programowanie"
 }

function osoba(imię,wiek)
 {
  this.imię = imię;
  this.wiek = wiek;
  this.zainteresowania = new hobby;
 }

Tym sposobem mamy w Ja podobiekt zainteresowania typu hobby z dwoma właściwościami.

Jak już wspomniałem obiekt może posiadać metody, czyli powiązane ze sobą funkcje. Metodę deklarujemy tak, jak standardową funkcję (co dokładniej opisane jest w lekcji 7) a podpina się ją w identyczny sposób jak właściowość:

function sprawdz_imię()
 {
  if (this.imię == "Rafał")
   return "Ja też mam tak na imię!!!"
  else
   return "Ładne imię " + this.imię;
 }

function osoba2(imię,wiek)
 {
  this.imię = imię;
  this.wiek = wiek;
  this.sprawdz_imię = sprawdz_imię;
 }

var Ja = new osoba2("Rafał",19);

..i wywołanie metody w przycisku:

onClick="alert(Ja.sprawdz_imię())"

co w praktyce wygląda następująco:

Jak widzimy w funkcji, która jest deklaracją metody, do obiektu ojczystego odnosimy się również poprzez this.

W JavaScript możliwa jest modyfikacja wszystkich instancji danego typu obiektu. Możliwe jest to dzięki odniesieniu się do prototypu obiektu:

Ja.prototype.gatunek = "człowiek";

Od tej pory wszystkie obiekty utworzone za pomocą tego samego konstruktora, co obiekt Ja posiada nową właściwość gatunek o wartości "człowiek".

Począwszy od trzeciej odsłony składni JavaScript możemy używać takiego operatora jak delete, który umożliwia nam kasowanie właściwości obiektu. Jeszcze w JavaScript dla Netscape Navigator 2.0 nie można było usuwać obiektów, jednakże już od nowszej wersji dla Netscape Navigator 3.0, wykonuje się to poprzez ustawienie ostatniej referencji do obiektu na null.


Java - teoria

28. Przechwytywanie zdarzeń

Przechwytywanie zdarzeń jest jednym z ciekawszych aspektów języka JavaScript. Pozwala na rozszerzoną obsługę zdarzeń. Polega to na definiowaniu funkcji, które mają zostać wywołane, kiedy dane zdarzenie będzie miało miejsce. I tutaj zaczynają się schody, ponieważ ta możliwość jest niestety kolejnym przykładem, jak różni się interpretowanie skryptów przez różne przeglądarki, a przede wszystkim Internet Explorer i Netscape Navigator. Z powodu tych różnic musimy praktycznie napisać nasz skrypt podwójnie. Zobaczmy prosty przykład:

<SCRIPT LANGUAGE="JavaScript">
<!--

ie = (document.all) ? 1 : 0;
n = (document.layers) ? 1 : 0;

if (ie)
 document.onmousedown = napis;
else if (n)
 {
  window.captureEvents(EVENT.MOUSEDOWN);
  window.onmousedown = napis;
 }

function napis()
{
 alert("Nie klikaj prawym przyciskiem");
}

//-->
</SCRIPT>

Na samym początku musimy wykryć przeglądarkę internetową użytkownika. Każda ma swoje unikalne właściwości, toteż sprawdzamy, czy przeglądarka obsługuje daną i już wiemy, czy to jest ta przeglądarka, czy inna. Taką przykładową właściwością dla Internet Explorer jest document.all, a dla Netscape Navigator - document.layers. Niestety są to jedne z wielu, a przytoczyłem właśnie te, ponieważ są one używane zwyczajowo. W całym procederze korzystamy z operatora () ? :. Dalej w zależności od przeglądarki przechwytujemy zdarzenie podpinając pod nie wywołanie funkcji napis. Da to taki efekt, że przy każdym kliknięciu myszką w dokument zostanie wyświetlone okienko dialogowe z komunikatem.

Teraz wzbogacimy nasz skrypt o detekcję wciśniętego przycisku myszy. Od tej pory komunikat będzie się wyświetlał tylko po wciśnięciu prawego klawisza:

<SCRIPT LANGUAGE="JavaScript">
<!--

ie = (document.all) ? 1 : 0;
n = (document.layers) ? 1 : 0;

if (ie)
 document.onmousedown = napis;
else if (n)
 {
  window.captureEvents(EVENT.MOUSEDOWN);
  window.onmousedown = napis;
 }

function napis(e)
{
 if (ie && event.button == 2)
  {
   alert("Nie klikaj prawym przyciskiem");
   return(false);
  }
 if (n && e.which == 2)
  {
   alert("Nie klikaj prawym przyciskiem");
   return(false);
  }
}

//-->
</SCRIPT>

W podobny sposób możemy również sczytać współrzędne kursora w oknie. Tutaj jednak wykorzystamy zdarzenie onMouseMove. Pobrane dane będziemy wypisywać na formularzu - w obiektach text. Zobaczmy kod:

<SCRIPT LANGUAGE="JavaScript">
<!--

ie = (document.all) ? 1 : 0;
n = (document.layers) ? 1 : 0;

if (ie)
 document.onmousemove = wspolrzedne;
else if (n)
 {
  window.captureEvents(EVENT.MOUSEMOVE);
  window.onmousemove = wspolrzedne;
 }

function wspolrzedne(e)
{
 txt = document.formularz.pole_textowe;
 if (ie)
  {
   txt.value = "x: " + (document.body.scrollLeft + event.clientX)
 + "; y: " + (document.body.scrollTop + event.clientY);
   return(false);
  }
 if (n)
  {
   txt.value = "x: " + e.pageX + "; y: " + e.pageY;
   return(false);
  }
}

//-->
</SCRIPT>

..i jeszcze formularz:

<FORM NAME="formularz">
 <INPUT TYPE="text" NAME="pole_textowe">
</FORM>

Efekt jest taki:

Widzimy, że współrzędne podawane są od faktycznego narożnika dokumentu, a nie tylko od widocznej jego części. Można to oczywiście zmienić usuwając z kodu document.body.scrollLeft oraz document.body.scrollTop.


Java - teoria

29. Kompilacja warunkowa

JavaScript, począwszy od wersji 4.0, umożliwia tak zwaną kompilację warunkową. Jest to coś takiego, że dany skrypt kompiluje się tylko, jeżeli spełniony jest dany warunek.

Ta stosunkowo nowa cecha języka nie niesie ze sobą komplikacji podczas interpretowania przez starsze przeglądarki. Można zatem powiedzieć, że kompilacja warunkowa jest kompatybilna ze starszymi wersjami składni JavaScript.

Aby włączyć tryb warunkowej kompilacji należy użyć wyrażenia @cc_on. Wszystkie instrukcje podlegające warunkowej kompilacji wstawiamy w komentarzu wielowierszowym (/* komentarz */), tak aby przeglądarki nie interpretujące takiej funkcji JavaScript ignorowały ją. Przykładowe użycie kompilacji warunkowej może wyglądać następująco:

<SCRIPT LANGUAGE="JavaScript">
<!--

/*@cc_on @*/
/*@if (@_jscript_version >= 4)
 document.write("JavaScript w wersji 4.0+");
@else @*/
 document.write("JavaScript w wersji mniejszej niż 4.0");
/*@end @*/

//-->
</SCRIPT>

Widzimy, że część kodu nie znajdująca się w komentarzu to tylko polecenie document.write("JavaScript w wersji mniejszej niż 4.0");. W razie, gdy kompilacja warunkowa nie jest obsługiwana, zostanie wypisany tylko ten właśnie napis. W przeciwnym wypadku zostanie sprawdzone, czy wersja JavaScript'u to przynajmniej 4.0 i jeżeli tak, to wypisywana jest stosowna informacja o tym fakcie.

Zobaczmy, jaką Ty posiadasz przeglądarkę:

Zapraszam do zapoznania predefiniowanych wartości, które wykorzystuje się w kompilacji warunkowej.


Java - teoria

30. Linki do stron o "JavaScript"

Poniżej zamieszczam odnośniki do stron związanych tematycznie z "JavaScript":

  • polskie
    webmaster.helion.pl/kurshtml - ponad setka skryptów
    www.ipts.w.pl
    javascript.jest.o.k.pl
    javascript.reporter.pl/js/
    www.pckurier.pl/podreczniki/js-kompendium/
    www.binboy.org
    www.webhelp.pl

  • zagraniczne
    www.javascript.com
    java.sun.com
    www.w3.org
    www.dynamicdrive.com
    www.hotscripts.com
    www.free-javascripts.com
    www.webreference.com/js

  • grupy dyskusyjne
    pl.comp.www
    comp.lang.javascript
    comp.lang.java


Java - teoria

Zakończenie

Gratulacje! Właśnie ukończyłeś kurs JavaScript! Posiadasz teraz solidną wiedzę w zakresie tworzenia stron www wykorzystujących ten język skrytpowy. Jednak to dopiero "trening czyni mistrza", ponieważ nawet najlepiej przekazana teoria, nigdy nie zastąpi praktyki. Aby osiągnąć dużą wprawę musisz ćwiczyć, ćwiczyć i jeszcze raz ćwiczyć. Spróbuj sam wymyślać sobie przeróżne zadania, a potem konsekwentnie je realizuj. Nie idź na żadne ustępstwa, wręcz przeciwnie - cały czas podnoś sobie poprzeczkę. Takim sposobem stanisz się zaawansowanym skrypterem i nie tylko, ponieważ taka sama reguła obowiązuje wszystkie inne dziedziny nauki i życia. Jeszcze raz dziękuję, że wybrałeś mój kurs. Mam nadzieję, że nie żałujesz tej decyzji. Życzę powodzenia w dalszym zgłębianiu wiedzy na temat JavaScript.

Rafał Hawrylak


Array

Typy obiektów - Array

Przejdź do: [właściwości] | [metody]

Obiektem typu Array jest każda zmienna będąca tablicą. Dzięki takiemu obiektowi możemy dokonywać różnych operacji na seriach danych.

Obiekt taki można zadeklarować na trzy sposoby:

var zmienna1 = new Array()
var zmienna2 = new Array(rozmiar);
var zmienna3 = new Array([wartość0], [wartość1], ..., [wartośćN]);

Pierwszym sposobem określamy tylko, że dana zmienna będzie tablicą. W drugim już mówimy jaki będzie rozmiar tworzonej tablicy. Niekiedy wygodniejsze jest jednak zadeklarowanie tablicy o dynamicznym rozmiarze (zmieniającym się). W trzecim typie deklaracji, mamy od razu wypełnienie tablicy wartościami, których jest n+1.

Jeżeli podany rozmiar nie będzie liczbą całkowitą lub będzie mniejszy od zera to dostąpimy zaszczytu obejrzenia sobie komunikatu o błędzie.

Więcej o tablicach można znaleźć w lekcji 15 mojego kursu.

Interpretowanie obietku Array wymaga wersji JavaScript 2.

Właściwości
nazwa | opis | wersja
constructor | określa funkcję, która stworzyła obiekt | 2
length | ilość elementów w tablicy | 1
prototype | określa funkcję zdefiniowaną przez użytkownika, która będzie się odnosiła i będzie metodą dla przyszłych obiektów | 2

Metody
nazwa | opis | wersja
concat([element1], [element2] ...) | dołącza elementy do tablicy | 3
join(separator) | połączenie wszystkich elementów separatorem i zwrócenie danej typu String | 2
pop | usuwa ostatni element tablicy | 5.5
push([element1], [element2] ...) | dodaje elementy do tablicy i zwraca jej nową długość | 5.5
reverse | zwraca tablicę z odwróconą kolejnością elementów | 2
shift | usuwa element z początku tablicy i zwraca go | 5.5
slice(start, [koniec]) | zwraca wycinek tablicy o początku w indexie start i końcu w koniec, jeśli koniec jest niezadeklarowany to domyślnie ustawiany jest on na ostatni element | 3
sort([funkcjaSortujaca]) | sortuje tablicę. Możemy podać nazwę funkcji, która będzie określać sortowanie. Normalnie dane są sortowane według ich odpowiedników w kodzie ASCII. Funkcja powinna być dwuparametrowa i zwracać WARTOŚĆ UJEMNĄ - jeżeli pierwszy przekazany argument jest mniejszy od drugiego, ZERO - jeżeli argumenty są sobie równe, WARTOŚĆ DODATNIĄ - jeżeli pierwszy argument jest większy od drugiego | 2
split(separator, [limit]) | zwraca łańcuch znaków powstały poprzez powstawianie separator między każdy znak String'u, limit ogranicza liczbę zwróconych znaków | 3
splice(start, deleteCount, [element1], [elementy2] ...) | usuwa wyznaczoną część tablicy, gdzie start określa początkowy index, a deleteCount ilość pól do usunięcia. Do tablicy wstawiane są opcjonalnie w miejsce skasowanych pól nowe. Funkcja zwraca tablicę zawierającą skasowane elementy | 5.5
toLocaleString | zwraca łańcuch tekstowy reprezentujący datę w obiekcie Array | 1
toString | zwraca łańcuch tekstowy reprezentujący wszystkie elementy tablicy rozdzielone przecinkami | 2
unshift([element1], [element2] ...) | dodaje elementy na początek tablicy i zwraca nową tablicę | 5.5
valueOf | działa tak samo jak toString | 2


Boolean

Typy obiektów - Boolean

Przejdź do: [właściwości] | [metody]

Obiektem typu Boolean jest każda zmienna zawierająca wartość logiczną. Dzięki takiemu obiektowi możemy dokonywać różnych porównań na danych.

Obiekt Boolean deklaruje się następująco:

var zmienna1 = new Boolean([wartość_inicjacyjna]);

Jeżeli wartość_inicjacyjna zostanie ominięta lub wynosi false, 0, null, NaN lub pusty string, to ustawiana jest ona na false. W przeciwnym wypadku wyniesie ona true.

Interpretowanie obietku Boolean wymaga wersji JavaScript 2.

Właściwości
nazwa | opis | wersja
constructor | określa funkcję, która stworzyła obiekt | 2
prototype | określa funkcję zdefiniowaną przez użytkownika, która będzie się odnosiła i będzie metodą dla przyszłych obiektów | 2

Metody
nazwa | opis | wersja
toString | zwraca wartość typu string ("true" lub "false") | 2
valueOf | zwraca wartość Boolean'u | 2


Date

Typy obiektów - Date

Przejdź do: [właściwości] | [metody]

Obiektem typu Date jest każda zmienna zawierająca czas i datę. Przykładowe wykorzystanie takiego obiektu znajdziemy w lekcji traktującej o dacie i czasie na stronie.

Obiekt Date deklaruje się następująco:

var zmienna1 = new Boolean();

..lub..

var zmienna1 = new Date(miesiąc dzień, rok godzina:minuta:sekunda);

..lub..

var zmienna1 = new Date(rok, miesiąc, dzień, godzina, minuta, sekunda, milisekunda);

..lub..

var zmienna1 = new Date(ilość_milisekund_między_daną_datą_i_północą_1_stycznia_1970);

Jeżeli podamy wartość inicjalizacyjną to musimy to zrobić w jeden z określonych wyżej sposobów. W drugim przypadku przykładowa wartość początkowa wyglądałaby: "February 14, 1998, 15:45:00" - w trzecim natomiast: 98,1,14,15,45,0,0.

Nie deklarując żadnej wartości inicjacyjnej, otrzymujemy obiekt, który przetrzymuje bieżącą datę i czas.

Operując na czasie powinniśmy znać znaczenie takiego hasła jak UTC. Uniwersalny czas światowy - Universal Coordinated Time - jest to czas przyjęty za "zerowy", do którego odnosimy się, np.: aby porównać dwa czasy.

Interpretowanie obietku Date wymaga wersji JavaScript 1.

Właściwości
nazwa | opis | wersja
constructor | określa funkcję, która stworzyła obiekt | 2
prototype | określa funkcję zdefiniowaną przez użytkownika, która będzie się odnosiła i będzie metodą dla przyszłych obiektów | 2

Metody
nazwa | opis | wersja
getDate | zwraca dzień miesiąca (1-31) | 1
getDay | zwraca dzień tygodnia licząc od niedzieli (0-6) | 1
getFullYear | zwraca pełny rok, eliminuje błąd roku 2000 | 3
getHours | zwraca godzinę (0-23) | 1
getMilliseconds | zwraca milisekundy (0-999) | 3
getMinutes | zwraca minuty (0-59) | 3
getMonth | zwraca miesiąc (0-11) | 1
getSeconds | zwraca sekundy (0-59) | 1
getTime | zwraca ilość milisekund od pólnocy 1 stycznia 1970 | 1
getTimezoneOffset | zwraca w minutach różnicę w czasie na bieżącym komputerze a UTC | 1
getUTCDate | zwraca dzień miesiąca (1-31) używając UTC | 3
getUTCDay | zwraca dzień tygodnia licząc od niedzieli (0-6) używając UTC | 3
getUTCFullYear | zwraca pełny rok, eliminując błąd roku 2000 używając UTC | 3
getUTCHours | zwraca godzinę (0-23) używając UTC | 3
getUTCDate | zwraca dzień miesiąca (1-31) używając UTC | 3
getUTCMilliseconds | zwraca milisekundy (0-999) używając UTC | 3
getUTCMinutes | zwraca minuty (0-59) używając UTC | 3
getUTCMonth | zwraca miesiąc (0-11) używając UTC | 3
getUTCSeconds | zwraca sekundy (0-59) używając UTC | 3
getVarDate | zwraca dzień miesiąca (1-31) używając formatu VT_DATE (używanego przez niektóre komponenty ActiveX) | 3
getYear | zwraca rok | 1
setDate(nowa_data) | ustawia liczbę dni | 3
setFullYear(rok, [miesiąc], [dzień]) | ustawia pełny rok, eliminując błąd roku 2000 | 3
setHours(godziny, [minuty], [sekundy], [milisekundy]) | ustawia godzinę | 3
setMilliseconds(nowa_data) | ustawia milisekundy | 3
setMinutes(minuty, [sekundy], [milisekundy]) | ustawia minuty | 1
setMonth(miesiąc, [dzień]) | ustawia miesiąc | 1
setSeconds(sekundy, [milisekundy]) | ustawia milisekundy | 1
setTime(nowa_data) | ustawia liczbę milisekund od północy 1 stycznia 1970 | 1
setUTCDate(nowa_data) | ustawia liczbę dni używając UTC | 3
setUTCFullYear(rok, [miesiąc], [dzień]) | ustawia pełny rok, eliminując błąd roku 2000, używając UTC | 3
setUTCHours(godziny, [minuty], [sekundy], [milisekundy]) | ustawia godzinę używając UTC | 3
setUTCMilliseconds(nowa_data) | ustawia milisekundy używając UTC | 3
setUTCMinutes(minuty, [sekundy], [milisekundy]) | ustawia minuty używając UTC | 3
setUTCMonth(miesiąc, [dzień]) | ustawia miesiąc używając UTC | 3
setUTCSeconds(sekundy, [milisekundy]) | ustawia sekundy używając UTC | 3
setYear(nowa_data) | ustawia rok | 1
toGMTString | zwraca czas używając formatu GMT (Greenwich Mean Time) | 1
toLocaleString | zwraca czas lokalny | 1
toUTCString | zwraca czas używając UTC | 3
toString | zwraca czas jako String | 2
valueOf | zwraca ilość milisekund od północy 1 stycznia 1970 (tak jak getTime) | 2
parse(nowa_data) | zwraca ilość milisekund od północy 1 stycznia 1970, z parametrem jako String w formacie [=>]lub VT_DATE (używanego przez niektóre komponenty ActiveX) | 1
UTC(rok, miesiąc, dzień, [godziny], [minuty], [sekundy], [milisekundy]) | zwraca ilość milisekund od północy 1 stycznia 1970 w formacie UTC | 1


Function

Typy obiektów - Function

Przejdź do: [właściwości] | [metody]

Za pomocą obiektu Function możemy zdefiniować funkcję w jednej linii.

Obiekt Function deklaruje się następująco:

var nazwa_funkcji = new Function([parametr1], [parametr2],
 ..., "ciało funkcji");

Zasady działania funkcji poznałeś w lekcji 7. Od tej pory wiesz, jak i w jakim celu używać funkcji. Deklarowanie funkcji w przedstawiony tutaj sposób jest stosowane rzadko i osobiście go odradzam.

Aby szybciej zrozumieć o co chodzi, podam przykład funkcji dodającej dwie liczby:

var dodaj = new Function("a", "b", "return(a + b)");

Wywołujemy standardowo:

i = dodaj(2, 5);

Interpretowanie obietku Function wymaga wersji JavaScript 2.

Właściwości
nazwa | opis | wersja
arguments | tablica parametrów funkcji | 2
caller | określa funkcję, z której wywołano funkcję, jeżeli została wywołana z poziomu głównego skryptu (nie wewnątrz żadnej funkcji) to zwraca null | 2
constructor | określa funkcję, która stworzyła obiekt | 2
prototype | określa funkcję zdefiniowaną przez użytkownika, która będzie się odnosiła i będzie metodą dla przyszłych obiektów typu Function | 2

Metody
nazwa | opis | wersja
toString | zwraca wartość typu string - całą funkcję łącznie z ciałem | 2
valueOf | zwraca samą funkcję | 2


Global

Typy obiektów - Global

Przejdź do: [właściwości] | [metody]

Za pomocą obiektu Global możemy używać tych właściwości i funkcji, które należą do składni JavaScript, jednak nie są powiązane z żadnymi obiektami. Obiekt Global nie posiada swojej składni oraz nie tworzy się go za pomocą operatora new. Aby wywołać metodę należącą do Global, piszemy tak samo jak przy zwykłych funkcjach [zob. lekcja 7].

Interpretowanie obietku Global wymaga wersji JavaScript 5.

Właściwości
nazwa | opis | wersja
Infinity | określa dodatnią nieskończoność | 3
NaN | określa specjalną wartość NaN (Not a Number - nie liczba); przykładowo zwracana przy konwersji tekstu na liczbę, gdy tekst nie zawiera liczb | 3

Metody
nazwa | opis | wersja
escape(tekst) | zwraca rozkodowany tekst | 1
eval(tekst) | wykonuje dynamicznie ciąg poleceń zawartych w tekst | 1
isFinite(liczba) | zwraca false, jeżeli liczba ma wartość NaN albo plus lub minus nieskończoność; w przeciwnym wypadku zwraca true | 3
isNaN(liczba) | zwraca true, jeżeli liczba ma wartość NaN; w przeciwnym wypadku zwraca false | 1
parseFloat(tekst) | konwertuje tekst na liczbę zmiennoprzecinkową | 1
parseInt(tekst) | konwertuje tekst na liczbę całkowitą | 1
unescape(tekst) | zwraca zakodowany tekst | 1


Math

Typy obiektów - Math

Przejdź do: [właściwości] | [metody]

Dzięki obiektowi typu Math możemy dokonywać różnych operacji matematycznych na danych.

Obiektu Boolean nie deklaruje się używając operatora new. Taka deklaracja wywoła błąd, ponieważ obiekt jest tworzony automatycznie.

Interpretowanie obietku Math wymaga wersji JavaScript 1.

Właściwości
nazwa | opis | wersja
E | liczba e w przybliżeniu równa 2.718 | 1
LN2 | logarytm naturalny z 2 w przybliżeniu równy 0.693 | 1
LN10 | logarytm naturalny z 10 w przybliżeniu równy 2.302 | 1
LOG2E | logarytm z e przy podstawie z 2 w przybliżeniu równy 1.442 | 1
LOG10E | logarytm z e przy podstawie z 10 w przybliżeniu równy 0.434 | 1
PI | liczba pi w przybliżeniu równa 3.14159 | 1
SQRT1_2 | pierwiastek kwadratowy z 1/2 w przybliżeniu równy 0.707 | 1
SQRT2 | pierwiastek kwadratowy z 2 w przybliżeniu równy 1.414 | 1

Metody
nazwa | opis | wersja
abs(x) | wartość bezwzględna | 1
acos(x) | arcus cosinus | 1
asin(x) | arcus sinus | 1
atan(x) | arkus tangens | 1
atan2(y, x) | wartość kąta w radianach dla punktu (x,y) w układzie współrzędnych | 1
ceil(x) | zaokrąglenie w górę | 1
cos(x) | cosinus | 1
exp(x) | wartość ex, gdzie e to liczba Eulera, w przybliżeniu równa 2.718 | 1
floor(x) | zaokrąglenie w dół | 1
log(x) | logarytm naturalny | 1
max([liczba1], [liczba2], ...) | wybiera wartość największą z podanych, jeżeli nie podano żadnych liczb to zwracana jest minus nieskończoność | 1
min([liczba1], [liczba2], ...) | wybiera wartość najmniejszą z podanych, jeżeli nie podano żadnych liczb to zwracana jest plus nieskończoność | 1
pow(podstawa, wykładnik) | potęga postaci podstawawykładnik | 1
random | liczba losowa | 1
round(x) | zaokrąglenie | 1
sin(x) | sinus | 1
sqrt(x) | pierwiastek kwadratowy, dla liczb ujemnych zwraca 0 | 1
tan(x) | tangens | 1


Number

Typy obiektów - Number

Przejdź do: [właściwości] | [metody]

Obiekt Number zawiera przydatne stałe liczbowe.

Deklaracja obiektu (chociaż używa się jej bardzo rzadko, ponieważ nie ma potrzeby deklarować tego obiektu) wygląda następująco:

var zmienna1 = new Number(wartość);

Jeżeli już deklarujemy obiekt Number to musimy podać jego wartość.

Interpretowanie obietku Number wymaga wersji JavaScript 1.

Właściwości
nazwa | opis | wersja
MAX_VALUE | maksymalna możliwa wartość liczbowa wynosząca w przybliżeniu 1.79E+308 | 2
MAX_VALUE | minimalna możliwa wartość liczbowa wynosząca w przybliżeniu 5.00E-324 | 2
NaN | wartość, która jest zwracana, jeżeli dana nie zawiera wartości liczbowej (ang Not a Number - nie liczba) | 2
NEGATIVE_INFINITY | minus niskończoność | 2
POSITIVE_INFINITY | plus nieskończoność | 2
constructor | określa funkcję, która stworzyła obiekt | 2
prototype | określa funkcję zdefiniowaną przez użytkownika, która będzie się odnosiła i będzie metodą dla przyszłych obiektów | 2

Metody
nazwa | opis | wersja
toString | zwraca liczbę w postaci string | 2
valueOf | zwraca wartość liczby | 2


Object

Typy obiektów - Object

Przejdź do: [właściwości] | [metody]

Obiektem typu Object jest każda zmienna będąca obiektem. Dzięki takiemu obiektowi możemy z łatwością tworzyć obiekty.

Obiekt Object deklaruje się następująco:

var zmienna1 = new Object([wartość_inicjacyjna]);

Wartość_inicjacyjna może być jednym z podstawowych typów danych. Jeżeli wartość_inicjacyjna zostanie ominięta lub wynosi null lub undefined, to tworzony jest obiekt bez zawartości.

Interpretowanie obietku Object wymaga wersji JavaScript 3.

Właściwości
nazwa | opis | wersja
constructor | określa funkcję, która stworzyła obiekt | 2
prototype | określa funkcję zdefiniowaną przez użytkownika, która będzie się odnosiła i będzie metodą dla przyszłych obiektów | 2

Metody
nazwa | opis | wersja
toString | zwraca wartość typu string ["object nazwa_obiektu"], gdzie "nazwa_obiektu" jest nazwą typu | 2
valueOf | zwraca sam obiekt | 2


String

Typy obiektów - String

Przejdź do: [właściwości] | [metody]

Obiektem typu String jest każda zmienna zawierająca łańcuch znaków. Dzięki takiemu obiektowi możemy dokonywać różnych operacji na tych danych.

Istnieją dwie metody deklarowania takiego obiektu, jednak występują między nimi różnice. Prześledźmy to na przykładzie:

var zmienna1, zmienna2;
zmienna1 = "To jest pierwszy napis";
zmienna2 = "To jest napis drugi";
zmienna1.test = 1;

W powyższym przykładzie właściwość test jest zdefiniowana również dla zmienna2 oraz dla wszystkich przyszłych zmiennych typu String.

var zmienna1, zmienna2;
zmienna1 = new String("To jest pierwszy napis");
zmienna2 = new String("To jest napis drugi");
zmienna1.test = 1;

Tutaj natomiast test jest zdefiniowana wyłącznie dla zmienna1.

Interpretowanie obietku String wymaga wersji JavaScript 1.

Właściwości
nazwa | opis | wersja
constructor | określa funkcję, która stworzyła obiekt | 2
length | ilość znaków | 1
prototype | określa funkcję zdefiniowaną przez użytkownika, która będzie się odnosiła i będzie metodą dla przyszłych obiektów typu String | 2

Metody
nazwa | opis | wersja
anchor | tworzy odnośnik do danego fragmentu strony | 1
big | powiększenie czcionki | 1
blink | migający tekst | 1
bold | pogrubienie czcionki | 1
charAt(index) | zwraca literę na pozycji index liczonej od 0 | 1
charCodeAt(index) | zwraca UNICODE litery na pozycji index liczonej od 0 | 5.5
concat([tekst1], [tekst2] ...) | łączy łańcuchy znakowe | 3
fixed | czcionka monotypiczna (o jednakowych szerokościach liter) | 1
fontcolor("kolor") | nadaje kolor, kolor (zawsze cudzysłowiu) może być predefiniowany lub podany szestnastkowo | 1
fontsize(rozmiar) | nadaje rozmiar w siedmiopunktowej skali | 1
fromCharCode([kod1], [kod2] ...) | tworzy napis z podanych kodów UNICODE | 3
indexOf(znak, [startIndex]) | podaje pierwsze wystąpienie znaku znak począwszy od pozycji startIndex w String'u | 1
italics | pochylenie czcionki | 1
lastIndexOf(znak, [startIndex]) | podaje ostatnie wystąpienie znaku znak począwszy od pozycji startIndex w String'u | 1
link(adres) | tworzy odnośnik o podanym adresie | 1
match(wzór) | przeszukuje String zgodnie z wzorem i zwraca tablicę z wynikami | 3
replace(wzór, tekst) | przeszukuje String zgodnie z wzorem i zwraca łańcuch z popodmienianymi znakami na tekst | 1
search(tekst) | podaje pierwsze wystąpienie łańcucha tekst, jeśli nie wystąpi to zwraca -1 | 3
slice(start, [koniec]) | zwraca wycinek łańcucha o początku w pozycji start i końcu w koniec, jeśli koniec jest niezadeklarowany to domyślnie ustawiany jest on na koniec String'u | 3
small | pomniejszenie czcionki | 1
split(separator, [limit]) | zwraca łańcuch znaków powstały poprzez powstawianie separator między każdy znak String'u, limit ogranicza liczbę zwróconych znaków | 3
strike | podkreślenie czcionki | 1
sub | index dolny | 1
substr(start, [długość]) | zwraca fragment łańcucha o początku w start i długości długość, jeśli długość jest niezadeklarowana to domyślnie wynosi ona tyle, ile zostało znaków w String'u | 3
substring(start, koniec) | zwraca fragment łańcucha o początku w start i końcu w koniec | 1
sup | index górny | 1
toLowerCase | zamienia wszystkie litery w String'u na małe | 1
toUpperCase | zamienia wszystkie litery w String'u na wielkie | 1
toString | zwraca wartość String'u | 2
valueOf | zwraca wartość String'u | 2


anchor

Wbudowane obiekty - anchor

Przejdź do: [właściwości] | [metody]

Obiekt anchor zawiera informacje na temat odnośnika znajdującego się na stronie (zdefiniowanego przez znacznik <A> NAME="kotwica1">...</A>). Jest obiektem podrzędnym względem obiektu document. Do obiektu anchor można również dotrzeć za pomocą tablicy asocjacyjnej anchors[ ], która należy do obiektu document. Ilość kotwic w dokumencie możesz odczytać z właściwości document.anchors.length.

Właściwości

BRAK

Metody

BRAK


applet

Wbudowane obiekty - applet

Przejdź do: [właściwości] | [metody]

Obiekt applet zawiera informacje na temat apletu znajdującego się na stronie (zdefiniowanego przez znacznik <APPLET NAME="applet1">...</APPLET>). Jest obiektem podrzędnym względem obiektu document. Do obiektu applet można również dotrzeć za pomocą tablicy asocjacyjnej applets[ ], która należy do obiektu document. Ilość apletów w dokumencie możesz odczytać z właściwości document.applets.length

Właściwości

BRAK

Metody

wszystkie publiczne metody apletu


area

Wbudowane obiekty - area

Przejdź do: [właściwości] | [metody]

Obiekt area zawiera informacje na temat definicji obszaru znajdującego się na stronie (zdefiniowanego przez znacznik <AREA NAME="mapa1">...</A>). Jest obiektem podrzędnym względem obiektu document.

Właściwości
nazwa | opis
hash | określa część adresu url odpowiadającą za odniesienie do zakotwiczenia w dokumencie (miejsca zdefiniowanego poprzez <A NAME="kotiwca1">...</A>); zaczyna się od znaku "#"
host | określa nazwę domeny, serwera, z jakiej dany dokument pochodzi
hostname | określa nazwę domeny, serwera, z jakiej dany dokument pochodzi wraz z portem
href | określa cały adres URL
pathname | określa część adresu URL, znajdującą się za domeną (za trzecim ukośnikiem)
port | określa port użyty do komunikacji; zwykle jest to 80
protocol | określa protokół dokumentu ("http:", "ftp:", "file:" czy "javascript:")
search | określa część adresu URL znajdującą się za znakiem ?
target | określa miejsce docelowe (ramkę lub nowe okno) dla danego odnośnika (elementu zfediniowanego przez <AREA TARGET="ramka2">

Metody

BRAK


button

Wbudowane obiekty - button

Przejdź do: [właściwości] | [metody]

Obiekt button zawiera informacje na temat danego przycisku, czyli elementowi definiowanemu poprzez znacznik <INPUT TYPE="button" NAME="przycisk1">. Jest obiektem podrzędnym względem obiektu form.

Tak to wygląda w praktyce:

Jeżeli chcesz się dowiedzieć czegoś więcej o obsłudze formularzy, zobacz 18. lekcję kursu. O samych przyciskach dowiesz się z kursu HTML'a.

Właściwości
nazwa | opis
name | określa nazwę przycisku, jest odpowiednikiem parametru NAME znacznika <INPUT>
type | określa typ elementu formularza, jest odpowiednikiem parametru TYPE znacznika <INPUT>
value | określa tekst wyświetlany na przycisku, jest odpowiednikiem parametru VALUE znacznika <INPUT>

Metody
nazwa | opis
blur | odbiera focus, deaktywuje
click | symuluje kliknięcie w przycisk
focus | nadaje focus, aktywuje


checkbox

Wbudowane obiekty - checkbox

Przejdź do: [właściwości] | [metody]

Obiekt checkbox zawiera informacje na temat danego pola wyboru, czyli elementowi definiowanemu poprzez znacznik <INPUT TYPE="checkbox" NAME="pole1">. Jest obiektem podrzędnym względem obiektu form.

Tak to wygląda w praktyce:

pole1 pole2

Jeżeli chcesz się dowiedzieć czegoś więcej o obsłudze formularzy, zobacz 18. lekcję kursu. O samych polach wyboru dowiesz się z kursu HTML'a.

Właściwości
nazwa | opis
checked | określa czy pole jest zaznaczone; zwraca wartość true lub false
defaultChecked | określa czy pole było domuślnie zaznaczone, jest odpowiednikiem parametru <INPUT TYPE="checkbox" CHECKED>, który definiuje się bez wartości
name | określa nazwę pola, jest odpowiednikiem parametru NAME znacznika <INPUT>
value | określa tekst zwracany jeżeli pole jest zaznaczone (jeżeli jest odznaczone to zwraca OFF), jest odpowiednikiem parametru VALUE znacznika <INPUT>

Metody
nazwa | opis
blur | odbiera focus, deaktywuje
click | symuluje kliknięcie w przycisk
focus | nadaje focus, aktywuje


document

Wbudowane obiekty - document

Przejdź do: [właściwości] | [metody]

Obiekt document zawiera informacje na temat otwartego dokumentu oraz umożliwia komunikowanie się skryptu z ze stroną HTML. Jest jednym z najważniejszych obiektów. Jest obiektem podrzędnym względem obiektu window.

Właściwości
nazwa | opis
alinkColor | określa kolor aktywnego odsyłacza (po najechaniu kursorem); jest odpowiednikiem parametru ALINK znacznika <BODY>
anchors | tablica (kolekcja) zawierająca referencje do wszystkich obiektów kotwic (czyli elementów o składni <A NAME="kotwica1">...</A>) znajdujących się na stronie [więcej...]
applets | tablica (kolekcja) zawierająca referencje do wszystkich apletów zagnieżdżonych na stronie (czyli elementów o składni <APPLET NAME="applet1">...</APPLET>) znajdujących się na stronie [więcej...]
area | referencja do obiektu typu area, elementu określonego przez <AREA [więcej...]
bgColor | określa kolor tła dokumentu; jest odpowiednikiem parametru BGCOLOR znacznika <BODY>
cookie | zwraca ciasteczko dla danego dokumentu [więcej...]
fgColor | określa kolor tekstu zamieszczonego w dokumencie; jest odpowiednikiem parametru TEXT znacznika <BODY>
forms | tablica (kolekcja) zawierająca referencje do wszystkich obiektów form (czyli elementów o składni <FORM NAME="ankieta">...</FORM>) znajdujących się na stronie [więcej...]
images | tablica (kolekcja) zawierająca referencje do wszystkich grafik (czyli elementów o składni <IMG NAME="obrazek1">) znajdujących się na stronie [więcej...]
lastModified | określa datę ostatniej modyfikacji dokumentu, który można obrabiać za pomocą poleceń obiektu Date
linkColor | określa kolor odsyłaczy w dokumencie; jest odpowiednikiem parametru LINK znacznika <BODY>
links | tablica (kolekcja) zawierająca referencje do wszystkich odnośników (czyli elementów o składni <A HREF="strona.html">...</A>) znajdujących się na stronie [więcej...]
location | określa adres URL bieżącego dokumentu [więcej...]
referrer | określa adres URL dokumentu, z którego nastąpiło przekierowanie do bieżącego dokumentu
title | określa zawartość belki tytułowej; jest odpowiednikiem znacznika <TITLE>
vlinkColor | określa kolor odsyłacza, który został już odwiedzony ; jest odpowiednikiem parametru VLINK znacznika <BODY>

Metody
nazwa | opis
clear | czyści zawartość aktualnego dokumentu
close | zamyka aktualny dokument
open | dostarcza dostęp do dokumentu, w celu jego edycji
write("tekst") | wypisuje "tekst" na stronie; "tekst" może zawierać znaczniki HTML, które będą interpretowane jak normalne tagi
writeln("tekst") | działanie jest identyczne z write("tekst"), jednakże tutaj dodane jest przejście do nowej linii


file

Wbudowane obiekty - file

Przejdź do: [właściwości] | [metody]

Obiekt file zawiera informacje na temat danego elementu umożliwiającego przesłanie pliku wraz z formularzem, czyli elementowi definiowanemu poprzez znacznik <INPUT TYPE="file" NAME="pole1">. Jest obiektem podrzędnym względem obiektu form.

Tak to wygląda w praktyce:

Jeżeli chcesz się dowiedzieć czegoś więcej o obsłudze formularzy, zobacz 18. lekcję kursu. O samych elementach file dowiesz się z kursu HTML'a.

Właściwości
nazwa | opis
name | określa nazwę elementu, jest odpowiednikiem parametru NAME znacznika <INPUT>
type | określa typ elementu formularza, jest odpowiednikiem parametru TYPE znacznika <INPUT>
value | określa tekst wyświetlany w polu tekstowym i jest to ścieżka do pliku, jest odpowiednikiem parametru VALUE znacznika <INPUT>

Metody
nazwa | opis
blur | odbiera focus, deaktywuje
focus | nadaje focus, aktywuje


form

Wbudowane obiekty - form

Przejdź do: [właściwości] | [metody]

Obiekt form zawiera informacje na temat danego formularza oraz umożliwia dostęp do jego elementów. Formularz definiuje się poprzez znaczniki <FORM NAME="formularz"> ..elementy formularza.. </FORM>. Jest jednym z najistotniejszych i najczęściej używanych obiektów. Ilość takich obiektów na stronie określa wartość document.forms.length. Jest obiektem podrzędnym względem obiektu document.

Jeżeli chcesz się dowiedzieć czegoś więcej o obsłudze formularzy, zobacz 18. lekcję kursu JavaScript. O budowie samych formularzy dowiesz się z kursu HTML'a.

Właściwości
nazwa | opis
action | określa akcję, jaka ma zostać wykonana, gdy potwierdza się wysłanie formularza, jest odpowiednikiem parametru ACTION znacznika <FORM>
button | referencja do obiektu typu button, elementu określonego przez <INPUT TYPE="button"> [więcej...]
checkbox | referencja do obiektu typu checkbox, elementu określonego przez <INPUT TYPE="checkbox"> [więcej...]
elements | tablica (kolekcja) zawierająca referencje do wszystkich elementów danego formularza
encoding | określa rodzaj formatowania tekstu dokonywanego przed wysłaniem formularza, jest odpowiednikiem parametru ENCTYPE znacznika <FORM>
file | referencja do obiektu typu file, elementu określonego przez <INPUT TYPE="file"> [więcej...]
hidden | referencja do obiektu typu hidden, elementu określonego przez <INPUT TYPE="hidden"> [więcej...]
length | określa ilość elementów formularza
method | określa metodę, z jaką ma zostać wykonana akcja, gdy potwierdza się wysłanie formularza, jest odpowiednikiem parametru METHOD znacznika <FORM> i przyjmuje wartości "POST" lub "GET"
password | referencja do obiektu typu password, elementu określonego przez <INPUT TYPE="password"> [więcej...]
radio | referencja do obiektu typu radio, elementu określonego przez <INPUT TYPE="radio"> [więcej...]
reset | referencja do obiektu typu reset, elementu określonego przez <INPUT TYPE="reset"> [więcej...]
select | referencja do obiektu typu select, elementu określonego przez <INPUT TYPE="select"> [więcej...]
submit | referencja do obiektu typu submit, elementu określonego przez <INPUT TYPE="submit"> [więcej...]
target | określa miejsce docelowe wykonania akcji, jaka ma zostać wykonana, gdy potwierdza się wysłanie formularza, jest odpowiednikiem parametru TARGET znacznika <FORM>
text | referencja do obiektu typu text, elementu określonego przez <INPUT TYPE="text"> [więcej...]
textarea | referencja do obiektu typu textarea, elementu określonego przez <INPUT TYPE="textarea"> [więcej...]

Metody
nazwa | opis
reset | czyści zawartość aktualnego formularza
submit | potwierdza wysłanie aktualnego formularza


frame

Wbudowane obiekty - frame

Przejdź do: [właściwości] | [metody]

Obiekt frame zawiera informacje na temat danej ramki. Każda ramka zdefiniowana jest poleceniem <FRAME>. Obiekt frame jest bardzo podobny do obiektu window, ponieważ ramka jest tak jakby osobną stroną, która posiada swoje źródło oraz inne właściwości i metody. Do ramki można dotrzeć również poprzez tablicę asocjacyjną frames[ ]. Ilość ramek w bieżącej ramce/oknie określa window.frames.length. Więcej o działaniu tego obiektu dowiesz się z kursu JavaScript, a o deklarowaniu i parametrach znacznika <FRAME> - z kursu HTML'a.

Właściwości
nazwa | opis
document | odniesienie do dokumentu w danym oknie [więcej...]
frames | tablica (kolekcja) zawierajca referencje do wszystkich ramek w oknie (czyli elementów określonych przez <FRAME NAME="ramka1">)
length | określa liczbę ramek znajdujących się bezpośrednio w danym oknie
location | określa adres URL bieżącego okna [więcej...]
name | określa nazwę okna
parent | określa okno nadrzędne w hierarchii względem bieżącego okna, tzw: "rodzic"
self | określa bieżące okno (równoważne z window)
top | określa okno najwyżej położone w hierarchii

Metody
nazwa | opis
alert("tekst") | wyświetla okienko dialogowe typu alert [więcej...]
blur | odbiera focus, deaktywuje
close | zamyka dane okno
confirm("tekst") | wyświetla okienko dialogowe typu confirm [więcej...]
focus | nadaje focus, aktywuje
open("adres", "nazwa", "parametry") | otwiera nowe okno [więcej...]
prompt("tekst") | wyświetla okienko dialogowe typu prompt [więcej...]
scroll(x, y) | przewija ramkę do podanych współrzędnych
setInterval("funkcja", czas_w_ms) | ustawia wywoływanie funkcji w określonych odstępach czasu [więcej...]
setTimeout("funkcja", czas_w_ms) | ustawia wywołanie funkcji po upływie określonego czasu [więcej...]
clearInterval(id) | zatrzymuje timer wywoływania funkcji w określonych odstępach czasu o danym id [więcej...]
clearTimeout(id) | zatrzymuje timer wywołania funkcji po upływie określonego czasu o danym id [więcej...]


hidden

Wbudowane obiekty - hidden

Przejdź do: [właściwości] | [metody]

Obiekt hidden zawiera informacje na temat niewidocznego elementu formularza, czyli elementowi definiowanemu poprzez znacznik <INPUT TYPE="hidden" NAME="ukryty1">. Jest obiektem podrzędnym względem obiektu form.

Jeżeli chcesz się dowiedzieć czegoś więcej o obsłudze formularzy, zobacz 18. lekcję kursu. O samych ukrytych polach dowiesz się z kursu HTML'a.

Właściwości
nazwa | opis
name | określa nazwę elementu, jest odpowiednikiem parametru NAME znacznika <INPUT>
value | określa wartość przetrzymywaną przez obiekt hidden, jest odpowiednikiem parametru VALUE znacznika <INPUT>

Metody

BRAK


history

Wbudowane obiekty - history

Przejdź do: [właściwości] | [metody]

Obiekt history zawiera informacje na temat, jakie strony użytkownik otwierał w tym oknie przed otworzeniem bieżącej strony. Obiekt ten bardzo ułatwia nawigację na stronie. Więcej o działaniu tego obiektu dowiesz się tutaj.

Właściwości
nazwa | opis
length | określa ilość indexów listy asocjacyjnej, jaką jest również history, czyli ilość stron w historii okna

Metody
nazwa | opis
back | przechodzi wstecz w historii
forward | przechodzi dalej w historii
go(nr) | przechodzi do strony o indexie nr w historii; index bieżącej strony to 0, zatem wywołanie history.go(0) odświeży zawartość strony


image

Wbudowane obiekty - image

Przejdź do: [właściwości] | [metody]

Obiekt image zawiera informacje na temat elementu graficznego znajdującego się na stronie (zdefiniowanego przez znacznik <IMG SRC="plik_graficzny">). Jest obiektem podrzędnym względem obiektu document. Do obiektu image można również dotrzeć za pomocą tablicy asocjacyjnej images[ ], która należy do obiektu document. Ilość grafik w dokumencie możesz odczytać z właściwości document.images.length. Obiekty stworzone za pomocą konstruktora Image() nie są dodawane to tablicy asocjacyjnej. Więcej o używaniu tego obiektu dowiesz się tutaj.

Właściwości
nazwa | opis
align | określa wyrównanie obiektu graficznego w dokumencie; działanie takie, jak <IMG ALIGN="right">
alt | określa tekst "dymku"; działanie takie, jak <IMG ALT="To jest obrazek">
border | określa grubość ramki; zero oznacza jej brak; działanie takie, jak <IMG BORDER="0">
height | określa wysokość obiektu graficznego; działanie takie, jak <IMG HEIGHT="50">
hspace | określa w poziomie odległość obiektu graficznego od innego elementu strony w dokumencie; działanie takie, jak <IMG HSPACE="20">
name | określa nazwę określoną przez <IMG NAME="nazwa">
src | określa źródło pliku graficznego; adres URL; działanie takie, jak <IMG SRC="plik_graficzny">
title | określa tekst "dymku"; działanie takie, jak <IMG TITLE="To jest obrazek">
vspace | określa w pionie odległość obiektu graficznego od innego elementu strony w dokumencie; działanie takie, jak <IMG VSPACE="15">
width | określa szerokość obiektu graficznego; działanie takie, jak <IMG WIDTH="400">

Metody
nazwa | opis
blur | odbiera focus, deaktywuje
focus | nadaje focus, aktywuje


link

Wbudowane obiekty - link

Przejdź do: [właściwości] | [metody]

Obiekt link zawiera informacje na temat odnośnika znajdującego się na stronie (zdefiniowanego przez znacznik <A HREF="strona.html">...</A>). Jest obiektem podrzędnym względem obiektu document. Do obiektu link można również dotrzeć za pomocą tablicy asocjacyjnej links[ ], która należy do obiektu document. Ilość odnośników w dokumencie możesz odczytać z właściwości document.links.length

Właściwości
nazwa | opis
hash | określa pozycję zakotwiczenia w dokumencie (miejsca zdefiniowanego poprzez <A NAME="kotiwca1">...</A>); zaczyna się od znaku "#"
host | określa nazwę domeny, serwera, z jakiej dany dokument pochodzi
hostname | określa nazwę domeny, serwera, z jakiej dany dokument pochodzi wraz z portem
href | określa cały adres URL
pathname | określa część adresu URL, znajdującą się za domeną (za trzecim ukośnikiem)
port | określa port użyty do komunikacji; zwykle jest to 80
protocol | określa protokół dokumentu ("http:", "ftp:", "file:" czy "javascript:")
search | określa część adresu URL znajdującą się za znakiem ?
target | określa miejsce docelowe (ramkę lub nowe okno) dla danego odnośnika (elementu zfediniowanego przez <A TARGET="ramka2">...</A

Metody
nazwa | opis
blur | odbiera focus, deaktywuje
focus | nadaje focus, aktywuje


location

Wbudowane obiekty - location

Przejdź do: [właściwości] | [metody]

Obiekt location zawiera informacje na temat bieżącego adresu URL. Jest obiektem podrzędnym względem obiektu document lub window.

Właściwości
nazwa | opis
hash | określa pozycję zakotwiczenia w dokumencie (miejsca zdefiniowanego poprzez <A NAME="kotiwca1">...</A>); zaczyna się od znaku "#"
host | określa nazwę domeny, serwera, z jakiej dany dokument pochodzi
hostname | określa nazwę domeny, serwera, z jakiej dany dokument pochodzi wraz z portem
href | określa cały adres URL
pathname | określa część adresu URL, znajdującą się za domeną (za trzecim ukośnikiem)
port | określa port użyty do komunikacji; zwykle jest to 80
protocol | określa protokół dokumentu ("http:", "ftp:", "file:" czy "javascript:")
search | określa część adresu URL znajdującą się za znakiem ?

Metody
nazwa | opis
reload | wczytuje stronę ponownie
replace(nowa_strona) | podmienia bieżącą stronę na drugą, określoną przez nowa_strona; nie jest traktowane jako przejście do innej strony, więc historia dokumentu nie jest modyfikowana


navigator

Wbudowane obiekty - navigator

Przejdź do: [właściwości] | [metody]

Obiekt navigator zawiera informacje na temat przeglądarki, jakiej użytkownik używa do oglądania danej strony. Jest obiektem w ogóle nie powiązanym z hierarchią obiektów.

Właściwości
nazwa | opis
appCodeName | określa nazwę kodową przeglądarki; dla Internet Explorer i Netscape Navigator jest to Mozilla
appName | określa nazwę przeglądarki
appVersion | określa numer wersji przeglądarki
mimeTypes | tablica (kolekcja) zawierająca referencje do wszystkich MIME, które przeglądarka obsługuje, czyli do typów zawartości formularza
platform | określa system operacyjny użytkownika
plugins | tablica (kolekcja) zawierająca referencje do wszystkich zainstalowanych wtyczek do przeglądarki
userAgent | określa nazwę przeglądarki wraz z jej wersją oraz systemem operacyjnym

Metody

BRAK


option

Wbudowane obiekty - option

Przejdź do: [właściwości] | [metody]

Obiekt option zawiera informacje na temat danej pozycji w liście wyboru, czyli elementowi definiowanemu poprzez znacznik <OPTION VALUE="pozycja1">. Jest obiektem podrzędnym względem obiektu select.

Tak to wygląda w praktyce:

Jeżeli chcesz się dowiedzieć czegoś więcej o obsłudze formularzy, zobacz 18. lekcję kursu. O samych listach wyboru dowiesz się z kursu HTML'a.

Właściwości
nazwa | opis
defaultSelected | określa index elementu na liście, który ma został wybrany po załadowaniu strony
length | określa ilość opcji dostępnych na liście; działanie takie samo jak właściwość length obiektu select
selected | określa czy element o danym indeksie jest zaznaczony; zwraca wartości true lub false
selectedIndex | określa index aktualnie zaznaczonego elementu na liście; działanie takie samo jak właściwość selectedIndex obiektu select
text | określa tekst wyświetlanego aktualnie zaznaczonego elementu na liście
value | określa tekst wybranego elementu, jaki zostanie przekazany w momencie potwierdzenia wysłania formularza, jest odpowiednikiem parametru VALUE znacznika <OPTION>

Metody

BRAK


password

Wbudowane obiekty - password

Przejdź do: [właściwości] | [metody]

Obiekt password zawiera informacje na temat danego pola tekstowego z hasłem, czyli elementowi definiowanemu poprzez znacznik <INPUT TYPE="password" NAME="pole1">. Jest obiektem podrzędnym względem obiektu form.

Tak to wygląda w praktyce:

Jeżeli chcesz się dowiedzieć czegoś więcej o obsłudze formularzy, zobacz 18. lekcję kursu. O samych polach password dowiesz się z kursu HTML'a.

Właściwości
nazwa | opis
defaultValue | określa tekst wyświetlany w polu zaraz po załadowaniu strony (rozkodowany), jest odpowiednikiem parametru VALUE znacznika <INPUT>
name | określa nazwę pola, jest odpowiednikiem parametru NAME znacznika <INPUT>
type | określa typ elementu formularza, jest odpowiednikiem parametru TYPE znacznika <INPUT>
value | określa tekst wyświetlany w polu (rozkodowany), jest odpowiednikiem parametru VALUE znacznika <INPUT>

Metody
nazwa | opis
blur | odbiera focus, deaktywuje
focus | nadaje focus, aktywuje
select | uaktywnia pole i zaznacza jego zawartość


radio

Wbudowane obiekty - radio

Przejdź do: [właściwości] | [metody]

Obiekt radio zawiera informacje na temat danego pola alternatywnego wyboru, czyli elementowi definiowanemu poprzez znacznik <INPUT TYPE="radio" NAME="pole1">. Jest obiektem podrzędnym względem obiektu form.

Tak to wygląda w praktyce:

pole1 pole2

Jeżeli chcesz się dowiedzieć czegoś więcej o obsłudze formularzy, zobacz 18. lekcję kursu. O samych polach alternatywnego wyboru dowiesz się z kursu HTML'a.

Właściwości
nazwa | opis
checked | określa czy pole jest zaznaczone; zwraca wartość true lub false
defaultChecked | określa czy pole było domuślnie zaznaczone, jest odpowiednikiem parametru <INPUT TYPE="radio" CHECKED>, który definiuje się bez wartości
length | określa ilość pól należących do tej samej grupy (o tej samej wartości NAME)
name | określa nazwę pola, jest odpowiednikiem parametru NAME znacznika <INPUT>
value | określa tekst zwracany jeżeli pole jest zaznaczone (jeżeli jest odznaczone to zwraca OFF), jest odpowiednikiem parametru VALUE znacznika <INPUT>

Metody
nazwa | opis
blur | odbiera focus, deaktywuje
click | symuluje kliknięcie w przycisk
focus | nadaje focus, aktywuje


reset

Wbudowane obiekty - reset

Przejdź do: [właściwości] | [metody]

Obiekt reset zawiera informacje na temat danego przycisku czyszczącego zawartość formularza do stanu zaraz po załadowaniu strony, czyli elementowi definiowanemu poprzez znacznik <INPUT TYPE="reset" NAME="reset1">. Jest obiektem podrzędnym względem obiektu form.

Tak to wygląda w praktyce:

Jeżeli chcesz się dowiedzieć czegoś więcej o obsłudze formularzy, zobacz 18. lekcję kursu. O samych obiektach reset dowiesz się z kursu HTML'a.

Właściwości
nazwa | opis
name | określa nazwę przycisku, jest odpowiednikiem parametru NAME znacznika <INPUT>
type | określa typ elementu formularza, jest odpowiednikiem parametru TYPE znacznika <INPUT>
value | określa tekst wyświetlany na przycisku, jest odpowiednikiem parametru VALUE znacznika <INPUT>

Metody
nazwa | opis
blur | odbiera focus, deaktywuje
click | symuluje kliknięcie w przycisk
focus | nadaje focus, aktywuje


select

Wbudowane obiekty - select

Przejdź do: [właściwości] | [metody]

Obiekt select zawiera informacje na temat danej listy wyboru, czyli elementowi definiowanemu poprzez znacznik <SELECT NAME="lista1"> ..elementy listy.. </SELECT>. Jest obiektem podrzędnym względem obiektu form.

Tak to wygląda w praktyce:

Jeżeli chcesz się dowiedzieć czegoś więcej o obsłudze formularzy, zobacz 18. lekcję kursu. O samych listach wyboru dowiesz się z kursu HTML'a.

Właściwości
nazwa | opis
length | określa ilość opcji dostępnych na liście; działanie takie samo jak options.length
name | określa nazwę listy wyboru, jest odpowiednikiem parametru NAME znacznika <SELECT>
options | tablica (kolekcja) zawierająca referencje do wszystkich elementów listy (czyli elementów o składni <OPTION VALUE="pozycja1">) [więcej...]
selectedIndex | określa index aktualnie zaznaczonego elementu na liście

Metody
nazwa | opis
blur | odbiera focus, deaktywuje
focus | nadaje focus, aktywuje


submit

Wbudowane obiekty - submit

Przejdź do: [właściwości] | [metody]

Obiekt submit zawiera informacje na temat danego przycisku potwierdzającego wysłanie formularza, czyli elementowi definiowanemu poprzez znacznik <INPUT TYPE="submit" NAME="przycisk1">. Jest obiektem podrzędnym względem obiektu form.

Tak to wygląda w praktyce:

Jeżeli chcesz się dowiedzieć czegoś więcej o obsłudze formularzy, zobacz 18. lekcję kursu. O samych przyciskach dowiesz się z kursu HTML'a.

Właściwości
nazwa | opis
name | określa nazwę przycisku, jest odpowiednikiem parametru NAME znacznika <INPUT>
type | określa typ elementu formularza, jest odpowiednikiem parametru TYPE znacznika <INPUT>
value | określa tekst wyświetlany na przycisku, jest odpowiednikiem parametru VALUE znacznika <INPUT>

Metody
nazwa | opis
blur | odbiera focus, deaktywuje
click | symuluje kliknięcie w przycisk
focus | nadaje focus, aktywuje


text

Wbudowane obiekty - text

Przejdź do: [właściwości] | [metody]

Obiekt text zawiera informacje na temat danego pola tekstowego, czyli elementowi definiowanemu poprzez znacznik <INPUT TYPE="text" NAME="pole1">. Jest obiektem podrzędnym względem obiektu form.

Tak to wygląda w praktyce:

Jeżeli chcesz się dowiedzieć czegoś więcej o obsłudze formularzy, zobacz 18. lekcję kursu. O samych polach tekstowych dowiesz się z kursu HTML'a.

Właściwości
nazwa | opis
defaultValue | określa tekst pola tekstowego wyświetlany po załadowaniu strony
name | określa nazwę pola tekstowego, jest odpowiednikiem parametru NAME znacznika <INPUT>
value | określa tekst wyświetlany w polu tekstowym, jest odpowiednikiem parametru VALUE znacznika <INPUT>

Metody
nazwa | opis
blur | odbiera focus, deaktywuje
focus | nadaje focus, aktywuje
select | uaktywnia pole i zaznacza jego zawartość


textarea

Wbudowane obiekty - textarea

Przejdź do: [właściwości] | [metody]

Obiekt textarea zawiera informacje na temat danego wielowierszowego pola tekstowego, czyli elementowi definiowanemu poprzez znacznik <TEXTAREA NAME="textarea1"> ..zawartość tekstowa..</TEXTAREA>. Jest obiektem podrzędnym względem obiektu form.

Tak to wygląda w praktyce:

Jeżeli chcesz się dowiedzieć czegoś więcej o obsłudze formularzy, zobacz 18. lekcję kursu. O samych polach tekstowych dowiesz się z kursu HTML'a.

Właściwości
nazwa | opis
defaultValue | określa tekst pola tekstowego wyświetlany po załadowaniu strony
name | określa nazwę pola tekstowego, jest odpowiednikiem parametru NAME znacznika <TEXTAREA>
value | określa tekst wyświetlany w polu tesktowym

Metody
nazwa | opis
blur | odbiera focus, deaktywuje
focus | nadaje focus, aktywuje
select | uaktywnia pole i zaznacza jego zawartość


window

Wbudowane obiekty - window

Przejdź do: [właściwości] | [metody]

Obiekt window zawiera informacje na temat otwartego okna przeglądarki. Jest najważniejszym z obiektów w hierarchii.

Właściwości
nazwa | opis
defaultStatus | określa domyślny tekst statusu
document | odniesienie do dokumentu w danym oknie [więcej...]
frames | tablica (kolekcja) zawierająca referencje do wszystkich ramek w oknie (czyli elementów określonych przez <FRAME NAME="ramka1">) [więcej...]
history | odniesienie do historii okna [więcej...]
length | określa liczbę ramek znajdujących się bezpośrednio w danym oknie
location | określa adres URL bieżącego okna [więcej...]
name | określa nazwę okna
opener | odniesienie do okna, z którego dane okno zostało otworzone
parent | określa okno nadrzędne w hierarchii względem bieżącego okna, tzw: "rodzic"
self | określa bieżące okno (równoważne z window)
status | określa tekst statusu
top | określa okno najwyżej położone w hierarchii

Metody
nazwa | opis
alert("tekst") | wyświetla okienko dialogowe typu alert [więcej...]
blur | odbiera focus, deaktywuje
close | zamyka dane okno
confirm("tekst") | wyświetla okienko dialogowe typu confirm [więcej...]
focus | nadaje focus, aktywuje
open("adres", "nazwa", "parametry") | otwiera nowe okno [więcej...]
prompt("tekst") | wyświetla okienko dialogowe typu prompt [więcej...]
scroll(x, y) | przewija okno do podanych współrzędnych
setInterval("funkcja", czas_w_ms) | ustawia wywoływanie funkcji w określonych odstępach czasu [więcej...]
setTimeout("funkcja", czas_w_ms) | ustawia wywołanie funkcji po upływie określonego czasu [więcej...]
clearInterval(id) | zatrzymuje timer wywoływania funkcji w określonych odstępach czasu o danym id [więcej...]
clearTimeout(id) | zatrzymuje timer wywołania funkcji po upływie określonego czasu o danym id [więcej...]


Słowa zarezerwowane

Znajdująca się tutaj lista słów prezentuje te słowa, które są dla składni JavaScript kluczowe i nie można używać ich jako nazw zmiennych, obiektów, funkcji, itp. Słowa te mają specjalne znaczenie, które poznasz studiując kurs. Użycie słowa kluczowego niezgodnie z jego zastosowaniem spowoduje błąd podczas kompilacji skryptu.

  • break
  • case
  • catch
  • continue
  • debugger
  • default
  • delete
  • do
  • else
  • false
  • finally
  • for
  • function
  • if
  • in
  • instanceof
  • new
  • null
  • return
  • switch
  • this
  • throw
  • true
  • try
  • typeof
  • var
  • void
  • while
  • with

Słowa zarezerwowane na przyszłość

Ta lista prezentuje słowa, które nie są obecnie częścią składni JavaScript, jadnakże w przyszłości prawdopodobnie się nimi staną. Stosowanie tych słów jest niezalecane, chociaż nie zabronione.

  • abstract
  • boolean
  • byte
  • char
  • class
  • const
  • double
  • enum
  • export
  • extends
  • final
  • float
  • goto
  • implements
  • import
  • int
  • interface
  • long
  • native
  • package
  • private
  • protected
  • public
  • short
  • static
  • super
  • synchronized
  • throws
  • transient
  • volatile


Zdarzenia

Zdarzenie w języku JavaScript jest akcją, która występuje zwykle, jeżeli użytkownik w jakiś sposób zareaguje, np.: wciśnie przycisk, uczyni text aktywnym, najedzie na link, itp. Obsługa zdarzeń pozwala webmasterowi na odpowiednią reakcję na różne zachowania internauty.

Zobacz lekcję o zdarzeniach oraz ich przechwytywaniu.

Zdarzenia
nazwa | odnosi się do... | występuje, gdy ...
onAbort | image | użytkownik anuluje ładowanie obrazka (np.: poprzez kliknięcie "Zatrzymaj")
onBlur | okna oraz wszystkie elementy formularza | użytkownik usunie focus (aktywność) obiektowi
onChange | text, textarea, lista select | użytkownik zmieni wartość VALUE elementy
onClick | przyciski, okienka radio, okienka check, submit, reset, linki | użytkownik kliknie element lub link
onDblClick | przyciski, okienka radio, okienka check, submit, reset, linki | użytkownik podwójnie kliknie element lub link
onDragDrop | onka | użytkownik przeciągnie obiekt nad okno przeglądarki
onError | image, okna | ładowanie strony lub image spowoduje błąd
onFocus | okna oraz wszystkie elementy formularza | użytkownik nada elementowi focus (uaktywni go)
onKeyDown | document, image, linki, textarea | użytkownik wcisnął klawisz na klawiaturze
onKeyPress | document, image, linki, textarea | użytkownik wcisnął i trzyma klawisz na klawiaturze
onKeyUp | document, image, linki, textarea | użytkownik puścił klawisz na klawiaturze
onLoad | ciało dokumentu | będzie ładowana strona
onMouseDown | document, przycisk, linki | użytkownik wciśnie klawisz myszy
onMouseMove | document | użytkownik poruszy kursorem myszy
onMouseOut | area, linki | użytkownik zjedzie kursorem ze zmapowanego obrazka lub linku
onMouseOver | linki | użytkownik najedzie kursorem na link
onMouseUp | doc | użytkownik zwolni klawisz myszy
onMove | okno | użytkownik lub skrypt poruszy oknem
onReset | formularz | użytkownik zresetuje formularz
onResize | okno | użytkownik lub skrypt zmieni rozmiar okna
onSelect | text, textarea | użytkownik zaznaczy tekst w obiekcie
onSubmit | formularz | użytkownik potwierdzi formularz
onUnload | ciało dokumentu | użytkownik wyjdzie ze strony


Kolory

Wypisane tutaj kolory mogą zostać użyte jako wartości takich parametrów jak: alinkColor, bgColor, fgColor, linkColor, vlinkColor oraz przy użyciu metody fontColor dla obiektu String podczas formatowania tekstu.

KOLOR | NAZWA | RGB | CZERWONY | ZIELONY | NIEBIESKI
kolor | aliceblue | F0F8FF | 240 | 248 | 255
kolor | antiquewhite | FAEBD7 | 250 | 235 | 215
kolor | agua | 00FFFF | 0 | 255 | 255
kolor | aquamarine | 7FFFD4 | 126 | 255 | 212
kolor | azure | F0FFFF | 240 | 255 | 255
kolor | beige | F5F5DC | 245 | 245 | 220
kolor | bisque | FFE4DC | 255 | 228 | 220
kolor | black | 000000 | 0 | 0 | 0
kolor | blanchedalmond | FFEBCD | 255 | 235 | 205
kolor | blue | 0000FF | 0 | 0 | 255
kolor | blueviolet | 8A2BE2 | 138 | 43 | 226
kolor | brown | A52A2A | 165 | 42 | 42
kolor | burlywood | DEB887 | 222 | 184 | 135
kolor | cadetblue | 5F9EA0 | 95 | 158 | 160
kolor | chartreuse | 7FFF00 | 127 | 255 | 0
kolor | chocolate | D2691E | 210 | 105 | 30
kolor | coral | FF7F50 | 255 | 127 | 80
kolor | cornflowerblue | 6495ED | 40 | 149 | 237
kolor | cornsilk | FFF8DC | 255 | 248 | 220
kolor | crimson | DC143C | 220 | 20 | 60
kolor | cyan | 00FFFF | 0 | 255 | 255
kolor | darkblue | 00008B | 0 | 0 | 139
kolor | darkcyan | 008B8B | 0 | 139 | 139
kolor | darkgoldenrod | B8860B | 184 | 134 | 11
kolor | darkgray | A9A9A9 | 169 | 169 | 169
kolor | darkgreen | 006400 | 0 | 100 | 0
kolor | darkkhaki | BDB76B | 189 | 183 | 107
kolor | darkmagenta | 8B008B | 139 | 0 | 139
kolor | darkolivegreen | 556B2F | 85 | 107 | 47
kolor | darkorange | FF8C00 | 255 | 140 | 0
kolor | darkorchid | 9932CC | 153 | 50 | 204
kolor | darkred | 8B0000 | 139 | 0 | 0
kolor | darksalmon | E9967A | 233 | 150 | 122
kolor | darkseagreen | 8FBC8F | 143 | 188 | 143
kolor | darkslateblue | 483D8B | 72 | 61 | 139
kolor | darkslategray | 2F4F4F | 47 | 79 | 79
kolor | darkturquoise | 00BFFF | 0 | 191 | 255
kolor | darkviolet | 9400D3 | 148 | 0 | 211
kolor | deeppink | FF1493 | 255 | 20 | 147
kolor | deepskyblue | 00BFFF | 0 | 191 | 255
kolor | dimgray | 696969 | 105 | 105 | 105
kolor | dodgerblue | 1E90FF | 30 | 144 | 255
kolor | firebrick | B22222 | 178 | 34 | 34
kolor | floralwhite | FFFAF0 | 255 | 250 | 240
kolor | forestgreen | 228B22 | 34 | 139 | 34
kolor | fuchsia | FF00FF | 255 | 0 | 255
kolor | gainsboro | DCDCDC | 220 | 220 | 220
kolor | ghostwithe | F8F8FF | 248 | 248 | 255
kolor | gold | FFD700 | 255 | 215 | 0
kolor | goldenrod | DAA520 | 218 | 165 | 32
kolor | gray | 808080 | 128 | 128 | 128
kolor | green | 008000 | 0 | 128 | 0
kolor | greenyellow | ADFF2F | 173 | 255 | 47
kolor | honeydew | F0FFF0 | 240 | 255 | 240
kolor | hotpink | FF69B4 | 255 | 105 | 180
kolor | indianred | CD5C5C | 205 | 92 | 92
kolor | indigo | 4B0082 | 75 | 0 | 130
kolor | ivory | FFFFF0 | 255 | 255 | 240
kolor | khaki | F0E68C | 240 | 230 | 140
kolor | levender | E6E6FA | 230 | 230 | 250
kolor | levenderblush | FFF0F5 | 255 | 240 | 245
kolor | lawngreen | 7CFC00 | 124 | 252 | 0
kolor | lemonchiffon | FFFACD | 255 | 250 | 205
kolor | lightblue | ADD8E6 | 173 | 216 | 230
kolor | lightcoral | F08080 | 240 | 128 | 128
kolor | lightcyan | E0FFFF | 224 | 255 | 255
kolor | lightgoldenrodyellow | FAFAD2 | 250 | 250 | 210
kolor | lightgreen | 90EE90 | 144 | 238 | 144
kolor | lightgrey | D3D3D3 | 211 | 211 | 211
kolor | lightpink | FFB6C1 | 255 | 182 | 193
kolor | lightsalmon | FFA07A | 255 | 160 | 122
kolor | lightseagreen | 20B2AA | 170 | 178 | 32
kolor | lightskyblue | 87CEFA | 135 | 206 | 250
kolor | lightslategray | 778899 | 119 | 136 | 153
kolor | lightsteelblue | B0C4DE | 176 | 196 | 222
kolor | lightyellow | FFFFE0 | 255 | 255 | 224
kolor | lime | 00FF00 | 0 | 255 | 0
kolor | limegreen | 32CD32 | 50 | 205 | 50
kolor | linen | FAF0E6 | 250 | 240 | 230
kolor | magenta | FF00FF | 255 | 0 | 255
kolor | maroon | 800000 | 128 | 0 | 0
kolor | mediumaquamarine | 66CDAA | 102 | 205 | 170
kolor | mediumblue | 0000CD | 0 | 0 | 205
kolor | mediumorchid | BA55D3 | 186 | 85 | 211
kolor | mediumpurple | 9370DB | 147 | 112 | 219
kolor | mediumseagreen | 3CB371 | 60 | 179 | 113
kolor | mediumslateblue | 7B68EE | 123 | 104 | 238
kolor | mediumspringgreen | 00FA9A | 0 | 250 | 154
kolor | mediumturquoise | 48D1CC | 72 | 209 | 204
kolor | mediumvioletred | CD1585 | 205 | 21 | 133
kolor | midnightblue | 191970 | 25 | 25 | 112
kolor | mintcream | F5FFFA | 245 | 255 | 250
kolor | mistyrose | FFE4E1 | 255 | 228 | 225
kolor | moccasin | FFE4B5 | 255 | 228 | 181
kolor | navajowhite | FFDEAD | 255 | 222 | 173
kolor | navy | 000080 | 0 | 0 | 128
kolor | oldlace | FDF5E6 | 253 | 245 | 230
kolor | olive | 808000 | 128 | 128 | 0
kolor | olivedrab | 6B8E23 | 107 | 142 | 35
kolor | orange | FFA500 | 255 | 165 | 0
kolor | orangered | FF4500 | 255 | 69 | 0
kolor | orchid | DA70D6 | 218 | 112 | 214
kolor | palegoldenrod | EEE8AA | 238 | 232 | 170
kolor | palegreen | 98FB98 | 152 | 251 | 152
kolor | palaturquoise | AFEEEE | 175 | 238 | 238
kolor | palevioletred | DB7093 | 219 | 112 | 147
kolor | papayawhip | FFEFD5 | 255 | 239 | 213
kolor | peachpuff | FFDAB9 | 255 | 218 | 185
kolor | peru | CD853F | 205 | 133 | 63
kolor | pink | FFC0CB | 255 | 192 | 203
kolor | plum | DDA0DD | 221 | 160 | 221
kolor | powderblue | B0E0E6 | 176 | 224 | 230
kolor | purple | 800080 | 128 | 0 | 128
kolor | red | FF0000 | 255 | 0 | 0
kolor | rosybrown | BC8F8F | 188 | 143 | 143
kolor | royalblue | 4169E1 | 29 | 105 | 225
kolor | saddlebrown | 8B4513 | 139 | 69 | 19
kolor | salmon | FA8072 | 250 | 128 | 114
kolor | sandybrown | F4A460 | 244 | 164 | 96
kolor | seagreen | 2E8B57 | 46 | 139 | 87
kolor | seashell | FFF5EE | 255 | 245 | 238
kolor | sienna | A0522D | 160 | 82 | 45
kolor | silver | C0C0C0 | 192 | 192 | 192
kolor | skyblue | 87CEEB | 135 | 206 | 235
kolor | slateblue | 6A5ACD | 205 | 90 | 205
kolor | slategray | 708090 | 112 | 128 | 144
kolor | snow | FFFAFA | 255 | 250 | 250
kolor | springgreen | 00FF7F | 0 | 255 | 127
kolor | steelblue | 4682B4 | 70 | 130 | 180
kolor | tan | D2B48C | 210 | 180 | 140
kolor | teal | 008080 | 0 | 128 | 128
kolor | thistle | D8BFD8 | 216 | 191 | 216
kolor | tomato | FF6347 | 255 | 99 | 71
kolor | turquoise | 40E0D0 | 64 | 224 | 208
kolor | violet | EE82EE | 238 | 130 | 238
kolor | wheat | F5DEB3 | 245 | 222 | 179
kolor | white | FFFFFF | 255 | 255 | 255
kolor | whitesmoke | F5F5F5 | 245 | 245 | 245
kolor | yellow | FFFF00 | 255 | 255 | 0
kolor | yellowgreen | 9ACD32 | 154 | 205 | 50


Znaki specjalne

Znaki specjalne są to znaki używane w tekstowych literałach, jako te, których nie można wstawić normalnymi drogami, np.: cudzysłowiu, ponieważ spowodowałoby to niepożądane efekty (cudzysłów odpowiada za wyznaczanie początku i końca literału tekstowego).

Oto lista dostępnych znaków specjalnych:

Znaki specjalne
nazwa | znaczenie
\b | backspace
\f | form feed
\n | nowa linia
\r | powrót na początek linii
\t | tabulacja
\\ | backslash
\" | cudzysłów
\' | apostrof
\< | <
\> | >


Operatory

Operator jest to znak lub grupa znaków do wykonywania operacji na zmiennej lub zmiennych. Dokładniejsze informakcje uzyskasz w 14 lekcji kursu. W poniższej tabelce zamieszczam wykaz wszystkich operatorów ze specyfikacji JavaScript 5.5, jednak, wiem z doświadczenia, że większości z nich nigdy nie użyjecie, ale a nóż-widelec ktoś będzie potrzebował:

aRYTMETYCZNE

operator

opis

wersja JS

przykład

wynik

+

1. dodawanie dwóch liczb
2. łączenie dwóch łańcuchów tekstowych
3. łączenie łańcucha i wartości liczbowej

1

x = 3 + 5.2
s = "Java" + "Script"
t = 5 + "KB"

8.2
"JavaScript"
"5KB"

-

1. odejmuje dwie liczby od siebie
2. zmienia wartość liczbową na przeciwną
3. łańcuchy tekstowe są zmieniane na liczby (jeśli możliwe) i odejmowane
4. obiekty są zamieniane na łańcuchy, a te na liczby i odejmowane
5. wartości typu boolean są zamieniane na liczby (true=1, false=0)
6. jeśli zmienna jest undefined wystąpi błąd

1

x = 0.99 - 2
x = - x
x = "5" - "3"
x = document - window
x = false - true

x = -1.01
1.01
2
błąd
-1

*

mnoży dwie liczby przez siebie

1

x = 1.2 * 3

3.6

/

dzieli dwie liczby przez siebie

1

x = 20 / 4

5

%

zwraca resztę z dzielenia dwóch zaokrąglonych liczb

1

x = 22.8 % 4

3

bITOWE

<<

przesunięcie bitowe o zadaną pozycję w lewo

1

x = 23 << 2

92, czyli 01011100,
bo 23 bitowo
to 00010111

>>

przesunięcie bitowe o zadaną pozycję w prawo z uwzglądnieniem znaku

1

x = -14 << 2

-4, czyli 11111100,
bo -14 bitowo
to 11110010

>>>

przesunięcie bitowe o zadaną pozycję w prawo bez uwzglądnienia znaku

1

x = -14 << 2

1073741820, czyli
00111111 11111111
11111111 11111100,
bo -14 bitowo to
11111111 11111111
11111111 11110010

|

bitowe "lub"; jeżeli na danej pozycji binarnej w przynajmniej jednym wyrażeniu występuje 1 to wynikiem jest 1

1

x = 13 | 6

15, bo
13 : 1101
6 : 0110
15 : 1111

&

bitowe "i"; jeżeli na danej pozycji binarnej w obu na raz wyrażeniach występuje 1 to wynikiem jest 1

1

x = 13 & 6

4, bo
13 : 1101
6 : 0110
4 : 0100

~

bitowe "nie"; na wszystkich pozycjach binarnych 0 są zamieniane na 1 i odwrotnie

1

x = ~ 13

2, bo
13 : 1101
2 : 0010

^

bitowe "albo"; jeżeli na danej pozycji binarnej w dokładnie jednym wyrażeniu występuje 1 to wynikiem jest 1

1

x = 13 ^ 6

11, bo
13 : 1101
6 : 0110
11 : 1011

lOGICZNE (pORÓWNANIA)

>

większe niż

1

x = (13 > 6)

true

<

mniejsze niż

1

x = (13 < 6)

false

>=

większe lub równe niż

1

x = (13 >= 13)

true

<=

mniejsze lub równe niż

1

x = (13 <= 6)

false

==

równe co do wartości

1

x = (13 == 6)

false

===

równe co do wartości i zgodne co do typu

1

s = 13;
t = "13";
x = (s === t)

false

!=

różny od

1

x = (13 != 6)

true

!==

różne co do wartości i zgodne co do typu

1

s = "6";
t = "13";
x = (s !== t)

true

!

logiczne przeczenie

1

x = !(13 == 13)

false

&&

logiczne "i"

1

x = ((13 == 13) && (13 != 6))

true

||

logiczne "lub"

1

x = ((13 != 13) || (13 != 6))

true

pRZYPISANIA

=

zwykłe przypisanie

1

x = 13

13

+=

przypisanie danej zmiennej jej wartość zwiększoną o drugą liczbę

1

x = 13;
x += 6

19

-=

przypisanie danej zmiennej jej wartość zmniejszoną o drugą liczbę

1

x = 13;
x -= 6

7

*=

przypisanie danej zmiennej jej wartość pomnożoną drugą liczbę

1

x = 13;
x *= 6

78

/=

przypisanie danej zmiennej jej wartość podzieloną przez drugą liczbę

1

x = 12;
x /= 6

2

%=

przypisanie danej zmiennej reszty z dzielenia jej wartośći przez drugą liczbę

1

x = 13;
x %= 6

1

&=

przypisanie danej zmiennej jej wartość porównaną bitowo ("i") z drugą liczbą (wartością boolean)

1

x = true;
x &= true

true

|=

przypisanie danej zmiennej jej wartość porównaną bitowo ("lub") z drugą liczbą (wartością boolean)

1

x = false;
x |= true

true

^=

przypisanie danej zmiennej jej wartość porównaną bitowo ("albo") z drugą liczbą (wartością boolean)

1

x = true;
x ^= true

false

<<=

przypisanie danej zmiennej jej wartość przesuniętą bitowo w lewo

1

patrz operatory bitowe

patrz operatory bitowe

>>=

przypisanie danej zmiennej jej wartość przesuniętą bitowo w prawo

1

patrz operatory bitowe

patrz operatory bitowe

>>>=

przypisanie danej zmiennej jej wartość przesuniętą bitowo w prawo bez uwzględnienia znaku

1

patrz operatory bitowe

patrz operatory bitowe

iNNE

++

inkrementacja (zwiększenie) zmiennej o jeden
1. preinkrementacja - następuje zwiększenie wartości zanim zmienna zostanie użyta
2. postinkrementacja - następuje zwiększenie wartości po wykorzystaniu zmiennej

1

x = 0; k = 0;
x = k++;
x = ++k;

x = 0; k = 0;
x = 0; k = 1;
x = 2; k = 2;

--

dekrementacja (zmniejszanie) zmiennej o jeden
1. predekrementacja - następuje zmniejszenie wartości zanim zmienna zostanie użyta
2. postdekrementacja - następuje zmniejszenie wartości po wykorzystaniu zmiennej

1

x = 10; k = 10;
x = k--;
x = --k;

x = 10; k = 10;
x = 10; k = 9;
x = 8; k = 8;

() ? :

po sprawdzeniu warunku w nawiasie jeżeli jest on prawdziwy to zwracana jest wartość pierwsza, w przeciwnym wypadku - wartość druga

1

x = (13 < 6) ? "prawda" : "nieprawda"

"nieprawda"

,

pozwala na wykonanie kilku instrukcji sekwencyjnie

1

for (i=0; i<100; i++, j++)
{ k = i + j; }

w każdym przejściu pętli k jest większe o 2

void

zapobiega zwróceniu wartości przez wyrażenie

2

x = void (3 + 5)

undefined

new

tworzy nowy obiekt

1

tab = new Array()

delete

usuwa własność obiektu lub element z tablicy

3

x = delete samochód.pojemność_silnika

true

typeof

zwraca w postaci łańcucha znakowego typ zmiennej ("number", "string", "boolean", "object", "function" i "undefined")

1

x = !(3 != 5)

"boolean"

instanceof

zwraca w postaci boolean, czy dany obiekt jest instancją danej klasy

5

x = obiekt instanceof klasa

true lub false


Priorytet operatorów

Priorytet operatorów jest zbiorem zasad w JavaScript. Kontrolują one porządek, w jakim operatory są interpretowane podczas obliczania wyrażenia. Operatory z wyższym priorytetem są wykonywane wcześniej niż operatory z niższym priorytetem. Na przykład mnożenie jest wykonywane przed dodawaniem.

x = 3 * (5 + 12 + 7)

W tym przypadku najwyższy priorytet z użytych operatorów mają nawiasy (), toteż najpierw wykonywane są działania w nawiasie, a tam najwyższy priorytet ma dodawanie +. Po wykonaniu działań w nawiasie wykonuje się mnożenie * i na końcu dopiero przypisanie = do zmiennej x. W rezultacie:

x= 3 * 24

..czyli:

x = 72

Więcej informacji o operatorach dowiesz się z lekcji 14 oraz z dodatku Operatory.

Kolejność
operatory | znaczenie
. [] () | dostęp do pola, elementu tablicy, wywołanie funkcji, grupowanie wyrażeń
++ -- - ~ ! delete new typeof void | jednoargumentowe operatory, zwracające typ danych, tworzenie obiektu, niezdefiniowane wartości
* / % | mnożenie, dzielenie, reszta z dzielenia
+ - + | dodawanie, odejmowanie, łączenie łańcuchów tekstowych
<< >> >>> | przesunięcia bitowe
< <= > => instanceof | mniejszy niż, mniejszy lub równy niż, większy niż, większy lub równy niż, instanceof
== != === !== | równość nierówność, ścisła równość, ścisła nierówność
& | bitowe i - koniunkcja
^ | bitowe albo - alternatywa wykluczająca
| | bitowe lub - alternatywa
&& | logiczne i - koniunkcja
|| | logiczne lub - alternatywa
?: | operator warunkowy
= OP= | przypisanie, przypisanie z operacją
, | wielokrotne obliczenie


Predefiniowane wartości kompilacji warunkowej

Predefiniowane wartości kompilacji warunkowej są używane podczas kompilacji warunkowej. Przyjmują one wartości logiczne true lub false.

Oto lista dostępnych wartości:

Predefiniowane wartości
nazwa | opis
@_win32 | prawdziwe, jeżeli uruchomione w środowisku 32-bitowego Windows'a
@_win16 | prawdziwe, jeżeli uruchomione w środowisku 16-bitowego Windows'a
@_mac | prawdziwe, jeżeli uruchomione w środowisku Apple Macintosh
@_alpha | prawdziwe, jeżeli uruchomione na procesorze typu DEC Alpha
@_x86 | prawdziwe, jeżeli uruchomione na procesorze typu Intel
@_mc680x0 | prawdziwe, jeżeli uruchomione na procesorze typu Motorola 680x0
@_PowerPC | prawdziwe, jeżeli uruchomione na procesorze typu PowerPC
@_jscript | zawsze prawdziwe
@_jscript_build | zawiera wersję budulcową enginu JavaScript
@_jscript_version | zawiera wersję JavaScript w formacie [major.minor]


Formularz

Jeżeli chcesz, aby link do Twojej strony znalazł się na tej witrynie wypełnij poniższy formularz zgłoszeniowy:

imię i nazwisko:

adres strony:

twój e-mail:

kod HTML twojego bannera*:

Dzięki. Jeżeli uznam, że mogę umieścić odnośnik do twojej strony (sprawdzę, czy nie zawiera treści sprzecznych z prawem - głównie chodzi o pornografię), powiadomię Cię o tym mailem.

* jeżeli chcesz, abym umieścił na swojej stronie twój baner to jesteś zobowiązany umieścić kod mojego bannera na swojej stronie.


Strona domowa

Strona domowa kursu

Oprócz tego kursu JavaScript na stronie znajdziesz jeszcze informacje na temat programowania w Visual Basic, C++, Delphi, Turbo Pascal, HTML, DHTML i API. Oprócz tego są tu darmowe skrypty i algorytmy oraz obszerny dział download. W dziale linki znajdziesz zbiór użytecznych odnośników. Ze strony możesz wysłać SMS'a oraz zaprenumerować za darmo najlepsze polskie internetowe gazetki. Serdecznie zapraszam do wpisywania się do księgi gości.

Jeśli strona spodobała Ci się i chciałbyś umieścić link do mojej strony na swojej to dodaj do niej kod:

<P><center>
<A HREF = "http://www.coolerzone.prv.pl" TARGET = "_blank" >
<IMG SRC = "http://www.ids.uni.lodz.pl/loxxxi/coolerzone/images/banner.gif" BORDER = "0" ALT = "Strona CooLeR'a. Enter. Look. Enjoy." WIDTH="400" HEIGHT="50">
</A></center></P>

Co da następujący efekt [19,7 KB]:

Strona CooLeR'a. Enter. Look. Enjoy

lub w img src wpisz banner2.gif [9,35 KB], co będzie wyglądało tak:

Strona CooLeR'a. Enter. Look. Enjoy

... i jest jeszcze button.gif [12,8 KB], efekt jest taki:

Strona CooLeR'a. Enter. Look. Enjoy

Jeśli chcesz się wymienić bannerami (lub linkami), jestem chętny do współpracy. Po prostu wypełnij krótki formularz.