Kliens-oldali technológiák e-book Dr. Daragó László

Átírás

1 TÁMOP-4.1.2/A/1-11/ Egészségügyi Ügyvitelszervező Szakirány: Tartalomfejlesztés és Elektronikus Tananyagfejlesztés a BSc képzés keretében Kliens-oldali technológiák e-book Dr. Daragó László

2 Tartalomjegyzék A böngésző (web kliens) programozói környezete... 3 JavaScript... 3 Programozási struktúra, alapszintaxis... 4 A JavaScript nyelvi elemei... 4 A HTML és a JavaScript összekapcsolása HTML DOM A DOM (Document Object Model) A HTML DOM DOM események PHP és JavaScript közötti (egyszeri, egyirányú) adatátadás megvalósítása HTML és CSS haladóbb szinten A HTML5 alapjai A HTML4 és HTML5 tagjainek keresztreferenciája CSS Néhány érdekes HTML5 megoldás XML transzformáció a kliens oldalon XML DOM Az XML dokumentumok szerkezete, használatuk WEB és XML XML SAX XSLT Egyszerű XSLT elemek XPATH alapok XPATH selectorok

3 A böngésző (web kliens) programozói környezete JavaScript A JavaScriptet a 90-es évek IE/NN 1 böngésző-háborúként emlegetett korszakában fejlesztettek ki a Netscape-nél (az IE a VBScriptet favorizálta). Nem tévesztendő össze a Java programozási nyelvvel, amely szintén interpreteres nyelv, de a Sun Microsystems (azóta már Oracle) fejlesztése. A két nyelv szintaxisa hasonló, ez talán annak köszönhető, a két fejlesztő csapat tagjai között mutatkozott átfedés, vagy talán mindannyian a C-n nőttek fel. A JavaScript, avagy Mocha, avagy LiveScript, avagy JScript, avagy ECMAScript ugyanazt jelöli. Douglas Crockford aki állítólag nem rokona Douglas Adamsnek, bár humoruk összemérhető - szerint a JavaScript elnevezés létrejöttének valódi oka az, hogy az eredetileg kitalált Livescript név nem volt eléggé zavarba ejtő (vagy, ahogy a feltűnésre vágyók mondják: mindegy, hogy mit, csak beszéljenek rólam!). A Javascript két helyen futhat: a böngészőkben és a web-szervereken (amennyiben ott telepítették a JRE-t azaz Javascript Runtime Engine-t vigyázat, a Java Runtime Environmentet is JRE-nek rövidítik <ld. D.C. 2 >). A Javascript csakis, és kizárólag a WWW miatt jött létre. A kliens oldali JS 3, támogatja programozási feladatok elkészítését a Weben (interaktív funkciók, animációk), a CSS3+HTML5 együttes használatával DHTML-nek is nevezik. A kliens és a szerver oldali rész alapvetően különbözik annak ellenére, hogy szintaxisuk egyező. A kliens oldali JS-kódot a böngésző végrehajtja, csak annak kimenete jelenik meg. A JS kódot a HTML kód közé, általában a <head> és </head> tagek közé, vagy a <body> szekció elejére ékeljük, vagy egyszerűen csak meghivatkozzuk (ld. később, a HTML és JS kapcsolatának firtatásánál). Amikor a böngésző megjeleníti a HTML kódot, akkor a <script> és </script> közé írt kódrészleteket nem megjeleníti, hanem értelmezi és futtatja, ezzel biztosítja az oldal dinamikus viselkedését. Mindezek után se menjen el senkinek a kedve a kurzustól, hiszen annyira mégsem reménytelen a helyzet, de azt is érdemes megjegyezni, hogy ez nem útikönyv, amit az elején szoktak kezdeni és a végén bezárni. Érdemes megbarátkozni az oda-vissza lapozgatás technikájával! 1 IE: Internet Explorer, NN: Netscape Navigator 2 Douglas Crockford 3 Javascript, rövidítve 3

