informatyka php i html tworzenie dynamicznych stron www jacek ross ebook

Rozpocznij naukÔ tworzenia serwisów WWW juķ dziĖ

Poznaj najpopularniejsze rozwiÀzania stosowane w sieci

DoýÀcz do grupy osób najczÔĖciej poszukiwanych na rynku pracy

Jacek Ross

ÔĖÂ

ý ķ

ÀÂ

ýÀ

Àķ Ô

ĵÂ

Àķ

À Â

PHP i HTML.
Tworzenie dynamicznych
stron WWW

Autor: Jacek Ross
ISBN: 978-83-246-2597-0
Format: 158u235, stron: 208

• Rozpocznij naukê tworzenia serwisów WWW ju¿ dziœ
• Poznaj najpopularniejsze rozwi¹zania stosowane w sieci
• Do³¹cz do grupy osób najczêœciej poszukiwanych na rynku pracy

W prasie codziennej i internecie pe³no jest og³oszeñ z ofertami pracy dla programistów.
Du¿a ich czêœæ jest skierowana do osób profesjonalnie zajmuj¹cych siê tworzeniem
i utrzymywaniem serwisów WWW. Nic dziwnego, bowiem technologie internetowe
prze¿ywaj¹ obecnie prawdziwy boom, coraz wiêcej ludzi ma dostêp do sieci i maj¹ oni
coraz wiêksze wymagania wobec tego, co w niej znajduj¹. Najbardziej popularnymi
narzêdziami u¿ywanymi do tworzenia serwisów WWW od d³u¿szego ju¿ czasu s¹ –
i pozostan¹ jeszcze bardzo d³ugo – jêzyki PHP i HTML. Standardem jest te¿ zastosowanie
jêzyka JavaScript, kaskadowych arkuszy stylów i technologii AJAX. Od czego jednak
nale¿y rozpocz¹æ naukê?

Jeœli chcia³byœ zacz¹æ projektowaæ atrakcyjne serwisy WWW i szybko do³¹czyæ do
grona najlepszych profesjonalistów w tej dziedzinie, siêgnij po ksi¹¿kê „PHP i HTML.
Tworzenie dynamicznych stron WWW”. Znajdziesz w niej przegl¹d najbardziej
popularnych technik i nowoczesnych narzêdzi, które pozwol¹ Ci odnaleŸæ siê
w skomplikowanym œwiecie technologii internetowych. Co wa¿niejsze, uda Ci siê to bez
koniecznoœci wertowania grubych anna³ów informatycznych i przekopywania siê przez
niezrozumia³e dla przeciêtnego cz³owieka specyfikacje techniczne. Ksi¹¿ka ta ma
szanse zast¹piæ kilka innych podrêczników poœwiêconych tworzeniu serwisów WWW,
a praktyczny sposób prezentacji wiedzy stanowi jeden z jej najwiêkszych atutów.
Lektura nie wymaga ukoñczenia wy¿szych studiów informatycznych, poniewa¿ zawarte
w dodatkach podstawy umo¿liwi¹ rozpoczêcie programowania nawet pocz¹tkuj¹cym
twórcom.

• Projektowanie serwisów WWW
• Korzystanie z jêzyków PHP, XML i HTML
• Mo¿liwoœci jêzyka JavaScript i technologii DHTML
• Podstawy technologii AJAX
• U¿ywanie kaskadowych arkuszy stylów
• Praktyczne zastosowania technologii internetowych

Siêgnij do kompetentnego Ÿród³a wiedzy o tworzeniu dynamicznych serwisów WWW!

Spis tre"ci

Rozdzia 1. Wst#p .............................................................................................. 7

Rozdzia 2. Przyk ad aplikacji $cz$cej ró%ne technologie .................................... 9

2.1. Wst%p ....................................................................................................................... 9
2.2. Opis aplikacji „Dodaj przepis” ................................................................................ 9
2.3. Wewn%trzna architektura aplikacji ......................................................................... 12
2.4. Opis najciekawszych fragmentów kodu &ród#owego ............................................. 13
Zako'czenie .................................................................................................................... 23
Zadania do samodzielnego wykonania ........................................................................... 23
Pytania kontrolne ............................................................................................................ 23

Rozdzia 3. Projektujemy serwis WWW ............................................................. 25

3.1. Wst%p ..................................................................................................................... 25
3.2. Z czego zbudowany jest serwis WWW? ................................................................ 25
3.3. Projektowanie aplikacji internetowych z biznesowego punktu widzenia ............... 27

