Objektumorientált programozás

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "Objektumorientált programozás"

Réka Kornélia Orbán
7 évvel ezelőtt
Látták:

1 JavaScript

2 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, tanév, őszi félév 2

3 Metódusok var str="hello world!" document.write(str.touppercase()) Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 3

4 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, tanév, őszi félév 4

5 Prototípus alapú öröklődés nem lesz :( Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 5

6 Fontosabb osztályok, objektumok JavaScript referencia Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 6

7 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, tanév, őszi félév 7

8 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, tanév, őszi félév 8

9 CSS stílusok elérése document.body.style.background="yellow" Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 9

10 getelementbyid nagyon gyakran alkalmazzuk <a id="micro" href=" Microsoft</a> var link = document.getelementbyid('micro') link.innerhtml="visit W3Schools" link.href=" Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 10

11 Document objektum <script type="text/javascript"> document.write(document.title) </script> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 11

12 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, tanév, őszi félév 12

13 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, tanév, őszi félév 13

14 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, tanév, őszi félév 14

15 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, tanév, őszi félév 15

16 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, tanév, őszi félév 16

17 cím elrejtése 1 a spam robotok 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, tanév, őszi félév 17

18 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, tanév, őszi félév 18

19 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, tanév, őszi félév 19

20 Gyakran használt függvények bármelyik honlapon hasznosak lehetnek setcookie, getcookie getelementsbyclass addevent, addloadevent Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 20

21 Kódtárak Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 21

22 Alkalmazások Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 22

23 8. AJAX Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 23

24 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, tanév, őszi félév 24

25 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, tanév, őszi félév 25

26 AJAX példák Web programozás I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 26

Hasonló dokumentumok

12.óra jquery Framework #1. Gyimesi Ákos

12.óra jquery Framework #1. Gyimesi Ákos 12.óra jquery Framework #1 Gyimesi Ákos gyimesi.akos@gmail.com http://webprog.gy-i-m.com 12.óra jquery Framework #1 Miről lesz szó? JavaScript nyelv alapjai plusz: a JavaScript objektummodellje JavaScript