Embed Size (px)
DESCRIPTION
WEB TECHNOLÓGIÁK. A JavaScript. 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. - PowerPoint PPT Presentation
Citation preview
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) 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
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
JavaScript beágyazása HTML-be
<html><head><title> … </title><script language=”JavaScript”>
window.alert(”Üdvözöllek”);</script></head><body>
…<script language=”JavaScript” src=”http://...”> </script>
…</body> </html>
5
A JavaScript nyelv elemei
Változók JavaScript kulcsszavak, objektumok,
elemfüggvényekAz objektumok elemváltozókat és elemfüggvényeket tartalmaznak.
Kifejezések és operátorok
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
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
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
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éterekfvnev.arguments[i]
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
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
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
Objektumok vezérlési szerkezetei
Objektum elemváltozóin végiglépkedfor (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
JavaScript beépített objektumok
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
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
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
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
Link objektum
Elemváltozók: host, port, target, protocol, …
Eseménykezelők: onClick, onMouseDown, …
20
Űrlap objektum
Elemváltozók: action, elements, encoding, length, method, name, …
Elemfüggvények: reset(), submit() Eseménykezelők: onReset, onSubmit
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
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
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
Button objektum
Elemváltozók: form, name, type, value Elemfüggvények: blur(), focus(), click(), … Eseménykezelők: onBlur, onFocus, onClick,
onMouseDown, onMouseUp
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
Példa
<html> <head><script language=”JavaScript”>
function AGomb() { alert(”Az A gombra kattintott”); }
function BGomb() { alert(”A B gombra kattintott”); }
</script></head>
27
Példa folytatása
<body><form name=”proba”>
<input type=”button” value=”A” onClick=”AGomb()”>
<input type=”button” value=”B” onClick=”BGomb()”>
</form></body> </html>
28
Másik példa
<html><script language=”JavaScript”>
Ido = new Date();Ora = Ido.getHours();if (Ora>6 && Ora<18) document.write(”<body background=”nappal.gif”>”);else document.write(”<body background=”ejjel.gif”>”);
</script> … </html>
29
Utolsó példa 1
<html><script>
kesleltetes = 100;kepszam = 1;Kepek = new Array();for (i=1; i < 11; i++) {
Kepek[i] = new Image();Kepek[i].src = ”kep” + i + ”.gif”; }
30
Utolsó példa 2
function animacio() {document.kepem.src = Kepek[kepszam].srckepszam++;if (kepszam > 10) { kepszam = 1; }}function lassabban() { … }function gyorsabban() { … }
</script>
31
Utolsó példa 3
<body><img name=”kepem” src=”kep1.gif”
onLoad=”setTimeout(‘animacio()’, kesleltetes)”><form>
<input type=”button” value=”Lassabban” onClick=”lassabban()”><input type=”button” value=”Gyorsabban” onClick=”gyorsabban()”>
</form> </body> </html>
32
Online Reference
http://www-db.iit.uni-miskolc.hu/doc/JavaScript/http://www.htmlgoodies.com/primers/jsp/article.php/3586411
http://www.webdeveloper.com/javascript/javascript_js_tutorial.htmlhttp://www.comptechdoc.org/independent/web/cgi/javamanual/javastart.html
http://www.techtutorials.info/search.php?tutorials
33
Játékprogram 3/1
<head><script>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
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(); }}</script>
</head>
35
Játékprogram 3/3
<body><h1>Gondoltam egy számra!</h1>
Gondoltam egy számra 1 és 100 között. Próbálja meg legfeljebb 10 lépésben kitalálni!
<form NAME = "form1"><input TYPE="text" SIZE=25 NAME="hint" VALUE="Gépelje be a
tippjét!"><br><b>Tipp:</b><input TYPE="text" NAME="tipp1" SIZE=5 ><input TYPE="BUTTON" VALUE="Tipp" onClick="Tipp();">
</form></body>
onKeyDown="IsEnter(event);"
36
Játékprogram módosítás
function IsEnter(E) {if (E.keyCode == 13) {
Tipp();}
}
<head><script>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
Ada
tlap
adat
aina
k el
lenő
rzés
e 1/
3
<BODY><H1>Adatlap regisztrációhoz</H1><HR>Töltse ki az adatlap mezőit, majd nyomja meg az "elküld" gombot!<HR><FORM NAME="adatlap" onSubmit="return Ellenorzes();">
<B>Név:</B><INPUT TYPE="text" NAME="felhasznalo" SIZE=20><BR>
<B>Telefonszám: </B><INPUT TYPE="text" NAME="telefon" SIZE=15><BR>
<B>E-mail:</B><INPUT TYPE="text" NAME="email" SIZE=20><BR>
<B>Levelezési cím:</B><INPUT TYPE="text" NAME="cim" SIZE=30><BR>
<B>Irányítószám:</B><INPUT TYPE="text" NAME="ir" SIZE=30>
<HR><INPUT TYPE="SUBMIT" NAME="submit" VALUE="Elküld">
<INPUT TYPE="RESET" VALUE="Mindent töröl"></FORM></BODY>
