 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||
|
A JavaScript több, elõre definiált objektumot tartalmaz. Ezek a következõk:
Ezek közül az Array, Date, Math, String objektumokkal foglalkozunk részletesebben. 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á. Tegyük fel, hogy neveket tárolunk egy tömbben. A tömbünket nevezzük el ezért Nevek-nek. Az elsõ névre a Nevek[0] néven hivatkozhatunk. A másodikra Nevek[1]-el és így tovább. Tömböket az Array objektummal hozhatunk létre. Ez csak a JavaScript 1.1-es verziójától létezik, ezért ha tömböket használunk az oldalainkon, akkor legalább egy Netscape 3.0-ás böngészõ kell. 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] = 1999; tomb[2] = "Aurum"; A JavaScript tömbjei hihetetlenül rugalmasak, könnyen kezelhetõek. Ez azt jelenti, hogy amint az a példánkon is látszik, egyaránt tartalmazhat számokat és sztringeket, értékeket (számokat) és más objektumokat is. A méretük is dinamikusan változik, azaz ha új értékeket rakunk bele, akkor folyamatosan növekszik. Mivel a méret csak növekedhet (csökkenteni nem lehet, hiába próbálunk meg elemeket törölni belõle), így igyekezzünk a tömböket kicsire tervezni. Más módon is létrehozhatunk tömböket. 1. tombnev = new Array([a_tomb_hossza]) 2. 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. A második létrehozásra lássunk egy példát! AutoTipusok = new Array("Honda","Mercedes","BMW");
Az Array objektum legfontosabb metódusai a következõk:
Az elõzõ példánál maradva vizsgáljuk meg ezeket a metódusokat:
Az utolsó példa egy tömb elemeinek a kiíratását mutatja be. <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>
Ha a gombra kattintunk, akkor meghívjuk a tombkiir() függvényt. Ebben elõször létrehozunk egy kételemû tömböt, majd ezt bõvítjük egy harmadik elemmel. Ezután egy for ciklussal összefûzzük a tömb elemeit a kiir nevû sztringbe. Végül ezt kiírjuk egy alertbox segítségével. Majd a a rendezés metódus (sort) meghívása után újra elvégezzük ezt a kiíratást. Az elemek ekkor már ábécé sorrendben jelennek meg. 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. Más oldalakon feltûnik, hogy hány nap van még hátra 2000-ig. 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 paraméter a következõ variációk bármelyike lehet:
Egy fontos észrevételt rögtön tehetünk. A hónapok számozása nem 1-tõl indul, hanem 0-tól, azaz januárnak a 0, februárnak az 1, márciusnak a 2 érték felel meg. A példából látszik, hogy decembert a 11-gyel adtuk meg. Milyen metódusok állnak a rendelkezésünkre?
Az alapok áttekintése után nézzünk meg néhány egyszerûbb példát! Az elsõ kiírja az aktuális dátumot és idõt az oldalunkra. Hátránya, hogy az idõ nem változik, végig az objektumpéldány létrehozásakor kiolvasott idõt fogja mutatni. <HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
most = new Date();
document.write("Dátum: "+most.getYear()+"-"+(1+most.getMonth()));
document.write("-"+most.getDate()+"<BR>");
document.write("Idõ: "+most.getHours()+":"+most.getMinutes());
document.write(":"+most.getSeconds());
// -->
</SCRIPT>
</BODY>
</HTML>
Rövid programunk eredménye a következõ lesz:
Látható, hogy felhasználtuk a fentebb említett getYear(), getMonth(), getDate() metódusokat az év, hónap, nap ill. a getHours(), getMinutes(), getSeconds() metódusokat az óra, perc, másodperc kiolvasására. A getYear() a 2000 elõtti éveknél az 1900 óta eltelt évek számát adja vissza, például 1999-nél 99-et. 2000-tõl kezdve viszont egy négyjegyû számot ad vissza, így 2012-ben 2012-t. A második példában egy órát írunk, amely folyamatosan a pontos idõt írja ki, ügyelve a megszokott írásmódra is: <HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
var idoStr, datumStr;
function ido(){
most = new Date();
ora = most.getHours();
perc = most.getMinutes();
mp = most.getSeconds();
ev = most.getYear();
honap= most.getMonth()+1;
nap = most.getDate();
idoStr = ora;
idoStr += ((perc < 10) ? ":0" : ":") + perc;
idoStr += ((mp < 10 ) ? ":0" : ":") + mp;
datumStr = ((ev < 2000) ? "19" : "") + ev;
datumStr += ((honap < 10) ? "-0" : "-") + honap;
datumStr += ((nap < 10) ? "-0" : "-") + nap;
document.digiora.ido.value = idoStr;
document.digiora.datum.value = datumStr;
setTimeout("ido()",1000);
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="ido()">
<FORM NAME="digiora">
Idõ: <INPUT TYPE="text" NAME="ido" SIZE="8" VALUE=""><BR>
Dátum: <INPUT TYPE="text" NAME="datum" SIZE="10" VALUE=""><BR>
</FORM>
</BODY>
</HTML>
Már az oldal betöltésekor elindítjuk az ido()
függvényt az onLoad eseménykezelõ
segítségével (a <BODY> HTML elemen belül). Ez a
függvény létrehozza a Date objektum egy
példányát az aktuális idõvel és
dátummal, amit némi átalakítás után
ki is ír a megfelelõ ûrlapmezõkbe az idoStr
és datumStr sztringek felhasználásával. idoStr += ((perc < 10) ? ":0" : ":") + perc; Amikor a perceket fûzzük hozzá az idoStr-hez, akkor az órák száma már benne van a sztringben. A fenti sor a perceket fûzi a sztringünkhöz. C++ nyelvbõl bizonyára ismerõs ez a szerkezet. A ? elõtt áll egy feltétel. Ha ez igaz, akkor a ? után álló, : -al elválasztott lehetõségek közül az elsõ kerül végrehajtásra. Ha hamis a feltétel, akkor a második. Ha a percek száma kisebb tíznél, akkor az idoStr sztringhez a ":0" + perc, ha nagyobb 10-nél, akkor a ":" + perc fûzõdik hozzá. A másodpercek ill. a dátumot tartalmazó datumStr sztring felépítésénél hasonlóan járunk el. Az idõ frissítésérõl a setTimeout() függvény gondoskodik. Minden másodpercben meghívjuk az ido() függvényt, amely létrehoz egy új dátum objektumot és kiírja azt az ûrlapmezõkbe. A harmadik példát már a bevezetõben is megemlítettem. A program kiszámítja, hogy hány nap van még hátra 2000-ig. <HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript kód elrejtése
function mennyi(){
datum_mai = new Date();
datum_2000 = new Date(2000,0,1);
nap_per_ezredmp = 24 * 60 * 60 * 1000;
kulonbseg = (datum_2000.getTime() - datum_mai.getTime());
kulonbseg = kulonbseg / nap_per_ezredmp;
kulonbseg = Math.round(kulonbseg);
if (kulonbseg < 0) uzenet = "Már elmúlt 2000!";
else uzenet = "Még " + kulonbseg + " nap 2000-ig!";
alert(uzenet);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Mennyi nap van még 2000-ig?"
onClick="mennyi()">
</FORM>
</BODY
</HTML>
Nézzük meg, mit is tesz a program! Ha a gombra kattintunk, akkor meghívjuk a mennyi() nevû függvényt. Ez létrehoz 2 dátum objektumot datum_mai és datum_2000 néven. Az elõbbi az aktuális dátumot, a második 2000. január 1-ét tartalmazza. A nap_per_ezredmp nevû változóban az egy napban lévõ ezredmásodpercek számát tároltuk el (24 óra * 60 perc * 60 mp * 1000). A következõ sor számolja a különbséget a getTime() nevû metódus segítségével, amely 1970. január 1-tõl az adott dátumig eltelt ezredmásodpercek számát adja vissza. Igy ha vesszük a két dátum ezredmásodpercbeni különbségét, majd ezt osztjuk a nap_per_ezredmp vátozónkkal, akkor megkapjuk a két dátum között eltelt napok számát. Ez persze nem biztos, hogy egész érték, így kerekítjük azt a Math objektum round() metódusával. Ezt az értéket tároljuk a kulonbseg nevû változóban. Majd megvizsgáljuk, hogy a kapott érték negatív-e? Ha nem, akkor a napok számát írjuk ki, ha igen, akkor már elmúlt 2000 január 1., így mást írunk ki az üzenetablakba. Az utolsó példa is hasznos lehet. Ha valaki kószál a hálón, fontos tudnia, hogy mennyire friss adatokat olvas egy oldalon. Az oldalak szerkesztõi legtöbbször odaírják, hogy mikor frissítették azt utoljára. Ezeket az adatokat sok oldal esetén azonban nem is olyan könnyû karbantartani. A következõ program automatikusan beszúrja, hogy mikor frissült utoljára az oldal. <HTML>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
Napok = new Array("vasárnap","hétfõ","kedd","szerda",
"csütörtök","péntek","szombat");
Honapok = new Array("január","február","március","április",
"május","június","július","augusztus",
"szeptember","október","november","december");
mod = new Date(document.lastModified);
document.write("Ezen oldal utolsó módosításának dátuma:<BR>");
var ev = mod.getYear();
ev += (ev < 80) ? 2000 : 1900;
document.write(ev+". ");
document.write(Honapok[mod.getMonth()]+" "+mod.getDate()+", ");
document.write(Napok[mod.getDay()]);
// -->
</SCRIPT>
</CENTER>
</BODY>
</HTML>
Létrehozunk két tömböt, az egyikben a hét napjainak nevei, a másikban a hónapok nevei vannak. A document objektumnak van egy lastModified nevû mezõje, amelybõl kiolvashatjuk az utolsó módosítás dátumát. Ez egy sztring, amibõl elkészítjük a dátum objektum egy példányát. Ezt végzi el a következõ sor: mod = new Date(document.lastModified); Így kapjuk a mod nevû objektumot, amely már az utolsó módosítás dátumát tartalmazza. Ebbõl megkaphatjuk az éveket a getYear(), a hónapokat a getMonth(), a hónap napjait a getDate(), a hét napjait a getDay() metódusok alkalmazásával. A napok és hónapok neveit úgy kapjuk meg, hogy megkeressük a Napok tömb mod.getDay() indexû elemét, ill. a Honapok tömb mod.getMonth() indexû elemét. Már csak egyetlen dologra kell figyelni! A document.lastModified sztring az éveket századok nélkül tárolja. Így 1999-ben 99-et, 2000-ben 00-át, 2001-ben 01-et tartalmaz. Az alábbi két sor részben kiküszöböli ezt a problémát: var ev = mod.getYear(); ev += (ev < 80) ? 2000 : 1900; Kiolvassuk az évek számát az ev nevû változóba, majd a korábban említett szerkezettel, ha ev < 80, akkor 2000-et, ha ev >= 80, akkor 1900-at adunk az ev változóhoz. Ezzel helyesen tudjuk kezelni az 1980 és 2079 között keletkezett oldalakat. Ez az objektum matematikai függvényeket és konstansokat tartalmaz. Ha például a PI értékére lenne szükségünk, akkor azt könnyen megkaphatjuk a Math objektum PI adatmezõjéból. Pl. kor_kerulete = 2*sugar*Math.PI; A legtöbb trigonometrikus, exponenciális és logaritmikus függvényt is tartalmazza ez az objektum. Igy például egy X szög szinuszát így kaphatjuk meg: Math.sin(X);
Elõfordulhat, hogy véletlenszámra van szükségünk a programunk során. Erre is ad megoldást a Math objektum, mégpedig a random() metódussal. A Math.Random() egy véletlenszámot ad vissza, amely 0 és 1 közé esik. Célszerû alkalmazni a with utasítást olyan esetekben, amikor a Math objektumra gyakran kell hivatkozni: with (Math){
kor_terulet = PI * r * r;
x = r * sin(beta);
c = sqrt(a*a + b*b);
}
Látható, hogy így nem kellett minden Math objektumbeli metódus és konstans elé odaírni a "Math" hivatkozást. Ezzel a kódunk is átláthatóbbá vált. JavaScript-ben nem létezik sztring adattípus. Helyette viszont létezik a String objektum, melynek számos hasznos metódusa is van. Ezekkel könnyedén manipulálhatjuk a sztringünket. String objektumot a következõ módon hozhatunk létre: String_objektum_neve = new String(sztring); A zárójelben tetszõleges sztring állhat, ez lesz tulajdonképpen az új String objektum. Következzen itt egy konkrét példa. Létrehozunk egy szoveg nevû String objektumot, amely a JavaScript szöveget fogja tartalmazni. szoveg = new String("JavaScript");
A sztring literálok is String objektumot reprezentálnak. Az elõzõvel ekvivalens objektumot ad meg például a "JavaScript" literál is. A String objektumnak van egy length nevû adatmezõje, amelybõl kiolvashatjuk a tárolt sztring hosszát. Emlékezzünk vissza a scrollt bemutató rövid programra az elõzõ fejezetben. Ott már felhasználtuk ezt az adatmezõt, amikor a szövegünk hosszára voltunk kíváncsiak. A String objektum metódusai két típusba sorolhatók. Az egyik típus a sztring egy módosított változatát adja vissza. Ide tartozik például a subString és a toLowerCase metódusok. Az elõbbi a sztring egy részét adja vissza, míg az utóbbi kisbetûsre alakítja azt. A másik típushoz olyan metódusok tartoznak, amelyek HTML formátumúra hozzák a sztringet. Ilyen például a bold, ill. a link függvény. Foglaljuk össze egy táblázatba a String objektum metódusait amelyek mûködését példában is megnézhetjük.
A következõ felsorolás bemutatja a tulajdonságok nagy részét. Legyen a String objektumunk a "JavaScript" sztring. Nézzük meg, hogy az egyes metódusok mit adnak vissza erre! Hozzuk létre a szoveg nevû objektumot: szoveg = "JavaScript"; Majd erre alkalmazzuk az egyes metódusokat. Az egyenlõségjel bal oldalán az alkalmazott metódus áll a megfelelõ paraméterekkel, a jobb oldalán pedig a visszaadott érték.
Figyeljük meg, hogy a charAt(0) a sztring elsõ betûjét adja vissza. A charAt(4) így valójában a sztring 5-dik betûjét adja vissza, ami az "S" karakter. Az indexOf() metódus különbséget tesz kis- és nagybetûk között. Ezért van az, hogy az indexOf('S') függvény 4-et ad vissza, addig az indexOf('s') -1-et, hiszen "s" nem szerepel a sztringben. A lastIndexOf() metódus ugyanígy viselkedik. A példa második részében a HTML típusú metódusokat nézzük meg!
A link() metódus a String objektumból egy HTML link-et
készít. A paraméterben megadott címre vonatkozik a
link, példánkban ez a http://www.netscape.com. A többi
példa a HTML-bõl ismert stílusokra formázza be a
szövegünket. | |||||||||||||||||||||||||||||||||||||||||||
