Tartalom. A JavaScript haladó lehet ségei. Megjelenés. Viselkedés. Progresszív fejlesztés. A progresszív fejlesztés alapelvei

Átírás

1 Tartalom A JavaScript haladó lehet ségei webprogramozó A szöveg, amit a látogató az oldalainkon olvashat Szövegként írjuk meg HTML elemekkel osztjuk egységekre Megjelenés A szöveg kinézete és elrendezése a weblapokon A szövegformázást, a bet típusokat, a színeket, a képeket stb jelenti Általában stílusokkal (CSS lapokkal) alakítjuk ki Viselkedés M veletek, amelyek végrehajtásra kerülhetnek a látogatóval való kapcsolattartás során Kliensoldali vagy szerveroldali szkriptek segítségével történik. Progresszív fejlesztés A HTML dokumentum legyen annyira egyszer, amennyire csak lehetséges A stíluslapok és a szkriptek segítségével egészítsük ki újabb és újabb tuljadonságokkal. A progresszív fejlesztés alapelvei A megjelenést külön CSS fájlban szabályozzuk, lehet ség szerint ne szabályozzuk a megjelenést HTML elemekkel. A viselkedést küls JavaScript fájlokkal szabályozzuk Az eseményeket szövegközi eseménykezel k nélkül adjuk a weboldalakhoz 1

