370 likes | 494 Views
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.
E N D
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
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: //, /* … */
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>
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
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;
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, …}
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: &&, ||
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]
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
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; }
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]
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
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.
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(), …
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()
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, …
Link objektum • Elemváltozók: host, port, target, protocol, … • Eseménykezelők: onClick, onMouseDown, …
Űrlap objektum • Elemváltozók: action, elements, encoding, length, method, name, … • Elemfüggvények: reset(), submit() • Eseménykezelők: onReset, onSubmit
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.
Submit-gomb és Reset objektumok • Elemváltozók: form, name, value, type • Elemfüggvények: blur(), click(), focus(), … • Eseménykezelők: onBlur, onClick, onFocus
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
Button objektum • Elemváltozók: form, name, type, value • Elemfüggvények: blur(), focus(), click(), … • Eseménykezelők: onBlur, onFocus, onClick, onMouseDown, onMouseUp
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
Példa <html> <head> <script language=”JavaScript”> function AGomb() { alert(”Az A gombra kattintott”); } function BGomb() { alert(”A B gombra kattintott”); } </script> </head>
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>
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>
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”; }
Utolsó példa 2 function animacio() { document.kepem.src = Kepek[kepszam].src kepszam++; if (kepszam > 10) { kepszam = 1; }} function lassabban() { … } function gyorsabban() { … } </script>
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>
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.html http://www.comptechdoc.org/independent/web/cgi/javamanual/javastart.html http://www.techtutorials.info/search.php?tutorials
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.";
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>
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);"
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.";
Adatlap adatainak ellenőrzése 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>