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

39 tag leírás HTMLverzió attribútum-lista <ins> beillesztett szöveg 4 / 5 cite datetime <kbd> billentyűzet szöveg 4 / 5 <keygen> generált kulcspár 5 autofocus challenge disabled form keytype name <label> űrlapcímke 4 / 5 for <legend> űrlappanel felirat 4 / 5 <li> listaelem 4 / 5 value <link> forráshivatkozás 4 / 5 href rel media hreflang type sizes <map> kép térkép 4 / 5 name <mark> kiemelt szöveg 5 <menu> menülista 4 / 5 label type <meta> meta információ 4 / 5 charset content http-equiv name tartományon belüli <meter> érték 5 high low max min optimum value <nav> navigációs linkek 5 <noframes> nem engedélyezett keretek esetére 4 - tartalom <noscript> nem engedélyezett script lefutás esetére 4 / 5 none tartalom <object> beágyazott objektum 4 / 5 data form height name type usemap width <ol> sorszámozott lista 4 / 5 start reversed 39

40 tag <optgroup> leírás lenyílólistaelemek csoportosítása HTMLverzió 4 / 5 disabled label attribútum-lista <option> lenyílólistaelem 4 / 5 disabled label selected value <output> kimenet 5 for form name <p> bekezdés 4 / 5 paraméter vagy <param> változó 4 / 5 name value <pre> előformázott szöveg 4 / 5 munkamenetből <progress> hátralevő idő 5 max value <q> rövid idézet 4 / 5 cite <rp> nem engedélyezett ruby esetére tartalom 5 <rt> kiejtés 5 <ruby> helyes kiejtés 5 <s> elavult szöveg 4 - <samp> minta programkimenet 4 / 5 <script> kliens-oldali script 4 / 5 async type defer src charset <section> szakasz 5 cite <select> lenyíló lista 4 / 5 autofocus disabled form multiple name 40

41 tag leírás HTMLverzió attribútum-lista size <small> apróbetűs szöveg 4 / 5 <source> médiaforrás 5 media src type <span> inline stíluselem 4 / 5 <strike> áthúzott szöveg 4 - <strong> hangsúlyos szöveg 4 / 5 <style> stílus 4 / 5 media type scoped <sub> alsóindex 4 / 5 <summary> details fejléc 5 <sup> felsőindex 4 / 5 <table> táblázat 4 / 5 <tbody> táblázat törzs 4 / 5 <td> táblázat cella 4 / 5 colspan rowspan headers 41

42 tag leírás HTMLverzió attribútum-lista <textarea> bevitelimező 4 / 5 autofocus cols disabled form name readonly required rows maxlength placeholder wrap <tfoot> táblázat lábléc 4 / 5 <th> táblázat fejléccella 4 / 5 colspan rowspan headers scope <thead> táblázat fejléc 4 / 5 <time> idő/dátum 5 datetime pubdate <title> dokumentumcím 4 / 5 none <tr> tárblázat sor 4 / 5 inline fix széles <tt> szöveg 4 - <u> aláhúzott szöveg 4 - <ul> számozatlan lista 4 / 5 <var> változó 4 / 5 <video> videoklip 5 audio autoplay controls height loop src width poster width <wbr> lehetséges sortörés 5 <xmp> előformázott szöveg 4-42

