1 / 31

JavaScript a gyakorlatban

JavaScript a gyakorlatban. 3. Gyakorlat. DOM (Document Object Model). Document Object Model.

dennis
Télécharger la présentation

JavaScript a gyakorlatban

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript a gyakorlatban

  2. 3. Gyakorlat • DOM (Document Object Model)

  3. 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.

  4. 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.

  5. DOM

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 4. gyakorlat • Események kezelése • Ablakok, keretek • Navigálás • Űrlapok adatai • Egyedi objektumok kezelése

  12. 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();

  13. 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

  14. Események • Az egér 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)

  15. JS0401.js // JavaScript function DisplayKey(e){ if (e.keyCode) keyCode=e.keyCode; else keyCode=e.which; ch=String.fromCharCode(keyCode); window.status += ch; } 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

  16. <!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

  17. Események kezelése JS0402.js // JavaScript function describe(text){ window.status=text; return true; } function clearstatus(){ window.status=" "; }

  18. 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();

  19. <!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

  20. Ablakok • Ablakok mozgatása és átméretezése: • 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

  21. 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]

  22. Ű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:

  23. Ű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!’);”>

  24. Ű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

  25. Ű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;

  26. 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>

  27. Ű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."); return false; } if (document.form1.phone.value.length < 3){ alert("Please enter your phone number."); return false; } return true; }

  28. 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

  29. 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; }

  30. 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();

  31. 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));

More Related