Szabadkai Műszaki Szakfőiskola Web programozás dr Zlatko Čović chole@vts.su.ac.rs 1
DOM események (events) JavaScriptben interaktív programok készítésére az események által vezérelt programozási modellt használjuk. Ennél a programozási stílusnál a web böngésző eseményt (event) idéz elő minden alkalommal, amikor a a dokumentummal vagy valamely elemével "valami történik". Ha a JavaScript alkalmazást érdekli egy adott típusú elem valamely eseménye, létrehozhat eseménykezelő folyamatot (event handler) tehát JavaScript függvényt vagy kódrészletet. Amikor az adott esemény bekövetkezik, a web böngésző meghívja a kódot, hogy tudja kezelni az eseményt. Az eseményeket gyakran használják együtt a függvényekkel. A függvény addig nem kerül végrehajtásra, mielőtt az esemény megtörténik (például a felhasználó megnyomja az egér gombját). 2
Eseményeket feldolgozó eljárások és HTML elemek, amelyek támogatják 1/2 Eljárás Indul a következő helyzetekben Támogatja onabort A kép betöltése megszakad. <img> onblur onchange onclick A beviteli (input) mező elveszítette a fókuszt. A kiválasztott opció a <select> vagy más űrlap elemben nincs többé a fókuszban, és az értéke megváltozott azóta, mióta fókuszba került. Lenyomás és felengedés az egér gombján, ezután mouseup esemény következik. False értékkel tér vissza, hogy megszüntesse az alapértelmezett műveletet (pl. kövesse a linket, reset, űrlap küldése). <button>, <input>, <label>, <select>, <textarea>, <body> <input>, <select>, <textarea> A legtöbb elem. ondblclick Dupla kattintás az egér gombján. A legtöbb elem. onerror Hiba a kép betöltésekor. <img> onfocus Beviteli mező fókuszba kerül. <button>, <input>, <label>, <select>, <textarea>, <body> onkeydown onkeypress Billentyű le van nyomva a billentyűzeten. False értékkel tér vissza, hogy megszüntesse az alapértelmezett műveletet. Billentyű lenyomása a billentyűzeten; ezt követi a keydown esemény. False értékkel tér vissza, hogy megszüntesse az alapértelmezett műveletet. Űrlap elemei és <body> Űrlap elemei és <body> 3
Eseményeket feldolgozó eljárások és HTML elemek, amelyek támogatják 2/2 Eljárás Indul a következő helyzetekben Támogatja onkeyup Egy lenyomott billentyű felengedése; a keypress esemény után következik. Űrlap elemei és <body> onload Betöltődött a dokumentum. <body>, <frameset>, <img> onmousedown Az egérgomb lenyomása. A legtöbb elem. onmousemove Az egér elmozdul. A legtöbb elem. onmouseout Az egér mutatója elmozdul az elemről. A legtöbb elem. onmouseover Az egér mutatója az elem fölött van. A legtöbb elem. onmouseup Az egérgomb felengedése. A legtöbb elem. onreset Az űrlapon meg lett nyomva a reset gomb. False-ot ad vissza, hogy ezt megakadályozza. <form> onresize Az ablak mérete megváltozott. <body>, <frameset> onselect A szöveg ki van jelölve. <input>, <textarea> onsubmit onunload Az űrlap elküldése. False értékkel tér vissza, hogy megakadályozza a küldést. A dokumentum vagy a keretek el lettek távolítva a böngészőből. <form> <body>, <frameset> 4
Eseményeket feldolgozó eljárások mint attribútumok <input type="button" onclick="alert('hello VTS!')" value="click me" /> <input type="button" onclick="myfunction('hello!')" value="click me" /> <form method="post" action="login.php" onsubmit="return validateform();"> <body onload="myfunction()"> 5
Eseményeket feldolgozó eljárások mint tulajdonságok <script type="text/javascript"> function myfunction() { document.getelementbyid("my-link").onclick = gotovts; //document.getelementbyid("my-link").onclick = function() {alert("welcome to VTS");} // return false; } function gotovts() { alert("welcome to VTS"); } </script> </head> <body onload="myfunction()"> <a id="my-link" href="http://www.vts.su.ac.rs/">my link</a> </body> </html> 6
Window objektum metódusai Módszer alert() close() confirm() focus() moveby() moveto() open() print() prompt() resizeby() resizeto() Leírás Üzenetet (figyelmeztetést) és az OK gombot jeleníti meg. Bezárja az aktuális ablakot. Megjelenít egy párbeszédpanelt egy üzenettel, egy OK és Cancel gombbal. A fókuszt beálítja az aktuális ablakra. Az aktuális pozícióhoz képest mozgatja az ablakot. A megadott pozícióba mozgatja az ablakot. Megnyit egy új ablakot böngészőben. Nyomtatja az aktuális ablak tartalmát. Dialógusablakot jelenít meg, amelyben a felhasználótól adatbevitelt kér. Ablakméret módosítása egy adott számú pixellel. Átméretezi az ablakot adott szélességre és magasságra. Megjegyzés: A táblázat nem tartalmaz minden metódust. 7
String objektum metódusai Módszer charat() concat() indexof() lastindexof() slice() split() substr() substring() Leírás Visszaadja a megadott indexen levő karaktert. Két vagy több string összefűzése, és visszaadja az összefűzött szöveget. Egy adott érték első előfordulásának a pozícióját adja vissza a karakterláncban. Egy adott érték utolsó előfordulásának a pozícióját adja vissza a karakterláncban. Egy sztring egy részét kiveszi és visszaadja az új stringet. A sztringet részeire vágva tömbbe teszi. Karaktereket vesz ki egy sztringből, adott indextől meghatározott számú karaktert. Karaktereket vesz ki egy sztringből, adott indextől adott indexig. 8
String objektum metódusai Módszer tolowercase() tostring() touppercase() trim() valueof() Leírás Karakterlánc kisbetűssé alakítása. Visszaadja a sztring objektum értékét. Karakterlánc nagybetűssé alakítása. Eltávolítja a láthatatlan karaktereket a szöveg mindkét végén. A sztring objektum primitív értékét adja vissza. Megjegyzés: A táblázat nemet tartalmaz minden metódust. 9