1 WEB TECHNOLÓGIÁK A JavaScript. 2 Bevezetés HTML dokumentumba beágyazott végrehajtható programok készítésére Kliens oldali, (JavaScript kompatibilis)

Az előadások a következő témára: "1 WEB TECHNOLÓGIÁK A JavaScript. 2 Bevezetés HTML dokumentumba beágyazott végrehajtható programok készítésére Kliens oldali, (JavaScript kompatibilis)"— Előadás másolata:

1 1 WEB TECHNOLÓGIÁK A JavaScript

2 2 Bevezetés HTML dokumentumba beágyazott végrehajtható programok készítésére Kliens oldali, (JavaScript kompatibilis) böngésző értelmezi soronként Kliens oldali események (helyi) feldolgozására (futás időben) Dinamikus HTML lapokat tud generálni

3 3 A JavaScript nyelv Egyszerűsített Java programozási nyelv Objektum-alapú C-szerű (C++) szintaktika Futási idejű rendszer Gyengén típusos nyelv Kis- és nagybetű érzékeny Megjegyzés: //, /* … */

4 4 JavaScript beágyazása HTML-be … window.alert(”Üdvözöllek”); … …

5 5 A JavaScript nyelv elemei Változók JavaScript kulcsszavak, objektumok, elemfüggvények Az objektumok elemváltozókat és elemfüggvényeket tartalmaznak. Kifejezések és operátorok

6 6 Változók Fajtái: Sztringek Numerikus értékek (egész és valós számok) Boolean értékek Létrehozása:var valtozo; var szam = 12;

7 7 Tömbök Tömbindexelés 0-tól kezdődik Megadás: tomb[index]=ertek, tomb=[e1, e2, …] JavaScript objektum elemváltozóinak elérése: objektumnev.elemvaltozonev objektum ~ asszociatív tömb barat.nev = ”Peter”barat[”nev”] = ”Peter” barat.kor = 25;barat[”kor”] = 25; Asszoc. tömb megadása: tomb={elem:ertek, …}

8 8 Kifejezések, operátorok Feltételes kifejezés (feltetel) ? haTeljesul : haNemTeljesul Operátorok értékadás: = aritmetikai: +, +=, -, -=, *, *=, /, /=, %, %= biteltolás: >, >=, >>>, >>>= bitenkénti logikai: &, &=, ^, ^=, |, |= növelő, csökkentő: ++, -- összehasonlító: ==, !=, >=, logikai: &&, ||

9 9 Függvények Definíciója: function nev(parameterek, …) { … } Visszatérési értéke: return ertek; (nem kötelező megadni) Argumentum tömb: fv-nek átadott paraméterek fvnev.arguments[i]

10 10 Objektumok Hivatkozások: this, parent Objektum létrehozása, példányosítás: function bongeszo (nev, OS) { this.nev = nev; this.OS = OS; } … ujbongeszo = new bongeszo(”Netscape”, ”Win98”); Elemfüggvényt definiálás után hozzá kell rendelni az objektumhoz: obj.elemfv = fv

11 11 Vezérlési szerkezetek - elágazások Feltételes utasítás: if (feltetel) utasitasok [else utasitasok] Többszörös elágazás: switch (kif) { case cimke1 : ut1; break; case cimke2 : ut2; break; default : utasitas; }

12 12 Vezérlési szerkezetek - ciklusok for ( [inic.kif.]; [feltetel]; [leptetes]) {…} do { … } while (feltetel) while (feltetel) { … } Kilépéshez használt utasítások: break continue [cimke]

13 13 Objektumok vezérlési szerkezetei Objektum elemváltozóin végiglépked for (indexvaltozo in objektum) {…} Objektumot alapértelmezettként kijelöl (elemváltozói és elemfüggvényei önállóan elérhetők) with (objektum) utasitas

14 14 JavaScript beépített objektumok

15 15 A dátum objektum Beépített elemfüggvényei: getDate(), getMonth(), getYear() getDay() : adott dátum napjának sorszáma (vasárnap=0, …) getHours(), getMinutes(), getSeconds() getTime() : adott dátum unix időben setDate(), set…, stb.

16 16 Matematikai objektum Objektum neve: Math Elemváltozók: PI, LN2, LN10, LOG2E, SQRT2, … Elemfüggvények: abs(), ceil(), floor(), max(), min(), round(), sin(), cos(), log(), pow(), exp(), sqrt(), …

17 17 Sztring objektumok Elemváltozók: length Elemfüggvények: blink(), bold(), big(), fontcolor(), fontsize(), italics(), small(), strike(), sub(), sup(), concat(), link(), substr(), substring(), toLowerCase(), toUpperCase()

