JavaScript.

Pierwsze starcie
Autor: Mariusz Owczarek
ISBN: 978-83-246-2076-0
Format: 158235, stron: 144

Rozpocznij swoj przygod z JavaScript!

Jak rozpocz przygod z JavaScript?
Jakie obiekty dostarcza JavaScript?
Jak reagowa na bdy?

Jzyk JavaScript, cho ma ju blisko dwanacie lat, swoimi moliwociami wci potrafi
zafascynowa niejednego projektanta stron internetowych. Ma ju za sob gorsze dni,
jednak aktualnie dziki technologii AJAX znw jest na topie. Wykorzystujc go
w odpowiedni sposb, sprawisz, e twj serwis WWW stanie si bardziej interaktywny
i dynamiczny.
Ta ksika pozwoli Ci wyj zwycisko z pierwszego starcia z tym jzykiem! Dowiesz
si z niej, jak uywa zmiennych, operatorw oraz funkcji. Nauczysz si reagowa na
zdarzenia oraz wykorzystywa okna dialogowe. Ponadto zdobdziesz wiedz na temat
pracy z obiektami DOM HTML oraz na temat sposobw reagowania na bdy
w skryptach. Autor przedstawia tu take dostpne obiekty JavaScript oraz pokazuje,
jak wykonywa operacje zwizane z czasem. Ogromnym atutem tej ksiki jest
przejrzysto i usystematyzowany sposb prezentowania informacji. Dziki temu
rwnie Ty szybko i bezbolenie poznasz JavaScript!
Typowe konstrukcje jzyka JavaScript
Wykorzystanie zmiennych
Zastosowanie funkcji
Reagowanie na zdarzenia
Sposoby uycia okien dialogowych
Wykonywanie operacji zwizanych z czasem
Dostpne obiekty JavaScript
Obiekty DOM HTML
Przygotowanie wasnych obiektw
Dziedziczenie w JavaScript
Obsuga bdw

Przejd bezbolenie pierwsze starcie z JavaScript!

Spis treci
Rozdzia 1. Pierwsze spotkanie z JavaScriptem ................................................... 7
Dlaczego JavaScript? ........................................................................................................ 7
Instalowanie debuggera Venkman w programie Firefox .................................................. 8
Skrypt w pliku HTML ...................................................................................................... 8
Skrypty umieszczone w oddzielnych plikach ................................................................. 10
Test ................................................................................................................................. 11

Rozdzia 2. Zmienne i instrukcje ...................................................................... 13

Zmienne .......................................................................................................................... 13
Operatory ........................................................................................................................ 14
Typ tablicowy. Operator new ......................................................................................... 14
Instrukcje warunkowe ..................................................................................................... 17
Instrukcja if... else .................................................................................................... 17
Instrukcja switch ...................................................................................................... 18
Instrukcje ptli ................................................................................................................ 19
Ptla for .................................................................................................................... 19
Ptla while ................................................................................................................ 20
Ptla do... while ........................................................................................................ 20
Instrukcje break i continue ....................................................................................... 21
Podstawy obsugi debuggera Venkman .......................................................................... 22
Interfejs debuggera ................................................................................................... 22
Szukamy bdw w kodzie ....................................................................................... 23
Punkty przerwa ....................................................................................................... 24
Obserwatory ............................................................................................................. 25
Test ................................................................................................................................. 26

Rozdzia 3. Funkcje ......................................................................................... 27

Definiowanie funkcji ...................................................................................................... 27
Funkcje bezparametrowe ................................................................................................ 27
Funkcje z parametrami ................................................................................................... 28
Tablica i funkcja jako parametry .............................................................................. 30
Funkcje anonimowe ........................................................................................................ 31
Funkcje JavaScriptu a ramki frame ................................................................................ 32
Debugger Venkman profiler ...................................................................................... 34
Test ................................................................................................................................. 35

JavaScript. Pierwsze starcie

Rozdzia 4. Zdarzenia ....................................................................................... 37

Kiedy co si zdarza? ..................................................................................................... 37
Zmiany standardw obsugi zdarze w JavaScripcie ...................................................... 37
Sposb pierwszy, najstarszy ..................................................................................... 38
Sposb drugi, standardowy ................................................................................... 38
Sposb trzeci nowy standard ............................................................................... 39
Wicej o zdarzeniach myszy .......................................................................................... 41
Zdarzenie jako obiekt ..................................................................................................... 43
Zdarzenia klawiatury ...................................................................................................... 46
Test ................................................................................................................................. 47

Rozdzia 5. Okna dialogowe ............................................................................. 49

Rodzaje okien dialogowych w JavaScripcie ................................................................... 49
Okno alert ....................................................................................................................... 49
Okno confirm ................................................................................................................. 50
Okno prompt ................................................................................................................... 51
Funkcja showModalDialog() .......................................................................................... 52
Funkcja showModelessDialog() ..................................................................................... 54
Okna tworzone funkcj open() ....................................................................................... 55
Test ................................................................................................................................. 57

Rozdzia 6. Operacje zwizane z czasem ........................................................... 59

Data i czas obiekt Date .............................................................................................. 59
Obliczanie dnia tygodnia .......................................................................................... 60
Kalendarz z tabelki ................................................................................................... 62
Timer w JavaScripcie ..................................................................................................... 64
Test ................................................................................................................................. 66

