1

A JavaScript haladólehet ségeiwebprogramozó

Tartalom

• A szöveg, amit a látogató az oldalainkonolvashat

• Szövegként írjuk meg• HTML elemekkel osztjuk egységekre

Megjelenés

• A szöveg kinézete és elrendezése aweblapokon

• A szövegformázást, a bet típusokat, aszíneket, a képeket stb jelenti

• Általában stílusokkal (CSS lapokkal)alakítjuk ki

Viselkedés

• M veletek, amelyek végrehajtásrakerülhetnek a látogatóval valókapcsolattartás során

• Kliensoldali vagy szerveroldali szkripteksegítségével történik.

Progresszív fejlesztés

• A HTML dokumentum legyen annyiraegyszer , amennyire csak lehetséges

• A stíluslapok és a szkriptek segítségévelegészítsük ki újabb és újabbtuljadonságokkal.

A progresszív fejlesztés alapelvei

• A megjelenést külön CSS fájlbanszabályozzuk, lehet ség szerint neszabályozzuk a megjelenést HTMLelemekkel.

• A viselkedést küls JavaScript fájlokkalszabályozzuk

• Az eseményeket szövegközieseménykezel k nélkül adjuk aweboldalakhoz

2

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 egyelemhez csak egy eseménykezelállítható be.

A W3C eseménymodellje

• addEventListener() : az elemhez többesemé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ábanmegfelel )

Eseménykezel eltávolítása

• window.removeEventListener('load',Startup,false);

IE

• Az IE 6 és 7-ig nem támogatja a W3Cmodellt.

• 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ásabö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

3

Feladat

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

A böngész tulajdonságai

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 aweblapjait, hogy ha a böngész nem Mozillakéntazonosítja magát, akkor elirányítja (ezérthazudik az IE)

• A verziószámnál pedig attól félnek, hogy azesetleges túl magas verziószám nem esik át asz n ("a nyílt forrású szoftverek területén nemnövekszenek a verziószámok olyan ütemben,mint az üzleti modell esetén) (ezért is hazudik azIE)

Képességérzékelés

• Ha például szeretnénk használni agetElementById() függvényt, aztmegvizsgálhatjuk, hogy létezik-e?

• if (document.getElementById)

4

Feladat

• Készítsünk olyan programot, amelyJavaScriptet ismer böngész eseténgrafikus jelöl négyzetet, azt nem ismerböngész esetén hagyományosjelöl négyzetet használ!

Grafikus jelöl négyzet

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

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

}

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ásimódszerek

• A programokat mindig rendezetten ésolvashatóan igyekezzünk megírni.

• Tagoljunk helykihagyásokkal, használjunktabulá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önnyebbenmegállapítható a hatóköre.

A megfelel programozásimódszerek

• A bonyolult programokat osszuk logikairészekre

• A nagyobb programokat több menetbenírjuk meg, és minden menet utánellen 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. helytelenhasználatából adódnak

• Leggyakrabban elgépelés soránkeletkeznek

• A JavaScript értelmez is egyértelm enfelismeri, 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éta blokkon kívül szeretnénk módosítani

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áta hibakezel függvény nevére állíthatjuk

• Ekkor a hagyományos hibaüzenet helyettez a függvényhívás zajlik le.

• A böngész három paramétert tud átadniennek 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 ahibáról szóló információk egyfigyelmeztet ablakon jelennek meg!

7

Hibaüzenet

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

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

A Firefox webfejleszt i eszköztára

• http://chrispederick.com/work/web-developer/

http://chrispederick.com/work/web-

8

Az IE webfejleszt i eszköztára

• http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

DOM Inspektor (Firefox)

• Segítségével a weblap DOM szerkezetéttekinthetjü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

http://www.microsoft.com/downloadS/detaihttps://addons.mozilla.org/hu/firefox/addonhttps://addons.mozilla.org/hu/firefox/addon

9

Eszközök > Open Execute JS

Feladat

• Készítsünk olyan programot, amely gondolegy számot 1 és 100 között! Ezt a számotnekünk is ki kéne találni, ehheztippelhetünk, és a program azzal segít,hogy elárulja, hogy ennél nagyobbat, vagykisebbet gondolt-e.

Forms > Display Form Details

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 awebkiszolgálóval

• Távoli parancsvégrehajtás

10

A JavaScript ügyfél• A program létrehoz egy XMLHttpReguest

objektumot, és elküldi a webkiszolgálónak, majdfolytatja a m ködését.

• A kiszolgáló válaszként elküldi egy fájl tartalmátvagy egy kiszolgálóoldali program kimenetét.

• Amikor a válasz megérkezik, elindul egyJavaScript függvény, amely m veleteket végezaz adatokon.

• A program a DOM segítségével jeleníti meg akiszolgáló adatait, így az oldalt nem kellfrissí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üldhetadatokat.

• GET esetében az URL-be kódolva• POST esetén külön.

XML

• A szerveroldali fájlok, vagy programokadatai XML formátumban érkeznek

• A JavaScript ezeket XML-kezelfüggvényekkel dolgozhatja fel.

• getElementsByTagName() : olyanelemeket keres, amely adott tagnévvelrendelkezik.

• Az adatok ezen kívül lehetnek simaszö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.

A kérelem elküldése

• Elküldés:– ajaxkeres.send(paraméter);

• A válasz megérkezéséig egyéb mástevékenységek is elvégezhet k, ezért egyeseménykezel t állítunk a válaszkezelé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énttartalmazza

• responseXML : a választ XMLformátumban tartalmazza

11

Feladat (Szükség lesz egywebkiszolgálóra)

• Készítsünk olyan alkalmazást, amelykérdéseket tesz fel a felhasználónak, ésarra válaszokat vár! A kérdéseket és aválaszokat egy webkiszolgálón lév XMLfájlból olvassuk ki!

• (Xerver telepítése, konfigurálása)

AJAX könyvtárvar 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;}

A HTML fájl

Teszt

Kérdés:...

Válasz:

Az XML fájl (tesztkérdések)

Mi Magyarország f városa?BudapestMelyik évben kezd dött az els

világháború?1914Melyik DOM objektum tartalmazza az ablak URL-

jét?locationMi az ECMAScript közkedvelt neve?JavaScript

12

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

}

obj = document.getElementById("kezd");obj.onclick = getKerdes;obj2 = document.getElementById("elkuld");obj2.onclick = ellenorzes;

Greasemonkey

• Lehet vé teszi, hogy parancsokathasználjunk mások webhelyein.

• https://addons.mozilla.org/hu/firefox/addon/748

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

https://addons.mozilla.org/hu/firefox/addonhttp://usercripts.org

13

Feladat

• Írjunk olyan felhasználói parancsfájlt,amely megváltoztatja a meglátogatottoldalak szöveg és háttérszínét, valamint alinkek színét!

var elem =document.getElementsByTagName("body");

for (var i=0; i

14

VÉGE