"Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban"
JAVA ALAPÚ WEBPROGRAMOZÁS M6 Modul: A DOM Modell
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
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
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
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
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
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
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
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
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
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
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
A HTML DOM szerkezet
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á
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 = "http://www.ms.sapientia.ro"; //document.location = "http://www.ms.sapientia.ro";
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!";
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 );
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:
eloző oldal következő oldal előző oldal go-val
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 :)!" );
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:
<script type="text/javascript"> if ( confirm("Elfogadom a szabályzatot!") ) window.location="elfogadva.html"; Ön nem fogadta el a szabályzatot!
propmpt()
- egysoros beviteli mező megjelenítése - kartakterláncot térít vissza - bekért oldal megnyitása: <script type="text/javascript"> var url = prompt("URL ahova lépjünk:"); if ( url != null ) window.location = url;
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
open()
- új ablakban nyit meg egy megadott URL-t - URL megnyitása új ablakban:
close()
- open-al megnyitott ablakban bezárása - ablak bezárása:
[bezár]
