Mi az a JavaScript?

A programozási nyelvek fejlõdését figyelemmel kisérõ programozók fülében ismerõsen cseng a Java szó. A Java napjaink talán legígéretesebb programozási nyelve, melyet a Sun Microsystems és a Netscape Communications Corporation együtt fejlesztettek ki. A Java nyelv nem más, mint egy hatalmas, tisztán objektum-orientált programozási nyelv, melynek nagy ereje, hogy segítségével platformfüggetlen alkalmazások készíthetõk. A Java nyelven megírt programokat egy ún. köztes kódra (byte kód) kell lefordítani, melyek különbözõ platformokon, különbözõ operációs rendszerek alatt futtathatóak - egy értelmezõ program segítségével. A Java szóval napjainkban - a WWW világában - három területen találkozunk.

• Egyrészt beszélünk Java programokról, mely programokat le kell fordítani és önállóan futnak. (Nem támaszkodnak más programokra.)
• A Java appletek (programocskák) - kis Java programok -, melyek a Java-t támogató böngészõkbõl futtathatóak. Ezek tehát felhasználják a böngészõk által nyújtott szolgáltatásokat. Az appleteket is le kell fordítani és - ahogyan azt már korábban bemutattam - ezek HTML dokumentumokból hívhatók.
• A JavaScript a Java nyelv "kis testvérkéje"- mondják sokan. A JavaScript-ek a HTML lap szövegébe épülnek be, csak a böngészõben képesek futni.

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:

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:

pl.: i++, ++i

Két operandusú operátorhoz két operandus szükséges:

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

A 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á:

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.

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

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

Egy ú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)

A 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

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

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.

A változó sorra felveszi az objektum jellemzõit és ezekre az értékekre hajtódnak végre az 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:

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

&aacute; = á
&Aacute;= Á
&eacute; = é
&iacute;  = í
&ouml;   = ö
&otilde;  = õ
stb.