Dinamikus HTML modell 1 Részletek Endrıdi Tamás: Internet alapú alkalmazásfejlesztés c. jegyzetébıl
2 Kliensoldali scriptek használata a DHTML-ben 1. Kliensoldali scriptek használata a DHTML-ben 1.1. Dinamikus HTML modell Az Internet kezdeti szakaszában alkalmazott HTML technika alapvetıen arra épült, hogy a kliens oldalon a felhasználó egy teljesen statikus dokumentumot kap. Az egérrel vagy a billentyőzettel történı bármilyen felhasználói beavatkozás hatására újabb információcsere ciklust kell végrehajtani a szerver és a kliens között. Ez a fajta tartalom-szolgáltatási megközelítés oda vezetett, hogy az Internetes alkalmazásfejlesztés kényszerő kísérıjelensége volt a puritán információ-megjelenítés és a lassúság. Ez viszont mindenképpen visszalépést jelentett a nem Internetes Windows-alkalmazásoknál a felhasználók által már megszokott gyors és interaktív megjelenítéshez képest. Látványos HTML oldalakat csak ActiveX vezérlıelemek, Java appletek és rengeteg kép (JPEG, GIF) letöltése árán lehetett elıállítani. Jellemzı technika volt, hogy díszesebb címsor szövegek sem sima szövegként, hanem képként kerültek le a kliens gépre. Ezen feltétlenül változtatni kellett, ezért a W3C szervezet melynek a Microsoft és a Netscape oszlopos tagja közös munkával kidolgozott egy szabványt a dinamikus HTML alkalmazására. A dinamikus HTML alapfilozófiája az, hogy a HTML dokumentum minden egyes eleme egyedi azonosítóval (ID) beazonosítható, és kliensoldali scriptek segítségével programozható. A HTML dokumentum elemeinek, objektumainak kapcsolatait egy ún. DHTML Object Model (DOM) határozza meg. Az 5.1 ábra a Microsoft Internet Explorer 5.0 objektummodelljének a fı vázát mutatja. (A Netscape által alkalmazott DOM ettıl némiképpen eltér.)
Kliensoldali scriptek készítése 3 4.1 ábra 1.2. Kliensoldali scriptek készítése A kliensoldali scriptek olyan programrészletek, amelyek forrásnyelvi alakban töltıdnek le a HTML dokumentummal együtt a felhasználói gépre. A böngészıprogram a felhasználó által elıidézett, illetve egyéb módon bekövetkezett események hatására hajtja végre a megfelelı scriptet. Felhasználó által elıidézett esemény lehet például egy egérkattintás vagy akár csak egy egérmozgatás a HTML dokumentum valamelyik objektumára. Egyéb esemény lehet például a dokumentum letöltésének befejezése. Kliensoldali scriptek elkészítésére többféle programnyelvet is igénybe vehetünk, sıt akár egy dokumentumon belül is használhatunk eltérı nyelvet az egyik, illetve egy másik esemény kezelésére. Az egyetlen fontos kritérium az, hogy a böngészıprogram képes legyen interpretálni az adott programnyelv utasításait. A két legismertebb és leggyakrabban használt script nyelv a Visual Basic alapú VBScript, illetve a Java alapú JScript és JavaScript. Néhány böngészı támogatja a Perl nyelvő scriptek használatát is. A VBScript nyelv a Visual Basic nyelvnek egy körülhatárolt részhalmazát tartalmazza. Nincs minden benne, amit a Visual Basic tud, de az Internetes alkalmazásfejlesztéshez szükséges elemek szerepelnek. A VBScript nyelvet az Internet Explorer különféle verziójú böngészıi
4 Kliensoldali scriptek használata a DHTML-ben támogatják, míg a Netscape Navigator csak megfelelı plug-in letöltése után képes értelmezni a VBScript alapú eseménykezelıket. A Java nyelvre épülı script nyelvek közül a Microsoft az ECMAScript szabvány alapján készített egy Java implementációt JScript néven. A Netscape által használt JavaScript a Java nyelv részhalmazát tartalmazza. A két Java alapú script nyelv némileg eltér egymástól. Kliensoldali script készítéséhez a <SCRIPT> HTML elemet kell használnunk a 4.2 kódrészlet által bemutatott módon: <HTML> <HEAD> <SCRIPT LANGUAGE=VBScript> <!-- Sub Uzenet() MsgBox A szokásos Helló End Sub --> </SCRIPT> </HEAD> <BODY onload= Uzenet() >... </BODY> </HTML> 4-2. kódrészlet A SCRIPT HTML elem egy nyitó SCRIPT tagból, a script forrásnyelvi szövegébıl és egy záró SCRIPT tagból áll. A nyitó SCRIPT tag LANGUAGE attribútumában kell megadni a használt nyelvet. Az 4.2 kódrészletbıl látható, hogy a forrásprogram szövegét célszerő HTML megjegyzésbe helyezni, hogy a scripteket egyáltalán nem támogató vagy az adott script nyelvet nem beszélı böngészı ne álljon fejre a számára idegen szövegtıl. A példabeli script forráselem egy Uzenet nevő eljárást tartalmaz, melyben az MsgBox segítségével egy egyszerő üzenetet jelenítünk meg. A kipróbálás végett hozzákapcsoltuk az Uzenet meghívását a dokumentum teljes betöltéséhez, azaz az onload eseményhez, így a BODY elem szövegblokkjában található elemek megjelenítése után fog az üzenet megjelenni a képernyın. A 4.3 kódrészlet a fenti példát mutatja meg Jscript nyelven. <HTML> <HEAD> <SCRIPT LANGUAGE=JScript> <!-- function Uzenet() alert ( A szokásos Helló ); --> </SCRIPT> </HEAD> <BODY onload= Uzenet() >... </BODY> </HTML> 4-3. kódrészlet
Programozás VBScriptben és JScriptben 5 1.3. Programozás VBScriptben és JScriptben Ebben a részben vázlatosan bemutatjuk azt, hogyan kell az egyes nyelvi elemeket használni VBScriptben és Jscriptben. A nyelvi elemek bemutatásakor nem törekedtünk teljességre, hiszen ennek a jegyzetnek nem lehet célja a két programnyelv részletes tárgyalása. 1.3.1. Utasítások A JScriptben az utasítások végére pontosvesszıt kell helyezni, míg a VBScriptben nincs külön utasítás-végjel. Egy sorba több utasítás is írható, de ezt célszerő mindkét nyelvben elkerülni. Az utasítások közé vagy az utasítások végére magyarázó szövegeket, megjegyzéseket is elhelyezhetünk. JScriptben a dupla perjel (//) a megjegyzés jele, míg VBScriptben az aposztróf ( ). VBScript Mintaprogram az utasítások szemléltetésére VBScriptben a = b + c d = window.open() ablaknyitás JScript // Mintaprogram az utasítások // szemléltetésére JScriptben a = b + c; d = window.open(); // ablaknyitás 1.3.2. Változók és adattípusok A változókat általában nem kötelezı deklarálni, de jó programozói technika az, ha minden változót deklarálunk. A VBScriptben az Option Explicit utasítás kiadásával kötelezıvé tehetı a deklaráció. Egy nem deklarált változó használata ilyenkor hibát generál. A deklaráció kulcsszava JScriptben a var, VBScriptben pedig leggyakrabban a Dim, de az életciklustól és a láthatóságtól függıen a Private vagy a Public is használható. A változó nevének megválasztásánál ügyelni kell arra, hogy a JScript érzékeny a kisbetőnagybető különbségére, míg a VBScript nem. Ennek megfelelıen az osszeskoltseg, illetve az osszeskoltseg két külön változót azonosít a JScriptben. A VBScriptben ezzel szemben lényegtelen, hogy az adott változóra történı hivatkozásokban milyen kisbető-nagybető kombinációt alkalmazunk. A változó neve VBScriptben nem lehet 255 karakternél hosszabb, míg a JScriptben nincs ilyen korlát. Mindkét nyelvben érvényes szabály, hogy a változónév nem egyezhet meg az adott nyelv foglalt szavaival (pl. if, for). A JScript nyelvben a deklarációs utasításban kezdıértéket is adhatunk a változónak, míg a VBScriptben ezt csak külön utasításban tehetjük meg. A változók deklarálásakor adattípust nem adhatunk meg. Konkrét adattípushoz az értékadás során jut egy változó. JScriptben egy változónak hatféle adattípusa lehet: szám, string, objektum, Boolean, Null és undefined. Szám típusú akkor lesz egy változó, ha például valamilyen számkonstans (fixpontos, lebegıpontos, oktális, illetve hexadecimális) értékét veszi fel egy értékadás során. String típusú lesz a változó, ha az értékadás jobboldalán idézıjelek vagy aposztrófok közötti szöveg tartalmát töltjük bele. A Boolean típusú változók csak kétféle, azaz true vagy false értéket vehetnek fel. A Null adattípus a semmi speciális megtestesítıje, míg az undefined esetén a változó még semmilyen értéket nem kapott.
6 Kliensoldali scriptek használata a DHTML-ben VBScriptben minden változó Variant adattípusú, azaz a Visual Basicben megismert adattípus választási lehetıségek közül itt csak a Variant technika használható. Egy Variant változó az értékadás során különféle szám adattípust (Byte, Integer, Long, Single, Double, Currency) vehet fel, feltölthetjük szöveges adattal (String), dátumértékkel (Date), logikai adattal (Boolean) vagy hozzárendelhetünk egy objektumot (Object). A VarType függvény segítségével bármikor lekérdezhetjük a változó pillanatnyi adattípusát. Mindkét programnyelv lehetıvé teszi a tömbök használatát. VBScriptben egyszerően a változónév mögé helyezett zárójel-pár között kell megadni a dimenzióinformációt, míg JScriptben a new operátort és az Array() konstruktort kell használni a tömb deklarálásához. A tömbelemek mindkét nyelvben nulláról indulnak, ezért egy 100 elemő tömb elsı eleme a nulladik, az utolsó eleme pedig a 99. elem lesz. A VBScriptben, illetve a JScriptben használható operátorok az alábbi táblázatból olvashatók ki: Mővelet leírása VBScript operátor JScript operátor Negatív elıjel (1 operandus) Inkrementálás (1 operandus) nincs + + Dekrementálás (1 operandus) nincs Hatványozás ^ nincs Szorzás * * Osztás / / Egészosztás \ nincs Modulus képzés (osztás maradéka) Mod % Összeadás + + Kivonás Negáció Not! Kisebb, nagyobb, kisebb egyenlı, nagyobb egyenlı, egyenlı, nem egyenlı <, >, <=, >=, ==, <> <, >, <=, >=, ==,!= Logikai ÉS mővelet AND && Logikai VAGY mővelet OR String konkatenálás & + Objektum ekvivalencia Is nincs Az alábbi táblázatban összehasonlítottuk egy példán keresztül a változókat és használatuk módját a két nyelvben.
Programozás VBScriptben és JScriptben 7 VBScript Dim a Dim Tomb(100) Dim Szoveg a = 256 Szoveg = Vizsga Tomb(0) = 35 JScript var a=256; var Tomb = new Array(100); var Szoveg = Vizsga ; Tomb[0] = 35; 1.3.3. Vezérlıszerkezetek Az alábbi táblázat a két nyelv vezérlıszerkezeteit foglalja össze. Vezérlıszerkezet VBScript példa JScript példa Egyágú szelekció egy utasítással Egyágú szelekció több utasítással Kétágú szelekció Többágú szelekció Szelekciós blokkok If a=5 Then c=a+b If a=5 Then c=a+b msgbox Kakukk End If If a=5 Then c=a+b Else MsgBox Kakukk End If If a=5 Then c=a+b ElseIf b=5 Then c=a+b*2 Else MsgBox Kakukk End If Select Case a Case 5: b=c+d Case 6: b=x+y Case Else: MsgBox Hiba End Select If (a==5) c=a+b; If (a==5) c=a+b; alert ( Kakukk ); If (a==5) c=a+b; else alert ( Kakukk ); If (a==5) c=a+b; else if (b==5) c=a+b*2 else alert ( Kakukk ); switch (a) case 5: b=c+d; break; case 6: b=x+y; break; default: alert ( Hiba );
8 Kliensoldali scriptek használata a DHTML-ben Vezérlıszerkezet VBScript példa JScript példa Feltételes ciklus (elıl tesztelı) Feltételes ciklus (elıl tesztelı) Számolt ciklus Számolt ciklus tömb és konténer esetén Do While i < 100 Ossz = Ossz + Ktsg(i) i = i + 1 Loop Do Until i=100 Ossz = Ossz + Ktsg(i) i = i + 1 Loop For i=0 To 99 Step 1 Ossz = Ossz + Ktsg(i) Next For Each i In Ktsg Ossz = Ossz + Ktsg(i) Next do Ossz += Ktsg[i]; i++ While (i < 100); for (var i=0; i<100; i++) Ossz += Ktsg[i]; for (var i in Ktsg) Ossz += Ktsg[i] 1.3.4. Eljárások és függvények A klasszikus programnyelvekhez hasonlóan a script technológiában az eljárások (szubrutinok) és a függvények között az a különbség, hogy az eljárás nem ad vissza értéket. A VBScriptben eljárások és függvények is írhatók, míg a JScriptben csak függvények. Típus VBScript példa JScript példa Eljárás Eljárás meghívása Függvény Függvény meghívása Sub Valami(Para1, Para2) ide jön az eljárás teste End Sub Valami Arg1, Arg2 Function Kakukk(Para1, Para2) Ide jön a függvény teste Kakukk = Ertek Visszaadott érték End Function Eredmeny = Kakukk(Arg1,Arg2) function Kakukk(Para1, Para2) // Ide jön a függvény teste return Ertek Eredmeny = Kakukk(Arg1,Arg2); Mindkét script nyelv rengeteg beépített függvénnyel rendelkezik. Ezek közül terjedelmi okokból mindössze hármat mutatunk be: az alert, a prompt és az MsgBox függvényt. Az alert függvény segítségével egyszerő üzenetet küldhetünk a böngészıben. A prompt függvény arra ad lehetıséget, hogy egy elemi adatot kérjünk be a felhasználótól. Az MsgBox függvény csak a VBScriptben érhetı el. Szerepe az, hogy a függvény második paraméterében megadott konstansok révén adott nyomógombokkal felszerelt üzenetdobozt állíthassunk elı. A függvény visszaadott értéke a felhasználó által megnyomott nyomógomb azonosítója lesz.
A DHTML programozása 9 Függvény VBScript példa JScript példa alert alert Most szóltam alert( Most szóltam ) prompt MsgBox Adat=100 Adat=prompt( Adja meg,adat) V=MsgBox( Mehet?,vbYesNo) If V=vbYesNo Then Akkor menjen End If Adat=100; Adat=prompt( Adja meg,adat); 1.4. A DHTML programozása A DHTML programozása tulajdonképpen nem más, mint az 5.1 ábra objektummodellje alapján az egyes objektumok attribútumainak, metódusainak és eseményeinek kezelése. Az objektummodellben látható, hogy a képernyın megjelenı összes elem a legegyszerőbb HTML tagtól kezdve egy kereteket tartalmazó komplett ablakig egyaránt része a DHTML modellnek, és ezáltal az eseményeken keresztül programozható is. A DHTML eseményvezérelt programozása koncepciójában nagyon hasonlít a Windows Desktop alkalmazások eseményvezérelt technikájához. A böngészı által figyelt (triggerezett) események között is sok olyat találhatunk (pl. onload, onclick, stb.), amelyik a nem Internetes alkalmazásoknál is használatos volt. Egy metódus meghívása szintaktikai szempontból mindkét nyelvben ugyanúgy történik: az objektum neve és a metódus neve közé pontot kell tenni. (Pl. window.close()). Az egyetlen apró különbség, hogy JScriptben a megszokott pontosvesszıvel kell az utasítást lezárni. Az objektumok tulajdonságadatait (attribútumait) is úgy érhetjük el, hogy az objektum neve és a tulajdonságnév közé pontot teszünk. (Pl. window.status = szöveg ) Az eseményvezérelt eljárások elkészítésére háromféle lehetıség is kínálkozik: a. Eljárást készíthetünk az objektum nevének és az esemény nevének összekapcsolásával. VBScriptben szubrutinként kell elkészítenünk az ilyen eljárást, és aláhúzást kell tennünk az objektum neve és az eseménynév közé. JScriptben az aláhúzás helyett pontot kell használnunk, és gondosan ügyelnünk kell az objektum, valamint az esemény nevének kisbető-nagybető szerinti korrekt leírására. Az események neve általában csupa kisbetővel szerepel. (pl. onload) Az objektumok neve kisbetővel kezdıdik, és összetett szavak esetén a második szótól kezdve a szavak elsı betője nagybető. (pl. childnodes) b. Azt is megtehetjük, hogy a <SCRIPT> tag FOR és EVENT attribútumaiban adjuk meg az objektum, illetve az esemény nevét. Ennek a megoldásnak az a hátránya, hogy egy SCRIPT tagban értelemszerően csak egy objektum egyetlen eseményét tudjuk kezelni. Annyi SCRIPT elemet kell tehát betennünk a HTML objektumba, ahány eseményvezérelt eljárást használni szeretnénk. c. Arra is van lehetıség, hogy egy HTML nyitó tagba helyezzük el a komplett eseményvezérelt eljárást. Ilyenkor az esemény nevét, majd egy egyenlıségjelet követı szövegkonstansban a végrehajtandó mőveletet kell megadnunk. A dolog természetébıl adódóan ezt a technikát csak akkor érdemes használni, ha a szövegkonstansba egyetlen
10 Kliensoldali scriptek használata a DHTML-ben függvényhívást vagy egyetlen utasítást szándékozunk elhelyezni. A szövegkonstanson belüli utasítások alapértelmezésbeli nyelve a JScript, ezért VBScript-es esetben a HTML tagban a LANGUAGE attribútumot is meg kell adni, hogy a megfelelı interpreter dolgozza fel a szöveget. Nézzünk példát az említett három technikára VBScriptben és JScriptben: Technika VBScript példa JScript példa a b c <SCRIPT LANGUAGE= VBScript > Sub Window_OnLoad MsgBox Bejött End Sub További eseményvezérelt eljárások </SCRIPT> <SCRIPT LANGUAGE= VBScript FOR=Window EVENT=OnLoad> MsgBox Bejött </SCRIPT> <BUTTON LANGUAGE= VBScript onclick= MsgBox Hahó > Üzenetgomb </BUTTON> <SCRIPT LANGUAGE= JScript > window.onload() alert ( Bejött ); // További eljárások, ha vannak </SCRIPT> <SCRIPT LANGUAGE= JScript FOR=window EVENT=onload> alert ( Bejött ); </SCRIPT> <BUTTON onclick= alert( Hahó ) > Üzenetgomb </BUTTON> A DHTML objektummodell összes objektumának összes tulajdonságadatát, metódusát és eseményeit terjedelmi okokból nincs módunkban bemutatni, de a legfontosabbakra a következı fejezetekben kitérünk. 1.5. A window objektum A window objektum a legfelsı elem a DHTML objektumhierarchiában. Akkor jön létre, amikor egy új Internet Explorer ablakot nyit a felhasználó vagy valamilyen programfolyamat. Ha az adott ablak kereteket (frame-eket) is tartalmaz, akkor a legfelsı szintő (szülı) ablak mellett létrejön annyi gyerekablak is, ahány keret megjelent. 1.5.1. A window objektum legfontosabb metódusai Az Internet Explorer 5.0-ban a window osztályhoz 26 metódus tartozik. A legfontosabbak ezek közül a megnyitással és a lezárással kapcsolatos metódusok. Új ablak létrehozását az open, a showmodaldialog vagy a showmodelessdialog metódusokkal lehet elvégezni. Az open metódus szintaktikai alakja a következı: ownd = window.open([surl[, snév [, sjellemzı ]]]) Az elsı paraméterben a megjelenítendı dokumentum URL címét kell megadnunk, ennek elhagyásakor az about:blank fog megjelenni az ablakban. A második paraméterben az ablak nevét lehet beállítani. A harmadik paraméterben a megjelenítésre vonatkozó jellemzıket az ablak méretét, elhelyezkedését, felszereltségét, stb. adhatjuk meg alparaméterek
A window objektum 11 segítségével. A metódushívás visszaadott értékként az újonnan létrejött ablakobjektumot szolgáltatja. Példa: oablak = window.open( sample.htm", Ablaknév, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no"); A showmodaldialog metódus csak annyiban különbözik az open metódustól, hogy modális ablakot nyit meg. Szintaktikai alakja: vérték = window.showmodeldialog(surl[, vargumentumok [, sjellemzı ]]) Az elsı paraméterben itt is a megjelenítendı dokumentum URL címét kell megadnunk, de most ez a paraméter kötelezı. A második paraméterben a modális ablakban megjelenítendı dokumentumnak adhatunk át értékeket, melyet az új ablak dialogarguments tulajdonságadatában érhetünk el. A harmadik paraméterben itt is a megjelenítésre vonatkozó jellemzık adhatók meg. A visszaadott érték a modalitásból adódóan itt nem az ablakobjektum hiszen az már a visszaadás pillanatában nem is létezik, hanem a document objektum returnvalue tulajdonságadatába beállított érték, azaz a dialógusablak által küldött adat. A showmodelessdialog metódus csak annyiban különbözik az elızıtıl, hogy a létrejött ablak nem modális. Menükhöz és a súgó rendszerhez használhatjuk. Az ablak lezárását a close metódus hajtja végre. Szintaktikai alakja: window.close A korábbiakban bemutatott alert és prompt függvények valójában a window objektum metódusai. Az objektumot és az azt követı pontot ugyanis elhagyhatjuk abban az esetben, ha a legfelsı szintő ablakról van szó. A navigate metódus segítségével lehet elérni azt, hogy az adott ablak egy másik dokumentumot jelenítsen meg. A metódus egyetlen paramétert vár: a dokumentum URL címét. 1.5.2. A window objektum legfontosabb tulajdonságai Az IE 5.0-ban a window osztályhoz 28 tulajdonságadat tartozik. A document tulajdonságadat segítségével nyerhetjük vissza az adott ablakban jelenleg látható dokumentum objektumot. A window.document hivatkozáson keresztül tudunk hozzáférni az adott HTML dokumentum egyes objektumaihoz. (A document objektum felépítését lásd késıbb!) Az event tulajdonságadat szolgáltatja az event (esemény) objektumot. A DHTML eseménykezelése úgy mőködik, hogy az objektumhierarchia alsó szintjén bekövetkezett események buborékként felfelé szállnak a hierarchia csúcsa felé (event bubbling). Ennek megfelelıen az összes esemény eljut a window objektum szintjéig, ezért a window.event hivatkozás révén az esemény minden fontos részlete hozzáférhetı az ablak szintjén is. Az event objektumról is szó lesz késıbb.
12 Kliensoldali scriptek használata a DHTML-ben A history tulajdonságadat a history objektumot adja vissza. Ez az objektum biztosítja a láncba főzött HTML dokumentumok közötti ide-oda navigálás lehetıségét. A history.back() metódussal lehet az elızı, a history.next() metódussal pedig a következı URL címet elérni. A location tulajdonságadat az ablakban éppen látható dokumentum forrásáról szolgáltat adatokat. A location.href a teljes URL címet adja. A location.hash hivatkozás az URL-bıl a máltai kereszt (#) mögötti részt, a location.search pedig a kérdıjel (?) mögötti részt, azaz az átadott argumentumokat szolgáltatja. A host neve (host, illetve hostname hivatkozással), a port (port) és a protokoll (protocol) is visszanyerhetı. A navigator objektum a felhasználó által használt böngészırıl szolgáltat információt. Errıl is szólunk részletesen. 1.5.3. A window objektum legfontosabb eseményei A window objektum legfontosabb, tulajdonképpen kötelezıen használandó eseménye az onload. Ez az esemény akkor következik be, amikor már az összes HTML elem megjelent az ablakban. Az esemény figyelése azért különösen fontos, mert az eseménykezelı eljárásokban a HTML objektumokhoz csak akkor lehet korrektül hozzáférni, ha a letöltésük teljes mértékben befejezıdött. A window.complete tulajdonságadattal is elvégezhetı a figyelés, hiszen ez csak akkor ad vissza logikai igaz értéket, ha a betöltés befejezıdött. Az onbeforeunload esemény akkor következik be, amikor a felhasználó el akar navigálni az aktuális dokumentumról. Ha írunk rá eseménykezelı eljárást, és az event.returnvalue tulajdonságadatba megfelelı szöveges figyelmeztetést helyezünk el, akkor az IE5.0 egy dialógusablakot rak ki a képernyıre. Ha ezen a felhasználó a Mégse gombot nyomja meg, akkor rajta marad az aktuális lapon. Az onunload esemény már a dokumentumról való lelépés után történik meg. A fókuszba kerülés és annak elvesztése is figyelhetı esemény a DHTML-ben. A megfelelı eseménykezelık neve: onfocus, illetve onblur. 1.5.4. A window objektum kollekciója (frames) A window objektum egyetlen kollekciót (győjteményt) tartalmaz, mely a window.frames hivatkozással érhetı el. Ebben a kollekcióban a szülıablakon található keretek gyerekablak objektumai vannak. Egy adott gyerekablak visszanyerésének szintaktikai alakja a következı: ogyerekablak = window.frames(vindex[,ialindex]) Az elsı paraméter vagy egy numerikus sorszám 0-tól indítva, vagy egy string, amely a keresett ablak nevét tartalmazza. Ha az adott névvel több ablak is található, akkor a második paraméter ad lehetıséget az azonos nevő ablakok közül a megadott sorszámú ablak elérésére.
A document objektum 13 1.6. A document objektum A document objektum a böngészı ablakban megjelenı HTML dokumentumot tartalmazza. Az objektumon keresztül van lehetıségünk arra, hogy a HTML dokumentum elemeit elérjük, módosítsuk, illetve a velük kapcsolatos eseményeket figyeljük és kezeljük. 1.6.1. A document objektum legfontosabb metódusai A document objektum legfontosabb metódusai a dokumentum tartalmának módosítását szolgálják. A dokumentum megnyitását (document.open) követıen komplett HTML elemeket építhetünk be az aktuális dokumentumba a document.write metódus segítségével. A write metódus egyetlen paramétert vár: a HTML elemet string formában. A dokumentumba történı írások végeztével ki kell adni a document.close metódust, hogy az elvégzett módosítások a böngészıben is megjelenhessenek. Egy már letöltött dokumentumba új HTML elem is beépíthetı például valamilyen esemény hatására. A document.createelement metódus segítségével lehet létrehozni egy új HTML elemet. Az elemlétrehozás szintaktikai alakja a következı: oelem = document.createelement(stag) Az egyetlen paraméterbe a létrehozandó tag nevét kell elhelyeznünk. Az ily módon létrehozott HTML elemet tetszıleges helyre beilleszthetjük a már kész és letöltött HTML dokumentumba az insertadjacentelement vagy az insertbefore metódus segítségével. A 4-4. kódrészlet a dinamikus elembeillesztésre mutat példát: <HTML> <HEAD> <TITLE> Mintaprogram a dinamikus beillesztésrıl </TITLE> <SCRIPT LANGUAGE="VBScript"> Function Beilleszt Dim UjElem Set UjElem = document.all.item("kakukk") If UjElem Is Nothing Then Set UjELem = document.createelement("h2") Parag.insertAdjacentElement "BeforeBegin",UjElem UjElem.ID = "Kakukk" End If UjElem.innerText = "Helló, " & UserNev.value End Function </SCRIPT> </HEAD> <BODY> <INPUT TYPE="TEXT" ID=UserNev> <BUTTON onclick="beilleszt()">üdvözlés</button> <P ID=Parag>Itt még további szövegek lehetnek </BODY> </HTML> 4-4. kódrészlet A fenti kódrészletben a UserNev nevő beviteli mezı kitöltése, majd az Üdvözlés gomb lenyomása után a Beilleszt függvény hajtódik végre. A függvény egy kakukk nevő (ID-jő) új HTML elemet vesz fel a Parag nevő paragrafus elé, de csak abban az esetben, ha még nincs
14 Kliensoldali scriptek használata a DHTML-ben ilyen a HTML lapon. Az új HTML elem innertext tulajdonsága fogja a képernyın megjelenı szöveget tartalmazni. 1.6.2. A document objektum legfontosabb tulajdonságadatai A document objektum 35 tulajdonságadata közül az egyik legfontosabb a document.body, mellyel az aktuális dokumentum BODY eleme érhetı el. A document.cookie segítségével a felhasználó gépén tárolt ideiglenes adatok (sütik) érhetık el. A document.title a dokumentum címsorát azonosítja. 1.6.3. A document objektum eseményei Az eseményeket a következı táblázat foglalja össze: Esemény Onclick Oncontextmenu Ondblclick Ondrag Ondragend Ondragenter Ondragleave Ondragstart Ondrop Onhelp Onkeydown Onkeypress Onkeyup Onmousedown Onmousemove Onmouseout Onmouseover Onmouseup onpropertychange Esemény Leírás A bal egérgomb lenyomása az adott dokumentumban. A jobb egérgomb lenyomása a kliens területen. Duplakattintás a dokumentumban. A vonszolás alatt folyamatos fellép a forrásobjektumnál. A vonszolási mővelet végén lép fel a forrásobjektumra vonatkozóan. Akkor lép fel, amikor a vonszolás olyan területre ér, ahol a célobjektum érvényes lehet. Akkor lép fel, amikor a vonszolás során az egér elhagy egy olyan területet, ahol a célobjektum érvényes lett volna. A vonszolás elején lép fel a forrásobjektumra vonatkozóan. A célobjektumra vonatkozóan lép fel a vonszolás befejezésekor, amikor az egér gombot felengedte a felhasználó. F1 gombra jön elı. Egy billentyő lenyomására lép fel. Egy billentyő lenyomása és felengedése után lép fel. Egy billentyő felengedése után lép fel. Egérgomb lenyomása a dokumentumban. Egér mozgatása a dokumentumban. Akkor lép fel, amikor az egérpointer elhagyja a dokumentumot. Akkor lép fel, amikor az egérkurzor a dokumentumhoz érkezik. Egérgomb felengedése. Akkor lép fel, amikor a dokumentum valamelyik tulajdonságadata megváltozik. Leírás onreadystatechange Akkor lép fel, amikor a dokumentum készenléti állapota
A document objektum 15 1.6.4. A document objektum kollekciói (readystate tulajdonságadat) megváltozik. A document objektumnál létezı 14 lehetséges győjtemény közül hármat emelünk ki: az all, a frames és a forms győjteményt. Az all győjtemény az adott dokumentum összes objektumát tartalmazza. Egy konkrét névvel ellátott elem eléréséhez az item metódust kell használni a következı szintaktika alapján: oelem = document.all.item(vindex[,ialindex]) Az elsı paraméter vagy egy numerikus sorszám 0-tól indítva, vagy egy string, amely a keresett elem nevét (name) vagy azonosítóját (ID) tartalmazza. Ha az adott névvel több elem is található, akkor a második paraméter ad lehetıséget az azonos nevő elemek közül a megadott sorszámú elem elérésére. A frames győjtemény kezelése megegyezik a window objektum kollekciójánál leírtakkal (lásd 4.5.4 rész.) A forms győjtemény az adott dokumentumon található HTML őrlapokat (<FORM> elemeket) azonosítja. A forms győjtemény használatát lásd a form objektum leírásánál.
16 Kliensoldali scriptek használata a DHTML-ben 1.7. A navigator objektum A navigator objektum a felhasználó által használt böngészırıl szolgáltat információt. A kapott információ a navigator objektum tulajdonságadataiból olvasható ki. A lehetséges tulajdonságadatok a következı táblázatban láthatók: Tulajdonság appcodename appminorversion appname appversion browserlanguage cookieenabled cpuclass Online Platform systemlanguage useragent userlanguage Leírás A böngészı kódolt neve (pl. Mozilla az IE-nél) A minor verzió neve. A böngészı neve. A böngészı platformja és verziója. A böngészı nyelve. A kliensoldali cookie engedélyezett-e. A felhasználói gép CPU osztálya (pl. x86, Alpha) Azt adja meg, hogy a böngészı most éppen online vagy offline módban mőködik-e. A platform neve. A rendszer alapértelmezésbeli nyelve. A HTTP user-agent request header-t adja vissza string-ként. Az aktuális felhasználói nyelvet adja vissza. 1.8. Az event objektum Egy event objektum az adott weblapon fellépett eseményrıl szolgáltat részletes információt. Többek között ebbıl derül ki, hogy melyik objektumnál lépett fel az esemény, milyen típusú esemény történt, mi volt az egér x-y koordinátája, amikor az esemény fellépett, stb. A navigator objektumhoz hasonlóan itt is a tulajdonságadatok hordozzák az információt. A legfontosabb tulajdonságadat az event.srcelement, ami az eseményt kiváltó objektumot adja vissza. A bekövetkezett esemény nevét az event.type szolgáltatja. Az onpropertychange eseménynél fontos szerepe van az event.propertyname tulajdonságnak, mivel ebbıl derül ki, hogy melyik tulajdonságadat változott meg. Egérmozgatási eseményeknél (onmouseover, illetve onmouseout) jut szerephez az event.fromelement, illetve az event.toelement adat. Ezek közül az elsı azt az objektumot adja vissza, amelyrıl éppen most mozdult el az egérkurzor, míg a második azt, amelyikre éppen rálépett az egér. Az event.returnvalue adatba kerülhet az eseménykezelési eljárás által visszaadott érték. Ennek például az onbeforeunload eseménynél van különös szerepe (lásd ott). A DHTML-ben az események egy része buborékszerően terjed tovább a kiváltó objektumtól a szülı objektumok felé egészen a window objektumig. Ezt nevezik event bubbling technikának. Egy ilyen buborékos esemény tehát egymás után több eseménykezelı eljárás végrehajtását is kiválthatja. Egy onmouseover eseménynél egy adott HTML taghoz rendelt
A form objektum 17 eseményvezérlı eljárás, majd a dokumentumhoz kapcsolt eljárás, végül a window objektumhoz rendelt eljárás is lefut. Az event.cancelbubble tulajdonságadat logikai igazra állításával az esemény továbbterjedése leállítható. Az 4.5 kódrészlet egy példát mutat az események buborékos továbbítására és a leállításra. <HTML> <SCRIPT LANGUAGE="JScript"> function Leallit() if (window.event.shiftkey) window.event.cancelbubble = true; function Kiir() if (window.event.srcelement.tagname == "BUTTON") alert(window.event.srcelement.value); </SCRIPT> <BODY onclick="kiir()"> <BUTTON onclick="leallit()">indítás</button> </BODY> </HTML> 4-5. kódrészlet A 4-5. kódrészlet által bemutatott dokumentum egyetlen nyomógombot tartalmaz, melynek a lenyomásához a Leallit() függvény végrehajtását rendeltük. Ha a felhasználó a nyomógombra történı kattintás mellett lenyomta a Shift gombot is, akkor az eseménytovábbítást leállítjuk, így a BODY tagban beállított Kiir() függvény már nem kerül végrehajtásra. 1.9. A form objektum A form objektum a HTML őrlapot, azaz a <FORM> tagot reprezentálja. A form objektum különösen fontos szerepet kap a felhasználó által bevitt adatok ellenırzésében. A document.forms győjteménybıl az alapértelmezésbeli Item metódussal lehet egy adott form objektumot elérni, majd a kapott form objektum elements győjteménye szolgáltatja az őrlap input, select és textarea objektumait. Az adatkitöltési ellenırzést az adott őrlap onsubmit eseményéhez kell kapcsolnunk. Ha az eseménykezelı eljárás logikai hamis értékkel tér vissza, akkor az őrlapadatok szerver felé küldése nem történik meg. A 4-6. kódrészlet egy egyszerő példát mutat az adatellenırzés elvégzésére. <HTML> <HEAD> <TITLE>Feladat 4-6</TITLE> <SCRIPT LANGUAGE="JScript"> function Validate() var txtval = document.forms("form1").elements("txtnumdata").value; if (txtval == "" isnan(txtval)) alert("csak numerikus érték adható meg."); return false; return true;
18 </SCRIPT> </HEAD> <BODY> <FORM ID="Form1" METHOD="GET" ACTION="http://et/valami.asp" onsubmit="return(validate())"> Írjon be egy numerikus adatot: <INPUT TYPE="TEXT" ID="txtNumData"> <INPUT TYPE="SUBMIT" VALUE="Küldés"> </FORM> </BODY> </HTML> 4-6. kódrészlet A 4-6 kódrészletben a Form1 nevő őrlap egy txtnumdata azonosítójú beviteli mezıvel és egy Küldés feliratú nyomógombbal rendelkezik. A nyomógomb megnyomásakor az onsubmit eseményhez rendelt Validate() függvény hajtódik végre, és a függvény által visszaadott értéktıl függ, hogy mi történik. Ha a függvény logikai igaz értékkel tér vissza, akkor az ACTION attribútumban megnevezett ASP lapra kerül a vezérlés; hamis érték esetén maradunk a HTML őrlapon. A Validate() függvény a txtval változóba betölti a felhasználó által bevitt adatot. Ha a txtval üres vagy az IsNaN függvény nem találja numerikusnak a bevitt értéket, akkor a Csak numerikus érték adható meg üzenettel utasítjuk el a valami.asp lap meghívását.