JavaScript a gyakorlatban
3. Gyakorlat DOM (Document Object Model)
Document Object Model A Document Object Model (DOM) egy olyan modell, amely leírja, hogy a HTML dokumentum egyes elemei (bekezdések, beviteli mezők, képek) hogyan viszonyulnak a legfelső szintű struktúrához: a document objektumhoz. A DOM-on keresztül módosíthatjuk, törölhetjük az elemeket, ill. új elemeket hozhatunk létre.
DOM szintek: A Level 0 DOM (Nulladszintű DOM) a Netscape 2 böngészőben jelent meg. A Netscape 4 és Explorer 4 két eltérő ún. Intermediate DOM-ot támogatott. A Level 1 DOM (Elsőszintű DOM) más néven W3C DOM a Mozillában és az Explorer 5-ben lett bevezetve.
DOM
Dokumentum objektum modell egymással gyerek-szülő kapcsolatban álló objektumok rendszere a webdokumentum teljes tartalmát és minden összetevőjét magukban foglalják ezek is rendelkeznek tulajdonságokkal hivatkozás: szülőobjektum.gyermekobjektum.tulajdonság a különböző böngészők nem ugyanúgy kezelik ezeket a beépített objektumokat lehetnek plusz tulajdonságok az egyes böngészők esetében
Objektumok használata I Window objektum: (ez képviseli a böngeszőablakot) window.status: böngésző állapotsorának megváltoztatása window.alert,window.confirm, window.prompt: üzenetablakok jeleníthetőek meg Document objektum: a document a window gyermeke(ha csak egy ablakkal dolgozunk nem kell kiírni) document.URL: egyszerű szöveges mező, melynek értéket nem lehet módosítani document.title: a jelenlegi oldal címét határozza meg document.referrer: az előzőleg látogatott oldal címe document.lastModified: az utolsó módosítás dátuma, ami a kiszolgáló gépről érkezik document.bgColor, document fgColor: háttér és szövegszín document.linkColor, document.alinkColor, document.vlinkColor document.cookie: sütikre hivatkozhatunk(erről majd később) document.write: szöveget ír a weboldal ablakába, a HTML oldal részeként document.writeln: sorzáró szöveg kiírására alkalmas
Objektumok használata II Hivatkozások és horgonyok: <a name=”masodik”>; <a href=”#masodik”>; a link objektumokat a links tömbbel érhetjük el document.links.length: az oldalon lévő hivatkozások számát jelzi pl. link1 = links[0].href: az első hivatkozás URL-jét egy változóhoz rendeli anchor ill. anchors tömb, használata megegyezik a link-el History objektum: (a már látogatott oldalak adatait tartalmazza, metódusai segítségével előre vagy hatra lapozhatunk a listában) history.length: az objektum egyetlen tulajdonsága history.go(): a zárójelek közé egy poz. vagy neg. számot kell írni history.back(): az előző oldalt tölti vissza history.forward(): az előző oldalt tölti be
Objektumok használata III Location objektum: window.location.href=”http://www.uni-pannon.hu” location.protocol(http) location.hostname(www.jsworkshop.com) location.port(80) location.pathname(test.cgi) location.hash(a horgony neve, ha van ilyen, #anchor) location.reload() újratölti az oldalt, location.replace() egy másik oldalra ugrik, de a history törlődik Navigator objektum: a böngésző változatszámának adatait tartalmazza
DOM <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>3.1 feladat</title> </head> <body> <h1>3.1 feladat</h1> <p>Légy üdvözölve!</p> <p> <a href="javascript:history.back();"> <img src="left.gif" alt="left.gif" /></a> <a href="javascript:history.forward();"> <img src="right.gif" alt="right.gif" /></a> </p> </body> </html> JS0301.html
4. gyakorlat Események kezelése Ablakok, keretek Navigálás Űrlapok adatai Egyedi objektumok kezelése
Események kezelése Interaktívvá teszik a weboldalakat, eseményeket észlelhetnek, billentyű lenyomásra, egérmozgatásra és válaszolhatnak is azokra. minden esemény egy objektumhoz tartozik!!! minden eseménynek van neve, pl. onMouseOver (ehhez nem kell a <script> </script> elempárt használni) pl. <a href=”http://jsworkshop.com/” onMouseOver=”window.alert(‘A hivatkozás fölé vitted az egérmutatót’);”>Kattints ide!</a> ha több utasításra van szükségünk, megadhatunk függvényt is az eseménykezelőnek, amit a fejlécben deklarálunk így is megadhatunk egy eseménykezelőt: document.onMouseDown = mousealert();
Event objektum ez tartalmazza a megtörtént esetre vonatkozó adatokat (megint csak nincs egységes szabvány) Explorer: event.button: a lenyomott egérgomb, bal = 1; jobb = 2; event.clientX: x koordináta ahol az esemény bekövetkezett event.clientY: …. event.altkey: event.ctrlkey: event.shiftkey: event.keyCode: a lenyomott billentyű Unicode-ja event.scrElement: az objektum, ahol az esemény bekövetkezett Netscape: event.modifiers: ctrl,shift vagy alt event.pageX: …. event.pageY: …. event.which: egér vagy billentyű kód event.target: az objektum, ahol az esemény bekövetkezett
Események Az egér eseményei: A billentyűzet eseményei: onMouseOver – onMouseOut onMouseMove: az esemény az egér mozgásakor jön létre, (ezt a böngészők alapértelmezés szerint nem támogatják) az egérgombok figyelése: onClick függvény: pl.: <a href=”http://index.hu/” onClick=”alert(‘Most elhagyod ezt az oldalt.’);”>Kattints ide</a> onDblClick onMouseDown, onMouseUp: A billentyűzet eseményei: onKeyPress: onKeyDown,onKeyUp: event.which (Netscape), event.keyCode (Explorer)
Események kezelése <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>4.1 feladat</title> <script type="text/javascript" src="JS0401.js"></script> </head> <body onKeyPress="DisplayKey(event);"> <h1>4.1 feladat</h1> <p>Légy üdvözölve!</p> </body> </html> JS0401.html // JavaScript function DisplayKey(e){ if (e.keyCode) keyCode=e.keyCode; else keyCode=e.which; ch=String.fromCharCode(keyCode); window.status += ch; } JS0401.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>4.2 feladat</title> </head> <body> <h1>4.2 feladat</h1> <p>Légy üdvözölve!</p> <script type="text/javascript" src="JS0402.js"></script> <ul> <li><a href="JS01.ppt" onMouseOver="describe('1. óra összefoglalója'); return true;" onMouseOut="clearstatus();">1. óra összefoglalója</a></li> <li><a href="JS02.ppt" onMouseOver="describe('2. óra összefoglalója'); return true;" onMouseOut="clearstatus();">2. óra összefoglalója</a></li> <li><a href="mailto:kzst@vision.vein.hu" onMouseOver="describe('e-mail küldése'); return true;" onMouseOut="clearstatus();">e-mail</a></li> </ul> </body> </html> JS0402.html
Események kezelése JS0402.js // JavaScript function describe(text){ window.status=text; return true; } function clearstatus(){ window.status=" ";
Ablakok és keretek használata egyszerre több ablak is lehet a képernyőn, a window objektum mindig az aktuális ablakra vonatkozik új ablakot a window.open() metódussal hozhatunk létre pl. winobj = window.open(“URL”, “ablaknev”, “Beallitasok”); az első a cím, ha üresen marad akkor üres ablak töltődik be, a második a window objektum name tulajdonságát tartalmazza, a későbbiekben ezzel a névvel tudunk hivatkozni rá, a harmadik paraméter el is hagyható paraméterek: width, height(pixelben), location, directories, status, menubar, scroolbars, resizable(1 vagy 0) pl. KisAblak = window.open(””,”kicsi”,”width=100, height=100, toolbar=0, status=0); window.close(): ablakot ezzel tudunk bezárni, pl. KisAblak.close();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>4.3 feladat</title> </head> <body> <h1>4.3 feladat</h1> <p>Légy üdvözölve!</p> <form name="winform" action="http://vision.vein.hu"> <input type="button" value="Új ablak megnyitása" onClick="NewWin=window.open('','NewWin', 'toolbar=no,status=no,width=200,height=100'); "> <p><input type="button" value="Új ablak bezárása" onClick="NewWin.close();" ></p> <p><input type="button" value="Fő ablak bezárása" onClick="window.close();"></p> </form> </body> </html> JS0403.html
Ablakok Ablakok mozgatása és átméretezése: Időzített tevékenység: a Netscape némi korlátozással de a Explorer 5-östől ezeket szabadon végezhetjük window.moveTo(): az ablakot új helyre mozgatja,X,Y koordináta megadása szükséges window.moveBy(): az ablakot a jelenlegi pozíciójához képest mozgatja el window.resizeTo(): ez állítja a méretet window.resizeBy(): a megadott értékekkel növeli vagy csökkenti Időzített tevékenység: window.setTimeout(): a megadott időtartam után, a megadott utasítás végrehajtódik, nem a programot állítja le, hanem csak annak végrehajtási idejét állítja be pl. varakozas = window.setTimeout(“alert(‘Letelt az idő!’)”,10000); meg is állíthatjuk a visszaszámlálást: window.clearTimeout(varakozas); parbeszedablakok: alert: egy általunk megadott szöveg és egy OK gomb található benne confirm: igen,nem kérdés, OK és Mégse gomb, true értekkel tér vissza ha OK, false ha Megse prompt: általunk megadott szöveg és egy beviteli mező, aminek érteke a visszatérési értek
Keretek pl.: <frameset rows=”*,*” cols=”*,*”> <frame name=”topleft” src=”topleft.htm”> <frame name=”topright” src=”topright.htm”> <frame name=”bottomleft” src=” bottomleft.htm”> <frame name=”bottomright” src=” bottomright.htm”> </frameset> minden egyes keretet a frame objektum képvisel a JavaScriptben ilyenkor a window objektum mindig az aktuális keretre vonatkozik a többi keretre a parent kulcsszó segítségével hivatkozhatunk, pl. parent.keret1 frames tömb: 0-val kezdődik a számozás itt is, a legkisebb értéket a dokumentum első frame-je kapja, pl.: parent.frames[0]
Űrlapok kezelése A HTML oldal minden egyes űrlapját egy form objektum képviseli a JavaScriptben a name mezőben beállított nevet veszi fel. Szintén van forms tömb, pl. document.forms[0] az egyes tulajdonságokat JavaScriptbol is beállíthatjuk, action: CGI program length: az űrlapon található elemek száma method: Post vagy Get target: az eredmények megjelenítésére szolgáló ablak,default: foablak onSubmit es onReset: ha visszatérési értékük true a benne foglaltatott utasításoknak akkor küldődik el illetve törlődnek az adatok elements tömb tartalmazza az űrlap elemeit, amikre a nevükkel is hivatkozhatunk, pl. document.megrendeles.elements[0] document.megrendeles.nev1 elements.length:
Űrlapok kezelése Szövegmező: - pl.: <input type=”text” name=”szoveg1” value=”hello” size=”30”> - text objektum: name, defaultValue(nem módosítható), value paraméterek document.szoveg1.value = “Nagy Jenő”; Többsoros szövegmező: <textarea> HTML elem Metódusok: focus(): aktívvá tesz egy mezőt, eben villog a kurzor blur(): a focus ellentéte select(): kijelöli egy mező tartalmat, szövegrészlet kijelölésére nincs lehetőség Eseménykezelők: onfocus: ha a szövegmező megkapja a fókuszt, akkor következik be onblur: ….. onchange: ha a felhasználó módosítja a szövegmezőt és arrébb viszi a fókuszt onselect: ha a felhasználó jelöli ki a szöveget vagy egy részét akkor következik be pl. <input type=”text” name=”szoveg1” onchange=”window.alert(‘Módosítva!’);”>
Űrlapok kezelése Gombok: type=submit, reset, button típusú gombok léteznek Jelölőnégyzet: <input type = “checkbox” name=”negyzet1” value=”yes” checked> (defaultChecked paraméter is létezik ezen kívül a JavaScriptben) click() metódus, onclick eseménykezelő Választógomb: <input type = “radio” name=”kapcs1” value=”első” checked> egyik lehetőség tulajdonsagai: name, length a radio objektumot tömbként kezelhetjük, minden gomb az alábbi tulajdonságokkal rendelkezik: value defaultChecked checked pl.: document.form1.kapcs1[0].checked = true; metódusa: click() eseménykezelője: onclick
Űrlapok kezelése Listák: (a listák objektuma a select, mely négy tulajdonsággal rendelkezik) name length(lehetőségek száma) options(a lehetőségeket tartalmazó tömb) selectedIndex(a kiválasztott lehetőség sorszamat adja vissza options tömb: length tulajdonsággal rendelkezik csak az options tömb minden eleme az alábbi tulajdonságokkal rendelkezik: index: a lehetőség sorszáma defaultSelected selected: a lehetőség aktuális állapota, true-false értéket vehet fel name: a NAME jellemző értéke, azaz a lehetőség neve text: a lehetőség szövege, értekét módosíthatjuk a select objektum metódusai: focus() blur() eseménykezelői: onfocus onblur onchange pl. index = document.urlap.lista.selectedIndex; value = document.urlap.lista.options[index].value;
JS0404.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>4.4 feladat</title> <script type="text/javascript" src="JS0404.js"></script> </head> <body> <h1>4.4 feladat</h1> <p>Légy üdvözölve!</p> <p>Töltsd ki az alábbi űrlapot! Ha kész vagy, nyomd meg az Ellenőriz gombot. Ha az adataidat rendesen kitöltötted, akkor elküldöm őket Neked e-mailben.</p> <form name="form1" action="mailto:kzst@vision.vein.hu" enctype="text/plain" onSubmit="return validate();"> <p><b>Név:</b> <input type="text" size="30" name="yourname"></p> <p><b>Cím:</b> <input type="text" size="40" name="address"></p> <p><b>Tel.: </b> <input type="text" size="15" name="phone"></p> <p><input type="submit" value="Ellenőriz"></p> </form> </body> </html>
Űrlapok kezelése JS0404.js // JavaScript function validate(){ if (document.form1.yourname.value.length < 1){ alert("Please enter your full name."); return false; } if (document.form1.address.value.length < 3){ alert("Please enter your address."); if (document.form1.phone.value.length < 3){ alert("Please enter your phone number."); return true;
Egyedi objektumok létrehozása első lépésben meg kell határoznunk az objektum nevét és tulajdonságait function Card(name,address,work,home) { this.name = name; this.address = address; this.workphone = work; this.homephone = home; } a this mindig az aktuális objektumra vonatkozik a függvény neve egyben az objektum neve is lesz
Metódusok létrehozása, beillesztése az objektumba function PrintCard(){ line1 = "<b>Name: </b>" + this.name + "<br />\n"; line2 = "<b>Address: </b>" + this.address + "<br />\n"; line3 = "<b>Work Phone: </b>" + this.workphone + "<br />\n"; line4 = "<b>Home Phone: </b>" + this.homephone + "<br />\n"; document.write(line1, line2, line3, line4); } be kell illeszteni a Card objektum létrehozó függvényébe: this.PrintCard = PrintCard; function Card(name,address,work,home){ this.name = name; this.address = address; this.workphone = work; this.homephone = home; this.PrintCard = PrintCard;
Objektumpéldányok létrehozása jeno = new Card(”Nagy Jenő”,”Egyetem u. 12”,”422-022”,”425-023”); nem szükséges az adatokat rögtön megadni, azokat kesébb is feltölthetjük: jeno = new Card(); megjelenítés: jeno.PrintCard();
Objektumpéldányok létrehozása JS0405.js //JavaScript function addhead (level) { html = "h" + level; text = this.toString(); start = "<" + html + ">"; stop = "</" + html + ">"; return start + text + stop; } String.prototype.heading = addhead; document.write ("Ez egy teszt".heading(2));