JavaScript a gyakorlatban
1.Gyakorlat Mi a JavaScript? A JavaScript nem Java! JavaScript futtatása JavaScript beillesztése XHTML-be Változók kezelése
Mi a JavaScript? A JavaScriptet a Netscape fejlesztette ki. (Eredeti neve LiveScript.) Ez egy olyan parancsnyelv, amely segítségével létrehozhatunk interaktív Web-oldalakat.
A JavaScript nem Java! A JavaScript nem tévesztendő össze a Java- val! A hasonló név ellenére a Java önálló programozási nyelv, szükség van fordító programra, amivel a forráslistából bájtkódot készíthetünk. A JavaScript pedig parancsnyelv, futtatásához nem kell más, mint egy böngésző, amely kezelni képes a JavaScriptet. Hasonlóság azonban nem csak a névben van, ugyanis a két nyelv szintaxisa a C(++) nyelvhez hasonlatos, a manapság divatos objektumorientáltságot pedig egyikük sem kerülhette el.
JavaScript futtatása Egy JavaScriptet "értő" böngészőre van szükségünk. Ez lehet akár a Netscape Navigator, amely a 2.0-as verzió óta ismeri a JavaScriptet, vagy a Microsoft Internet Explorer (3.0 vagy magasabb verzió). A böngészők általában „ismerik” a JavaScriptet és képesek azt futtatni.
JS0101.html JavaScript beillesztése XHTML-be <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 1.1 feladat 1.1 feladat Légy üdvözölve! A honlap fejlesztés alatt! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 1.1 feladat 1.1 feladat Légy üdvözölve! A honlap fejlesztés alatt!
JS0102.html JavaScript beillesztése XHTML-be <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 1.2 feladat 1.2 feladat Légy üdvözölve! A honlap fejlesztés alatt! Legutóbbi módosítás: <!-- document.write(document.lastModified); // --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 1.2 feladat 1.2 feladat Légy üdvözölve! A honlap fejlesztés alatt! Legutóbbi módosítás: <!-- document.write(document.lastModified); // --> XHTML 1.0 Strict-ben nincs: LANGUAGE=”JavaScript” A régi böngészők elől elrejtjük a JS-kódot! Objektumorientált felépítés, ahol a document jelzi az adott honlapot.
JS0103.js JS0103.js JS0103.html JS0103.html JavaScript beillesztése XHTML-be <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 1.3 feladat 1.3 feladat Légy üdvözölve! A honlap fejlesztés alatt! Legutóbbi módosítás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="hu" lang="hu"> <head> <title>1.3 feladat</title> </head> <body> <h1>1.3 feladat</h1> <p>Légy üdvözölve! A honlap fejlesztés alatt! Legutóbbi módosítás:</p> <script type="text/javascript" src="JS0103.js"></script> </body> </html> // JavaScript document.write(document.lastModified); // JavaScript document.write(document.lastModified);
JS0106.js JS0104.js JS0105.js JavaScript – változók kezelése // JavaScript now = new Date(); localtime = now.toString(); utctime = now.toGMTString(); document.write(" Helyi ido: " + localtime + " "); document.write(" UTC ido: "+ utctime); // JavaScript now = new Date(); localtime = now.toString(); utctime = now.toGMTString(); document.write(" Helyi ido: " + localtime + " "); document.write(" UTC ido: "+ utctime); document.write(" UTC ido: "+ utctime + " "); hours = now.getHours(); mins = now.getMinutes(); secs = now.getSeconds(); document.write(" "); document.write(hours + " : " + mins + " : " + secs); document.write(" "); document.write(" UTC ido: "+ utctime + " "); hours = now.getHours(); mins = now.getMinutes(); secs = now.getSeconds(); document.write(" "); document.write(hours + " : " + mins + " : " + secs); document.write(" "); // JavaScript text=prompt("Írjunk be valamit!"); // JavaScript text=prompt("Írjunk be valamit!");
JS0107.js JavaScript – változók kezelése // JavaScript for (i=1;i<5;i++){ alert("Még "+(5-i)+" alkalommal írom ki ezt az üzenetet!"); if (i==4) alert("Most azt hiszed, vége? Az Enter után nyomd meg az F5-öt!"); } // JavaScript for (i=1;i<5;i++){ alert("Még "+(5-i)+" alkalommal írom ki ezt az üzenetet!"); if (i==4) alert("Most azt hiszed, vége? Az Enter után nyomd meg az F5-öt!"); }
2. Gyakorlat Függvények Array (tömb) objektum String objektum Elágazások Ciklusok Math és Date objektumok
JavaScript - függvények Minden programozási nyelvben, így a JavaScript-ben is rendkívül fontos szerepet kapnak a függvények. A nyelv számos függvényt tartalmaz, például a korábban megismert alert() függvény is ezek közül való. A függvényeknek adhatunk át paramétereket, amelyekkel dolgozni fognak (az alert() függvény paramétere az idézőjelek között átadott szöveg volt, amit a függvény egy üzenetablakban jelenített meg). Mi magunk is írhatunk függvényeket, hogy a nagyobb, összetettebb feladatokat kisebb, jobban kezelhetőbb részekre bontsuk. Ezek a függvények szintén átvehetnek paramétereket, sőt értéket is adhatnak vissza, csakúgy, mint más programozási nyelvekben.
JavaScript - függvények A function kulcsszót közvetlenül a függvény neve követi, majd zárójelekben a paramétereket adjuk meg. A függvény törzse kapcsos zárójelek között van, és ide helyezzük el a függvényhez tartozó utasításokat. function FuggvenyNeve(parameter1, parameter2, …) { …utasítások… }
JavaScript - függvények JavaScript-ben a változók neve betűvel, vagy aláhúzással (_) kezdődhet, és a függvénynevekhez hasonlóan szintén különbség van kis- és nagybetűk között. Változót a var kulcsszóval, majd a változó nevének megadásával deklarálhatunk. Deklaráláskor az értékadó operátor (=) segítségével kezdőértéket is rendelhetünk a változókhoz.
JS0202.js JS0201.js JavaScript - függvények // JavaScript function Greet(who){ alert("Hello! "+who+"!"); } Greet("Rita"); // JavaScript function Greet(who){ alert("Hello! "+who+"!"); } Greet("Rita"); Függvény Függvény neve Függvény paramétere Függvény törzse A függvény meghívása // JavaScript vnev=prompt("Vezetéknév megadása:"); knev=prompt("Keresztnév megadása:"); hcim=prompt("A lap címe:"); document.write(" "+hcim+" "); document.write(" Készítette: "+vnev+" "+knev+" "); // JavaScript vnev=prompt("Vezetéknév megadása:"); knev=prompt("Keresztnév megadása:"); hcim=prompt("A lap címe:"); document.write(" "+hcim+" "); document.write(" Készítette: "+vnev+" "+knev+" "); Beépített függvények használata
JavaScript - tömbök A tömbök rendkívül fontosak a programozásban. Gyakran van szükségünk nagy mennyiségű adat kényelmes tárolására úgy, hogy bármelyikhez könnyen hozzáférjünk. A tömbök sok változóból felépülő összetett adattípusok. Az egyes adatokhoz egy név (a tömb neve) és egy szám segítségével férhetünk hozzá.
JavaScript - tömbök Tömböket igen egyszerűen hozhatunk létre: tomb = new Array(), azaz létrehozzuk az Array objektum egy új példányát. A tomb nevű új tömbünkhöz rögtön értékeket is rendelhetünk. tomb[0] = "JavaScript"; tomb[1] = "2000"; tomb[2] = "Aurum";
JavaScript - tömbök tombnev = new Array([a_tomb_hossza]) tombnev = new Array([1.elem, 2.elem, 3.elem,...,n.elem]) Az első esetben csak annyi a különbség, hogy adtunk a tömbnek egy kezdeti hossz értéket. Ez a hossz a későbbiek során lekérdezhető az Array objektum length adatmezőjéből. A második esetben zárójeleken belül felsoroltuk a tömb induló értékeit. Ezek később persze szabadon bővíthetők. A szögletes zárójelek ( [ ] ) azt jelentik, hogy a közöttük lévő részek nyugodtan elhagyhatók.
JavaScript – tömbök használata // JavaScript nnev=prompt("Bekérendő szavak száma:"); n=parseInt(nnev); szavak = new Array(n); for (i=0;i<n;i++) { bekeres=prompt((i+1)+". szó bekérése"); szavak[i]=bekeres; } document.write(" A szavak kiírása rendezetlen formában: "); document.write(" "); for (i=0;i<n;i++) { document.write(szavak[i]+", "); } document.write(" "); szavak.sort(); document.write(" A szavak kiírása rendezett formában: "); document.write(" "); for (i=0;i<n;i++) { document.write(szavak[i]+", "); } document.write(" "); // JavaScript nnev=prompt("Bekérendő szavak száma:"); n=parseInt(nnev); szavak = new Array(n); for (i=0;i<n;i++) { bekeres=prompt((i+1)+". szó bekérése"); szavak[i]=bekeres; } document.write(" A szavak kiírása rendezetlen formában: "); document.write(" "); for (i=0;i<n;i++) { document.write(szavak[i]+", "); } document.write(" "); szavak.sort(); document.write(" A szavak kiírása rendezett formában: "); document.write(" "); for (i=0;i<n;i++) { document.write(szavak[i]+", "); } document.write(" "); JS0203.js
Array (tömb) objektum – legfontosabb metódusok AutoTipusok = new Array("Honda","Mercedes","BMW"); Az Array objektum legfontosabb metódusai a következők: a join metódus összefűzi a tömb elemeit egyetlen sztringgé a reverse megfordítja (transzponálja) a tömb elemeit, az utolsóból lesz az első, az elsőből az utolsó a sort rendezi a tömb elemeit Az előző példánál maradva vizsgáljuk meg ezeket a metódusokat: AutoTipusok.join() a "Honda,Mercedes,BMW" sztringet adja vissza AutoTipusok.reverse() megfordítja a sorrendet (AutoTipusok[0] a BMW lesz, AutoTipusok[1] a Mercedes. míg AutoTipusok[2] a Honda) Autotipusok.sort() rendezi a tömböt, igy a tömbünk a következő módon változik meg: AutoTipusok[0] a BMW lesz, AutoTipusok[1] a Honda, a Mercedes pedig az AutoTipusok[2]
String objektum JavaScript-ben nem létezik sztring adattípus. Helyette viszont létezik a String objektum, melynek számos hasznos metódusa is van. Ezekkel könnyedén manipulálhatjuk a sztringünket. String objektumot a következő módon hozhatunk létre: String_objektum_neve = new String(sztring); A zárójelben tetszőleges sztring állhat, ez lesz tulajdonképpen az új String objektum. szoveg = new String("JavaScript"); A String objektumnak van egy length nevű adatmezője, amelyből kiolvashatjuk a tárolt sztring hosszát. A String objektum metódusai két típusba sorolhatók. Az egyik típus a sztring egy módosított változatát adja vissza. Ide tartozik például a subString és a toLowerCase metódusok. Az előbbi a sztring egy részét adja vissza, míg az utóbbi kisbetűsre alakítja azt. A másik típushoz olyan metódusok tartoznak, amelyek HTML formátumúra hozzák a sztringet. Ilyen például a bold, ill. a link függvény.
String objektum
Az eredeti sztring: JavaScript szoveg.length = 10 szoveg.substring(3,8) = aScri szoveg.toUpperCase() = JAVASCRIPT szoveg.toLowerCase() = javascript szoveg.charAt(0) = J szoveg.charAt(4) = S szoveg.indexOf('S') = 4 szoveg.indexOf('s') = -1 szoveg.lastIndexOf('S') = 4 szoveg.lastIndexOf('s') = -1
String objektum szoveg.link(' = JavaScript szoveg.big() = JavaScript szoveg.blink() = JavaScript szoveg.bold() = JavaScript szoveg.fixed() = JavaScript szoveg.italics() = JavaScript szoveg.small() = JavaScript szoveg.strike() = JavaScript szoveg.sub() = JavaScript szoveg.sup() = JavaScript JavaScript
JS0204.js JavaScript – stringkezelés // JavaScript msg=prompt("Görgetendő szöveg"); msg="......"+msg; pos=0; function ScrollMessage(){ window.status = msg.substring(pos,msg.length) + msg.substring(0,pos); pos++; if (pos>msg.length) pos = 0; window.setTimeout("ScrollMessage()",200); } ScrollMessage(); // JavaScript msg=prompt("Görgetendő szöveg"); msg="......"+msg; pos=0; function ScrollMessage(){ window.status = msg.substring(pos,msg.length) + msg.substring(0,pos); pos++; if (pos>msg.length) pos = 0; window.setTimeout("ScrollMessage()",200); } ScrollMessage();
JavaScript – elágazások // JavaScript where=prompt("Where do you want to go today?"); switch(where){ case "Microsoft": window.location=" break; case "Google": window.location=" break; case "Mozilla": window.location=" break; default: window.location=" } // JavaScript where=prompt("Where do you want to go today?"); switch(where){ case "Microsoft": window.location=" break; case "Google": window.location=" break; case "Mozilla": window.location=" break; default: window.location=" } JS0205.js
JavaScript - ciklusok // JavaScript names=new Array(); i=0; do { next=window.prompt("Következő név bekérése:",""); if (next>" ") names[i]=next; i++; } while (next > " "); document.write(" "+(names.length)+" nevet írtunk be. "); document.write(" "); for (i in names) { document.write(" "+names[i]+" "); } document.write(" "); // JavaScript names=new Array(); i=0; do { next=window.prompt("Következő név bekérése:",""); if (next>" ") names[i]=next; i++; } while (next > " "); document.write(" "+(names.length)+" nevet írtunk be. "); document.write(" "); for (i in names) { document.write(" "+names[i]+" "); } document.write(" "); JS0206.js
A Date (dátum) objektum Nagyon hasznos előre definiált objektum. Segítségével olyan alkalmazásokat írhatunk, amelyek idő- vagy dátumértékeket kezelnek. Bizonyára mindenki találkozott már olyan oldallal, amely mutatta a pontos időt, illetve a dátumot. Ezeket is JavaScript programok számolják ki és jelenítik meg. Az alábbi módon hozhatjuk létre a Date objektum új példányait: dátum_objektum_neve = new Date( [paraméterek] );
A Date (dátum) objektum A paraméter a következő variációk bármelyike lehet: Nem adunk meg paraméterként semmit. Ekkor az aktuális dátum és idő értékeket használjuk fel. Például: ma = new Date(); A paraméter egy sztring, ami egy dátumot reprezentál a következő formában: "Hónap Nap, Év óra:perc:másodperc". Páldául: 07karacsony = new Date("December 25, :30:30"); Ha elhagyjuk az óra:perc:másodperc részt, akkor ez automatikusan a 0 értéket veszi fel. Számokkal adjuk meg a dátumot. Például: 07karacsony = new Date(2007, 11, 24, 12, 30, 30); a set metódus segítségével beállíthatjuk a dátum és idő értékét (setYear, setMonth, setDate, setMinutes, setSeconds) a get metódussal kiolvashatjuk ezeket az értékeket (getYear, getMonth, getDate, getMinutes, getSeconds)
A Math (matematikai) objektum A legtöbb trigonometrikus, exponenciális és logaritmikus függvényt is tartalmazza ez az objektum. Így például egy X szög szinuszát így kaphatjuk meg: Math.sin(X);
A Math (matematikai) objektum Előfordulhat, hogy véletlenszámra van szükségünk a programunk során. Erre is ad megoldást a Math objektum, mégpedig a random() metódussal. A Math.Random() egy véletlenszámot ad vissza, amely 0 és 1 közé esik. Célszerű alkalmazni a with utasítást olyan esetekben, amikor a Math objektumra gyakran kell hivatkozni: with (Math){ kor_terulet = PI * r * r; x = r * sin(beta); c = sqrt(a*a + b*b);} Látható, hogy így nem kellett minden Math objektumbeli metódus és konstans elé odaírni a "Math" hivatkozást. Ezzel a kódunk is átláthatóbbá vált.
JS0207.js A Math objektum // JavaScript total = 0; for (i=1; i<=5000; i++) { num = Math.random(); total += num; window.status = i + " szám generálása";} average = total / 5000; average = Math.round(average * 1000) / 1000; document.write(" 5000 szám átlaga: " + average + " "); // JavaScript total = 0; for (i=1; i<=5000; i++) { num = Math.random(); total += num; window.status = i + " szám generálása";} average = total / 5000; average = Math.round(average * 1000) / 1000; document.write(" 5000 szám átlaga: " + average + " ");