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="#0000FF";
}
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 |
Ezek ismeretében a linkek színét például a következõ utasítással vátoztathatjuk meg:
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="pld021.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="pld022.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 ezt a 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 adunk. 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>
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>