43 CSS3 Áttekintés A CSS3 a korábbi verziókhoz képest olyan új funkciókat tartalmaz, amelyek a látványos animációkat, megjelenítési hatásokat, akadálymentes (pl. vakbarát) megjelenítéseket nagymértékben támogatnak. A CSS3 még nem W3C szabvány, közel sem minden tulajdonsága támogatott a népszerű böngészők által. Némely tulajdonság a böngésző típusának megfelelően előtaggal hivatkozható (pl. moz- előtag mellett, ld. lentebb.) A böngésző verziókat, előtagokat tartalmazó referenciát lásd a táblázatban. Jelen írásnak nem célja a CSS3 összes tulajdonsága és a kínált lehetőségek bemutatása, mindössze néhány látványos elemre szorítkozik. A bemutatott kódok azonnal kipróbálhatóak pl. a online html editoron, csak be kell másolni a forráskódot a copy-paste technikával. Átlátszóság A színeknél jó néhány névvel is azonosítva van, azonban az emberi szem által megkülönböztetni képes, mintegy 10-milló szín az RGB-jelölés révén azonosítható, ehhez ad hozzá az RGBA újabb opciót. Míg RGB a hagyományos, multiplikatív színkeverést (Red-Green-Blue) jelenti, addig az A, mint negyedik dimenzió az átlátszóságot jelzi (0: teljesen átlátszó, 1: nem átlátszó): <!DOCTYPE html> <html> <head> <style> p { background-color:rgb(255,0,0); #p4 { background-color:rgba(255,0,0,0.3); </style> </head> <body> <h1>this is heading 1</h1> <p>this is some text in a paragraph.</p> <p id="p4">this is some text in a paragraph.</p> </body> </html> Használhatóak a hagyományos szín elnevezések is: 43

44 <!DOCTYPE html> <html> <head> <style> #op2 { background-color:red; opacity:0.2; filter:alpha(opacity=20); /* IE8 and earlier */ #op5 { background-color:red; opacity:0.5; filter:alpha(opacity=50); /* IE8 and earlier */ #op8 { background-color:red; opacity:0.8; filter:alpha(opacity=80); /* IE8 and earlier */ </style> </head> <body> <div id="op2">this element's opacity is 0.2! Note that both the text and the background-color are affected by the opacity level!</div> <div id="op5">this element's opacity is 0.5! Note that both the text and the background-color are affected by the opacity level!</div> <div id="op8">this element's opacity is 0.8! Note that both the text and the background-color are affected by the opacity level!</div> </body> </html> A hagyományos szinek megnevezése, RBG (hexadecimális és decimális) kódja, valamint színmintája itt elérhető: Árnyékok box-shadow, text-shadow box-shadow: h-shadow v-shadow blur spread color inset; vagyis box-shadow: vízszintes távolság, függőleges távolság, (o)elmosódottság, (o)árnyék mérete, (o)árnyék színe, (o)belső árnyék Az (o) opcionális paramétert jelent. 44

45 Az alábbi példa a doboz-árnyék hatást mutatja be középre igazított/tördelt szöveggel belsejében. <!DOCTYPE html> <html> <head> <style> div { width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888; padding: 10px 10px; text-align:center; /* Firefox */ display:-moz-box; -moz-box-orient:horizontal; -moz-box-pack:center; -moz-box-align:center; /* Safari and Chrome */ display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-pack:center; -webkit-box-align:center; /* W3C */ display:box; box-orient:horizontal; box-pack:center; box-align:center; </style> </head> <body> <div>ez a szöveg a dobozban<br>középre igazítva</div> </body> </html> Ez pedig a szöveg-árnyékolásra egy példa: <!DOCTYPE html> <html> <head> <style> h1 {text-shadow:15px 15px darkblue; </style> </head> <body> 45

46 <h1>szöveg-árnyék hatás</h1> </body> </html> Lekerekítések A dobozok sarkossága is a múlté immár, a border-radius tulajdonsággal ugyan, ha a kör négyszögesítése nem is, de a négyszög körként ábrázolása megoldható. A lekerekítés mértéke megadható pixelben, vagy az adott oldal hosszának arányában, egyben, vagy külön-külön is: border-radius:2em; ugyanaz, mint: border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em; illetve border-radius: 2em 1em 4em / 0.5em 3em; ugyanaz, mint border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em; <!DOCTYPE html> <html> <head> <style> div { border:2px solid #a1a1a1; padding:10px 40px; background:#00aa00; width:300px; border-radius:25px; </style> </head> <body> <div>ez a tulajdonság lekerekített sarkokat teremthet.</div> 46

47 </body> </html> CSS3 animáció A CSS3 támogatja az animációt, ezzel is fokozva a felhasználói élményt. transform: none transform-functions; A transzformáációs függvények leírását lásd: Példák a CSS3 animáció alkalmazására: <!DOCTYPE html> <html> <head> <style> div { width:50px; height:50px; padding: 10px 10px; display:-moz-box; -moz-box-orient:horizontal; -moz-box-pack:center; -moz-box-align:center; border-top-left-radius:50px; border-top-right-radius:50px; border-bottom-left-radius:50px; border-bottom-right-radius:50px; background:red; position:relative; animation:mymove 5s infinite; -moz-animation:mymove 5s infinite; /*Firefox*/ -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ -o-animation:mymove 5s infinite; mymove { 0% {top: 0px; left:0px; 50% {top: 200px; left:200px; 100% {top: 0px; mymove /*Firefox*/ { 0% {top: 0px; left:0px; 50% {top: 200px; left:200px; 100% {top: 0px; mymove /*Safari and Chrome*/ 47

48 { 0% {top: 0px; left:0px; 50% {top: 200px; left:200px; 100% {top: 0px; mymove /*Opera*/ { 0% {top: 0px; left:0px; 50% {top: 200px; left:200px; 100% {top: 0px; left:0px; </style> </head> <body> <p><b>note:</b> This example does not work in Internet Explorer.</p> <div>hopp</div> </body> </html> Példa: Css3 transition (változás) <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ div:hover { width:300px; </style> </head> <body> <p><b>note:</b> This example does not work in Internet Explorer.</p> <div></div> 48

49 <p>hover over the div element above, to see the transition effect.</p> </body> </html> Vagy ez: <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; transition:width 2s, height 2s; -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */ -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */ -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */ div:hover { width:200px; height:200px; transform:rotate(3600deg); -moz-transform:rotate(3600deg); /* Firefox 4 */ -webkit-transform:rotate(3600deg); /* Safari and Chrome */ -o-transform:rotate(3600deg); /* Opera */ </style> </head> <body> <p><b>note:</b> This example does not work in Internet Explorer.</p> <div>hover over me to see the transition effect!</div> </body> </html> Néhány érdekes HTML5 megoldás GPS-koordináták lekérdezése <!DOCTYPE html> 49

50 <html> <body> <p id="demo">click the button to get your coordinates:</p> <button onclick="getlocation()">try It</button> <script> var x=document.getelementbyid("demo"); function getlocation() { if (navigator.geolocation) { navigator.geolocation.getcurrentposition(showposition); else{x.innerhtml="geolocation is not supported by this browser."; function showposition(position) { x.innerhtml="latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude; </script> </body> </html> Video beágyazott lejátszása <!DOCTYPE html> <html> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </body> </html> A HMTL5 dokumentum így képes helyi változó tárolására <!DOCTYPE html> <html> <body> <div id="result"></div> <script> if(typeof(storage)!=="undefined") { localstorage.lastname="smith"; document.getelementbyid("result").innerhtml="last name: " + localstorage.lastname; 50

51 else { document.getelementbyid("result").innerhtml="sorry, your browser does not support web storage..."; </script> </body> </html> Diagram animált kirajzolása <html> <head> <script> /* **************************************************** Animált formában grafikonként kirajzolja a pontok tömbben megadott értékeket *******************************************************/ var pontok = Array(10,34,76,14,34,55,89,57,49,12); var sz = 0; function sav() { var lap=document.getelementbyid('rajzlap'); // rajzlap megkeresése, ahová majd a sávokat kell tenni //sávok létrehozása, méret beállítása var sav = document.createelement('div'); lap.appendchild(sav); sav.innerhtml = pontok[sz]; sav.style.width = 5*pontok[sz]+"px"; //animációhoz kell: az animáció csak akkor induljon, ha már a div hozzáadódott a DOM-hoz //settimeout(function() {sav.classname = "kesz", 100); //sav.classname = "kesz"; sz++; //ha van még elem a tömbben, akkor újra meghívja magát if(sz < pontok.length) { settimeout("sav()", 500); </script> <style> #rajzlap {position:relative; background:#eee; width:600px; height:300px; #rajzlap div { background:green; color: white; margin-bottom: 5px; border-radius: 5px; box-shadow: 3px 3px 3px #555555; transition: all 0.5s; 51

52 -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s;/* Safari and Chrome */ -o-transition: all 0.5s; /* Opera */ #rajzlap div:hover {background-color: lightgreen; color:green </style> </head> <body onload="sav()"> <div id='rajzlap'></div> </body> </html> XML transzformáció a kliens oldalon XML DOM Az XML valójában teljesen spontán, egy Internetes szótár fejlesztésének köszönhető (az utókor eldönti, hogy áldás, vagy átok volt rajta). Mivel a legáltalánosabb (szövegfájl) formátumban nem, vagy csak körülményesen alkalmazhatóak a struktúrák, javasolt volt az egyes adatelemek elnevezése és elhelyezése magában a dokumentumban, annak megfelelő pozíciójában. A szótár számára kifejlesztett belső struktúrát: kis beágyazott címke határozta meg, hogy mi bejegyzés illetve szó, és aztán kiejtés, etimológia, rövid idézet, és aztán adat, forrás, szöveg és így tovább (ACM Queue, 2005). Ez vált az XML elődévé. Miután kifejlesztették a technológiát a szótárprojekthez, Bray megalapította az Open Text Corporationt, kifejlesztett egy keresőmotort, valamint meghívták a W3C-be, hogy legyen az XML specifikációjuk szerkesztője. (Wiki) Előnyök és hátrányok Előnyök: Az XML alkalmas adattovábbításra, mivel - platformfüggetlen - ember, és szoftver által egyaránt kezelhető formátum - elvileg nyelvfüggetlen (Unicode) - képes a legtöbb általános adatstruktúra ábrázolására - öndokumentáló formátum (nevek értékekkel) - szabványokon alapul - általános hierarchikus struktúra - általános szövegformátum Hátrányok: - a teljes dokumentum csak egészében, vagy soronként kezelhető (nagy állományok esetén gondot okozhat) - a testvérek elemzése időnként bonyolult 52

53 - redundáns szintaxis, ami tárolási igénnyel is jár, az olvasás bonyolult. Időként az SGML örökség terhessé válik. Az XML dokumentumok szerkezete, használatuk. Szintaxis A szintaktikailag a helyes XML dokumentumban minden nyitó tag záró taggal végződik: <valami></valami>. Ezt főleg a kliens (feltöltő) oldalon illik ellenőrizni bevitelkor, de a szerver (letöltő) oldalon sem árt egy ellenőrző rutin. Az XML dokumentumok formázása A XML dokumentum szövegből áll, eredetileg Unicode karakterek sorozata. A helyesen formázott XML dokumentumban: - A karakterkészlet megfelel a deklarációnak, ennek hiányában Unicode karakterkészletet feltételez. - Case-sensitive, azaz a kis- és nagybetűk különböznek. - A dokumentumban egyetlen gyökér elem van. - Minden nem gyökér eleme valamilyen más elem gyermeke. - Minden nem üres elemet nyitó és záró tag határol: az üres elemek megjelölhetők önmagát lezáró taggel, mint például az <IttLeszValami/>. Ez Ugyanaz, mintha azt írnánk: < IttLeszValami ></ IttLeszValami >. - Az értékek stringként, azaz aposztrófok között vannak ábrázolva. Az egyszeres x és magyarul használt x idézőjelek egymásba ágyazhatóak. - A tagek között nem lehet átfedés, azaz az <egyik> egyik értéke <masik> másik értéke </egyik> </masik> leírás hibás. Ahogyan általában a 4GL 9, vagy azt követő nyelvekkel (ld. szkriptek) írt programoknál, nem érdemes spórolni a az elnevezések hosszával. Ha egy elem a jövedéki adó jelentését hordozza, érdemes a JövedékiAdó elnevezéssel illetni a je, vagy az m24 helyett. Anekdota Egyszer megkértek, hogy szociális okokból adjak már munkát egy programtervező matematikusnak. Egy hét alatt megértette a feladatot (kimondottan egészségügyi terület volt, ahol korábbról nem volt tapasztalata). Két hétig dolgozott rajta, majd 9 Fourth Generation Language: 1: Assembly, 2: lineáris nyelvek (Fortran, Algol, Cobol, stb.), 3: eljárás-orientált nyelvek (Pascal, Clipper, stb.). A gépi kód nem nyelv, hanem a processzor természetes bináris (oktális, hexadecimális) kódkészlete, eredetileg makro-utasításoknak nevezik őket: a processzor szóhosszának megfelelő bináris utasítás-csomagok, amit közvetlenül a hardver érzékel, és hajt végre. 53

54 miután nem működött, újabb két napomba került újra elölről megírni, mivel a program karbantarthatatlan volt: a változók az e1..e134, a függvények az f1..f32 nevet viselték. Ne feledjük: egy programot egyszer írunk meg, és (jó esetben) legalább 50-szer módosítjuk! A megfelelő név választása már önmagában segít az emberi olvasásban, ugyanakkor nem szünteti meg a szoftveres fegyelmet. WEB és XML Miután az XML a szabványoktól és termékektől való függetlenség (ó, áldott szabadság!) érdekében jött létre, rögtön elkezdték szabványosítani a függetlenség fő harcosai, mivel rájöttek, hogy senki nem fogja tudni elolvasni a dokumentumaikat megfelelő, általánosan használt eszközök hiányában (azaz: Nem Lehet Más a Programozási Filozófia). Az általuk feltalált XSL (Extensible Stylesheet Language, azaz kiterjeszthető stílusleíró nyelv) leírja, hogy hogyan kell formázni vagy átalakítani az XML dokumentumban található adatot. Ilyen módon a dokumentum a böngészők által olvashatóvá válik (merthogy, a dokumentum lényege az olvashatóság). Ezek érdekében kitaláltak olyan dolgokat, mint - XPath, ami egyes komponensekre tud hivatkozni a dokumentumon belül. - XQuery: SQL az XML világában. - XML névtér: feltalálták a családnév-keresztnév hierarchiát, vagyis több Laci lehet az által, az egyik a Nagy, a másik a Kis családban született. - XML aláírás: Digitális aláírások létrehozására szolgáló szintaxist és feldolgozási szabályt definiál. - XML titkosítás: XML dokumentumok titkosítására szolgáló szintaxist és feldolgozási szabályt definiál. XML SAX A SAX (Simple API for XML: ez is egy mozaikszó a mozaikszavakból) egy levlista alapján kialakított technológia az XML dokumentumok feldolgozására. A SAX parser 10 előnyeként tudható be, hogy a hagyományos DOM-parserekkel szemben a SAX parser csak a tagek nevét, tulajdonságait listázza, illetve a lezáratlan tageket figyeli. Ezáltal a szükséges minimális memóriaigénye tulajdonképpen az XML-fa mélységével arányos, ami a gyakorlatban elhanyagolható. Ezzel szemben a DOM parser a teljes dokumentumot beolvassa a memóriába, ami nagy file-ok esetén gondot okozhat, bár, ha sikerült, akkor viszont egyszerűbb és kényelmesebb a feldolgozás. Ezen különbségekből adódik, hogy egyes műveletek, mint például az indexelés, egyszerű formai konvertálás, formázás a SAX-szal, míg mások, mint a 10 A parser, azaz szintaktikai elemző a compilernek vagy interpreternek a forrásnyelvű dokumentumot elsőként feldolgozó része. 54

55 XSLT rendezés, hivatkozásokon (linkeken) keresztül történő adatelérések, és általában a dokumentum különböző részeinek együttes feldolgozása a DOM segítségével gyorsabb. Az XSL az extensible Stylesheet Language rövidítése, ami az XML dokumentumok stílus leíró nyelve. Az XSLT ennek egy speciális része, vagyis az XSL Transformations részhalmaza. A következőkben az XSLT alkalmazása lesz bemutatva, azaz hogyan lehet az XML dokumentumot HTML (vagy XHTML) dokumentummá transzformálni (végül is, ez a XML DOM leképezésének technikája a HTML DOMra.) A könnyebb megértés kedvéért szolgáló analógia: CSS = HTML stíluslapok A HTML előre definiált tagokat használ, úhymint <table>, <tr>, <td>,<ul>,<li>, stb. melyek jelentése egyértelmű. Pl. a <table> tag egy táblázatot inicializál, amit a böngésző pontosan ért és végre is hajt. A HTML elemek stílusa egyszerűen és kényelmesen meghatározható a böngésző számára a CSS keretein belül. XSL = XML stíluslapok Ezzel szemben az XML nem használ előre definiált tageket, a tagek tetszőleges elnevezésűek lehetnek ettől fogva nem is jelentenek semit a böngésző számára. Pl. a <table> tag jelenthet egy HTML-táblázatot, bútort, vagy bármi mást- és a böngészőnek fogalma sincs, milyen speciális megjelenítés illik hozzá. Az XSL éppen arra szolgál, hogy az XML dokumentumok megjelenítését meghatározza. XSL több, mint stíluslap Az XSL három részre tagozódik: XSLT - XML dokumentumok XHTML-lé transzformálása XPath - Az XML dokumentumokban történő navigálás (a node-ok elérése) XSL-FO - az XML dokumentumok formázása XSLT = XSL Transformations Az XSLT az XSL legfontosabb része, ami XML-XML átalakítást, XML- HTML/XHTML átalakítást hajt végre. Alkalmazásával az elemek és attribútumok bővíthetőek, illetve eliminálhatóak a forrás dokumentumhoz lépest. Ugyancsak 55

56 lehetőséget ad elemek át- és sorba rendezésére, elemek elrejtésére és megjelenítésére és még egyebekre. Egyszerű XSLT elemek Az xlst használatát a deklaráció alapozza meg. A transform és stylesheet kifejezések, így az <xsl:transform version="1.0" xmlns:xsl=" és az <xsl:stylesheet version="1.0" xmlns:xsl=" deklarációk egyenrangúak. xsl:template Adott node, illetve az XPath által meghatározott node-ok megjelenítési sablonját írja le. A match attribútum határozza meg a template érvényességét, így az <xsl:template match="/"> </xsl:template> a gyökér (root) elemet jelöli ki hatókörnek, míg mondjuk az <xsl:template match="artist"> </xsl:template> csak az artist nevű node-okra vonatkozik (ld. GetElementsByTagName). Az <xsl:apply-templates /> tag a node-on belül a megadott template alkalmazását határozza meg az aktuális node-re, annak összes gyermekére, illetve, a select paraméter megadása esetén a meghatározott gyermekekre, és csak azokra: <?xml version="1.0" encoding="iso "?>  56

57 <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <body> <h3>my CD Collection</h3> <xsl:apply-templates /> </body> </html> </xsl:template> <xsl:template match="cd"> <p> <xsl:apply-templates select="artist"/> <xsl:apply-templates select="country"/> </p> </xsl:template> <xsl:template match="title"> Title: <span style="color:#ff0000"> <xsl:value-of select="."/></span> <br /> </xsl:template> <xsl:template match="artist"> Artist: <span style="color:#00ff00"> <xsl:value-of select=".."/></span> <br /> </xsl:template> </xsl:stylesheet> További hasznos XSL elemek: Elem xsl:value-of xsl:for-each xsl:sort <xsl:if test="expression"> output a kifejezés igaza esetére </xsl:if> <xsl:choose> <xsl:when test="expression">... some output... </xsl:when> <xsl:otherwise>... some output... leírás adott node értékét adja vissza. egy készlet összes elemére végrehajtandó ciklus rendezési szempont megadása feltétel megadása a megjelenítéshez szelekció alkalmazása a megjelenítésben (az if-ekkel is menne, de ez elegánsabb). 57

58 </xsl:otherwise> </xsl:choose> A fentiek alkalmazására példa, mint állatorvosi ló (az.xml file elérhető a linken). A futtatáshoz szükséges file-ok tehát a catalog.xml (ld. link) template_1.xls xml_xls_js_1.html Amennyiben a file-ok nem ugyanabban a mappában találhatóak, a loadxmldoc() függvénynek meg kell adni az elérési útvonalat. Ez a minta lokálisan és szerverről egyaránt fut. A template_1.xls tartalma: <?xml version="1.0" encoding="iso "?>  <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <body> <h2>my CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>title</th> <th>artist</th> </tr> <xsl:for-each select="catalog/cd"> <xsl:sort select="title"/> <tr> <td><xsl:value-of select="title"/></td> <xsl:choose> <xsl:when test="price > 10"> <td bgcolor="#ff00ff"> <xsl:value-of select="artist"/> <xsl:if test="artist='bee Gees'"> <font color="blue">!!! </font> </xsl:if> </td> </xsl:when> <xsl:otherwise> <td><xsl:value-of select="artist"/></td> </xsl:otherwise> </xsl:choose> 58

59 </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> Míg a xml_xls_js_1.html tartalma: <html> <head> <script> function loadxmldoc(dname) { if (window.xmlhttprequest) { xhttp=new XMLHttpRequest(); else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); xhttp.open("get",dname,false); xhttp.send(""); return xhttp.responsexml; function displayresult() { xml=loadxmldoc("catalog.xml"); xsl=loadxmldoc("template_1.xsl"); // code for IE if (window.activexobject) { ex=xml.transformnode(xsl); document.getelementbyid("example").innerhtml=ex; // code for Mozilla, Firefox, Opera, etc. else if (document.implementation && document.implementation.createdocument) { xsltprocessor=new XSLTProcessor(); xsltprocessor.importstylesheet(xsl); resultdocument = xsltprocessor.transformtofragment(xml,document); document.getelementbyid("example").appendchild(resultdocument); </script> </head> <body onload="displayresult()"> <div id="example">example (példa)</div> </body> 59

60 </html> XSLT függvények Az XSLT több, mint száz beépített függvényt tartalmaz, ezek között vannak string, numerikus, dátum/idő, node, szekvencia-feldolgozó, logikai értékekkel operáló függvények. A függvények alapértelmezett prefixuma fn: (bár enélkül is meghívhatóak), a függvények névterének URL-je: Az összes beépített XSLT 2.0 függvény leírása és referenciája elérhető a linken. XPATH alapok Node Az XPath hét node-ot különböztet meg: elem, azaz node, attribútum, text, namespace, feldolgozási utasítás, megjegyzés, valamint document node. Az XML dokumentum node-ok fájából épül fel. Az alapelem a gyökérnek is nevezett root elem: <?xml version="1.0" encoding="iso "?> <bookstore> <book> <title lang="en">harry Potter</title> <author>j K. Rowling</author> <year>2005</year> <price>29.99</price> </book> </bookstore> Itt <bookstore> (root elem node) <author>j K. Rowling</author> (author: elem node, J K. Rowling: textnode) lang="en" (attribútum node) A fenti példában atomi értéknek számít a J K. Rowling és az "en" bejegyzés, amelyekhez sem szülő, sem gyermek csomópont nem tartozik. Az XML dokumentum tételei node-ok vagy atomi bejegyzések. 60

61 A node-ok kapcsolatai Parent (szülő) Minden elemnek van szülője (a gyökér szülője maga a dokumentum). A következő példában a book a szülő eleme a title, author, year és price elemnek (node-oknak). <book> <title>harry Potter</title> <author>j K. Rowling</author> <year>2005</year> <price>29.99</price> </book> Children (gyermekek) Az elemeknek nulla, egy, vagy több gyermeke is lehet. A fenti példában a book node gyermekei a title, author, year és price elemek (node-ok). Ancestors (felmenők) A felmenők listája. Ebbe a listába a title szülője a book, annak a szülője a bookstore egyaránt beletartozik. <bookstore> <book> <title>harry Potter</title> <author>j K. Rowling</author> <year>2005</year> <price>29.99</price> </book> </bookstore> Descendants (leszármazottak) Ekkor a bookstore leszármazottjai egyaránt a book, title, author, year és price elemek. XPATH selectorok Path kifejezés leírás nodename Az összes"nodename" nevű elem kiválasztása. / A root (gyökér) elem kiválasztása. 61

62 // Az összes csomópont.. Az aktuális csomópont... Szülő Attribútumok kiválasztása. Ezek használatát az alábbi dokumentum szemlélteti <?xml version="1.0" encoding="iso "?> <bookstore> <book> <title lang="eng">harry Potter</title> <price>29.99</price> </book> <book> <title lang="eng">learning XML</title> <price>39.95</price> </book> </bookstore> Path kifejezés Bookstore /bookstore bookstore/book //book bookstore//book //@lang eredmény Az összes bookstore nevű csomópont. A gyökérben lévő bookstore. Megjegyzés: a / mindig az abszolút gyökérre (root) utal A bookstore összes book eleme. Az összes book elem függetlenül a dokumentumban való elhelyezkedéstől. A bookstore összes book leszármazottja. Az összes lang nevű attribútum. Predicate (predikátum, avagy jellemzőivel beazonosított csomópont) Egy megadott csomópont, vagy adott értékkel rendelkező csomópont megtalálására szolgál. A predikátumokat []-ban kell feltüntetni. Az alábbi táblázat néhány Path kifejezést listáz azok predikátumával és eredményeikkel: Path kifejezés /bookstore/book[1] eredmény A bookstore első book eleme. Megjegyzés: Böngészőtől függhet, hogy az első elem 62

63 /bookstore/book[last()] /bookstore/book[last()-1] /bookstore/book[position()<3] /bookstore/book[price>35.00] /bookstore/book[price>35.00]/title indexe a 0, vagy az 1! A bookstore utolsó book eleme. A bookstore utolsó előtti book elem (ha van). A bookstore első két book eleme. Az összes lang nevű attribútummal rendelkező title elem. Az összes 'eng' értékű lang attribútummal rendelkező title elem. A bookstore összes book eleme, amelynél a price nagyobb, mint A bookstore összes book elemének title-ja, amelynél a price nagyobb, mint Wildchar használata a node-ok elemzésében Wildchar leírás * Bármely Bármely attribútum elem node() Bármely csomópont Elérési utak unioja Az (Alt gr-w) operátor lehetővé teszi elérési útvonal összekapcsolását az XPath kifejezésben. Néhány példa erre a fenti táblázat adataival: Path kifejezés //book/title //book/price //title //price /bookstore/book/title //price eredmény A könyvek cím-ár elérése. Cím-ár elemek. A könyvesbolt könyveinek cím-ár eleme. Az XPath használatáról hasznos és érdemes tudnivalók elérhetőek a oldalról kiindulva. 63

64 Felhasznált irodalom - W3schools: XSLT, XML, HTML, HTML5, CSS ( - Douglas Crockford: Code Conventions for the JavaScript Programming Language ( - Douglas Crockford: JavaScript: The World's Most Misunderstood Programming Language ( 64

Több megjelenítése