1 / 37

WEB TECHNOLÓGIÁK

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.

atara
Download Presentation

WEB TECHNOLÓGIÁK

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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ények Az 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éterek fvnev.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é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. 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].src kepszam++; 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.html http://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. 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>

More Related