Datasheet
Year, pagecount:2005, 30 page(s)
Language:Hungarian
Downloads:593
Uploaded:April 09, 2010
Size:234 KB
Institution:
-
Comments:
Attachment:-
Download in PDF:Please log in!
  |
macs | August 29, 2013 |
|---|---|---|
| Hasznos. | ||
What did others read after this?
Content extract
Internet alkalmazások I. Bevezetés I.1 A JavaScript jellemzıi: A JavaScript-et a Netscape fejlesztette ki A legelterjedtebb script nyelv az interneten A 3.0-nál nagyobb verziójú böngészıknél használható A weblapok interaktivitására tervezték Közvetlenül a HTML dokumentumba helyezhetı Megjegyzés: A Java és a JavaScript két teljesen különbözı nyelv. A Java (a Sun Microsystem által fejlesztve) egy teljes és komplex programozási nyelv. A C és C++ nyelv kategóriájának felel meg I.2 Mire használható a JavaScript? A JavaScript segítségével dinamikusan helyezhetünk el szöveget a HTML dokumentumban – a következı utasítás egy változó értékét jeleníti meg: document.write("<H1>" + valtozo + "</H1>") A JavaScript eseményekre reagálhat - Programrész köthetı valamilyen eseményhez, mint az oldal letöltıdése, vagy egy egérkattintás egy HTML elem felett A JavaScript elérhetıvé
teszi a HTML elemeket (olvasni és módosítani tudja) A JavaScript segítségével ellenırizhetjük az őrlap adatait – vagyis, mielıtt továbbítanánk az adatokat, biztosíthatjuk a kiszolgáló oldali formátumokat II. Hogyan lehet létrehozni II.1 Hogyan helyezzünk JavaScript betétet egy HTML dokumentumba Példa: <HTML> <BODY> <SCRIPT TYPE="text/javascript"> document.write("Helló VILÁG!") </SCRIPT> </BODY> </HTML> A kódrészlet eredménye: Helló VILÁG! Egy kódrészlet elhelyezéséhez egy HTML oldalon a <SCRIPT> elemet használhatjuk. A TYPE attribútum határozza meg a kódrészlet nyelvét <SCRIPT TYPE="text/javascript"> 1 Internet alkalmazások Ezután következik a JavaScript részlet: a parancs, mely szöveget jelenít meg a kimeneti oldalon document.write document.write("Helló VILÁG!") A <SCRIPT> elem záró párja </SCRIPT> II.2 A parancssor
A JavaScript sorokat pontosvesszıvel szokták zárni, azonban ez nem szükséges. Akkor szükséges a pontosvesszı, ha több utasítást akarunk írni egy sorba. II.3 Hogyan kezelhetjük a régi böngészıket Azok a böngészık, melyek nem támogatják a JavaScript-et megjelenítik az oldal tartalmaként, ezért HTML megjegyzésbe kell tennünk az utasításokat: <SCRIPT TYPE="text/javascript"> <!-utasítások //--> </SCRIPT> A // szimbólum a megjegyzést jelzi a sor elején, emiatt nem jelez hibát a fordító. Megjegyzés: az elsı (<!--) jel elé nem kell // jel, ugyanis a régi böngészık megjelenítik a //<!-- jelet. III. Hova kerüljön JavaScript betét a fejlécben: akkor hajtódnak végre, ha meghívjuk ıket. <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> utasítások </SCRIPT> </HEAD> JavaScript betét a törzsrészben: az oldal betöltıdésekor hajtódik végre, vagy ha meghívjuk ıket.
<HTML> <BODY> <SCRIPT TYPE="text/javascript"> utasítások </SCRIPT> </BODY> </HTML> 2 Internet alkalmazások JavaScript betét a törzsrészben és a fejlécben: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> utasítások </SCRIPT> </HEAD> <BODY> <SCRIPT TYPE="text/javascript"> utasítások </SCRIPT> </BODY> </HTML> III.1 Külsı JavaScript betét Néha több oldalnál is szeretnénk használni ugyanazon JavaScript részleteinket. Ekkor létrehozhatunk egy állományt és hivatkozhatunk rá minden kívánt oldalnál. Példa: document.write("Ez egy külsı részlet!") Mentsül el kulso.js néven Megjegyzés: A külsı JavaScript betét nem tartalmazza a <SCRIPT> HTML elemet. Hivatkozás a részletre: <HTML> <BODY> <SCRIPT TYPE="text/javascript" src="kulso.js"></SCRIPT> </BODY> </HTML>
IV. Változók Egy változó valamilyen információ tárolója, értéke változhat a szkript futásakor. A változó neve: kis/nagybető érzékeny betővel vagy jellel kell kezdıdnie IV.1 Változó létrehozása A var utasítással: var változónév = érték vagy var nélkül: változónév = érték 3 Internet alkalmazások IV.2 Érték hozzárendelése változóhoz Példa: var szoveg = "Hello" vagy: szoveg = "Hello" IV.3 Egy változó élettartama Egy függvényen belüli változók csak azon belül érhetık el. Megjegyzés: Ezek a lokális változók. Azokat a változókat, melyeket a függvényeken kívül hoztak létre, minden függvény elérheti. Az ilyen változók élettartama a létrehozás idıpontjától a lap letöltıdésének végéig tart. Megjegyzés: Ezek a globális változók. V. Operátorok, mőveletek V.1 Aritmetikai mőveletek Mővelet Leírás Példa Eredmény + Összeadás x=2 x+2 4 - Kivonás x=2 5-x 3
* Szorzás x=4 x*5 20 / Osztás 15/5 5/2 3 2.5 % Modulus képzés 5%2 10%8 10%2 1 2 0 ++ Növelés x=5 x++ x=6 -- Csökkentés x=5 x-- x=4 V.2 Hozzárendelési mőveletek Mővelet Példa Ugyanaz, mint = x=y x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y %= x%=y x=x%y 4 Internet alkalmazások V.3 Összehasonlító mőveletek Mővelet Leírás Példa == Egyenlı 5==8 értéke hamis != Nem egyenlı 5!=8 értéke igaz > Nagyobb, mint 5>8 értéke hamis < Kisebb, mint 5<8 értéke igaz >= Nagyobb vagy egyenlı, mint 5>=8 értéke hamis <= Kisebb vagy egyenlı, mint 5<=8 értéke igaz V.4 Logikai mőveletek Mővelet Leírás Példa && És x=6 y=3 (x < 10 && y > 1) értéke igaz || Vagy x=6 y=3 (x==5 || y==5) értéke hamis ! Negáció x=6 y=3 !(x==y) értéke igaz V.5 String mőveletek Két string összekapcsolása: + txt1="Milyen"
txt2="gyönyörő nap!" txt3=txt1+txt2 A txt3 változó tartalma: "Milyengyönyörő nap!". Ha szóközt is szeretnénk a két string közé: txt1="Milyen" txt2="gyönyörő nap!" txt3=txt1+" "+txt2 vagy txt1="Milyen " txt2="gyönyörő nap!" txt3=txt1+txt2 A txt3 változó tartalma: "Milyen gyönyörő nap!". VI. Függvények A függvény egy olyan újrafelhasználható kódrészlet, mely futtatható egy esemény, vagy a függvényre való hivatkozással 5 Internet alkalmazások A következı JavaScript részlet egy függvényhívás, mely egy szöveges üzenetet jelenít meg: alert("Ez egy üzenet!") VI.1 Hogyan hozhatunk létre egy függvényt Egy függvényt nevének, argumentumainak és parancsainak megadásával hozhatunk létre: function ujfgv(argumentum1, argumentum2, stb){ utasítások } Az argumentum nélküli függvénynek is tartalmaznia kell a zárójelpárost: function
ujfgv(){ utasítások } Az argumentumok változókként használhatók a függvényen belül. A függvényeket a dokumentum fejrészében érdemes elhelyezni, hogy az oldalon belül bárhol hivatkozva már elérhetık legyenek. VI.2 Hogyan hívjunk meg egy függvényt Egy függvény mindaddig nem fut le, míg nem hivatkozunk rá argumentumaival együtt. ujfgv(argumentum1, argumentum2, stb) vagy paraméterek nélkül: ujfgv() VI.3 A return utasítás Azok a függvények, melyeknek van visszatérési értéke, a return utasítást kell használniuk. Ez az utasítás határozza meg, milyen értéket kell visszaadnia a függvénynek oda, ahonnan hívták. Például egy függvény, mely a két paraméter összegét képzi: function total(a,b){ osszeg=a+b return osszeg } Amikor hivatkozunk a függvényre, meg kell adnunk a két argumentumot: szum=total(2,3) A visszatérési érték (5) a szum nevezető változóban tárolódik el. Az elıbbieket összefoglalva: <SCRIPT
TYPE="text/javascript"> function total(a,b){ osszeg=a+b return osszeg } szum=total(2,3) alert(szum) </SCRIPT> 6 Internet alkalmazások VII. Elágazások Az elágazásokat arra használhatjuk, hogy bizonyos feltételek teljesülésekor hajthassunk végre programrészleteket. A JavaScript háromféle elágazási formát támogat: if utasítás – akkor használjuk, ha csak egy feltétel teljesülésekor akarunk utasításokat végrehajtatni. if.else utasítás – akkor használjuk, ha két különféle dolgot akarunk végrehajtani egy feltételtıl függıen. switch utasítás – akkor használjuk, ha többféle dolgot szeretnénk végrehajtani egy értéktıl függıen. VII.1 if és ifelse utasítások Akkor használjuk az if utasítást, ha van olyan kódrészletünk, amit csak akkor szeretnénk végrehajtatni, ha egy feltétel teljesül. VII.11 Szintaxis if (feltétel) { az a kódrészlet, mely akkor fut le, ha a feltétel igaz } VII.12 Példa Ha
a böngészıt futtató gép órája 10-nél kevesebbet mutat akkor „Jó reggelt!” kívánunk. Megjegyzés: A két var kezdető sor az óra lekérdezésére szolgál, a részletekrıl majd a Date objektum kapcsán esik szó. <SCRIPT TYPE="text/javascript"> var d=new Date() var azido=d.getHours() if (azido<10) { document.write("<B>Jó reggelt!</B>") } </SCRIPT> Megjegyzés: Itt nincs else ág, vagyis ez a részlet csak akkor fut le, ha a feltétel igaz. Ha egy feltételtıl függıen akarunk utasításokat végrehajtatni és más utasításokat, ha a feltétel nem teljesül, akkor használjuk a if else utasítást. VII.13 Szintaxis if (feltétel){ az a kódrészlet, mely akkor fut le, ha a feltétel igaz } else { az a kódrészlet, mely akkor fut le, ha feltétel hamis } 7 Internet alkalmazások VII.14 Példa Ha a böngészıt futtató gép órája 10-nél kevesebbet mutat akkor „Jó reggelt!” kívánunk, egyébként
„Jó napot!”. <SCRIPT TYPE="text/javascript"> var d = new Date() var azido = d.getHours() if (azido < 10) { document.write("Jó reggelt!") } else { document.write("Jó napot!") } </SCRIPT> VII.2 Többszörös elágazás (switch) Akkor használhatjuk, ha több kódrészlet közül akarunk választani. VII.21 Szintaxis switch (kifejezés) { case cimke1: az a kódrészlez, mely akkor fut le, ha kifejezés = cimke1 break case cimke2: az a kódrészlez, mely akkor fut le, ha kifejezés = cimke2 break default: az a kódrészlet, mely akkor fut le, ha nem teljesül cimke1, és a címke2 sem } Mőködés: Elıször egy kifejezés áll (általában egy változó), ami egyszer értékelıdik csak ki. A kifejezés értéke aztán összehasonlítódik az egyes case ágak címkéjével. Ha egyezik, akkor az adott címkéhez rendelt kódrészlet fog végrehajtódni. A break utasítás az egyes blokkok végét jelzi VII.22 Példa <SCRIPT
TYPE="text/javascript"> var d=new Date() var aNap=d.getDay() switch (aNap) { case 5: document.write("Végre Péntek!") break case 6: document.write("Szuper Szombat!") break case 0: document.write("Álmos Vasárnap!") break default: document.write("Már alig várom a hétvégét!") } </SCRIPT> 8 Internet alkalmazások VIII. Elágazás mővelet A JavaScript tartalmaz egy elágazási mőveletet, ami egy értéket ad egy változónak, egy feltétel teljesülésétıl függıen. VIII.1 Szintaxis változónév=(feltétel)?érték1:érték2 VIII.2 Példa udvozlet=(latogato=="FİNÖK")?"Tisztelt Fınök ":"Kedves " Ha a latogato változó értéke a „FİNÖK” szó, akkor a „Tisztelt udvozlet változóhoz, egyébként pedig a „Kedves ” szöveget. Fınök ” értéket rendeli az IX. Ciklusok Az ismétlési szerkezetek arra használatosak a JavaScript esetén, hogy bizonyos
utasításokat többször tudjunk egymás után végrehajtani. A JavaScript esetén a következı lehetıségek vannak: while – utasítások ismételt végrehajtása adott feltétel teljesülésekor do.while – bizonyos utasítások futtatása után adott feltétel teljesüléséig való ismétlése for – utasítások adott számú alkalommal való végrehajtása IX.1 while A while ismétlési szerkezetet akkor használjuk, ha adott utasításokat egy adott feltétel teljesüléséig kell végrehajtani: while (feltétel) { végrehajtandó utasítások } IX.2 dowhile A dowhile ismétlési szerkezetet akkor használjuk, ha adott utasításokat egy adott feltétel teljesüléséig kell végrehajtani, de legalább egyszer végre kell hajtani. do { végrehajtandó utasítások } while (feltétel) 9 Internet alkalmazások IX.3 for A for vezérlési szerkezet akkor használandó, ha az utasításokat adott számú alkalommal kell végrehajtani. for (kezdıérték-adás;
feltétel; növekmény) { végrehajtandó utasítások } X. Megjegyzések X.1 A JavaScript kis/nagybető érzékeny Ez annyit jelent, hogy például egy „ujfgv”nevő függvény nem egyezik meg az „ujFgv” nevővel. X.2 Szimbólumok A nyitó szimbólumoknak, mint ({[" mindig kel, hogy legyen záró tagja, mint "]}). X.3 Tördelı karakterek (white space) A JavaScript figyelmen kívül hagyja a szóköz és tabulátor-többszörözéseket. Ezeket szabadon használhatjuk, a forrás tagolásához. A következı két sor eredménye pontosan megegyezik: nev="Móka" nev = "Móka" X.4 Parancssor tördelése Egy parancssort több sorra tördelhetünk szét egy karaktersorozat megadásakor a vissza perjel segítségével. Példa: document.write("Helló VILÁG!") A parancssor tördelésének következı módja hibás document.write ("Helló VILÁG!") A fenti példa hibajelzést eredményez. X.5 Speciális karakterek
beszúrása Lehetıség van speciális karakterek beszúrására (mint " ; &) a visszaper (backslash) segítségével: document.write ("Te & Én azt mondjuk: "Hellóóóóó"") A példa eredménye: Te & Én azt mondjuk: "Hellóóóóó". 10 Internet alkalmazások X.6 Megjegyzések Egysoros megjegyzést adhatunk a JavaScript kódhoz két perjel segítségével ("//"): szum=a + b // az összeget képezzük Több vagy egysoros megjegyzésre is van lehetıség, ha a megjegyzés kezdetét "/*" jellel kezdjük és a végét "*/" jellel zárjuk. szum=a + b /* az összeget képezzük / Példa többsoros megjegyzésre: /* Ez egy megjegyzés blokk, mely több sort is tartalmaz */ XI. String objektum A String objektum a szövegekkel kapcsolatos mőveleteket teszi lehetıvé. A String objektum tulajdonságokkal és metódusokkal (eljárásokkal) rendelkezik: NN: Netscape, IE: Internet Explorer, ECMA: Web
Standard Tulajdonság Leírás NN IE length A karakterek számát adja vissza a karaktersorozatban. 2.0 30 10 Metódus Leírás NN IE ECMA ECMA bold() Félkövérre formázva adja vissza a karaktersorozatot. 2.0 30 italics() Dıltre formázva adja vissza a karaktersorozatot. 2.0 30 fontsize() Adott betőméretre formázva adja vissza a karaktersoro- 2.0 30 zatot. charAt() Adott pozícióban lévı karaktert adja vissza. indexOf() Adott karaktersorozat elsı elıfordulási pozícióját adja 2.0 30 vissza. -1-et ad vissza, ha nem fordul elı lastIndexOf() Adott karaktersorozat utolsó elıfordulási pozícióját adja 2.0 30 vissza. -1-et ad vissza, ha nem fordul elı replace() Kicserél adott karaktersorozatot karaktersorozatra. split() Egy karaktersorozatot tömbjévé. substring() Visszaadja egy karaktersorozat adott karaktereit. 20 30 10 Például: 5,14 paraméterek esetén: 9 karaktert ad vissza a 5. karaktertıl a 14-ig (a sorszámozás kezdete: 0)
egy szétvág 2.0 30 10 másik adott 4.0 40 karaktersorozatok 4.0 40 10 toLowerCase() Kisbetősre alakítja a karaktersorozatot 2.0 30 10 toUpperCase() Nagybetősre alakítja a karaktersorozatot 2.0 30 10 11 Internet alkalmazások Példa: Ciklus, és formázás egy karaktersorozaton: <HTML> <BODY> <SCRIPT TYPE="text/javascript"> var uzenet="Isten hozott nálunk!" var size=1 for (i=0;i<uzenet.length;i++){ document.write(uzenettoUpperCase()charAt(i)fontsize(size)bold()) if (size<7) size++ else size=1 } </SCRIPT> </BODY> </HTML> És az eredmény: Ciklus, és még további formázások egy karaktersorozaton: <HTML> <BODY> <SCRIPT TYPE="text/javascript"> var uzenet="Isten hozott nálunk!" var size=1 document.write(uzenet + "<BR>") document.write(uzenettoLowerCase()italics() + "<BR>") document.write(uzenettoUpperCase()bold() +
"<BR>") for (i=0;i<uzenet.length;i++){ document.write(uzenettoUpperCase()charAt(i)fontsize(size)) if (i<(uzenet.length/2)) size++ else size-} </SCRIPT> </BODY> </HTML> És az eredmény: 12 Internet alkalmazások E-mail cím ellenırzése: <HTML> <BODY> <H1>E-mail cím ellenırzése</H1> <SCRIPT TYPE="text/javascript"> var email=prompt("Mi az e-mail címed? ",""); while(email.indexOf("@") == -1 ){ alert( "Hibás e-mail cím!"); email=prompt("Mi az e-mail címed? ",""); } document.write("Az e-mail címed: <B>" + email + "</B><BR>"); document.write("OK"); </SCRIPT> </BODY> </HTML> Vagy a ciklus hátul tesztelı formában: do { email=prompt("Mi az e-mail címed? ",""); if (email.indexOf("@") == -1) { alert( "Hibás e-mail cím!"); } }
while(email.indexOf("@") == -1); A String objektum néhány metódusa: <HTML> <BODY> <P><SCRIPT TYPE="text/javascript"> var email = "csuri@jgytf.u-szegedhu"; document.write( "A vezeték név:<I> " + email.substr(0,5) + "</I><BR>"); var nevcim = email.split("@" ); document.write( "A vezeték név:<I> " + nevcim[0] + "</I><BR>"); document.write( "A levelezı kiszolgáló:<I> " + nevcim[1] + "</I><BR>"); document.write( "A cím elsı betője:<I> " + email.charAt(0) + "</I><BR>"); document.write( "A cím utolsó betője:<I> " + email.charAt(emaillength - 1) + "</I><BR>"); </SCRIPT></P> </BODY> </HTML> A String objektum cserélı metódusa: <HTML> <BODY> <P><SCRIPT
TYPE="text/javascript"> var email = "csuri@jgytf.u-szegedhu"; document.write("Az eredeti karaktersorozat: " + email + "<BR>"); document.write("Az új karaktersorozat: " + email.replace("jgytf","www") + "<BR>"); </SCRIPT></P> </BODY> </HTML> 13 Internet alkalmazások XII. Array objektum Az Array objektum azonos típusú változók sorozatának tárolására szolgál. Minden egyes érékhez egy sorszám rendelıdik, mely segítségével hivatkozhatunk az adott elemre. Egy adott értékre a tömb nevével és az elem sorszámával hivatkozhatunk A sorszámozás 0-val kezdıdik. Egy új Array objektumot a new kulcsszóval hozhatunk létre. var csaladnev=new Array(5) A kívánt elemek száma zárójelbe kerül, esetünkben 5. Minden egyes tömb elemhez a következıképpen rendelhetünk értéket: csaladnev[0] = "Kis" csaladnev[1] = "Nagy"
csaladnev[2] = "Kırösi" Az egyes értékekre pedig a következı módon hivatkozhatunk: anya = csaladnev[0] apa = csaladnev[1] Az Array objektum a következı metódusokat tartalmazza: NN: Netscape, IE: Internet Explorer, ECMA: Web Standard Tulajdonság Leírás NN IE length A tömb elemeinek számát adja vissza. 2.0 30 10 Metódus Leírás NN IE ECMA ECMA concat() Adott tömb elemeit egy másik után főzve adja vissza 4.0 40 10 shift() Törli és visszaadja a tömb elsı elemét 4.0 40 unshift() Beszúr a tömb elejére 4.0 40 pop() Törli és visszaadja a tömb utolsó elemét 4.0 40 push() Beszúr a tömb végére 4.0 40 join() Egy karaktersorozattal tér vissza, mely a tömb összes 3.0 40 10 elemét tartalmazza slice() A tömb egy részét adja vissza 4.0 40 10 Példa: Ciklus egy tömb elemein: <HTML> <BODY> <H1>Számok tömb</H1> <P><SCRIPT TYPE="text/javascript"> var evek = new
Array(10); for(var i=0; i < evek.length; i++ ){ evek[i] = i + 2000; document.write("evek[" + i + "] = " + evek[i] + "<BR>"); } </SCRIPT></P> </BODY> </HTML> 14 Internet alkalmazások Ciklus egy tömb elemein másképp: <HTML> <BODY> <H1>Szinek tömb</H1> <P><SCRIPT TYPE="text/javascript"> var szinek = new Array("red", "green", "blue", "magenta"); for(var i in szinek){ document.write("<FONT COLOR=" + szinek[i] + ">"); document.write("szinek[" + i + "] = " + szinek[i] + "</FONT><BR>"); } </SCRIPT></P> </BODY> </HTML> Ciklus egy asszociatív tömb elemein: <HTML> <BODY> <H1>Asszociatív tömb</H1> <P><SCRIPT TYPE="text/javascript"> var nevek = new Array(); nevek["KG"] = "Kiss
Gábor"; nevek["NZ"] = "Nagy Zoltán"; nevek["ML"] = "Mosolygó László"; for( var i in nevek ){ document.write("Az elem címkéje: <I> " + i + "</I><BR>"); document.write("Az elem értéke: <B>" + nevek[i] + "</B><BR>"); } </SCRIPT></P> </BODY> </HTML> Tömbök egyesítése: <HTML> <BODY> <P><SCRIPT TYPE="text/javascript"> var nevek1=new Array("Péter", "Zsolt", "Attila" ); var nevek2=new Array("Aranka", "Dóra"); document.write("<B>Az elsı tömb:</B> " + nevek1 + "<BR>"); document.write("<B>A második tömb:</B> " + nevek2 + "<BR>"); document.write("<B>Az egyesítés utáni tömb:</B><BR>"); nevek1 = nevek1.concat(nevek2); document.write(nevek1);
</SCRIPT></P> </BODY> </HTML> 15 Internet alkalmazások Tömb push, pop metódusai: <HTML> <BODY> <P><SCRIPT TYPE="text/javascript"> var nevek=new Array("Attila", "Gábor", "János", "Anna"); document.write("<B>Az eredeti tömb:</B> "+ nevek + "<BR>"); nevek.push("Dávid","Krisztián"); document.write("<B>A bıvített tömb:</B> "+ nevek + "<BR>"); document.write("<B>Az utolsó elem:</B> "+ nevekpop() + "<BR>"); document.write("<B>Az új tömb a pop() után:</B> "+ nevek + "<BR>"); </SCRIPT></P> </BODY> </HTML> Tömb shift, unshift metódusai: <HTML> <BODY> <P><SCRIPT TYPE="text/javascript"> var nevek=new Array("Dóra", "Zsuzsa",
"Jolán" ); document.write("<B>Az eredeti tömb:</B> " + nevek + "<BR>"); document.write("<B>Az elsı elem:</B> "+ nevekshift() + "<BR>"); document.write("<B>Az új tömb a shift() után:</B> " + nevek + "<BR>"); nevek.unshift("Piroska","Gizella"); document.write("<B>Az új tömb az unshift() után:</B> " + nevek); </SCRIPT></P> </BODY> </HTML> XIII. Date objektum A Date objektum a dátummal és idıvel való mőveletekre szolgál. Egy új Date objektumot a new kulcsszóval hozhatunk létre. Például az aktuális dátumot elmenthetjük az "ujDatum" változó segítségével: var ujDatum=new Date() Miután létrehoztunk egy Date objektumot, elérhetjük annak metódusait az "ujDatum" változón keresztül. Például, ha a napot szeretnénk megkapni a dátumból (1-31), akkor
azt következı módon érhetjük el: ujDatum.getDate() Létrehozhatunk az aktuális dátumtól eltérı Date objektumot is, ha " " közé írjuk a dátumot a következı módokon: new new new new Date("Month dd, yyyy hh:mm:ss") Date("Month dd, yyyy") Date(yy,mm,dd,hh,mm,ss) Date(yy,mm,dd) 16 Internet alkalmazások A következı módokon hozhatunk létre Date objektumot: var var var var ujDatum=new ujDatum=new ujDatum=new ujDatum=new Date("October 12, 1988 13:14:00") Date("October 12, 1988") Date(88,09,12,13,14,00) Date(88,09,12) A Date objektum a következı metódusokat tartalmazza: NN: Netscape, IE: Internet Explorer, ECMA: Web Standard Metódus Leírás NN IE ECMA getDay() Visszaadja adott dátum esetén a hét napját (0-6. 0=Vasárnap, 1=Hétfı, stb) 2.0 30 10 getDate() Visszaadja adott dátum esetén a napot (1-31) 2.0 30 10 getMonth() Visszaadja adott dátum esetén a hónapot (0-11. 0=Január, 1=Február,
stb) 2.0 30 10 getFullYear() Visszaadja adott dátum esetén az évek számát (4 jegyen) 4.0 40 10 getYear() Visszaadja adott dátum esetén az évek számát (0-99) 2.0 30 10 getHours() Visszaadja adott dátum esetén az órák számát (0-23) 2.0 30 10 getMinutes() Visszaadja adott dátum esetén a percek számát (0-59) 2.0 30 10 getSeconds() Visszaadja adott dátum esetén a másodpercek számát (0-59) 2.0 30 10 toString() Szöveggé alakítja a dátumot 2.0 40 10 XIII.1 Óra kijelzése Egy őrlapot hozunk létre egyetlen mezıvel, mely a böngészıt futtató gép óráját jeleníti meg, és az Ora() függvény végzi a mezı frissítését: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function Ora() { var ido = new Date() var ora = ido.getHours() var perc = ido.getMinutes() var masodperc = ido.getSeconds() var kiir = "" + ora + ":" kiir += ((perc < 10) ? "0" : "") + perc + ":"
kiir += ((masodperc < 10) ? "0" : "") + masodperc document.OraUrlapkijelzovalue = kiir setTimeout("Ora()",1000) } </SCRIPT> </HEAD> <BODY OnLoad="Ora()"> <FORM NAME="OraUrlap"> <B>Az Ön gépe szerint a pontos idı:</B> <INPUT TYPE="text" NAME="kijelzo" SIZE="9"> </FORM> </BODY> </HTML> 17 Internet alkalmazások XIII.2 ÖRÖKNAPTÁR Egy őrlapot hozunk létre, melynek mezıiben megjelenik az év, hónap, nap és a megfelelı nap neve. Ehhez a fejlécben három függvényt definiálunk <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function aNap(szam) { if (szam == 0) {return "Vasárnap"} if (szam == 1) {return "Hétfı"} if (szam == 2) {return "Kedd"} if (szam == 3) {return "Szerda"} if (szam == 4) {return "Csütörtök"} if (szam == 5) {return "Péntek"}
if (szam == 6) {return "Szombat"} } function MaiNap() { var datum = new Date() document.valasztevvalue = datumgetFullYear() document.valaszthonapselectedIndex = datumgetMonth() document.valasztnapselectedIndex = datumgetDate()-1 document.valaszthetnapvalue = aNap(datumgetDay()) } function OrokNaptar() { var datum = new Date() datum.setYear(documentvalasztevvalue) datum.setMonth(documentvalaszthonapselectedIndex) datum.setDate(documentvalasztnapselectedIndex+1) document.valaszthetnapvalue = aNap(datumgetDay()) } </SCRIPT> </HEAD> Őrlapunk pedig így fest: <BODY OnLoad="MaiNap()"> <B>Válassz évet, egy hónapot és egy napot:</B> <FORM NAME="valaszt"> Év: <INPUT TYPE="text" NAME="ev" onChange="OrokNaptar()"> Hónap: <SELECT NAME="honap" onChange="OrokNaptar()"> <OPTION>január <OPTION>december </SELECT> Nap: <SELECT NAME="nap"
<OPTION>1 <OPTION>31 </SELECT><BR> onChange="OrokNaptar()"> A hét megfelelı napja: <INPUT TYPE="text" NAME="hetnap" SIZE="9" READONLY> </FORM> </BODY> </HTML> 18 Internet alkalmazások XIII.3 Új metódus létrehozása <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function hetNap(){ var most = this.getDay() var napok = new Array(7) napok[0]="Vasárnap" napok[1]="Hétfı" napok[2]="Kedd" napok[3]="Szerda" napok[4]="Csütörtök" napok[5]="Péntek" napok[6]="Szombat" return(napok[most]) } Date.prototypeaHetNapja=hetNap </SCRIPT> </HEAD> <BODY> <SCRIPT TYPE="text/javascript"> var ma=new Date() document.write("Ma " + maaHetNapja() + " van<BR>") </SCRIPT> </BODY> </HTML> Feladat: Használjuk fel az utóbb létrehozott
új metódust az öröknaptárnál! XIV. Math objektum A Math objektum matematikai konstansok és függvények elérését teszi lehetıvé. A Math objektumot nem kell létrehozni használat elıtt. Egy 0 és 1 közötti véletlen szám eltárolásához a „velszam” változóban: var velszam=Math.random() A 8.6 kerekített értékének kiszámítása: var szam=Math.round(86) A Math objektum néhány metódusa: NN: Netscape, IE: Internet Explorer, ECMA: Web Standard Metódus Leírás NN IE ECMA abs(x) Visszatér x abszolút értékével 2.0 30 10 round(x) Visszatér x-hez legközelebbi egész értékkel 2.0 30 10 ceil(x) Visszatér x-hez legközelebbi nagyobb vagy egyenlı egésszel 2.0 30 10 floor(x) Visszatér x-hez legközelebbi kisebb vagy egyenlı egésszel 2.0 30 10 max(x,y) Visszatér x és y közül a nagyobb értékkel 2.0 30 10 min(x,y) 2.0 30 10 pow(x,y) Visszatér x és y közül a kisebb értékkel y Visszatér x y hatványával: x random()
Visszatér egy 0 és 1 közötti véletlen számmal 2.0 30 10 2.0 30 10 19 Internet alkalmazások sin(x) Visszatér x szinuszával 2.0 30 10 cos(x) Visszatér x koszinuszával 2.0 30 10 sqrt(x) Visszatér x négyzetgyökével 2.0 30 10 log(x) Visszatér x természetes alapú logaritmusával 2.0 30 10 Példák: A Math objektum néhány metódusa: <HTML> <BODY> <P><SCRIPT TYPE="text/javascript"> var szam=16 document.write("A " + szam + " szám négyzetgyöke: ") document.write(Mathsqrt(szam),"<BR>") document.write("A PI értéke: ") document.write(MathPI) document.write("<BR>A" + szam + " 3 hatványra emeltje: ") document.write(Mathpow(szam,3)) </SCRIPT></P> </BODY> </HTML> A Math objektum kerekítési lehetıségei: <HTML> <BODY> <P><SCRIPT TYPE="text/javascript"> var szam=16.3
document.write("<I>A manipulált szám: ", szam, "</I><BR><BR>") document.write("A <I>Mathfloor</I> metódus lefelé kerekítése: " + Math.floor(szam) + "<BR>") document.write("A <I>Mathceil</I> metódus felfelé kerekítése: " + Math.ceil(szam) +"<BR>") document.write("A <I>Mathround</I> metódus kerekítése a legközelebbi egészre: " + Math.round(szam) + "<BR>") </SCRIPT></P> </BODY> </HTML> Véletlen szám generálása: <HTML> <BODY> <P><SCRIPT TYPE="text/javascript"> var n = 10 // csak a kiemelés végett for(i=0; i < 10;i++){ // 0 és 10 közötti számok generálása document.write(Mathfloor(Mathrandom()* (n + 1)) + "<BR>") } </SCRIPT></P> </BODY> </HTML> 20 Internet alkalmazások XV. Window objektum Alert ablak:
<HTML> <BODY> <SCRIPT TYPE="text/javascript"> alert("Hello Világ!") </SCRIPT> </BODY> </HTML> Párbeszéd ablak (confirm): <HTML> <BODY> <SCRIPT TYPE="text/javascript"> var valasz = confirm("Kattints valamelyik gombra!") if (valasz == true) { document.write("Az OK gombra kattintottál") } else { document.write("A Mégse gombra kattintottál") } </SCRIPT> </BODY> </HTML> Párbeszéd ablak (prompt): <HTML> <BODY> <SCRIPT TYPE="text/javascript"> var nev = prompt("Add meg a neved","") if (nev != null && nev != "") { document.write("Helló " + nev + "!") } </SCRIPT> </BODY> </HTML> Új ablak nyitása: <HTML> <HEAD> <SCRIPT TYPE=”text/javascript”> function ujablak() { window.open("http://wwwjgytfu-szegedhu") }
</SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE=”button” VALUE="Új Ablak" onClick="ujablak()"> </FORM> </BODY> </HTML> 21 Internet alkalmazások Új ablak nyitása formázottan: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ujablak() { window.open("http://wwwjgytfu-szegedhu","jgytf win","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400") } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Új Ablak" onClick="ujablak()"> </FORM> </BODY> </HTML> Aktuális dokumentum módosítása: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ujurl() { window.location="http://wwwjgytfu-szegedhu" } </SCRIPT> </HEAD> <BODY>
<FORM> <INPUT TYPE="button" onClick="ujurl()" VALUE="Új Dokumentum"> </FORM> </BODY> </HTML> Aktuális dokumentum frissítése: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function frissit() { window.locationreload() } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Frissítés" onClick="frissit()"> </FORM> </BODY> </HTML> 22 Internet alkalmazások Státusz sor módosítása: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function indit() { window.status = "Írd ide a kívánt üzenetet" } </SCRIPT> </HEAD> <BODY onLoad="indit()"> <P>Nézd a státusz sort!</P> </BODY> </HTML> Aktuális dokumentum nyomtatása: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function nyomtat() {
window.print() } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Oldal nyomtatása" onClick="nyomtat()"> </FORM> </BODY> </HTML> XVI. Form objektum E-mail cím ellenırzése: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ell() { var elem=document.urlap // a kiemelés végett var kukac=elem.emailvalueindexOf("@") if (kukac == -1) { alert("Nem jó e-mail cím!") return false } } </SCRIPT> </HEAD> <BODY> <FORM NAME="urlap" onSubmit="return ell()"> Add meg az e-mail címed: <INPUT TYPE="text" NAME="email"> <INPUT TYPE="submit" value="Elküld"> </FORM> <P>Ebben a példában ellenırizzük, hogy a megadott cím tartalmaz-e a @ karaktert.</P> </BODY> </HTML> 23 Internet alkalmazások Érték ellenırzése: egy
beviteli mezı hosszának korlátozása. <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ell() { elem=document.urlap ertek=elem.ertekvalue if (ertek>=1 && ertek<=5) { return true } else { alert("1 és 5 közötti értéket adjon meg!") return false } } </SCRIPT> </HEAD> <BODY> <FORM NAME="urlap" onSubmit="return ell()"> Adjon meg 1 és 5 közötti értéket: <INPUT TYPE="text" NAME="ertek"> <INPUT TYPE="submit" VALUE="Elküld"> </FORM> </BODY> </HTML> Érték ellenırzése: egy beviteli mezı hosszának ellenırzése <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ell() { elem=document.urlap szam=elem.ertekvalue if (szam.length>5) { alert("Maximum 5 karaktert adjon meg!") return false } else { return true } } </SCRIPT> </HEAD> <BODY> <FORM
NAME="urlap" onSubmit="return ell()"> Ebben a mezıben adjon meg maximum 5 karaktert: <INPUT TYPE="text" NAME="ertek"> <INPUT TYPE="submit" VALUE="Elküld"> </FORM> </BODY> </HTML> 24 Internet alkalmazások Őrlap ellenırzése: az adatok ellenırzése <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ell() { var elem=document.urlap // többször való hivatkozáskor, így rövidíthetünk var kukac=elem.emailvalueindexOf("@") var kod=elem.kodvalue var veznev=elem.nevvalue var elkuldOK=true if (kukac==-1) { alert("Nem jó e-mail cím!") elkuldOK=false } if (kod<1 || kod>5) { alert("A kódnak 1 és 5 közötti egész értéknek kell lennie!") elkuldOK=false } if (veznev.length>10) { alert("A vezeték névnek 10 karakternél rövidebbnek kell lennie!") elkuldOK=false } if (elkuldOK==false) { return false } }
</SCRIPT> </HEAD> <BODY> <FORM NAME="urlap" onSubmit="return ell()"> Add meg az e-mail címed: <INPUT TYPE="text" NAME="email"><BR> Add meg a kódodat (1-5 közötti egész szám): <INPUT TYPE="text" NAME="kod"><BR> Add meg a vezetékneved (max. 10 karakter): <INPUT TYPE="text" NAME="nev"><BR> <INPUT TYPE="submit" VALUE="Elküld"> </FORM> </BODY> </HTML> Fókusz: hogyan tehetünk aktívvá egy beviteli mezıt <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function fokusz() { document.urlapmezofocus() } </SCRIPT> </HEAD> <BODY> <FORM NAME="urlap"> <INPUT TYPE="text" NAME="mezo" SIZE="30"> <INPUT TYPE="button" VALUE="Fókusz beállítása" onClick="fokusz()"> </FORM>
</BODY> </HTML> 25 Internet alkalmazások Kijelölés: hogyan tehetjük kijelöltté egy beviteli mezı tartalmát <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function fokusz() { document.forms[0]mezoselect() document.forms[0]mezofocus() } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="text" NAME="mezo" SIZE="30" VALUE="alapszöveg"> <INPUT TYPE="button" VALUE="Kijelölés" onClick="fokusz()"> </FORM> </BODY> </HTML> Rádió gomb: hogyan módosíthatjuk egy másik mezı tartalmát <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ell(bongeszo) { document.forms[0]valaszvalue=bongeszo } </SCRIPT> </HEAD> <BODY> <FORM> Melyik böngészı a kedvence?<BR> <INPUT TYPE="radio" NAME="bongeszo" onClick="ell(this.value)"
VALUE="Explorer">Microsoft Internet Explorer<BR> <INPUT TYPE="radio" NAME="bongeszo" onClick="ell(this.value)" VALUE="Netscape">Netscape Navigator<BR> <INPUT TYPE="text" NAME="valasz"> </FORM> </BODY> </HTML> Jelölı négyzet (checkbox): hogyan módosíthatjuk egy másik mezı tartalmát <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ell() { kave=document.forms[0]kave valasz=document.forms[0]valasz szoveg="" for (i=0; i<kave.length; ++i) { if (kave[i].checked) { szoveg=szoveg + kave[i].value + " " } } valasz.value="Ön egy kávét rendelt " + szoveg } </SCRIPT> </HEAD> 26 Internet alkalmazások <BODY> <FORM> Hogyan szereti a kávét?<BR> <INPUT TYPE="checkbox" NAME="kave" VALUE="tejjel" >Tejjel<BR> <INPUT
TYPE="checkbox" NAME="kave" VALUE="cukorral">Cukorral<BR> <INPUT TYPE="text" NAME="valasz" SIZE="40"> <INPUT TYPE="button" NAME="teszt" onClick="ell()" VALUE="Rendel"> </FORM> </BODY> </HTML> Választás legördülı menübıl: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function beall() { var elem = document.forms[0]kedvenc elem.value=documentforms[0]lmenuoptions[documentforms[0]lmenuselectedIndex]text } </SCRIPT> </HEAD> <BODY> <FORM> <P> Melyik a kedvenc böngészıje?: <SELECT NAME="lmenu" onChange="beall()"> <OPTION>Internet Explorer <OPTION>Netscape Navigator </SELECT> </P> <P> Az ön kedvenc böngészıje: <INPUT TYPE="text" NAME="kedvenc" VALUE="Internet Explorer"> </P> </FORM>
</BODY> </HTML> Legördülı menü: több elem kiválasztása: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function beall() { opcio=document.forms[0]lmenuoptions[documentforms[0]lmenuselectedIndex]text var elem = document.forms[0]szam elem.value = elemvalue + opcio } </SCRIPT> </HEAD> <BODY> <FORM> 27 Internet alkalmazások A kiválasztott számok:<BR> <SELECT NAME="lmenu"> <OPTION>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5 <OPTION>6 <OPTION>7 <OPTION>8 <OPTION>9 <OPTION>0 </SELECT> <INPUT TYPE="button" onClick="beall()" VALUE="-->"> <INPUT TYPE="text" NAME="szam"> </FORM> </BODY> </HTML> 28 Internet alkalmazások XVII. I. Tartalomjegyzék Bevezetés 1 I.1 A JavaScript
jellemzıi: 1 I.2 Mire használható a JavaScript? 1 II. Hogyan lehet létrehozni 1 II.1 Hogyan helyezzünk JavaScript betétet egy HTML dokumentumba 1 II.2 A parancssor 2 II.3 Hogyan kezelhetjük a régi böngészıket 2 III. Hova kerüljön 2 III.1 IV. Külsı JavaScript betét 3 Változók 3 IV.1 Változó létrehozása 3 IV.2 Érték hozzárendelése változóhoz 4 IV.3 Egy változó élettartama
4 V. Operátorok, mőveletek 4 V.1 Aritmetikai mőveletek 4 V.2 Hozzárendelési mőveletek 4 V.3 Összehasonlító mőveletek 5 V.4 Logikai mőveletek 5 V.5 String mőveletek 5 VI. Függvények 5 VI.1 Hogyan hozhatunk létre egy függvényt 6 VI.2 Hogyan hívjunk meg egy függvényt 6 VI.3 A return utasítás 6 VII. Elágazások 7 VII.1 if és if.else utasítások
7 VII.11 VII.12 VII.13 VII.14 VII.2 7 7 7 8 Többszörös elágazás (switch) 8 VII.21 VII.22 VIII. Szintaxis Példa Szintaxis Példa Szintaxis 8 Példa 8 Elágazás mővelet 9 VIII.1 Szintaxis 9 VIII.2 Példa 9 29 Internet alkalmazások IX. Ciklusok 9 IX.1 while
9 IX.2 do.while 9 IX.3 for 10 Megjegyzések 10 X. X.1 A JavaScript kis/nagybető érzékeny 10 X.2 Szimbólumok 10 X.3 Tördelı karakterek (white space) 10 X.4 Parancssor tördelése 10 X.5 Speciális karakterek beszúrása 10 X.6 Megjegyzések 11 XI. String objektum 11 XII. Array objektum 14 XIII. Date objektum
11 XIII.1 Óra kijelzése 17 XIII.2 ÖRÖKNAPTÁR 18 XIII.3 Új metódus létrehozása 19 XIV. Math objektum 19 XV. Window objektum 21 XVI. Form objektum 23 XVII. Tartalomjegyzék 29 30
teszi a HTML elemeket (olvasni és módosítani tudja) A JavaScript segítségével ellenırizhetjük az őrlap adatait – vagyis, mielıtt továbbítanánk az adatokat, biztosíthatjuk a kiszolgáló oldali formátumokat II. Hogyan lehet létrehozni II.1 Hogyan helyezzünk JavaScript betétet egy HTML dokumentumba Példa: <HTML> <BODY> <SCRIPT TYPE="text/javascript"> document.write("Helló VILÁG!") </SCRIPT> </BODY> </HTML> A kódrészlet eredménye: Helló VILÁG! Egy kódrészlet elhelyezéséhez egy HTML oldalon a <SCRIPT> elemet használhatjuk. A TYPE attribútum határozza meg a kódrészlet nyelvét <SCRIPT TYPE="text/javascript"> 1 Internet alkalmazások Ezután következik a JavaScript részlet: a parancs, mely szöveget jelenít meg a kimeneti oldalon document.write document.write("Helló VILÁG!") A <SCRIPT> elem záró párja </SCRIPT> II.2 A parancssor
A JavaScript sorokat pontosvesszıvel szokták zárni, azonban ez nem szükséges. Akkor szükséges a pontosvesszı, ha több utasítást akarunk írni egy sorba. II.3 Hogyan kezelhetjük a régi böngészıket Azok a böngészık, melyek nem támogatják a JavaScript-et megjelenítik az oldal tartalmaként, ezért HTML megjegyzésbe kell tennünk az utasításokat: <SCRIPT TYPE="text/javascript"> <!-utasítások //--> </SCRIPT> A // szimbólum a megjegyzést jelzi a sor elején, emiatt nem jelez hibát a fordító. Megjegyzés: az elsı (<!--) jel elé nem kell // jel, ugyanis a régi böngészık megjelenítik a //<!-- jelet. III. Hova kerüljön JavaScript betét a fejlécben: akkor hajtódnak végre, ha meghívjuk ıket. <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> utasítások </SCRIPT> </HEAD> JavaScript betét a törzsrészben: az oldal betöltıdésekor hajtódik végre, vagy ha meghívjuk ıket.
<HTML> <BODY> <SCRIPT TYPE="text/javascript"> utasítások </SCRIPT> </BODY> </HTML> 2 Internet alkalmazások JavaScript betét a törzsrészben és a fejlécben: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> utasítások </SCRIPT> </HEAD> <BODY> <SCRIPT TYPE="text/javascript"> utasítások </SCRIPT> </BODY> </HTML> III.1 Külsı JavaScript betét Néha több oldalnál is szeretnénk használni ugyanazon JavaScript részleteinket. Ekkor létrehozhatunk egy állományt és hivatkozhatunk rá minden kívánt oldalnál. Példa: document.write("Ez egy külsı részlet!") Mentsül el kulso.js néven Megjegyzés: A külsı JavaScript betét nem tartalmazza a <SCRIPT> HTML elemet. Hivatkozás a részletre: <HTML> <BODY> <SCRIPT TYPE="text/javascript" src="kulso.js"></SCRIPT> </BODY> </HTML>
IV. Változók Egy változó valamilyen információ tárolója, értéke változhat a szkript futásakor. A változó neve: kis/nagybető érzékeny betővel vagy jellel kell kezdıdnie IV.1 Változó létrehozása A var utasítással: var változónév = érték vagy var nélkül: változónév = érték 3 Internet alkalmazások IV.2 Érték hozzárendelése változóhoz Példa: var szoveg = "Hello" vagy: szoveg = "Hello" IV.3 Egy változó élettartama Egy függvényen belüli változók csak azon belül érhetık el. Megjegyzés: Ezek a lokális változók. Azokat a változókat, melyeket a függvényeken kívül hoztak létre, minden függvény elérheti. Az ilyen változók élettartama a létrehozás idıpontjától a lap letöltıdésének végéig tart. Megjegyzés: Ezek a globális változók. V. Operátorok, mőveletek V.1 Aritmetikai mőveletek Mővelet Leírás Példa Eredmény + Összeadás x=2 x+2 4 - Kivonás x=2 5-x 3
* Szorzás x=4 x*5 20 / Osztás 15/5 5/2 3 2.5 % Modulus képzés 5%2 10%8 10%2 1 2 0 ++ Növelés x=5 x++ x=6 -- Csökkentés x=5 x-- x=4 V.2 Hozzárendelési mőveletek Mővelet Példa Ugyanaz, mint = x=y x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y %= x%=y x=x%y 4 Internet alkalmazások V.3 Összehasonlító mőveletek Mővelet Leírás Példa == Egyenlı 5==8 értéke hamis != Nem egyenlı 5!=8 értéke igaz > Nagyobb, mint 5>8 értéke hamis < Kisebb, mint 5<8 értéke igaz >= Nagyobb vagy egyenlı, mint 5>=8 értéke hamis <= Kisebb vagy egyenlı, mint 5<=8 értéke igaz V.4 Logikai mőveletek Mővelet Leírás Példa && És x=6 y=3 (x < 10 && y > 1) értéke igaz || Vagy x=6 y=3 (x==5 || y==5) értéke hamis ! Negáció x=6 y=3 !(x==y) értéke igaz V.5 String mőveletek Két string összekapcsolása: + txt1="Milyen"
txt2="gyönyörő nap!" txt3=txt1+txt2 A txt3 változó tartalma: "Milyengyönyörő nap!". Ha szóközt is szeretnénk a két string közé: txt1="Milyen" txt2="gyönyörő nap!" txt3=txt1+" "+txt2 vagy txt1="Milyen " txt2="gyönyörő nap!" txt3=txt1+txt2 A txt3 változó tartalma: "Milyen gyönyörő nap!". VI. Függvények A függvény egy olyan újrafelhasználható kódrészlet, mely futtatható egy esemény, vagy a függvényre való hivatkozással 5 Internet alkalmazások A következı JavaScript részlet egy függvényhívás, mely egy szöveges üzenetet jelenít meg: alert("Ez egy üzenet!") VI.1 Hogyan hozhatunk létre egy függvényt Egy függvényt nevének, argumentumainak és parancsainak megadásával hozhatunk létre: function ujfgv(argumentum1, argumentum2, stb){ utasítások } Az argumentum nélküli függvénynek is tartalmaznia kell a zárójelpárost: function
ujfgv(){ utasítások } Az argumentumok változókként használhatók a függvényen belül. A függvényeket a dokumentum fejrészében érdemes elhelyezni, hogy az oldalon belül bárhol hivatkozva már elérhetık legyenek. VI.2 Hogyan hívjunk meg egy függvényt Egy függvény mindaddig nem fut le, míg nem hivatkozunk rá argumentumaival együtt. ujfgv(argumentum1, argumentum2, stb) vagy paraméterek nélkül: ujfgv() VI.3 A return utasítás Azok a függvények, melyeknek van visszatérési értéke, a return utasítást kell használniuk. Ez az utasítás határozza meg, milyen értéket kell visszaadnia a függvénynek oda, ahonnan hívták. Például egy függvény, mely a két paraméter összegét képzi: function total(a,b){ osszeg=a+b return osszeg } Amikor hivatkozunk a függvényre, meg kell adnunk a két argumentumot: szum=total(2,3) A visszatérési érték (5) a szum nevezető változóban tárolódik el. Az elıbbieket összefoglalva: <SCRIPT
TYPE="text/javascript"> function total(a,b){ osszeg=a+b return osszeg } szum=total(2,3) alert(szum) </SCRIPT> 6 Internet alkalmazások VII. Elágazások Az elágazásokat arra használhatjuk, hogy bizonyos feltételek teljesülésekor hajthassunk végre programrészleteket. A JavaScript háromféle elágazási formát támogat: if utasítás – akkor használjuk, ha csak egy feltétel teljesülésekor akarunk utasításokat végrehajtatni. if.else utasítás – akkor használjuk, ha két különféle dolgot akarunk végrehajtani egy feltételtıl függıen. switch utasítás – akkor használjuk, ha többféle dolgot szeretnénk végrehajtani egy értéktıl függıen. VII.1 if és ifelse utasítások Akkor használjuk az if utasítást, ha van olyan kódrészletünk, amit csak akkor szeretnénk végrehajtatni, ha egy feltétel teljesül. VII.11 Szintaxis if (feltétel) { az a kódrészlet, mely akkor fut le, ha a feltétel igaz } VII.12 Példa Ha
a böngészıt futtató gép órája 10-nél kevesebbet mutat akkor „Jó reggelt!” kívánunk. Megjegyzés: A két var kezdető sor az óra lekérdezésére szolgál, a részletekrıl majd a Date objektum kapcsán esik szó. <SCRIPT TYPE="text/javascript"> var d=new Date() var azido=d.getHours() if (azido<10) { document.write("<B>Jó reggelt!</B>") } </SCRIPT> Megjegyzés: Itt nincs else ág, vagyis ez a részlet csak akkor fut le, ha a feltétel igaz. Ha egy feltételtıl függıen akarunk utasításokat végrehajtatni és más utasításokat, ha a feltétel nem teljesül, akkor használjuk a if else utasítást. VII.13 Szintaxis if (feltétel){ az a kódrészlet, mely akkor fut le, ha a feltétel igaz } else { az a kódrészlet, mely akkor fut le, ha feltétel hamis } 7 Internet alkalmazások VII.14 Példa Ha a böngészıt futtató gép órája 10-nél kevesebbet mutat akkor „Jó reggelt!” kívánunk, egyébként
„Jó napot!”. <SCRIPT TYPE="text/javascript"> var d = new Date() var azido = d.getHours() if (azido < 10) { document.write("Jó reggelt!") } else { document.write("Jó napot!") } </SCRIPT> VII.2 Többszörös elágazás (switch) Akkor használhatjuk, ha több kódrészlet közül akarunk választani. VII.21 Szintaxis switch (kifejezés) { case cimke1: az a kódrészlez, mely akkor fut le, ha kifejezés = cimke1 break case cimke2: az a kódrészlez, mely akkor fut le, ha kifejezés = cimke2 break default: az a kódrészlet, mely akkor fut le, ha nem teljesül cimke1, és a címke2 sem } Mőködés: Elıször egy kifejezés áll (általában egy változó), ami egyszer értékelıdik csak ki. A kifejezés értéke aztán összehasonlítódik az egyes case ágak címkéjével. Ha egyezik, akkor az adott címkéhez rendelt kódrészlet fog végrehajtódni. A break utasítás az egyes blokkok végét jelzi VII.22 Példa <SCRIPT
TYPE="text/javascript"> var d=new Date() var aNap=d.getDay() switch (aNap) { case 5: document.write("Végre Péntek!") break case 6: document.write("Szuper Szombat!") break case 0: document.write("Álmos Vasárnap!") break default: document.write("Már alig várom a hétvégét!") } </SCRIPT> 8 Internet alkalmazások VIII. Elágazás mővelet A JavaScript tartalmaz egy elágazási mőveletet, ami egy értéket ad egy változónak, egy feltétel teljesülésétıl függıen. VIII.1 Szintaxis változónév=(feltétel)?érték1:érték2 VIII.2 Példa udvozlet=(latogato=="FİNÖK")?"Tisztelt Fınök ":"Kedves " Ha a latogato változó értéke a „FİNÖK” szó, akkor a „Tisztelt udvozlet változóhoz, egyébként pedig a „Kedves ” szöveget. Fınök ” értéket rendeli az IX. Ciklusok Az ismétlési szerkezetek arra használatosak a JavaScript esetén, hogy bizonyos
utasításokat többször tudjunk egymás után végrehajtani. A JavaScript esetén a következı lehetıségek vannak: while – utasítások ismételt végrehajtása adott feltétel teljesülésekor do.while – bizonyos utasítások futtatása után adott feltétel teljesüléséig való ismétlése for – utasítások adott számú alkalommal való végrehajtása IX.1 while A while ismétlési szerkezetet akkor használjuk, ha adott utasításokat egy adott feltétel teljesüléséig kell végrehajtani: while (feltétel) { végrehajtandó utasítások } IX.2 dowhile A dowhile ismétlési szerkezetet akkor használjuk, ha adott utasításokat egy adott feltétel teljesüléséig kell végrehajtani, de legalább egyszer végre kell hajtani. do { végrehajtandó utasítások } while (feltétel) 9 Internet alkalmazások IX.3 for A for vezérlési szerkezet akkor használandó, ha az utasításokat adott számú alkalommal kell végrehajtani. for (kezdıérték-adás;
feltétel; növekmény) { végrehajtandó utasítások } X. Megjegyzések X.1 A JavaScript kis/nagybető érzékeny Ez annyit jelent, hogy például egy „ujfgv”nevő függvény nem egyezik meg az „ujFgv” nevővel. X.2 Szimbólumok A nyitó szimbólumoknak, mint ({[" mindig kel, hogy legyen záró tagja, mint "]}). X.3 Tördelı karakterek (white space) A JavaScript figyelmen kívül hagyja a szóköz és tabulátor-többszörözéseket. Ezeket szabadon használhatjuk, a forrás tagolásához. A következı két sor eredménye pontosan megegyezik: nev="Móka" nev = "Móka" X.4 Parancssor tördelése Egy parancssort több sorra tördelhetünk szét egy karaktersorozat megadásakor a vissza perjel segítségével. Példa: document.write("Helló VILÁG!") A parancssor tördelésének következı módja hibás document.write ("Helló VILÁG!") A fenti példa hibajelzést eredményez. X.5 Speciális karakterek
beszúrása Lehetıség van speciális karakterek beszúrására (mint " ; &) a visszaper (backslash) segítségével: document.write ("Te & Én azt mondjuk: "Hellóóóóó"") A példa eredménye: Te & Én azt mondjuk: "Hellóóóóó". 10 Internet alkalmazások X.6 Megjegyzések Egysoros megjegyzést adhatunk a JavaScript kódhoz két perjel segítségével ("//"): szum=a + b // az összeget képezzük Több vagy egysoros megjegyzésre is van lehetıség, ha a megjegyzés kezdetét "/*" jellel kezdjük és a végét "*/" jellel zárjuk. szum=a + b /* az összeget képezzük / Példa többsoros megjegyzésre: /* Ez egy megjegyzés blokk, mely több sort is tartalmaz */ XI. String objektum A String objektum a szövegekkel kapcsolatos mőveleteket teszi lehetıvé. A String objektum tulajdonságokkal és metódusokkal (eljárásokkal) rendelkezik: NN: Netscape, IE: Internet Explorer, ECMA: Web
Standard Tulajdonság Leírás NN IE length A karakterek számát adja vissza a karaktersorozatban. 2.0 30 10 Metódus Leírás NN IE ECMA ECMA bold() Félkövérre formázva adja vissza a karaktersorozatot. 2.0 30 italics() Dıltre formázva adja vissza a karaktersorozatot. 2.0 30 fontsize() Adott betőméretre formázva adja vissza a karaktersoro- 2.0 30 zatot. charAt() Adott pozícióban lévı karaktert adja vissza. indexOf() Adott karaktersorozat elsı elıfordulási pozícióját adja 2.0 30 vissza. -1-et ad vissza, ha nem fordul elı lastIndexOf() Adott karaktersorozat utolsó elıfordulási pozícióját adja 2.0 30 vissza. -1-et ad vissza, ha nem fordul elı replace() Kicserél adott karaktersorozatot karaktersorozatra. split() Egy karaktersorozatot tömbjévé. substring() Visszaadja egy karaktersorozat adott karaktereit. 20 30 10 Például: 5,14 paraméterek esetén: 9 karaktert ad vissza a 5. karaktertıl a 14-ig (a sorszámozás kezdete: 0)
egy szétvág 2.0 30 10 másik adott 4.0 40 karaktersorozatok 4.0 40 10 toLowerCase() Kisbetősre alakítja a karaktersorozatot 2.0 30 10 toUpperCase() Nagybetősre alakítja a karaktersorozatot 2.0 30 10 11 Internet alkalmazások Példa: Ciklus, és formázás egy karaktersorozaton: <HTML> <BODY> <SCRIPT TYPE="text/javascript"> var uzenet="Isten hozott nálunk!" var size=1 for (i=0;i<uzenet.length;i++){ document.write(uzenettoUpperCase()charAt(i)fontsize(size)bold()) if (size<7) size++ else size=1 } </SCRIPT> </BODY> </HTML> És az eredmény: Ciklus, és még további formázások egy karaktersorozaton: <HTML> <BODY> <SCRIPT TYPE="text/javascript"> var uzenet="Isten hozott nálunk!" var size=1 document.write(uzenet + "<BR>") document.write(uzenettoLowerCase()italics() + "<BR>") document.write(uzenettoUpperCase()bold() +
"<BR>") for (i=0;i<uzenet.length;i++){ document.write(uzenettoUpperCase()charAt(i)fontsize(size)) if (i<(uzenet.length/2)) size++ else size-} </SCRIPT> </BODY> </HTML> És az eredmény: 12 Internet alkalmazások E-mail cím ellenırzése: <HTML> <BODY> <H1>E-mail cím ellenırzése</H1> <SCRIPT TYPE="text/javascript"> var email=prompt("Mi az e-mail címed? ",""); while(email.indexOf("@") == -1 ){ alert( "Hibás e-mail cím!"); email=prompt("Mi az e-mail címed? ",""); } document.write("Az e-mail címed: <B>" + email + "</B><BR>"); document.write("OK"); </SCRIPT> </BODY> </HTML> Vagy a ciklus hátul tesztelı formában: do { email=prompt("Mi az e-mail címed? ",""); if (email.indexOf("@") == -1) { alert( "Hibás e-mail cím!"); } }
while(email.indexOf("@") == -1); A String objektum néhány metódusa: <HTML> <BODY> <P><SCRIPT TYPE="text/javascript"> var email = "csuri@jgytf.u-szegedhu"; document.write( "A vezeték név:<I> " + email.substr(0,5) + "</I><BR>"); var nevcim = email.split("@" ); document.write( "A vezeték név:<I> " + nevcim[0] + "</I><BR>"); document.write( "A levelezı kiszolgáló:<I> " + nevcim[1] + "</I><BR>"); document.write( "A cím elsı betője:<I> " + email.charAt(0) + "</I><BR>"); document.write( "A cím utolsó betője:<I> " + email.charAt(emaillength - 1) + "</I><BR>"); </SCRIPT></P> </BODY> </HTML> A String objektum cserélı metódusa: <HTML> <BODY> <P><SCRIPT
TYPE="text/javascript"> var email = "csuri@jgytf.u-szegedhu"; document.write("Az eredeti karaktersorozat: " + email + "<BR>"); document.write("Az új karaktersorozat: " + email.replace("jgytf","www") + "<BR>"); </SCRIPT></P> </BODY> </HTML> 13 Internet alkalmazások XII. Array objektum Az Array objektum azonos típusú változók sorozatának tárolására szolgál. Minden egyes érékhez egy sorszám rendelıdik, mely segítségével hivatkozhatunk az adott elemre. Egy adott értékre a tömb nevével és az elem sorszámával hivatkozhatunk A sorszámozás 0-val kezdıdik. Egy új Array objektumot a new kulcsszóval hozhatunk létre. var csaladnev=new Array(5) A kívánt elemek száma zárójelbe kerül, esetünkben 5. Minden egyes tömb elemhez a következıképpen rendelhetünk értéket: csaladnev[0] = "Kis" csaladnev[1] = "Nagy"
csaladnev[2] = "Kırösi" Az egyes értékekre pedig a következı módon hivatkozhatunk: anya = csaladnev[0] apa = csaladnev[1] Az Array objektum a következı metódusokat tartalmazza: NN: Netscape, IE: Internet Explorer, ECMA: Web Standard Tulajdonság Leírás NN IE length A tömb elemeinek számát adja vissza. 2.0 30 10 Metódus Leírás NN IE ECMA ECMA concat() Adott tömb elemeit egy másik után főzve adja vissza 4.0 40 10 shift() Törli és visszaadja a tömb elsı elemét 4.0 40 unshift() Beszúr a tömb elejére 4.0 40 pop() Törli és visszaadja a tömb utolsó elemét 4.0 40 push() Beszúr a tömb végére 4.0 40 join() Egy karaktersorozattal tér vissza, mely a tömb összes 3.0 40 10 elemét tartalmazza slice() A tömb egy részét adja vissza 4.0 40 10 Példa: Ciklus egy tömb elemein: <HTML> <BODY> <H1>Számok tömb</H1> <P><SCRIPT TYPE="text/javascript"> var evek = new
Array(10); for(var i=0; i < evek.length; i++ ){ evek[i] = i + 2000; document.write("evek[" + i + "] = " + evek[i] + "<BR>"); } </SCRIPT></P> </BODY> </HTML> 14 Internet alkalmazások Ciklus egy tömb elemein másképp: <HTML> <BODY> <H1>Szinek tömb</H1> <P><SCRIPT TYPE="text/javascript"> var szinek = new Array("red", "green", "blue", "magenta"); for(var i in szinek){ document.write("<FONT COLOR=" + szinek[i] + ">"); document.write("szinek[" + i + "] = " + szinek[i] + "</FONT><BR>"); } </SCRIPT></P> </BODY> </HTML> Ciklus egy asszociatív tömb elemein: <HTML> <BODY> <H1>Asszociatív tömb</H1> <P><SCRIPT TYPE="text/javascript"> var nevek = new Array(); nevek["KG"] = "Kiss
Gábor"; nevek["NZ"] = "Nagy Zoltán"; nevek["ML"] = "Mosolygó László"; for( var i in nevek ){ document.write("Az elem címkéje: <I> " + i + "</I><BR>"); document.write("Az elem értéke: <B>" + nevek[i] + "</B><BR>"); } </SCRIPT></P> </BODY> </HTML> Tömbök egyesítése: <HTML> <BODY> <P><SCRIPT TYPE="text/javascript"> var nevek1=new Array("Péter", "Zsolt", "Attila" ); var nevek2=new Array("Aranka", "Dóra"); document.write("<B>Az elsı tömb:</B> " + nevek1 + "<BR>"); document.write("<B>A második tömb:</B> " + nevek2 + "<BR>"); document.write("<B>Az egyesítés utáni tömb:</B><BR>"); nevek1 = nevek1.concat(nevek2); document.write(nevek1);
</SCRIPT></P> </BODY> </HTML> 15 Internet alkalmazások Tömb push, pop metódusai: <HTML> <BODY> <P><SCRIPT TYPE="text/javascript"> var nevek=new Array("Attila", "Gábor", "János", "Anna"); document.write("<B>Az eredeti tömb:</B> "+ nevek + "<BR>"); nevek.push("Dávid","Krisztián"); document.write("<B>A bıvített tömb:</B> "+ nevek + "<BR>"); document.write("<B>Az utolsó elem:</B> "+ nevekpop() + "<BR>"); document.write("<B>Az új tömb a pop() után:</B> "+ nevek + "<BR>"); </SCRIPT></P> </BODY> </HTML> Tömb shift, unshift metódusai: <HTML> <BODY> <P><SCRIPT TYPE="text/javascript"> var nevek=new Array("Dóra", "Zsuzsa",
"Jolán" ); document.write("<B>Az eredeti tömb:</B> " + nevek + "<BR>"); document.write("<B>Az elsı elem:</B> "+ nevekshift() + "<BR>"); document.write("<B>Az új tömb a shift() után:</B> " + nevek + "<BR>"); nevek.unshift("Piroska","Gizella"); document.write("<B>Az új tömb az unshift() után:</B> " + nevek); </SCRIPT></P> </BODY> </HTML> XIII. Date objektum A Date objektum a dátummal és idıvel való mőveletekre szolgál. Egy új Date objektumot a new kulcsszóval hozhatunk létre. Például az aktuális dátumot elmenthetjük az "ujDatum" változó segítségével: var ujDatum=new Date() Miután létrehoztunk egy Date objektumot, elérhetjük annak metódusait az "ujDatum" változón keresztül. Például, ha a napot szeretnénk megkapni a dátumból (1-31), akkor
azt következı módon érhetjük el: ujDatum.getDate() Létrehozhatunk az aktuális dátumtól eltérı Date objektumot is, ha " " közé írjuk a dátumot a következı módokon: new new new new Date("Month dd, yyyy hh:mm:ss") Date("Month dd, yyyy") Date(yy,mm,dd,hh,mm,ss) Date(yy,mm,dd) 16 Internet alkalmazások A következı módokon hozhatunk létre Date objektumot: var var var var ujDatum=new ujDatum=new ujDatum=new ujDatum=new Date("October 12, 1988 13:14:00") Date("October 12, 1988") Date(88,09,12,13,14,00) Date(88,09,12) A Date objektum a következı metódusokat tartalmazza: NN: Netscape, IE: Internet Explorer, ECMA: Web Standard Metódus Leírás NN IE ECMA getDay() Visszaadja adott dátum esetén a hét napját (0-6. 0=Vasárnap, 1=Hétfı, stb) 2.0 30 10 getDate() Visszaadja adott dátum esetén a napot (1-31) 2.0 30 10 getMonth() Visszaadja adott dátum esetén a hónapot (0-11. 0=Január, 1=Február,
stb) 2.0 30 10 getFullYear() Visszaadja adott dátum esetén az évek számát (4 jegyen) 4.0 40 10 getYear() Visszaadja adott dátum esetén az évek számát (0-99) 2.0 30 10 getHours() Visszaadja adott dátum esetén az órák számát (0-23) 2.0 30 10 getMinutes() Visszaadja adott dátum esetén a percek számát (0-59) 2.0 30 10 getSeconds() Visszaadja adott dátum esetén a másodpercek számát (0-59) 2.0 30 10 toString() Szöveggé alakítja a dátumot 2.0 40 10 XIII.1 Óra kijelzése Egy őrlapot hozunk létre egyetlen mezıvel, mely a böngészıt futtató gép óráját jeleníti meg, és az Ora() függvény végzi a mezı frissítését: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function Ora() { var ido = new Date() var ora = ido.getHours() var perc = ido.getMinutes() var masodperc = ido.getSeconds() var kiir = "" + ora + ":" kiir += ((perc < 10) ? "0" : "") + perc + ":"
kiir += ((masodperc < 10) ? "0" : "") + masodperc document.OraUrlapkijelzovalue = kiir setTimeout("Ora()",1000) } </SCRIPT> </HEAD> <BODY OnLoad="Ora()"> <FORM NAME="OraUrlap"> <B>Az Ön gépe szerint a pontos idı:</B> <INPUT TYPE="text" NAME="kijelzo" SIZE="9"> </FORM> </BODY> </HTML> 17 Internet alkalmazások XIII.2 ÖRÖKNAPTÁR Egy őrlapot hozunk létre, melynek mezıiben megjelenik az év, hónap, nap és a megfelelı nap neve. Ehhez a fejlécben három függvényt definiálunk <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function aNap(szam) { if (szam == 0) {return "Vasárnap"} if (szam == 1) {return "Hétfı"} if (szam == 2) {return "Kedd"} if (szam == 3) {return "Szerda"} if (szam == 4) {return "Csütörtök"} if (szam == 5) {return "Péntek"}
if (szam == 6) {return "Szombat"} } function MaiNap() { var datum = new Date() document.valasztevvalue = datumgetFullYear() document.valaszthonapselectedIndex = datumgetMonth() document.valasztnapselectedIndex = datumgetDate()-1 document.valaszthetnapvalue = aNap(datumgetDay()) } function OrokNaptar() { var datum = new Date() datum.setYear(documentvalasztevvalue) datum.setMonth(documentvalaszthonapselectedIndex) datum.setDate(documentvalasztnapselectedIndex+1) document.valaszthetnapvalue = aNap(datumgetDay()) } </SCRIPT> </HEAD> Őrlapunk pedig így fest: <BODY OnLoad="MaiNap()"> <B>Válassz évet, egy hónapot és egy napot:</B> <FORM NAME="valaszt"> Év: <INPUT TYPE="text" NAME="ev" onChange="OrokNaptar()"> Hónap: <SELECT NAME="honap" onChange="OrokNaptar()"> <OPTION>január <OPTION>december </SELECT> Nap: <SELECT NAME="nap"
<OPTION>1 <OPTION>31 </SELECT><BR> onChange="OrokNaptar()"> A hét megfelelı napja: <INPUT TYPE="text" NAME="hetnap" SIZE="9" READONLY> </FORM> </BODY> </HTML> 18 Internet alkalmazások XIII.3 Új metódus létrehozása <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function hetNap(){ var most = this.getDay() var napok = new Array(7) napok[0]="Vasárnap" napok[1]="Hétfı" napok[2]="Kedd" napok[3]="Szerda" napok[4]="Csütörtök" napok[5]="Péntek" napok[6]="Szombat" return(napok[most]) } Date.prototypeaHetNapja=hetNap </SCRIPT> </HEAD> <BODY> <SCRIPT TYPE="text/javascript"> var ma=new Date() document.write("Ma " + maaHetNapja() + " van<BR>") </SCRIPT> </BODY> </HTML> Feladat: Használjuk fel az utóbb létrehozott
új metódust az öröknaptárnál! XIV. Math objektum A Math objektum matematikai konstansok és függvények elérését teszi lehetıvé. A Math objektumot nem kell létrehozni használat elıtt. Egy 0 és 1 közötti véletlen szám eltárolásához a „velszam” változóban: var velszam=Math.random() A 8.6 kerekített értékének kiszámítása: var szam=Math.round(86) A Math objektum néhány metódusa: NN: Netscape, IE: Internet Explorer, ECMA: Web Standard Metódus Leírás NN IE ECMA abs(x) Visszatér x abszolút értékével 2.0 30 10 round(x) Visszatér x-hez legközelebbi egész értékkel 2.0 30 10 ceil(x) Visszatér x-hez legközelebbi nagyobb vagy egyenlı egésszel 2.0 30 10 floor(x) Visszatér x-hez legközelebbi kisebb vagy egyenlı egésszel 2.0 30 10 max(x,y) Visszatér x és y közül a nagyobb értékkel 2.0 30 10 min(x,y) 2.0 30 10 pow(x,y) Visszatér x és y közül a kisebb értékkel y Visszatér x y hatványával: x random()
Visszatér egy 0 és 1 közötti véletlen számmal 2.0 30 10 2.0 30 10 19 Internet alkalmazások sin(x) Visszatér x szinuszával 2.0 30 10 cos(x) Visszatér x koszinuszával 2.0 30 10 sqrt(x) Visszatér x négyzetgyökével 2.0 30 10 log(x) Visszatér x természetes alapú logaritmusával 2.0 30 10 Példák: A Math objektum néhány metódusa: <HTML> <BODY> <P><SCRIPT TYPE="text/javascript"> var szam=16 document.write("A " + szam + " szám négyzetgyöke: ") document.write(Mathsqrt(szam),"<BR>") document.write("A PI értéke: ") document.write(MathPI) document.write("<BR>A" + szam + " 3 hatványra emeltje: ") document.write(Mathpow(szam,3)) </SCRIPT></P> </BODY> </HTML> A Math objektum kerekítési lehetıségei: <HTML> <BODY> <P><SCRIPT TYPE="text/javascript"> var szam=16.3
document.write("<I>A manipulált szám: ", szam, "</I><BR><BR>") document.write("A <I>Mathfloor</I> metódus lefelé kerekítése: " + Math.floor(szam) + "<BR>") document.write("A <I>Mathceil</I> metódus felfelé kerekítése: " + Math.ceil(szam) +"<BR>") document.write("A <I>Mathround</I> metódus kerekítése a legközelebbi egészre: " + Math.round(szam) + "<BR>") </SCRIPT></P> </BODY> </HTML> Véletlen szám generálása: <HTML> <BODY> <P><SCRIPT TYPE="text/javascript"> var n = 10 // csak a kiemelés végett for(i=0; i < 10;i++){ // 0 és 10 közötti számok generálása document.write(Mathfloor(Mathrandom()* (n + 1)) + "<BR>") } </SCRIPT></P> </BODY> </HTML> 20 Internet alkalmazások XV. Window objektum Alert ablak:
<HTML> <BODY> <SCRIPT TYPE="text/javascript"> alert("Hello Világ!") </SCRIPT> </BODY> </HTML> Párbeszéd ablak (confirm): <HTML> <BODY> <SCRIPT TYPE="text/javascript"> var valasz = confirm("Kattints valamelyik gombra!") if (valasz == true) { document.write("Az OK gombra kattintottál") } else { document.write("A Mégse gombra kattintottál") } </SCRIPT> </BODY> </HTML> Párbeszéd ablak (prompt): <HTML> <BODY> <SCRIPT TYPE="text/javascript"> var nev = prompt("Add meg a neved","") if (nev != null && nev != "") { document.write("Helló " + nev + "!") } </SCRIPT> </BODY> </HTML> Új ablak nyitása: <HTML> <HEAD> <SCRIPT TYPE=”text/javascript”> function ujablak() { window.open("http://wwwjgytfu-szegedhu") }
</SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE=”button” VALUE="Új Ablak" onClick="ujablak()"> </FORM> </BODY> </HTML> 21 Internet alkalmazások Új ablak nyitása formázottan: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ujablak() { window.open("http://wwwjgytfu-szegedhu","jgytf win","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400") } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Új Ablak" onClick="ujablak()"> </FORM> </BODY> </HTML> Aktuális dokumentum módosítása: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ujurl() { window.location="http://wwwjgytfu-szegedhu" } </SCRIPT> </HEAD> <BODY>
<FORM> <INPUT TYPE="button" onClick="ujurl()" VALUE="Új Dokumentum"> </FORM> </BODY> </HTML> Aktuális dokumentum frissítése: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function frissit() { window.locationreload() } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Frissítés" onClick="frissit()"> </FORM> </BODY> </HTML> 22 Internet alkalmazások Státusz sor módosítása: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function indit() { window.status = "Írd ide a kívánt üzenetet" } </SCRIPT> </HEAD> <BODY onLoad="indit()"> <P>Nézd a státusz sort!</P> </BODY> </HTML> Aktuális dokumentum nyomtatása: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function nyomtat() {
window.print() } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Oldal nyomtatása" onClick="nyomtat()"> </FORM> </BODY> </HTML> XVI. Form objektum E-mail cím ellenırzése: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ell() { var elem=document.urlap // a kiemelés végett var kukac=elem.emailvalueindexOf("@") if (kukac == -1) { alert("Nem jó e-mail cím!") return false } } </SCRIPT> </HEAD> <BODY> <FORM NAME="urlap" onSubmit="return ell()"> Add meg az e-mail címed: <INPUT TYPE="text" NAME="email"> <INPUT TYPE="submit" value="Elküld"> </FORM> <P>Ebben a példában ellenırizzük, hogy a megadott cím tartalmaz-e a @ karaktert.</P> </BODY> </HTML> 23 Internet alkalmazások Érték ellenırzése: egy
beviteli mezı hosszának korlátozása. <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ell() { elem=document.urlap ertek=elem.ertekvalue if (ertek>=1 && ertek<=5) { return true } else { alert("1 és 5 közötti értéket adjon meg!") return false } } </SCRIPT> </HEAD> <BODY> <FORM NAME="urlap" onSubmit="return ell()"> Adjon meg 1 és 5 közötti értéket: <INPUT TYPE="text" NAME="ertek"> <INPUT TYPE="submit" VALUE="Elküld"> </FORM> </BODY> </HTML> Érték ellenırzése: egy beviteli mezı hosszának ellenırzése <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ell() { elem=document.urlap szam=elem.ertekvalue if (szam.length>5) { alert("Maximum 5 karaktert adjon meg!") return false } else { return true } } </SCRIPT> </HEAD> <BODY> <FORM
NAME="urlap" onSubmit="return ell()"> Ebben a mezıben adjon meg maximum 5 karaktert: <INPUT TYPE="text" NAME="ertek"> <INPUT TYPE="submit" VALUE="Elküld"> </FORM> </BODY> </HTML> 24 Internet alkalmazások Őrlap ellenırzése: az adatok ellenırzése <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ell() { var elem=document.urlap // többször való hivatkozáskor, így rövidíthetünk var kukac=elem.emailvalueindexOf("@") var kod=elem.kodvalue var veznev=elem.nevvalue var elkuldOK=true if (kukac==-1) { alert("Nem jó e-mail cím!") elkuldOK=false } if (kod<1 || kod>5) { alert("A kódnak 1 és 5 közötti egész értéknek kell lennie!") elkuldOK=false } if (veznev.length>10) { alert("A vezeték névnek 10 karakternél rövidebbnek kell lennie!") elkuldOK=false } if (elkuldOK==false) { return false } }
</SCRIPT> </HEAD> <BODY> <FORM NAME="urlap" onSubmit="return ell()"> Add meg az e-mail címed: <INPUT TYPE="text" NAME="email"><BR> Add meg a kódodat (1-5 közötti egész szám): <INPUT TYPE="text" NAME="kod"><BR> Add meg a vezetékneved (max. 10 karakter): <INPUT TYPE="text" NAME="nev"><BR> <INPUT TYPE="submit" VALUE="Elküld"> </FORM> </BODY> </HTML> Fókusz: hogyan tehetünk aktívvá egy beviteli mezıt <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function fokusz() { document.urlapmezofocus() } </SCRIPT> </HEAD> <BODY> <FORM NAME="urlap"> <INPUT TYPE="text" NAME="mezo" SIZE="30"> <INPUT TYPE="button" VALUE="Fókusz beállítása" onClick="fokusz()"> </FORM>
</BODY> </HTML> 25 Internet alkalmazások Kijelölés: hogyan tehetjük kijelöltté egy beviteli mezı tartalmát <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function fokusz() { document.forms[0]mezoselect() document.forms[0]mezofocus() } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="text" NAME="mezo" SIZE="30" VALUE="alapszöveg"> <INPUT TYPE="button" VALUE="Kijelölés" onClick="fokusz()"> </FORM> </BODY> </HTML> Rádió gomb: hogyan módosíthatjuk egy másik mezı tartalmát <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ell(bongeszo) { document.forms[0]valaszvalue=bongeszo } </SCRIPT> </HEAD> <BODY> <FORM> Melyik böngészı a kedvence?<BR> <INPUT TYPE="radio" NAME="bongeszo" onClick="ell(this.value)"
VALUE="Explorer">Microsoft Internet Explorer<BR> <INPUT TYPE="radio" NAME="bongeszo" onClick="ell(this.value)" VALUE="Netscape">Netscape Navigator<BR> <INPUT TYPE="text" NAME="valasz"> </FORM> </BODY> </HTML> Jelölı négyzet (checkbox): hogyan módosíthatjuk egy másik mezı tartalmát <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function ell() { kave=document.forms[0]kave valasz=document.forms[0]valasz szoveg="" for (i=0; i<kave.length; ++i) { if (kave[i].checked) { szoveg=szoveg + kave[i].value + " " } } valasz.value="Ön egy kávét rendelt " + szoveg } </SCRIPT> </HEAD> 26 Internet alkalmazások <BODY> <FORM> Hogyan szereti a kávét?<BR> <INPUT TYPE="checkbox" NAME="kave" VALUE="tejjel" >Tejjel<BR> <INPUT
TYPE="checkbox" NAME="kave" VALUE="cukorral">Cukorral<BR> <INPUT TYPE="text" NAME="valasz" SIZE="40"> <INPUT TYPE="button" NAME="teszt" onClick="ell()" VALUE="Rendel"> </FORM> </BODY> </HTML> Választás legördülı menübıl: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function beall() { var elem = document.forms[0]kedvenc elem.value=documentforms[0]lmenuoptions[documentforms[0]lmenuselectedIndex]text } </SCRIPT> </HEAD> <BODY> <FORM> <P> Melyik a kedvenc böngészıje?: <SELECT NAME="lmenu" onChange="beall()"> <OPTION>Internet Explorer <OPTION>Netscape Navigator </SELECT> </P> <P> Az ön kedvenc böngészıje: <INPUT TYPE="text" NAME="kedvenc" VALUE="Internet Explorer"> </P> </FORM>
</BODY> </HTML> Legördülı menü: több elem kiválasztása: <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function beall() { opcio=document.forms[0]lmenuoptions[documentforms[0]lmenuselectedIndex]text var elem = document.forms[0]szam elem.value = elemvalue + opcio } </SCRIPT> </HEAD> <BODY> <FORM> 27 Internet alkalmazások A kiválasztott számok:<BR> <SELECT NAME="lmenu"> <OPTION>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5 <OPTION>6 <OPTION>7 <OPTION>8 <OPTION>9 <OPTION>0 </SELECT> <INPUT TYPE="button" onClick="beall()" VALUE="-->"> <INPUT TYPE="text" NAME="szam"> </FORM> </BODY> </HTML> 28 Internet alkalmazások XVII. I. Tartalomjegyzék Bevezetés 1 I.1 A JavaScript
jellemzıi: 1 I.2 Mire használható a JavaScript? 1 II. Hogyan lehet létrehozni 1 II.1 Hogyan helyezzünk JavaScript betétet egy HTML dokumentumba 1 II.2 A parancssor 2 II.3 Hogyan kezelhetjük a régi böngészıket 2 III. Hova kerüljön 2 III.1 IV. Külsı JavaScript betét 3 Változók 3 IV.1 Változó létrehozása 3 IV.2 Érték hozzárendelése változóhoz 4 IV.3 Egy változó élettartama
4 V. Operátorok, mőveletek 4 V.1 Aritmetikai mőveletek 4 V.2 Hozzárendelési mőveletek 4 V.3 Összehasonlító mőveletek 5 V.4 Logikai mőveletek 5 V.5 String mőveletek 5 VI. Függvények 5 VI.1 Hogyan hozhatunk létre egy függvényt 6 VI.2 Hogyan hívjunk meg egy függvényt 6 VI.3 A return utasítás 6 VII. Elágazások 7 VII.1 if és if.else utasítások
7 VII.11 VII.12 VII.13 VII.14 VII.2 7 7 7 8 Többszörös elágazás (switch) 8 VII.21 VII.22 VIII. Szintaxis Példa Szintaxis Példa Szintaxis 8 Példa 8 Elágazás mővelet 9 VIII.1 Szintaxis 9 VIII.2 Példa 9 29 Internet alkalmazások IX. Ciklusok 9 IX.1 while
9 IX.2 do.while 9 IX.3 for 10 Megjegyzések 10 X. X.1 A JavaScript kis/nagybető érzékeny 10 X.2 Szimbólumok 10 X.3 Tördelı karakterek (white space) 10 X.4 Parancssor tördelése 10 X.5 Speciális karakterek beszúrása 10 X.6 Megjegyzések 11 XI. String objektum 11 XII. Array objektum 14 XIII. Date objektum
11 XIII.1 Óra kijelzése 17 XIII.2 ÖRÖKNAPTÁR 18 XIII.3 Új metódus létrehozása 19 XIV. Math objektum 19 XV. Window objektum 21 XVI. Form objektum 23 XVII. Tartalomjegyzék 29 30
When reading, most of us just let a story wash over us, getting lost in the world of the book rather than paying attention to the individual elements of the plot or writing. However, in English class, our teachers ask us to look at the mechanics of the writing.
