Javascript Alapok

JavaScript I. KNYV: ALAPOK

I. JavaScript Bevezets A JavaScript (a tovbbiakban JS) a legelterjedtebben hasznlt internetes programozsi nyelv, melyet a legtbb bngsz (pl. IE, Firefox, Chrome, Opera, Safari) tmogat. Elismeretek A JS elsajttshoz szksges a HTML/XHTML nyelv legalbb alapfok ismerete. Mi a JavaScript? A JavaScript egy Internetes felhasznlshoz idomtott n. scripting language (=parancsler nyelv), vagyis voltakppen egy (leegyszerstett) programozsi nyelv, mellyel interaktvv tehetjk weboldalainkat. A JavaScriptet a (bonyolultabb) C programozsi nyelvbl alaktottk ki. A JS n. interpretlt nyelv, azaz a parancsait a program az erre kifejlesztett program gpi kdra val lefordts nlkl hajtja vgre. A JS-et ltalban kzvetlenl a HTML-fjlba rjuk bele. A JS-et brki ingyenesen hasznlhatja. Java = JavaScript? Nem! A Java s a JavaScript kt, alapgondolataiban s megjelensben teljesen eltr programozsi nyelv. A Sun Microsystems ltal kifejlesztette Java a JS-nl sokkal hatkonyabb s bonyolultabb nyelv, s gy inkbb a C ill. C++ -hoz hasonl. Mire j a JavaScript? A JS a webes fejlesztk programozsi eszkze. A HTML-oldalak kszti gyakran nem programozk; gy szmukra idelis programozsi lehetsget nyjt az igen egyszer mondattannal rendelkez JavaScript. A JS segtsgvel teht a programozshoz nem rtk is bvthetik nhny program-tredkkel weboldalukat. A JS-tel dinamikus (szveg)tartalommal tlthetjk fel a weboldalakat. Az albbihoz hasonl JavaScript-utastsokkal (=statements) az oldal bizonyos (pl. szveges) elemeinek tartalmt a weboldal aktulis llapothoz igazthatjuk: document.write( + name + ) A JS-tel az oldal reaglhat bizonyos esemnyekre A JS megfelel belltsval bizonyos trtnsekhez (pl. az oldal letsnek befejezdse, vagy a felhasznl elemre-kattintsa) az oldal tartalmnak megvltozsban ll vlaszt rendelhetnk. A JS kezeli (olvassa s fellrja) a HTML-tartalmat A JS mkds kzben beolvashatja/felhasznlhatja ill. mdosthatja egyes HTML-elemek tartalmt. A JS adatok validlsra is hasznlhat. A JS segtsgvel leellenrizhetjk a felhasznl ltal (pl. rlapon) kldend adatok helyessgt a tovbbtsuk eltt. A kiszrt hibs zenetek nem terhelik feleslegesen a szervert. A JS felismeri a felhasznl bngszprogramjt. A JS segtsgvel felismerhetjk a felhasznl bngszjnek tpust, s a szerver az azonos tartalm, de eltr bngszk szmra kszlt weboldal-varinsok kzl a legmegfelelbbet tovbbthatja neki. A JS alkalmas cookie-k ltrehozsra A JS-segtsgvel n. cookie-k formjban adatokat trolhatunk s kereshetnk vissza a weboldal ltogatjnak szmtgpn/szmtgprl. A (HTTP-/web-/browser-)cookie (=keksz) nem ms, mint a webbnglsz ltal a felhasznl gpn eltrolt szveg. Ezt a ksbbiekben bejelentkezseknl, keressi s bngszsi javaslatokhoz, bevsrlkosr-tartalom megrzsre egyarnt felhasznlhatjuk, de az ppen ltogatott weboldalak tartalmnak megrzsre s a gp vratlan lellst kvet visszalltsra is

alkalmas. A JavaScript pontos elnevezse ECMAScript A JavaScript az ECMASCript nyelvi normra pl alkalmazs (=implementci). Az ECMAScriptet az ECMA International fejleszti s mkdteti, amely egy nemzetkzi kommunikcitechnolgiai s szrakoztat elektronikai szabvnygyi szervezet. A hivatalos JavaScript szabvny jele ECMA-262. Az ECMAScript nyelvet Brendan Eich, a Netscape munkatrsa fejlesztette ki (a Navigator 2.0-ra), majd 1996 ta minden Netscape s Microsoft bngszvel hasznlhatv vlt. Az ECMA-262 kifejlesztse 1996-ban kezddtt, az els vltozatt pedig az ECMA 1997. jniusi ltalnos Kzgylsn fogadtk el. A szabvnyt 1998-ban az ISO is bejegyezte, ISO/IEC 16262 szm alatt. Fejlesztse jelenleg is folyik.

II. JavaScript mdszertan A JavaScriptet a HTML tag segtsgvel rhatjuk bele a weboldalba. JavaScript rsa weboldalba Az albbi pldban egy szveget ratunk ki a weboldalra a JS segtgvel: document.write("Hello World!"); A fenti HTML-oldalon csupn a Hello World! szavak olvashatk (idzjel nlkl). Ha az idzjeleknek akr csak egyikt is kitrljk, vagy az utastsban szerepl pontot kettspontra vltoztatjuk, a bngsz nem r ki semmit. Msodik pldnkban ltjuk, hogyan adhatunk HTML-tageket a megjelentend tartalomhoz: document.write("Hello World!"); Ebben az esetben a szveg elsrend cmsorknt jelenik meg. A pldt talaktva linket is kirathatunk: document.write("Hello World!"); Mint ltszik, az tag attribtum-rtkeit (http://www.lap.hu ill. _blank) nem tettk idzjelbe, mert ellenkez esetben a program megzavarodik, s nem r ki semmit (ti. maga a JS utasts rtke is idzlejben van). Magyarzat Mint els pldnkban lttuk, a JS-nek a dokumentumba gyazsra a tag szolgl, melyben a type attribtummal a parancsnyelv fajtjt is meg kell adnunk. gy a s a tagek jelzik a JS kezdett s vgt a dokumentumban: ...

A document.write egy standard JS-parancs, mellyel szveget ratunk ki az oldalra. Hogyha ezt az elbb bemutatott script elembe rjuk, a bngsz JS-parancsknt fogja rtelmezni, s vgrehajtja a parancssort, azaz ebben az esetben kirja a Hello World! szveget: document.write("Hello World!"); Hogyha a parancssort nem tagbe rjuk, akkor azt a bngsz egyszer szveges tartalomknt kezeli, s az egszet kirja az oldalra. Teht pl. a kvetkez esetben: document.write("Hello World!"); a document.write(Hello World!); felirat jelenik meg a kpernyn. Megolds az egyszer bngszk szmra A JavaScriptet nem tmogat bngszk a JS rendelkezseket (=statements) az oldal-tartalom rszeknt jelentik meg, ami zavarlag hat. Ennek kikszblsre, a JS szabvny rtelmben a HTML comment () taget alkalmazzuk az elrejtskre. Azaz egyszeren rjunk egy taget utnuk, gy: A kt, jobbra dl perjel a comment-zr tag eltt a JS-megjegyzsek jellse, azaz az ezen jelek kz rt rendelkezseket a program nem veszi figyelembe. A HTML comment-lezr tag el rt ketts perjel rtelmben a JavaScript az oldal teljes tovbbi tartalmt megjegyzsknt kezeli, s nem hajtja vgre. JavaScript mdszertan: A JS-et tartalmaz tag:

JavaScript rendelkezsek Szveg-kirat parancs: document.write(Szveg); JS elrejtse nem tmogat bngsz esetre (HTML comment taggel):

III. A JavaScript elhelyezse a weboldalban A JS-et a dokumentum fejrszbe ill. szvegtestbe egyarnt belerhatjuk. A JS elhelyezse a weboldalban A HTML-oldalba rt JavaScripteket a bngsz az oldal betltsekor azonnal vgrehajtja. Elfordulhat azonban, hogy mskorra kell idztennk ket, pl. amikor a felhasznl megnyom egy gombot. Az utbbi esetben egy n. fggvnybe (=function) kell bernunk a JS-rendelkezseket, amirl egy ksbbi fejezetben lesz sz. JS-rendelkezsek a rszben Azon JS-rendelkezseket, melyeknek csak megfelel felhasznl-oldali akcira, hvsra szabad vgbemennik, az elbbiek szerint fggvnyekbe rjuk; amelyket a dokumentum fejrszbe rva elklnthetnk a szvegtestbe rt HTML, CSS s JS elemektl s rendelkezsektl. Kvetkez plda-oldalunk betltsekor egy prbeszdpanelben a This alert vox was called with the onload event felirat jelenik meg: function message() { alert("This alert box was called with the onload event"); } We usually use the head section for functions (to be sure that the functions are loaded before they are called). Mint ltjuk, a elem betltsekor a bngsz a message fggvnyben szerepl alert parancs tartalmt iratja ki egy prbeszdpanelben. Termszetesen a fggvnyt message helyett msknt is elnevezhetjk (pl. sanyi), elegend az elnevezst a elemben ill. a fejrszben trni. Mint ltjuk, a fggvnyet azrt is a rszbe rjuk, hogy a bngsz mg a szvegtest betltdse, vagyis az ottani akci nyomn trtn esetleges meghvsuk eltt beolvassa ket. JS-rendelkezsek a rszben Hogyha a parancsunkat nem szksges fggvnyknt vgrehajtatnunk, vagy pl. csupn szveget akarunk vele kiratni, akkor a dokumentum rszben clszer elhelyeznnk, pl.: document.write("This message is written by JavaScript"); Az oldalon teht a This message is written by JavaScript felirat jelenik meg.

JS-rendelkezsek a s rszben A dokumentumban tetszleges szm scriptet heylezhetnk el, a fejrszben s a szvegtestben egyarnt, gy pl. az albbi oldalon mind a szvegtestbe, mind a fejrszbe rt JS-ek hibtlanul mkdnek, nem zavarjk egymst: function message() { alert("This alert box was called with the onload event"); } document.write("This message is written by JavaScript"); A szvegtest betltsekor teht figyelmeztet zenet jelenik meg (prbeszdpanelben), a megjelentett tartalom pedig megfelel a szvegtestbe rt scriptnek. Akkor is ugyanez trtnik, hogyha csak a fejrsz ill. szvegtest tartalmazza mindkt scriptet, vagy azok elhelyezst felcserljk. Teht voltakppen brhol elhelyezhetjk ket, a lnyeg, hogy a program kpes leyen ket a megfelel idben a megfelel elemre vonatkoztatva vgrehajtani, s hogy a kd ttekinthet legyen. Kls JavaScript hasznlata Hogyha szmos oldalon kvnjuk ugyanazokat a JavaScripteket futtatni, nem kell a rendelkezseket minden egyes oldalba belernunk elgend egy kls fjlknt sszelltott JS-re hivatkoznunk. E fjl .js kiterjesztssel rendelkezzen! A kls JS fjl csak JS-rednelkezseket tartalmazhat, tageket s egyb elemeket vagy szveget nem. Ezrt a tageket se rjuk bele! A kls JS-fjlra a elem src (=source) attribtumval utalunk, pl.: The actual script is in an external script file called "xxx.js". Mint ltjuk, az oldal a http://www.w3schools.com/js/xxx.js JS-fjlra hivatkozik, aminek tartalma: document.write("This text was written by an external script!") A taget, habr tartalmat nem runk bele, tovbbra is ugyanott kell elhelyezni, ahov bels

JS-knt bernnk! A JavaScript elhelyezse a weboldalban: Bel JavaScriptek: A HTML-oldalba rt JavaScripteket a bngsz az oldal betltsekor azonnal vgrehajtja; a fggvnyekbe rt kdot viszont csak a fggvny meghvsakor.

JS-rendelkezsek a rszben A csak meghvsra indtand fggvny-parancssorokat a rszbe rjuk; hogy elklnts a szvegtestbe rt, azonnal vgrehajtand JS-tl, ill. hogy mr meghvsuk eltt betltse ket a bngsz.. JS-rendelkezsek a rszben Hogyha a parancsunkat nem szksges fggvnyknt (ksleltetve) vgrehajtatnunk, akkor a dokumentum rszben clszer elhelyeznnk A dokumentumban tetszleges szm scriptet heylezhetnk el, a fejrszben s a szvegtestben egyarnt, azaz mind a szvegtestbe, mind a fejrszbe rt JS-ek hibtlanul mkdnek, nem zavarjk egymst!

Kls JavaScriptek: Adott esetben (ha annak tartalma megfelel), a JS-et egy kls, .js kiterjeszts fjlknt is hozzadhatjuk a weboldalhoz. A kls JS fjl csak JS-rendelkezseket tartalmazhat, tageket s egyb elemeket vagy szveget nem. Ezrt a tageket se rjuk bele!

Hivatkozs kls JS-re: A taget, habr tartalmat nem runk bele, tovbbra is ugyanott kell elhelyezni, ahov bels JS-knt bernnk!

Scriptek: Oldalbetlts (=onload) esemny/attribtum:

Fggvny:

function fggvny-nv (paramter1,paramter2) { vgrehajtand_kd; }

Figyelmeztet-ablak: alert(zenet);

IV. JavaScript rendelkezsek A JS a bngsz ltal vgrehajtand rendelkezsek (azaz parancsoknak s azok rtkeinek) sorozata. A JavaScript esetfgg A HTML-lel szemben a JS esetfgg, ezrt fokozottan gyelnnk kell a nagy-s kisbetk kvetkezetes hasznlatra a JS-et alkot kijelentsek, (kijellend vagy meghvand) vltozk, objektumok s fggvnyek rsakor. JavaScript rendelkezsek (statements) A JS-rendelkezsek nem egyebek, mint a bngsznek szl utastsok, azaz a teendk meghatrozsai. Pl. az albbi rendelkezs rtelmben a bngsznek meg kell jelentenie a Hello Dolly feliratot a weboldalon: document.write("Hello Dolly"); A rendelkezsek vgre ltalban pontosvesszt runk. Ez bevett s elismert gyakorlat a programozk kztt, az Interneten szmos helyen talkozhatunk vele. A JS szabvnynak a rednelkezsek pontosvesszvel val elvlasztsa csak kiegszt eleme, mivel a bngszk e szabvny szerint a sortrseket (entereket) tekintik az egyes rendelkezsek vgnek. gy minden egyes rendelkezst kln sorba kellene rni. A pontosvesszk hasznlatval nemcsak knnyebben olbvashatv, elklnthetbb vlnak az egyes rendelkezsek, hanem egy sorba tbbet is rhatunk bellk. JavaScript kd A JavaScript-kd vagy egyszerbben JavaScript JS-rendelkezsek sorozata. Ezeket a bngsz az oldalan elfoglalt helyk sorrendjben hajtja vgre. Kvetkez pldnkban egy cmsort s kt bekezdst ratunk ki a weboldalra: document.write("This is a paragraph."); document.write("This is a heading"); document.write("This is another paragraph."); Mint ltjuk, itt a cmsor a kt bekezds kztt tallhat. Hogyha a pontosvesszket kitrljk, a kd tovbbra is mkdik, de hogyha ezutn a sortrseket megszntetjk s az egyes rendelkezseket enterek helyett csak szkzk vlasztjk el, a bngsz nem kpes kirni a szveget. JavaScript tmbk A JS-rendelkezseket n. tmbkbe csoportosthatjuk, melyeket kapcsos zrjelekkel jellnk. A tmbbe tartoz rendelkezseket a bngsz egyszerre hatja vgre. A kvetkez pldban ugyancsak cmsort s bekezdseket ratunk ki a weboldalra: {

document.write("This is a heading"); document.write("This is a paragraph."); document.write("This is another paragraph."); } Pldnk nem tl tanulsgos, csupn a tmbbe zrs mondattant mutatja be, mely a CSS-meghatrozsaok csoportostsval analg. A rendelkezseket leggyakrabban akkor csoportostjuk, ha egy fggvnybe (=function) vagy felttelbe (=condition) szeretnnk ket csoportosan berni. A fggvnyekrl s felttelekrl (mely utbbi teljeslse esetn a rendelkezsek adott csoportjt a program vgrehajtja) a ksbbi fejezetekben lesz sz. JavaScript rendelkezsek: A JS-rendelkezsek a bngsznek szl utastsok. Sortrsek vagy pontosvesszk vlaszthatjk el ket a kdban. A rendelkezseket tmbkbe csoportosthatjuk, amelyek elejn ill vgn kapcsos zrjelek llnak. A tmbbe zrt kdot (pl. egy fggvny vagy feltteles rendelkezs rtkeknt) a bngsz a tbbitl elklntve, egysgknt hajtja vgre. A JS esetfgg, ezrt fokozottan gyelnnk kell a nagy-s kisbetk kvetkezetes hasznlatra!

V. JavaScript megjegyzsek A JS-megjegyzseket a kd olvashatbb ttelre hasznljuk. JavaScript megjegyzsek A JS-megjegyzsek a JS-kd magyarzatra vagy ttekinthetsgnek nvelsre szolglnak. Az egysoros megjegyzsek ketts perjellel (//) kezddnek Az albbi pldban egysoros megjegyzsekkel magyarzzuk a kdot: // Write a heading document.write("This is a heading"); // Write two paragraphs: document.write("This is a paragraph."); document.write("This is another paragraph."); Mint ltjuk, az egysoros megjegyzsek hasznlatnak kulcsa, hogy a bngsz a JavaScript rendelkezseit soronknt rtelmezi, gy a megjegyseink nem szorulnak kln lezr jelre, hiszen a kd j sorban folytatdik. Tbbsoros JavaScript-megjegyzsek A tbbsoros JS-megjegyzsek /*-gal kezddnek s */-re vgzdnek, a CSS-megjegyzsekhez hasonlan. Albbi pldnk rendelkezseihez tbbsoros magyarzatot fztnk: /* The code below will write one heading and two paragraphs */ document.write("This is a heading"); document.write("This is a paragraph."); document.write("This is another paragraph."); Vgrehajts-gtl megjegyzs-jelek Az albbi pldban a megjegyzs-jelet egy rendelkezs vgrehajtsnak meggtlsra, azaz kvzi a rendelzeks kikapcsolsra hasznljuk. A megjegyzs-jelek ilyetn hasznlata az oldalak hibinak kijavtsakor (=debugging) szoksos. //document.write("This is a heading");

document.write("This is a paragraph."); document.write("This is another paragraph."); Ebben az esetben teht a cmsor nem ltszik, mert a megjelentsre vonatkoz rendelkezst a bngsz egy egysoros megjegyzsnek tekinti. Tbbsoros rendelkezsek vagy rendelkezs-tmbk kikapcsolsra szabatosan a tbbsoros megjegyzs-jelet alkalmazzuk: /* document.write("This is a heading"); document.write("This is a paragraph.");*/ document.write("This is another paragraph."); Itt csak az utols bekezds kerl megjelentsre. Sorvgi megjegyzsek Kvetkez pldnk megjegyzseit a rendelkezsek utn, a sorvgekre rtuk, gy azok nem foglalnak el kln sorokat: document.write("Hello"); // Write "Hello" document.write(" Dolly!"); // Write " Dolly!" Az oladl tartalma itt is Hello Dolly! JavaScript megjegyzsek: A JS-megjegzseket jegyzeteknek a kdba rshoz vagy a kd egyes rszeinek kikapcsolshoz/rvnytelentshez hasznljuk a szerkeszts vagy javts sorn. Egysoros megjegyzs:

//Megjegyzs Tbbsoros megjegyzs:

/*Megjegyzs Megjegyzs*/ Sorvgi megjegyzs (nem foglal el kln sort): kd; //Megjegyzs

VI. JavaScript vltozk A vltozk (=variables) a JS informci-trol rszei. Algebrai vltozk Az iskolai algebrbl emlkezhetnk a kvetkezhz hasonl sszefggsekre: x=5, y=6, z=x+y Ezekben a betkhz (pl. az x) bizonyos rtket (pl. 5) trstva a mvelet vgeredmnye (z = 11) kiszmthatv vlik. Az emltett betket vltozknak (=variables) nevezik, melyek bizonyos rtkekre (pl. x = 5) illetve sszefggsekre (pl. z=x+y), azaz vgs soron informcikra utalhatnak. JavaScript vltozk Az algebrai vltozkhoz hasonlan a JS vltozi is rtkeket ill. sszefggseket takarnak. Tetszleges elnevezsekkel illethetjk ket, mint amilyen az x, illetve jellegzetesebbekkel is, mint pl. a carname. A JS-vltozk elnevezsekor kt szablyt kell betartanunk:

1. A JS-vltoz nevek, mint minden JS-elem, esetfggk, azaz pl. az y s az Y kt kln vltozt jell.

2. A vltoz-neveknek betvel vagy alhzs-karakterrel (_) kell kezddnik. Egy gyors plda A vltozk rtke a parancssor vgrehajtsa kzben vltozhat. Az aktulis rtk behvsa ill. megvltoztatsa egyarnt az rtk-nvre val hivatkozssal trtnik, mint azt pldnk mutatja: var firstname; firstname="Hege"; document.write(firstname); document.write(""); firstname="Tove"; document.write(firstname); The script above declares a variable, assigns a value to it, displays the value, changes the value, and displays the value again. A pldnkban szerepl parancssor els sorban definiljuk a firstname nev vltozt, majd a msodik sorban hozzrendeljk a Hege rtket. A harmadik sor kiratja a bngszvel a firstname vltoz ppen aktulis rtkt (Hege). A negyedik sor egy sortrst jelent a megjelen szvegben. Az tdik sorban a firstname vltozhoz j rtket rendelnk (Tove), majd a hatodik sorban ismt kiratjuk a firstname vltoz rtkt, ami ekkor mr Tove. A parancssor futtatsnak eredmnye teht a Hege Tove

felirat lesz. JavaScript vltozk ltrehozsa A JS vltozk ltrehozsa (=creation) n. meghatrozssal (=declaration) trtnik, amit a var kulcsszval vgznk, pl.: var x; var carname; Az gy ltrehozott kt vlzot res (=empty), azaz rtkkel nem rendelkezik. A vltozkhoz, mint fentebb lttuk, a vltoznv=szm; ill. a vltoznv=szveg; rendelkezsekkel redndelhetnk szm- vagy szveges rtket. Ezt (azaz az rtkek megadst) a definilssal ssze is vonhatjuk, pl.: var x=5; var carname="Volvo"; E rendelkezsek vgrehajtsval az x vltoz rtke 5, a carname- pedig Volvo lesz. Amint lttuk, a szveges vltoz-rtkeket idzjelbe kell tenni. Termszesen a szmokat is tehetjk idzjelbe, de akkor azt a bngsz szvegnek fogja tekinteni s akknt kezeli. Pl. a bngsz a document.write(); parancsot nem hajtja vgre, mert a taget nem tudja szmknt rtelmezni. Hogyha ehelyett a document.write(); rendelkezssel lnk, akkor sortrst kapunk. Ugyangy, a document.write(x); rendelkezssel a bngsz nem az x fggvny rtkt (5) rja ki, hanem az x bett. Ugyanakkor az document.write(x); rendelkezst mr nem betknt, hanem szmknt kezeli, s az x vltoznak (azaz szmnak) megfelel, 5-s rtket rja ki. JavaScript vltozk ltrehozsa az rtkek megadsval Ahogy fentebb lttuk, a JS-vltoz rtkek megadsakor mindig le kell rnunk a vltoz nevt is. Ezrt gy vehetjk, hogy az rtk-megadssal egyttal az rtk-nevet is definiljuk. Azaz a JS-ben a meg nem hatrozott vltozk rtknek megadsval automatikusan definiljuk a vltozkat is. Ennek rtelmelmben a x=5; carname="Volvo"; parancssor jelentse megegyezik az elbb ismertetett, kzs meghatrozsi mdszer eredmnyvel: var x=5; var carname="Volvo"; illetve annak hosszabb megfeleljvel: var x; x=5; var carname; carname=Volvo;

A JavasScript vltozk jra-meghatrozsa Hogyha pl. mint az albbi parancssorban kthat egy JS-vltozt jra-definilunk, annak rtke tovbbra is megmarad, pl.: a kvetkez parancssor rtelmben var x=5; document.write(x); document.write(); var x; document.write(x); A bngsz egyms al kt 5-st r ki, jelezve, hogy az x vltoz jradefinilsa az rtkt nmagban nem vltoztatta meg ill. nem trlte. Kvetkez pldnkban azonban ktszer is megvltoztatjuk az x rtkt, s ekzben mindhrom definilsi eljrst alkalmazzuk: var color; color=red; document.write(color); document.write(); var color=green; document.write(color); document.write(); color=blue; document.write(color); Ebben az esetben a red, green s blue szavakat ltjuk egyms alatt. JavaScript aritmetika Az algebrhoz (betszmtanhoz) hasonlan a JS-vltozkkal is vgezhetnk aritmetikai (szmtani) mveleteket, pl.: y=x-5; z=y+5; Az ilyenkor vgeztethet mveletekrl (=operators) a kvetkez fejezetben lesz sz. JavaScript vltozk: A vltozk a JS informci-trol rszei. Az algebrai vltozkhoz hasonlan rtkeket ill. sszefggseket takarnak. Tetszleges elnevezsekkel illethetjk ket, de kt szablyt be kell tartanunk:

1. A JS-vltoz nevek esetfggk, azaz pl. y s Y kt klnbzt jell. 2. A vltoz-neveknek betvel vagy alhzs-karakterrel (_) kell kezddnik.

Vltozk definilsa:

1. Kln sorokban: var x; var x=1;

2. Egy sorban: var x=1;

3. Az rtk megadsval: x=1; rtk-tpusok: Szm, pl.: 123 Szveg, pl.: Szveg Logikai rtk: true/false/1/0 Mvelet, pl.: a+b res (empty): /null Nem szm (not a number): NaN Vltozk jradefinilsa, hierarchija:

1. A vltozk nevnek (pl. var telefon;) jradefinilsa az rtkre nincs hatssal. 2. Az rtk jbli megadsa fellrja a korbbit (az oldalban elbb szereplt). 3. A fggvnyeken ill. tmbkn belli (helyi), s az egsz dokumentumra vonatkoz (kls)

vltozk tpusa rt rtke kztt nincs sszefggs.

VII. JavaScript mveletek Alapismeretek Az egyenlsgjelnek (=) megfelel hozzrendelsi mveletet a JS-vlltoz(-neve)k s rtkk egymshoz rendelsre alkalmazzuk. A szmtani sszeadsjelnek (+) megfelel mvelet pedig a vltozk rtkeinek sszeadst jelenti. Pl. az albbi parancssorban lv rendelkezsek y=5; z=2; x=y+z; vgrehajtsnak eredmnye a kpernyn: 7. JavaScript szmtani mveletek A szmtani (=arithmetic) mveletekel a vltozkat s/vagy rtkket kezelhetjk. A kvetkez tblzatban az y=5 esetre vonatkoz pldkon keresztl mutatjuk be a JS-ben hasznlt szmtani mveleteket: Mvelet (=operator)

Lers Plda Eredmny

+ sszeads (=addition) x=y+2 x=7

- Kivons (=subtraction) x=y-2 x=3

* Szorzs (=multiplication) x=y*2 x=10

/ Oszts (=division) x=y/2 x=2.5

% Modulus (osztsi maradk) x=y%2 x=1

++ Nvekmny (=increment) x=++y x=6

-- Cskkens (=decrement) x=--y x=4

JavaScript hozzrendel-jellemzk A hozzrendel-jellemzkkel rtket rendelhetnk a JS-vltozkhoz. Az albbi tblzatban sszefoglaljuk ket, pldkon is bemutatva hasznlatukat (x=10 s y=5 esetn): Mvelet Plda Hagyomnyos alak rtk

= x=y x=5

+= x+=y x=x+y x=15

-= x-=y x=x-y x=5

*= x*=y x=x*y x=50

/= x/=y x=x/y x=2

%= x%=y x=x%y x=0

Tbbtag vagy szveges rtkek sszeadsa (a + mvelettel) A + mveletet tbb szmbl vagy szbl ll vltoz-rtkek sszeadsra is hasznlhatjuk; pl. a kvetkez parancssor vgrehajtsa utn a txt3 vltoz rtke What a vernice day lesz: txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; Teht a fenti rendelkezsek vgrehajtsa utn a txt3 tartalma (azaz rtke): What a verynice day. Hogyha a very ill. nice szavak kztt szkzre is szksg van, akkor azt vagy az egyik vltoz rtk-sorozatba kell bernunk txt1="What a very ";

txt2="nice day"; txt3=txt1+txt2; vagy txt1="What a very"; txt2=" nice day"; txt3=txt1+txt2; vagy a txt3 rtkt megad kifejezsbe kell kzvetlen rtkknt vagy egy jabb, kls vltoz rtkeknt belefoglalnunk, azaz vagy txt1="What a very"; txt2="nice day"; txt3=txt1+ +txt2; vagy txt1="What a very"; txt1b= ; txt2="nice day"; txt3=txt1+txt1b+txt2; rendelkezsekkel lnnk. Ezek vgrehajtsa utn teht a txt3 tartalma: What a very nice day. Megjegyezzk, hogy a JS-be rt szvegek tbbszrs szkzei is eggy olvadnak! rtk-sorok (tbbszrs szmrtkek vagy szavak) s szmok sszeadsa Esetn az eredmny minig rtk-sor lesz. Ezt a szablyt illusztrlja albbi pldnk is: x=5+5; document.write(x); document.write(""); x="5"+"5"; document.write(x); document.write(""); x=5+"5"; document.write(x); document.write(""); x="5"+5; document.write(x); document.write(""); The rule is: If you add a number and a string, the result will be a string. ahol az els mvelet eredmnye 10, az sszes tbbi viszont 55, ami teht nem szmnak, hanem szmsorozatnak/szvegnek szmt, teht pl. ha a parancssorhoz hozzrjuk az y=x+6; document.write(y); meghatrozsokat is, annak eredmnye 61 helyett 556 lesz; mg ha rgtn az els x-meghatrozs utn rjuk, akkor y rtke 16 lesz. JavaScript mveletek:

Szmtani mveletek jelei: sszeads: + Kivons: - Szorzs: * Oszts: / Modulus (osztsi maradk): % Nvekmny: ++ Cskkens: -- Hozzrendelsek jelei: Egyenlsg: x=y Nvels: x+=y [x=x+y] Cskkents: x-=y [x=x-y] Tbbszrzs: x*=y [x=x*y] Feloszts: x/=y [x=x/y] Maradk-kpzs: x%=y [x=x%y] Szveg-rtk vltozk sszeadsa:

var x=Szveg1; var y=Szveg2; var z=x+ +y; az eredmny: Szveg1 Szveg2.

Szmot szveggel sszeadva az eredmny szveg (string); pl. x=5+5=10, de y=5+5=55!

VIII. JavaScript sszehasonlt s logikai mveletek Az sszehasonlt s logikai mveleteket igaz/hamis megklnbztetsekre hasznljuk a JS-ben. sszehasonlt mveletek Az sszehasonlt mveleteket (=comparison operators) logikai rendelkezsekben hasznljuk, vltozk vagy azok rtkei kzti azonossg vagy eltrs felismersre. Az albbi tblzatbl (ahol x=5) megismerhetjk a JS sszehasonlt mveleteit: Mvelet Lers Plda Mveleti rtk

== (x) egyenl (8-cal) x==8 HAMIS

=== (x) azonosan (azaz mind rtkben, mind szveg/szm jellegben) egyenl (5-tel ill. 5-tel)

x===5 x==="5"

IGAZ HAMIS

!= (x) nem egyenl (8-cal) x!=8 IGAZ

> (x) nagyobb, mint (8) x>8 HAMIS

< (x) kisebb, mint (8) x= (x) nagyobb vagy egyenl, mint (8) x>=8 HAMIS

IX. JavaScript feltteles rendelkezsek A feltteles rendelkezsekkel (=conditional statements) megadhatjuk, hogy az egyes felttelek teljeslst milyen akci ksrje. Feltteles rendelkezsek A weboldalak rsakor igen gyakran felmerl igny, hogy a felhasznl dntseinek megfelel dolog trtnjen meg (pl. megfelel szveg vagy dokumentum-rszlet jelenjen meg). Ezt a kdba rt feltteles rendelkezsekkel rhetjk el. A JavaScriptben ngyfle feltteles rendelkezs szerepel:

if a bngsz akkor hajtja vgre a krdses kd-rszletet, ha a felttel IGAZ; ifelse ha a felttel IGAZ/HAMIS voltnakmegfelelen a bngsz egyik vagy msik kd-

rszletet hajtja vgre. ifelse ifelse felttetelt hasznlunk, hogyha mg tbb lehetsges kd-varins kzl kell a

megfelelt kijellni. switch szintn akkor hasznljuk, hogyha szmos lehetsges kd-varins kzl kell egyet

kijellni. Az if feltteles rendelkezs Az if feltteles rendelkezs tartalma csak akkor kerl vgrehajtsra, ha a felttel teljesl, vagyis a felttell szabott mvelet rtke IGAZ. A feltteles rendelkezs mondattana: if (felttel-mvelet) { vgrehajtand kd } Az if nevet mindig kisbetkkel rjuk, mskpp a rendelkezs nem mkdik! Kvetkez pldnkban a bngsz bels rjnak aktulis id-rtkhez kpest, reggel 10 ra eltt a Good morning felirat jelenik meg (egybknt nem jelenik meg semmi): var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("Good morning"); } This example demonstrates the If statement. If the time on your browser is less than 10, you will get a "Good morning" greeting. Mint ltjuk, elszr meghatrozzuk a d vltozt, melynek rtkl a bngsz bels rjnak (az oldal betltsekor) aktulis llst vesszk. Ezutn a time vltozt definiljuk, ami nem ms, mint az elbbi idpontot jell szmsorbl az rk szmrtke.

Majd kvetkezik a feltteles rendelkezs: hogyha a time, azaz az elbbi, egsz rkra vonatkoz adat 10-nl kisebb, akkor a bngsz kirja a Good morning szveget, flkvr szedssel. Hogyha az id tz rnl tbb, nincs felirat. Hogyha mr ksre jr, trhatjuk a felttelt pl. 22-re, ekkor este 10 ra eltt mg j reggelt fog kvnni a bngsz. Az if else feltteles rendelkezs Az if else feltteles rendelkezst akkor hasznljuk, hogyha a felttel betltetlensge (vagyis a benne foglalt mvelet NEM rtke) esetn is szeretnnk valamilyen rendelkezs teljeslst (kvetkezskppen egy, az elztl eltrt, hiszen egybknt nem kne felttelhez ktni a megvalsulst). Az if else feltteles rendelkezs mondattana: if (felttel-mvelet) { vgrehajtand kd no_1 } else { vgrehajtand kd no_2 } Hogyha teht a felttel-mvelet teljesl, a no_1, ellenkez esetben a no_2 kd lp rvnybe. Elz pldnkat teht most mr egy alternatv (10 ra utnra vonatkoz) dvzlssel is kiegszthetjk: var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("Good morning"); } else { document.write("Good day"); } This example demonstrates the If...Else statement. If the time on your browser is less than 10, you will get a "Good morning" greeting. Otherwise you will get a "Good day" greeting. 10 rnl korbban a bngsz teht Good morning-ot r ki, ellenkez esetben pedig Good day-t. Az if else if else feltteles rendelkezs

mely 0 s 1 kztti szmot generl, teht annak eslye, hogy rtke 0,5-nl nagyobb, 50%. Ennek megfelelen az albbi pldban szerepl JS hol a Learn Web Development!, hol pedig a Visit Refsnes Data! linket rja ki, egyenl esetszmban: var r=Math.random(); if (r>0.5) { document.write("Learn Web Development!"); } else { document.write("Visit Refsnes Data!"); } JavaScript feltteles rendelkezsek: Az if feltteles rendelkezs Az if feltteles rendelkezs tartalma csak akkor kerl vgrehajtsra, ha a felttel teljesl, vagyis logikai rtke IGAZ.

Modattana: if (felttel-mvelet) { vgrehajtand kd } Plda: var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("Good morning"); }

Az if else feltteles rendelkezs Az if else feltteles rendelkezst akkor hasznljuk, hogyha a felttel NEM rtke esetre is rendelkezni akarunk.

Mondattana: if (felttel-mvelet) { vgrehajtand kd no_1 } else { vgrehajtand kd no_2

} Plda: var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("Good morning"); } else { document.write("Good day"); }

Az if else if else feltteles rendelkezs Az if-re kvetkez alternatva vgrehajtst is felttelhez kthetjk, gy korltlan szm else, azaz tovbbi felttelt s azokhoz tartoz kd-varinst fzhetnk utna.

Mondattana (hrom lehetsggel): if (felttel-mvelet no_1) { vgrehajtand kd no_1 } else (felttel-mvelet no_2) { vgrehajtand kd no_2 } else { vgrehajtand kd no_3 } Plda: var d = new Date(); var time = d.getHours(); if (time=10 && time

var r=Math.random(); if (r>0.5) { document.write("Link-szveg1"); } else { document.write("Link-szveg2"); }

X. JavaScript a switch feltteles rendelkezs Mint lttuk, a JS feltteles rendelkezsei eltr felttelek mellett eltr kd vgrehaktshoz vezetnek. A switch feltteles rendelkezs A switch felttel szmos (a tbbszrs if else felttelekkel szemben nem hierarchikus) rendelkezsi lehetsg kzl vlasztja ki az elrt rtknek leginkbb megfelelt. A switch feltteles rendelkezs mondattana (hrom lehetsggel): switch(rtk) { case rtk_1:

vgrehajtand kd no_1 break;

case rtk_2: vgrehajtand kd no_2 break;

default: vgrehajtand kd no_3

} A switch rendelkezs felttelt (mely leggyakrabban egy vltoz) az rtk szval jelltk. A bngsz ezen rtk beolvassa utn vgignzi az sszes esethez tartoz rtket (itt rtk_1 s rtk_2). Hogyha ezek kzl valamelyik megegyezik a f-rtkkel, akkor az ahhoz tartoz rendelkezseket vgrehajtja. A break; sz bersval meggtolhatjuk, hogy a kd vgrehajtsakor a program tlfusson a kvetkez eset szvegre. Enlkl a program az sszes lehetsgnek megfelel parancssort vgrehajtja! A break; parancs teht a parancssor futst lelltja, azaz amikor Hogyha a felttelnek egy eset-rtk sem felel meg, akkor a program nem r ki semmit. Ezrt a switch lehetsges rtkeinek felsorolsa vgre berhatunk egy default, azaz alaprtelmezett kdot. Hogyha a program egyezs-tallat nlkl eljut idig, akkor brmilyen felttel esetn vgrehajtja e rendelkezst. Kvetkez pldnkban a bngsz eltr dvzletet r ki, attl fggen, hogy pp a ht mely napjn jrunk: var d = new Date(); theDay=d.getDay(); switch (theDay) { case 5: document.write("Finally Friday"); break; case 6: document.write("Super Saturday"); break; case 0: document.write("Sleepy Sunday"); break; default: document.write("I'm really looking forward to this weekend!"); }

This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc. Mint ltjuk, a d vltoz rtke itt is a bngsz-ra (letltskor) aktulis rtke, melybl a theDay vltoz a napra vonatkoz, 0 s 6 kztti szmot vlasztja ki. E vltozt a switch rendelkezs felttell vlasztva, a pnteknek megfelel 5-s szm esetn flkvr Finally Friday felirat jelenik meg az oldalon, 6=szombat esetn Super Saturday, 0=vasrnapnl pedig Sleepy Sunday. Hogyha a nap-szm 1 s 4 kztti (htf-csrtrtk), akkor az alaprtelmezett Im really looking forward to this weekend! szveg jelenik meg hogyha pedig az utols (default) lehetsget kitrljk, akkor semmi. JavaScript a switch feltteles rendelkezs: A switch felttel szmos (a tbbszrs if else felttelekkel szemben nem hierarchikus) rendelkezsi lehetsg kzl vlasztja ki az elrt rtknek leginkbb megfelelt.

Mondattana (hrom lehetsggel): switch(rtk, pl. vltoz) { case rtk_1 pl. egy szm:

vgrehajtand kd no_1 break;

case rtk_2 pl. msik szm: vgrehajtand kd no_2 break;

default: vgrehajtand kd, ha az elz kt case nem teljeslt

}

XI. JavaScript felugr ablakok A JS-ben hromfle felugr ablakot alkalmazunk: figyelmeztet, megerst s beviteli ablakokat. Figyelmeztet ablak A figyelmeztet felugr ablakok segtsgvel (=alert popup boxes) olyan adatokat kzlnk a felhasznlval, melyeket felttlenl meg kell ismernie. A figyelmeztet ablak megjelensekor a felhasznlnak meg kell nyomnia az OK gombot a tovbblpshz (az oldal tovbbi hasznlathoz). A figyelmeztet ablak mondattana: alert(zenet-szveg); Kvetkez pldnban egy gombot tallunk, ami kattintsra egy figyelmeztet ablakot nyit meg: function show_alert() { alert("Hello! I am an alert box!"); } A weboldal itt egyetlen beviteli mezbl ll, amit egy Show alert box felirat gomb. A gombra kattintva a bngsz vgrehajtja a show_alert nev fggvnyt. Ennek tartalma egy figyelmeztet-ablak megjelentse. Azaz az elbbi gombra kattintva, a fggvny vgrehajtsnak eredmnyekppen megjelenik egy prbeszdpanel, OK s X (=escape=kilps) gombbal, valamint srga htter, felkiltjeles hromszg mellett az zenettel: Hello! I am an alert box!. Mindaddig, mg az OK vagy X gombok kzl valamelyiket meg nem nyomjuk, a bngszt nem hasznlhatjuk (az ugyanis nem reagl az egrkattintsra, hanem figyelmeztetleg villogtatja a prbeszd-panelt). Megerst ablak A megerst ablakok (=confirm boxes) parancsok vagy adatok megerstsre ill. elfogadsra szolglnak. Megjelensk utn a felhasznlnak OK vagy Cancel gombot kell nyomnia a tovbblpshez. Az OK megnyomsa esetn a doboz mveleti rtke IGAZ, Cancel esetn pedig HAMIS. A megerst ablak mondattana: confirm(zenet-szveg); Kvetkez pldnban egy gombot tallunk, ami kattintsra egy megerst ablakot nyit meg: function show_confirm() {

var r=confirm("Press a button!"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } } Ebben az esetben a Show a confirm box gomb megnyomsakor a show_confirm fggvny parancssort hajtatjuk vgre. Ennek els rendelkezse definilja az r vltozt, aminek rtke megegyezik a felugr megerst ablak logikai rtkvel. A felugr ablak hrom gombbal (OK, Cancel s X), felirattal Press a button!, valamint egy kis krdjeles szvegbubork-kpecskvel rendelkezik. Amg nem nyomjuk meg valamelyik gombot, addig a bngsz a figyelmeztet ablaknl tapasztaltakhoz hasonlan, nem hasznlhat. Az OK megnyomsra egy You pressed OK! felirat figyelmeztet ablak nylik meg, melyet nyugtznunk kell a bngsz-beli munkafolyamat folytatshoz. A Canel megnyomsakor megjelen figyelmeztet ablak felirata: You pressed Cancel!. Mint ltjuk, a kt figyelmeztet ablak kzti vlasztst egy if else feltteles rendelkezssel oldjuk meg, ami a megerst ablak IGAZ rtke esetn (vagyis ha r==true) az els, minden ms esetben pedig a msodik figyelmeztetst jelenti meg, gy pl. hogyha az X gombot nyomjuk meg, a felirat akkor is az else esetnek megfelel You pressed Cancel!. Beviteli ablak A beviteli ablakokat ltalban akkor hasznljuk, ha a felhasznltl egy rtket (pl. jelszavat) akarunk krni az oldalra val belpshez. A beviteli ablakon OK, Cancel vagy X gomb megnyomsval juthatunk csak tovbb a megadott rtknek megfelel oldalra. Az OK gomb megnyomsra a beviteli ablak felveszi a bert rtket, a Cancel vagy X gomb esetben az rtke null (azaz tulajdonkppen res) lesz. A beviteli ablak mondattana: prompt(zenet-szveg,alaprtelmezett rtk); Kvetkez pldnban egy gombot tallunk, ami kattintsra egy beviteli ablakot nyit meg: function show_prompt() { var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="") {

document.write("Hello " + name + "! How are you today?"); } } Mint ltjuk, a weboldal betltsekor csak a Show prompt box felirat gombot tartalmazza. Erre kattintva a gp vgrehajtja a show_prompt fggvnyt. Ennek parancssora elszr definilja a name vltozt, melynek rtkl a beviteli ablak rtkt vlasztja. A beviteli ablak zenet-szvege Please enter your name, alaprtelmezett vlasza pedig Harry Potter lesz. A gomb megnyomsra teht felnylik az ablak, hrom gombbal, s a szvegbeviteli mezben az alaprtelmezett (Harry Potter) rtkkel. Hogyha az OK gombot megnyomjuk, az ablak (s gy a name vltoz is) felveszi a Harry Potter rtket; amit a parancssor if rendelkezsnek felttelvelhasonltunk ssze. Hogyha a name rtke nem null S nem res (azaz ), akkor a bngsz kirja a Hello name! How are you today? szveget, ahol a name rtke jelen esetben Harry Potter, s a gomb eltnik. Hogyha a Cancel vagy X gombot nyomjuk meg, az ablak rtke null, gy az if feltteles rendelkezs felttele HAMISnak bizonyulvn, nem kapunk feliratot. Hogyha kitrljk a szvegmezbl az alaprtelmezett rtket s nem runk be semmit, az ablak rtke res (), minek folytn megint nem kapunk feliratot. Amg a beviteli ablakon nem nyomunk meg egy gombot sem, addig itt sem folytathatjuk a bngszbeli munkamenetet. Ablak-zenetek sortrse Albbi pldnkban egy figyelmeztet ablak pldjn bemutatjuk, hogyan lehet az ablakok zenet-szvegbe sortrst rni: function disp_alert() { alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!"); } Mint ltjuk, a Display alert box felirat gomb megnyomsra a disp_alert fggvny megjelenti az alert prbeszdpanelt (figyelmeztet ablakot), melyben a Hello again! This is how we add line breaks to an alert box!

felirat jelenik meg. A figyelmeztet ablak zenet-szveg-rtkbe, a ketts idzjelekbe rt tbbi szvegrszlet kz a + \n + kifejezst rva, a krdses helyen sortrs lesz. Megerst s beviteli ablak-zenetek sortrsben is ugyangy jrunk el, pl.: confirm(Els sor + \n + Msodik sor); ill. prompt(Els sor + \n + Msodik sor,Alaprtelmezett rtk); JavaScript felugr ablakok: Figyelmeztet ablak:

alert(zenet-szveg); Megerst ablak:

confirm(zenet-szveg); Ktfle (true/false) logikai rtket vehet fel! Beviteli ablak:

prompt(zenet-szveg,alaprtelmezett rtk); A bert szveget vagy null-t vehet fel rtkknt!

Sortrs az zenet-szvegben: \n

alert(Els sor + \n + Msodik sor); confirm(Els sor + \n + Msodik sor); prompt(Els sor + \n + Msodik sor,Alaprtelmezett rtk);

Pldk: Megerst ablak:

function show_confirm() { var r=confirm("Press a button!"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } }

Bevitali ablak:

function show_prompt() { var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); } }

XII. JavaScript fggvnyek A JS-fggvnyek valamely esemny bekvetkezsekor vagy a parancssor meghvsra lpnek letbe. JavaScript fggvnyek Annak rtdekben, hogy a bngsz ne az oldal betltsekor hajtsa vgre az sszes JS-rendelkezst, annek egyes rszleteit fggvnyekbe zrhatjuk. A fggvnyekbe rt kdot a bngsz csak bizonyos felhaszli akci vagy egy klnll meghv-parancsra hajtja vgre. A fggvnyek az oldal brmely rszbl ill. ms oldalakrl is meghvhatk (feltve, hogy utbbi esetben a fggvny egy kls .js fjlban tallhat). A fggvnyek gy a dokumentumnek mind a fejrszben, mind pedig (szveg)testben megtallhatk lehetnek; azonban annak rdekben, hogy a bngsz biztos beolvassa, mieltt meghvsra kerlne, clszer a rszbe rni. Fggvnyek definilsa A fggvny-definils mondattana: function fggvny-nv(vltoz_1,vltoz_2,,vltoz_x) { vgrehajtand kd } A fggvny paramterei a vltoz_1vltoz_x-szel jellt vltozk ill. konkrt rtkek. A { s } kapcsos zrjel a fggvny(rtk) kezdett s vgt jelzi. A paramterekkel nem rendelkez fggvny neve utn is fel kell tntetnnk a zrjeleket! Ne feledkezznk meg a JS esetfggsrl, azaz a function szt mindig kisbetvel rjuk (klnben a JS nem mkdik), ill. a fggvny-nvre mindig azonos alakban hivatkozzunk (klns tekintettel a kis- vagy nagybetkre! Egy gyors plda Kvetkez pldnkban egy gomb megnyomsval meghvott fggvny figyelmeztet ablakot jelenttet meg a bngszvel: function displaymessage() { alert("Hello World!"); } By pressing the button above, a function will be called. The function will alert a message. Mint ltjuk, a Click me! Felirat gomb megnyomsakor a displaymessage fggvny megjelenti a Hello World! felirat figyelmeztet ablakot.

Hogyha a elembe rt alert(Hello World!); rendelkezst nem gyaztuk volna be egy fggvnybe (jelen esetben a displaymessage-be), akkor mr az oldal megjelentsekor vgrehajtotta volna a bngsz. Jelen esetben azonban a rendelkezsnek megfelel zenet csak a felhasznl gombnyomsra (azaz egy meghatrozott esemnyre) jelenik meg. A JS-esemnyekrl egy ksbbi fejezetben (JavaScript esemnyek) lesz sz. A return rendelkezs A fggvnyeket nemcsak parancsok vgrehajtsra, hanem rtkek talaktsra is hasznlhatjuk. A return rendelkezssel bellthatjuk, hogy a betpllthoz kpest milyen rtket szolgltasson vissza a fggvny. Teht az rtk-kpzsre hasznlt fggvnyeknek return rendelkezst tartalmaznak. A kvetkez pldnkban szerepl fggvny visszaszolgltatott rtke kt vltoz (a s b) szorzata: function product(a,b) { return a*b; } document.write(product(4,3)); The script in the body section calls a function with two parameters (4 and 3). The function will return the product of these two parameters. Mint ltjuk, a szvegtestbe rt document.write parancs meghvja a fejrszben lv product fggvnyt a 4,3 paramterekkel. A fggvny vgrehajtja a return a*b; parancsot a kt szmon, mint a ill. b rtken, s a bngsz ezt rja ki. Nem kell azonban kzvetlenl a product fggvnybe ill. annak meghvsba bernunk a vltozk aktulis rtkt, elegend azoka klnllan definilni: function product(a,b) { return a*b; } var q=5; var w=5;

document.write(product(q,w)); The script in the body section calls a function with two parameters (4 and 3). The function will return the product of these two parameters. Az rtkeket pedig magba a fggvnybe s belerhatjuk: function product(a,b) { a=3; b=4; return a*b; } document.write(product()); The script in the body section calls a function with two parameters (4 and 3). The function will return the product of these two parameters. vagy mg egyszerbben: function product() { return 3*4; } document.write(product()); The script in the body section calls a function with two parameters (4 and 3). The function will return the product of these two parameters. Persze az utbbi kt megoldsnak csak elvi jelentsg van.

A JavaScript vltozk rvnyessge A fggvnyeken bell (azok definilsakor) meghatrozott vltozk csak a fggvnyre vonatkoznak, azon kvl nem rvnyesek. A fggvny vgrehajtsa utn a vltoz trldik. Emiatt helyi vltozknak (=local variables) nevezzk ket. Mindezek rtelmben tetszleges szm fggvny tartalmazhat ugyanolyan nev helyi vltozkat, mivel ezek kzl mindegyik csak az adott fggvnyre vonatkozik, gy nam zavarja a tbbi mkdst. Ezzel szemben a fggvnyeken kvl definilt vltozk az sszes fggvnyre ill. egyb mveletre vonatkoznak. rvnyessgi idejk a definilsuktl az oldal bezrsig terjed. Ennek megfelelen a fggvny paramtereit a fggvny definilsakor helyi vltoz-nevekkel (pl. a s b) jellhetjk; majd a fggvnyre val hivatkozskor az ppen aktulis rtkeket (konkrt szmokat vagy ms vltozkat) helyettesthetnk be az elbbi vltozk vesszvel elvlasztott helyre; ezzel voltakppen a fgvny helyi vltozihoz rendelnk j rtkeket [azaz voltakppen definiljuk a fggvny helyi vltozi(nak rtk)t]. gy a fggvnyen kvl s bell eltr vltozk szerepelnek, melyek kztt a kapcsolatot a fggvny-paramterben elfoglalt helyk jelenti. Tovbbi pldk Els pldnkban az elbb emltett eljrst ltjuk, ti. a fggvnyre val kls hivatkozsban megadott (szveg) rtket felveszi a fggvny-paramterknt szerepl helyi txt vltoz, s ezt az rtket aztn egy figyelmeztet ablakban jelentteti meg a fggvny: function myfunction(txt) { alert(txt); } By pressing the button above, a function will be called with "Hello" as a parameter. The function will alert the parameter. Mint ltjuk, a Call function felirat gomb megnyomsra felnylik a txt vltoz rtkt (Hello) tartalmaz figyelmeztet ablak. A szveges rtket itt is idzjelbe tettk, ami (mivel a fggvny-meghvs maga is kets idzjelben van,) egyszeres. Msodik, igen egyszer pldnkban a fggvny meghvsa egy rtket szolgltat, melyet a dokumentumtestbe rt rendelkezs kir: function myFunction() { return ("Hello world!"); }

document.write(myFunction()) A felirat teht Hello world!. JavaScript fggvnyek: Fggvnyek definilsa:

function fggvny-nv(vltoz_1,vltoz_2,,vltoz_x) { vgrehajtand kd }

JS-vltozk rvnyessge:

Bels vltozk: a fggvnyek, feltteles rendelkezsek paramtereibe s kdjba rt vltozk, melyek mshol nem szerepelnek az oldalban. Csak az adott parancs-tmbn bell rvnyesek.

Kls vltozk: A JS-kdban tbb tmbben is elfordul vltozk, melyeket az egyms utn kvetkez mveletek az sszes ksbbire nzve fellrnak.

Fggvnyek meghvsa:

A return rendelkezs: Az elbbi ltalnos alak fggvnybe berva a return vltoz_1+vltoz2+vltoz_x; kdot, a fggvny felveszi a mvelet rtkt. Pldk: Fggvny definilsa:

function displaymessage() { alert("Hello World!"); }

A return rendelkezs:

function product(a,b) { return a*b; } document.write(product(4,3));

vagy: function product(a,b) { return a*b; }

var q=5; var w=5; document.write(product(q,w));

vagy: function product(a,b) { a=3; b=4; return a*b; } document.write(product());

vagy: function product() { return 3*4; } document.write(product());

Gombspecifikus figyelmeztets:

function myfunction(txt) { alert(txt); }

XII. JavaScript ciklusok: a for ciklus A JS ciklusok sorn egy adott kdot elre megadott szmban vagy egy felttel fennllsa alatt, ismtelten vgrehajtunk. JavaScript ciklusok Gyakran elfordul, hogy egy parancs-sorozatot egyms utn tbbszr is vgre kell hajtanunk. Ebben az esetben a kzel azonos tartalm rszletek egyms utni lersa helyett egyszerbb egy n. ciklust (=loop) belernunk a kdba. A JS-ben ktfle ciklus hasznlhat:

for a kd-tmb vgrehajtst bizonyos, elre megadott szm alkalommal ismtli. while a kd-tmb vgrehajtst egy elre megadott felttel teljeslsig ismtli.

A for cilkus A for ciklust akkor hasznljuk, ha elre tudjuk, hny alkalommal kell lefuttatnunk a kdot. A for ciklus mondattana: for (vltoz=kezdrtk;vltoz

Termszetesen a vgrehajtand HTML-kdot sszellt document.write parancsot egyetlen sorba is rhatjuk: document.write("This is heading " + i + ""); A fggvny-paramterek mdostsval meg is fordthatjuk a cmsorok kirsi sorrendjt: for (i = 6; i >= 1; i--) { document.write("This is heading " + i + ""); } JavaScript ciklusok: a for ciklus: JavaScript ciklusok:

for a kd-tmb vgrehajtst bizonyos, elre megadott szm alkalommal ismtli. while a kd-tmb vgrehajtst egy elre megadott felttel teljeslsig ismtli.

A for cilkus A for ciklust akkor hasznljuk, ha elre tudjuk, hny alkalommal kell lefuttatnunk a kdot.

Mondattana: for (vltoz=kezdrtk;vltoz

} do while ciklus:

i = 0; do { document.write("The number is " + i); document.write(""); i++; } while (i

document.write(""); } Explanation: The loop will break the current loop and continue with the next value when i=3. Ebben az esetben az if fggvny i==3 felttelnek teljeslsekor a continue; rendelkezs meggtolja a 3-as rtkre vonatkoz kirsi mvelet vgrehajtst, s a kvetkez (i=4-es) rtkkel jraindtja a ciklust. Ennek megfelelen a keletkez szmsor: The number is 0 The number is 1 The number is 2 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10 Mint ltjuk, a hrmas szm nem szerepel. A for fggvny szmolsi irnynak megfordtsakor is ugyanezt tapasztaljuk (csak a sorozat fordul meg). A break s continue rendelkezs: Break rendelkezs: break; A break; rendelkezs beolvassakor a bngsz lelltja az ppen fut kd-blokk vgrehajtst s ttr a kvetkezre. Continue rendelkezs: continue; A continue rendelkezs (pl. egy felttel teljeslsekor) csak az adott rtkre nzve lltja le a kd tovbbi rsznek vgrehajtst, s jraindtja a tmbt/ciklust a kvetkez rtkkel. Pldk: Break rendelkezs:

var i=0; for (i=0;i

document.write("The number is " + i); document.write(""); }

XV. JavaScript a for in rendelkezs A for in rendelkezs A for in rendelkezs kdja egy adott objektum (=object) bizonyos vltozjn (=variable) egyszer fut vgig. Mondattana: for(vltoz in objektum) { vgrehajtand kd } A kdot teht az objektum (pl. vltozk sorozata) minden egyes elemn vgrehajtjuk egyszer. gy az objektum sszes elemn megismrteljk a kd vgrehajtst. A for fggvny paramterl megadott vltoz lehet pl. egy nvvel nevezett vltoz, egy adattmb (=array) eleme vagy egy objektum jellemzje. A for in rendelkezs mkdst egy gyors pldn keresztl mutatjuk be: /*var x;*/ var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars) { document.write(mycars[x] + ""); } Mint ltjuk, a for fggvny itt a mycars adattmbt alkot mycars[x] vltozkon hajtja vgre a kiratsi rendelkezst. Mivel az utbbi egyttal a mycars[x] vltozkban szerepl x vltoz rtkeit, teht magt az x-et is, definilja, ezt felesleges kln megtennnk amint megjegyzs-jelek kz is tettk. A megjelen felirat: Saab Volvo BMW A for in rendelkezs: A for in rendelkezs kdja egy adott objektum bizonyos vagy sszes vltozjn vgrehajtsra kerl egyszer.

Mondattana: for(vltoz in objektum) { vgrehajtand kd }

Plda a for in rendelkezsre:

var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo";

mycars[2] = "BMW"; for (x in mycars) { document.write(mycars[x] + ""); }

XVI. JavaScript esemnyek A JS-esemnyek (=events) olyan (pl. felhasznli) akcik, melyeket a JS felismer. Esemnyek A JS hasznlatval dinamikus weboldalakat kszthetnk. Ennek rdekben fel kell ismernnk a felhasznl akciit, amire az n. JavaScript esemnyek (=events) nyjtanak lehetsget. Minden weboldal-elem rendelkezet bizonyos esemny-tpussal, amelyhez hozzrendelhetjk a JavaScript elindulst (vagy valamilyen, a korbbitl eltr formzst). Pl. egy nyomgomb esetben az onClick attribtum (s esemny-nv) segtsgvel utalhatunk a felhasznl gombnyomsakor vgrehajtand JS-parancssorra. A HTML-elemekhez trstott esemnyeket teht a HTML-tagekbe, attribtumknt rjuk. Pldk esemny-tpusokra:

egrkattints; weboldal vagy kp betltse; egr-rtints; beviteli mez kijellse (egy HTML-rlapon); (Submit) gomb megnyomsa; billenty-lets.

Az esemnyekkel legtbbszr JS-fggvnyekre utalunk, melyek nem futnak le mindaddig, mg az esemny be nem kvetkezik. Az sszes JavaScript-esemny megtallhat JavaScript tmutatnkban. Az onLoad s onUnload esemny Az onLoad s onUnload esemnyek az oldal betltsekor ill. bezrsakor kvetkeznek be. Az onLoad esemnyt gyakorta hasznljuk a felhasznl bngsz-tpusnak s -verzijnak ellenrzsre, hogy az ennek megfelel weboldal-verzit jelenthessk meg. Az onLoad s onUnload esemnyeket a felhasznl oldalra val be- vagy kilpsekor ksztend cookie-k kezelsre is gyakran alkalmazzuk. Pl. az els belpskor egy beviteli ablakkal rkrdezhetnk a felhasznl nevre, s eltrolhatjuk azt egy cookie-ban. Amikor a felhasznl legkzelebb megnyitja az oldalt, mr a sajt nevt tartalmaz dvzletet jelenthetnk meg szmra (az oldalon vagy egy felugr ablakban). Az onFocus, onBlur s onChange esemny Az onFocus, onBlur s onChange esemnyeket leginkbb (a felhasznl ltal megadott) rtkek validlsra hasznljuk, pl. rlapoknl. Albb az onChange esemny alkalmazsra ltunk pldt: Ha a felhasznl megvltoztatja a beviteli mez tartalmt, a bngsz az j tartalomra vonatkozlag lefuttatja a checkEmail fggvnyt. Az onSubmit esemny Az onSubmit esemny az sszes beviteli mezn rtknek, vagyis a teljes rlap-tartalom tovbbts eltti ellenrzsre szolgl. Albb ltunk erre egy pldt: Mint ltjuk, az onSubmit esemny-attribtumot a tagbe (s nem a submit gombba) rtuk. Az rlap tovbbtsa eltt a checkForm nev fggvny ellenrzi a bert adatokat. Hogyha azok helyesek, a

fggvny logikai rtke IGAZ, s az rlap tovbbtsra kerl. Ellenkez esetben a tovbbtsi mvelet megszakad. Az onMouseOver s onMouseOut esemny Az onMouseOver s onMouseOut esemnyeket leginkbb egyfajta l-nyomgombok ksztshez hasznljuk. Pl. az albbi link egr-rintsekor egy figyelmeztet ablak nylik meg (An onMouseOver event felirattal): Esemnyek: A JS-esemnyek olyan akcik, melyeket a JS felismer. Esemny-attribtumok: Kijells megsznse (pl. szvegmez): onblur Tartalom-vltozs: onchange Egr-kattints: onclick Dupla egrkattints: ondblclick Betltsi hiba: onerror Kijells: onfocus Billenty lenyomsa: onkeydown Billenty lenyomsa vagy lenntartsa: onkeypress Billenyty felengedse: onkeyup Egrgomb lenyomsa: onmousedown Egrkurzor elmozdtsa: onmousemove Egrrints megsznse: onmouseout Egrrints (kezdete): onmouseover Egrgomb felengedse: onmouseup Ablak tmretezse: onresize Szveg-kijells: onselect Weboldal betltse: onload Weboldal bezrsa: onunload Tartalom (rlap-adatok) tovbbtsa: onsubmit Pldk: onchange:

onsubmit:

onmouseover:

XVII. JavaScript try catch rendelkezs A try catch rendelkezssel kd-tmbkben lv hibkat derthetnk fel. JavaScript hibakeress (catching) Az Internetet bngszve tallkozhattunk olyan oldalakkal, melyeknl egy felugr ablak az oldal JS kdjnak mkds kzbeni hibjra figyelmeztetett bennnket, s feltette a Do you wish to debug? krdst. Az effle hibazenetek leginkbb a webes fejlesztk szmra hasznosak, a kznsges felhaszlk ilyenkor egyszeren elhagyjk az oldalt. A kvetkezkben bemutatjuk, hogy lehet elkerlni az ilyen helyzetek kialakulst s gy az oldal ltogatottsgnak cskkenst. A try catch rendelkezs A try catch rendelkezs try rszbe rt kdot a bngsz megprblja vgrehajtani (mint az oldal normlis tartalmt). Hogya ekzben valami hiba lp fel, akkor a catch rsz ennek okt megkeresi s egy hibazenetben kirja. Ezutn klnfle lehetsgeket ajnlhatunk fel a felhasznlnak a tovbblpsre. gy az oldal megtekintje rtesl a problma okrl s lehetsge van tovbb bngszni az oldalt. Mondattan: try { vgrehajtand kd } catch(err) { hiba esetn vgrehajtand kd } A try ill. catch szavakat itt is kisbetvel kell rnunk, klnben a JS nem mkdik! Pldk Els pldnkban egy gomb megnyomsakor Welcome guest! felirat figyelmeztet ablaknak kellene megjelennie, csakhogy az erre utal (try alatti) kd hibs: alert helyett adddlert szt tartalmaz: var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.description + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } }

Ezrt a catch fggvny lp letbe, aminek err paramtere (vltozja) felveszi azt a szveges rtket, melyet a bngsz a kd hiba-vizsglata utn kiad (A vrt elem objektum). Ezt az rtket a catch alatti parancssor bepti a txt vltoz rtkbe, majd a txt vltozt kiratja egy figyelmeztet ablakba. A figyelmeztet ablak nyugtzsa (OK) vagy kikapcsolsa (X) utn az oldal egyarnt tovbb hasznlhat. A txt rtkt megad kdot termszetesen ssze is vonhatjuk: var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n" + "Error description: " + err.description + "\n\n Click OK to continue.\n\n"; alert(txt); } } Msodik pldnkban az elzvel azonos hiba miatt egy megerst ablak jelenik meg. Az ablak dntsnk nyomn kelt logikai rtknek megfelelen (OK = IGAZ; Cancel/X = HAMIS) visszatrnk az oldalra, vagy a bngsz visszairnyt minket a honlapra. Mint ltjuk, a fggvnyek itt is a fejrszben, teht a dokumentumtesttl elklntve szerepelnek! var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n"; txt+="Click OK to continue viewing this page,\n"; txt+="or Cancel to return to the home page.\n\n";

if(!confirm(txt)) { document.location.href="http://www.w3schools.com/"; } } } A View message gomb megnyomsa s a try tmbbe rt kd hibs futsa utn mkdsbe lp a catch fggvny. Elszr az err vltoz felveszi a hibazenet-rtket, melyet azonban itt nem hasznlunk fel, hanem egy ltalnos szveget iratunk ki az addig res txt vltozba. Ezutn megnylik a confirm ablak, benne a txt vltoz rtkvel, azaz a catch alatti parancssorban megadott szveggel (There was an error on this page. Click OK to continue viewing this page, or Cancel to return to the home page.). Az if fggvnyt a megerst ablak logikai rtknek, teht a felhasznl dntsnek kirtkelsre hasznljuk. Hogyha a a confirm ablak rtke NEM (!) (nem confirm, azaz nem megerst), akkor a fggvny rtkbe rt parancssor szerint visszalpnk a kezoldalra (http://www.w3schools.com/). Hogyha az ablak rtke IGEN, akkor az if fggvny rtke NEM, teht a link nem lp rvnybe, s megmaradunk az eredeti oldalon. Ennek megfelelen az OK gomb megnyomsakor az eredeti oldalon maradunk, mg a Cancel vagy az X nyomsakor visszakerlnk a kezdoldalra. A throw rendelkezs A throw rendelkezst a try catch kiegsztseknt hasznlhatjuk, abban az esetben, hogyha (tbb) konkrt hiba-lehetsget s vlaszpst kvnunk megfogalmazni. Rszletesebben lsd a kvetkez fejezetet! A try catch rendelkezs: A try catch rendelkezs try rszbe rt kdot a bngsz megprblja vgrehajtani. Ha valami hiba lp fel, akkor ezt flbehagyva (a mr lefutott kd eredmnye lthat marad!) tugrik a catch rszbe rt kd vgrehajtsra.

Mondattana: try { vgrehajtand kd } catch(err) { hiba esetn vgrehajtand kd }

Pldk: Hibazenet:

function message() { try {

adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.description + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } }

Megerst ablak navigcis opcival:

function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n"; txt+="Click OK to continue viewing this page,\n"; txt+="or Cancel to return to the home page.\n\n"; if(!confirm(txt)) { document.location.href="http://www.w3schools.com/"; } } }

if(er=="Err3") { alert("Error! The value is not a number!"); } } Mint ltjuk, itt mr nem kerl kirsra res x-rtk, hanem az Err0 rtk err-vltozhoz a catch fggvnyben hozzrendelt figyelmeztet ablak jelenik meg (Error! The value is missing!).A parancssorokat is tstrukturltuk. A throw rendelkezs: A throw rendelkezs: A throw rendelkezssel tagoltabb tehetjk az if else rendelkezsek vgrehajtst, amennyiben kln, pontos hiba-lehetsgeket s vlaszlpseket fogalmazhatunk meg. Egyttal elrhetjk, hogy a felhaznl rendeltetsszeren hasznja az oldalt.

Mondattana: throw megolds

Az isNaN() fggvny: Az isNaN() fggvny paramterbe rt adat szm- vagy egyb jellegtl fggen HAMIS vagy IGAZ rtket vesz fel. Mondattana: isNaN(adat) Plda a throw rendelkezs s az isNaN() fggvny alkalmazsra:

