Spis Treści

Spis Treści              1

Rozdział 1.
Podstawy              3

Czym jest JavaScript?              3

JavaScript a Java              3

Co nam będzie potrzebne?              4

Rozdział 2.
Pierwsze skrypty              5

Znacznik <SCRIPT>              5

Instrukcja document.write              5

Komentarze              7

Komentarz HTML              7

Komentarz typu //              8

Komentarz blokowy              8

Znacznik <NOSCRIPT>              8

Formatowanie tekstu              9

Okno dialogowe              11

Rozdział 3.
Elementy języka JavaScript              13

Typy danych JavaScript              13

Typ liczbowy              13

Wartości logiczne              14

Łańcuchy znaków              14

Wartość NULL              14

Zmienne              14

Wprowadzanie danych              16

Instrukcje warunkowe              17

Operacje na zmiennych              19

Operacje arytmetyczne              19

Operacje na bitach              21

Operacje przypisania              21

Operacje logiczne i porównania              21

Operacje na łańcuchach znaków              22

Instrukcja przetwarzania warunkowego              23

Pętle              27

Pętla for              27

Pętla while              30

Rozdział 4.
Obiekty i funkcje              31

Funkcje              31

Rekurencja              32

Obiekty              35

Łańcuchy znaków (obiekt string)              37

Obiekt Math              40

Obiekt Date              42

Obiekt document              44

Obiekt window              47

Rozdział 5.
Zdarzenia i formularze              50

Zdarzenia onLoad i onUnload              50

Zdarzenia związane z myszą              52

Formularze              54

Elementy formularzy              59

Element button              59

Element checkbox              60

Element hidden              61

Element radio               62

Element reset              63

Element select              64

Element text              65

Element textarea              67

Wykorzystanie formularzy i zdarzeń              68

Rozdział 6.
Okna, ramki i ciasteczka              73

Okna              73

Ramki              77

Ciasteczka, czyli cookies              79

Rozdział 1.
Podstawy

Czym jest JavaScript?

JavaScript tak naprawdę narodził się w firmie Netscape jako LiveScript, język skryptowy rozszerzający standardowy HTML m.in. o możliwość interakcji z użytkownikiem przeglądającym stronę. Nieco później doszło do porozumienia między firmami Netscape i Sun Microsystems, w wyniku którego pod koniec 1995 roku światło dzienne ujrzał JavaScript. Język ten umożliwia tworzenie zagnieżdżonych bezpośrednio w kodzie HTML krótkich programów, które potrafią rozpoznać i odpowiednio zareagować na zdarzenia powodowane przez użytkownika. Zdarzenia te to np. kliknięcie myszą, wypełnianie formularza, czy nawigowanie między stronami. Przykładowo, można stworzyć skrypt, który będzie sprawdzał poprawność danych wprowadzonych przez użytkownika do formularza (np. czy wprowadzając jakąś datę, nie przekroczyliśmy dopuszczalnej liczby dni w danym miesiącu) i który będzie informował o ewentualnym błędzie. Sprawdzenie takie odbywać się będzie na komputerze przeglądającego stronę, nie nastąpi więc konieczność dodatkowej transmisji danych w sieci. Sprawdzaniem danych nie będzie musiał też zajmować się serwer.

JavaScript a Java

JavaScript, jak sama nazwa wskazuje, ma sporo wspólnego z językiem programowania Java, opracowanym w firmie Sun Microsystems. Niemniej nie należy tych dwóch języków mylić. Przede wszystkim zostały one stworzone do zupełnie różnych celów. Java to wywodzący się m.in. z C++ w pełni obiektowy język programowania, za pomocą którego można tworzyć skomplikowane aplikacje niezależne od platformy sprzętowej. JavaScript jest interpretowanym językiem skryptowym, służącym do tworzenia niewielkich programów rozszerzających możliwości HTML-u w zakresie opisu stron WWW. Krótkie zestawienie najważniejszych cech Javy i JavaScript znajduje się w tabeli 1.1.

Tabela 1.1. Podstawowe różnice pomiędzy językami Java a JavaScript

Co nam będzie potrzebne?

Przede wszystkim dobre chęci. Oprócz tego żadne specjalne narzędzia nie będą przydatne. Musimy oczywiście mieć zainstalowaną przeglądarkę WWW. Najlepiej Microsoft Internet Explorer lub Netscape Navigator. Nie muszą to być najnowsze wersje, niemniej jednak nie niższe niż 3.0.

Do pisania samego kodu potrzebny będzie dowolny, najprostszy edytor tekstowy np. systemowy Notatnik. Będzie to nasz warsztat pracy.

