2. fejezet: A HTML dokumentum
A JavaScript egy HTML oldal minden elemét, és a böngészô ablakát is objektumként kezeli. Minden ilyen objektum rendelkezik tulajdonságokkal (adatmezõkkel) és megfelelô függvényekkel, amelyeken keresztül az oldal szinte minden tulajdonságát megváltoztathatjuk, a böngészô egyes részeit programozhatjuk.
A böngészô ablaka a JavaScript szemszögébôl egy ún. window objektum (window-object). Ez bizonyos elemeket tartalmaz, mint például a státuszsort. Az ablak belsejébe HTML oldalt tölthetünk, amit a JavaScript a document objektumon keresztül kezel. A document objektum az aktuálisan betöltött oldalt kezeli, és ezáltal egyike a leggyakrabban használt és legfontosabb objektumoknak. Segítségével módosíthatjuk az oldalunk megjelenését, például beállíthatjuk a színeket! Próbáljuk ki az alábbi példát!
Nézzük meg a kódot!
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A kód elrejtése, ha szükséges
function sarga(){
document.bgColor="#FFFF00";
}
function kek(){
document.bgColor="#00FFFF";
}
function eredeti(){
document.bgColor="#FFFFFF";
}
// --> Elrejtés vége
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<P>
<FORM>
<INPUT TYPE="button" VALUE="Sárga háttér" onClick="sarga()">
<INPUT TYPE="button" VALUE="Kék háttér" onClick="kek()">
<INPUT TYPE="button" VALUE="Eredeti háttér" onClick="eredeti()">
</FORM>
</P>
</CENTER>
</BODY>
</HTML>
Létrehoztunk három függvényt sarga(),
kek() és eredeti() néven. Mindegyik egyetlen
értékadó utasítást tartalmaz, amellyel
a document objektum bgColor nevû mezôjének
adunk új értéket. Ebben az adatmezôben tárolódik
ugyanis a háttérszín aktuális beállítása.
Ha ezt felülírjuk valami más értékkel,
akkor megváltozik a dokumentum háttérszíne
is. Az új színt a HTML-bôl jól ismert RGB színkód
formájában kell megadni. A gombokat egy ûrlappal állítottuk
elô, és a Bevezetésben
már bemutatott onClick esemény hatására
hívódnak meg a megfelelô függvények.
Megváltoztathatók a HTML oldalunk egyéb színbeállításai
is, ha a document objektum más adatmezôjének
adunk az elôbbihez hasonló módon értéket.
Egy táblázatban foglaljuk össze a színekkel kapcsolatos
mezôket:
| alinkColor | Az aktív linkek színe |
| bgColor | Háttérszín |
| fgColor | Az elôtér színe |
| linkColor | A linkek színe |
| vlinkColor | Már meglátogatott linkek színe |
document.linkColor = "#xxxxxx"ahol xxxxxx helyére a kívánt RGB színkódot kell beírni.
Ennél sokkal fontosabb azonban, hogy a HTML objektumok is a document objektum mezôi. HTML objektumok például az oldalon megjelenô képek, linkek, ûrlapok. Mielôtt megnéznénk, hogy milyen módon kezelhetjük ezeket az objektumokat, hozzunk létre egy egyszerû HTML oldalt!
<HTML>
<HEAD><TITLE>Példa oldal</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<IMG SRC="pelda1.jpg" NAME="pelda_pic1">
<P>
<FORM NAME="pelda_urlap">
Név:
<INPUT TYPE="text" NAME="nev" VALUE="JavaScript"><BR><BR>
Cím:
<INPUT TYPE="text" NAME="cim" VALUE="www.netscape.com"><BR><BR>
<INPUT TYPE="button" VALUE="Kattints rám" NAME="gomb" onClick="alert('Most megnyomtál! :-)')">
</FORM>
<P>
<P>
<IMG SRC="pelda2.jpg" NAME="pelda_pic2">
<P>
<P>
<A HREF="http://www.netscape.com">Nézd meg a Netscape JavaScript oldalait is!</A>
</CENTER>
</BODY>
</HTML>
Ez a rövid HTML kód a következô dokumentumot eredményezi.

