JavaScript a gyakorlatban

JavaScript a gyakorlatban

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.

JavaScript beillesztése XHTML-be JS0101.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>1.1 feladat</title> </head> <body> <h1>1.1 feladat</h1> <p>Légy üdvözölve! A honlap fejlesztés alatt!</p> </body> </html>

JavaScript beillesztése XHTML-be JS0102.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>1.2 feladat</title> </head> <body> <h1>1.2 feladat</h1> <p>Légy üdvözölve! A honlap fejlesztés alatt! Legutóbbi módosítás:</p> <script type="text/javascript">  </script> </body> </html> 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.

JavaScript beillesztése XHTML-be JS0103.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" 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> JS0103.js // JavaScript document.write(document.lastModified);

JavaScript – változók kezelése JS0104.js JS0105.js // JavaScript now = newDate(); localtime = now.toString(); utctime = now.toGMTString(); document.write("<b>Helyi ido:</b> " + localtime + "<br />"); document.write("<b>UTC ido:</b> "+ utctime); document.write("<b>UTC ido:</b> "+ utctime + "<br />"); hours = now.getHours(); mins = now.getMinutes(); secs = now.getSeconds(); document.write("<font size='+5'>"); document.write(hours + " : " + mins + " : " + secs); document.write("</font>"); JS0106.js // JavaScript text=prompt("Írjunk be valamit!");

JavaScript – változók kezelése JS0107.js // 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.

JavaScript - függvények Függvény paramétere Függvény neve JS0201.js Függvény // JavaScript function Greet(who){ alert("Hello! "+who+"!"); } Greet("Rita"); Függvény törzse A függvény meghívása JS0202.js // JavaScript vnev=prompt("Vezetéknév megadása:"); knev=prompt("Keresztnév megadása:"); hcim=prompt("A lap címe:"); document.write("<h1>"+hcim+"</h1>"); document.write("<h2>Készítette: "+vnev+" "+knev+"</h2>"); 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("<h2>A szavak kiírása rendezetlen formában:</h2>"); document.write("<p>"); for (i=0;i<n;i++) { document.write(szavak[i]+", "); } document.write("</p>"); szavak.sort(); document.write("<h2>A szavak kiírása rendezett formában:</h2>"); document.write("<p>"); for (i=0;i<n;i++) { document.write(szavak[i]+", "); } document.write("</p>"); 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

String objektum • Az eredeti sztring: JavaScriptszoveg.length = 10szoveg.substring(3,8) = aScriszoveg.toUpperCase() = JAVASCRIPTszoveg.toLowerCase() = javascriptszoveg.charAt(0) = Jszoveg.charAt(4) = Sszoveg.indexOf('S') = 4szoveg.indexOf('s') = -1szoveg.lastIndexOf('S') = 4szoveg.lastIndexOf('s') = -1

String objektum • szoveg.link('http://www.netscape.com') = JavaScriptszoveg.big() = JavaScriptszoveg.blink() = JavaScriptszoveg.bold() = JavaScriptszoveg.fixed() = JavaScriptszoveg.italics() = JavaScriptszoveg.small() = JavaScriptszoveg.strike() = JavaScriptszoveg.sub() = JavaScriptszoveg.sup() = JavaScript

JavaScript – stringkezelés JS0204.js // 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="http://www.microsoft.com"; break; case "Google": window.location="http://www.google.com"; break; case "Mozilla": window.location="http://www.mozilla.org"; break; default: window.location="http://www.uni-pannon.hu"; } 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("<h2>"+(names.length)+" nevet írtunk be.</h2>"); document.write("<ol>"); for (i in names) { document.write("<li>"+names[i]+"</li>"); } document.write("</ol>"); 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, 2007 12: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.

A Math objektum JS0207.js // 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("<h2>5000 szám átlaga: " + average + "</h2>");

JavaScript a gyakorlatban