3.3.1. Cele ............................................................................................................. 27
3.3.2. Porównanie z konkurencj$ .......................................................................... 28
3.3.3. Plan dzia#a' ................................................................................................ 29
3.3.4. Bud(et ......................................................................................................... 30
3.3.5. Metody kontrolowania post%pów ................................................................ 31

3.4. Modele aplikacji internetowych — paj%czyna HTML ........................................... 32
3.5. Modele aplikacji internetowych — HTML z arkuszem stylów ............................. 33
3.6. Modele aplikacji internetowych — klient-serwer .................................................. 34
3.7. Modele aplikacji internetowych — Dynamic HTML (DHTML) ........................... 35
3.8. Modele aplikacji internetowych — trójwarstwowa ............................................... 37
3.9. Modele aplikacji internetowych — trójwarstwowa — uj%cie drugie ..................... 39
3.10. Modele aplikacji internetowych — wielowarstwowa ............................................ 39
3.11. Etapy projektowania aplikacji — podej+cie klasyczne .......................................... 40
3.12. Etapy projektowania aplikacji — podej+cie zwinne .............................................. 41
3.13. Planowanie utrzymania aplikacji ........................................................................... 46
Zadania do samodzielnego wykonania ........................................................................... 47
Pytania kontrolne ............................................................................................................ 47

Rozdzia 4. Od PHP do HTML ........................................................................... 49

4.1. Pierwszy skrypt ...................................................................................................... 49
4.2. Przeplatanie PHP i HTML. Czego nie robi,, na co uwa(a,? ................................. 51
4.3. Struktura skryptów ................................................................................................. 59

PHP i HTML. Tworzenie dynamicznych stron WWW

4.4. U(ycie szablonów .................................................................................................. 62
4.5. Obiektowo+, w PHP — projektowanie obiektowe ................................................ 66
4.6. Obiektowo+, w PHP — praktyczne przyk#ady ...................................................... 72

4.6.1. Przyk#ad 1. Odwzorowanie modelu danych ................................................ 72
4.6.2. Przyk#ad 2. Odwzorowanie trójwarstwowo+ci ............................................ 74
4.6.3. Przyk#ad 3. Uniwersalne przetwarzanie danych ......................................... 77

4.7. Typy danych w PHP .............................................................................................. 77
4.8. Generowanie w PHP plików innych ni( HTML .................................................... 81
4.9. Bezpiecze'stwo aplikacji PHP ............................................................................... 84

4.9.1. Obs#uga danych z zewn$trz ........................................................................ 84
4.9.2. Przekazywanie danych mi%dzy skryptami .................................................. 86
4.9.3. Niebezpieczne konstrukcje j%zyka .............................................................. 87
4.9.4. Bezpiecze'stwo systemu plików ................................................................ 88
4.9.5. Cross-Site Scripting .................................................................................... 88
4.9.6. Wstrzykiwanie kodu SQL ........................................................................... 90
4.9.7. Wstrzykiwanie polece' systemowych (shell injection) .............................. 97
4.9.8. Cross-Site Request Forgery ........................................................................ 97
4.9.9. Przej%cie kontroli nad sesj$ (session fixation) ............................................ 99
4.9.10.Session poisoning ..................................................................................... 103
4.9.11.Ataki typu DOS i DDOS .......................................................................... 112

Zadania do samodzielnego wykonania ......................................................................... 114
Pytania kontrolne .......................................................................................................... 115

Rozdzia 5. JavaScript i DHTML ...................................................................... 119

5.1. Skrypty JavaScript, ich ulokowanie w dokumencie ............................................. 119
5.2. Modyfikowanie dokumentu HTML przez JavaScript .......................................... 121
5.3. Obs#uga zdarze' w JavaScript ............................................................................. 124
5.4. Podmiana fragmentów dokumentu ...................................................................... 126
5.5. Podmiana stylów CSS .......................................................................................... 127
5.6. Optymalizacja dzia#ania skryptów JavaScript ...................................................... 128
Zadania do samodzielnego wykonania ......................................................................... 129
Pytania kontrolne .......................................................................................................... 129

Rozdzia 6. Zastosowanie AJAX ..................................................................... 131

6.1. Czym jest technologia AJAX? ............................................................................. 131
6.2. Przyk#adowy program .......................................................................................... 132
6.3. Wi%cej o XMLHttpRequest ................................................................................. 133
Zadania do samodzielnego wykonania ......................................................................... 135
Pytania kontrolne .......................................................................................................... 135

Rozdzia 7. Od XML-a do HTML-a .................................................................... 137

7.1. Czym jest XML i po co go stosowa,? ................................................................. 137
7.2. Metody przetwarzania XML-a w aplikacjach sieciowych ................................... 139
7.3. XML w aplikacjach JavaScript ............................................................................ 144
Zadania do samodzielnego wykonania ......................................................................... 145
Pytania kontrolne .......................................................................................................... 146

Rozdzia 8. Kaskadowe arkusze stylów (CSS) ................................................. 149

8.1. Czym jest CSS i po co go stosowa,? ................................................................... 149
8.2. Sk#adnia CSS ....................................................................................................... 150
8.3. CSS a PHP ........................................................................................................... 152
8.4. CSS a JavaScript .................................................................................................. 152
Zadania do samodzielnego wykonania ......................................................................... 153
Pytania kontrolne .......................................................................................................... 154

Spis tre<ci

Dodatki — wprowadzenie ............................................................. 155

Dodatek A Podstawy HTML ........................................................................... 157

A.1. Co to jest HTML? Podstawowe wiadomo+ci ....................................................... 157
A.2. Grafika ................................................................................................................. 158
A.3. U(ycie atrybutów, znacznik A ............................................................................. 159
A.4. Tabelki ................................................................................................................. 161
A.5. Formularze ........................................................................................................... 164
A.6. Inne znaczniki HTML .......................................................................................... 166
A.7. Dokument HTML — pisa, r%cznie czy korzysta, z edytorów wizualnych? ........ 167
Zadania do samodzielnego wykonania ......................................................................... 167
Pytania kontrolne .......................................................................................................... 168

Dodatek B Podstawy programowania w j#zyku PHP ........................................ 171

B.1. Wst%p ................................................................................................................... 171
B.2. Podstawy .............................................................................................................. 171
B.3. Zmienne i operatory ............................................................................................. 172
B.4. Instrukcje warunkowe i p%tle ............................................................................... 174

B.4.1. Instrukcje warunkowe if-else .................................................................... 175
B.4.2. Instrukcje warunkowe switch ................................................................... 176
B.4.3. P%tle typu for ............................................................................................ 177
B.4.4. P%tle typu while ........................................................................................ 178

B.5. Funkcje ................................................................................................................ 179
B.6. Podstawy programowania obiektowego ............................................................... 181
Zadania do samodzielnego wykonania ......................................................................... 181
Pytania kontrolne .......................................................................................................... 181

Odpowiedzi do pyta? kontrolnych .................................................. 183

S owniczek poj#@ ......................................................................... 191

Skorowidz .................................................................................... 195

Rozdzia 5.

JavaScript i DHTML

5.1. Skrypty JavaScript,

ich ulokowanie w dokumencie

JavaScript to obecnie najpopularniejszy j%zyk u(ywany w aplikacjach sieciowych do
akcji po stronie klienta. Jest interpretowany przez wszystkie nowoczesne przegl$darki.
(Warto przy tym pami%ta,, (e nie identycznie — niestety pewne techniki dost%pne s$
tylko na niektórych przegl$darkach, a inne interpretowane inaczej; przeno+no+, jest
nadal przekle'stwem JS). Skrypty JS mog$ i w przypadku wi%kszych fragmentów
powinny by, umieszczane w osobnych plikach. W dokumencie HTML zawsze jednak
musi si% znale&, odwo#anie do skryptów, których chcesz u(y,. Podstawowy sposób,
w jaki mo(esz to uczyni,, polega na wstawieniu znacznika

SCRIPT

do znacznika

HEAD

Plik Simple.html:

Skrypt wewn$trz znaczników komentarza (

<!--

-->

) mo(na doda, w celu zgodno+ci ze

starymi przegl$darkami, które nie obs#ugiwa#y JavaScript i dzi%ki temu zabiegowi po
prostu zignoruj$ skrypt. Je+li zak#adasz, (e Twoja strona musi by, uruchamiana na
nowszej przegl$darce, to mo(esz opu+ci, ten fragment.

Je+li chcesz wstawi, skrypt z innego dokumentu, powiniene+ poda, atrybut

src

i wska-

za, nim lokalizacj% skryptu, a zawarto+, znacznika

SCRIPT

pozostawi, pust$:

120

PHP i HTML. Tworzenie dynamicznych stron WWW

Dawniej starsze wersje przegl$darek tolerowa#y skrypty wy#$cznie wewn$trz znacz-
nika

HEAD

. Ogranicza#o to mo(liwo+ci, nie pozwalaj$c na osi$gni%cie wielu interesuj$-

cych efektów. Obecnie mo(na umieszcza, je w zasadzie w dowolnym miejscu doku-
mentu. Nale(y przy tym pami%ta,, (e jest on przetwarzany sekwencyjnie, co oznacza,
(e kod znajduj$cy si% w górnej cz%+ci dokumentu zostanie zinterpretowany najpierw,
a ten znajduj$cy si% pod koniec dopiero w drugiej kolejno+ci. W szczególnym przypadku,
je+li strona nie za#aduje si% do ko'ca (z powodu b#%du lub anulowania #adowania przez
u(ytkownika), cz%+, skryptów mo(e nie zosta, wykonana.

Skrypty JS mog$ by, umieszczone tak(e w atrybutach okre+laj$cych zdarzenia zwi$zane
ze znacznikami. W dalszej cz%+ci rozdzia#u zostanie to opisane dok#adniej. Tutaj zapre-
zentuj%, jak wygl$da taki skrypt na przyk#adzie u(ytecznego zdarzenia

onLoad

znacz-

nika

BODY

. Kod JS umieszczony w obs#udze tego zdarzenia zostanie wykonany, gdy ca#a

strona b%dzie finalnie za#adowana.

Powy(szy przyk#ad pokazuje, jak za pomoc$ JavaScript wykona, przekierowanie na inn$
stron%. Po za#adowaniu strony do ko'ca wykonany zostanie kod

location.href=

'inna_strona.php

, który spowoduje, (e przegl$darka rozpocznie #adowanie adresu

inna_strona.php. (Wad$ takiego przekierowania jest to, (e u(ytkownik przez chwil%
b%dzie widzia# zawarto+, strony, wi%c je+li chce si% tego unikn$,, to przekierowanie
trzeba zrobi, inaczej).

Jak ju( napisano — ró(ne przegl$darki ró(nie interpretuj$ kod JavaScript, maj$ tak(e
inny zestaw klas opisuj$cy dokument. Pisz$c zaawansowane skrypty w tym j%zyku,
pr%dzej czy pó&niej na pewno zostaniesz zmuszony do wykrywania rodzaju przegl$-
darki i pisania dwóch wersji niektórych fragmentów kodu. G#ówna linia podzia#u bie-
gnie mi%dzy Internet Explorerem a Firefoksem. Cz%+, rzadszych przegl$darek mo(e
czasem wymaga, w#asnych dostosowa', najcz%+ciej jednak albo ich udzia# w rynku jest
tak znikomy, (e mo(na je pomin$,, albo zachowuj$ si% identycznie jak jedna z dwóch
wymienionych. (Przegl$darki oparte na j$drze Gecko b%d$ zachowywa, si% jak Fire-
fox, z kolei wiele programów ma wbudowane w#asne wewn%trzne przegl$darki, które
poprzez technologi% COM oparte s$ na zainstalowanym w systemie IE. Istniej$ tak(e
modyfikacje tej ostatniej, które pod wzgl%dem JS równie( zachowuj$ z ni$ zgodno+,).
Firefox odziedziczy# wiele cech po przegl$darce Netscape Navigator, mo(e si% jednak
zdarzy,, (e klient korzysta jeszcze z jakiej+ wyj$tkowo starej wersji tej przegl$darki
(lub bardzo starej wersji IE), powiniene+ zatem co najmniej sprawi,, (eby Twoja strona
wy+wietli#a jaki+ komunikat b#%du lub chocia( nie zrobi#a nic. Jak wi%c wykry,, z któr$
przegl$dark$ ma si% do czynienia? Nie ma sposobów idealnych — mo(na po prostu
zapyta, przegl$dark%, jak si% nazywa, ale ze wzgl%du na mnogo+, wersji, odmian
i modyfikacji trzeba by u(y, do+, skomplikowanego zestawu warunków i nie b%dzie to
ani skuteczne (a je+li nie przewidzimy jakiej+ przegl$darki lub powstan$ nowe?), ani
eleganckie. Lepiej jest sprawdzi,, jakie technologie udost%pnia bie($ca przegl$darka.
W ko'cu je+li potrafi zwróci, takie obiekty, jakie zwraca IE6, nie musi Ci% obchodzi,,
co to za program. Wa(ne, (e dzia#a jak IE6 itd. Zwykle podczas takiej weryfikacji spraw-
dza si%, jak w danej przegl$darce mo(na odwo#a, si% do obiektu reprezentuj$cego doku-
ment HTML albo zestaw jego znaczników. Oto przyk#adowy prosty kod.

Rozdzia 5. JavaScript i DHTML

121

Plik browser1.html:

<HTML>
<HEAD>
<SCRIPT type="text/javascript" language="javascript">
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
if(ie4)
alert ('Internet Explorer 4 lub nowszy');
else if(ns6)
alert('NN6 lub FireFox');
else
alert('Nieznana przegl7darka lub na tyle stara, 8e nie obs*u8y poprawnie naszego
skryptu');
</SCRIPT>
</HEAD>
</HTML>

Powy(szy kod opiera si% na tym, (e IE4 i nowsze udost%pniaj$ zawarto+, dokumentu
poprzez document.all, a Firefox i pochodne nie udost%pniaj$ takiej w#a+ciwo+ci i nale(y
w nich skorzysta, z innych metod obiektu

dokument

. Tote( wsz%dzie, gdzie wyst$pi

potrzeba odwo#ania si% do jednej z tych konstrukcji, trzeba b%dzie niestety wstawi,
instrukcj% warunkow$.

Jako ciekawostk% podaj% jeszcze inny, bardziej rozbudowany przyk#ad rozpoznawania
przegl$darek, który dokonuje dodatkowo rozró(nienia mi%dzy NN4 a NN6 i nowszymi:

<HTML>
<HEAD>
<SCRIPT type="text/javascript" language="javascript">
var nav4 = document.layers ? true : false;
var iex = document.all ? true : false;
var nav6 = document.getElementById && !document.all ? true : false;
var old = ( !( nav4 || iex || nav6 ));
</SCRIPT>
</HEAD>
</HTML>

5.2. Modyfikowanie dokumentu HTML

przez JavaScript

JavaScript umo(liwia bardzo daleko id$c$ kontrol% nad dokumentem HTML. W zasa-
dzie mo(na dokona, w nim niemal nieograniczonych zmian, ca#kowicie modyfikuj$c
jego zawarto+,. Mo(na podmienia, atrybuty, znaczniki czy fragmenty HTML-a. Oczy-
wi+cie fakt, (e techniki takie s$ dozwolone, nie oznacza, (e mo(na z tym przesadza,.
Nadmiar ingerencji w tre+, dokumentu mo(e spowodowa,, (e ca#o+, stanie si% komplet-
nie nieczytelna, a znalezienie w niej b#%du niemal niemo(liwe. Ka(dej techniki nale(y
wi%c u(ywa, z umiarem i wtedy, kiedy naprawd% jest potrzebna. Przyjrzyjmy im si%.

122

PHP i HTML. Tworzenie dynamicznych stron WWW

Najprostsz$ metod$ na zmodyfikowanie dokumentu HTML jest wygenerowanie jego
fragmentu w miejscu dzia#ania skryptu. Oto przyk#ad.

Plik ala1.html:

<HTML><BODY>
<P>Ala ma kota.</P>
<SCRIPT type="text/javascript">
document.writeln('<B>To nie jest naprawd! kot Ali.</B>');
</SCRIPT>
<P>Kot nazywa si! As.</P>
</BODY></HTML>

Powy(szy kod spowoduje wy+wietlenie si% w przegl$darce przyk#adowego tekstu
(rysunek 5.1).

Rysunek 5.1.
Zrzut ekranu:
wykonanie przyk!adu
ala1.html

Jak wida,, kod JavaScript wstawia fragment HTML-a. Dzia#anie przegl$darki polega
na tym, (e interpretuje on dokument normalnie do napotkania kodu JS, nast%pnie wyko-
nuje go, po czym interpretuje dalej, ale dokument zawiera ju( w tym miejscu dodat-
kowe znaczniki, które przegl$darka traktuje tak, jakby znajdowa#y si% w dokumencie
od samego pocz$tku.

Aby lepiej zrozumie,, jak przegl$darka przetwarza kod skryptów, przeanalizuj poni(szy,
nieco bardziej z#o(ony przyk#ad.

Plik ala2.html:

<HTML><BODY>
<P>Ala ma kota.</P>
<SCRIPT type="text/javascript">
function NapiszPrawd!()
{
document.writeln('<B>To nie jest naprawd! kot Ali.</B>');
}
</SCRIPT>
<P>Kot nazywa si! As.</P>
<SCRIPT>
NapiszPrawd!();
</SCRIPT>
<P>To bardzo m7dry kot.</P>
</BODY></HTML>

W przegl$darce zostanie wy+wietlony nast%puj$cy ci$g tekstów:

Rozdzia 5. JavaScript i DHTML

123

Rysunek 5.2.
Zrzut ekranu:
wykonanie przyk!adu
ala2.html

Nie jest bowiem wa(ne miejsce ulokowania kodu, ale miejsce jego faktycznego wyko-
nania. Kod funkcji zostaje wykonany w momencie, gdy przegl$darka interpretuje frag-
ment dokumentu pomi%dzy tekstem „Kot nazywa si% As” a tekstem „To bardzo m$dry
kot”, i w#a+nie w to miejsce wstawiany jest nowy fragment tekstu.

Korzystaj$c z obiektu

document

, masz dost%p do ca#ego dokumentu HTML, dzi%ki czemu

mo(esz dowolnie manipulowa, znacznikami. Nale(y pami%ta,, (e obiekt ten ma nieco
inn$ posta, i troch% inne metody oraz w#a+ciwo+ci w ró(nych przegl$darkach, dlatego
cz%sto trzeba b%dzie pisa, kod warunkowy, co zosta#o omówione w podrozdziale 5.1.
Do poszczególnych znaczników naj#atwiej b%dzie dosta, si% poprzez identyfikator. Aby
nada, go znacznikowi, nale(y doda, mu atrybut

i przypisa, do niego unikatow$ war-

to+,. Wówczas bardzo #atwo mo(na podmieni, wn%trze takiego znacznika.

Plik ala3.html:

<HTML><BODY>
<P>Ala ma kota.</P>
<P id="imi!_kota">Kot nazywa si! As.</P>
<SCRIPT type="text/javascript">
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
var imi! = '<B>Kot nazywa si! Mruczek.</B>';
if(ie4) document.all('imi!_kota').innerHTML = imi!;
else document.getElementById('imi!_kota').innerHTML = imi!;
</SCRIPT>
</BODY></HTML>

Tutaj istotne jest, (e znacznik z

id='imi!_kota'

znajduje si% wcze+niej ni( skrypt. Obiekt

document

jest bowiem budowany w trakcie interpretacji dokumentu HTML i je+li zamieni

si% te dwa fragmenty, to nie zostanie podmieniony. Przy tym fragmenty wstawione
ju( przez sam kod JS równie( s$ dost%pne, mo(na to zaobserwowa,, modyfikuj$c powy(-
szy przyk#ad.

Plik ala4.html:

<HTML><BODY>
<P>Ala ma kota.</P>
<P id="imi!_kota">Kot nazywa si! As.</P>
<SCRIPT type="text/javascript">
document.write('<p id="po_raz_drugi">ddd</p>');
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
var imi! = '<B>Kot nazywa si! Mruczek.</B>';
if(ie4) document.all('imi!_kota').innerHTML = imi!;

124

PHP i HTML. Tworzenie dynamicznych stron WWW

else document.getElementById('imi!_kota').innerHTML = imi!;
if(ie4) document.all('po_raz_drugi').innerHTML = imi!;
else document.getElementById('po_raz_drugi').innerHTML = imi!;
</SCRIPT>
</BODY></HTML>

5.3. Obs?uga zdarzeA w JavaScript

Podczas przegl$dania dokumentu HTML u(ytkownik mo(e zainicjowa, wiele czyn-
no+ci, takich jak klikni%cie we fragment dokumentu, przesuni%cie wska&nika myszy itp.
Istnieje mo(liwo+, implementacji funkcji w j%zyku JavaScript, która zostanie wyko-
nana, gdy takie zdarzenie wyst$pi. Poza inicjowanymi przez u(ytkownika istniej$ zda-
rzenia, które pojawiaj$ si% samoczynnie, s$ zwi$zane z wewn%trzn$ prac$ przegl$darki
lub zosta#y zaprogramowane.

Przyk#adem zdarzenia jest przedstawiony poni(ej kod.

Plik events1.html:

<HTML><HEAD>
<SCRIPT type="text/javascript">
function Funkcja1()
{
alert('witam');
}
</SCRIPT>
</HEAD>
<BODY onLoad="javascript:Funkcja1()">
</BODY></HTML>

Zdarzenie

onLoad

znacznika

BODY

jest wywo#ywane, kiedy ca#y dokument si% za#aduje

(w#$cznie z ewentualnym #adowaniem plików multimedialnych). Oznacza to, (e
w powy(szym przypadku funkcja

Funkcja1

zostanie wywo#ana po tym, jak za#aduje

si% ca#y dokument. Zamiast wywo#ywa, funkcje, mo(na wprowadzi, bezpo+rednio
poni(szy kod.

Plik events2.html:

Oto lista interesuj$cych zdarze', które mo(na obs#u(y,:

onMouseDown

onMouseUp

onMouseOver

onMouseOut

— zdarzenia zwi$zane

z myszk$, odpowiednio: wci+ni%cie klawisza myszy, puszczenie go, przesuni%cie
wska&nika ponad elementem, przesuni%cie wska&nika poza obszar elementu.

onKeyDown

onKeyPress

onKeyUp

— zdarzenia zwi$zane z klawiatur$,

odpowiednio: naci+ni%cie i przytrzymanie klawisza, naci+ni%cie krótkotrwa#e
i puszczenie klawisza po wcze+niejszym naci+ni%ciu.

Rozdzia 5. JavaScript i DHTML

125

onResize

— zmiana rozmiaru okna.

onMove

— poruszenie oknem.

onSelect

— wybranie elementu (np. przycisku na formularzu).

onSubmit

— zdarzenie wywo#ywane po zatwierdzeniu (wys#aniu formularza).

onReset

— zdarzenie wywo#ywane po wyczyszczeniu formularza

(przyciskiem reset).

onClick

— klikni%cie w element (dowolny znacznik).

onDblClick

— podwójne klikni%cie w element (dowolny znacznik).

onChange

— reakcja na zmian% warto+ci elementu formularza takiego jak pole

tekstowe, pole wyboru itp.

onFocus

— reakcja na uaktywnienie elementu, np. przycisku.

onError

— zdarzenie wywo#ywane, gdy #adowanie ko'czy si% b#%dem.

onUnload

— zdarzenie wywo#ywane przy opuszczaniu strony,

np. po zamkni%ciu okna przegl$darki.

Funkcje obs#uguj$ce zdarzenia mo(na równie( podpina, dynamicznie za pomoc$ kodu JS.
Oto przyk#ad.

Plik events3.html:

<HTML><HEAD>
<SCRIPT type="text/javascript" language="javascript">
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
function PowiedzWitam()
{
alert('witam');
}
</SCRIPT>
</HEAD><BODY>

<A href="http://helion.pl" id="linkHelion">Helion</A>

<SCRIPT type="text/javascript">
var link;
if(ie4)
link = document.all['linkHelion'];
else
link = document.getElementById('linkHelion');
if(ns6)
link.addEventListener('mouseover', function() {PowiedzWitam()}, false);
else
link.attachEvent('onmouseout', function() {PowiedzWitam()});
</SCRIPT>
</BODY></HTML>

Program przyk#adowy podpina zdarzenie

onmouseout

do odno+nika — po najechaniu

na niego wska&nikiem myszki powinien pojawi, si% komunikat. Funkcje podpina si%

126

PHP i HTML. Tworzenie dynamicznych stron WWW

inaczej, w zale(no+ci od tego, jak$ przegl$dark$ dysponuje u(ytkownik. W obydwu przy-
padkach najpierw szuka si% elementu w drzewie obiektów JavaScript (

dokument.all

lub

dokument.getElementById

), a nast%pnie podpina si% do niego anonimow$ funkcj%,

która wywo#uje w#a+ciw$ funkcj% obs#uguj$c$ zdarzenie (

addEventListener

lub

attach

Event

). Anonimowa funkcja to po prostu fragment kodu, którego zadaniem jest

wywo#anie funkcji —

PowiedzWitam

5.4. Podmiana fragmentów dokumentu

JavaScript umo(liwia szerok$ manipulacj% zawarto+ci$ dokumentu HTML. Mo(na nie-
omal dowolnie zmienia, jego tre+,. Aby tego dokona,, nale(y uzyska, dost%p do odpo-
wiedniego obiektu w drzewie obiektów dokumentu. Istnieje taki dla ka(dego znacznika
HTML w dokumencie. Jednym ze sposobów dotarcia do niego jest u(ycie funkcji

docu

ment.getElementById

, co zosta#o pokazane w przyk#adach zamieszczonych w poprzed-

nich podrozdzia#ach. Jako parametru wej+ciowego u(ywa si% atrybutu

znacznika.

Gdy ju( ma si% odpowiedni obiekt, mo(na wykorzysta, jedn$ z w#a+ciwo+ci, która
jest dost%pna dla ka(dego obiektu b%d$cego odpowiednikiem znacznika HTML:

innerHTML

— umo(liwia odczyt lub zmian% wn%trza znacznika w postaci HTML.

Tylko dla Internet Explorer:

outerHTML

— umo(liwia odczyt lub zmian%

fragmentu HTML stanowi$cego zarówno wn%trze znacznika, jak i jego samego.

Tylko dla Internet Explorer:

innerText

— umo(liwia odczyt lub zmian%

fragmentu dokumentu HTML stanowi$cego wn%trze znacznika, ale w postaci
prostego tekstu, tj. niezawieraj$cego znaczników. Je+li przypisa, do tego pola
warto+, np.

'<DIV>tekst</DIV>'

, to znaki

'<'

oraz

'>'

zostan$ zast$pione

znakami specjalnymi i przegl$darka nie wy+wietli znacznika

<DIV>

, a poka(e

po prostu taki tekst.

Tylko dla Internet Explorer:

outerText

— podobnie jak w przypadku

innerText

lecz obejmuje tak(e tekst stanowi$cy sam znacznik.

Oto przyk#ad. Nale(y pami%ta,, (e dla przegl$darki Firefox zadzia#a wy#$cznie inner-
HTML, pozosta#e trzy funkcje powinny by, zast$pione przez manipulacje na obiektach
(usuni%cie jednego obiektu i wstawienie drugiego, podobnie jak w programie przyk#a-
dowym pokazanym w rozdziale 2.).

Plik test.html:

<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function Test()
{
var element = document.getElementById("jakis_div");
alert('innerHTML: ' + element.innerHTML);
alert('innerText: ' + element.innerText);
alert('outerText: ' + element.outerText);
alert('outerHTML: ' + element.outerHTML);

Rozdzia 5. JavaScript i DHTML

127

}
</SCRIPT>
</HEAD>
<BODY>
<DIV id="jakis_div">
To jest DIV
<HR>
<P>Ala ma kota</P>
</DIV>
<INPUT type="BUTTON" onClick="Test()" value="Test" />
</BODY>
</HTML>

Jak ju( wspomnia#em, podmian% fragmentów dokumentu HTML mo(na równie( wyko-
na, poprzez bezpo+rednie manipulacje na drzewie obiektów, tzn. poprzez usuwanie
pewnych elementów i dodawanie innych. Zosta#o to intensywnie wykorzystane w pro-
gramie przyk#adowym do rozdzia#u 2.

5.5. Podmiana stylów CSS

Za pomoc$ kodu JavaScript mo(na równie( manipulowa, stylami CSS. Dzi%ki temu
uzyskuje si% w #atwy sposób wiele ciekawych efektów, w tym zarówno dynamiczn$ szat%
graficzn$ serwisu (zmieniaj$c$ si% pod wp#ywem interakcji u(ytkownika), jak i mo(-
liwo+, manipulacji np. pojawianiem si% pewnych elementów czy ich lokalizacj$.

Jednym z prostszych sposobów manipulowania stylami jest przygotowanie w arkuszu
stylów kilku zestawów wygl$du pewnego elementu i nast%pnie dynamiczne prze#$cza-
nie mi%dzy nimi poprzez zmian% atrybutu

class

elementu. Aby tego dokona,, musisz

znale&, obiekt odpowiadaj$cy znacznikowi i zmieni, warto+, pola

className

. Oto

przyk#ad.

Plik KlasyCSS.html:

<HTML>
<STYLE>
.bialy { color: white;}
.czerwony { color: red;}
.zielony { color: green;}
</STYLE>
<BODY>
<P id="zmiana">Zmie9 mój kolor</P>

Czytaj dalej...

128

PHP i HTML. Tworzenie dynamicznych stron WWW

Zastosowanie powy(szej techniki pozwala uzyska, wiele interesuj$cych efektów. Nie
trzeba jednak koniecznie ucieka, si% do przygotowywania gotowych zestawów klas
i podmieniania ich. Mo(na manipulowa, bezpo+rednio zawarto+ci$ stylu. Ka(dy obiekt
b%d$cy odpowiednikiem znacznika HTML posiada pole style, które jest obiektem odpo-
wiadaj$cym stylowi tego elementu zdefiniowanemu w arkuszu CSS lub bezpo+rednio
w dokumencie. Element stylu posiada z kolei pola odpowiadaj$ce ró(nym w#a+ciwo-
+ciom CSS, które mo(na modyfikowa,. W efekcie modyfikacji powy(szego przyk#adu,
tak aby wykorzystywa# opisan$ technik%, uzyskasz:

<HTML>
<BODY>
<P id="zmiana" style="color: yellow">Zmie9 mój kolor</P>

5.6. Optymalizacja dzia?ania

skryptów JavaScript

W rozdziale 4. postulowa#em, aby nie oszcz%dza, rozmiarów skryptów PHP przez skra-
canie nazw zmiennych b$d& funkcji czy te( np. przez pomijanie komentarzy. Zaciemnia#o
to kod i nie dawa#o praktycznie (adnych zysków. Niestety nie jest to a( takie oczywi-
ste w przypadku JavaScript, poniewa( im krótszy b%dzie dokument wys#any do prze-
gl$darki, tym szybciej za#aduje ona stron% (czas przesy#u danych cz%sto stanowi w$skie
gard#o). Interes u(ytkownika i programisty okazuje si% wi%c niestety sprzeczny. Nie-
którzy programi+ci z tego powodu rezygnuj$ z pisania komentarzy i zaczynaj$ korzysta,
z jednoliterowych nazw zmiennych. Nie jest to jednak dobre rozwi$zanie. Co wi%c
mo(na zrobi,?

Jednym z rozwi$za' jest praca na szerszej wersji kodu, tj. zawieraj$cej komentarze
i d#ugie nazwy identyfikatorów zmiennych. Tu( przed wys#aniem na serwer wystarczy
t% wersj% podda, dzia#aniu specjalnego programu, który nie tylko skraca identyfikatory
i usuwa nieproduktywne fragmenty kodu (np. komentarze), ale tak(e potrafi dokona,
ograniczonej kompresji kodu. Jest to dobre rozwi$zanie, niestety ma jedn$ wad%: je+li
ju( po wys#aniu na serwer w skrypcie objawi si% b#$d, trudno go b%dzie naprawi,,
dlatego (e podgl$d &róde# skryptu poka(e zmodyfikowan$ wersj% kodu, a nie orygi-
naln$. Dlatego lepiej jest do momentu zako'czenia prac i testowania serwisu pozostawi,
oryginaln$ wersj%, a skompresowan$ wys#a, dopiero na serwer produkcyjny dost%pny
dla u(ytkowników. Niezwykle wa(ne jest, aby zawsze zachowywa, oryginaln$ wersj%
kodu, by móc w ka(dej chwili dokona, analizy.

Wyszukiwarka

Podobne podstrony:

więcej podobnych podstron