var x=prompt("Enter a number between 0 and 10:",""); try { if (x>=0 && x10) { throw "Err1"; } else if(x

catch(er) { if(er=="Err0") { alert("Error! The value is missing!"); } if(er=="Err1") { alert("Error! The value is too high!"); } if(er=="Err2") { alert("Error! The value is too low!"); } if(er=="Err3") { alert("Error! The value is not a number!"); } }

XIX. JavaScript klnleges karakterek A JS ltal megjelentett szvegek egyszer formzst klnleges karakterekkel vgezzk, melyeket a parancssor tbbi elemtl fordtott perjelekkel (\) klntnk el. Klnleges karakterek parancssorba rsa Az egyszeres idzjeleket (=apostrophes), ktszeres idzjeleket (=quotes), sortrseket s egyb klnleges karaktereket fordtott perjellel (\) vlasztjuk el a parancssor tbbi elemtl. Lssuk pl. a kvetkez JS-kdot: var txt="We are the so-called "Vikings" from the north."; document.write(txt); Mint korbban tapasztalhattuk, a JS rtkfolyamok idzjeltl idzjelig tartanak; gy a fenti szvegbl csak a We are the so-called rszlet fog megjelenni. A problma orvoslsra a szvegen belli idzjelek el fordtott perjeleket runk, miltal azokat a bngsz klnleges karakterknt rtelmezi: var txt="We are the so-called \"Vikings\" from the north."; document.write(txt); A parancssor eredmnye teht a teljes szveg lesz: We are the so-called Vikings from the north. Az albbi tblzatban szefoglaltuk a szveg-folyamokba (=text strings) perjelek utn rhat, klnleges karakterr vlhat rsjeleket s jelentsket: Kd Jelents (karakter a megjelentett szvegben)

\' Egyszeres idzjel ()

\" Ktszeres idzjel ()

\\ Fordtott perjel (\)

\n Sortrs bekezdsek kztt (=new line)

\r Sortrs bekezdsen bell (=carriage return)

\t Tabultor

\b Trls (=backspace)

\f Eltols (=form feed, erdetileg a papr sornyi eltolsa a mtrixnyomtatban)

Klnleges karakterek: A JS szveges rtkeibe (Szveg) rhat klnleges karakterek kdolsa: Egyszeres idzjel (): \ Ktszeres idzjel (): \ Fordtott perjel(\): \\ Sortrs bekezdsek kzt: \n Sortrs bekezdsen bell: \r Tabultor: \t Trls: \b Eltols: \f

XX. JavaScript tmutat Az albbiakban sszefoglaljuk a JavaScript rsakor szem eltt tartand fbb alapismereteket. A JavaScript esetfgg! Pl. a myfunction s a myFunction nev fggvny nem azonos egymssal; ugyangy a myVar vltoz sem egyezik meg a myvar-ral. A JS teht esetfgg, gy oda kell figyelnnk a kis- s nagybetk kvetkezetes hasznlatra a vltozk, objektumok s fggvnyek definilsakor s meghvsakor. Azonban, a HTML-lel s CSS-sel ellenttben, ezek nevei tartalmazhatnak nagybetket. Szkz A JavaScript (A HTML-hez s CSS-hez hasonlan) sszevonja a tbbszrs szkzket; gy azokat csak a kd olvashatsgnak javtsra rdemes alkalmaznunk, pl. a kvetkez kt rendelkezs ugyanazt jelenti: name="Hege"; name = "Hege"; br utbbi olvashatbb. Kd-sorok trdelse Mint lttuk, nem kell minden rendelkezst kln sorba rnunk, hogyha pontosvesszkkel vlasztjuk el ket. A megfordtott eset is lehetsges, azaz egyetlen rendelkezst tbb sorba is rhatunk. Mivel a sortrs (enter) a kdban egyttal a rendelkezs vgt jelenten, ebben az esetben fordtott perjeleket kell tennnk a sorok vgre, pl.: document.write("Hello \ World!"); A kd-sort azonban csak az egyes alkotelemeken bell szabad megtrni, azok hatr nem; teht az elbbi pldhoz hasonl, de a fggvny s annak paramtere kzt megtrt rendelkezs mr hibs lenne: document.write \ ("Hello World!"); (A legutbbi kd teht hibs!) JavaScript tmutat (alapszablyok):

A JS esetfgg, gyeljnk a nagy- s kisbetk kvetkezetes hasznlatra! A vltozk nevei _-jellel vagy betvel kezddjenek! A JS-ben a szkzk sszeolvadnak, azok csak az olvashatsg rdekben alkalmazhatk! Az egyes rendelkezsek soron bell pontosvesszkkel elvlaszthatk, vagy enterrel j

sorba elklntendk. Egyetlen rendelkezst tbb sorba trdelhetnk, a \ jel segtsgvel. A trdels csak az

elemeken bell trtnhet, pl.: document.write("Hello \ World!");

JavaScript II. KNYV: OBJEKTUMOK

I. JavaScript objektumok Bevezets A JavaScript egy n. objektum-orientlt programozsi nyelv [=Object Oriented Programming language (OOP)]. Az OOP-nyelvek lehetv teszik sajt objektumok s vltoz-tpusok definilst. Objektum-orientlt programozs A JS egy objektum-orientlt programozsi nyelv (OOP), azaz tetszleges objektumok s vltozk definilsra ad lehetsget. Sajt objektumok definilsval azonban csak ksbb foglalkozunk, a halad szint lersban (III. knyv). Egyelre a JS alaprtelmezett objektum-tpusaival s azok hasznlatval ismerkednk meg rszletesebben. Az objektum (=object) egy klnleges sttusz adat, melyre jellemzk (=properties) s mdszerek (=methods) vonatkoznak. Jellemzk A jellemzk az objektummal kapcsolatos rtkek. A kvetkez pldban a length (=hosszsg) jellemz segtsgvel kiratjuk egy szveg-folyam karaktereinek szmt (belertve a szkzket is): var txt="Hello World!"; document.write(txt.length); Elszr definiljuk a txt vltozt s annak rtkt, majd kiratjuk a txt vltoz length jellemzjt. Mivel a Hello World! felirat 12 karakterbl ll, a weboldalon megjelen szveg: 12. Mdszerek A mdszerek (=methods) az objektumokon vlgrehajtott akcik. A kvetkez pldban az str objektumon (vltozn) vgrehajtjuk a toUpperCase() mdszert (fggvnyt), miltal annak tartalma csupa nagybetvel jelenik meg a weboldalon: var str="Hello world!"; document.write(str.toUpperCase()); Mint ltjuk, elszr definiljuk az str vltozt s annak rtkt, majd kiratjuk azt toUpperCase() mdszer mellett: HELLO WORLD! eredmnnyel. Objektumok bevezets: length (szveghosszsg) mdszer: .length Pl.: var txt=Hello World!; var len=(txt.length)=12 toUpperCase (nagybets) mdszer: .toUpperCase() Pl.: var str=Hello World! document.write(str.toUpperCase()); = HELLO WORLD!

II. JavaScript a string objektum A JS string objektum szvegrszletek kezelsre val. Nhny gyors plda Az albbiakban nhny pldt tallunk a string objektum alkalmazsi lehetsgeire. Els pldnkban egy szveg-rszlet (=string) karakter-szmt meghatroz JS-et ltunk: var txt = "Hello World!"; document.write(txt.length); Mint ltjuk, ez megegyezik a bevezetben ltottal. Msodik pldnkban szvegrszletek formzst ltjuk: var txt = "Hello World!"; document.write("Big: " + txt.big() + ""); document.write("Small: " + txt.small() + ""); document.write("Bold: " + txt.bold() + ""); document.write("Italic: " + txt.italics() + ""); document.write("Fixed: " + txt.fixed() + ""); document.write("Strike: " + txt.strike() + ""); document.write("Fontcolor: " + txt.fontcolor("green") + ""); document.write("Fontsize: " + txt.fontsize(6) + ""); document.write("Subscript: " + txt.sub() + ""); document.write("Superscript: " + txt.sup() + ""); document.write("Link: " + txt.link("http://www.w3schools.com") + ""); document.write("Blink: " + txt.blink() + " (does not work in IE, Chrome, or Safari)"); Elszr definiljuk a txt vltozt (azaz a formzand objektumot) s annak rtkt.

Ezutn az elrni kvnt hatsra utal feliratokkal egytt kratjuk az elbbi rtket, melynek megjelenst a kvetkez jellemz-fggvnyekkel llatjuk be:

big() (nagy betmret), small() (kis betmret), bold() (flkvr), italics() (dlt), fixed() (Monotype gpi kd), strike() (thzott), fontcolor(szn) (bizonyos szn), fontsize(6) (pl. 6-os betmret), sub() (als indexbe rt), sup() (fels indexbe rt), link() (link-formzs), blink() (villog).

Harmadik pldnk szvegrszleteit (string objektumait) a toLowerCase() s toUpperCase() mdszerekkel (fggvnyekkel) kis- ill. nagybetkkel jelenttetjk meg: var txt="Hello World!"; document.write(txt.toLowerCase() + ""); document.write(txt.toUpperCase()); Mint ltjuk, a txt vltoz rtke itt is Hello World!. Ezt az els parancs toLowerCase() fggvnye csupa kis, a msodik parancs toUpperCase() fggvnye pedig csupa nagybetvel jelenti meg: hello world! HELLO WORLD! Harmadik pldnkban a match() mdszerrel (fggvnnyel) keresnk szavakat egy objektum szvegben: var str="Hello world!"; document.write(str.match("world") + ""); document.write(str.match("World") + ""); document.write(str.match("worlld") + ""); document.write(str.match("world!")); Mint ltjuk, itt az str vltoz rtke Hello world!. A parancssor tovbbi soraiban a world, World, worlld s world! betsszettelekre keresnk a match() segtsgvel, aminek eredmnye a kvetkez weboldal: world null null

world! Amint ltjuk, a msodik s harmadik keress nem eredmnyezett tallatot, gy annak rtke null. Nmikppen kibvthetjk a keresst (a knnyebb kirtkelhetsg rdekben): var txt="Hello world!"; var find1="world"; var find2="vorld"; var find3="World"; var find4="orl"; var van="Megtallhat." var nincs="Nincs tallat." A keresett sz: A keress eredmnye: document.write(find1) if(txt.match(find1)==find1) { document.write(van); } else { document.write(nincs); } document.write(find2) if(txt.match(find2)==find2) { document.write(van); }

else { document.write(nincs); } document.write(find3) if(txt.match(find3)==find3) { document.write(van); } else { document.write(nincs); } document.write(find4) if(txt.match(find4)==find4) { document.write(van); } else { document.write(nincs); } Mint ltjuk, itt az eredmnyeket a keres-fggvnnyel egytt egy HTML-tblzatba foglaltuk. Mivel ugyanazt a keressi utastst itt tbbszr lefuttatjuk, clszer ciklust alkalmazni:

var txt="Hello world!"; var find=new Array(); find[0]="world"; find[1]="vorld"; find[2]="World"; find[3]="orl"; var van="Megtallhat." var nincs="Nincs tallat." A keresett sz: A keress eredmnye: for (x in find) { document.write("" + find[x] + ""); if(txt.match(find[x])==find[x]) { document.write(van); } else { document.write(nincs); } document.write(""); } Az eredmny megegyezik az elz kdval; azaz a sz megtallhatsgt tblzatos formban ratjuk ki; a klnbsg csupn az, hogy a megismtld mveleteket egy for ciklussal vgeztettk el, s nem a kd manulis megismtlsvel. Negyedik pldnkban a replace() mdszer segtsgvel egy szveg-lncolat megegadott betsszetteleit msra cserljk ki: var str="Visit Microsoft!"; document.write(str.replace("Microsoft","W3Schools"));

Mint ltjuk, az str vltoz eredeti, Visit Microsoft! rtkbl a Microsoft betsszettelt W3Schools-ra cserltk, de ugyangy kicserlhettk volna a szveg s betit z-re is: var str="Visit Microsoft!"; document.write(str.replace("s","z")); Ekkor azonban az eredmny Vizit Microsoft!, azaz csupn az els s-t cserltk le. Ezt bizonytja a kvetkez kd is: var str="Visit Microsoft Microsoft!"; document.write(str.replace("Microsoft","ZULU")); melynek eredmnye: Visit ZULU Microsoft!; teht csak az els Microsoft-ot cserltk le. Mindkettt lecserli azonban a kvetkez kd: var str="Visit Microsoft Microsoft!"; str=str.replace("Microsoft","ZULU"); str=str.replace("Microsoft","ZULU"); document.write(str); Mint ltjuk, itt az str vltoz rtkt ktszer is jradefiniljuk, elszr az els, msodszor pedig a msodik Microsoft szt lecserlve. gy a vgl kirsra kerl rtk: Visit ZULU ZULU! A replace() fggvny egyszeri vgrehajtsval teht csak egy (a legelrbb ll) szt (bet-sszettelt) cserlhetnk le a szveg-stringbl; ha a kvetkezket is le akarjuk cserlni, akkor a parancsot meg kell ismtelni. Ezt megtehetjk egy while ciklussal. A kdot mindaddig ismteltetjk, mg a match() mdszerrel megvizsglva az eredmnyt, annak rtke null-tl klnbzne; azaz mg volna benne lecserlend elem. Az ehhez szksges kd: var str="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nunc nunc, interdum accumsan, laoreet nec, ultrices eget, eros.

Phasellus laoreet, nibh ac lacinia rhoncus, magna turpis suscipit lectus, in posuere neque leo at purus. Nullam felis velit, volutpat ut, consectetuer id, placerat ac, est. Nunc vel pede eu felis facilisis pharetra. Nam ac magna. Praesent ullamcorper facilisis massa. Vivamus imperdiet, velit nec rutrum vestibulum, tortor turpis vestibulum velit, rhoncus tincidunt metus arcu vel justo. Suspendisse ligula arcu, dignissim at, sollicitudin ac, pellentesque suscipit, lectus. Vivamus nibh. Suspendisse nec tellus. Fusce sed arcu a nibh consectetuer fringilla. Pellentesque bibendum risus. Ut tincidunt, massa vitae posuere tincidunt, turpis turpis sodales velit, ut congue felis nisl a metus. Aenean ac quam. Praesent vestibulum, arcu sed laoreet viverra, orci nisl faucibus urna, sit amet euismod ante velit in ipsum."; document.write(str); while (str.match("o")!==null) { str=str.replace("o","ZULU"); } document.write(str); A bngsz a fenti oldal futtatsakor ktszer is kirja a Lorem ipsum-szveget; egyszer az eredeti alakban, msodszor (kzvetlenl az els utn) pedig gy, hogy minden o bet helyn a ZULU betcsoport ll. Hatodik pldnkban egy szveg-stringbeli sz els elfordulsi helyt ratjuk ki az indexOf() mdszerrel: var str="Hello world!"; document.write(str.indexOf("d") + ""); document.write(str.indexOf("WORLD") + ""); document.write(str.indexOf("world")); A JS futtatsnak eredmnye: 10 -1 6 Jelezve,hogy a d bet a 11., a world sz pedig a 6. bet-helyen tallhat a szvegben, mg a WORLD sz nincs benne (helye ezrt -1). Mint ltjuk, azon szavaknak, melyek a szvegben a nem fordulnak el, a hely-szmuk -1; ezrt az indexOf() fggvnyt a match()-hoz hasonlan szavak jelenltnek feldertsre is hasznlhatjuk. String-objektum kziknyv A string objektumokra vonatkoz sszes jellemzt s mdszert (s rvid jellemzsket, pldkkal) megtalljuk string-objektum kziknyvnkben. A string objektum A string objektumokat (pl. vltozk rtkeknt szerepl) szvegrszletek (jellemzkkel s mdszerekkel val) kezelshez hasznljuk.

Pl. a length jellemz segtsgvel kirathatjuk a stringben lv karakterek szmt: var txt="Hello world!"; document.write(txt.length); Az eredmny: 12. Hasonlkppen a toUpperCase() mdszerrel a string tartalmt csupa nagybetvel rathatjuk ki: var txt="Hello world!"; document.write(txt.toUpperCase()); Az eredmny: HELLO WORLD!. Ugyanezt rthetjk el az albbi kddal is: var txt=Hello world!; txt=txt.toUpperCase(); document.write(txt); A string objektum: A szveg-rtkkel br objektumokat (pl. vltozkat) sringeknek nevezzk. Definilsa:

var vltoz-nv=Szveg; vagy var vltoz-nv=new String(Szveg);

Mdszerek stringekre:

HTML-formzs A vltoz-rtk betit formz fggvnyek (melyek pl. kiratskor a stringet a megfelel HTML-tagbe gyazva adjk vissza), pl.: vltoz-nv.bold() Tpusai:

anchor() (knyvjelz) link() (hiperlink) big() (nagy betmret) small() (kis betmret) toUpperCase() (nagybets) toLowerCase() (kisbets) bold() (flkvr) italics() (dlt) fixed() (monospace gpi kd) strike() (thzott) fontcolor(szn) (bizonyos szn) fontsize(6) (pl. 6-os betmret) sub() (als indexbe rt) sup() (fels indexbe rt) link() (link-formzs) blink() (villog).

Karakter-szmll A vltoz-rtk karaktereinek szma (szkzkkel s rsjelekkel egytt, pl.: vltoz-nv.length

Sz/betsszettel-egyezs keresse A stringet a match() mdszerrel megvizsglva, a kifejezs rtke tallat esetn megegyezika keresett szval, egybknt null: vltoz-nv.match(keresett_sz)

Sz/betsszettel-hely keresse A stringet a search() mdszerrel megvizsglva, a kifejezs rtke tallat esetn megegyezika keresett sz helyszmval, egybknt -1. Az els bet helyszma 0. Mondattan: vltoz-nv.search(keresett_sz)

Sz/betsszettel cserje A replace() mdszerrel a string egy megadott szavnak els elfordulst lecserlhetjk egy msik szra. Az sszes megadott sz vagy bet(sszettel) lecserlshez a replace() mdszert ismtelgetni kell. Mondattana: vlzot-nv.replace(lecserlend_sz,berand_sz)

Els elfordulsi hely megllaptsa Az indexOf() fggvny felveszi egy keresett sz vagy bet els elfordulsnak sorszmt. Az els bet sorszma 0. Ha a kifejezs nem tallhat, rtke -1. Mondattana: vltoz-nv.indexOf(keresett_sz)

Utols elfordulsi hely megllaptsa Az lastIndexOf() fggvny felveszi egy keresett sz vagy bet utol elfordulsnak sorszmt. Az els bet sorszma 0. Ha a kifejezs nem tallhat, rtke -1. Mondattana: vltoz-nv.lastIndexOf(keresett_sz)

Adott helyszm bet msolsa A charAt() mdszer rtkknt felveszi a paramterbe rt helyszm bett. Az els bet helyszma 0. Mondattan: vltoz-nv.charCodeAt(0)

Adott helyszm bet Unicode-msolsa A charAt() mdszer rtkknt felveszi a paramterbe rt helyszm bet Unicode-rtkt. Az els bet helyszma 0. Mondattan: vltoz-nv.charCodeAt(0)

Stringek egyestse A concat() mdszer paramterbe rt stringek tartalmnak egymsutnjt hozzfzi a hivatkozott kezd-stringhez, s ezt veszi fel rtkl. Pl.: vltoz_1.concat(vltoz_2,vltoz_3,,vltoz_x)

Unicode egyestse stringg A String.fromCharCode() mdszer paramterbe rt Unicode-szmokka jellt betket string-knt adja vissza, pl.: vltoz-nv=String.fromCharCode(65,66,67);

Megadott kezd- s vgrtk szvegrszlet kimsolsa (stringbl) A slice() mdszer a string kijellt rszlett veszi fel rtkknt. A kijelst az els (kezd)rtknl kezdjk, s a msodik (opcionlis, zr)rtknl fejezzk be. Az els bet rtke 0. A kijell-rtkek negatvak is lehetnek, ekkor a string vgtl szmtanak. Pl.: vltoz.slice(kezdrtk,vgrtk).

Megadott (pozitv) kezd- s vgrtk szvegrszlet kimsolsa (stringbl) A substring() mdszer gyakorlatilag megegyezik a slice()-szal, csak abban klnbzik, hogy az index-rtkek nem lehetnek negatvak! Mondattan: vltoz.substring(kezdrtk,vgrtk).

Megadott hosszsg szvegrszlet kimsolsa (stringbl) A substr() mdszer a string egy kezdrtktl a vgig vagy megadott karakter-hosszig tart rszlett adja vissza. A kijellst a kezdrtknl kezdjk, s a msodik paramternek megfelel szm karakteren (ill. a teljes htralv rszen t) folytatjuk. Az els paramter negatv is lehet, ekkor a string vgtl szmt. Mondattan: vltoz.substr(kezdrtk,hossz).

Teljes rtk visszaadsa A valueOf() mdszer a string teljes szvegt visszadja. E mdszert nem kell kln kirnunk; a vltoz-nv megadsakor a bngsz a httrben futtatva, e fggvnnyel vteti fel annak rtkt. Mondattana: vltoz-nv.valueOf()

String talaktsa array-j A split() mdszerrel egy stringet a kijellt karaktereknl feldarabolva s vesszkkel elvlasztva megadott tag-szm array-j (rtk-listv) alaktunk. Hogyha a kpezhet array-elemek szma nagyobb, mint a kpzend, akkor az array csak az els tagokat fogja tartalmazni, mg meg nem telik. Mondattan:

vltoz.split(kijellt_elvlaszt-karakter,kpzend_array-elemek_szma) Mintaplda: Egy vltoz nagybets kiratsa ktfle mdszerrel: 1.: var txt="Hello world!";

document.write(txt.toUpperCase()); 2.: var txt=Hello world!;

txt=txt.toUpperCase(); document.write(txt);

III. JavaScript a date objektum A JS date objektum dtumok s idpontok kezelsre val. Nhny gyors plda Els pldnkban a Date() mdszer segtsgvel kiratjuk az aktulis (gpi) dtumot: var d=new Date(); document.write(d); Azaz a d vltoz rtkl a Date() fggvny aktulis rtkt vlasztjuk, majd kiratjuk azt: Tue Jan 18 14:34:39 UTC+0100 2011 Msodik pldnkban a getTime() mdszerrel kiszmoljuk, mennyi id telt el 1970.I.1. ta: var d=new Date(); document.write(d.getTime() + " milliseconds since 1970/01/01"); Elszr ismt az aktulisid-rtkkel definiljuk a d vltozt, majd vgrehajtjuk a kvetkez rendelkezst; gy milliszekundumokban megkapjuk az eltelt idt. Mint ltuk, a kezd-dtumot ill. mrtkegysget nem tudjuk befolysolni (hiszen azt csak statikus szvegknt adtuk meg), az ra mindig 1970.I.1-jtl milliszekundumokban adja meg az idt. Harmadik pldnkban a setFullYear() mdszerrel belltjuk a bngsz bels rjtl kapott dtumot megvltoztatjuk: var d = new Date(); d.setFullYear(1992,10,3); document.write(d); Elszr a d vltozhoz rendeljk a bels ra aktulis rtkt, majd a dtumot tlltjuk (2010.II.18-rl) 1992.X.3-ra. Az gy megjelen ra-rtk: Tue Nov 3 14:47:57 UTC+0100 1992 Mint ltjuk, az idjelzs tbbi eleme nem vltozott. Negyedik pldnkban az eredeti, UTC-nek (=Coordinated Universal Time=Egyezmnyes Vilgid) megfelel id-formtumot olvashatbb szveg-stringg alaktjuk:

var d=new Date(); document.write("Original form: "); document.write(d + ""); document.write("To string (universal time): "); document.write(d.toUTCString()); Mint ltjuk, elszr kiratjuk (az Oroginal form: szveg mg) a dtumot (vagyis a d vltoz rtkt) az eredeti UTC-alakban, majd jra kiratjuk, de mr d.toUTCString() mdszerrel. A kt felirat ennek megfelelen: Original form: Tue Jan 18 15:53:59 UTC+0100 2011 To string (universal time): Tue, 18 Jan 2011 14:53:59 UTC tdik pldnkban a getDay() mdszerrel kirjuk a ht napjnak nevt: var d=new Date(); var weekday=new Array(7); weekday[0]="Sunday"; weekday[1]="Monday"; weekday[2]="Tuesday"; weekday[3]="Wednesday"; weekday[4]="Thursday"; weekday[5]="Friday"; weekday[6]="Saturday"; document.write("d.getDay()= "+d.getDay()+""); document.write("Today is " + weekday[d.getDay()]); Az els rendelkezs rtelmben a d vltozhoz rendeljk az UTC-idrtket; ezutn a weekday vltoz rtkl megadjuk a httag new Array(7)-et, ahol a szmmal jellt array-tagokhoz, mint vltozkhoz, egyenknt hozzrendeljk a nap-neveket. Vgl kiratjuk a napnv azonostsra szolgl getDay() fggvny rtkt, melyet a d vltoz (aktulis) rtkbl kpeznk. Ez keddi napon 2. Legvgl pedig kiratjuk a napnevet is, ti. kivlasztjuk a weekday arraybl a d.getDay() fggvny rtknek (2) megfelel weekday[2] vltozt, s kiratjuk annak rtkt (Tuesday). A megjelen felirat teht: d.getDay()= 2 Today is Tuesday Hatodik pldnkban egy digitlis rt ksztnk weboldalunkra: function startTime()

A date objektum belltsa utn mdszereket hajthatunk vgre rajta. A legtbb mdszer a helyi vagy globlis (UTC/GMT) id-adat lekrdezsre vagy mdostsra szolgl. Az sszes dtumot (pontosabban idtartamot) az 1970. janur 1. 00:00:00 UTC-idponthoz kpest, milliszekundunokban adjk meg, egy napot elrsszeren 86.400.000 milliszekundumosnak tekintve. Mivel egy nap hossza ennl valamivel hosszabb (lsd: szknapok) azta tbb n. msodperc-(elre)ugrst kellett vgrehajtani az UTC-idben. Nhny plda dtum-belltsra: var today = new Date() var d1 = new Date("October 13, 1975 11:13:00") var d2 = new Date(79,5,24) var d3 = new Date(79,5,24,11,33,0) Az gy belltott dtumok megjelentsre alkalmas kd: var today = new Date() var d1 = new Date("October 13, 1975 11:13:00") var d2 = new Date(79,5,24) var d3 = new Date(79,5,24,11,33,0) document.write(today+""); document.write(d1+""); document.write(d2+""); document.write(d3); A kd eredmnye sorrendben: Tue Jan 18 18:45:15 UTC+0100 2011 Mon Oct 13 11:13:00 UTC+0200 1975 Sun Jun 24 00:00:00 UTC+0200 1979 Sun Jun 24 11:33:00 UTC+0200 1979 Dtumok belltsa A Date() objektumra vonatkoz mdszerekkel knnyev tllthatjuk a dtum-rtket. Az albbi pldban a Date() objektumnak egy bizonyos rtket adunk: var myDate=new Date(); myDate.setFullYear(2010,0,14); Hogyha lefuttatjuk a kvetkez parancssort: var myDate=new Date(); myDate.setFullYear(2010,0,14);

document.write(myDate); ltjuk, a generlt felirat Thu Jan 14 18:50:43 UTC+0100 2010 lesz. Ennek megfelelen lthat, hogy a setFullYear mdszerrel valban csak a bert rtkeket (v/h/nap) vltoztattuk meg, a tbbi tovbbra is az rajelbl addik. Egy msik pldaknt a jelenhez kpest t nappal elrelltjuk a dtumot: var myDate=new Date(); myDate.setDate(myDate.getDate()+5); E parancssorban elszr belltjuk a myDate vltozt, melynek rtkl a jelenlegi gpi dtumot vlasztjuk. Ezutn a myDate rtkl szolgl dtumot tlltuk, a setDate() fggvnnyel. Enknek rtke myDate.getDate()+5. A getDate() fggvny visszaadja (=returns) a myDate rtkbl a hnap napjt (jelen esetben 18), majd ehhez hozzadunk 5-t. Ennek eredmnye 23; azaz a myDate-re vonatkoz setDate() fggvny ezt a nap-szmot lltja be a vltozban. Hogyha a hozzadssal a hnap rtke is megvltozna, azt a program automatikusan figyelembe veszi. Hogyha a myDate vltozt a fentiekkel analg mdon kiratjuk, a kvetkezt kapjuk: Sun Jan 23 19:00:14 UTC+0100 2011 A jelenlegi id pedig: Tue Jan 18 19:00:39 UTC+0100 2011 teht szmtsunk helyes volt. A fenti msodik rendelkezsi ki is tagolhatjuk: var myDate=new Date(); var day=myDate.getDate()+20 myDate.setDate(day); document.write(myDate + ""); document.write(myDate.getDate() + ""); document.write(new Date() + ""); document.write(new Date().getDate()); ekkor a setDate() fggvny paramtert kln sorban szmtjuk ki, s egy vltoz (day) formjban helyettestjk be az sszefggsbe. Vgl kiratjuk a myDate vltozra vonatkoz getDate() mdszer rtkt is, mely azonban ekkor, azaz a myDate.setDate() rendelkezs utn 18-rl (februr) 7-re vltozott, ami igazolja, hogy a setDate() fggvny a kisebb ideg