610 likes | 718 Views
JavaScript I. Összeállította: Kosztyán Zsolt kzst@vision.vein.hu. Mi a JavaScript?. A JavaScriptet a Netscape fejlesztette ki. Ez egy olyan parancsnyelv, amely segítségével létrehozhatunk interaktív Web-oldalakat. A JavaScript nem Java!.
E N D
JavaScript I Összeállította: Kosztyán Zsolt kzst@vision.vein.hu
Mi a JavaScript? • A JavaScriptet a Netscape fejlesztette ki. Ez egy olyan parancsnyelv, amely segítségével létrehozhatunk interaktív Web-oldalakat.
A JavaScript nem Java! • A JavaScript nem tévesztendő össze a Java-val! A hasonló név ellenére a Java önálló programozási nyelv, szükség van fordító programra, amivel a forráslistából bájtkódot készíthetünk. A JavaScript pedig parancsnyelv, futtatásához nem kell más, mint egy böngésző, amely kezelni képes a JavaScriptet. • Hasonlóság azonban nem csak a névben van, ugyanis a két nyelv szintaxisa a C nyelvhez hasonlatos, a manapság divatos objektumorientáltságot pedig egyikük sem kerülhette el.
JavaScript futtatása • Egy JavaScriptet "értő" böngészőre van szükségünk. Ez lehet akár a Netscape Navigator, amely a 2.0-as verzió óta ismeri a JavaScriptet, vagy a Microsoft Internet Explorer (3.0 vagy magasabb verzió). Mivel ezek a böngészők a legelterjedtebbek, így a legtöbb ember képes JavaScriptet futtatni.
JavaScript beágyazása HTML dokumentumba • A JavaScript utasítások közvetlenül a HTML oldalba kerülnek be. Lássunk erre egy egyszerű példát: <HTML><BODY>Ez itt egy hagyományos HTML dokumentum.<BR> <SCRIPT LANGUAGE= "JavaScript"> document.write("Ez már JavaScriptben íródott!!!<BR>") </SCRIPT>Ez a sor újra HTML!<BR></BODY></HTML>
JavaScript beágyazása HTML dokumentumba • Mi történik akkor, ha a böngészőnk régebbi, JavaScriptet nem ismerő típus? Mivel a böngésző nem ismeri a <SCRIPT> elemet, ezért azt nem veszi figyelembe, és a közötte lévő utasításokat szövegként jeleníti meg a HTML dokumentumon belül. Természetesen van megoldás ennek elkerülésére. Amint az ismert, a HTML dokumentumokba megjegyzéseket az alábbi módon tehetünk: <!-- A megjegyzés eleje .................................... A megjegyzés vége -->
JavaScript beágyazása HTML dokumentumba • Javítsuk ki az előbbi egyszerű példát az alábbi módon: <HTML><BODY>Ez itt egy hagyományos HTML dokumentum.<BR> <SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtése, amennyiben szükséges document.write("Ez már JavaScriptben íródott!!!<BR>") // A kód elrejtésének vége --> </SCRIPT>Ez a sor újra HTML!<BR></BODY></HTML>
JavaScript beágyazása HTML dokumentumba • Fontos megemlíteni, hogy a JavaScript nem védhető meg a "kíváncsiskodó szemek" elöl, hiszen a HTML dokumentumok forrása megtekinthető a legtöbb böngésző segítségével, a JavaScript utasítások pedig ennek közvetlen részét képezik.
JavaScript - események • A programoknak gyakran kell reagálnia olyan eseményekre, mint billentyű lenyomása, vagy az egér mozgatása. Az események és eseménykezelők a JavaScript programozásban is nagyon fontosak. Az ilyen események kezeléséhez különféle függvények, eseménykezelők léteznek. • Tekintsük a következő példát. Azt akarjuk, hogy a JavaScript programunk reagáljon valamilyen eseményre, pontosabban létrehozunk egy gombot, amire kattintva egy ablak jelenik meg a képernyőn. Ez gyakorlatilag azt jelenti, hogy az ablaknak egy kattintás-esemény (click-event) hatására kellene megjelenni. Az itt használt eseménykezelő neve: onClick. <form> <input type="button" value="Kattints rám!" onClick="alert('Hello!')"> </form>
JavaScript - események • Általánosan így írható le az eseménykezelés szintaxisa: • <HTML_elem eseménykezelő_neve=”JavaScript_utasítás”>
JavaScript - függvények • Minden programozási nyelvben, így a JavaScript-ben is rendkívül fontos szerepet kapnak a függvények. A nyelv számos függvényt tartalmaz, például a korábban megismert alert() függvény is ezek közül való. A függvényeknek adhatunk át paramétereket, amelyekkel dolgozni fognak (az alert() függvény paramétere az idézőjelek között átadott szöveg volt, amit a függvény egy üzenetablakban jelenített meg). Mi magunk is írhatunk függvényeket, hogy a nagyobb, összetettebb feladatokat kisebb, jobban kezelhetőbb részekre bontsuk. Ezek a függvények szintén átvehetnek paramétereket, sőt értéket is adhatnak vissza, csakúgy, mint más progamozási nyelvekben.
JavaScript - függvények • A function kulcsszót közvetlenül a függvény neve követi, majd zárójelekben a paramétereket adjuk meg. Ez a függvény két paraméterrel rendelkezik, x-szel és y-nal (amelyek típusát nem adtuk meg). A függvény törzse kapcsos zárójelek között van, és ide helyezzük el a függvényhez tartozó utasításokat.
JavaScript - függvények • JavaScript-ben a változók neve betűvel, vagy aláhúzással (_) kezdődhet, és a függvénynevekhez hasonlóan szintén különbség van kis- és nagybetűk között. Változót a var kulcsszóval, majd a változó nevének megadásával deklarálhatunk. Deklaráláskor az értékadó operátor (=) segítségével kezdőértéket is rendelhetünk a változókhoz.
JavaScript - függvények <HTML><SCRIPT LANGUAGE="JavaScript"><!-- A JavaScript kód elrejtése, amennyiben szükséges function szamol_1(x,y) {var eredmeny = x + y; document.write("<H2>" + x + " + " + y + " = " + eredmeny + "</H2><BR>");} function szamol_2(x,y) {return x+y;} szamol_1(23,11); szamol_1(17,27); szamol_1(3,45); document.write("<H2>13 + 5 = " + szamol_2(13,5) + "<H2>");//--> </SCRIPT></HTML>
A JavaScript felépítése • A JavaScript egy HTML oldal minden elemét, és a böngésző ablakát is objektumként kezeli. Minden ilyen objektum rendelkezik tulajdonságokkal (adatmezőkkel) és megfelelő függvényekkel, amelyeken keresztül az oldal szinte minden tulajdonságát megváltoztathatjuk, a böngésző egyes részeit programozhatjuk. A böngésző ablaka a JavaScript szemszögéből egy ún. window objektum (window-object). Ez bizonyos elemeket tartalmaz, mint például a státuszsort. Az ablak belsejébe HTML oldalt tölthetünk, amit a JavaScript a document objektumon keresztül kezel. A document objektum az aktuálisan betöltött oldalt kezeli, és ezáltal egyike a leggyakrabban használt és legfontosabb objektumoknak. Segítségével módosíthatjuk az oldalunk megjelenését, például beállíthatjuk a színeket!
A JavaScript felépítése <HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> <!-- A kód elrejtése, ha szükséges function sarga(){document.bgColor="#FFFF00"; } function kek(){document.bgColor="#00FFFF"; } function eredeti(){document.bgColor="#FFFFFF";} // --> Elrejtés vége</SCRIPT></HEAD> <BODY><CENTER><P><FORM> <INPUT TYPE="button" VALUE="Sárga háttér" onClick="sarga()"> <INPUT TYPE="button" VALUE="Kék háttér" onClick="kek()"> <INPUT TYPE="button" VALUE="Eredeti háttér" onClick="eredeti()"> </FORM></P></CENTER></BODY></HTML>
A JavaScript felépítése • Megváltoztathatók a HTML oldalunk egyéb színbeállításai is, ha a document objektum más adatmezőjének adunk az előbbihez hasonló módon értéket.
A JavaScript felépítése • A HTML objektumok is a document objektum mezői. HTML objektumok például az oldalon megjelenő képek, linkek, űrlapok. <HTML><HEAD><TITLE>Példa oldal</TITLE></HEAD> <BODY BGCOLOR=#FFFFFF> <CENTER><IMG SRC="pelda1.jpg" NAME="pelda_pic1"><P> <FORM NAME="pelda_urlap">Név: <INPUT TYPE="text" NAME="nev" VALUE="JavaScript"><BR><BR>Cím: <INPUT TYPE="text" NAME="cim" VALUE="www.netscape.com"><BR><BR> <INPUT TYPE="button" VALUE="Kattints rám” NAME="gomb" onClick="alert('Most megnyomtál! :-)')"> </FORM><P><P><IMG SRC="pelda2.jpg" NAME="pelda_pic2"><P><P><A HREF="http://www.netscape.com">Nézd meg a Netscape JavaScript oldalait is!</A></CENTER></BODY></HTML>
A JavaScript felépítése • A hivatkozás az egyes objektumok típusa szerint megy. Az oldalon előforduló első képhez az images[0] névvel férhetünk hozzá, a másodikhoz az images[1] névvel és így tovább. A linkek a links[0], links[1], links[2]... néven szerepelnek. Az űrlapokat forms[0], forms[1], forms[2]..., míg az űrlapok egyes mezőit (pl. szövegmező, listaablak, gombok) forms[X].elements[0], forms[X].elements[1], forms[X].elements[2]... névvel érhetjük el, ahol X valamely űrlap sorszáma. • az első képre: document.images[0] • az űrlap Név nevű szövegmezőjére: document.forms[0].elements[0] • az űrlap Cím nevű szövegmezőjére: document.forms[0].elements[1] • az űrlap gombjára: document.forms[0].elements[2] • a második képre: document.images[1] • a linkre: document.links[0]
A JavaScript felépítése • Azt, hogy egy hivatkozás révén milyen műveleteket végezhetünk el az egyes HTML objektumokkal, különböző JavaScript referencia könyvek tartalmazzák. Mi néhány alapvető műveletet nézünk csak meg. Hivatkozzunk az űrlapunk első szövegmezőjére, olvassuk ki a tartalmát a nev nevű változóba! Ezt megtehetjük az alábbi utasítással (figyeljünk arra, hogy kis- és nagybetű itt is számít): • nev = documents.forms[0].elements[0].value;
A JavaScript felépítése <SCRIPT LANGUAGE="JavaScript"> <!– Elrejtés function Udvozol(){ var name = document.forms[0].elements[0].value; alert("Szia "+name);} // --> </SCRIPT> </HEAD><BODY> <FORM NAME="urlap"> Név: <INPUT TYPE="text" NAME="nev"> <INPUT TYPE="button" VALUE="Írd be a neved, majd kattints rám!" onClick="Udvozol()"> </FORM></BODY></HTML>
A JavaScript felépítése • Jogosan felmerülhet a kérdés, hogy nagyobb HTML dokumentumok esetén van-e egyszerűbb módszer a hivatkozásra, hiszen nem könnyű sok link, kép, űrlapmező esetén kiszámolni, hogy pontosan melyikkel szeretnénk dolgozni. Természetesen erre is van lehetőség, mégpedig úgy, hogy minden HTML objektumnak önálló, egyedi nevet adok. <INPUT TYPE="text" NAME="nev" VALUE=""><BR> <FORM NAME="uj"><INPUT TYPE="text" NAME="szoveg" VALUE="www.microsoft.com"> <INPUT TYPE="button" VALUE="Új szöveg" onClick="document.uj.szoveg.value='www.yahoo.com';"></FORM>
A location objektum • Ez az objektum reprezentálja a betöltött HTML dokumentum címét. Ha például betöltöttük a Netscape oldalát, akkor a location objektum href mezője (location.href) ennek az oldalnak a címét fogja tárolni (www.netscape.com). Ehhez a mezőhöz új értéket rendelve új oldalt tölthetünk be a böngészőbe: <FORM><INPUT TYPE="button VALUE="Altavista" onClick="location.href='http://altavista.com';"></FORM>
Keretek létrehozása HTML dokumentumban • Egyre gyakrabban találkozni olyan oldalakkal, amelyek kereteket tartalmaznak. A Netscape a 2.0-ás, az Internet Explorer a 3.0-ás változatától tudja kezelni a kereteket. A keretek felosztják a böngésző ablakát, és mindegyik rendelkezik az alábbi alapvető tulajdonsággokkal: • meg tud jeleníteni egy önálló HTML dokumentumot • rendelkezhet névvel, amely segítségével hivatkohatunk rá • automatikusan méretezi önmagát az ablak méretének változása során, valamint engedélyezhetjük vagy megtilthatjuk, hogy a felhasználó saját maga változtathassa a keretek méretét • a JavaScript is hatékonyan együt tud működni a keretekkel.
Keretek létrehozása HTML dokumentumban <HTML><FRAMESET ROWS="50%,*"> <FRAME SRC="oldal1.htm" NAME="keret1"> <FRAME SRC="oldal2.htm" NAME="keret2"> </FRAMESET></HTML>
Keretek létrehozása HTML dokumentumban • Sorok helyett oszlopokba is rendezhetjük a kereteket, ekkor a ROWS attribútum helyett COLS attribútumot használjunk. A kettőt természetesen kombinálhatjuk is: <HTML> <FRAMESET ROWS="50%,*"> <FRAMESET COLS="33%,33%,*"> <FRAME SRC="pelda.htm"> <FRAME SRC="pelda.htm"> <FRAME SRC="pelda.htm"> </FRAMESET> <FRAMESET COLS="50%,*"> <FRAME SRC="pelda.htm"> <FRAME SRC="pelda.htm"> </FRAMESET> </FRAMESET> </HTML>
Keretek kezelése JavaScript-ben • Tekintsük az első példát, amelyben két keretet hoztunk létre. Hogyan jelenik meg ez a JavaScript szemszögéből? Mint mindent, a JavaScript a kereteket is egy logikus hierarchiába rendezi. A hierarchia legtetején maga a böngésző ablaka van. Ezt az ablakot bontottuk fel két keretre. Az ablak a két keret szülője, míg a keretek a gyermekek. Így az ablakra parent néven, míg a keretekre azon a néven hivatkozhatunk, amit a <FRAME> HTML elem NAME attribútumában megadtunk (a példánkban ez keret1 és keret2).
Keretek kezelése JavaScript-ben • Az első eset azt jelenti, hogy a szülő ablakhoz tartozó HTML kódban (gyakorlatilag ez hozza létre a kereteket) van egy JavaScript kódunk, amely a keretekben szeretne bizonyos műveleteket elvégezni, például megjeleníteni valamit. Ekkor egyszerűen a keret nevének felhasználásával férhetünk hozzá a kerethez. Pl.: keret2.document.write("Ezt a sort a szülő ablak írta ki!"); • A második esetre akkor lehet szükség, ha el akarjuk távolítani a kereteket az ablakból. Ez úgy történik, hogy a kereteket létrehozó dokumentum helyére (amely éppen a szülő ablakhoz tartozó dokumentum) újat töltünk be. A szülő ablakhoz parent névvel férhetünk hozzá egy gyerek ablakból (keretből). Új dokumentum betöltéséhez nem kell mást tennünk, mint hogy a szülő ablak location.href (amelyről a második fejezet végén volt szó) mezőjéhez új értéket rendelünk. Ezt a következő utasítással tehetjük meg: parent.location.href = "http://...";
Keretek kezelése JavaScript-ben • A harmadik eset a leggyakoribb, hiszen legtöbbször azt akarjuk, hogy a keretek együttműködjenek. Tegyük fel, hogy a feladatunk az, hogy írassunk ki JavaScript segítségével egy szöveget az első kerethez tartozó dokumentumból a második keretbe. Az egyes keretek között nincs kapcsolat, amely azt jelenti, hogy az egyik keretből nem hívhatjuk közvetlenül a másikat, hanem mivel a többi keretet csak a szülő látja, így azon keresztül hivatkozhatunk rájuk: parent.keret2.document.write("Ezt az első keretből írattuk ki");
Ablakok létrehozása • A JavaScript segítségével megnyithatunk új böngésző ablakokat, amelyekbe betölthetünk új HTML oldalakat, de akár mi magunk is létrehozhatunk dokumentumokat az új ablakban JavaScript segítségével, menet közben. <HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> <!-- JavaScript kód elrejtése function ujablak() {ablak = open("pelda.htm");} // --></SCRIPT></HEAD> <BODY><FORM> <INPUT TYPE="button" VALUE="Új ablak nyitása" onClick="ujablak()"> </FORM></BODY></HTML>
Ablakok létrehozása <HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> <!-- JavaScript kód elrejtése function ujablak2() {ablak = open("pelda.htm", "uj_ablak", "width=300,height=200,status=no, menubar=no");} // --> </SCRIPT></HEAD> <BODY><FORM> <INPUT TYPE="button" VALUE="Módosított ablak nyitása" onClick="ujablak2()"> </FORM></BODY></HTML>
Ablakok létrehozása A következő táblázat összefoglalja azokat a tulajdonságokat, amelyeket egy ablaknál állíthatunk.
Ablakok létrehozása Néhány további tulajdonságot tartalmaz a JavaScript 1.2-es változata, amelyet viszont csak a Netscape 4.0 és e fölötti változatai, ill. az Internet Explorer 4.0 vagy újabb változata képes kezelni. Ezek a következők:
Ablakok bezárása • JavaScript segítségével be is zárhatjuk az ablakunkat. Ehhez a close() függvényt kell használnunk. <HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> <!-- JavaScript kód elrejtése function bezar(){ close();} // --> </SCRIPT></HEAD> <BODY><FORM> <CENTER><INPUT TYPE="button" VALUE="Zárj be!" onClick="bezar()"> </CENTER></FORM></BODY></HTML>
Dokumentumok készítése JavaScriptből • Ez egy nagyszerű lehetőség JavaScript-ben. Nem egy előre elkészült HTML oldalt töltünk be egy ablakba vagy keretbe, hanem menet közben készítjük azt el, így megoldható, hogy napról-napra változó, környezettől függő oldalakat hozzunk létre. <HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtése function ujablak3(){ ujablak = open("","uj_ablak3", "width=400,height=300,status=yes,toolbar=yes, menubar=yes"); ujablak.document.open(); ujablak.document.write("<HTML><HEAD><TITLE>Dokumentum készítése JavaScript-tel"); ujablak.document.write("</TITLE></HEAD>"); ujablak.document.write("<BODY><CENTER><H1>"); ujablak.document.write("Ezt az oldalt teljesen a JavaScript "); ujablak.document.write("hozta létre!"); ujablak.document.write("</H1></CENTER></BODY>"); ujablak.document.write("</HTML>"); ujablak.document.close();}// --> </SCRIPT></HEAD> <BODY><CENTER><FORM> <INPUT TYPE="button" VALUE="Dokumentum készítése JavaScript-tel" onClick="ujablak3()"> </FORM></CENTER></BODY></HTML>
Dokumentumok készítése JavaScriptből • . Új ablak helyett választhatunk tetszőleges keretet is. Tegyük fel, hogy már rendelkezünk keret1 és keret2 nevű keretekkel, és dokumentumot akarunk létrehozni a keret2-be! • Ezt megtehetjük a következő módon: parent.keret2.document.open(); // a dokumentum megnyitása a keret2-ben parent.keret2.document.write(" ... Ide kerül a HTML kód ... "); parent.keret2.document.close(); // a dokumentum bezárása a keret2-ben
Az állapotsor • A JavaScript programok képesek írni az állapotsorra, amely a böngésző alján található. Nem kell mást tenni, mint hozzárendelni egy sztringet a window.status-hoz (azaz a window objektum status mezőjéhez).
Az állapotsor <HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> <!-- JavaScript kód elrejtésefunction statusz(szoveg){window.status=szoveg;}// --> </SCRIPT></HEAD> <BODY><FORM NAME="urlap1"> <INPUT TYPE="text" NAME="szoveg" VALUE="Írj be egy szöveget, ami majd megjelenik az állapotsorban!" SIZE=40> <INPUT TYPE="button" VALUE="Írd ki!" onClick="statusz(document.urlap1.szoveg.value)"><INPUT TYPE="button" VALUE="Töröld!" onClick="statusz('')"></FORM></BODY></HTML>
A Timeout-ok (késleltetés) • A régebbi böngészők még nem ismerik az onMouseOver eseményt, hiszen az még nem szerepel a JavaScript 1.0-ban. Ha azt akarjuk, hogy a fenti programot ezen böngészőkön is lehessen futtatni, akkor helyettesíteni kell ezt az eseményt valami mással. Például írjuk ki a szöveget az állapotsorba, és hagyjuk ott valamennyi ideig. Ezt késleltetés (timeout) révén érjük el, ami azt jelenti, hogy a számítógép valamely kódot bizonyos idő elteltével fog csak végrehajtani.
A Timeout-ok (késleltetés) <HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtése function idozit() {document.bgColor="#00FFFF"; setTimeout("document.bgColor='#FFFFFF'",3000);}// --> </SCRIPT></HEAD> <BODY><CENTER><FORM> <INPUT TYPE="button" VALUE="Háttérszín cseréje 3 mp-ig" onClick="idozit()"> </FORM></CENTER></BODY></HTML>
Egyszerű scroll JavaScriptben • Egyszerűsége miatt gyakran alkalmazott JavaScript program a scroll, ami egy szöveget gördít az állapotsorban. Lássuk, hogyan is valósítható ez meg? Ha kiírjuk a szöveget, majd rövid idő múlva kiírjuk ugyanazt a szöveget, csak egyetlen karakterrel balra tolva, és ezt az eljárást ismételgetjük, akkor olyan hatást érünk el, mintha mozogna a szövegünk jobbról-balra. A következő gombra kattintva megnyitunk egy ablakot, amely státuszsorában egy szöveget görgetünk.
Egyszerű scroll JavaScriptben <HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtésevar str = ""; function scroll(){ if (str == ""){ for (var i=0; i<150; i++) str = str + " "; str = str + "Bevezetés a JavaScript programozásába"; } else str = str.substring(2, str.length); window.status = str; window.setTimeout('scroll()',70);}// --> </SCRIPT></HEAD> <BODY BGCOLOR="FFFFFF" onLoad="scroll()">JavaScript scroll...</BODY></HTML>
A JavaScript objektumai • A JavaScript több, előre definiált objektumot tartalmaz. Ezek a következők: • Array (tömb) • Boolean (logikai) • Date (dátum) • Function (függvény) • Math (matematikai) • Number (szám) • String (karakterlánc)
Array (tömb) objektum • A tömbök rendkívül fontosak a progamozásban. Gyakran van szükségünk nagy mennyiségű adat kényelmes tárolására úgy, hogy bármelyikhez könnyen hozzáférjünk. A tömbök sok változóból felépülő összetett adattípusok. Az egyes adatokhoz egy név (a tömb neve) és egy szám segítségével férhetünk hozzá.
Array (tömb) objektum • Tömböket igen egyszerűen hozhatunk létre: tomb = new Array(), azaz létrehozzuk az Array objektum egy új példányát. A tomb nevű új tömbünkhöz rögtön értékeket is rendelhetünk. tomb[0] = "JavaScript"; tomb[1] = "2000"; tomb[2] = "Aurum";
Array (tömb) objektum tombnev = new Array([a_tomb_hossza]) tombnev = new Array([1.elem, 2.elem, 3.elem, ... ,n.elem]) Az első esetben csak annyi a különbség, hogy adtunk a tömbnek egy kezdeti hossz értéket. Ez a hossz a későbbiek során lekérdezhető az Array objektum length adatmezőjéből. A második esetben zárójeleken belül felsoroltuk a tömb induló értékeit. Ezek később persze szabadon bővíthetők. A szögletes zárójelek ( [ ] ) azt jelentik, hogy a közöttük lévő részek nyugodtan elhagyhatók.
Array (tömb) objektum AutoTipusok = new Array("Honda","Mercedes","BMW"); Az Array objektum legfontosabb metódusai a következők: • a join metódus összefűzi a tömb elemeit egyetlen sztringgé • a reverse megfordítja (transzponálja) a tömb elemeit, az utolsóból lesz az első, az elsőből az utolsó • a sort rendezi a tömb elemeit • Az előző példánál maradva vizsgáljuk meg ezeket a metódusokat: • AutoTipusok.join() a "Honda,Mercedes,BMW" sztringet adja vissza • AutoTipusok.reverse() megfordítja a sorrendet (AutoTipusok[0] a BMW lesz, AutoTipusok[1] a Mercedes. míg AutoTipusok[2] a Honda) • Autotipusok.sort() rendezi a tömböt, igy a tömbünk a következő módon változik meg: AutoTipusok[0] a BMW lesz, AutoTipusok[1] a Honda, a Mercedes pedig az AutoTipusok[2]
Array (tömb) objektum • <HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtése function tombkiir(){ var kiir = ''; AutoTipusok = new Array('Mercedes','BMW'); AutoTipusok[2] = 'Honda'; kiir = "A tömb elemei rendezés előtt:\n„ for (var i=0; i<3; i++){ kiir += i + ". " + AutoTipusok[i] + "\n"; } alert(kiir); AutoTipusok.sort(); kiir = "A tömb elemei rendezés után:\n„ for (var i=0; i<3; i++){ kiir += i + ". " + AutoTipusok[i] + "\n";} alert(kiir);}//--> </SCRIPT></HEAD> <BODY><FORM> <INPUT TYPE="button" VALUE="A tömb elemeinek kiíratása" onClick="tombkiir()"> </FORM> </BODY></HTML>
A Date (dátum) objektum • Nagyon hasznos előre definiált objektum. Segítségével olyan alkalmazásokat írhatunk, amelyek idő- vagy dátumértékeket kezelnek. Bizonyára mindenki találkozott már olyan oldallal, amely mutatta a pontos időt, illetve a dátumot. Ezeket is JavaScript programok számolják ki és jelenítik meg. Az alábbi módon hozhatjuk létre a Date objektum új példányait: dátum_objektum_neve = new Date( [paraméterek] );
A Date (dátum) objektum A paraméter a következő variációk bármelyike lehet: • Nem adunk meg paraméterként semmit. Ekkor az aktuális dátum és idő értékeket használjuk fel. Például: • ma = new Date(); • A paraméter egy sztring, ami egy dátumot reprezentál a következő formában: "Hónap Nap, Év óra:perc:másodperc". • Páldául: 97karacsony = new Date("December 25, 2004 12:30:30"); Ha elhagyjuk az óra:perc:másodperc részt, akkor ez automatikusan a 0 értéket veszi fel. • Számokkal adjuk meg a dátumot. Például: 97karacsony = new Date(2004, 11, 25, 12, 30, 30); • a set metódus segítségével beállíthatjuk a dátum és idő értékét (setYear, setMonth, setDate, setMinutes, setSeconds) • a get metódussal kiolvashatjuk ezeket az értékeket (getYear, getMonth, getDate, getMinutes, getSeconds)