Programozás s 2 javascript Az Internet programozása II. utolsó változtatás s 2008.04.27 27.
Javascript Egy böngb ngészőhöz z készk szült script nyelv. Közvetlenül l a HTML kódba k kell beírni. Interaktivitást biztosít t a böngb ngészőben: 1. dinamikus szövegki vegkiírás s pl. document.write("<h1>" + name + "</h1>") változó szöveget ír r ki az oldalra 2. eseményekre (pl. lapbetölt ltés, kattintás s egy elemre, stb) reagálhat 3. bármelyik HTML elem aktuális értékét t kiolvashatja és s manipulálhatja lhatja 4. adatellenörz rzést tesz lehetővé a szerverhez elküld ldés s előtt 5. cookie-ket ket hozhat létel 6. ellenőrizheti a böngb ngésző típusát Kis és s nagybetű különböző Semmi köze k a Java nyelvhez. Eredetileg a Netscape böngb ngészőhöz z készk szült és s a nevét t akkor kapta, amikor a Netscape-nél l bevezették k a Java támogatt mogatását t a böngb ngészőben. Valódi neve most ECMAscript (ECMA - European Computer Manufacturers Association )
A Javascript tulajdonságai 1. interpretálásra alkalmas nyelv 2. dinamikus változó típusok: ugyanaz a változv ltozó bármilyen adatot (pl. szám, szöveg) tárolhat, t az adat típust pusát t nem kell előre megadni 3. strukturált programozási elemek: pl. if, while, switch, for, for...in 4. objektum orientált: Minden elem (még g a függvf ggvények is) objektum, aminek vannak tulajdonságai. 5. Függvények más m s függvf ggvényeken belül l is definiálhat lhatóak. ak. 6. prototipus alapú: : az objektumok nem class-ok, hanem létező objektumok klónjai 7. Egy függvf ggvényt meghívhatunk a new kulcsszóval is, Ekkor egy új j objektum jön j n létrel
Használata <html> <body> <script type="text/javascript javascript"> <! document.write("hello World!"); // --> </script> </body> </html> A HTML megjegyzés s <!--... --> -re azért lehet szüks kség,hogy a javascriptet nem ismerő böngészők (talán n már m r nincsenek is ilyenek?) ne írják k ki a script szöveget az oldalra. a // a javascript megjegyzés s jele, ami viszont azért kell, hogy a záró HTML megjegyzés s tag-et ne próbálja a javascript interpreter értelmezni. Vannak több t soros megjegyzések is /* és s */ között, k mint a C++-ban
Hova írjuk be a javascript kódot? k A <body> -ba beírt kódok k akkor hajtódnak végre, v amikor a lap betölt ltődik. Megadják k a lap képét. k A <head>-be beírt kódokat k meg kell hívni.. A <head> előbb töltt ltődik be, mint a dokumentum többi t része, r ezért az oda írt függvf ggvények már m r definiáltak az első <body> beli hívás h s előtt. Külső fájlba is írhatjuk, ha nem csak egy oldalon szeretnénk nk használni, illetve ha el akarjuk rejteni. Ebbe a fájlba f nem kell és s nem is szabad <script>...</script> -et beírni. A javascript fájlok f kiterjesztése se js: <head><script src="az en scriptem.js"> > </head>
Szintaxis Változók k létrehozhatl trehozhatóak ak deklarálással, vagy automatikusan: var x; // deklarálás x = 2; y=7; // y automatikusan jön j n létrel var x; // ujradefiniálás: nem csinál l semmit, x továbbra is 2 x="alma"; // mostantól l x értéke nem 2, hanem az "alma" szöveg y='korte'; // és s y értéke a "körte" szöveg Az idézőjelek nem részeir z="kor'te"; x='al"ma'; // az első stringben van ' a másodikbanm " z="\"alma "alma\"";""; // most z ben az alma szó idézőjelek között k van A C++-ban megszokott operátorok itt is léteznek. l Ezenkívül: A + operátor szövegek összefűzésére is használhat lható Van típust is ellenörz rző === operátor is: ha x=5; akkor x =="5" igaz,, de x==="5" hamis Ha egy számhoz egy szöveget adunk hozzá az eredmény olyan szöveg lesz, amiben az illető szám m szerepel: pl. x=5+"5"; után n x értéke az "55" szöveg lesz (idézőjelek nélkn lkül) l)
Tömbök Létrehozásuk a new operátorral: var napok = new Array("hétf tfő", "kedd", "szerda", "csütörtök","péntek","szombat" ntek","szombat"); napok[ ok[6] ] ="vas= "vasárnap"; De a napok elemei string-ek, ezek is tömbt mbök: kedd=napok[1]; Dokument.writeline(kedd[2]); // eredmény "d" Asszociatív v tömbt mbök: atomb=new Array("h":"hétf tfő", "2":"kedd"); for(kulcs in atomb) Document.Write("kulcs:"+kulcs+" elem:"+atomb[kulcs kulcs])é Közvetlenül l is definiálhatunk ilyet: atomb={"h":"h "h":"hétfő", "2":"kedd"};
Felugró szövegdobozok alert alert("ez egy hiba!"+'\n'+"egy OK gombbal"); confirm if( confirm("biztos akarod?") ) document.write("akartad"); prompt <html> <head> <script type="text/javascript javascript"> function disp_prompt() { var name=prompt("írd rd be a neved"," ","Kovács JánosJ nos"); if (name!=null && name!="") { document.write(" ("Szia " + name + "! Hogy vagy?"); } } </script> </head> <body> <input type="button" onclick=" ="disp_prompt()" value="display a prompt box" /> </body> </html>
Függvények deklaráci ció: function valami(v1,v2,v3) { var v = v1+v2+v3; document.write(v); return v; } Egy függvénynek nem kell feltétlen tlen visszadnia értéket A lokális lis változv ltozók k csak a függvf ggvényen belül l láthatl thatóakak
Ciklusok Ugyanúgy használjuk, mint a C/C++-ban van egy C-ben C nem szereplő ciklus fajta a for... in ciklus: for (valtozo( in objektum um) ) { végrehajtandókód } Pl. <html> <body> <script type="text/javascript javascript"> var x; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars) ) { document.write(mycars[x] ] + "<br />"); } </script> </body> </html>
Eseménykezel nykezelés onabort onblur onchange onclick ondblclick onerror onfocus onkeydown onkeypress onkeyup onload onmousedown onmousemove onmouseout onmouseover onmouseup onreset onresize onselect onsubmit onunload Egy kép k p betölt ltése mgszakadt, megszakítottuk Amikor egy elem inaktívv vvá válik Egy mező tartalma megváltozik Kattintás s egy elemen Dupla kattintás Dokumentum töltt ltés s során n hiba lépett l fel Egy elem megkapja a fokuszt Gomb lenyomás Gombnyomás gomb felengedés oldal vagy kép k p betölt ltés s befejeződött Egy egérgomb benyomás Az egérmutat rmutató mospg az elem felett Az egérmutat rmutató elhagy egy elemet Az egérmutat rmutató egy elem föléf került Egy egérgombot felengedtünk nk A reset gombra kattintottak Egy ablak, vagy keret átméretezése Szöveg kiválaszt lasztás s egy szöveg, (text), vagy szövegter vegterület (textarea) Az elküld ld / submit gombot nyomtuk meg Kilépünk egy oldalról. l.
Néhány hasznos függvf ggvény eval(sz (szöveges kifejezés) pl. eval("x+2") escape(szöveg) * @ - _ +. / kivétel telével minden más m s speciális karakter helyére a kódjk dját írja be. De URI kódolk dolására ne ezt használjuk. unescape(sz (szöveg) visszaalakítja az escape()-pel pel átalakított tott szöveget encodeuri(sz (szöveg), /? : @ & = + $ # kivétel telével minden speciális (pl ékezetes betü) ) helyett a kódjk dját írja be. pl. 'á'' ból %C3%A1 (az á UTF8 kódja) lesz decodeuri(encodeuri (encodeuri-val kódolt k szöveg)
Document Object Model A HTML DOM egy objektum hiererhiát t ad
Néhány DOM objektum DOM Window a JavaScript hierarchia csúcsa. csa. Egy böngb ngésző ablakot jelent. Mindannyiszor létrejl trejön, amikor egy <body> vagy egy <frameset> elem van az oldalon Alárendely Java objektumok: Navigator Screen History Location DOM Document a Window al-objektuma A következk vetkező tömbjei definiáltak anchors[], forms[], images[], links[]
néhány ny DOM Document Property-k body, URL, title, cookie, referrer Függvények: Document.Write Write(), Document.Writeln Writeln() Document.getElementById getelementbyid('mező név') Document.getElement getelementsbyname('mező név') egy tömböt ad vissza