Programozás | JavaScript, Ajax » JavaScript alapfogalmai, változói, adattárolási elemei, vezérlési szerkezetei, Window objektuma

JavaScript alapfogalmai, változói, adattárolási elemei, vezérlési szerkezetei, Window objektuma i#19. Az Internet gyors fejlődése során egyre nagyobb és extrább igények merültek fel, hogyan is lehetne az eddigi statikus oldalakat intelligenssé, azaz dinamikussá tenni. A Javascript nyelvet a Netscape fejlesztette ki, hogy a html-oldalakat dinamikussá tegye. A Netscape 20 már tartalmazta a JavaScript-et. Amikor azt mondjuk, hogy a böngésző tartalmazza a JavaScript nyelvet, az azt jelenti, hogy a böngészőnek része az az interpreter, mely értelmezi és lefuttatja a JavaScript kódokat, a futtatás közvetlenül a forráskódból történik. 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. A

nyelv főbb tulajdonságai: • Interaktivitás: A felhasználó által létrehozott események kezelhetősége. • Biztonság: A JavaScriptben nincs olyan utasítás vagy függvény arra, amivel elérhetővé válnának a kliens fájlai. • Böngészőfüggetlenség: Már minden nagyobb böngésző támogatja a JavaScript használatát. • Tehermentesíti a kiszolgálót: Már az űrlapok elküldésekor leellenőrizheti, hogy minden űrlapmező ki van-e töltve és ha nincs akkor már kliens oldalon figyelmezteti a felhasználót.(Viszont nem helyettesíti a szerveroldali ellenőrzést!) • Megkülönbözteti a kis- és nagy betűket • Az utasításokat ;-vel zárjuk le • //egysoros megjegyzés /*többsoros megjegyzés/ Forráskód elhelyezése • A HTML fájlban: <SCRIPT [LANGUAGE=nyelv]> és </SCRIPT> tagok között Az ide helyezett kódot a böngésző azonnal végrehajtja. Természetesen ha itt függvényt definiálunk, akkor az csak definiálásra kerül,

végrehajtásra nem! Mivel a régebbi böngészők nem érthetik ezt a parancspárt, ezért szokás közéjük kerülő Javascript forrást HTML-megjegyzésbe rakni, ami nem akadályozza meg a fordításukat, és a régi böngészők sem írják ki (ezek számára használható a<NOSCRIPT>, </NOSCRIPT> parancspár, amik közé írt szöveget viszont csak ők jelenítik meg). A LANGUAGE alapértelmezésben "JavaScript", ha későbbi verziókat használunk, akkor lehet még "JavaScript1.1", "JavaScript12" is • Külön fájlba: Ez esetben <SCRIPT SRC=fájlnév></SCRIPT> parancspárt kell alkalmazni. A fájlnak ekkor tiszta Javascriptet kell tartalmaznia! • Eseménykezelőbe Lehetséges bizonyos objektumoknak megfelelő eseménykezelőt megadni. Ezek a HTML-definícióban egy újabb attribútumként jelennek meg, amik értéke maga a Javascript forráskód, karakterláncként. Ha az itt szereplő kifejezés értéke false, akkor az

objektum funkciója (pl: űrlap elküldése) nem lép működésbe; ahhoz, hogy minden működjön benne (pl: státuszsor átállítása), true-nak kell lennie. Az itt elhelyezett kód esetében az aktuális objektum (lásd: this) az, aminek az eseménykezelőjét definiáljuk. Az eseménykezelők nem függvények, Javascript kódból nem hívhatók! Viszont lehetséges őket értékadással átállítani; ekkor az objektumnak az eseménykezelő kisbetűs nevének megfelelő mezőjéhez kell a megfelelő függvény nevét hozzárendelni. • Javascriptes entitásba: Hasonlóan a HTML-esekhez (tehát ez HTML-parancsokban is alkalmazható!), a következő módon: &{kifejezés};. Ekkor a kifejezés kiértékelődik, mint Javascript, és az eredmény felhasználásra kerül, mint HTML-ben. • Internet-címekben, a javascript: előtaggal: Ha egy tetszőleges internet-címben ezzel az előtaggal Javascript forráskódot adunk meg, akkor az kiértékelésre kerül, és az eredmény adja

meg a tényleges címet. Ha a kifejezésnek nincs értéke, akkor nem történik meg a hivatkozás Futtatási környezete: A JavaScript esetében a futási környezet jellemzően egy webböngésző (JavaScriptmotorja). Windowsos környezetben futtatható a wscript.exe segítségével, vagy Linuxos környezetben nodejs-szel futtatható. 1 Utasítások: a Javascript alapvető egységei, amelyek egyetlen műveletet hajtanak végre. Az utasítás végét pontosvesszővel jelezzük. i#19. Változók: névvel rendelkező tárolók, amelyek adatokat (pl. számot, karakterláncot vagy objektumot) tárolnak A változók megadásakor nem kell kitérnünk a változók típusának meghatározására, a JavaScript ugyanis a változóban eltárolt érték alapján következteti ki annak típusát. Ezért a változódeklaráció is kimerül egy var változónév utasítás megadásában, sőt akár a vart is elhagyhatjuk. Ez utóbbi esetben az első értékadás során jön létre a nevesített

változó. A változónevek : -az angol abc kis-és nagybetűi , a 0-9 számjegyeket és aláhúzásjelet ( ) használhatjuk. - a változó nevében nem szerepelhet szóköz, sem pedig írásjel - első karakterének mindig betűnek vagy aláhúzásjelnek kell lennie - jelentősége van a kis- és a nagybetűknek - a változónév hossza nem korlátozott, de egy sorban el kell férnie A változó hatókörei: 1. Általános v globális változók: hatókörük a teljes programra (és az adott HTML dokumentum összes többi programjára) kiterjed. Ezeket bárhol lehet használni, akár a függvényekben is 2. Helyi változók: hatókörük egyetlen függvényre terjed ki, csak abban a függvényben használhatjuk, amelyikben létrehoztuk őket. Adattárolók Adattárolók: számokat, betűt, betűket, Adattárolók lehetnek: állandók vagy változók. szavat, szavakat vagy ezek kombinációját tárolják. Objektum: egy olyan struktúra a JavaScriptben és minden más objektum

orientált vagy objektum alapú nyelvben, ami tulajdonságokból (elemváltozók) és metodusokból (elemfüggvények) épülnek fel. A tulajdonságok adják meg egy objektum állapotát. A tulajdonság legtöbbször JS változó Ezek a tul lehetnek csak olvashatók és írhatók is. Az objektum orientáltság lényege abban rejlik, hogy ezeket a tul csak adott objektum függvényei módosíthatják közvetve vagy közvetlenül. A JS objektum alapú, ami azt jelenti, hogy a valódi objektum orientáltságból nem valósit meg minden követelményt, pl. nincs benne öröklődés Pár fontosabb objektum: • Array: JavaScriptben a tömbök az Array osztály példányai. Deklarálásuk ugyanolyan egyszerű, mint a változóké. Létrehozásukkor a nevük után [ és ] között, vesszővel elválasztva lehet felsorolni az egyes elemeket. nevek=["Botond","Dömötör","Timót","Gertrúd"]; A tömbök egyes elemeire a Javaban megszokott módon lehet