Rozdzia 7. Przegld obiektw JavaScriptu ....................................................... 67

Obiekt Math, czyli dziaania matematyczne ............................................................... 67
Obiekt String, czyli manipulacje tekstem ....................................................................... 68
Weryfikacja poprawnoci wypenienia formularzy .................................................. 69
Wyraenia regularne ................................................................................................ 71
Obiekt Boolean, czyli prawda i fasz .............................................................................. 73
Obiekt Screen, czyli ekran .............................................................................................. 73
Pozycjonowanie wywietlanych okien ..................................................................... 74
Obiekt history, czyli gdzie ju bye ............................................................................... 75
Nawigacja po historii przegldarki z poziomu strony Web ...................................... 75
Obiekt location, czyli gdzie jeste teraz ............................................................................. 76
Okresowe odwieanie strony Web z dynamiczn zawartoci ............................... 77
Test ................................................................................................................................. 78

Rozdzia 8. Obiekty DOM HTML w skryptach .................................................... 79

Koncepcja DOM HTML ................................................................................................ 79
Obiekt Window .............................................................................................................. 80
Obiekt document ............................................................................................................ 83
Proste menu .............................................................................................................. 84
Operacje na znacznikach kontekstu (ciasteczkach) .................................................. 86
Obiekt Navigator ............................................................................................................ 87
Sprawdzanie wtyczek zainstalowanych w przegldarce ........................................... 87
Kontrolki formularzy na stronie Web ............................................................................. 89
Kontrolki tworzone za pomoc znacznika <input> .................................................. 90
Lista rozwijalna <select> .......................................................................................... 93
Kilka zda o wysyaniu formularza .......................................................................... 94
Test ................................................................................................................................. 95

Spis treci

Rozdzia 9. Praca z dokumentami DOM HTML i XML ......................................... 97

Drzewo obiektw ............................................................................................................ 97
Funkcje i waciwoci obiektu document do zarzdzania elementami ........................... 97
Dodawanie elementw do dokumentu ...................................................................... 99
Zmiana parametrw elementw ............................................................................. 100
Usuwanie elementw z drzewa .............................................................................. 102
Budowanie tabeli .................................................................................................... 103
Import danych z dokumentw XML ............................................................................ 106
Wczytywanie dokumentw XML w Firefoksie ...................................................... 106
Wczytywanie dokumentw XML w Internet Explorerze ........................................... 110
Wczytywanie uniwersalne dla IE i FF .................................................................... 111
Test ............................................................................................................................... 111

Rozdzia 10. Wasne obiekty JavaScriptu ........................................................ 113

Funkcje jako obiekty .................................................................................................... 113
Waciwoci (pola) obiektu sowo kluczowe this .............................................. 113
Metody obiektu ...................................................................................................... 115
Pola i metody prywatne .......................................................................................... 116
Dodawanie metod do istniejcych obiektw waciwo prototype ........................ 117
Dziedziczenie w JavaScripcie ....................................................................................... 118
Dziedziczenie przez funkcje ................................................................................... 118
Dziedziczenie przez prototypy ............................................................................... 119
Test ............................................................................................................................... 120

Rozdzia 11. Obsuga bdw w skryptach ........................................................ 121

Wyjtki ......................................................................................................................... 121
Prosta obsuga wyjtkw .............................................................................................. 121
Sami wyrzucamy wyjtki instrukcja throw .............................................................. 122
Wasne typy wyjtkw ................................................................................................. 123
Test ............................................................................................................................... 124

Rozdzia 12. Podstawy technologii AJAX .......................................................... 125

AJAX a tradycyjny model stron Web ........................................................................... 125
Obiekt XMLHttpRequest ............................................................................................... 125
Pobieranie danych za pomoc XMLHttpRequest metod GET ............................. 126
Komunikacja ze skryptem PHP metod GET ......................................................... 128
Komunikacja ze skryptem PHP metod POST ....................................................... 129
Test ............................................................................................................................... 130

Odpowiedzi do testw .................................................................. 133

Skorowidz .................................................................................... 135

Rozdzia 9.

Praca z dokumentami
DOM HTML i XML
Drzewo obiektw
Jak ju wspomniaem w poprzednim rozdziale, specyfikacja DOM pozwala na traktowanie strony Web jako zbioru elementw. Elementy tworz drzewo, podobnie jak pliki i foldery na dysku. Zamiast plikw i folderw mamy tu wzy (node) i elementy. W przypadku dokumentu HTML elementami s obiekty HTML. Zamiast tworzy je bezporednio
w dokumencie, mona utworzy je za pomoc skryptu, uzyskujc dynamiczn stron
Web. To wszystko moe by poczone z pobieraniem danych z dokumentw XML.

Funkcje i waciwoci obiektu

document do zarzdzania elementami
Elementy HTML s czci dokumentu, ktry jest reprezentowany przez obiekt document, dlatego obiekt ten zwiera funkcje do tworzenia elementw i wzw. Bdziemy
uywa dwch funkcji pokazanych w tabeli 9.1.
Tabela 9.1. Funkcje obiektu document do tworzenia elementw
Funkcja

