JavaScript objektumok
A változókhoz hasonlóan ezek is adatokat tárolnak.
Külömbség:
- Az objektum több adatot is tartalmazhat, még a változó csak egyet.
- Az objektumban tárolt adatokat az objektum tulajdonságainak nevezzük.
A következő három kulcsszóval hozhatunk létre objektumokat, a JavaScript programban:
- A new kulcsszóval, JavaScript beépített objektumot vagy saját új objektumot. (példát, lásd az oldal alján.)
- A this kulcsszó, mely az aktuális objektumra hivatkozik. Elhelyezhetjük: JavaScript programunk function részében vagy objektumok eseménykezelőiben.
- A with kulcsszó, ezzel egy utasításcsoportot rendelhetünk az adott objektumhoz. Ebben az esetben az objektumhivatkozás nélküli, összes objektumtulajdonság, JavaScript programunkban, erre az adott objektumra fog hivatkozni.
Megjegyzés: A with kulcsszó használatának, kis terjedelmű objektumoknál és objektumokból kevés adat kinyerésénél nincs értelme. Jelentősége, bonyolultabb vagy igen hosszú feladatoknál (PL.: matematika ) jelentkezik, mert a with után zárójelben megadott változó nevét, az utasításoknál nem kell beírni, azaz a with használatával gépelési időt spórolunk meg
A JavaScript, ponttal választja el egymástól az objektumok és tulajdonságok nevét.
Következő példában, Feri az objektum, minden más az Ő tulajdonsága, azaz a hozzá fűződő adatok.
Például egy Feri nevű személy esetén
Feri.cím, Feri.telefon, Feri.stb.
Az objektumok tagfüggvényeket (metódusokat) is tartalmaznak, melyek az objektum adataival dolgoznak.
A címjegyzékhez készített személyobjektum tartalmazhat például egy display ( ) tagfüggvényt, ami a személy adatait jeleníti meg.
A Feri . display ( ) utasítás, a Feri adatait jeleníti meg.
A Javascript objektumokkal, valamint azok mezőivel és metódusaival dolgozik.
A mezők a megfelelő objektumok egy-egy tulajdonságát képviselik, és a metódusok segítségével műveleteket végezhetünk rajtuk.
A megadás módja mindig objektumnév . mező.
Amennyiben egy olyan metódust hívunk, ami nem tartozik konkrét objektumhoz, csak a típusához (statikus metódusok), akkor az objektum nevét a típus nevével kell helyettesíteni.
Lehetőség van a HTML-objektumok definiálásánál, azaz beazonosításánál megadni az objektum nevét a name="egyedinév" attribútummal, azaz egyedi azonosítóval
Ekkor lehetséges lesz Javascriptből ugyanezen a néven hivatkozni rá (kivétel: Area).
Minden objektum rendelkezik egy name="egyedinév" mezővel, ami a HTML-nevét tartalmazza.
Ezzel ellentétben a Javascript változóneveket nem használhatjuk a HTML-kifejezésekben!
A másik mód a HTML-objektumok elérésére hogy az őt tartalmazó objektumnak a legtöbbször van egy tömbje, ami a benne definiált objektumokat tartalmazza, definiálási sorrendben. Ekkor csak az indexét, azaz id azonosítóját kell megállapítani.
Azzal, hogy az adott objektumhoz, name és id azonosítót is rendelunk, problémát nem okozunk.
JavaScript programok legtöbbszőr a name azonosítót használják, de van amikor az id azonosító szükségeltetik az adott program működéséhez.
A CSS, azaz stíluslapon történő objektum megjelenését befolyásoló stílusok meghatározásánál, csak az id azonosítót tudjuk felhasználni.
Megjegyzés:
XHTML oldali objektumok.
Minden olyan terület vagy szakasz, mely egy adott kezdő és záró jelölőcímkével rendelkezik.
JavaScript szempontjából, az adott területet, azaz objektumot kijelölő kezdő címkéknek, egyedi azonosítóval kell rendelkezniük.
Az egyedi azonosító nevet, name és id azonosító után kell megadni, mindkettőnek adhatjuk ugyanazon elnevezést egy adott jelölőcímkében.
Példa:
1. <form name="retek" id="retek">
2. <input name="matek" id="matek">
| Megnevezés | Leírás |
|---|---|
| Array | tömb vagy kevés adatot tároló objektum létrehozásához |
| Date | dátumkezelésre szolgáló beépített objektum |
| Math | matematikai függvények használatát biztosító beépített objektum |
| Number | számok megvalósítását szolgáló beépített objektum |
| eval() | egy kifejezés kiértékelő függvény |
| String | stringek (szövegesrész) megvalósítását és kezelését szolgáló beépített objektum |
| Boolean | logikai értékeket leíró és azok kezelését szolgáló beépített objektum |
| MimeType | MIME típusok kezelésre szolgáló beépített objektum |
| parseFloat() | A sor elején, számokat is tartalmazó szövegrészből, kinyeri a lebegőpontos számot |
| parseInt() | A sor elején, számokat is tartalmazó szövegrészből, kinyeri az egész számot |
| RegExp | reguláris kifejezések kezelésre szolgáló beépített objektum |
Megjegyzés:
Szöveg, a sor elején számokat is tartalmaz.
szoveg= "170.92345678976543210 Ft egy üveg sör.";
A fenti szövegrészből:
perseInt, csak az egésszámokat olvassa ki. Eredmény ez lesz: 170
perseFloat, teljes számértéket kiolvassa, (14 tizedesig). Eredmény ez lesz: 170.92345678976542
Példa egy több adatot tároló objektum elkészítésére
Adatok tárolására a változók és a tömbök is megfelelnek, de nagymennyiségű és változó adatok esetében alkalmasabbak az objektumok.
Például, egy vállalatnál dolgozó személyek adatainak vagy nagymennyiségű névjegykártyák kezeléséhez, jobb megoldás az objektum választása.
Ebben az esetben nem kell mindenkinek és minden adatnak más és más változó nevet kitalálni, hogy az adatok elkülönüljenek egymástól, illetve a hovatartozásuk beazonosítása is egyszerűbb.
Tetszőleges elnevezéssel készítünk egy objektumot, például Adatok, és minden személyt ez az objektum képvisel, melyben tároljuk az adott személy tulajdonságait, azaz adatait.
A tulajdonságok, azaz adatok mellett, elhelyezhetünk függvényeket is, melyek az adatok megjelenítését, kiíratását, rendszerezését, stb. végzik.
Minden JavaScript objektum, rendelkezik tulajdonságokkal, amik nem mások, mint adatokat tároló változók.
Objektum létrehozásának első lépése a névadás, tetszőleges ékezet nélküli elnevezést adhatunk.
Például: Adatok
Második lépés, megadni az objektumban tárolt tulajdonságokat, azaz mit fogunk tárolni.
Például: nev, lakcim, tel, mhely, stb.
Új objektum létrehozásához, készítenünk kell egy objektumot létrehozó függvényt, azaz funkciót.
Majd a tömbben tárolt tulajdonságokat, tetszőleges elnevezéssel egy - egy változóhoz rendeljük
Változókat a this kulcsszóval vezetjük be, minden objektummeghatározásban használnunk kell
Példa:
function Adatok ( nev,lakcim,tel,mhely) {
this.neve = nev;
this.lakcime = lakcim;
this.telefonja = tel;
this.munkahelye = mhely;
this.PrintAdatok = PrintAdatok;
}
Készítünk egy függvényt, mely kiírja objektumunkból az adatokat, és ezen függvényt a nevével, be kell írni az Adatok objektumot létrehozó függvény this soraiba. (Lásd fentebb)
function PrintAdatok() {
adat1 = "Neve: " + this.neve + " <br>\n";
adat2 = "Lakhelye: " + this.lakcime + " <br>\n";
adat3 = "Telefonszáma: " + this.telefonja + " <br>\n";
adat4 = "Munkahely neve: " + this.munkahelye + " <hr>\n";
document.write (adat1, adat2, adat3, adat4);
}
Példánkban az objektumot létrehozó funkció függvény neve Adatok, ezért az objektum neve is Adatok lesz.
Ezután létrehozhatjuk az új objektumot vagy objektumokat tetszőleges számban, azaz mennyiségben, a new kulcsszó segitségével.
Majd minden egyes objektumnak más és más tetszőleges elnevezést kell adni, úgynevezett változónevet.
Ezek a változónevek tárolják az objektumban lévő adatokat, és ezen változónéven hivatkozhatunk egy adott objektum tartalmára (Például: annak kiíratására, stb)
A zárójelek közé, olyan sorrendbe írjuk be az adatokat, amilyen sorrendben az objektum létrehozásakor annak zárójelei között meghatároztuk. function Adatok ( nev,lakcim,tel,mhely)
Az elkülönülő adatokat idézőjelek közé kell beírbi, és vesszővel kell egymástól elkülöníteni. A vessző jelzi, hogy új adatbevitel következik.
bukfenc = new Adatok ("Bukfenc Ferenc", "80808 Dombváros" , "22-32225" , "Vakond kergető egyesület");
bukfenc2 = new Adatok ("Bukfenc József", "80808 Gombváros" , "29-32225" , "Kerge Vakond egyesület");
Mézga = new Adatok ("Mézga Géza", "066 Űrbéli Kráter út 22" , "22229-3225" , "Műholdas vakond kereső kkt.");
szama002 = new Adatok ("Fecsegő Szomszéd", "011 Mindenütt Van út 12" , "001-01001" , "Mindent tudok bt.");
Álmos = new Adatok ("Szundi Őze", "0111 Néhaváros Esti út 1" , "011-02" , "Lusta kft.");
Program végén meghatározzuk, hogy az objektumaink közül, melyik adatait írja ki programunk. Kiválaszthatunk egy - két - három stb. vagy az összes objektumot is
Nem kell mást csinálnunk, mint a PrintAdatok() függvény elé, be kell írni azon adatokat tároló objektum nevét, melyet kiszeretnénk íratni.
Példa:
- Első megjelenítendő objektum, mely változójának elnevezése: Mézga
- Második megjelenítendő objektum, mely változójának elnevezése: bukfenc
- Harmadik megjelenítendő objektum, mely változójának elnevezése: Álmos
Mézga.PrintAdatok();
bukfenc.PrintAdatok();
Álmos.PrintAdatok();
Az elkészűlt JavaScript programunk
Jelenlegi programunk a body szakaszban helyezkedik el, a bemutató végett. De lehetőleg a JavaScript programunkat, külön js. fájlban helyezzük el.
<body>
<script language="JavaScript" type="text/javascript">
function Adatok ( nev,lakcim,tel,mhely) {
this.neve = nev;
this.lakcime = lakcim;
this.telefonja = tel;
this.munkahelye = mhely;
this.PrintAdatok = PrintAdatok;
}
function PrintAdatok() {
adat1 = "Neve: " + this.neve + " <br>\n";
adat2 = "Lakhelye: " + this.lakcime + " <br>\n";
adat3 = "Telefonszáma: " + this.telefonja + " <br>\n";
adat4 = "Munkahely neve: " + this.munkahelye + " <hr>\n";
document.write (adat1, adat2, adat3, adat4);
}
bukfenc = new Adatok ("Bukfenc Ferenc", "80808 Dombváros" , "22-32225" , "Vakond kergető egyesület");
bukfenc2 = new Adatok ("Bukfenc József", "80808 Gombváros" , "29-32225" , "Kerge Vakond egyesület");
Mézga = new Adatok ("Mézga Géza", "066 Űrbéli Kráter út 22" , "22229-32225" , "Műholdas vakond kereső kkt.");
szama002 = new Adatok ("Fecsegő Szomszéd", "011 Mindenütt Van út 12" , "001-01001" , "Mindent tudok bt.");
Álmos = new Adatok ("Szundi Őze", "0111 Néhaváros Esti út 1" , "011-02" , "Lusta kft.");
Mézga.PrintAdatok();
bukfenc.PrintAdatok();
Álmos.PrintAdatok();
</script>
</body>
JavaScript rogramunk eredményének megjelenése weboldalon