"Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS. M6 Modul: A DOM Modell

Átírás

1 "Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS M6 Modul: A DOM Modell

2 Bevezető - platform- és nyelvfüggetlen programozási interfész - tartalom-, szerkezet- és stílus-elérés/módosítás - a dokumentumok szerkezetét és az elemekkel végezhető műveleteket definiálja - DOM szintek: - Level 0: 1996, nincs standard - Level 1: 1998, HTML és XML modellezése - Level 2: 2000, események, CSS - Level 3: 2004, billentyűzet események

3 DOM események - események előidézése - eseményekezelők - JavaScript és Java csatolás Abort - érvényesség: képekre - kiváltja: a kép feltöltésének megszakítása - használat: figyelmeztetés - eseménykezelő: onabort

4 Blur - érvényesség: ablakra és űrlapelemek - kiváltja: a beviteli fókusz elveszítése - használat: mező ellenőrzés, alapértelmezett szöveg, video leállítás, stb. - eseménykezelő: onblur Change - érvényes: beviteli mezők, szövegmező, választólista - kiváltja: adatmódosítás - használat: mező ellenőrzés, más elemre való kihatás, stb. - eseménykezelő: onchange

5 Click - érvényes: bármilyen megjelenített elemre - kiváltja: azegérrel való kattintás - használat: űrlap ellenőrzés, más elemre való kihatás, stb. - eseménykezelő: onclick Error - érvényes: képek, ablak - kiváltja: hiba az ablak vagy kép betöltésekor - használat: dokumentum szerkezetének korrigálása, kép lecserélése - eseménykezelő: onerror

6 Focus - érvényes: ablakra és űrlapelemek - kiváltja: a fókusz megszerzése - használat: a Blur-el összehangolt műveletek - eseménykezelő: onfocus KeyDown - érvényes: dokumentumok, képek, linkek, szövegmezők - kiváltja: a bilenytű lenyomása - használat: játékok készítése eseménykezelő: onkeydown

7 KeyUp - érvényes: dokumentumok, képek, linkek, szövegmezők - kiváltja: a lenyomott bilenytű felengedése - használat: a KeyDown-al összehangolt műveletek - eseménykezelő: onkeyup KeyPress - érvényes: dokumentumok, képek, linkek, szövegmezők - kiváltja: bilenytű megnyomása - használat: bevitli mezőknél ENTER vizsgálata - eseménykezelő: onkeypress

8 Load - érvényes: a dokumentum törzse (body) - kiváltja: a teljes oldal betöltése - használat: képek váltogatása képgalériák esetén - eseménykezelő: onload Unload - érvényes: a dokumentum törzse (body) - kiváltja: az oldal elhagyása - használat: figyelmeztetés módosítás elvesztéséről - eseménykezelő: onunload

9 MouseDown - érvényes: bármilyen megjelenített elemre - kiváltja: az egérgomb lenyomása - használat: saját görgetősáv - eseménykezelő: onmousedown MouseUp - érvényes: bármilyen megjelenített elemre - kiváltja: az egérgomb lenyomása - használat: a MouseDown-al összehangolt esemény - eseménykezelő: onmouseup

10 MouseOver - érvényes: bármilyen megjelenített elemre - kiváltja: az egeret az elem fölé visszük - használat: saját görgetősáv - eseménykezelő: onmousedown MouseOut - érvényes: bármilyen megjelenített elemre - kiváltja: az egeret az elem fölül elvisszük - használat: a MouseOver-al összehangolt esemény, menüpont - eseménykezelő: onmouseout

11 Move - érvényes: ablak - kiváltja: az ablak mozgatása - használat: kevésbé implementált esemény - eseménykezelő: onmove Reset - érvényes: reset típusú beviteli mező - kiváltja: az űrlap alapértékeinek visszaállítása - használat: extra beállítások, figyelmeztetés adatok elvesztéséről - eseménykezelő: onreset

12 Resize - érvényes: ablak - kiváltja: az ablak átméretezése - használat: oldal szerkezetének átalakítása, méret visszaállítása - eseménykezelő: onresize Submit - érvényes: űrlap - kiváltja: az űrlap elküldésének kezdeményezése - használat: űrlapellenőrzés, figyelmeztetés, szabályzat elfogadása - eseménykezelő: onsubmit

13 A HTML DOM szerkezet

14 A Window objektum - a böngésző ablakát írja le - az egész dokumentumra kiható metódusokat és tulajdonságokat tartalmaz - menüponthoz, beállításokhoz NEM férünk hozzá

15 document -a megjelenített dokumentumot lehet elérni -ezen keresztűl lehet ezt módosítani location - nem a DOM része, hanem JavaScript objektum -aktuális documentum URL-je -nem a document-hez tartozik! -JavaScript átirányítás: <script type="text/javascript"> window.location = " //document.location = " </script>

16 status - a böngésző üzenetsora -Firefox-ban kikapocsolva, ebgedélyezés: about:config; a dom.disable_window_status_change false-ra állítani -nem a document-hez tartozik! -JavaScript átirányítás: <script type="text/javascript"> window.status="az oldal betöltve!"; </script>

17 screen - nem a DOM része, hanem JavaScript objektum -képernyővel kapcsolatos információk -csak olvasható -képernyő felbontásának kiírása: <script type="text/javascript"> document.write( "felbontás: " + window.screen.width + "x"+window.screen.height ); </script>

18 history - nem a DOM része, hanem JavaScript objektum - eddig látogatott oldalak URL-jét tárolja - navigálás ezek között - csak olvasható - Navigálás a History objektummal: <body> <a href="javascript:history.back()">eloző oldal</a><br> <a href="javascript:history.forward()">következő oldal</a><br> <a href="javascript:history.go(-1)">előző oldal go-val</a><br> </body>

19 alert() - üzenetablak megjelenítése - példa: <script type="text/javascript"> alert("ma Mercédesz napja van,\n" + "köszöntse fel ilyen nevu hölgyismeroseit vagy az autóját :)!" ); </script>

20 confirm() - párbeszédablak megjelenítése - Ok és Cancel opciók - eredménye true vagy false - szabályzat elfogadása és átirányítás: <body> <script type="text/javascript"> if ( confirm("elfogadom a szabályzatot!") ) window.location="elfogadva.html"; </script> Ön nem fogadta el a szabályzatot! </body>

21 propmpt() - egysoros beviteli mező megjelenítése - kartakterláncot térít vissza - bekért oldal megnyitása: <body> <script type="text/javascript"> var url = prompt("url ahova lépjünk:"); if ( url!= null ) window.location = url; </script> </body>

22 setinterval(), clearinterval() - setinterval(): periodikusan végrehajt egy kód megadása - clearinterval(): a végrehajtott kód inaktiválása settimeout(), cleartimeout() - settimeout(): időzitett kód beállítása cleartimeout(): a kód inaktiválása, lejárta elött konkrét példák a későbbi modulokban

23 open() - új ablakban nyit meg egy megadott URL-t - URL megnyitása új ablakban: <body> <img src="kepek/kicsi.jpg" onclick= window.open("dom_close.html","","width=400,height=400"); > </body> close() - open-al megnyitott ablakban bezárása - ablak bezárása: <body> <img src="kepek/nagy.jpg"> <br><a href="javascript:window.close();">[bezár]</a> </body>