javascript a gyakorlatban

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.

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>


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


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;


<!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));

javascript a gyakorlatban

Documents