Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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

Hasonló előadás


Az előadások a következő témára: "JavaScript a gyakorlatban. 3. Gyakorlat DOM (Document Object Model)"— Előadás másolata:

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 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 3.1 feladat 3.1 feladat Légy üdvözölve! 3.1 feladat 3.1 feladat Légy üdvözölve! 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 elempárt használni) pl. Kattints ide! 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.: Kattints ide  onDblClick  onMouseDown, onMouseUp: A billentyűzet eseményei:  onKeyPress:  onKeyDown,onKeyUp:event.which (Netscape), event.keyCode (Explorer)

15 Események kezelése 4.1 feladat 4.1 feladat Légy üdvözölve! 4.1 feladat 4.1 feladat Légy üdvözölve! JS0401.html // JavaScript function DisplayKey(e){ if (e.keyCode) keyCode=e.keyCode; else keyCode=e.which; ch=String.fromCharCode(keyCode); window.status += ch; } // JavaScript function DisplayKey(e){ if (e.keyCode) keyCode=e.keyCode; else keyCode=e.which; ch=String.fromCharCode(keyCode); window.status += ch; } JS0401.js

16 4.2 feladat 4.2 feladat Légy üdvözölve! 1. óra összefoglalója 2. óra összefoglalója 4.2 feladat 4.2 feladat Légy üdvözölve! 1. óra összefoglalója 2. óra összefoglalója JS0402.html

17 JS0402.js Események kezelése // JavaScript function describe(text){ window.status=text; return true; } function clearstatus(){ window.status=" "; } // 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 4.3 feladat 4.3 feladat Légy üdvözölve! 4.3 feladat 4.3 feladat Légy üdvözölve! 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.: 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.: -text objektum: name, defaultValue(nem módosítható), value paraméterek document.szoveg1.value = “Nagy Jenő”; Többsoros szövegmező: 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.

24 Űrlapok kezelése Gombok: type=submit, reset, button típusú gombok léteznek Jelölőnégyzet: (defaultChecked paraméter is létezik ezen kívül a JavaScriptben) click() metódus, onclick eseménykezelő Választógomb: 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 4.4 feladat 4.4 feladat Légy üdvözölve! 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 ben. Név: Cím: Tel.: 4.4 feladat 4.4 feladat Légy üdvözölve! 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 ben. Név: Cím: Tel.:

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; } // 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 = " Name: " + this.name + " \n"; line2 = " Address: " + this.address + " \n"; line3 = " Work Phone: " + this.workphone + " \n"; line4 = " Home Phone: " + this.homephone + " \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”,” ”,” ”); 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 JS0405.js Objektumpéldányok létrehozása //JavaScript function addhead (level) { html = "h" + level; text = this.toString(); start = " "; stop = " "; return start + text + stop; } String.prototype.heading = addhead; document.write ("Ez egy teszt".heading(2)); //JavaScript function addhead (level) { html = "h" + level; text = this.toString(); start = " "; stop = " "; return start + text + stop; } String.prototype.heading = addhead; document.write ("Ez egy teszt".heading(2));


Letölteni ppt "JavaScript a gyakorlatban. 3. Gyakorlat DOM (Document Object Model)"

Hasonló előadás


Google Hirdetések