Tartalom A JavaScript haladó lehet ségei

• A szöveg, amit a látogató az oldalainkon olvashat • Szövegként írjuk meg • HTML elemekkel osztjuk egységekre

webprogramozó

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

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.

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.

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

Eseménykezel k beállítása • Egy adott HTML elemben: –

• JavaScript fájlban: – window.onload=Startup;

• A probléma, hogy ezzel a módszerrel egy elemhez csak egy eseménykezel állítható be.

Eseménykezel eltávolítása • window.removeEventListener('load', Startup,false);

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 )

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

Feladat • Készítsünk olyan programot, amely kiírja a böngész nk adatait!

A böngész tulajdonságai

<script language="JavaScript" type="text/javascript"> document.write("
• Bels kódnév: "+navigator.appCodeName); document.write("
• A böngész neve: "+navigator.appName); document.write("
• Verziószám: "+navigator.appVersion); document.write("
• Ügynök fejléc: "+navigator.userAgent); document.write("
• Nyelv: "+navigator.language); document.write("
• Operációs rendszer: "+navigator.platform);

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

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!

Grafikus jelöl négyzet

Hagyományos jelöl négyzet
Grafikus jelöl négyzet

<script language="JavaScript" type="text/javascript" src="jelolo.js">

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

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 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

É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.

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.

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ó

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

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.

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.

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.

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

Hibaüzenet

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

<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;

A Firefox webfejleszt i eszköztára • http://chrispederick.com/work/webdeveloper/

try{ az a kód ami hibát okozhat } catch(err){ alert(err.description); }

7

Az IE webfejleszt i eszköztára • http://www.microsoft.com/downloadS/detai ls.aspx?familyid=E59C3964-672D-4511BB3E-2D5E1DB91038&displaylang=en

DOM Inspektor (Firefox) • Segítségével a weblap DOM szerkezetét tekinthetjük meg. • https://addons.mozilla.org/hu/firefox/addon /6622

Tools > DOM Inspektor

Execute JS • JavaScript shell • https://addons.mozilla.org/hu/firefox/addon /1729

8

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

A JavaScript ügyfél

A háttérprogram

• 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.

• 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

Kérelem létrehozása

• 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.

A kérelem elküldése • Elküldés: – 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:

• 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.

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

– ajaxkeres.onreadystatechange = függvény;

10

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)

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; }

Teszt

Kérdés: <span id="kerdes">...

Válasz:

<script language="JavaScript" type="text/javascript" src="teszt.js">

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); }

A HTML fájl <script language="JavaScript" type="text/javascript" src="ajaxlib.js">

Az XML fájl (tesztkérdések) Mi Magyarország f városa? Budapest Melyik évben kezd dött az els világháború? 1914 Melyik DOM objektum tartalmazza az ablak URLjét? location Mi az ECMAScript közkedvelt neve? JavaScript

11

A JavaScript fájl var kerdesszam = 0; function getKerdes(){ obj = document.getElementById("kerdes"); obj.firstChild.nodeValue="Kérem várjon !"; ajaxHivas = kovKerdes; ajaxKeres("teszt.xml"); }

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(); }

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."; } }

Greasemonkey • Lehet vé teszi, hogy parancsokat használjunk mások webhelyein. • https://addons.mozilla.org/hu/firefox/addon /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: • http://usercripts.org

12

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

VÉGE

14