2 Eseménykezel k beállítása Egy adott HTML elemben: <body onload="startup();"> JavaScript fájlban: window.onload=startup; A probléma, hogy ezzel a módszerrel egy elemhez csak egy eseménykezel állítható be. A W3C eseménymodellje addeventlistener() : az elemhez több eseménykezel is beállítható window.addeventlistener('load',startup, false); 'load' : az esemény neve, az 'on' nélkül (click, moseover, moseout, stb) Startup : az eseménykezel függvény false : hogyan kell kezelni, ha több esemény létezik (a false általában megfelel ) Eseménykezel eltávolítása window.removeeventlistener('load', Startup,false); IE Az IE 6 és 7-ig nem támogatja a W3C modellt. Helyette: window.attachevent('onload',startup); onload : az esemény teljes neve Startup : eseménykezel függvény Eltávolítás window.detachevent('onload',startup); Események meghatározása böngész független módon obj = document.getelementbyid("btn"); if (obj.addeventlistener){ obj.addeventlistener('click',clickme,false); else if (obj.attachevent){ obj.attachevent('onclick',clickme); else{ obj.onclick=clickme; Böngész adatok lekérése navigator objektum appcodename : a böngész bels kódneve appname : a böngész neve appversion : verziószám useragent : felhasználói ügynükfejléc language : nyelv platform : operációs rendszer 2

3 Feladat Készítsünk olyan programot, amely kiírja a böngész nk adatait! <body> <h1>a böngész tulajdonságai</h1> <ul> <script language="javascript" type="text/javascript"> document.write("<li><b>bels kódnév:</b> "+navigator.appcodename); document.write("<li><b>a böngész neve:</b> "+navigator.appname); document.write("<li><b>verziószám:</b> "+navigator.appversion); document.write("<li><b>ügynök fejléc:</b> "+navigator.useragent); document.write("<li><b>nyelv:</b> "+navigator.language); document.write("<li><b>operációs rendszer:</b> "+navigator.platform); </script> </ul> </body> Furcsaságok Sok webmester úgy szokta beállítani a weblapjait, hogy ha a böngész nem Mozillaként azonosítja magát, akkor elirányítja (ezért hazudik az IE) A verziószámnál pedig attól félnek, hogy az esetleges túl magas verziószám nem esik át a sz n ("a nyílt forrású szoftverek területén nem növekszenek a verziószámok olyan ütemben, mint az üzleti modell esetén) (ezért is hazudik az IE) Képességérzékelés Ha például szeretnénk használni a getelementbyid() függvényt, azt megvizsgálhatjuk, hogy létezik-e? if (document.getelementbyid) 3

4 Feladat Készítsünk olyan programot, amely JavaScriptet ismer böngész esetén grafikus jelöl négyzetet, azt nem ismer böngész esetén hagyományos jelöl négyzetet használ! <html> <head> </head> <body> <h1>grafikus jelöl négyzet</h1> <form name="urlap"> <input type="checkbox" name="jel1" id="jel1">hagyományos jelöl négyzet<br> <input type="checkbox" name="jel2" id="jel2">grafikus jelöl négyzet<br> </form> <script language="javascript" type="text/javascript" src="jelolo.js"> </script> </body> </html> function grafikus(negyzet){ if (!document.getelementbyid) return; obj = document.getelementbyid(negyzet); parentobj = obj.parentnode; obj.style.visibility = "hidden"; kep = document.createelement("img"); kep.onclick = Kattint; kep.src = "uncheckedcheckbox.gif"; kep.id = "kep"+negyzet; parentobj.insertbefore(kep,obj); 4

5 function Kattint(e){ if (!e) var e = window.event; if (e.target) kep = e.target; else kep = e.srcelement; jeloloid = kep.id.substring(3); jelolo = document.getelementbyid(jeloloid); jelolo.click(); if (jelolo.checked) file = "checkedcheckbox.gif"; else file = "uncheckedcheckbox.gif"; kep.src = file; grafikus("jel2"); A megfelel programozási módszerek A programokat mindig rendezetten és olvashatóan igyekezzünk megírni. Tagoljunk helykihagyásokkal, használjunk tabulátort és értelmes változóneveket Használjunk sok megjegyzést Minden utasítás végére tegyünk pontosvessz t Minden változót a var kulcsszóval deklaráljunk, így könnyebben megállapítható a hatóköre. A megfelel programozási módszerek A bonyolult programokat osszuk logikai részekre A nagyobb programokat több menetben írjuk meg, és minden menet után ellen rizzük, hogy az addigi kód köd képes-e Formai hibák A kulcsszavak, m veleti jelek, pontok, pontosvessz k, vessz k, stb. helytelen használatából adódnak Leggyakrabban elgépelés során keletkeznek A JavaScript értelmez is egyértelm en felismeri, ezért könnyen javítható Értékadás és egyenl ségvizsgálat Az = és az == m veletek felcseréléséb l, összekeveréséb l adódik Gyakran az értelmez sem veszi észre, mert értelmezhet az utasítás. Helyi és globális változók Egy blokkon belül deklarált változó értékét a blokkon kívül szeretnénk módosítani 5

6 Objektumok megfelel használata pontos objektumneveket használjunk Az objektum nevét, ha szükséges ne hagyjuk el a tagfüggvény neve el l. HTML hibák Gyakori a záróelemek lefelejtése A hibás HTML kód is okozhatja a JavaScript hibás m ködését. Alapszint hibakeres eszközök Mozilla Firefox Hibakonzol A Notepad2 például színezéssel is segíti a helyes kódolás kivitelezését. onerror A window objektum onerror tulajdonságát a hibakezel függvény nevére állíthatjuk Ekkor a hagyományos hibaüzenet helyett ez a függvényhívás zajlik le. A böngész három paramétert tud átadni ennek a függvénynek: a hibaüzenet szövegét a hibás dokumentum URL-jét a hibás sor számát Feladat Készítsünk olyan programot, amelyben a hibáról szóló információk egy figyelmeztet ablakon jelennek meg! 6

7 <body> <h1>hibaüzenet</h1> <form name="urlap"> <input type="button" value="hiba" onclick="nemletezo()"> </form> </body> <head> <script language="javascript" type="text/javascript"> function hiba(message,url,line){ uzenet = "Hiba történt!\n"; uzenet += "Hibaüzenet: "+message+"\n"; uzenet += "URL: "+url+"\n"; uzenet += "Sor: "+line; alert(uzenet); window.onerror=hiba; </script> </head> A try és catch használata A hibakezelés korszer bb módja A try blokkjában adhatunk meg olyan kódot, ami esetleg hibát okozhat A catch szó után pedig beírhatjuk a hibát kezel kódot A Firefox webfejleszt i eszköztára try{ az a kód ami hibát okozhat catch(err){ alert(err.description); 7

8 Az IE webfejleszt i eszköztára ls.aspx?familyid=e59c d BB3E-2D5E1DB91038&displaylang=en DOM Inspektor (Firefox) Segítségével a weblap DOM szerkezetét tekinthetjük meg. /6622 Tools > DOM Inspektor Execute JS JavaScript shell /1729 8

9 Eszközök > Open Execute JS Feladat Forms > Display Form Details Készítsünk olyan programot, amely gondol egy számot 1 és 100 között! Ezt a számot nekünk is ki kéne találni, ehhez tippelhetünk, és a program azzal segít, hogy elárulja, hogy ennél nagyobbat, vagy kisebbet gondolt-e. Miscellaneous > Edit HTML AJAX Aszinkron JavaScript és XML Lehet séget biztosít a felhasználói adatok webkiszolgálóra küldésére és viszont XMLHttpRequest objektumom keresztül tarthat kapcsolatot az oldal a webkiszolgálóval Távoli parancsvégrehajtás 9

10 A JavaScript ügyfél A program létrehoz egy XMLHttpReguest objektumot, és elküldi a webkiszolgálónak, majd folytatja a m ködését. A kiszolgáló válaszként elküldi egy fájl tartalmát vagy egy kiszolgálóoldali program kimenetét. Amikor a válasz megérkezik, elindul egy JavaScript függvény, amely m veleteket végez az adatokon. A program a DOM segítségével jeleníti meg a kiszolgáló adatait, így az oldalt nem kell frissíteni. A háttérprogram Egyszer bb esetben egy statikus fájl Gyakrabban PHP, Perl, Ruby vagy Python nyelv szerveroldali program A JavaScript ezeknek a programoknak a GET vagy POST módszerrel küldhet adatokat. GET esetében az URL-be kódolva POST esetén külön. XML A szerveroldali fájlok, vagy programok adatai XML formátumban érkeznek A JavaScript ezeket XML-kezel függvényekkel dolgozhatja fel. getelementsbytagname() : olyan elemeket keres, amely adott tagnévvel rendelkezik. Az adatok ezen kívül lehetnek sima szövegek, vagy HTML formátumúak. Kérelem létrehozása Létrehozzuk az objektumot: ajaxkeres = new XMLHttpRequest(); URL megnyitása: ajaxkeres.open("get/post",fájlnév) Például: ajaxkeres.open("get","search.php?query= John"); Megnyitjuk a search.php fájlt és átadjuk a query paraméternek a John értéket. Elküldés: A kérelem elküldése ajaxkeres.send(paraméter); A válasz megérkezéséig egyéb más tevékenységek is elvégezhet k, ezért egy eseménykezel t állítunk a válasz kezelésére: ajaxkeres.onreadystatechange = függvény; A válasz értelmezése Ha a readystate tulajdonság eléri a 4-es értéket, akkor a kérés teljesítésre került. responsetext : a választ nyers szövegként tartalmazza responsexml : a választ XML formátumban tartalmazza 10

11 Feladat (Szükség lesz egy webkiszolgálóra) Készítsünk olyan alkalmazást, amely kérdéseket tesz fel a felhasználónak, és arra válaszokat vár! A kérdéseket és a válaszokat egy webkiszolgálón lév XML fájlból olvassuk ki! (Xerver telepítése, konfigurálása) AJAX könyvtár var ajaxker = false, ajaxhiv; function ajaxkeres(fajlnev){ try{ ajaxker = new XMLHttpRequest(); catch(error){ return false; ajaxker.open("get",fajlnev); ajaxker.onreadystatechange = ajaxvalasz; ajaxker.send(null); function ajaxvalasz(){ if (ajaxker.readystate!= 4) return; if (ajaxker.status == 200){ if (ajaxhiv) ajaxhivas(); else alert("hibás kérés: "+ajaxker.statustext); return true; <html> <head> A HTML fájl <script language="javascript" type="text/javascript" src="ajaxlib.js"> </script> </head> <body> <h1>teszt</h1> <form> <p><b>kérdés:</b> <span id="kerdes">...</span> </p> <p><b>válasz:</b> <input type="text" name="valasz" id="valasz"> <input type="button" value="elküld" id="elkuld"> </p> <input type="button" value="a teszt elkezdése" id="kezd"> </form> <script language="javascript" type="text/javascript" src="teszt.js"> </script> </body> </html> Az XML fájl (tesztkérdések) <?xml version="1.0"? encoding="latin2"> <kerdes> <kerd>mi Magyarország f városa?</kerd> <val>budapest</val> <kerd>melyik évben kezd dött az els világháború?</kerd> <val>1914</val> <kerd>melyik DOM objektum tartalmazza az ablak URLjét?</kerd> <val>location</val> <kerd>mi az ECMAScript közkedvelt neve?</kerd> <val>javascript</val> </kerdes> 11

12 var kerdesszam = 0; A JavaScript fájl function getkerdes(){ obj = document.getelementbyid("kerdes"); obj.firstchild.nodevalue="kérem várjon!"; ajaxhivas = kovkerdes; ajaxkeres("teszt.xml"); function kovkerdes(){ kerdesek = ajaxker.responsexml.getelementsbytagname( "kerd"); obj = document.getelementbyid("kerdes"); if (kerdesszam < kerdesek.length){ k = kerdesek[kerdesszam].firstchild.nodevalue; obj.firstchild.nodevalue = k; else{ obj.firstchild.nodevalue = "Nincs több kérdés."; function ellenorzes(){ valaszok = ajaxker.responsexml.getelementsbytagname("val"); v = valaszok[kerdesszam].firstchild.nodevalue; valaszmezo = document.getelementbyid("valasz"); if (v == valaszmezo.value) alert("a válasz helyes."); else alert("helytelen. A helyes válasz: "+v); kerdesszam++; kovkerdes(); Greasemonkey Lehet vé teszi, hogy parancsokat használjunk mások webhelyein. /748 obj = document.getelementbyid("kezd"); obj.onclick = getkerdes; obj2 = document.getelementbyid("elkuld"); obj2.onclick = ellenorzes; Felhasználói parancsfájlok Nem feltöltjük ket a webhelyünkre hanem a böngész ben telepítjük személyes használatra *.user.js Kész parancsfájlok letölthet k a következ címr l: 12

13 Feladat Írjunk olyan felhasználói parancsfájlt, amely megváltoztatja a meglátogatott oldalak szöveg és háttérszínét, valamint a linkek színét! var elem = document.getelementsbytagname("body"); for (var i=0; i<elem.length; i++){ elem[i].style.backgroundcolor="red"; elem[i].style.color="white"; A parancsfájl telepítése Nyissuk meg a böngész vel! var elem2 = document.getelementsbytagname("a"); for (var i=0; i<elem2.length; i++){ elem2[i].style.color="yellow"; 13

14 VÉGE 14