javascript a gyakorlatban
DESCRIPTION
JavaScript a gyakorlatban. 3. Gyakorlat. DOM (Document Object Model). Document Object Model. - PowerPoint PPT PresentationTRANSCRIPT
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>
<!DOCTYPE htmlPUBLIC "-//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.htmlJS0301.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:
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>
<!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.htmlJS0401.html
// JavaScriptfunction DisplayKey(e){
if (e.keyCode) keyCode=e.keyCode;else keyCode=e.which;
ch=String.fromCharCode(keyCode);window.status += ch;
}
// JavaScriptfunction DisplayKey(e){
if (e.keyCode) keyCode=e.keyCode;else keyCode=e.which;
ch=String.fromCharCode(keyCode);window.status += ch;
}
JS0401.jsJS0401.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:[email protected]"onMouseOver="describe('e-mail küldése'); return true;"onMouseOut="clearstatus();">e-mail</a></li>
</ul></body></html>
<!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:[email protected]"onMouseOver="describe('e-mail küldése'); return true;"onMouseOut="clearstatus();">e-mail</a></li>
</ul></body></html>
JS0402.htmlJS0402.html
JS0402.jsJS0402.js
Események kezelése
// JavaScriptfunction describe(text){
window.status=text;return true;
}function clearstatus(){
window.status=" ";}
// JavaScriptfunction 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>
<!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.htmlJS0403.html
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
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éseSzö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éseGombok: 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.htmlJS0404.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:[email protected]" 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>
<!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:[email protected]" 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éseJS0404.jsJS0404.js
// JavaScriptfunction 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;}
// JavaScriptfunction 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;}
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();
JS0405.jsJS0405.js
Objektumpéldányok létrehozása
//JavaScriptfunction 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));
//JavaScriptfunction 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));