18 18 Window objektum Elemváltozók: closed, frames, innerHeight, innerWidth, location, name, opener, outerHeight, outerWidth, parent, self, status, top, window, toolbar, … Elemfüggvények: alert(), back(), close(), confirm(), forward(), home(), open(), print(), prompt(), stop(), … Eseménykezelők: onError, onFocus, onResize, …

19 19 Link objektum Elemváltozók: host, port, target, protocol, … Eseménykezelők: onClick, onMouseDown, …

20 20 Űrlap objektum Elemváltozók: action, elements, encoding, length, method, name, … Elemfüggvények: reset(), submit() Eseménykezelők: onReset, onSubmit

21 21 Input, Password és FileUpload objektumok Elemváltozók: form, name, type, value, … Elemfüggvények: focus(), blur(), … Eseménykezelők: onBlur, onChange, onFocus, onKeyPress, … Hidden objektumnál csak elemváltozók vannak, elemfüggvények, eseménykezelők nem használhatók.

22 22 Submit-gomb és Reset objektumok Elemváltozók: form, name, value, type Elemfüggvények: blur(), click(), focus(), … Eseménykezelők: onBlur, onClick, onFocus

23 23 Radio button és Checkbox objektumok Elemváltozók: checked, form, name, type, value, … Elemfüggvények: blur(), focus(), click(), … Eseménykezelők: onBlur, onFocus, onClick

24 24 Button objektum Elemváltozók: form, name, type, value Elemfüggvények: blur(), focus(), click(), … Eseménykezelők: onBlur, onFocus, onClick, onMouseDown, onMouseUp

25 25 Választólistás (Select) objektum Elemváltozók: form, length, name, options, value, type Elemfüggvények: blur(), focus(), … Eseménykezelők: onBlur, onChange, onFocus

26 26 Példa function AGomb() { alert(”Az A gombra kattintott”); } function BGomb() { alert(”A B gombra kattintott”); }

27 27 Példa folytatása <input type=”button” value=”A” onClick=”AGomb()”> <input type=”button” value=”B” onClick=”BGomb()”>

28 28 Másik példa Ido = new Date(); Ora = Ido.getHours(); if (Ora>6 && Ora<18) document.write(” ”); else document.write(” ”); …

29 29 Utolsó példa1 kesleltetes = 100; kepszam = 1; Kepek = new Array(); for (i=1; i < 11; i++) { Kepek[i] = new Image(); Kepek[i].src = ”kep” + i + ”.gif”; }

30 30 Utolsó példa2 function animacio() { document.kepem.src = Kepek[kepszam].src kepszam++; if (kepszam > 10) { kepszam = 1; } } function lassabban() { … } function gyorsabban() { … }

31 31 Utolsó példa3

32 32 Online Reference http://www-db.iit.uni-miskolc.hu/doc/JavaScript/ http://www.htmlgoodies.com/primers/jsp/article.php/35 86411 http://www.webdeveloper.com/javascript/javascript_js_ tutorial.html http://www.comptechdoc.org/independent/web/cgi/java manual/javastart.html http://www.techtutorials.info/search.php?tutorials

33 33 Játékprogram 3/1 var szam = Math.floor(Math.random() * 100) + 1; var szamlalo = 0; function Tipp() { var g = document.form1.tipp1.value; szamlalo++; status = szamlalo + ". tippelés.";

34 34 Játékprogram 3/2 if (g < szam) document.form1.hint.value = "Nem jó! A tipp túl kevés."; if (g > szam) document.form1.hint.value = "Nem jó! A tipp túl sok."; if (g == szam) { window.alert("Helyes!") location.reload(); } if (szamlalo == 10) { window.alert("Sajnálom, a " + szamlalo + ". tipp sem jó!"); location.reload(); } }

35 35 Játékprogram 3/3 Gondoltam egy számra! Gondoltam egy számra 1 és 100 között. Próbálja meg legfeljebb 10 lépésben kitalálni! Tipp: onKeyDown="IsEnter(event);"

36 36 Játékprogram módosítás function IsEnter(E) { if (E.keyCode == 13) { Tipp(); } } var szam = Math.floor(Math.random() * 100) + 1; var szamlalo = 0; function Tipp() { var g = document.form1.tipp1.value; szamlalo++; status = szamlalo + ". tippelés.";

37 37 Adatlap adatainak ellenőrzése 1/3 Adatlap regisztrációhoz Töltse ki az adatlap mezőit, majd nyomja meg az "elküld" gombot! Név: Telefonszám: E-mail: Levelezési cím: Irányítószám: