A JavaScript, mint neve is mutatja, egy script nyelv, amit legelõször a Netscape Navigator 2.0 támogatott. A JavaScript-eket HTML lapokba lehet beágyazni, a lappal együtt töltõdnek le, majd a böngészõ értelmezi és futtatja azokat. Hasonlít a Java-ra, de ugyanakkor sokkal kisebb, egyszerûbb, korlátozottabb mûködésû is annál.
Nézzünk meg egy összehasonlító táblázatot arra vonatkozóan, hogy mik a fõbb hasonlóságok és különbségek a JavaScript és a Java appletek között:
| JavaScript | Java applet |
A kliens értelmezi
(interpretálja). | A szerveren fordított -
letöltés után - kliensen futó. |
Objektum-alapú.
Beépített, kiterjeszthetõ objektumokat használ, de nincsennek osztályok és öröklõdés. | Objektum-orientált. Az appletekben vannak osztályok és öröklõdés. |
| A program beágyazódik a HTML dokumentumba. | Az appletek a HTML lapból hívhatók meg, de azoktól elkülönülnek. |
| A változók típusát nem kell deklarálni. (Nem típusos nyelv.) | A változókat deklarálni kell. (Erõsen típusos nyelv.) |
| Dinamikus kötés. Az objektum-hivatkozások ellenõrzése futásidõben történik. | Statikus kötés. Az objektum-hivatkozásoknak már fordításkor létezniük kell. |
| Nem tud önállóan a merevlemezre írni. | Nem tud önállóan a merevlemezre írni. |
A JavaScript-et azért fejlesztették ki, hogy az egyébként statikus lapokba dinamizmust vigyenek. Egyrészt látványosabbá tehetjük vele azokat (dinamikusan, futásidõben generálhatunk HTML lapokat), másrészt számos praktikus dologra használhatjuk fel (pl. jelszót kérhetünk a lapunk megtekintéséhez, vagy pl. ellenõrizhetjük az elküldendõ adatok helyességét még a kliens oldalon - hálózati erõforrásokat spórolva meg, stb).
A továbbiakban bemutatom a JavaScript mûködését, felépítését és az általa használt, beépített objektumokat.
JavaScript a HTML dokumentumban
A JavaScript utasításoknak a SCRIPT elemben kell lenniük az alábbi módon:
<SCRIPT>
JavaScript-utasítások
</SCRIPT>
A tag-ek között akárhány JavaScript-utasítás lehet, ill. a JavaScript bárhol elhelyezhetõ a dokumentumban. A <SCRIPT> tag-ekbõl is bármennyi lehet.
A SCRIPT elem opcionális attribútuma LANGUAGE (a nyelv), melyben a script nyelv és ennek a verziószáma specifikálható.
Pl.:
- <SCRIPT LANGUAGE="JavaScript">
Ez egy Netscape 2.0-ás JavaScript - <SCRIPT LANGUAGE="JavaScript1.1">
Ez pedig egy Netscape 3.0-ás JavaScript
A 3.0-ás Navigator mindkét típusú JavaScript-et futtatja, a 2.0-ás csak az elsõt.
Egy hasznos példa a LANGUAGE használatára:
<SCRIPT LANGUAGE="JavaScript">
// 1.0-ás függvények
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
// Újradefiniált függvények melyek 1.1-es JavaScript utasításokat is tartalmaznak
// 1.1-függvények definíciója
</SCRIPT>
A JavaScript elrejtése a megjegyzés tag-ek közé
Ha egy böngészõ nem ismeri a JavaScript-et, akkor a <SCRIPT> tag-ek közötti utasításokat kiírja a képernyõre - ami nagyon elcsúnyíthatja a megjelenítést. A probléma megoldása az, hogy elrejtjük az utasításokat a korábbi (Netscape Navigator 2.0 alatti) böngészõk elõl, az alábbi módon:
<SCRIPT>
<!-- Az elrejtés itt indul
JavaScript utasítások
// A rejtésnek vége -->
</SCRIPT>
Egy nem JavaScript kompatibilis böngészõ nem érti a <SCRIPT> tag-et - ezért figyelmen kívûl hagyja azt -, így az összes utasítás egy megjegyzésbe kerül. Ezzel szemben pl. egy Netscape Navigator 2.0-ás böngészõ a <SCRIPT> tag-et követõ sort ignorálja, az utasításokat pedig végrehajtja.
Egy másik hasznos tag a <NOSCRIPT>, melynek segítségével kijelölhetõ a dokumentumnak egy olyan része, melyet csak azok látnak, akiknek a böngészõje nem JavaScript kompatibilis, vagy a böngészõben nincs engedélyezve a JavaScript-ek futtatása.
Mibõl épül fel a JavaScript nyelv?
A JavaScript nyelv nagyon hasonlít a C++ nyelvre (a Java nyelv megalkotásakor a C++ nyelvbõl indultak ki). Sok hasonlóság mutatkozik mind a szintaktikát (utasítások formája, operandusok), mind a szemantikát illetõen. Aki ismeri a C, ill. a C++ nyelvet, sok ismerõs dolgot talál majd a következõ részben.
Értékek, változók és literálok
Értékek
Az alábbi típusú értékeket fogadja el a JavaScript:
- Számok, melyek lehetnek egészek vagy valós számok. (Pl.: 23 vagy 6.452)
- Logikai értékek, true vagy false
- Stringek, pl. "Szia!" vagy 'Hello!'
- null, null érték
Változók
A JavaScript-ben a változókat nem kell deklarálni, és az egész típuskezelés nagyon flexibilis. A szükséges konvertálások automatikusan történnek.
A változó létrehozásánál - hogy biztosak legyünk abban, hogy egy új változót hozunk létre, nem egy már meglévõt módosítunk - ajánlott a var alapszó használata.
Pl.:
var valtozo=28;
valtozo="Ez most nem szam, hanem szöveg.";
A fenti két sor hibátlanul mûködik, a JavaScript megfelelõen konvertál, a valtozo-ban a szöveg lesz.
Néhány hasznos konvertáló függvény:
- Az eval megkísérel kiértékelni egy szöveget, mint egy kifejezést.
- A parseInt egy szöveget egész számmá konvertál.
- A parseFloat egy szöveget lebegõpontos számmá kovertál, ha lehetséges.
A változónevek betûvel vagy "_" -jellel kezdõdnek és ezekkel vagy számokkal folytatódnak. A JavaScript megkülönbözteti a kis és nagybetûket, erre figyeljünk oda!
A függvényeken kívül létrehozott változók globálisak, az aktuális dokumentumon belül mindenhonnan elérhetõk. Ha függvényen belül definiálunk egy változót, akkor az lokális, csak a függvényen belül látható. Olyan lokális változó definiálásakor, amely globálisként már szerepel, a var alapszót kell használni.
Literálok
A literálok értékeket reprezentálnak a JavaScript-ben.
Típusaik:
- Egész számok
- Decimális
- Oktális (0-val kezdõdnek, a számjegyek 0-7-ig lehetnek)
- Hexadecimális (0x-el vagy 0X-el kezdõdnek, a számok számjegyekbõl (0-9-ig), és betûkbõl állhatnak(a-f ill. A-F)).
- Lebegõpontos számok
A következõ részekbõl állhatnak: decimális egészbõl, decimális pontból, törtrészbõl és kitevõbõl.
Pl.: 16.423, 16.423E-1 - Logikai literálok
A Boolean típusnak két literálja van: true és false - Szöveg literálok
Egy szöveg(string) literál vagy nem tartalmaz karaktert, vagy akárhány karaktert tartalmaz két ' vagy " jelek között.
Speciális karaktereket is tartalmazhat egy string:
| Karakter | Jelentés |
| \b | backspace
visszatörlés |
| \f | form feed
lapdobás |
| \n | \new line
új sor |
| \r | carrige return
kocsi vissza, sor elejére |
| \t | tab
tabulátor-pozíció |
\\
\"
\' | backslash
backslash karakter,ill. más speciális karakterek írása |
Kifejezések és operátorok
Kifejezések
Egy kifejezés literálok, változók, operátorok és kifejezések halmaza, melyek egy értéket határoznak meg. Ez az érték lehet szám, szöveg vagy logikai érték. Az alábbi típusú kifejezéseket ismeri a JavaScript:
- Aritmetikai - az értéke szám
- Szöveg - szöveget vesz fel értékül
- Logikai - értéke true vagy false
Feltételes kifejezés
Szintaxisa: (feltétel) ? érték1 : érték2
Értéke a feltételtõl függõen vagy az érték1 (ha igaz), vagy az érték2 (ha hamis).
Operátorok
Vannak hozzárendelõ, aritmetikai, összehasonlító, bitenkénti, logikai, szöveges és speciális operátorok. Ezeket is feloszthatjuk egy vagy kétoperandusú operátorokra.
Egy oprendusú operátor használata:
operátor operandus
vagy
operandus operátor
pl.: i++, ++i
Két operandusú operátorhoz két operandus szükséges:
operandus1 operátor operandus2
pl.: x + y
A hozzárendelõ operátorok pl.: =,+=,*=,/=, stb.
pl.: x+=2 (x-et növeli 2-vel)
Összehasonlító operátorok pl.: = =, !=, <, <=, >, >=
pl.: x!=y (x nem egyenlõ y-al)
Aritmetikai operátorok pl.: +, -, *, /, %(modulusz), ++
pl.: x++ (x értékét növeli eggyel - inkrementáló operátor)
Logikai operátorok: && (logikai és),|| (logikai vagy)
String operátor: +
pl.: nev=vezeteknev+' '+keresztnev
Az objektumok a JavaScript-benA JavaScript-ben az objektumok más objektumokból és változókból épülnek fel. Az objektumoknak - hozzájuk rendelt - függvényeik, más néven metódusaik vannak. Vannak elõre definiált objektumok (beépített objektumok), de mi is tudunk objektumokat létrehozni.
Általánosan egy objektum jellemzõjéhez a következõképpen férhetünk hozzá:
objektumNév.tulajdonságNév
Az objektum-neveknél és a tulajdonság-neveknél figyeljünk arra, hogy a JavaScript kis- és nagy betûre érzékeny. Egy tulajdonságot úgy definiálhatunk, ha egyszerûen értéket rendelünk hozzá. Példaként tegyük fel, hogy van már egy Szemely nevû objektum. Ekkor ehhez nev és kor jellemzõket az alábbi módon rendelhetünk:
Szemely.nev = "János"
Szemely.kor = 23
Az objektumok olyanok, mint egy-egy asszociatív tömb, (egy tömb, melyben az elemeknek saját nevük van, így nem kell tudnom, hogy egy elem a tömben pontosan hanyadik; az értékéhez így is hozzáférhetek).
Tehát egy elemhez így is hozzáférhetünk:
Szemely["nev"] = "János"
Fontos szabály, hogy a Netscape 2.0-ban egy tulajdonságot megcímezhetünk egyrészt a tulajdonság nevével, másrészt a "tömb"-ön belüli sorszámával is. A 3.0-ás böngészõben azonban, ha névvel inicializáltunk egy tulajdonságot, akkor arra mindig névvel kell hivatkozni. Hasonlóképpen kell eljárnunk, ha index-el inicializálunk. Ez alól a szabály alól csak a formok képeznek kivételt, mivel itt minkét módon címezhetük (névvel természetesen csak akkor, ha adtunk a formnak nevet).
Objektumokat mi is készíthetünk, ehhez azonban tudnunk kell, hogyan hozhatunk létre függvényeket.
FüggvényekA JavaScriptek írásához meg kell vizsgálnunk azt, hogy hogyan lehet függvényeket létrehozni ill. hogyan lehet azokat meghívni.
(A függvény-utasításoknak van egy csoportja, mely önálló feladatot lát el.) Egy függvényt a function kulcsszóval definiálhatunk, amit a függvény neve követ, ezután kerekzárójelek között, vesszõvel elválasztva az argumentumok, majd kapcsoszárójelek között utasítások következnek. Az így definiált mûveletsor a függvény meghívásakor hajtódik végre. A függvényt a függvény nevével és az ezt követõ - kerekzárójelek között felsorolt, vesszõvel elválasztott - paraméterekkel lehet meghívni. A függvényeket ajánlatos a fejben definiálni, mivel a dokumentum csak a fej letöltõdése után jelenik meg, így elkerülhetõ, hogy a felhasználó olyan függvényt aktivizáljon, ami még definiálatlan.
Nézzünk egy példát az elmondottakra:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Elrejtés indul
function udvozlet(valaki)
{
document.write("Üdvözöllek a lapomon "+valaki+"!");
}
// Elrejtés vége-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
udvozlet("látogató");
</SCRIPT>
</BODY>
Itt tehát definiáltam egy udvozlet nevû függvényt - a fejben, ami a valaki paraméterben kapott szöveget (stringet) - az "Üdvözöllek a lapomon " mögé illesztve - kiírja. Látható a függvény definíció és a függvényhívás módja is. A szövegeket vagy " jelek, vagy ' jelek közé kell zárni.
A függvények visszadhatnak egy értéket return utasítással, az alábbi formában: return érték; vagy return kifejezés;
A függvényben szerepel egy utasítás, mely jól szemlélteti a JavaScript objektum-orientáltságát.
A document.write("..."); utasítás nem tesz mást mint meghívja a JavaScript egy beépített objektumának, a document-nek a write ún. elemfüggvényét, metódusát (az objektumon végrehajtható mûvelet).
A JavaScript ismeri a rekurziót, függvények meghívhatják saját magukat.
A függvények az átadott értékeket vagy a függvény definícióban szereplõ (formális) paramétereken keresztül, vagy az alábbi módon érhetik el:
függvénynév.arguments[i]
ahol a függvénynév az adott függvény neve, az i pedig a paraméter sorszáma (a számozás 0-tól indul). Az argumentumok száma az arguments.length változóból megtudható.
Új objektumok készítéseEgy új objektum elkészítéséhez két dologra van szükség:
1. Egy ún. konstruktor-függvényt kell írni, amely megadja az objektum-típus nevét, tulajdonságait és metódusait.
2. El kell készíteni az objektum egy példányát a new operátorral.
Készítsük el a szemely nevû objektum típusunkat a következõ módon:
function szemely(nev, kor, szulhely){
this.nev=nev
this.kor=kor
this.szulhely=szulhely
}
A fent definiált objektum-típusból a new utasítással készíthetünk konkrét objektumot.
Pl.: peti=new szemely("Kis Péter",16,"Debrecen")
A this objektum a függvényben nem más, mint egy hivatkozás arra a konkrét objektumra, amelyet a new-val éppen most hozunk létre. Jelen pillanatban a this peti-t jelenti, így Péter megfelelõ jellemzõi eltárolódnak.
Egy objektum tulajdonsága lehet egy másik objektum is. Nézzünk erre is egy példát! Készítsünk egy szamla nevû objektumot, melynek a tulajdonosa egy szemely lesz.
function szamla(azonosito,tulajdonos){
this.azonosito=azonosito
this.tulajdonos=tulajdonos
}
Most hozzuk létre Péter számláját az alábbi módon:
szamla1= new szamla(2012,peti)
Figyeljük meg, hogy itt a peti egy objektum neve! Ezután a szamla1 tulajdonosát a következõ képp olvashatjuk ki:
szamla1.tulajdonos.nev (= Kis Péter)
MetódusokA metódusok olyan függvények, amelyek objektumokhoz tartoznak. Egy metódus általában egy adott objektum-típusú objektummal dolgozik. A metódusok a megfelelõ objektumokhoz vannak hozzárendelve.
Egy metódus készítéséhez tehát definiálnunk kell egy függvényt, majd hozzá kell rendelnünk a megfelelõ objektumunkhoz. A hozzárendelés szintaxisa a következõ:
objektum.metódusnév = függvénynév.
Ezt az objektum definíciójánál, annak függvényében kell megtennünk.
A metódus meghívása magától értetõdõen:
objektum.metódusnév(paraméterek)
Az elõbbi példához visszatérve készítsünk egy olyan metódust, melynek megadva egy szemely-t, kiírja annak a nevét.
function neve(){
document.write("A számla tulajdonosa: "+this.nev)
}
Módosítani kell a szemely objektum típust:
function szemely(){
...
this.neve=neve
}
Ezek után következhet a metódus meghívása:
peti.neve()
Ez kiírja a böngészõbe, hogy "A számla tulajdonosa: Kis Péter".
Objektumok törlése
A 2.0-ás böngészõben minden objektum addig él, amíg az õt tartalmazó lap él. Az 1.1-es JavaScript-ben úgy lehet objektumot törölni, hogy az objektum-referenciát null-ra kell állítani.
Az utasítások
A JavaScript utasítások - ahogyan azt már korábban mondtam - nagyon hasonlítanak a C++ utasításaira. Ezeket az utasításokat felsorolás szintjén bemutatom, hogy azok is, akik kevésbé ismerik a C-t - de már programoztak valamilyen nyelven -, el tudják készíteni a saját kis scriptjeiket. Az utasítások után nem kell - de lehet - pontosvesszõt tenni (;) - egy kivétel van, amikor stringben vannak az utasítások (lsd. eseménykezelõknél).
A { } jeleket csak akkor kell használni, ha nem egy utasítást, hanem többet akarunk végrehajtani (utasítás blokk) A [ ] jelek közötti rész opcionális, elhagyható.
Feltételes utasítás
if (feltétel) { utasítások1 [} else { utasítások2 ]}
Ha igaz a feltétel, akkor az utasitások1 fut le; ha hamis a feltétel és van else, akkor az utasítások2 fut le, és ha hamis a feltétel és nincs else, akkor nem történik semmi.
Ciklusok
for ([inicializáló kifejezés] ; [feltétel] ; [ciklusváltozó módosítása])
{ utasítások }
Végrehajtódik az inicializáló kifejezés; kiértékelõdik a feltétel, ha igaz, végrehajtódnak az utasítások; ha hamis a feltétel, akkor vége a ciklusnak; végrehajtódik a ciklusváltozó módosítása; újból kezdõdik a folyamat a feltétel kiértékelésétõl.
for (változó in objektum) { utasítások }
A változó sorra felveszi az objektum jellemzõit és ezekre az értékekre hajtódnak végre az utasítások.
while (feltétel) { utasítások }
Amíg a feltétel igaz, addig végrehajtódnak az utasítások.
continue és break
A continue utasítást ciklusokban lehet kiadni és hatására a for és a while 'ciklusa' megkezdi a következõ ciklust (mintha a ciklus utolsó utasítása után ugrana a vezérlés).
with
Hatáskörében alapértelmezett objektumot definiál.
with (objektum) { utasítások }
Az utasításokban ha nem egyértelmû egy objektumhivatkozás, akkor az objektum (with-beli objektum) egy tulajdonságának értelmezi a böngészõ az adott objektumothivatkozást.
Megjegyzések
A megjegyzéseket - mint a C++-ban - két féle képpen írhatunk.
// Így egy sort
/* Így pedig
több sort
lehet megjegyzésbe tenni.*/
Események kezelése
A JavaScript-re az eseményvezéreltség jellemzõ. Ez azt jelenti, hogy a kis programjaink a felhasználó bizonyos tevékenységeire válaszolva indulnak el. Esemény lehet az, ha felhasználó megnyom egy gombot, vagy ráviszi az egér mutatóját egy linkre, vagy betöltõdik a lapunk a böngészõbe és még sorolhatnám. A Netscape az egyes HTML elemeket újabb attribútumokkal bõvítette ki, mint pl. a név-vel (name), így mintegy objektumokká alakította õket, melyekre így a scriptekbõl hivatkozni lehet. A mi feladatunk, hogy ezekhez az elemekhez/objektumokhoz hozzárendeljük a megfelelõ eseményt, ill. az azt lekezelõ utasításokat. Így egy ún. eseménykezelõ-t definiálunk. Ezt könnyen meg is tehetjük a kibõvített eszközrendszer segítségével.
Az eseményeknek neveik vannak, mely nevek úgy keletkeznek, hogy az esemény angol neve elé odaírjuk az on szót. Így tehát van - csak, hogy néhányat kiemeljek - onClick (kattintottak), onChange (megváltozott), onLoad (letöltõdött) nevû eseménykezelõ. Ezekhez kell a megfelelõ utasításokat, vagy függvényt hozzárendelni.
Pl.:
<form>
<input type="button" value="OK" onClick="alert('Megnyomta a gombot!')">
</form>
A fenti példában tehát utasítottam a böngészõt, hogy ha valaki rákattint a gombra, akkor hozzon létre egy alert (figyelmeztetõ) ablakot a megadott felirattal. Az alert függvény egy elõre elkészített, beépített függvény, melyekrõl késõbb részletesen beszélek, most csak a példa kedvéért használtam. Figyeljük meg az idézõjelek és az aposztrófok használatát!
Természetesen egy-egy esemény nem alkalmazható minden objektumhoz. (Egy képet nem lehet kiválasztani úgy, mint egy legördülõ menü valamely elemét.) Az alábbi táblázatban megtalálhatóak az események és azok az objektumok, amelyekre alkalmazhatók:
| Esemény | Mire alkalmazható | Ekkor következik be | Eseménykezelõ |
| abort | képek | A felhasználó megszakítja a kép letöltését | onAbort |
| blur | ablakok, frame-ek, és minden form elem | A felhasználó elviszi a fókuszt az ablakból, a frame-bõl, vagy a form elemekrõl | onBlur |
| click | gombok, radio gombok, check gombok, submit gombok, reset gombok, link-ek | A felhasználó rákattint valamilyen form-elemre vagy linkre | onClick |
| change | szövegmezõk, szöveg box, legördülõ menü | A felhasználó megváltoztatja az elem értékét | onChange |
| error | képek, ablakok | A dokumentum vagy kép betöltése hibát okoz | onError |
| focus | ablakok, frame-ek és minden form elem | A felhasználó ráviszi a fókuszt az ablakra, a frame-re, vagy a form építõelemeire | onFocus |
| load | a dokumentum body-ja | A felhasználó letölti a dokumentumot | onLoad |
| mouseout | szöveg box, kép, linkek | A felhasználó lehúzza az egérmutatót az adott objektumról | onMouseout |
| mouseover | linkek | A felhasználó a link felett mozog az egérmutatóval | onMouseover |
| reset | formok | A felhasználó reset-eli a formot | onReset |
| select | szövegmezõk, szövegboxok | A felhasználó kiválaszt egy mezõt | onSelect |
| submit | submit gomb | A felhasználó megnyomja a submit gombot | onSubmit |
| unload | dokumentum body-ja | A felhasználó elhagyja a lapot | onUnload |
Nézzünk ezek használatára néhány példát! Próbáljuk ki ezeket!
<a href="#Nézzük" onMouseover="alert('Ez az onMouseover!')">Ez itt megmutatja, mit csinál az onMouseover.</a>
Ez itt megmutatja, mit csinál az onMouseover.
<form><center>
<select name="kereso" onChange="alert('Jó választás!')">
<option value=infoseek>InfoSeek
<option value=webcrawler>Webcrawler
</select>
</center></form>
Ha a másik elemet választjuk ki, bekövetkezik az change esemény.
Egyéb
A JavaScriptekben és a HTML dokumentumokban ékezetes betûket az ISO Latin-I karakterek kódjaival írhatunk. A szövegbe egy karakter helyet egy speciális karakersorozatot kell írni.
Pl.:
Figyeljük meg a kódok felépítését!