4 1. ábra Egy HTTP kliens-szerver modell Programozási struktúra, alapszintaxis A szkriptek értéket visszaadó, vagy értéket vissza nem adó függvényeket (eljárásokat) tartalmaznak. Ezek felépítése ugyanolyan, mint az általában megismert vezérlési szerkezetek: ciklusok, feltételek, elágazások, eljárások és függvényhívások jellemzőek rá csakúgy, mint a korábban megismert (pl. PHP szkripteknél, vagy Office (VBA-moduloknál). A JS alapvető szintaxisa szerint az objektumokat { és, a tömböket [ és ] foglalja magába, az utasításokat pedig sortörés helyett a ; zárja. az abc és abc egyaránt használható, sőt egymásba is ágyazható. Az utasítások blokkokba szervezhetőek. A blokkokat { és karakterek határolják. A blokkok tetszőleges szinten egymásba ágyazhatóak, mindegyik szinten tetszőleges számú utasítással. A JavaScript nyelvi elemei Változók és adattípusok 4

5 number string boolean A JS azonosítók (változók, objektumok, függvények) alfabetikus karakterrel, vagy _-jellel kezdődnek, a továbbiakban tartalmazhatnak számjegyet is. Az azonosítók eset-érzékenyek, azaz a kis- és nagybetűk különbözőnek tekintendőek. A deklarálást var, vagy let prediktummal lehet kezdeni. A let deklaráció lokális változót hoz létre. A JavaScript dinamikus nyelv, azaz nem kell deklaráláskor feltétlenül meghatározni egy változó adattípusát, és az adattípusok automatikusan konvertálódnak, ahogy az a szkript futása során szükséges. A JS adattípusai: Adattípus Leírás undefined null function Egész, vagy valós (lebegőpontos) szám. Karakterlánc változó. Mivel a JS-ben char-változó nincs, a karakter 1-hosszú string. Logikai változó, ami true (igaz) vagy false (hamis) értéket vehet fel. Ha számként használjuk, akkor a true értéke 1, a false értéke pedig 0 lesz. Használható mind formális logikai, mint numerikus kalkulálásra. A változó létre lett hozva, de még nem lett hozzárendelve érték. Ez egy speciális adat, ami azt jelzi, hogy a változó nem tartalmaz semmit. Függvényváltozó. Értéknek egy függvényt kaphat. object Objektum változó, összetett adattípus. Literál, vagy konstans lehet logikai (Boolean), numerikus vagy string adat, illetve megjegyzés, ezek közül is // egysoros megjegyzés /* illetve több soros megjegyzés */ Az egész számokat decimális, hexadecimális és oktális formában lehet ábrázolni. A decimális számnál nem használunk vezető nullát. Ha az első számjegy 0, akkor a szám oktális, míg, ha az 0x (0X) szel kezdődik, akkor hexadecimális. A hexadecimális számokban az ABCDEF számjegyek használata nem eset-érzékeny. A lebegőpontos számok decimálisak. Lehetnek E27.1e10 9E-10 alakúak, azaz tartalmazhatnak +/- előjelet, tizedespontot és az e/e előzi meg a karakterisztikát (szóköz nélkül). 5

6 A string lehet abc abc lesz közben egy \n sörtörés alakúak. Lehetnek u.n. whitespace, azaz nem ábrázolható karakterek is a stringekben, ezeket \b - backspace \f form feed \r carriage return \n new line \\ \" \' módon jelöljük. A logikai változó true (igaz) vagy false (hamis) értéket vehet fel. Ha számként használjuk, akkor a true értéke 1, a false értéke pedig 0 lesz. Felsorolási típus (enumerated): A nyelvben nincs explicit konstrukció felsorolási típusra, de szimulálhatóak objektum-literálokkal. Például: var szinek = {piros: 0, zöld: 1, kék: 2; var a_szin = Colors.piros; (Ékezetes betűt inkább ne használjunk!) Konstanst, azaz olyan változót, amely a szkript lefutása során nem változtatja az értékét az alábbi módon definiálhatunk: const pi = '3.1415'; Tömb Az elemi értékekből tömbök állíthatóak össze, és a tömb bármely eleme lehet tetszőleges típusú, azaz egy tömbben többféle típusú adat is előfordulhat. Tömbök létrehozása: a. Konstruktor hívás, opcionálisan a kezdő tömbméret paraméterként átadva: var longvector = new Array(100); // 100 elemű tömb var shortvector = new Array(); // 0 elemű tömb, ua., mint var shortvector = []; b. Konstruktor hívás, a tömb elemei paraméterként átadva var evens = new Array(2,4,6,8); 6

7 c. Tömbliterál létrehozása, az elemek "[" és "]" között felsorolva var odds = [1,3,5,7]; d. Generátor használata ("Array comprehensions") function range(start, end) { for (let i = start; i < end; ++i) { yield i; var tiz_negyzet = [i * i for each (i in range(0, 10))]; var paros_negyzet = [i * i for each (i in range(0, 21)) if (i % 2 == 0)]; A tömb elemei hivatkozhatóak, indexszel (0,1,2.. ), illetve hivatkozható az egész tömbre egyszerre is a tömb nevével. A tömb hosszát a length tulajdonság mutatja. A tömb nem minden elemének kell értéket adni, így a NewArray = [, "második elem",, "negyedik elem"]; deklarációval létrehozott tömb első és harmadik eleme undefined lesz, amíg nem kap értéket. A JS nem támogat többdimenziós tömböket, helyette a tömbök tömbje használandó: var twodim = [ [11,12], [21,22] ]; Asszociatív tömb A tömbök indexelésére pozitív egészek helyett stringek is használhatóak. Ekkor használható a. operátor az egyes tömbelemek eléréséhez, például: var myarray = new Array(); myarray["a"] = 100; myarray["c"] = 200; myarray["a"] == myarray.a == 100 Valójában ilyenkor az "a" nevű tulajdonságra lehet hivatkozni. A tömb használata Veremként A push(), tömb végére tesz be egy elemet, és pop() elvesz onnan egyet. A verem többi jellemző művelete a tömb hosszának és az indexelésnek a használatával oldható meg. 7

8 A tömb használata Sorként A shift() függvény eldobja, tömbelejéről, az unshift() beszúrja a tömb elejére a paraméternek megfelelő számú elemet. Rekord A deklarálás itt is az elemek { és közötti felsorolásával történik Az elemeknél előbb az azonosítót, majd az értéket kell megadni. A téves kulccsal (azonosítóval, vagy indexszel-) történő hivatkozás a tömb hivatkozással ellentétben nem undefined értékhez, hanem hibához vezet. A következő példában a rekord egy literált, egy függvényt és egy változót tartalmaz: var valt1; function fv1 { // fv1_visszateresi_erteke precord = { a: "szöveg", b: fv1, 7: valt1; // ekkor például a következő hivatkozások érvényesek: precord.a, precord.b, precord[7] // viszont ezek hibához vezetnek: precord[a], precord[0], precord.7 A rekordok a tömbökhöz hasonlóan egymásba ágyazhatóak, azaz struktúrák hozhatóak létre: rrecord = { a: { a: "p1", 2: "p2", 3: "k3" // ekkor a helyes hibatkozások: rrecord.a.a, rrecord.a[2], rrecord[3] A JS általános változóinak globális tulajdonságai tulajdonság Infinity NaN undefined leírás Pozitív/negatív végtelen (pl. 0-val való osztás eredménye) "Not-a-Number" azaz nem szám A változóhoz (még) nem rendeltek értéket. Kifejezések és operátorok A kifejezés literálok, változók, operátorok és utasítások kombinációja, amely kiértékelése egyetlen értéket eredményez. 8

9 A JS kifejezéseinek értékei: Aritmetikai: szám String: stringet Logikai: igaz vagy hamis érték Operátorok Értékadási operátor (=) Az értékadás a hagyományos, illetve a C-hez, illetve Java-hoz hasonlóan bal-, illetve jobboldali operandusokkal végzett változata is elfogadott. Például az x*=y ugyanaz, mint az x=x*y. Az egyelőség előtti műveleti jel megismétli a baloldali operandust a jobb oldalon. A jobb oldali operandus változás értéke a műveletben attól függ, hogy a műveleti jel előtte, vagy utána szerepel. Példa: y=5; z=2; x=y+z; hagyományos módon az x értéke 7 lesz. Nézzük, milyen esetek fordulhatnak még elő: operátor művelet művelet x utána y utána + összeadás x=y kivonás x=y * szorzás x=y* / osztás x=y/ % modulus (maradék) x=y% növelés x=++y 6 6 x=y csökkentés x=--y 4 4 x=y Amennyiben a művelet előtt y=5; x=10; úgy az alábbiak lesznek a kifejezések értékei: = x=y x=5 += x+=y x=x+y x=15 9

10 -= x-=y x=x-y x=5 *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 Összehasonlítás Az összehasonlítások eredménye igaz, vagy hamis logikai érték. Ha csak az értéket kell megvizsgálni (==), a JS önmagától összehasonlítható alakba konvertálja az operandusokat, míg alaposabb esetben a típust is egyezteti (===). Aritmetikai inkrementáció (++), dekrementáció (--), negálás (logikai, illetve aritmetikai változónál) (-), valamint modulus (%) Bitenkénti műveletek A bitenkénti operátor az operandusokat 32 bites számokként kezelik. AND a & b bitenkénti ÉS kiértékelés OR a b bitenkénti VAGY kiértékelés XOR a ^ b bitenkénti KIZÁRÓ VAGY kiértélés NOT ~ a bitenkénti negálás Bal léptetés a << b a baloldal felé lépteti a b-vel lépteti a bitjeit, a jobboldalon 0-k lépnek be Előjel-megőrző jobb a >> b a jobboldal felé b-vel lépteti a bitjeit, a léptetés baloldalon 0-k lépnek be, az előjel bit megmarad Nulla-feltöltő jobb léptetés a >>> b a jobboldali felé b-vel lépteti a bitjeit, a baloldalon 0-k lépnek be Logikai Rövid (lusta) kiértékelést használ, azaz ha balról jobbra haladva biztosra vehető az eredmény, nem számol tovább. Operátorok:! (negálás) && és vagy 10

11 String A stringekre az összehasonlító operátorokon kívül a konkatenáció operátort (+) is lehet használni. Ez az operátor két stringet összekapcsol és a két operandus uniójaként tér vissza. A rövidített értékadó operátort (+=) itt is használható. Különleges operátorok (ami a fentiekbe nem illik) o feltételes kiértékelés (a? b : c): a logikai értékétől függően b-t, vagy c-t adja, pl: túlsúlyos = (bmi >= 30)? "igen" : "nem o o o o o o o o,: tömbelemek felsorolása delete: objektumtörlése in: objektum bejárása instanceof: objektum típusának lekérdezése new: új objektum létrehozása this: saját objektum typeof: objektum típusának lekérdezése void: kifejezés kiértékelése visszatérési érték nélkül Az operátorok precedenciája: 1. hivás,tag: () []. 2. negáció/növelés:! ~ szorzás/osztás: * / % 4. összeadás/kivonás: eltoló (shift): << >> >>> 6. viszony: < <= > >= 7. egyenlőség: ==!= === 8. bitenkénti és: & 9. bitenkénti kizáró vagy: ^ 10. bitenkénti vagy: 11. logikai és: && 12. logikai vagy: 13. feltételes?: 14. értékadó: = += -= *= /= %= <<= >>= >>>=&= ^= = 15. vessző:, Elágazások Címke A vezérlési szerkezetek fontos eleme, a label (címke) itt is használatos, elsősorban a continue és a break töréspontok adják át ide a vezérlést a 11

12 program normál folyamatából. Mindez persze csak egyetlen függvényen belül érvényes, a JS programkódja önmagában nem képez összefüggő szerkezetet a <script></script> blokkon belül. 4 Ha-akkor-egyébként Az if-then-else (elseif) szerkezet gyakorlatilag minden programozási nyelvben, így a JS-ben is működik. (A JS a then szavacskát megspórolja, de attól még ugyanúgy működik). Amennyiben az if után (zárójelek között) megadott logikai kijezeés értéke igaz, a { között leírt blokk hajtódik végre. Ha van else-ág, akkor ellenkező esetben az, különben az if-blokk utáni parancsok. Abban az esetben, ha több, mint két eset lehet, egyenként felsorolhatóak, kiértékelhetőek a feltételek, vagy tömörebb megoldás az else if használata, bár a hatékonyság szempontjából semmivel sem jobb, mint az előző. Példa, amikor egy függvény kiértékelésének három eredménye is érdekes lehet: var a = somefunction(b, c); if ( a <= 1) { alert("sajnos nem sikerült!"); else if (a == 5 ) { alert("gratulálok, kiváló!"); else { alert("sikeres vizsga!"); Többirányú elágazás Amennyiben sok, és nemcsak logikai lehet a kifejezés értékelhető kimeneteinek száma, az if-ek ismételgetése, vagy egymásba ágyazása eléggé megbonyolíthatja az olvashatóságot és a szerkezetet 5. A switch éppen erre való: ha több kimenetele lehet egy kifejezésnek, amely azonban nem csak logikai, de tetszőleges értéket vehet fel, az egyes értékek esetén külön-külön programblokk futtatható. Ezeket a case direktívák azonosítják. Az itt használatos programblokkok annyiban különböznek a megszokottaktól, hogy itt nem használunk "{" illetve "" 4 Megjegyzem, hogy Assembly szinten valójában csak a címke-ugrás művelet létezik, az összes többi (ciklus, elágazás) csak magasabb szinten konstruált absztrakció. Magasabb szintű nyelvek esetén azért kerülik a közvetlen vezérlés átadást (azaz a goto utasítás használatát), mert a programozó kivételesen durva kárt képes okozni, amennyiben nem megfelelően használja. 5 Az olvashatóság alapvető! Ne feledjük: egyszer írunk egy programot, de talán százszor kell módosítanunk! 12

13 jeleket a blokkok azonosításához, ezt a case jelek megteszik. Amennyiben egyik érték (címke) sem felel meg a kifejezésnek, akkor írhatunk egy alapértelmezett (default) viselkedést, hasonlóan az if parancs else ágának megfelelően. Amennyiben nincs ilyen ág, a program a az if-blokk utáni utasításon folytatódik. Ha bármelyik blokk ráfut a break parancsra, ugyanez történik. Példa: switch (gyümölcs) { case alma : utasítások; break; case körte : utasítások; break; case dinnye : utasítások; break; default: utasítások; Például, ha egy gyümölcsöt adunk el webzöldségesnél, átadhatjuk az elágazásnak a kiválasztott gyümölcsnevet paraméterként: switch (expr) { case "Alma": document.write("alma 400 Ft/kg."); break; case "Körte": document.write("körte 450 Ft/kg."); break; case "Dinnye": document.write("dinnye 650 Ft/kg."); break; default: document.write("bocsi, kifogytunk ebből: " + expr); Ciklusok A ciklusok esetén, nagyon sok nyelvhez hasonlóan megtalálhatóak az előre meghatározott, valamint a feltételes ciklusok is. A feltételes ciklusok esetén az elől-tesztelő és hátul-tesztelő ciklus egyaránt használatos a JS-ben. A ciklusmagoknak nincs terjedelmi korlátja, tetszőleges számú utasításokból (blokkokból) állhatnak A ciklusfeltétel logikai kifejezés, vagy ennek aritmetikailag logikai megfelelője (0, azaz false, illetve nem 0 ) lehet. For ciklus Az elől-tesztelő for addig ismétli a ciklusmagot, amíg a feltétel igazzá nem válik. Működéséhez három paraméter kell, inicializálás, inkrementálás és ciklusfeltétel. Az inicializálásban megadható egy, vagy több értékadás, akár olyan is, amelyek a későbbiekben ciklusváltozóként is használhatóak. A ciklusváltozó hasonlóan más programnyelvekhez - nem csak egyesével, hanem tetszőleges léptékben növelhető. A ciklusfeltétel lehet valamilyen határ, vagy logikai kifejezés is. for ( inicializálás, ciklusfeltétel, inkrementálás ) { ciklusmag 13

14 Ettől nagyszerűbb, hogy a for each...in ciklus egy objektumváltozó értékeire is hivatkozhat a programkód tulajdonságainak Például: var sum = 0; var obj = {t1: 5, t2: 13, t3: 8; for each (var item in obj) { sum += item; print(sum); // az eredmény "26", ami While ciklus Az elöl-tesztelő ciklus először a feltételt ellenőrzi, majd ennek teljesülése esetén végrehajta a ciklusmagban foglalt parancsokat. Ennek teljesítése után úrja ellenőrzi a feltételt és kezdi elölről a (megváltozott paraméterek melletti) ciklust. Ezek szerint ez a ciklus a ciklusmagot (legalább egyszer) csak akkor hajtja végre, ha a feltétel igaz, azaz lehetséges, hogy ez egyszer sem történik meg. while ( feltétel ) { ciklusmag Egy példa 10! kiszámítására: var x = 1; var faktorialis = 1; while { x<=10) { faktorialis*= x; x++; Do...while ciklus A hátul-tesztelő ciklusban mindenképpen lefut egy ciklusmag, majd ellenőrzi ciklusfeltételt. Ha a feltétel igaz, akkor ismét lefuttatja a ciklusmagot. do { ciklusmag while ( feltétel ) Egy másik példa 10! kiszámítására: var x = 0; var faktorialis = 1; do { x++; faktorialis*= x; while ( x <= 10 ); Vezérlésátadó utasítások A végtelen ciklusok elkerülése a break és continue utasítások használatával válik elkerülhetővé a JS-ben. Míg a break kilép a 14

15 ciklusmagból és azután folytatja a program végrehajtását, a continue 6 a ciklus elejéről kezdi a megváltozott környezetnek megfelelően (új esély). Hibakezelés, kivétel-kezelés Ahogy minden programnyelvben, a JS-ben is megoldották a hibakezelést, vagy kivételkezelést. Erre a try-catch-finally trió szolgál. A try utáni blokk a program normál futása esetére szól, a catch egy paraméterben átveszi a hibát, így kezelhetővé, feldolgozhatóvá válik. A finally blokk minden esetben lefut, akár volt hiba, akár nem: try { // Futó program rész catch (error) { // Hiba esetén lefuttatott rész finally { // Minden esetben lefutó program rész Időnként nem elégszünk meg azzal, hogy a böngésző döntse el mi a hiba, mi magunk is generálhatunk, erre szolgál a throw metódus: a try blokkban generálunk egy hibát, amit majd a catch kezel. A throw eldobja, a catch elkapja a kivételt/hibát 7. Ez a megoldás kiváló pl. a funkciógomb lenyomása, mint kivétel kezelésére. <script type="text/javascript"> function checkage() { try { /* ha nem megengedett értéket vinnénk be, hibaüzenet generálódik */ if (document.forms[ eletkor ].kor.value > 99) { throw RangeError; catch (e) { // elkapja és kiíratja a dobott hibát if (e.name=rangeerror) alert("szép kor, gratulálunk!"); </script> <form name= eletkor > Életkor: <input type="text" name="kor" onblur="checkage()"> </form> 6 A jó öreg Fortran visszainteget 7 Ügyvitelszervezők: ugyanezt a filozófiát alkalmazzák az üzleti modellezésben, ld. pl. BizAgi Process Modeler. 15

16 Egyébként, miután a JS mostanára alapértelemezett szkriptnyelvvé vált a böngészők számára, tulajdonképpen elegendő a <script> </script> jelölés is. Hibák típusai EvalError - Az eval() funkció helytelen használata RangeError Egy szám meghaladja a korlátját ReferenceError - Helytelen hivatkozás SyntaxError - Szintaktikai hiba TypeError - A változó típusa nem létezik URIError Az encodeuri() vagy decodeuri() funkciót függvények helytelen használata Függvények A JS egyetlen alprogramot ismer, a függvényt. Amennyiben a függvénynek nincs visszatérési értéke, eljárásként viselkedik. Hogy minél kevesebbet kelljen gépelni, a függvény deklarálásakor minden kihagyható, ami nélkül is egyértelmű a programozói szándék: a visszatérési érték opcionális, a bementi paramétereknek elegendő a nevét megadni, a típusára nincs szükség. Egyszerű példa annak eldöntésére, hogy két szám, logikai változó, vagy string közül melyik a kisebb: function min(a, b) { return a < b? a : b ; Mindig a function kifejezéssel kell kezdeni, azután a függvény neve után a bemeneti paraméterek felsorolása következik. A visszatérési értéket a return utasítás adja. Amennyiben nincs bemeneti paraméter, visszaadott érték, abban az esetben a function f1() { // utasítások alak tökéletesen megfelel. A függvény meghívásához elegendő egyszerűen megadni a nevüket. Bemeneti paraméter lehet bármilyen változó, vagy objektum, így függvény (merthogy, az is objektum) is. Az 16

17 objektum a JS-ben valójában egy névvel, vagyis hivatkozási alappal és tulajdonságokkal ellátott valami. Arguments A függvényhez tartozik egy arguments nevű tömb, amely a függvény végrehajtása során elérhető és kiolvasható. Ez nagyon hasznos pl. olyankor, amikor a függvény deklarálásakor leginkább akkor hasznos, ha nem tudjuk a függvény deklarálásakor még nem ismert a bemeneti paraméterek száma: function osszefuz(elvalaszto) { var kimenet = ""; for (var i=1; i< arguments.length; i++) { // arguments.length a bementi paraméterek száma kimenet = kimenet + arguments[i] + elvalaszto; return kimenet; osszefuz("-", "össze", "fűzött", "string", "készült"); // kimenet: össze-fűzött-string-készült Fontos, hogy az argumentumlista indexelése itt is 0-val kezdődik! Az ellenkező véglet, amikor több bemeneti paraméter lett deklarálva a függvény számára, mint ami a híváskor meg lett adva. Ilyenkor a meg nem adott paraméterek értéke egyszerűen undefined lesz, ugyanakkor ez semmilyen problémát nem okoz a függvény lelkivilágának. Kezelhető ez a kérdés alapértelmezett paraméter értékekkel: function kivagy(arg0, arg1){ arg1 = arg1 "Senki"; // itt Senki a default érték return arg0+ +arg1; Nev=kivagy( Nevem ); // Nev: Nevem Senki A függvény saját magát is meghívhatja (rekurzív hívás). Jó példa erre a egy egész szám faktoriálisának kiszámolása. function faktorialis(n) { if ( n==0 n==1 ) return 1; else { var eredmeny = ( n * faktorialis(n-1) ); return eredmeny; 17

18 faktorialis(5); // ekkor 4 rekurzív hívás után, az eredmény 120 A JS globális és speciális függvényeit és eljárásait érdemes a oldalon tanulmányozni. A HTML és a JavaScript összekapcsolása A JavaScript erőssége a HTML-lel való harmonikus együttműködés - a bépített függvényeket, vezérlési szerkezeteket más nyelvek is tudják. A JS a HTML-lel ellentétben - megkülönbözteti a kis- és nagybetűket, erre mindenképpen oda kell figyelni! A JS a HTML-hez az egyes objektumok tulajdonságai révén kapcsolódik. A HTML-objektumok észlelnek eseményeket, amelyek aktiválnak metódusokat a JS esetében függvényeket. Innen pedig nincs megállás, hiszen a függvény újabb függvényt hívhat, deklarálhat változót, műveleteket végezhet rajtuk, stb. Az események beköveztekor a hozzájuk rendelt függvényt a futtató környezet, azaz a böngésző által támogatott eljárásokat, függvényeket használja. A JavaScript a következő módszerekkel használható a HTML dokumentumon belül: A <script> tagba beírva a kódot: <script> function f1() { alert('meghívták az f1-függvényt!'); </script> <form> <button name='nyomógomb' onclick='f1()'>kattints rám</button> </form> Egy másik példa, amikor az oldal teljes betöltődéséről fontos információt kapni, mert valamely eseményt ehhez kell időzíteni (a túl sok objektumot tartalmazó oldal esetén fontos lehet): <!DOCTYPE html> <html> 18

19 <head> <script> function betoltve() { alert("a lap végre betöltődött!"); </script> </head> <body onload="betoltve()"> <h1>szép napunk van!</h1> </body> </html> Ugyanez az esemény JS függvényen belül a window.onload=fv() módszerrel kezelhető. A <body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style> objektumok érzékelik ezt az eseményt. Külön fájlba írjva a kódot, és erre hivatkozva a HTML fájlban (ekkor nem zavarja a HTML-kód áttekinthetőségét a másfajta nyelvű szöveg): Ekkor a függvényeket a beágyazott külső fájl tartalmazza (ez több függvény esetén egyébként a javasolt megoldás). Az ilyen beágyazott szövegfájl kiterjesztése kötelezően.js! <script src="tobbhelyenishasznalom.js"></script> A HTML tag eseménykezelőjeként: <form id='f_01'> <input type="button" value="kerekecske gombocska" onclick="alert('mi a manó?!')" /> </form> Egy másik példa egy esemény késleltetésére: 19

20 <input type="button" value="click me" onclick="settimeout('window.alert(\'hello!\')', 2000)" /> Nem csak az egyes HTML-tageknek, hanem a hierarchiában magasabban álló objektumoknak is vannak eseményei, azaz belépési pontjai. HTML DOM A DOM fogalma HTML leképeződése a DOM-ban Objektumok, fa struktúra Node típusok (element, attribute, textnode) Különböző típusú attribútumok és azok megadása, módosítása (pl. tagname, style, onclick) A DOM bejárása parentnode, firstchild, childnodes, nextsibling getelementbyid(), getelementsbytagname() Elemek létrehozása, törlése HTML kód hozzáadásával (document.write vs. innerhtml) Objektumok létrehozásával (createelement, createattribute, appendchild, removechild, insertbefore) A DOM (Document Object Model) A Document Object Model olyan platform- és nyelvfüggetlen programozási interfész (API), amely a dokumentumok (HTML, XML, XHTML, stb.) tartalom, szerkezet és stílus-használatát, vagy annak módosítását támogatja. Meghatározza a dokumentumok szerkezetét és az annak elemeivel végezhető műveleteket, valamint az objektumok kölcsönhatásait. A DOM az objektumok egymással szülő-gyerek-testvér kapcsolatban álló rendszere. A dokumentum tartalmát, valamint a dokumentum objektumainak eseményeit, azok eljárásait írja le. Az objektumok kezelése böngészőnként különböző lehet. A DOM története kapcsolódik a böngészőháborúként is elhíresült, az 1990-es évek végén a Netscape Navigator és a Microsoft Internet Explorer, illetve ezáltal a JavaScript és a VBScript között zajló versengéssel. E szkriptnyelvek voltak az elsők a később széleskörűen elterjedt, a böngészők által felismert és támogatott dokumentumok között. Egy kis történelem (A Wiki nyomán): 20

21 Legacy DOM A JavaScript 1996-ban jelent meg a Netscape Communications által bemutatott Netscape Navigator 2.0-ás verziójában. A Netscape versenytársa a Microsoft szintén ebben az évben mutatta be az Internet Explorer 3.0-ás verzióját, amely a JavaScript egy változatát a JScript-et használta. A JavaScript és a JScript segétségével a webfejlesztők olyan weboldalakat hozhattak létre, melyeken kliens-oldali interakciókra is lehetőség van (ez volt a WEB 2.0 bölcsője). A felhasználó által generált események detektálásának és a HTML dokumentumok módosításának korlátozott lehetőségei végül "DOM Level 0", vagy "Legacy DOM" néven váltak ismerté, melyek ezen nyelvek első generációi voltak. Egyedi szabványt nem fejlesztettek ki a DOM Level 0 számára, de a HTML4 specifikációja már részben leírta ezt is. Ez a korai DOM verzió korlátozva volt a HTML-elemek elérésében. A HTMLűrlap, hivatkozás és kép elemek egyaránt elérhetővé váltak egy hierarchia szerint. A hivatkozás a dokumentum gyökér objektumával kezdődött, továbbá használható volt akár a neve, akár a bejárni kívánt elemek sorrendi indexe által. Egy űrlap eleme elérhető akár a "document.urlapnev.bevitelimezonev", vagy akár a document.forms[0].elements[0]" formában is. Intermediate DOM 1997-ben a Netscape és a Microsoft bemutatta a Netscape Navigator, illetőleg az Internet Explorer 4.0-ás verzióit, amelyek már támogatták a Dynamic HTML-t (DHTML). Ennek lényege, hogy Módosítani lehet egy már betöltött HTML dokumentumot. A DOM ezen verziói "Intermediate DOM" néven váltak ismertté. Ezen verziók által már lehetőség nyílt a CSS tulajdonságok manipulálására is, így befolyásolhatóvá vált a dokumentumok megjelenése. Sőt mi több hozzáférést biztosítottak egy új funkcióhoz, az ún. "rétegek"-hez, a "document.layers" (Netscape Navigator) és a "document.all" (Internet Explorer) tulajdonságok által. Az alapvető inkompatibilitási problémák miatt a böngésző-független webfejlesztés különleges figyelmet igényelt minden támogatott böngésző esetén. Szabványosítás Az 1994-ben alapított World Wide Web Consortium (W3C), amely nyílt szabványokat támogat a világháló számára, összehozta a Netscape Communications-t, a Microsoft-ot és más cégeket, hogy kifejlesszenek egy szabványt a webböngészőkben használatos szkript nyelvek számára, így alakult ki az "ECMAScript". A szabvány első verziója 1997-ben látott napvilágot. Az ezt követő JavaScript és JScript kiadások, így a nagyobb böngésző függetlenség érdekében megvalósíthatták az ECMAScript szabványt. Az ECMAScript megjelenése után a W3C elkezdett dolgozni a DOM szabányosításán. A kezdeti eredmények voltak az ún. "DOM Level 1", amelyet 21

22 1998 végén terjesztett elő a W3C. Körülbelül ugyanekkor az Internet Explorer 5.0 szállított korlátozott támogatást a DOM Level 1-hez. Ez a verzió már teljes modellt biztosított a teljes HTML és XML dokumentum számára, beleértve a dokumentumok bármely részének megváltoztatásához szükséges eszközöket is. A nem konform böngészők, mint az Internet Explorer 4.x és a Netscape 4.x még ekkortájt, a 2000-es év végén is széleskörben elterjedtek voltak. A DOM Level 2. bevezette a "getelementbyid" funkciót, valamint az esemény modellt és támogatta az XML névtereket és a CSS-t. A DOM Level 3 támogatja az XPath-t és a billentyűzet eseménykezelését, valamint egy interfészt a dokumentumok XML-eléréséhez. A W3C-féle DOM nagy részét támogatják az átlagos ECMAScript támogatással rendelkező WEB-böngészők, mint a Microsoft Internet Explorer, az Opera, a Safari, valamint a Gecko-alapú böngészők, mint a Mozilla Firefox, a SeaMonkey és a Camino körében. Alkalmazásai Mivel a DOM mindkét-irányú navigációt támogatja (szülő és az előző testvér felé is) és lehetővé teszi a változtatást tetszőleges helyen, az implementációban pufferelni kell a beolvasott dokumentumot (vagy annak értelmezett részét). Ebből következik, hogy a DOM leginkább olyan alkalmazások kezelésére alkalmas, ahol ismételt és nem szekvenciális sorrendű hozzáférés történik a dokumentumhoz. Amennyiben egy alkalmazás szigorúan szekvenciális és egyszer futó, a SAX modell valószínűleg gyorsabb és kevesebb memóriát használ. Webböngészők A webböngészők rendszerint a DOM-hoz hasonló belső modellt használnak a dokumentumok (például egy HTML oldal) megjelenítéséhez. A DOM API-kat weboldalak, illetve egyes részeik JavaScript kódból történő vizsgálására, vagy módosítására is használják. Más szóval, a Dokumentum Objektum Modell az a mód, ahogyan a JavaScript látja a webböngésző állapotait és az általa megjelenített HTML oldalt. Amikor egy böngésző megjelenít egy HTML oldalt, akkor legelőször betölti az oldalt a web-szerverről, majd értelmezi a jelöléseit (pl. HTML) és létrehozza a modellt a memóriában tárolt DOM formájában. Minden dokumentum csomópontjai fa struktúrába vannak szervezve, ezt hívjuk DOM fának. A legfelső csomópont a DOM fában a Dokumentum (Document) objektum. Minden csomópont tetszőleges számú - nulla, vagy több - gyerekkel rendelkezhet. Böngészőmotorok A webböngészők ún. böngészőmotorokra támaszkodnak a HTML dokumentumok Dokumentum Objektum Modellé alakítása során. Némely 22

23 A HTML DOM ilyen motor, mint a Trident/MSHTML és a Presto alapvetően egy adott böngészőhöz tartoznak, mint az Internet Explorer és az Opera. Mások, mint a WebKit és a Gecko számos böngészőben teljesítenek szolgálatot, mint a Google Chrome, a Firefox és a Safari. A különböző böngészőmotorok általában mind eltérő fokú figyelmet fordítanak a DOM szabványok pontos betartására. A HTML DOM szerint a HTML dokumentumok fa szerkezetűek. A legmagasabb szint maga window objektum, amelyhez közvetlenül egy documentum node tartozik. A szerkezet az úgynevezett Node Tree (csomópont-fa): HTML DOM fa példa HMTL DOM Dokumentum Gyökér elem: <html> Elem: <head> Elem: <body> Elem: <title> Elem <h1> Elem: <img> Elem: <a> Elem: <form> Szöveg: "Oldal címe" Szöveg: "Fejléc" Tulajdonság: "src" Tulajdonság: "href" Szöveg: <link> Tulajdonság: "action" Elem: <input> Tulajdonság: "type" Tulajdonság: "name" Viselkedés: "onclick" A csomópontok (Node-ok) hierarchikus kapcsolatban állnak, eszerint vannak szülők, gyerek és testvérek. A mellékelt ábrán a <form> csomópont a <body> gyermeke, testvére az anchor (horgony) <a>, gyermeke az <input>. A csomópontok (node-ok) típusai egy HTML dokumentumban document a document elemei az elemek attribútumai text (a node tartalma) megjegyzés A document elemei: 23

24 Anchor Area Base Body Button Form Frame/IFrame Frameset Image Input Button Input Checkbox Input File Input Hidden Input Password Input Radio Input Reset Input Submit Input Text Link Meta Object Option Select Style Table td / th tr Textarea Az egyes elemek tulajdonságai, azok lekérdezése, módosítása: tulajdonság attributes[] leírás Visszatérési értéke a NamedNodeMap tömb, amely a node összes attribútumát tartalmazza. Firefox esetén csak a felhasználó által definált tulajdonságok, míg IE esetén a DTD 8 -ben definiált belső tulajdonságokat is tartalmazza. A tömb tartalmazza az attribútum nevét és aktuális értékét. példa: var imageattributes=document.getelementbyid("myimage").attribu tes imageattributes[0].name // "myimage" első attribútumának neve imageattributes[0].value // "myimage" első attribútumának értéke imageattributes.getnameditem("src").value // "myimage" 8 Document Type Definition, elsősorban XML dokumentumok szabványosítására szolgál 24

25 "src"-nevű attribútumának értéke childnodes[] classname A node összes gyermek-node-jait adja vissza. A "nodename" and "nodetype" tulajdonságok is használhatóak. példa: //<ul> node esetére var mylist=document.getelementbyid("mylist") for (i=0; i<mylist.childnodes.length; i++){ if (mylist.childnodes[i].nodename=="li") //valamit lehet tenni a lista elemmel A node CSS class attribútuma. Read/write. példa: document.getelementbyid("test").classname="class1" //a class1 osztály nevének hozzárendelés a node-hoz document.getelementbyid("test").classname+=" class2" //az osztály módosítása clientwidth A böngészőablak hasznos (felhasználható) felületének szélessége a szegély, margó, csúszka (scrollbar) objektumokat nem tartalmazza. példa: var pagewidth=document.body.clientwidth clientheight dir A böngészőablak hasznos (felhasználható) felületének magassága a szegély, margó, csúszka (scrollbar) objektumokat nem tartalmazza. A szövegirány az objektumban. Értékei a "ltr" (left to right) vagy a "rtl" (right to left). Alapértelemzésben "ltr." Read/write példa: document.getelementbyid("mydiv").dir="rtl" //szövegirány megváltoztatása firstchild id innerhtml A node első (legbaloldalibb) gyermek node-ja. A node id azonosítója. Praktikus megadni a könnyű elérhetőség érdekében. Read/write Miután az oldal teljesen betöltődött, a node belső tartamának elérésére/megváltoztatására szolgál. Read/write. példa: 25

26 <p><b>old paragraph text</b></p> <script type="text/javascript"> window.onload=function(){ document.getelementsbytagname("p")[0].innerhtml="<b>new paragraph text</b>" </script> lang lastchild localname namespaceuri nextsibling nodename A node nyelvi attribútuma. Többnyire a <body> alapnyelvének meghatározására, illetve az attól eltérő egyes node-ok nyelvének meghatározására használatos. Read/write. A node utolsó (legjobboldalibb) gyermeke node-ja. Egy XML node neve (hasonló, mint HTML DOM esetén a nodename). Egy XML node xmlns attribútumához rendelt URI string. A (jobbra) következő testvér node ugyanazon szülő esetén A node neve (nagybetűvel). példa: if (document.getelementbyid("test").firstchild.nodename=="div ") alert("ez egy DIV objektum.") nodetype A node típusa. A node típusokról ld. bővebben: példa: alert(document.getelementbyid("adiv").nodetype) //DIV esetén 1 nodevalue A node értéke (amennyiben van neki, egyébként null). Szöveget tartalmazó node esetén a visszatérő érték a text, míg a value. Document és element esetén null. A text, illetve value értéke lekérdezésére, módosítására használatos. Read/write példa: <body> <div id="test">old text</div> <script type="text/javascript"> 26

27 if (document.getelementbyid("test").firstchild.nodename=="#te xt") document.getelementbyid("test").firstchild.nodevalue="new text" </script> offsetleft offsettop offsetparent A node-ot magába foglaló container objektum (pl. DIV or TABLE) bal oldali széléhez képesti relatív baloldali offset érték. A magába foglaló elemre az offsetparent attribútummal lehet hivatkozni. A node-ot magába foglaló container objektum (pl. DIV or TABLE) bal oldali széléhez képesti relatív felülről számított offset érték. A magába foglaló elemre az offsetparent attribútummal lehet hivatkozni. Egy elem offset container-je, azaz az őt magába foglaló objektum. Többnyire egy BODY, DIV, illetve TABLE. példa: <body> <div id="master" style="position: relative"> <div id="slave" style="position: relative">test</div> </div> <script type="text/javascript"> alert(document.getelementbyid("slave").offsetparent.id) //alerts "master" </script> offsetwidth Egy elem szélessége kerettel együtt. offsetheight Egy elem magassága kerettel együtt. ownerdocument A node-ot tartalmazó document, mint node. parentnode A szülő node. prefix Az XML node namespace előtagja (xmlns), ha van ilyen. A namespace az azonos típusú node-ok megkülönböztetése miatt hasznos. példa: <root> <h:table xmlns:h=" <h:tr> <h:td>apples</h:td> <h:td>bananas</h:td> 27

28 </h:tr> </h:table> <f:table xmlns:f=" <f:name>african Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table> previoussibling scrollleft scrolltop </root> Az előző (baloldali) testvér node), ha van ilyen, egyébként null. Mennyire kellene balra scrollozni egy BODY, DIV, vagy textarea objektumban, hogy az elvileg látható és az aktuális baloldali él egybeessen. Mennyire kellene balra scrollozni egy BODY, DIV, vagy textarea objektumban, hogy az elvileg látható és az aktuális felső él egybeessen. példa: <div id="static" style="width:150px; height:150px; position: absolute; border:1px solid yellow; left: 5px;">vaalmi szöveg</div> <script type="text/javascript"> setinterval("document.getelementbyid('static').style.top=d ocument.body.scrolltop+10+'px'", 50) </script> scrollheight scrollwidth style tabindex tagname Az objektum scrollozható magassága. Függőleges scrollbar (csúszka) hiányában értéke megegyezik a clientheight-tel. Az objektum scrollozható szélessége. Vízsztintes scrollbar (csúszka) hiányában értéke megegyezik a clientwidth-tel. Egy elem style objektumának elérésére, illetve egyes attribútumainak módosítására szolgál. Mókás dolgokra is alkalmas, ld. menekülő submit gombok. Read/write. példa: document.getelementbyid("test").style.backgroundcolor="yel low" Az adott objektum tabulátorral való elérése értékének lekérdezésére/módosítására szolgál. Read/write. Egy HTML tag nevének lekérdezésére szolgál. példa: <!DOCTYPE html> <html> 28

29 <body> <pp id="demo" >Click the button to display the tag name of this element<br></pp> <button onclick="myfunction()">try it</button> <script> function myfunction() { var x=document.getelementbyid("demo"); x.innerhtml=x.tagname; </script> title </body> </html> A document címének, title attribútumának lekérdezésére szolgál. Read/write A HTML DOM elemek eseményeinek kezelésére szolgáló leggyakrabban használt függvények: metódus Leírás (visszatérési értéke) getelementbyid() Az ID azonosítójú elemet adja vissza. Példa: var element=document.getelementbyid("intro"); getelementsbytagname() getelementsbyclassname() appendchild() removechild() replacechild() Adott nevű node-ok listájáját tömbként (vektorként) adja vissza, az egyes elemek indexszel hivatkozhatóak (ld. még névtér használata). Példa: var tagnames=document.getelementsbytagname(tagname) Az adott class attribútummal rendelkező node-ok tömbje. Példa: elements = document.getelementsbyclassname(names); Gyermek node hozzáadása az adott node-hoz. Példa: document.getelementbyid("mylist").appendchild(new ListItem); Adott gyermek node eltávolítása. Példa: var list=document.getelementbyid("mylist"); list.removechild(list.childnodes[0]); Gyermek node lecserélése. Példa: document.getelementbyid("mylist").replacechild(ne 29

30 insertbefore() createattribute() createelement() createtextnode() getattribute() setattribute() wnode,oldnode); Adott gyermek node elé beszúr egy új gyermek node-ot. Példa: var node=document.getelementbyid("mylist2").lastchild ; var list=document.getelementbyid("mylist1"); list.insertbefore(node,list.childnodes[0]); Adott node-hoz újabb attribútumot rendel. Példa: var att=document.createattribute("class"); att.value="democlass"; document.getelementsbytagname("h1")[0].setattribu tenode(att); Element node létrehozása. Példa: var btn=document.createelement("button") var t=document.createtextnode("click ME"); btn.appendchild(t); Text node létrehozása. Példa: Ld. fent. Adott node megnevezettt attribútuma. Példa: document.getelementsbytagname("a")[0].getattribut e("target"); Adott node megvezetett attribútumának meghatározása, vagy megváltoztatása. Példa: (beviteli mező nyomógombbá változtatása) document.getelementsbytagname("input")[0].setattr ibute("type","button"); DOM események A HTML oldalak objektumai eseményeket képesek észlelni. Ilyen a kattintás, a beviteli mezők manipulálása, oldalak betöltée, oldalak elhagyása, egér- és billetnyűzet események, stb. A DOM definiálja a kiváltható eseményeket és előírja, hogy az egyes eseménytípusok mely elemekre érvényesek és milyen körülmények között jönnek létre. Ezeket az eseményeket persze a megfelelő szkript-függvényekkel kezelni is lehet, ha már definiálva lettek az elemnél. Néhány gyakran használt és kezelt esemény: Abort A felhasználó megszakította a letöltést. 30

31 Ha a letöltés alapvető az oldal használatához (például olyan nagyméretű grafika, amely nélkül értelmezhetetlen az oldal) akkor ezt az eseményt figyelve figyelmeztethető a felhasználót. Az eseménykezelő: onabort. Blur Az ablakra (Window) és minden űrlapelemre érvényes esemény akkor esik meg ha, a felhasználó elveszi a beviteli fókuszt az elemről (tabulátor, vagy egér használatával). Ellenőrizhető vele az input helyessége, akár alapértelmezett adatra is cserélhető, ha az nem helyes. Több megnyitott ablak esetén a lejátszás felfüggesztésére is használható (pl. video lejátszásánál, ha a felhasználó más ablakra vált). Az eseménykezelő: onblur. Change Beviteli mezőkre és legördülő mezőkre érvényes, módosításakor történik. Használható akár a bevitel ellenőrzésére, vagy konzisztencia ellenőrzés futtatására Az eseménykezelő: onchange. Click Kattintásra érzékeny elemek (bevitelre szolgáló, illetve akciót kiváltó elemek esetén) kattintásának észlelésére szolgál. Link aktiválása esetén is működik. Egyes alkalmazások megkülönböztetik a DblClick és a RightClick eseményeket is. Az eseménykezelő: onclick. Error Letöltéskor fordulhat elő. Igazából letöltési ellenőrző összeget hasonlítja össze az elvárttal, de a hiba okáról nem tudunk meg túl sokat. Az eseménykezelő: onerror. Focus A beviteli elem fókuszba kerüléskor lép fel. Kezelésekor érdemes összehangolni a Blur eseménnyel. Az eseménykezelő: onfocus. KeyDown Billentyű lenyomásakor jelentkezik, de csak a lenyomáskor! A lenyomott billentyű lekérdezhető. Óvatosan kezelendő, lásd még a KeyUp és KeyPress eseményeket! Az eseménykezelő: onkeydown. 31

32 KeyUp Billentyű lenyomás utáni felengedése. A felengedett billentyű lekérdezhető. Különösen terrorista filmekben alkalmazzák a kézigránát elengedésekor. (Ez vicc volt!) Az eseménykezelő: onkeyup. KeyPress Ha a KeyDown, KeyUp események nem aktívak, használható. A használt billentyű lekérdezhető. Az eseménykezelő: onkeypress. Load A dokumentum teljes dokumentum betöltése után lép fel. Az eseménykezelő: onload. Unload Az oldal elhagyásakor lép fel. Az eseménykezelő: onunload. MouseDown A baloldali egérgomb lenyomásakor aktivizálódik (ld. KeyPress). Okostelefonos alkalmazás esetén nem érdemes használni (ahogy a többi egéreseményt sem). Az eseménykezelő: onmousedown. MouseUp A baloldali egérgomb felengedésekor aktivizálódik (ld. KeyUp). Az eseménykezelő: onmouseup. MouseOver Nagyon hasznos esemény, kiemelhető vele egy-egy objektum fölösleges kattintgatás nélkül. Az eseménykezelő: onmouseover. MouseOut Fellép, amikor az egér elkerül az objektumról. A MouseOver eseménnyel összhangban szokták használni. Az eseménykezelő: onmouseout. Move Ablakok mozgatása esetén lép aktivizálódik. Az eseménykezelő: onmove. 32

33 Submit Űrlap kitöltésének végső mozdulata. Ilyenkor még megerősítheti a felhasználó a szándékát, rákérdezhető, hogy pl. Biztos benne?. Az eseménykezelő: onsubmit. PHP és JavaScript közötti (egyszeri, egyirányú) adatátadás megvalósítása Az alábbi példa PHP-szkriptje beolvassa a szerveren lévő pontok.txt tartalmát és átadja egy JavaScript változónak, ami a továbbiakban helyi változóként kezeli azokat. A pontok.txt tartalma: A HTML (PHP+JS) forrása: <html> <head> <script> /* **************************************************** A PHP által átadott értékeket megszorozza az input mezőben megadott számmal. Az eredményt kirajzolja grafikon formájában. ****************************************************** */ <?php?> echo "var pontok = Array("; $p=file('pontok.txt'); for($i=0; $i<sizeof($p); $i++) { if($i>0) echo ","; echo trim($p[$i]); echo ");" function oszlop(szam) { var szorzo = szam.value*1; var lap=document.getelementbyid('rajzlap'); lap.innerhtml=""; 33

34 for(i=0;i<pontok.length;i++) { d=document.createelement('div'); d.style.left=i*25+'px'; d.style.height=pontok[i]*szorzo+"px"; lap.appendchild(d); </script> <style> #rajzlap {position:relative; background:#eee; width:600px; height:300px; #rajzlap div {position:absolute; background:green; width:20px; bottom:0px; </style> </head> <body> <form> Szorzó: <input type='text' name='szam' value='2'> <input type='button' value='mutasd' onclick='oszlop(szam)'> </form> <div id='rajzlap'></div> </body> </html> HTML és CSS haladóbb szinten A HTML5 alapjai Áttekintés A HTML5 szabvány a statikus weblapok dinamikussá alakítását szolgálják. Céljuk egyrészt a felhasználói élmény fokozása (ezt a célt tűzte ki az AJAX, valamint a DHTML, azaz a JavaScript+CSS3 együttes használata is), másrészt a minél egyszerűbb weboldal-készítés támogatása. Ennek részben ellentmond, hogy újabb és újabb függvényeket vezetnek be, amelyek szintaktikáját és paraméterezését mégis csak támogatni kell a böngészők újabb verzióinak, valamint a fejlesztőknek is meg kell tanulni, így a tanulás nélküli tudás megszerzéséhez valószínűleg nem ez az út vezet. Ugyan a W3C-szerint a HTML5 abszolút kompatibilis a korábbi, azaz HTML4 verzióval (egyes leírások szerint elég a <html..> tagben a verziószámot átjavítani és máris HTML5 dokumentumunk van,) azok a tagek, amelyek csak a 4-ben szerepelnek de az 5-ben nem, ennek ellentmondani látszanak. Az űrlapok kialakítása a hagyományos HTML-szerkezet szerint történik, de használatukhoz szükséges valamilyen szkript-nyelv. 34

35 A HTML4 és HTML5 tagjainek keresztreferenciája Az alábbi táblázat a HTML4 és HTML5 közös, új, illetve elárvult tagjait tartalmazza (Weblapguru). tag leírás HTMLverzió  komment 4 / 5 nincs <!DOCTYPE> dokumentum típus 4 / 5 nincs attribútum-lista <a> hivatkozás 4 / 5 href hreflang media rel target type <abbr> rövidítés 4 / 5 <acronym> mozaikszó 4 - <address> cím 4 / 5 <applet> beágyazott elem 4 - kép térképen belüli alt coords href hreflang media rel <area> 4 / 5 tartalom shape target type <article> cikk 5 <aside> mellékes tartalom 5 <audio> hang tartalom 5 autoplay controls loop preload src <b> félkövér szöveg 4 / 5 <base> kiindulási URL 4 / 5 href target <basefont> alapértelmezett szövegformázás 4 - <bdo> szövegirány 4 / 5 dir <big> nagy szövegméret 4-35

36 tag leírás HTMLverzió attribútum-lista <blocquote> hosszú idézet 4 / 5 cite <body> body 4 / 5 <br> sortörés 4 / 5 <button> nyomógomb 4 / 5 autofocus disabled form formaction formenctype formmethod formnovalidate formtarget name type value <canvas> rajzterület(vászon) 5 height width <caption> táblázat felirat 4 / 5 <center> középre igazítás 4 - <cite> idézet 4 / 5 <code> forráskód szöveg 4 / 5 <col> táblázat oszlop 4 / 5 span <colgroup> csoportos táblázat oszlop <command> parancsgomb 5 <datalist> lenyílólista 5 <dd> leírás 4 / 5 4 / 5 span checked default disabled icon label radiogroup type 36

37 tag leírás HTMLverzió attribútum-lista <del> törölt szöveg 4 / 5 cite datetime <details> elem leírása 5 open <dir> könyvtárlista 4 - <dfn> kifejezés meghatározás <div> doboz 4 / 5 <dl> meghatározás lista 4 / 5 <dt> kifejezés meghatározás 4 / 5 title 4 / 5 <em> kiemelt szöveg 4 / 5 <embed> beágyazott elem 5 height src type width <fieldset> formpanel 4 / 5 disabled form name <figcaption> ábra felirat 5 <figure> ábra 5 <font> szövegformázás 4 - <footer> lábléc 5 37

38 tag leírás HTMLverzió attribútum-lista <form> űrlap 4 / 5 accept-charset action autocomplete enctype method name novalidate target <frame> keret 4 - <frameset> keretes oldalszerkezet 4 - <h1>..<h6> címsor 4 / 5 <head> dokumentumfej 4 / 5 none <header> fejléc 5 <hgroup> címsorcsoportosító 5 <hr> elválasztóvonal 4 / 5 <html> html dokumentum 4 / 5 manifest xmlns <i> dőlt betű 4 / 5 <iframe> beágyazott ablak 4 / 5 src name sandbox seamless srcdoc width height <img> kép 4 / 5 alt src height ismap usemap width <input> beviteli mező 4 / 5 accept alt autocomplete autofocus checked disabled form formaction formenctype formmethod formnovalidate formtarget height list max maxlength min multiple name pattern placeholder readonly required size src step type value width 38

Több megjelenítése