Opis

createElement(nazwa)

Tworzy element, parametr nazwa to nazwa znacznika HTML podana

w cudzysowie, np. div, table, p itd.

createTextNode(tekst)

Tworzy wze tekstowy zawierajcy tekst tekst.

98

JavaScript. Pierwsze starcie

Element jest obiektem typu element i po utworzeniu nie jest zwizany do dokumentem, tzn. e nie jest umieszczony od razu w drzewie obiektw dokumentu. Jest
zmienn tak jak inne zmienne w JS. Aby ustawi go w drzewie lub zmieni jego parametry (na przykad wygld tabeli), trzeba uy funkcji bdcych czci elementu.
Funkcje obiektu element przedstawia tabela 9.2.
Tabela 9.2. Funkcje obiektu element
Nazwa

Opis

appendChild(element)

Dodaje element jako podrzdny do elementu, na ktrym wywoujemy t funkcj.

cloneNode(parametr)

Kopiuje istniejcy element lub wze. Funkcja zwraca kopie elementu, na

ktrym zostaa wywoana. Jeli parametr ma warto false, to kopiowany jest
tylko dany element, jeli tru to caa ga drzewa, do ktrego naley.

removeChild(element)

Usuwa element z drzewa. Jako parametr podajemy konkretny obiekt

element, ktry ma by usunity.

applyElement(element)

Dodaje element jako nadrzdny do elementu, na ktrym zostaa wywoana

ta funkcja.

setAttribute(nazwa
atrybutu, wartoci)

Ustawia waciwo elementu podan w parametrze nazwa atrybutu

na warto. Poniewa do formatowania zaleca si stosowanie stylw,
najczciej bdziemy uywa tej funkcji do przyporzdkowania
elementowi identyfikatora id, okrelonego w arkuszu stylw.

Bdziemy te wykorzystywa dwie wasnoci obiektu element, ktre su do sprawdzania elementw podrzdnych w stosunku do danego. Wasnoci te zawiera tabela 9.3.
Tabela 9.3. Wasnoci obiektu element
Wasno

Opis

firstChild

Obiekt, ktry zosta doczony do danego obiektu jako pierwszy obiekt

podrzdny.

childNodes[]

Tabela zawierajca wszystkie obiekty bezporednio podporzdkowane danemu.

nodeName

Nazwa wza.

nodeType

Typ wza elementu. Jest on identyfikowany liczb cakowit. Kilka

moliwych wartoci to:
1 wze prowadzi do innego elementu;
3 wze tekstowy;
8 wze komentarza, np. komentarz w dokumencie HTML;
9 wze prowadzi do innego dokumentu.

nodeValue

Warto wza, np. tekst w wle tekstowym.

Tych kilka funkcji wystarczy do tworzenia elementw na stronie Web. Czas na przykad. Stworzymy stron z paragrafem <p> i obiektem <div>, oczywicie tworzonymi
nie poprzez kod HTML, ale za pomoc naszych funkcji.

Rozdzia 9. Praca z dokumentami DOM HTML i XML

Dodawanie elementw do dokumentu

Przykad 9.1. Wstawianie podstawowych elementw do drzewa strony
1. Zaczynamy ju tradycyjnie od podstawowego pliku HTML.
2. Sekcj <body> wyposaymy w identyfikator, poniewa bdziemy si na niego
powoywa, dowizujc do sekcji <body> kolejne elementy HTML.
<body id = "body1">

3. W sekcji <body> napiszemy skrypt wyjani go linia po linii. Rozpoczynamy

jak zwykle:
<script type = "text/javascript">

Teraz za pomoc funkcji createElement() utworzymy paragraf. Jako parametr

funkcji podajemy rodzaj obiektu HTML bez znakw <>:
var paragraf = document.createElement("p");

Zmienna paragraf reprezentuje obiekt paragrafu. Tekst do paragrafu bdzie

w postaci wza tekstowego:
var tekst1 = document.createTextNode("Tekst w paragrafie");

Na razie te elementy nie s ze sob powizane. Aby wpisa tekst do paragrafu,

trzeba ustawi wze tekstowy jako element podrzdny w stosunku do paragrafu:
paragraf.appendChild(tekst1);

Pozostaje jeszcze dowizanie paragrafu do ciaa strony, musimy tu uy

znanej ju funkcji getElementById(), aby odwoa si do sekcji <body>:
document.getElementById("body1").appendChild(paragraf);

4. Paragraf ju gotowy, teraz zajmiemy si elementem <div>. Tworzymy go

analogicznie, podam od razu cay kod:

var div1 = document.createElement("div");
var tekst2 = document.createTextNode("Tekst we wntrzu div")
div1.appendChild(tekst2);
document.getElementById("body1").appendChild(div1);

5. Zapisz plik i otwrz go w przegldarce, otrzymasz tekst w paragrafie i tekst

w div jak na rysunku 9.1. Na razie moe nie wyglda to zbyt efektownie,
ale to dopiero pocztek moliwoci.
Rysunek 9.1.
Elementy utworzone
dynamicznie na stronie

99

100

JavaScript. Pierwsze starcie

Aby nada obiektom kolor i ksztat, mona uy funkcji setAttribute() bezporednio do

