Programozás 2 javascript

Az Internet programozása II. utolsó változtatás 2008.04.27.

Javascript Egy böngészőhöz készült script nyelv. Közvetlenül a HTML kódba kell beírni. Interaktivitást biztosít a böngészőben:

„ „ „ 1. 2. 3. 4. 5. 6.

„ „

„

dinamikus szövegkiírás pl. document.write("

" + name + "

") változó szöveget ír ki az oldalra eseményekre (pl. lapbetöltés, kattintás egy elemre, stb) reagálhat bármelyik HTML elem aktuális értékét kiolvashatja és manipulálhatja adatellenörzést tesz lehetővé a szerverhez elküldés előtt cookie-ket hozhat léte ellenőrizheti a böngésző típusát

Kis és nagybetű különböző Semmi köze a Java nyelvhez. Eredetileg a Netscape böngészőhöz készült és a nevét akkor kapta, amikor a Netscape-nél bevezették a Java támogatását a böngészőben. Valódi neve most ECMAscript (ECMA - European Computer Manufacturers Association )

A Javascript tulajdonságai 1. 2.

3.

4.

5. 6.

7.

interpretálásra alkalmas nyelv dinamikus változó típusok: ugyanaz a változó bármilyen adatot (pl. szám, szöveg) tárolhat, az adat típusát nem kell előre megadni strukturált programozási elemek: pl. if, while, switch, for, for...in objektum orientált: Minden elem (még a függvények is) objektum, aminek vannak tulajdonságai. Függvények más függvényeken belül is definiálhatóak. prototipus alapú: az objektumok nem class-ok, hanem létező objektumok klónjai Egy függvényt meghívhatunk a new kulcsszóval is, Ekkor egy új objektum jön létre

Használata „ „ <script type="text/javascript"> „ „ „ „ A HTML megjegyzés -re azért lehet szükség,hogy a javascriptet nem ismerő böngészők (talán már nincsenek is ilyenek?) ne írják ki a script szöveget az oldalra. a // a javascript megjegyzés jele, ami viszont azért kell, hogy a záró HTML megjegyzés tag-et ne próbálja a javascript interpreter értelmezni. Vannak több soros megjegyzések is /* és */ között, mint a C++-ban „

Hova írjuk be a javascript kódot? „ „

„

A -ba beírt kódok akkor hajtódnak végre, amikor a lap betöltődik. Megadják a lap képét. A -be beírt kódokat meg kell hívni. A előbb töltődik be, mint a dokumentum többi része, ezért az oda írt függvények már definiáltak az első beli hívás előtt. Külső fájlba is írhatjuk, ha nem csak egy oldalon szeretnénk használni, illetve ha el akarjuk rejteni. Ebbe a fájlba nem kell és nem is szabad <script>... -et beírni. A javascript fájlok kiterjesztése js: <script src="az en scriptem.js">

Szintaxis „

Változók létrehozhatóak deklarálással, vagy automatikusan: var x; // deklarálás x = 2; y=7; // y automatikusan jön létre var x; // ujradefiniálás: nem csinál semmit, x továbbra is 2 x="alma"; // mostantól x értéke nem 2, hanem az "alma" szöveg y='korte'; // és y értéke a "körte" szöveg Az idézőjelek nem részei z="kor'te"; x='al"ma'; // az első stringben van ' a másodikban " z="\"alma\""; // most z ben az alma szó idézőjelek között van

„

A C++-ban megszokott operátorok itt is léteznek. Ezenkívül: A + operátor szövegek összefűzésére is használható Van típust is ellenö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 szerepel: pl. x=5+"5"; után x értéke az "55" szöveg lesz (idézőjelek nélkül)

Tömbök „

Létrehozásuk a new operátorral: „

„

„

De a napok elemei string-ek, ezek is tömbök: „ „

„

kedd=napok[1]; Dokument.writeline(kedd[2]); // eredmény "d"

Asszociatív tömbök: „ „

„

var napok = new Array("hétfő", "kedd", "szerda", "csütörtök","péntek","szombat"); napok[6] ="vasárnap";

atomb=new Array("h":"hétfő", "2":"kedd"); for(kulcs in atomb) Document.Write("kulcs:"+kulcs+" elem:"+atomb[kulcs])é

Közvetlenül is definiálhatunk ilyet: „

atomb={"h":"hétfő", "2":"kedd"};

Felugró szövegdobozok „

alert alert("ez egy hiba!"+'\ hiba!"+'\n'+"egy OK gombbal");

„

confirm if( confirm("Biztos akarod?") ) document.write("akartad");

„

prompt

„

<script type="text/javascript "> type="text/javascript"> function disp_prompt() () disp_prompt { var name=prompt("Í Kováács Já name=prompt("Írd be a neved"," neved","Kov János"); nos"); if (name!=null && name!="") { document.write(" Szia " + name + "! Hogy vagy?"); document.write("Szia vagy?"); } }

„

onclick="disp_prompt

„ „ „ „ „ „ „ „ „ „ „ „ „

„ „



Függvények „

deklaráció: function valami(v1,v2,v3) { var v = v1+v2+v3; document.write(v); return v; }

„

„

Egy függvénynek nem kell feltétlen visszadnia értéket A lokális változók csak a függvényen belül láthatóak

Ciklusok „ „

Ugyanúgy használjuk, mint a C/C++-ban van egy C-ben nem szereplő ciklus fajta a for ... in ciklus: for (valtozo in objektum) { végrehajtandókód }

„

Pl. „ „ „ „ „ „ „ „ „ „ „ „

<script type="text/javascript"> var x; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars) { document.write(mycars[x] + "
"); }

Eseménykezelés onabort

Egy ké kép betö betölté ltése mgszakadt, megszakí megszakítottuk

onblur

Amikor egy elem inaktí inaktívvá vvá válik

onchange

Egy mező megváltozik mező tartalma megvá

onclick

Kattintá Kattintás egy elemen

ondblclick

Dupla kattintá kattintás

onerror

Dokumentum tö tölté ltés sorá során hiba lé lépett fel

onfocus

Egy elem megkapja a fokuszt

onkeydown

Gomb lenyomá lenyomás

onkeypress

Gombnyomá Gombnyomás

onkeyup

gomb felengedé felengedés

onload

oldal vagy ké kép betö betölté ltés befejező befejeződött

onmousedown

Egy egé egérgomb benyomá benyomás

onmousemove

Az egé egérmutató rmutató mospg az elem felett

onmouseout

Az egé egérmutató rmutató elhagy egy elemet

onmouseover

Az egé került fölé kerü egérmutató rmutató egy elem fö

onmouseup

Egy egé egérgombot felengedtü felengedtünk

onreset

A reset gombra kattintottak

onresize

Egy ablak, vagy keret átmé tméretezé retezése

onselect

Szö Szöveg kivá kiválasztá lasztás egy szö szöveg, (text), vagy szö szövegterü vegterület (textarea)

onsubmit

Az elkü elküld / submit gombot nyomtuk meg

onunload

Kilé Kilépünk egy oldalró oldalról.

Néhány hasznos függvény „

„

„

„

„

eval(szöveges kifejezés) pl. eval("x+2") escape(szöveg) * @ - _ + . / kivételével minden más speciális karakter helyére a kódját írja be. De URI kódolására ne ezt használjuk. unescape(szöveg) visszaalakítja az escape()-pel átalakított szöveget encodeURI(szöveg) , / ? : @ & = + $ # kivételével minden speciális (pl ékezetes betü) helyett a kódját írja be. pl. 'á' –ból %C3%A1 (az á UTF8 kódja) lesz decodeURI(encodeURI-val kódolt szöveg)

Document Object Model A HTML DOM egy objektum hiererhiát ad

Néhány DOM objektum „

DOM Window a JavaScript hierarchia csúcsa. Egy böngésző ablakot jelent. Mindannyiszor létrejön, amikor egy vagy egy elem van az oldalon Alárendely Java objektumok: „ Navigator „ Screen „ History „ Location

„

DOM Document – a Window al-objektuma A következő tömbjei definiáltak „ anchors[], forms[], images[], links[]

néhány DOM Document Property-k „ body, URL, title, cookie, referrer Függvények: „ Document.Write(), Document.Writeln() „ Document.getElementById('mező név') „ Document.getElementsByName('mező név') egy tömböt ad vissza