hivatkozni. nevek[0] (Botond) nevek[3] (Gertrúd) A tömbök méretét a length mezőből tudjuk kinyerni. neveklength (4) • Date: dinamikus idő- és dátumkezelés, Date osztály példányain keresztül valósul meg. A pontos idő egy példányának létrehozása a new operátorral történik. ido=new Date(); Az így létrehozott objektumból az egyes időegységeket előre beépített függvények segítségével tudjuk kinyerni. ora=idogetHours(); A Date osztály leggyakrabban használt függvényei: getDate() Az adott hónap adott napja. getDay() Az adott hét adott napja. (Vasárnap=0) getFullYear() Az adott év. getHours() Az adott óra. getMinutes() Az adott perc. getMonth() Az adott hónap. (Január=0) getSeconds() Az adott másodperc. toLocaleString() Az adott dátum és idő szöveges formában. toLocaleTimeString() Az adott idő szöveges formában. toLocaleDateString() Az adott dátum szöveges formában. 2 • • • • • • i#19. Window: Az aktuális

ablak az alapértelmezett objektum, ezért nem szükséges kiírnunk a nevét, amikor a függvényeire vagy változóira hivatkozunk. Új ablakot az open() metódussal tudunk nyitni A metódus paramétereként bármilyen címet megadhatunk, így gyakorlatilag egy linket készítve oldalunk általunk választott eleméből, de minek is hivatkoznánk előre létrehozott oldalakra. uj=open(); Az így létrehozott oldal forrásába ugyanúgy bármit beleírhatunk, mint a kiinduló oldaléba, csupán meg kell adnunk az ablak nevét, hogy egyértelmű legyen, hova szánjuk az adott utasítást. uj.documentwrite("<h1>Sikerült!</h1>"); Az ablakot szükség esetén a close() metódussal tudjuk bezárni. Minden window objektumnak van még néhány beépített ablaka is, melyet az alábbi metódusokkal nyithatunk meg: alert() Figyelmeztető ablak. confirm() Megerősítő ablak. (OK=true, Mégse=false) prompt() Szövegbeviteli ablak. (OK=szöveg, Mégse=null) A Window

osztálynak része továbbá két időzítő függvény is, és két hozzájuk tartozó időzítést megszakító metódus. A setTimeout(utasítás,idő) függvény segítségével az első paraméterként megadott utasítás, a második paraméterként megadott idő elteltével fog végrehajtódni. Az utasítás bármilyen szkript lehet, akár egy másik metódus is, az idő pedig egy ezredmásodpercben megadott szám. Az időzítést a clearTimeout(időzítő) metódussal lehet megszakítani. Ehhez azonban a setTimeout(utasítás,idő) függvény visszatérési értékét el kell tárolni egy változóba, azaz nevesítenünk kell, ugyanis csak így tudunk rá hivatkozni, mint időzítőre. time=setTimeout("alert(hiba)",3000); clearTimeout(time); az idő milliszekundumban Az időzítők másik típusát a setInterval(utasítás,idő) függvény hozza létre, mely annyiban különbözik a setTimeout(utasítás,idő) függvénytől, hogy a megadott idő elteltével újrakezdi

az időzítést, és addig ismétli az időzített utasítás végrehajtását, míg a clearInterval(időzítő) metódus ezt meg nem szakítja. time=setInterval("alert(hiba)",3000); clearInterval(time); Element: Egy elem firstChild nevű mezőjében az elembe ágyazott első elem azonosítója található. Az elem értéke pedig a nodeValue mezőjében található. Mivel ezek mezők, az értékük nem csupán lekérhető, hanem meg is változtatható. Így ennek a két mezőnek a révén bármelyik elembe tetszőleges szöveget beágyazhatunk, akár az oldal betöltődése után is. document.getElementById("s2")firstChildnodeValue="heterarchikus(sokközpontú)";Az innerHTML mezővel mindezt még egyszerűbben megvalósíthatjuk, sőt még többet is. Az innerHTML ugyanis nem csak szimpla szöveget, hanem a böngésző által lefordítható forráskódokat is tartalmazhat. document.getElementById("s2")innerHTML="<center>Az adott év

