event objektum • Egy esemény bekövetkeztekor szükségünk lehet az esemény további adataira is. • A DOM-ban ezek az adatok az event objektumban találhatók. • Az Internet Explorer és a Mozilla alapú böngész k event objektuma más-más tulajdonságokkal rendelkezik.
Internet Explorer • ctrlkey : az esemény során le volt-e nyomva a CTRL billenty • shiftkey : az esemény során le volt-e nyomva a SHIFT billenty • keyCode : a lenyomott billenty unikódja • srcElement : az objektum, ahol az esemény bekövetkezett.
• A JavaScript programok nem feltétlenül sorról sorra futnak le. • Az egyes részletek lefuttatása a böngész ben bekövetkez eseményekhez köthet .
Internet Explorer • button : A lenyomott egérgomb. A bal gomb értéke 1, a jobb gombé általában 2. • clientX : az esemény bekövetkeztének távolsága az ablak bal szélét l képpontokban. • clientY : az esemény bekövetkeztének távolsága az ablak tetejét l képpontokban. • altkey : az esemény során le volt-e nyomva az ALT billenty
Mozilla Firefox • modifiers : Az esemény során melyik módosító billenty t nyomták le (ALT, CTRL, SHIFT) • pageX : az esemény bekövetkeztének távolsága az ablak bal szélét l képpontokban. • pageY : az esemény bekövetkeztének távolsága az ablak tetejét l képpontokban.
1
Mozilla Firefox • which : a lenyomott billenty unikódja • button : a lenyomott egérgomb. A bal gomb értéke 0, a jobb gombé 2. • target : az objektum, ahol az esemény bekövetkezett.
Események, tulajdonságok • Az eseménykezel knek megfeleltethet k az objektumok tulajdonságai. • A tulajdonságok neve ugyanaz, csak csupa kisbet vel írjuk ket.
Az egér eseményei
Az egér eseményei
• onMouseOver : akkor következik be, ha az egérmutatót az objektum fölé húzzuk. • onMouseOut : akkor következik be, ha az egérmutató elhagyja az objektumot. • onMouseMove : akkor következik be, ha az egérmutatót mozgatják. • onClick : akkor következik be, ha egy objektumra kattintunk.
• onDblClick : akkor következik be, ha az objektumon duplán kattintunk. • onMouseDown : az egérgomb lenyomásakor következik be. • onMouseUp: az egérgomb felengedésekor következik be.
Feladat • Készítsünk olyan alkalmazást, amely egy linkre kattintva, egy szövegmez be írja ki az egerünk eseményeit!
function egerallapot(e){ if (!e) e = window.event; gomb = e.button; if (gomb < 2) melyik = "Bal"; else melyik = "Jobb"; szoveg = e.type + " : " + melyik +"\n"; document.urlap.info.value += szoveg; } obj = document.getElementById("tesztlink"); obj.onmousedown = egerallapot; obj.onmouseup = egerallapot; obj.onclick = egerallapot; obj.ondblclick = egerallapot;
Feladat • Készítsünk olyan alkalmazást, amely a leütött karaktereket megjeleníti a böngész ben!
<script language="JavaScript" type="text/javascript"> function kepernyore(e){ if (e.keyCode) kod = e.keyCode; else kod = e.which; kar = String.fromCharCode(kod); hely = document.getElementById("bekezdes"); hely.innerHTML += kar; }
A billenty zet eseményei • onKeyPress : billenty leütésekor • onKeyDown : billenty lenyomásakor • onKeyUp : billenty felengedésekor – A unikódból a JavaScriptben a fromCharCode függvény képes a karaktert visszaállítani.
Szövegszerkeszt
onLoad, onUnload • onLoad : akkor következik be, amikor az oldal a böngész be tölt dik • onUnload : akkor következik be, ha az oldal helyett új oldalt töltünk be, vagy bezárjuk a böngész ablakot
3
Feladat • Készítsünk olyan alkalmazást, amely linkekhez tartozó leírást jelenít meg kettes szint címsorként!
function kikereses(e){ if (!e) e = window.event; if (e.target) melyik = e.target.id; else melyik = e.srcElement.id; if (melyik == "suli") magyarazat = "Kiskunlacházi Szakközép- és Szakképz Iskola"; else if (melyik == "distro") magyarazat = "Linux disztribúciók"; else if (melyik == "gmail") magyarazat = "GMail levelez rendszer"; szoveg = document.getElementById("leiras"); szoveg.innerHTML = magyarazat; }
function torles(){ szoveg = document.getElementById("leiras"); szoveg.innerHTML = ""; }
A window objektum tulajdonságai • closed : bezárták-e? • defaultstatus : az állapotsor alapértelmezett üzenete • status : az állapotsor ideiglenes üzenete • frames[] : objektumok tömbje keretek számára • name : az ablak vagy keret neve • opener : az eredeti ablak
A window objektum tulajdonságai • parent : a keretet tartalmazó szül ablak • screen : az ablakot tartalmazó képerny l információkat szolgáltató gyermekobjektum • self : az aktuális ablak • top : a legfels szint ablak keretek esetén
4
Új ablak létrehozása • ablak = window.open("URL","Ablaknév", "Beállítások"); – URL : az ablakba betöltend dokumentum URL-je. – Ablaknév : az ablak neve – Beállítások : vessz vel elválasztva adhatjuk meg az ablak egyéb paramétereit.
Ablak bezárása • A f ablak ezzel a módszerrel nem zárható be. • close() • ablak.close();
Feladat • Készítsünk olyan alkalmazást, amely nyomógomb segítségével megnyit egy ablakot, majd egy másik nyomógombbal be is zárja azt!
Ablakok mozgatása, átméretezése
Feladat
• moveTo(x,y) : az ablakot az x,y koordinátájú helyre mozgatja • moveBy(x,y) : az ablakot az x,y koordinátákkal elmozgatja • resizeTo(x,y) : az ablakot x szélesség re és y magasságúra állítja • resizeBy(x,y) : a szélességet x értékével, a magasságot y értékével változtatja meg.
• Készítsünk olyan alkalmazást, ahol az ablak méretét és pozícióját szövegbeviteli mez kbe beírt értékeknek megfelel en lehet változtatni!
5
Id zítés • setTimeout("parancs",ezredmásodperc); • varakozas = ("alert('Letelt az id !')", 10000); – A visszaszámlálás a clearTimeout() függvény segítségével leállítható.
<script language="JavaScript" type="text/javascript"> function valtoztat(){ x = document.urlap.xpoz.value*1; y = document.urlap.ypoz.value*1; self.moveTo(x,y); x = document.urlap.szel.value*1; y = document.urlap.mag.value*1; self.resizeTo(x,y); }
Feladat • Készítsünk olyan alkalmazást, amely 2 másodpercenként frissíti az oldal tartalmát, és kiírja a frissítések számát! • Nyomógombbal legyen lehet ség a számláló nullázására és a frissítés leállítására!
<script language="JavaScript" type="text/javascript"> var szamlalo = 0; idozito = window.setTimeout("frissites();",2000); function frissites(){ szamlalo++; document.urlap.szoveg.value = "A frissítések száma: " +szamlalo; idozito = window.setTimeout("frissites();",2000); }
6
Párbeszédablakok • alert("üzenet") : megjeleníti a szöveget és egy OK gombot • confirm("üzenet") : megjeleníti a szöveget, egy OK és egy Mégse gombot. A függvény visszatérési értéke OK esetén true, Mégse esetén false • prompt("üzenet","szöveg") : megjelenik az üzenet és egy szövegbeviteli mez ben a szöveg, ami átírható. Visszatérési értéke az, ami a szövegbeviteli mez tartalma volt akkor, amikor a párbeszédes ablakot bezárták.
A frames tömb • A keretekre hivatkozhatunk a nevükkel • De hivatkozhatunk rájuk a frames[] tömb segítségével is. – frames[0] : balfelso – frames[1] : jobbfelso – frames[2] : balalso – frames[3] : jobbalso
Keretek
Feladat • Készítsünk olyan alkalmazást, amely az el keretes elrendezésben két számot bekér a balfels keretben, az összeget valamelyik másik keretben írja ki, attól függ en, hogy melyik nyomógombot nyomtuk meg. – A megoldásom csak Internet Explorerben ködik!
<script language="JavaScript" type="text/javascript"> function osszeg(keretnev){ keret = parent[keretnev]; keret.document.open(); x = document.urlap.szam1.value*1; y = document.urlap.szam2.value*1; z = x + y; keret.document.write("Az összeg: "+z); }
7
rlapok • • name : az rlap neve • method : GET vagy POST, ezekkel lehet az adatokat továbbítani • action : valamilyen szerveroldali szkript (CGI, PHP) dolgozhatja fel az adatokat, vagy a mailto protokollal el lehet küldeni e-mailben • enctype : az rlap adatainak kódolásához szükséges MIME típus.
A form objektum tulajdonságai • action : az a program, amelynek az rlapot továbbítjuk • encoding : az rlap MIME típusa • length : az rlapon lév elemek száma • method : az rlap továbbításának módja • target : a feldolgozás során visszakerül végeredmény célja.
rlap események • onSubmit : az rlap elküldésekor következik be • onReset : az rlapmez k törlésekor következik be.
Hivatkozás az rlapokra • Vagy a form nevével, vagy a forms[] tömb felhasználásával • document.urlap • document.forms[0]
rlapok elküldése, törlése • submit() : az rlap elküldése • reset() : az rlap mez inek törlése
Az rlapok eseményei • Az rlapok elemeit az elements tömbön keresztül érhetjük el. • Az egyes elemeket a tömbön belüli sorszáma határozza meg egyértelm en • De hivatkozhatunk rájuk a nevükkel is. • document.urlap.elements[0] • Document.urlap.szam1 – A document.urlap.elements.length a form elemeinek a számát adja.
• Az rlapelemet a document.getElementById("név") függvénnyel is elérhetjük.
8
Szövegmez k • • name : a mez nek adott név • defaultValue : a kezdeti szöveg • value : az aktuális szöveg
Szövegdoboz •
A szövegmez és a szövegdoboz eseménykezel i • onFocus : a mez megkapja a fókuszt • onBlur : a fókusz elhagyja a mez t • onChange : a felhasználó módosítja a tartalmat és arrébb viszi a fókuszt • onSelect : A felhasználó kijelöli a szöveget, vagy annak egy részét
Szövegmez k használata • x = document.urlap.szoveg1.value; – A szövegmez tartalmát elhelyezzük az x változóba.
• document.urlap.szoveg1.value = x; – Az x változó tartalmát megjelenítjük a szövegmez ben.
A szövegmez és a szövegdoboz függvényei • focus() : A szövegbevitel helyét, vagyis a villogó kurzort az objektumra helyezi • blur() : A fókuszt eltávolítja a mez l • select() : kijelöli az objektumban lév szöveget, mintha a felhasználó kijelölte volna.
Gombok • • type="submit" : az rlap elküldésére szolgáló gomb • type="reset" : az rlap tartalmának törlésére szolgáló gomb • type="button" : általános célú nyomógomb • name : a gomb neve • value : a gomb felirata
9
Eseménykezel k • A submit és reset gombok lenyomását a már említett, rlaphoz rendelhet onSubmit és onReset eseménykezel k érzékelik • A button eseménykezel je az onClick
Jelöl négyzetek • document.urlap.valasztas1.checked = true; – A jelöl négyzetbe bekerül a pipa
• click() : a négyzetre kattintást utánozza • onClick : a négyzetre való kattintáskor következik be.
Tulajdonságok • • • •
name : név length : hossz value : érték defaultChecked : a gomb alapértelmezett állapota • checked : az aktuális állapot • A jelöl négyzethez hasonlóan megtalálható a click() függvény és az onClick eseménykezel
Jelöl négyzetek • • name : a jelöl négyzet neve • value : a továbbítandó érték • defaultChecked : az alapértelmezett állapot • checked : az aktuális érték, true vagy false
Választógombok • Egyik lehet ség • Másik lehet ség • Harmadik lehet ség – Az egy csoporthoz tartozó gomboknak ugyanaz a nevük.