Hogyan hivatkozhatunk az oldal egyes elemeire? Ebben a példa HTML dokumentumban két kép, egy link és egy ûrlap található két szövegmezôvel valamint egy gombbal. A hivatkozás az egyes objektumok típusa szerint megy. Az oldalon elôforduló elsô képhez az images[0] névvel férhetünk hozzá, a másodikhoz az images[1] névvel és így tovább. A linkek a links[0], links[1], links[2]... néven szerepelnek. Az ûrlapokat forms[0], forms[1], forms[2]..., míg az ûrlapok egyes mezôit (pl. szövegmezô, listaablak, gombok) forms[X].elements[0], forms[X].elements[1], forms[X].elements[2]... névvel érhetjük el, ahol X valamely ûrlap sorszáma.
A példánál maradva nézzük meg sorrendben, hogy az oldalon található HTML objektumokra hogyan hivatkozhatunk (mivel a HTML objektumok a document objektum mezôi, ezért mindegyik hivatkozás ezzel kezdôdik):
nev = documents.forms[0].elements[0].value;A szövegmezô tartalma bekerült a változónkba, amivel továbbiakban különféle mûveleteket végezhetünk: pl. kiírathatjuk egy üzenetablakba az alert("Szia " + name) függvénnyel. Nézzük meg ezt mûködés közben, majd utána a kódot, amelyben már minden ismert!
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Elrejtés
function Udvozol(){
var name = document.forms[0].elements[0].value;
alert("Szia "+name);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="urlap"> Név: <INPUT TYPE="text" NAME="nev">
<INPUT TYPE="button" VALUE="Írd be a neved, majd kattints rám!" onClick="Udvozol()">
</FORM>
</BODY>
</HTML>
Jogosan felmerülhet a kérdés, hogy nagyobb HTML dokumentumok
esetén van-e egyszerûbb módszer a hivatkozásra,
hiszen nem könnyû sok link, kép, ûrlapmezô
esetén kiszámolni, hogy pontosan melyikkel szeretnénk
dolgozni. Természetesen erre is van lehetôség, mégpedig
úgy, hogy minden HTML objektumnak önálló, egyedi
nevet adok. Ha az ûrlapunkat megnézzük, akkor látható,
hogy ezt már meg is tettük az <INPUT> HTML elemen belül
a NAME attribútum megadásával:
<FORM NAME="pelda_urlap"> Név: <INPUT TYPE="text" NAME="nev" VALUE=""><BR>Az ûrlapunknak a pelda_urlap nevet, az elsô szövegmezônek a nev nevet adtuk. Ez alapján, erre az objektumra document.forms[0].elements[0] helyett használhatjuk a document.pelda_urlap.nev hivatkozást is.
Új értéket is rendelhetünk bizonyos HTML objektumokhoz, például egy szövegmezôhöz:
És íme a kód: onClick esemény hatására új értéket rendelünk a az uj nevû ûrlap szoveg nevû mezôjéhez.
<FORM NAME="uj"> <INPUT TYPE="text" NAME="szoveg" VALUE="www.microsoft.com"> <INPUT TYPE="button" VALUE="Új szöveg" onClick="document.uj.szoveg.value='www.yahoo.com';"> </FORM>A location objektum
Ez az objektum reprezentálja a betöltött HTML dokumentum címét. Ha például betöltöttük a Netscape oldalát, akkor a location objektum href mezôje (location.href) ennek az oldalnak a címét fogja tárolni (www.netscape.com). Ehhez a mezôhöz új értéket rendelve új oldalt tölthetünk be a böngészôbe:
<FORM> <INPUT TYPE="button VALUE="Altavista" onClick="location.href='http://altavista.com';"> </FORM>