Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović chole@vts.su.ac.rs"

Viktor Vörös
8 évvel ezelőtt
Látták:

1 Szabadkai Műszaki Szakfőiskola Web programozás dr Zlatko Čović 1

2 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

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.

3 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

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.

4 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

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.

5 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

')" value="click me" /> <input type="button" onclick="myfunction('hello!

6 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=" link</a> </body> </html> 6

onclick = gotovts; //onclick = function() {alert("welcome to VTS");} // return false; } function gotovts() {

7 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

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.

8 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

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.

9 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

Hasonló dokumentumok

"Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS. M6 Modul: A DOM Modell

"Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS M6 Modul: A DOM Modell Bevezető - platform- és nyelvfüggetlen programozási interfész - tartalom-, szerkezet- és stílus-elérés/módosítás