A JavaScript objektumai

A JavaScript
1998, Juray Tamás

6. fejezet: A JavaScript objektumai

A JavaScript több, előre definiált objektumot tartalmaz. Ezek a következők:

Array (tömb)
Boolean
Date (dátum)
Function (függvény)
Math (matematikai)
Number (szám)
String (karakterlánc)

Ezek közül az Array, Date, Math, String objektumokkal foglalkozunk részletesebben.

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á.

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-as 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] = "1998"; 
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:

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]

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.

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. 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:

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, 1997 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(1997, 11, 25, 12, 30, 30);

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?

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)

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())+"-"+most.getDate()+"<BR>");
  document.write("Idő: "+most.getHours()+":"+most.getMinutes()+":"+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 1998-nál 98-at. 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.
Nézzük meg részletesebben az átalakításokat. Azt akarjuk, hogy mind az idő, mind a dátum a megszokott formátumban jelenjen meg. Például 10:07:02 jelenjen 10:7:2 helyett. A következő sor például a perceket hozza a kívánt formára:

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()) / nap_per_ezredmp;
 kulonbseg = Math.round(kulonbseg);
 if (kulonbseg < 0) uzenet = "Jó reggelt! 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");

   modositva = new Date(document.lastModified);
   document.write("Ezen oldal utolsó módosításának dátuma:<BR>");

   var ev = modositva.getYear();
   ev += (ev < 80) ? 2000 : 1900;

   document.write(ev+". ");
   document.write(Honapok[modositva.getMonth()]+" "+modositva.getDate()+", ");
   document.write(Napok[modositva.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:

modositva = new Date(document.lastModified);

Így kapjuk a modositva 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 modositva.getDay() indexű elemét, ill. a Honapok tömb modositva.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 1998-ban 98-at, 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 = modositva.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 adunk az ev változóhoz. Ezzel helyesen tudjuk kezelni az 1980 és 2079 között keletkezett oldalakat.

A Math (matematikai) objektum

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

Függvény	Leírás
abs	abszolút érték
sin, cos, tan	trigonometrikus függvények; az argumentum radiánban
acos, asin, atan	az előbbi függvények inverze; argumentum radiánban
exp, log	exponenciális függvény, természetes alapú logaritmus
ceil	felső egészrész
floor	alső egészrész
min, max	az argumentumként megadott két érték közül a kisebbet, ill. a nagyobbat adják vissza
pow	exponenciális függvény; első argumentuma az alap, a második a kitevő
round	kerekítés a legközelebbi egészre
sqrt	négyzetgyök függvény

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.

String objektum

JavaScript-ben nem létezik sztring adattípus. Helyette viszont létezik a String objektum, melynek számos hasznos metódusa is van. Ezekkel könnyedén manipulálhatjuk a sztringünket.

String objektumot a következő módon hozhatunk létre:

String_objektum_neve = new String(sztring);

A zárójelben tetszőleges sztring állhat, ez lesz tulajdonképpen az új String objektum. 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 amelyeket működését példában is megnézhetjük.

Metódus	Leírás
anchor	HTML hivatkozást készít a sztringből
big, blink, bold, fixed, italics, small, strike, sub, sup	HTML-ként formázott sztringet hoz létre
chartAt	a paraméterként átadott pozícióban lévő karakterrel tér vissza
indexOf, lastIndexOf	A paraméterben meghatározott részsztring első vagy utolsó pozíciójával tér vissza. Ha ilyen nem szerepel benne, akkor -1 a visszaadott érték
link	HTML linket készít a sztringből
split	felosztja a sztringet részsztringekre egy elválasztó karakter mentén, majd ezeket egy tömbbe teszi
substring	a sztring egy meghatározott részével tér vissza
toLowerCase, toUpperCase	csupa kisbetűssé ill. nagybetűssé alakítja a sztringet

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) az 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.
[ 7. fejezet ] [ Tartalomjegyzék ] [ 5. fejezet ]