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):
Azt, hogy egy hivatkozás révén milyen mûveleteket végezhetünk el az egyes HTML objektumokkal, különbözô JavaScript referencia könyvek tartalmazzák. Mi néhány alapvetô mûveletet nézünk csak meg. Hivatkozzunk az ûrlapunk elsô szövegmezôjére, olvassuk ki a tartalmát a nev nevû változóba! Ezt megtehetjük az alábbi utasítással (figyeljünk arra, hogy kis- és nagybetû itt is számít):
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>