ustawienia tych parametrw. Nowoczeniej jednak jest zdefiniowa arkusz stylw,
a funkcji setAttribute() uy tylko do ustawienia parametru id, tak aby obiekt by rysowany z uyciem stylu z formularza. Jak to zrobi, pokazuje nastpny przykad.

Zmiana parametrw elementw

Przykad 9.2. Przyporzdkowywanie stylw
do obiektw funkcj setAttribute()
1. Zaczniemy z plikiem z poprzedniego przykadu.
2. Na pocztku sekcji nagwkowej zdefiniujemy arkusz stylw CSS z dwoma
stylami. Jeden, pstyl1, przeznaczony bdzie dla paragrafu, a drugi, divstyl1,

dla obiektu div.

<style>
#pstyl1 {
background-color: blue;
}
#divstyl1 {
float:left;color:black;background-color:yellow;width:20%;
}
</style>

3. W skrypcie w sekcji <body> na obiektach paragraf i div1 wywoujemy funkcje

setAttribute(). Za pomoc tej funkcji ustawiamy identyfikator id dla obiektw
na warto pstyl1 dla paragrafu i divstyl1 dla div. Spowoduje to uycie stylu

z arkusza dla tych elementw. Miejsce wywoania tej funkcji w zasadzie nie
ma znaczenia, ja umieciem j po dodaniu elementu do ciaa strony. I tak dla
paragrafu:
document.getElementById("body1").appendChild(paragraf); //ta linia istnieje
paragraf.setAttribute("id","pstyl1"); //tu zmieniamy parametr id

a dla obiektu div:

document.getElementById("body1").appendChild(div1); //ta linia istnieje
div1.setAttribute("id","divstyl1");//tu zmieniamy parametr id

4. I to ju wszystko, zapisz plik i otwrz go w przegldarce. Wynik jest

przedstawiony na rysunku 9.2.

Rysunek 9.2.
Elementy
z formatowaniem

Rozdzia 9. Praca z dokumentami DOM HTML i XML

101

Parametr id mona zmienia w czasie dziaania skryptu, a co za tym idzie mona

zmienia wygld elementu w bardzo prosty sposb. Pokae to nastpny przykad.

Przykad 9.3. Zmiana stylu elementu

1. Zaczniemy od pliku z poprzedniego przykadu.
2. Do arkusza stylw dodaj drugi styl dla paragrafu i obiektu div, aby byo w czym

wybiera. Oto cay uzupeniony arkusz:

<style>
#pstyl1 {
background-color: blue;
}
#pstyl2 {
background-color: green;
}
#divstyl1 {
float:left;color:black;background-color:yellow;width:20%;
}
#divstyl2 {
float:left;color:black;background-color:lightgreen;width:40%;
}
</style>

3. W dalszym cigu sekcji <head> trzeba napisa funkcj zmieniajc parametr

id elementw w zalenoci od ustawienia list rozwijalnych, ktre zaraz

umiecimy na stronie.
<script type="text/javascript">
function zmien(element1,element2)
{
var stylpara = new Array(5);
var styldiv = new Array(5);
stylpara[0] = "pstyl1"
stylpara[1] = "pstyl2"
styldiv[0] = "divstyl1"
styldiv[1] = "divstyl2"
element1.setAttribute("id",stylpara[document.getElementById("lista1").sele
ctedIndex])
element2.setAttribute("id",styldiv[document.getElementById("lista2").
selectedIndex])
}
</script>

Lista nazw stylw, czyli moliwych parametrw id dla odpowiednich elementw,

jest przechowywana w oddzielnych tabelach. Przy zmianie stylu powoujemy
si na indeks w tabeli, numer tego indeksu bdzie ustawiony na licie rozwijalnej.
4. W sekcji <body>, poza kodem skryptu, dodaj formularz z dwiema listami

rozwijalnymi i przyciskiem. Na listach bdziemy ustawia dany wygld

paragrafu i diva.
<form>
<select id="lista1">
<option value="Op1"> Styl 1</option>
<option value="Op2"> Styl 2</option>

102

JavaScript. Pierwsze starcie

</select>
<select id="lista2">
<option value="Op1"> Styl 1</option>
<option value="Op2"> Styl 2</option>
</select>
<input type = "button" id = "przycisk" value = "Zmie styl">
</form>

5. Na kocu skryptu w sekcji <body> umieszczamy obsug zdarzenia nacinicia

przycisku.
var odn = document.getElementById("przycisk");
if (odn.addEventListener) {odn.addEventListener("click",function()
{zmien(paragraf,div1);},true);}
else if (odn.attachEvent) {odn.attachEvent("onclick",function()
{zmien(paragraf,div1);});}

Po naciniciu przycisku bdzie wywoywana funkcja zmien(). Parametrami

tej funkcji s elementy strony, tu paragraf i div.
6. Zapisz plik i otwrz w przegldarce. Zmieniajc wybr na licie i klikajc

przycisk, zmieniasz styl elementw.

Usuwanie elementw z drzewa

Podobnie jak mona elementy doda, mona je take usun. Nie jest to cakowite
usunicie, ale przerwanie cznoci z drzewem. I tak na przykad odczenie wza
tekstowego od paragrafu spowoduje zniknicie tekstu. Zrbmy przykad.