kiíratása<br>new Date()<br>getFullYear()<br>document.write()</center>"; Az adott év kiíratása new Date() getFullYear() document.write() RegExp: Az illesztőkifejezés a sztringek kezelésének hatékony eszköze. Egy mintát illesztünk a sztringre, és megvizsgáljuk, hogy a kifejezés illeszkedik-e rá vagy sem. Ha igen, akkor cserét is hajthatunk végre az adott ponton. Többnyire űrlapok tesztelésére, mintakeresésre és szűrésre használjuk Function: használata olyan esetben lehet hasznos, amikor egy függvényt szeretnénk meghívni, melyhez változó számú paraméter tartozik Math: matematikai függvényeket és konstansokat tartalmaz. MathPI a PI értékét tartalmazza kor kerulete = 2*sugarMath.PI; , MathRandom() véletlenszámot ad vissza, mely 0 és 1 közé esik Ha gyakran kell hivatkozni a Math objektumra, akkor alkalmazható a with utasítás, ekkor nem kell mindig kiírni, a Math-ot. with (Math){ kor terulet = PI * r r; x = r

sin(beta); c = sqrt(aa + bb); } String: String objektumot a következő módon hozhatunk létre: String objektum neve = new String(sztring); A substring(mettől,meddig) függvény ugyanúgy, mint a Javaban egy karakteres konstans egy kijelölt részét adja vissza, és ugyanúgy mint ott a meddig megadása nem kötelező. A meddig index megadásával azt írjuk elő, hanyadik legyen az a karakter, amelyik már ne kerüljön kiemelésre. Elhagyása esetén ez a szöveg utolsó utáni karaktere lesz, tehát a mettől sorszámú karaktertől kezdődően a teljes szöveg kiemelésre kerül. "Zakariás"substring(2,5) (kar) "Zakariás"substring(6) (ás) E függvény mellett a length mező lehet még fontos, mely teljes mértékben megegyezik az Array osztály azonos nevű mezőjével. "Zakariás"length (8) 3 Metódus: A JavaScriptben a metódusokat, azaz az eljárásokat és a függvényeket egyaránt a function metódusnév(változónevek) {.} utasítással

hozzuk létre Ha a metóduson belül megadjuk annak visszatérési értékét egy return kulcsszó után, akkor a metódus automatikusan függvényként lesz értelmezve, egyébként pedig eljárásként. i#19. Vezérlési szerkezetek • Blokkosítás { utasítás; . utasítás; }A kapcsos zárójelek közé írt utasítások egy utasításnak számítanak. • Elágazás: if (feltétel) utasítás;[else utasítás;] Ha a feltétel igaz, akkor az első utasítás hajtódik végre. Ha nem, és adott az else ág, akkor az. • Többszörös elágazás: switch (kifejezés) { case címke: utasítás; break; case címke: utasítás; break; . default: utasítás; } Ez csak a JavaScript 12-től érvényes utasítás! Kiértékelődik kifejezés, majd sorban összehasonlítódik a címkékkel. Ha valamelyikkel megegyezik, akkor az ahhoz tartozó ág végrehajtódik. Ha egyik címkével sem egyezik, és adott a default címke, akkor az. Ha nem adunk meg break utasításokat, akkor a

vezérlés átfolyik a következő ágba • Ciklus: for ([kezdő kifejezés]; [ciklusfeltétel]; [léptető kifejezés]) utasítás; Kiértékelődik a kezdő kifejezés, majd amíg a feltétel igaz, végrehajtódik az utasítás és a léptetés. • Hátultesztelő ciklus: do utasítás; while (feltétel); Végrehajtódik utasítás mindaddig, amíg a feltétel hamis nem lesz. • Elöltesztelő ciklus: while (feltétel) utasítás; Amíg a feltétel igaz, végrehajtódik az utasítás. • Címkézett utasítások: címke: utasítás; break [címke]; continue [címke] A címkézetlen break kilép a legbelső ciklusból. Címkével a címkézett utasítást fejezi be A continue rátér a ciklus következő iterációjára. Címkézve az adott ciklust folytatja Űrlapok Az űrlap lehetővé teszi, hogy a felhasználó adatokat vihessen be. Ezt sokféle objektum segíti Mindegyiknek van egy type mezője, ami a bevitel típusát adja meg; ez egy string, legtöbbször az objektum