Potrzebna będzie też przynajmniej podstawowa znajomość HTML-u, nie jest natomiast konieczna znajomość innych języków programowania.

Rozdział 2.
Pierwsze skrypty

Na początku zajmijmy się klasycznym przykładem, od którego zaczyna się większość kursów programowania. Postarajmy się wyświetlić na ekranie dowolny napis np. Jaki miły mamy dzień!. Aby tego dokonać, wpierw musimy dowiedzieć się, w jaki sposób umieszczać skrypty JavaScript w kodzie HTML oraz jaka instrukcja JavaScript pozwala pisać na ekranie.

Znacznik <SCRIPT>

Kod JavaScript musi być umieszczony pomiędzy znacznikami HTML <SCRIPT>
i </SCRIPT>. Znaczniki te można umieszczać w dowolnym miejscu dokumentu, jednak przyjmuje się, że jeżeli jest to tylko możliwe, należy umieścić je na początku pliku HTML przed znacznikiem <BODY>.

Znacznik ten powinien zawierać parametr LANGUAGE, który może przyjmować dwie wartości: LiveScript lub JavaScript. Wartość LiveScript jest pozostałością po wczesnych wersjach języka i służy zachowaniu kompatybilności. Powinniśmy użyć wartości JavaScript.

Ćwiczenie 2.1. 

Umieść w standardowym kodzie HTML znacznik <SCRIPT>.

<HTML>

<HEAD>

</HEAD>

<SCRIPT language = "JavaScript">

</SCRIPT>

<BODY>

</BODY>

</HTML>

Na listingu znajduje się poprawny kod HTML z zawartym znacznikiem <SCRIPT>. Jednak po wczytaniu tego pliku do przeglądarki otrzymamy pustą stronę. Brakuje nam instrukcji pozwalającej wyświetlać tekst.

Instrukcja document.write

Instrukcja document.write() pozwala na wyprowadzenie tekstu na ekran przeglądarki. Tekst, który chcemy wyświetlić, należy ująć w nawiasy i cudzysłowy i podać zaraz za document.write() np.

document.write ("Jaki miły mamy dzień!")

Ćwiczenie 2.2. 

Napisz skrypt wyświetlający tekst „Jaki miły mamy dzień!” na ekranie przeglądarki.

<HTML>

<HEAD>

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

</HEAD>

<SCRIPT language = "JavaScript">

document.write ("Jaki miły mamy dzień!")

</SCRIPT>

<BODY>

</BODY>

</HTML>

Tak przygotowany kod spowoduje, że na ekranie pojawi się pożądany napis (rysunek 2.1). Warto zwrócić uwagę, że w celu poprawnej interpretacji polskich liter przez przeglądarkę dodaliśmy w sekcji HEAD znacznik <META http-equiv="Content-Type" content="text/ html; charset=iso-8859-2">

Przeanalizujmy nieco dokładniej fragment kodu odpowiedzialny za wyświetlanie tekstu na ekranie. Wszystkim, którzy mieli już wcześniej do czynienia z językiem C bądź C++, składnia wydaje się z pewnością znajoma:

document.write ("Jaki miły mamy dzień")

document to obiekt, który reprezentuje aktualną stronę. write to tzw. metoda, czyli pewna funkcja działająca na obiekcie document i, w tym przypadku, wyświetlająca na ekranie tekst. Tekst ten podajemy jako argument w nawiasach. Ogólnie można zapisać:

obiekt.metoda (argumenty metody)

Taki ciąg jest instrukcją i powinien zostać zakończony średnikiem. W JavaScript nie jest to jednak obligatoryjne, chyba że chcemy zapisać kilka instrukcji w jednej linii np.:

document.writeln (”Witamy”);document.write (”na naszej stronie”);

Wymieniona tutaj, nowa funkcja writeln() działa tak samo jak write(), z tym że na końcu wyświetlanego ciągu znaków dodaje znak przejścia do nowego wiersza. Niestety, nie zobaczymy tego efektu, jeżeli całość nie znajdzie się w bloku tekstu preformatowanego, tzn. pomiędzy znacznikami <PRE> i </PRE>.

Ćwiczenie 2.3. 

Użyj funkcji write() i writeln() do wyświetlenia tekstu w dwóch wierszach.

<HTML>

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

<HEAD>

<PRE>

<SCRIPT>

document.writeln ("Witamy");document.write ("na naszej stronie");

</SCRIPT>

</PRE>

</HEAD>

<BODY>

</BODY>

</HTML>

Jak widać na rysunku 2.2, zadanie udało nam się wykonać znakomicie.