Przykad 9.4. Odczanie elementw z drzewa

1. Zaczniemy od podstawowego dokumentu HTML z wiczenia 1.1.
2. W nagwku <head> umiecimy funkcj, ktra bdzie odczaa od drzewa

caego dokumentu element podany jako parametr.

<script>
function kasuj(element) {
document.getElementById("body1").removeChild(element);
}
</script>

3. Do sekcji <body> dokumentu dodajemy identyfikator id.

<body id="body1">

4. Na pocztku tej sekcji umiecimy formularz z jednym przyciskiem.

<form>
<input type = "button" id = "przycisk" value = "Skasuj">
</form>

5. Teraz czas na skrypt. We wntrzu skryptu najpierw tworzymy element div

i dodajemy do niego wze tekstowy.

<script type="text/javascript">var div1 = document.createElement("div");
var tekst2 = document.createTextNode("Tekst we wntrzu div")

Rozdzia 9. Praca z dokumentami DOM HTML i XML

103

div1.appendChild(tekst2);
document.getElementById("body1").appendChild(div1);

Nastpnie dodajemy obsug zdarzenia nacinicia przycisku i koczymy skrypt.

var odn=document.getElementById("przycisk");
if (odn.addEventListener) {odn.addEventListener("click",function()
{kasuj(div1);},true);}
else if (odn.attachEvent) {odn.attachEvent("onclick",function()
{kasuj(div1);});}
</script>

Nacinicie przycisku wyzwoli funkcj kasuj(), przy czym jako element

do skasowania podajemy utworzony div.
6. Zapisz plik i otwrz w przegldarce. Po naciniciu przycisku div zostanie

odczony od drzewa dokumentu i zniknie.

Budowanie tabeli
Czasem na stronie Web chcemy zaprezentowa dane w formie tabeli, przy czym tabela ta musi mie rn dugo i pobiera dane z zewntrznego rda, na przykad
dokumentu XML. Poka najpierw, jak zbudowa tak tabel, wykorzystujc znane
ju funkcje obiektu document, a w dalszym cigu jak zaimportowa dane z XML.
Tabel budujemy podobnie jak elementy strony pokazane w poprzednich przykadach, z tym e drzewo obiektw tabeli jest bardziej skomplikowane. Wemy na pocztek prost tabel 22 pola, pokazan w tabeli 9.4.
Tabela 9.4. Przykadowa tabela na stronie Web
Pole 1,1

Pole 2,1

Pole 1,2

Pole 2,2

Jak pewnie wiesz, tabele w HTML tworzymy za pomoc znacznika <table>. Tabela 9.1
zapisana w HTML w tradycyjny sposb bdzie miaa posta:
<table>
<tr>
<td>Pole 1,1</td><td> Pole 2,1 <td>
</tr>
<tr>
<td>Pole 1,2</td><td>Pole 2,2</td>
</tr>
</table>

My narysujemy t tabel na stronie, budujc jej drzewo. Wygld tego drzewa przedstawia rysunek 9.3. Jest ono, oczywicie, zbudowane ze znanych elementw HTML.
Takie wanie drzewo zbudujemy za pomoc poznanych funkcji, zrobimy to w nastpnym przykadzie. Tak skonstruowana tabela moe by dowolnie zmieniana podczas dziaania skryptu.

104

JavaScript. Pierwsze starcie

Rysunek 9.3.
Drzewo elementw
w tabeli 9.1

Przykad 9.5. Budowa tabeli

1. Rozpoczynamy jak zwykle od podstawowego pliku HTML.
2. Nadajemy identyfikator sekcji <body>, tak jak w poprzednich przykadach.
<body id = "body1">

3. Teraz czas na skrypt tworzcy tabel. Objani kolejne linie naley je

wpisywa w cigu skryptu. Zaczynamy standardowo:

<script type="text/javascript">

Nastpnie tworzymy zasadniczy element tabeli:

var tabela = document.createElement("TABLE");Oprcz tego potrzebny jest
element <tbody>, ktrego w tradycyjnej skadni zwykle nie wypisujemy jawnie,
ale tu musimy:
var tabbody=document.createElement("TBODY");

czymy element TABLE z TBODY zgodnie z rysunkiem 9.3:

4. tabela.appendChild(tabbody);S ju ramy, teraz pierwszy wiersz tabeli.
var wiersz1=document.createElement("TR");

I pierwsze pole w tym wierszu:

var pole11 = document.createElement("TD")

Napis w polu jest w postaci wza tekstowego:

var tekst11= document.createTextNode("Pole 1,1");

Wze tekstowy jest podrzdnym elementem pola, a pole doczamy

do pierwszego wiersza tabeli:
pole11.appendChild(tekst11);
wiersz1.appendChild(pole11);

Rozdzia 9. Praca z dokumentami DOM HTML i XML

105

W taki sam sposb tworzymy drugie pole i doczamy do pierwszego wiersza:

var pole21 = document.createElement("TD")
var tekst21= document.createTextNode("Pole 2,1");
pole21.appendChild(tekst21);
wiersz1.appendChild(pole21);

Cay za wiersz doczamy do tabeli:

tabbody.appendChild(wiersz1);

5. Drugi wiersz z polami tworzymy tak samo.

var wiersz2=document.createElement("TR");
var pole12 = document.createElement("TD")
var tekst12= document.createTextNode("Pole 1,2");
pole12.appendChild(tekst12);
wiersz2.appendChild(pole12);
var pole22 = document.createElement("TD")
var tekst22= document.createTextNode("Pole 2,2");
pole22.appendChild(tekst22);
wiersz2.appendChild(pole22);
tabbody.appendChild(wiersz2);

6. Na kocu ca tabel dodajemy do sekcji <body>.

document.getElementById("body1").appendChild(tabela;

7. Wszystko ju gotowe. Zapisz plik i otwrz go w przegldarce. Powiniene

otrzyma obraz jak na rysunku 9.4.

Rysunek 9.4.
Tabela stworzona
przez skrypt

Jak wida, tabela nie ma obramowania. Wykonamy je za pomoc arkusza stylw

CSS. Jest to bardzo proste, wystarczy przyporzdkowa styl border do wszystkich pl
<TD> oraz samego elementu <TABLE>. Czyli formatujemy je tak samo jak tabele zapisane
statycznie.

Przykad 9.6. Formatowanie tabeli

1. Zaczynamy od pliku z poprzedniego przykadu.
2. W sekcji <head> dopisujemy arkusz stylw, dodajcy ramk o szerokoci

jednego piksela.
<style>
table, td {

106

JavaScript. Pierwsze starcie

border: solid 1px;
}
</style>

3. Zapisz plik i otwrz w przegldarce. Efekt bdzie jak na rysunku 9.5.

Rysunek 9.5.
Tabela z prostym
formatowaniem

Na razie sens stosowania takich tabel moe wydawa si cokolwiek mglisty, poniewa stworzenie ich zajmuje o wiele wicej czasu ni tabel statycznych. Zalety tabel
dynamicznych ujawni si, kiedy bdziemy je tworzy z danych z zewntrznego rda,
na przykad dokumentu XML.

Import danych z dokumentw XML

Dokument XML jest sposobem na uporzdkowane przechowywanie danych. Drzewo
danych jest zapisane za pomoc znacznikw, podobnie jak dokument HTML. Za pomoc JavaScriptu mona pobra dane z dokumentw XML i wywietli praktycznie
w dowolnej postaci na stronie Web. Aby to zrobi, najpierw wczytujemy dokument
XML do pamici w postaci elementw i wzw DOM, a nastpnie wykonujemy operacje na tych wzach znanymi ju metodami. Niestety, sposb wczytania dokumentu
XML jest rny dla rnych przegldarek. Tutaj poka metod dla Firefoksa i Internet Explorera.

Wczytywanie dokumentw XML w Firefoksie

Wczytanie dokumentu ma dwa etapy. Najpierw tworzymy pusty obiekt dokument, a nastpnie do tego dokumentu wczytujemy plik z danymi w jzyku XML. Po wczytaniu
mona ju wywietli elementy na stronie Web.
Wczytany dokument XML bdzie, oczywicie, w drzewie gwnego dokumentu HTML,
czyli obiektu dokument. Utworzymy go za pomoc interfejsu implementation obiektu
document. Interfejs ten zawiera trzy funkcje, ktre zestawiono w tabeli 9.5.

Rozdzia 9. Praca z dokumentami DOM HTML i XML

107

Tabela 9.5. Funkcje interfejsu implementation obiektu document

Funkcja

Opis

createDocument(PrzestrzeNazw,
IdDokumentu, TypDokumentu)

Tworzy obiekt dokument w podanej przestrzeni nazw XHTML,

z podanym identyfikatorem IdDokumentu i o typie TypDokumentu.

hasFeature(NazwaModuu,
WersjaModuu)

Sprawdza, czy dana wersja DOM wspiera okrelony modu,

na przykad HTML 2.0.

createDocumentType(Nazwa,
IdentyfikatorPubliczny,
IdentyfikatorSystemowy)

Tworzy obiekt typu dokumentu. Obiekt moe by uyty jako

trzeci argument funkcji createDocument().

Do utworzenia pustego dokumentu posuymy si funkcj createDocument(), przy

czym jako argumenty podamy same wartoci null, poniewa nie zaley nam na razie
na typie dokumentu. Po utworzeniu wczytamy plik XML za pomoc funkcji load()
obiektu document. Funkcji tej jeszcze nie znasz, ale jej uycie jest bardzo proste, jedynym argumentem jest plik do wczytania. Przejdmy do przykadu, napiszemy skrypt
wywietlajcy dowolny plik XML w postaci tabeli na stronie Web.

Przykad 9.7. Wczytanie pliku XML wersja dla Firefoksa

1. Zaczynamy od standardowego dokumentu HTML. Potrzebny bdzie take

plik XML, z dowolnymi danymi, ja zrobiem opis trzech samochodw.

Poniszy listing wpisz do oddzielnego pliku tekstowego nazwanego auta.xml.
Plik moesz napisa w Notatniku.
<?xml version="1.0" encoding="ISO-8859-2"?>
<samochody>
<samochod>
<marka>Opel</marka>
<pojemnosc> 1.4 </pojemnosc>
<kolor> zielony </kolor>
<ile_osob> 5 </ile_osob>
</samochod>
<samochod>
<marka>Audi</marka>
<pojemnosc> 1.8 </pojemnosc>
<kolor> szary </kolor>
<ile_osob> 5 </ile_osob>
</samochod>
<samochod>
<marka>Mercedes</marka>
<pojemnosc> 2.0 </pojemnosc>
<kolor> biay </kolor>
<ile_osob> 5 </ile_osob>
</samochod>
</samochody>

2. Zasadnicza funkcja wpisujca zawarto pliku do tabeli bdzie w sekcji

nagwkowej <head>, ale najpierw zaczniemy od skryptu w sekcji <body>.
Po pierwsze, trzeba przypisa identyfikator sekcji <body>, poniewa bdzie

potrzebny do stworzenia tabeli.

<body id="body1">

108

JavaScript. Pierwsze starcie

3. Skrypt w tej sekcji bdzie wczytywa plik z dysku do pamici jako obiekty.
Najpierw tworzymy pusty obiekt document w drzewie gwnego obiektu
document, reprezentujcego stron Web. Teraz do tego nowego dokumentu
podczamy metod obsugi zdarzenia load, zachodzcego w momencie

wczytania treci dokumentu z pliku. W funkcji obsugi tego zdarzenia bdzie

tworzona tabela. W kocu wczytujemy plik auta.xml do wntrza dokumentu
za pomoc funkcji load().
<script type="text/javascript">
var dokumentxml = document.implementation.createDocument("","",null)
dokumentxml.addEventListener("load", documentLoaded, false);
dokumentxml.load("auta.xml");
</script>

4. Czas na funkcj w sekcji <head> rysujc tabel. W momencie wywoania tej

funkcji mamy ju wczytane dane z pliku XML do dodatkowego obiektu

document. Z obiektu dokument przepiszemy te dane do zwykej tablicy Array,
a nastpnie tablic t wywietlimy w tabeli HTML. Bd objania skrypt
w miar pisania, naley go umieci w sekcji <head> dokumentu HTML.
Zaczynamy skrypt, a nastpnie definiujemy funkcj documentLoaded().
<script type="text/javascript">
function documentLoaded() {
var dane = new Array();
dane = dokumentxml.getElementsByTagName("samochod");

5. Wszystkie elementy zbioru auta.xml s ju w tablicy dane[], przy czym jedno pole
tej tablicy zawiera dane zapisane midzy znacznikami <samochod> i </samochod>
w pliku XML. Struktur tablicy dane[] przedstawia rysunek 9.6. Teraz pozostaje
wywietli odpowiednie komrki z tablicy dane w tabeli HTML, skonstruowanej

identycznie jak w poprzednim przykadzie. Tym razem tabela bdzie miaa

dodatkowo wiersz nagwkowy. Wiersz taki zawiera si we wntrzu elementu
THEAD, penicego podobn funkcje jak TBODY dla pozostaych elementw tabeli.
var tabela=document.createElement("TABLE");
var tabhead=document.createElement("THEAD");
tabela.appendChild(tabhead);
var wierszng=document.createElement("TR");
for (var i=0;i<dane[0].childNodes.length;i++) {
if(dane[0].childNodes[i].nodeType==1) {
var poleng = document.createElement("TH");
var tekstng= document.createTextNode(dane[1].childNodes[i].nodeName);
poleng.appendChild(tekstng);
wierszng.appendChild(poleng);
}

}
tabhead.appendChild(wierszng);

Nie wszystkie wzy s wywietlane, tylko te, ktre prowadz do gazi wzw
tekstowych, tylko one reprezentuj elementy ograniczone znacznikami <marka>
</marka>, <kolor> </kolor> itp. Jak wida z rysunku 9.6, mamy w drzewie
dodatkowe puste wzy tekstowe przy gwnym pniu. Wzy te s dodawane
wszdzie midzy znacznikami, dlatego s te na przykad midzy znacznikiem
</marka> i <pojemnosc>. S one niepotrzebne, ale nie da si ich unikn.

Rozdzia 9. Praca z dokumentami DOM HTML i XML

109

Rysunek 9.6.
Struktura pola
tabeli dane[]

6. Gwn cze tabeli wywietlamy podobnie, z tym e interesuje nas wywietlanie

zawartoci wzw tekstowych, a nie nazw. Na kocu gotow tablic dodajemy

do sekcji <body>.
var tabbody=document.createElement("TBODY");
tabelaappendChild(tabbody);
for (var j=0;j<dane.length;j++) {
var wiersz=document.createElement("TR");
for (var i=0;i<dane[j].childNodes.length;i++) {
if(dane[j].childNodes[i].nodeType==1) {
var pole = document.createElement("TD");
var tekst= document.createTextNode(dane[j].childNodes[i].
firstChild.nodeValue);
pole.appendChild(tekst);
wiersz.appendChild(pole);}
}
tabbody.appendChild(wiersz);
}
document.getElementById("body1").appendChild(tabela);
}
</script>

7. Aby poprawi wygld tabeli, na pocztku sekcji <head> dodamy arkusz stylw.
<style>
table, td, th {
border: solid 1px;
}
</style>

8. Wszystko jest gotowe, zapisz plik i otwrz go w przegldarce Firefox.

Otrzymasz obraz jak na rysunku 9.7.

Skrypt z przykadu 9.7 jest uniwersalny, moe suy do prezentacji innych plikw XML.

110

JavaScript. Pierwsze starcie

Rysunek 9.7.
Wynik dziaania
skryptu z przykadu
9.6. Dokument XML
prezentowany
w postaci tabeli

Wczytywanie dokumentw XML w Internet Explorerze

Interfejs dokument.implementation nie dziaa w przegldarce Internet Explorer. Zamiast
tego obiekt reprezentujcy dokument XML w pamici bdzie w postaci kontrolki ActiveX. Powoamy j do ycia za pomoc znanej ju z rozdziau 8 funkcji ActiveXObject().
Przy tworzeniu dokumentu XML parametrem tej funkcji bdzie Microsoft.XMLDOM. W nastpnym kroku nie skorzystamy z obsugi zdarze, tylko wczytamy dokument w trybie
synchronicznym, to znaczy wykonanie skryptu zostanie zawieszone do czasu wczytania dokumentu. Po wczytaniu zostanie wywoana funkcja tworzca tabel, identyczna
z t dla Firefoksa. Oznacza to, e zamiany ogranicz si tylko do skryptu w sekcji
<body>.

Przykad 9.8. Wczytanie pliku XML

wersja dla Microsoft Internet Explorera
1. Otwrz plik z poprzedniego przykadu.
2. Usu zawarto skryptu w sekcji <body>. Dla IE skrypt bdzie wyglda

nastpujco:
<script type="text/javascript">
dokumentxml = new ActiveXObject("Microsoft.XMLDOM");
dokumentxml.async="false";
dokumentxml.load("auta.xml");
documentLoaded();
</script>

Wszystko w tym skrypcie jest zgodnie z tym, co napisaem w akapicie

poprzedzajcym przykad. Komentarza wymaga jedynie waciwo async.
Ustawienie tej waciwoci na warto false spowoduje prac w trybie
synchronicznym, czyli zawieszenie wykonywania skryptu podczas wczytywania
pliku za pomoc funkcji load().
3. Pozostae czci skryptu nie wymagaj zmiany. Zapisz plik i otwrz go

w Internet Explorerze. Otrzymasz tabel tak jak na rysunku 9.6.

Rozdzia 9. Praca z dokumentami DOM HTML i XML

111

Wczytywanie uniwersalne dla IE i FF

Skrypt uniwersalny napiszemy, stosujc instrukcje warunkowe wykonujce kod odpowiednio dla Firefoksa lub Microsoft Internet Expolera. Przegldark Firefox wykryjemy poprzez sprawdzenie funkcji addEventListener(), tak jak przy detekcji przegldarki, dziki ktrej mona wybra sposb obsugi zdarze. Internet Explorera
wykryjemy natomiast przez obecno funkcji ActiveXObject(). Oto przykad:

Przykad 9.9. Wczytanie pliku XML wersja uniwersalna

1. Otwrz plik z poprzedniego przykadu.
2. Rnica bdzie polegaa tylko na zmianie skryptu w sekcji <body>. Zgodnie z tym,

co napisaem wczeniej, bdzie mia on posta:

<script type="text/javascript">
if (window.ActiveXObject) { //IE
dokumentxml = new ActiveXObject("Microsoft.XMLDOM");
dokumentxml.async="false";
dokumentxml.load("auta.xml");
documentLoaded(); }
if (document.addEventListener) { //FF
var dokumentxml = document.implementation.createDocument("","",null)
dokumentxml.addEventListener("load",documentLoaded,false);
dokumentxml.load("auta.xml")
}
</script>

3. Zapisz plik, powinien dziaa zarwno w Firefoksie, jak i MS Internet Explorerze.

Test
1. Do tworzenia elementu (nie wza tekstowego) suy funkcja obiektu document:
a) makeElement(),
b) createElement(),
c) createTextNode().
2. Po utworzeniu elementu:
a) jest on od razu zwizany w gazi drzewa sekcji <body>;
b) jest on od razu zwizany w gazi drzewa sekcji <head>;
c) trzeba go umieci w drzewie za pomoc funkcji appendChild().
3. Aby ustawia wygld elementw utworzonych dynamicznie na stronie
a) mona skorzysta z funkcji setAttribute() do ustawienia danej wasnoci,

aczkolwiek jest to sposb przestarzay;

b) mona posuy si arkuszem stylu, a za pomoc funkcji setAttribute()

ustawi jedynie parametr id na nazw stylu z arkusza;

112

JavaScript. Pierwsze starcie

c) mona posuy si wycznie arkuszem stylu, przypisujc styl do danego

typu obiektu.
4. Dokumenty XML:
a) S nowym formatem arkusza kalkulacyjnego.
b) S sposobem na uporzdkowany zapis danych.
c) Zapisuje si je w postaci plikw tekstowych.
5. W MS Internet Explorerze dokument XML tworzymy:
a) za pomoc document.implementation.createDocument();
b) w ogle nie mona utworzy dokumentu XML;
c) za pomoc kontrolki ActiveX.