típusa, kivétel a select objektum: itt lehet "select-one", vagy "select-multiple". Űrlap megadása: HTML-ben <FORM> az űrlap elemei</FORM> TARGET=a célablak neve ACTION=a szerver címe METHOD=GET | POST a végrehajtás módja. Ettől függően a kezelő program egy környezeti változóban, vagy a standard bemenetről olvassa az űrlap értékét ENCTYPE= a kódolásTípusa. Alapban application/x-www-form-urlencoded onSubmit=elküldés esetén onReset=törlés esetén action az action mező elements az űrlapon szereplő objektumok encoding az enctype mező length az űrlapon szereplő objektumok száma method a method mező target a target mező submit() elküldi reset() törli button: Egy gomb, amire rá lehet kattintani. <INPUT TYPE=button> VALUE= a címkéje onClick=kattintás esetén value a címkéje click() egy rákattintást szimulál checkbox: Egy kétállapotú kapcsoló. Ha be van kapcsolva, akkor az értéke elküldődik a

szervernek <INPUT TYPE="checkbox"> címkéje VALUE= az értéke. Ezt küldi el a szervernek CHECKED ha alapban be van ikszelve onClick=rákattintás esetén checked értéke mutatja, hogy be van-e ikszelve defaultChecked pedig, hogy alapértelmezésben be van-e value az értéke 4 i#19. FileUpload: Egy fájlt lehet vele feltölteni. <INPUT TYPE="file">VALUE=a kezdeti tartalma value a tartalma Hidden: Ez a mező nem jelenik meg, de az értékét megkapja a szerver. <INPUT TYPE="hidden"> VALUE= a tartalma value a tartalma Password: Mint a text, de a begépelt karakterek helyén csillagok látszanak. <INPUT TYPE="password"> VALUE=kezdeti tartalma SIZE=a mező szélessége defaultValue a kezdeti tartalma value a tartalma focus() fókuszálja blur() elhagyatja select() kijelöli Radio: Több azonos nevű objektumot megadva, ez egy objektumként lesz kezelve a kiválasztás szempontjából - azaz mindig pontosan egy lehet

kiválsztva. Egy radio nevét megindexelve kapjuk meg az objektumokat (a form elements nevű tömbje is külön tárol minden gombot!). <INPUT TYPE="radio">címkéje VALUE= az értékeCHECKED ha ez van alapban kiválasztva checked mutatja, hogy ki van-e választva defaultChecked az alapértelmezés length a lehetőségek száma value az értéke Reset: Alapállapotba rakja az űrlapot. <INPUT TYPE="reset">VALUE= a címkéje onClick=rákattintás esetén value a value mező select: Egy, vagy több lehetőséget lehet kiválasztani a segítségével. Az opciók megadhatók HTML-ből is, vagy később Javascript program segítségével is hozzáadhatók. <SELECT>opciók SIZE=látható opciók száma MULTIPLE ha többet is ki lehet választani onBlur=elhagyás esetén onChange=változtatás esetén onFocus=fókusz esetén length a lehetőségek száma options a lehetőségek selectedIndex a (z első) kiválasztott száma option: Egy opció a select

objektumhoz. <OPTION> címkéje VALUE= az értéke SELECTED ha alapban ki van választva Submit: Elküldi az űrlapot. <INPUT TYPE="submit"> VALUE= a címkéje onClick=rákattintás esetén Text: Egy egysoros szövegbeviteli mező. <INPUT TYPE="text"> VALUE= a kezdeti tartalma SIZE= a mező szélessége MAXLEN= a beírható szöveg maximális hossza onSelect=kijelölés esetén textarea: A text többsoros változata. <TEXTAREA>kezdeti tartalma</TEXTAREA> ROWS= a sorok száma COLS= az oszlopok száma onSelect=kijelölés esetén 5