JavaScript
Objektumorientált programozás böngésző jó néhány objektumot bocsájt a rendelkezésünkre tulajdonságok var txt="hello World!" document.write(txt.length) Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 2
Metódusok var str="hello world!" document.write(str.touppercase()) Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 3
Objektumok létrehozása function osztaly() { this.tulajdonsag = 5; } var objektum = new osztaly(); alert(objektum.tulajdonsag); Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 4
Prototípus alapú öröklődés nem lesz :( Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 5
Fontosabb osztályok, objektumok JavaScript referencia http://htmlinfo.polyhistor.hu/js13ref/contents.htm Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 6
HTML DOM Document Object Model Core DOM, XML DOM és HTML DOM fastruktúra minden pontja egy objektum, ami egy elemet reprezentál elemek tartalmazhatnak szöveget és tulajdonságokat is, amit az objektumokból ki is lehet nyerni Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 7
DOM példa <head><script type="text/javascript"> function ChangeColor() { document.body.bgcolor="yellow" } </script></head> <body onclick="changecolor()"> Klikkeljen az oldalon! </body> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 8
CSS stílusok elérése document.body.style.background="yellow" Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 9
getelementbyid nagyon gyakran alkalmazzuk <a id="micro" href="http://www.microsoft.com"> Microsoft</a> var link = document.getelementbyid('micro') link.innerhtml="visit W3Schools" link.href="http://www.w3schools.com" Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 10
Document objektum <script type="text/javascript"> document.write(document.title) </script> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 11
Event objektum kiváltott felhasználói események kezelésekor az eseménykezelő függvény egy esemény objektumot kap paraméterként pl. melyik egérgomb volt lenyomva, vagy éppen milyen koordinátákon van az egérkurzor Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 12
Diszkrét JavaScript csak JavaScripttel használható (tolakodó) szolgáltatások helyett olyan oldalakat készítsünk, amelyek JavaScript nélkül is működnek, esetleg kényelmetlenebbül, extrák nélkül, de mégis működnek Miért? nincs mindenkinél engedélyezve robotok nem foglalkoznak vele jobban szétválik a tartalom és a működés Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 13
Példa: előugró (popup) ablak <a href="javascript:window.open('popup.html', 'popup');"> popup nyitás</a> <a href="#" onclick="window.open('popup.html','popup'); return(false);"> popup nyitás</a> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 14
Jobb megoldás <a href="popup.html" onclick="window.open('popup.html','popup'); return(false);"> popup nyitás</a> Ez még nem teljesen "diszkrét" Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 15
Teljesen diszkrét megoldás <a href="popup.html" class="popup">popup nyitás</a> Hol a JavaScript? script: külső fájlban [DEMO: popup_ablak] Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 16
E-mail cím elrejtése 1 a spam robotok e-mail címekre vadásznak => kötelességünk a védelem megoldások kép :-( intelligens elírás: at, dot, kukac stb szavak az előző diszkrét JavaScripttel Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 17
E-mail cím elrejtése 2 <a href="mailto:nagy.gusztav#kukac#gamf.kefo.h u" >nagy.gusztav#kukac#gamf.kefo.hu</a> a kód cserél: addevent(window, 'load', whatcorrector); Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 18
E-mail cím elrejtése 3 function whatcorrector() { var replaces = 0; while (document.body.innerhtml.indexof('#'+ 'KUKAC#')!=-1 && replaces<10000) { } document.body.innerhtml = document.body.innerhtml.replace( '#'+'KUKAC#', String.fromCharCode(64)); replaces++; } Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 19
Gyakran használt függvények bármelyik honlapon hasznosak lehetnek setcookie, getcookie http://webprog.hu/suetik_kezelese getelementsbyclass addevent, addloadevent http://webprog.hu/onload_esemeny Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 20
Kódtárak http://prototype.conio.net/ http://script.aculo.us/ http://jquery.com/ http://www.extjs.com/ http://developer.yahoo.com/yui/ http://mootools.net/ Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 21
Alkalmazások http://www.huddletogether.com/projects/lightbox2/ http://jquery.com/demo/thickbox/ http://meyerweb.com/eric/tools/s5/... Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 22
8. AJAX Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 23
Bevezető külön előadás kellene :( nem egy új nyelv, hanem a létező szabványok (bizonyos értelemben) újszerű alkalmazása Asynchronous JavaScript And XML lényeg: az oldal újratöltése nélkül is kommunikálunk a szerverrel Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 24
AJAX egyszerű példa: [DEMO: ajax.html] név begépelése Szerver oldal kb: SELECT nev FROM nevek WHERE nev like "A%" (ez csak váz, nem biztonságos) Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 25
AJAX példák http://maps.google.com/ http://wiki.script.aculo.us/scriptaculous/show/demos http://demos.openrico.org/ http://www.jamesdam.com/ajax_login/login.html... Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 26