JavaScript a gyakorlatban

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.htmlJS0101.html

JavaScript beillesztése XHTML-be

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="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>


<html xmlns="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>




<html xmlns="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>


<html xmlns="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”XHTML 1.0 Strict-ben nincs: LANGUAGE=”JavaScript”

A régi böngészők elől elrejtjük a JS-kódot!

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.

Objektumorientált felépítés, ahol a document jelzi az adott honlapot.

JS0103.jsJS0103.js




<html xmlns="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>


<html xmlns="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>

// JavaScriptdocument.write(document.lastModified);

// JavaScriptdocument.write(document.lastModified);

JS0106.jsJS0106.js

JS0104.jsJS0104.jsJS0105.jsJS0105.js

JavaScript – változók kezelése

// JavaScriptnow = new Date();localtime = now.toString();utctime = now.toGMTString();document.write("<b>Helyi ido:</b> " + localtime + "<br />");document.write("<b>UTC ido:</b> "+ utctime);

// JavaScriptnow = new Date();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>");

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>");

// JavaScripttext=prompt("Írjunk be valamit!");

// JavaScripttext=prompt("Írjunk be valamit!");

JS0107.jsJS0107.js

JavaScript – változók kezelése

// JavaScriptfor (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!");

}

// JavaScriptfor (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-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.jsJS0202.js

JS0201.jsJS0201.js


// JavaScriptfunction Greet(who){

alert("Hello! "+who+"!");}Greet("Rita");

// JavaScriptfunction Greet(who){

alert("Hello! "+who+"!");}Greet("Rita");

FüggvényFüggvény

neveFüggvény

paramétere

Függvény törzse

A függvény meghívása

// JavaScriptvnev=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>");

// JavaScriptvnev=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öktombnev = 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>");

// JavaScriptnnev=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.jsJS0203.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

Metódus Leírásanchor HTML hivatkozást készít a sztringbőlbig, blink, bold, fixed, italics, small, strike, sub, sup HTML-ként formázott sztringet hoz létrechartAt a paraméterként átadott pozícióban lévő karakterrel tér vissza

indexOf, lastIndexOfA paraméterben meghatározott részsztring első vagy utolsó pozíciójával tér vissza. Ha ilyen nem szerepel benne, akkor -1 a visszaadott érték

link HTML linket készít a sztringből

splitfelosztja a sztringet részsztringekre egy elválasztó karakter mentén, majd ezeket egy tömbbe teszi

substring a sztring egy meghatározott részével tér visszatoLowerCase, toUpperCase csupa kisbetűssé ill. nagybetűssé alakítja a sztringet

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

JS0204.jsJS0204.js

JavaScript – stringkezelés

// JavaScriptmsg=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();

// JavaScriptmsg=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

// JavaScriptwhere=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";

}

// JavaScriptwhere=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.jsJS0205.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>");

// JavaScriptnames=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.jsJS0206.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); Függvény Leírás

abs abszolút értéksin, cos, tan trigonometrikus függvények; az argumentum radiánbanacos, asin, atan az előbbi függvények inverze; argumentum radiánbanexp, log exponenciális függvény, természetes alapú logaritmusceil felső egészrészfloor alső egészrész

min, maxaz argumentumként megadott két érték közül a kisebbet, ill. a nagyobbat adják vissza

powexponenciális függvény; első argumentuma az alap, a második a kitevő

round kerekítés a legközelebbi egészresqrt négyzetgyök függvény

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.jsJS0207.js

A Math objektum

// JavaScripttotal = 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>");

// JavaScripttotal = 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

Documents