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: <SCRIPT LANGUAGE=VBScript> ...
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. <SCRIPT LANGUAGE=JScript> ...
4-3. kódrészlet
5
Programozás VBScriptben és JScriptben
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
JScript
’ ’ a d
// Mintaprogram az utasítások // szemléltetésére JScriptben a = b + c; d = window.open(); // ablaknyitás
Mintaprogram az utasítások szemléltetésére VBScriptben = b + c = 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
Mod
%
Összeadás
+
+
Kivonás
–
–
Negáció
Not
!
<, >, <=, >=, ==, <>
<, >, <=, >=, ==, !=
AND
&&
OR
||
String konkatenálás
&
+
Objektum ekvivalencia
Is
nincs
Modulus képzés (osztás maradéka)
Kisebb, nagyobb, kisebb egyenlı, nagyobb egyenlı, egyenlı, nem egyenlı Logikai ÉS mővelet Logikai VAGY mővelet
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.
7
Programozás VBScriptben és JScriptben VBScript
JScript
Dim a Dim Tomb(100) Dim Szoveg a = 256 Szoveg = ”Vizsga” Tomb(0) = 35
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 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
VBScript példa
JScript példa
If a=5 Then c=a+b
If (a==5) c=a+b;
If a=5 Then c=a+b msgbox ”Kakukk” End If
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”); }
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
8
Kliensoldali scriptek használata a DHTML-ben Vezérlıszerkezet Feltételes ciklus (elıl tesztelı)
Feltételes ciklus (elıl tesztelı)
VBScript példa
JScript példa
Do While i < 100 Ossz = Ossz + Ktsg(i) i = i + 1 Loop Do Until i=100 Ossz = Ossz + Ktsg(i) i = i + 1 Loop
Számolt ciklus
For i=0 To 99 Step 1 Ossz = Ossz + Ktsg(i) Next
Számolt ciklus tömb és konténer esetén
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
Sub Valami(Para1, Para2) ’ ide jön az eljárás teste End Sub
–
Eljárás meghívása
Valami Arg1, Arg2
–
Függvény
Függvény meghívása
Function Kakukk(Para1, Para2) ’Ide jön a függvény teste Kakukk = Ertek ’Visszaadott érték End Function
function Kakukk(Para1, Para2) { // Ide jön a függvény teste return Ertek }
Eredmeny = Kakukk(Arg1,Arg2)
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.
9
A DHTML programozása Függvény alert prompt MsgBox
VBScript példa
JScript példa
alert ”Most szóltam”
alert(”Most szóltam”)
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 a
b
c
VBScript példa <SCRIPT LANGUAGE=”VBScript”> Sub Window_OnLoad MsgBox ”Bejött” End Sub ’ További eseményvezérelt ’ eljárások <SCRIPT LANGUAGE=”VBScript” FOR=Window EVENT=OnLoad> MsgBox ”Bejött”
JScript példa <SCRIPT LANGUAGE=”JScript”> window.onload() { alert (”Bejött”); } // További eljárások, ha vannak <SCRIPT LANGUAGE=”JScript” FOR=window EVENT=onload> alert (”Bejött”);
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: <TITLE> Mintaprogram a dinamikus beillesztésrıl <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
Itt még további szövegek lehetnek
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
Leírás
Onclick
A bal egérgomb lenyomása az adott dokumentumban.
Oncontextmenu
A jobb egérgomb lenyomása a kliens területen.
Ondblclick
Duplakattintás a dokumentumban.
Ondrag
A vonszolás alatt folyamatos fellép a forrásobjektumnál.
Ondragend
A vonszolási mővelet végén lép fel a forrásobjektumra vonatkozóan.
Ondragenter
Akkor lép fel, amikor a vonszolás olyan területre ér, ahol a célobjektum érvényes lehet.
Ondragleave
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.
Ondragstart
A vonszolás elején lép fel a forrásobjektumra vonatkozóan.
Ondrop
A célobjektumra vonatkozóan lép fel a vonszolás befejezésekor, amikor az egér gombot felengedte a felhasználó.
Onhelp
F1 gombra jön elı.
Onkeydown
Egy billentyő lenyomására lép fel.
Onkeypress
Egy billentyő lenyomása és felengedése után lép fel.
Onkeyup
Egy billentyő felengedése után lép fel.
Onmousedown
Egérgomb lenyomása a dokumentumban.
Onmousemove
Egér mozgatása a dokumentumban.
Onmouseout
Akkor lép fel, amikor az egérpointer elhagyja a dokumentumot.
Onmouseover
Akkor lép fel, amikor az egérkurzor a dokumentumhoz érkezik.
Onmouseup
Egérgomb felengedése.
onpropertychange
Akkor lép fel, amikor a dokumentum valamelyik tulajdonságadata megváltozik.
Esemény
Leírás
onreadystatechange
Akkor lép fel, amikor a dokumentum készenléti állapota
15
A document objektum (readyState tulajdonságadat) megváltozik.
1.6.4. A document objektum kollekciói 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 (
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.
