online kép - Fájl  tubefájl feltöltés file feltöltés - adja hozzá a fájlokat onlinefedezze fel a legújabb online dokumentumokKapcsolat
  
 

Letöltheto dokumentumok, programok, törvények, tervezetek, javaslatok, egyéb hasznos információk, receptek - Fájl kiterjesztések - fajltube.com

 

Online dokumentumok - kep
  

JavaScript alapok

számítógépes



Fájl küldése e-mail



egyéb tételek

 
Automatika Segédlet Elektronikus eszközök szak II: évfolyam Nappali Müszaki Manager szak II: évfolyam Nappali
Létező adatbazis vagy objektumablak bezarasa, illetve megnyitasa - ACCESS
A személyi szamítógépek felépítése (részegységek, jellemzöik). Processzorok jellemzöi, fajtai. Memória jellemzöi, típusai.
Grafikai alapfogalmak
Kezdetek ++
Egy kis elmélet
Csomag alapú halózatok alapjai
Network Monitor A halózati forgalom elemzése - 1. rész, elméleti alapok
A relaciós adatmodell, kulcsok
 
 

JavaScript alapok


Mi is az a JavaScript?

A JavaScript egy objektum alapú programozási nyelv, melyet a Netscape fejlesztett ki eredetileg LiveScript néven. A LiveScript és a Java ötvözéséből alakult ki a JavaScript, melyet először a Netscape Navigator 2.0-ban implementáltak. Sokan nevezik a nyelvet objektum orientáltnak, ami azonban nem teljesen igaz, hiszen olyan alapvető tulajdonságok, mint például az öröklődés, hiányoznak belőle.
A JavaScript a Java appletektől és a Java programoktól eltérően futásidőben kerül értelmezésre. Tehát a böngésző letölti az oldalt, megjeleníti a tartalmát, majd értelmezi a JavaScript (vagy más nyelven írt scriptek) sorait. Már most fontos leszögezni, hogy a JavaScript nem Java! Szintaktikájában és felépítésében ugyan nagyon hasonlít a nevét adó proramozási nyelvre, azonban le 848d39i hetőségei sokkal korlátozottabbak.

JavaScript és a böngészők

Mivel a JavaScript interpretált nyelv, a programunk csak az oldal betöltésekor fog lefutni, addig a HTML kód sorai között pihen. Ennek a megoldásnak az az előnye, hogy a hibás programsorokat könnyedén tudjuk javítani, hátránya viszont az, hogy a fáradtságos munkával megírt scriptünkhöz bárki hozzáférhet, aki megtekinti oldalunkat.
Ha egy programot a böngésző futtat, annak vannak pozitív és negatív tulajdonságai is. Előnyként értékelhető az, hogy a scriptünk platformfüggetlen lesz, tehát ugyanúgy fog futni egy Macintosh gép böngészőjében, mint a sokat dicsért Windows-os környezetben. Hátrányai közé sorolható viszont az, hogy a script hibátlan futtatása - a szabványok többféle értelmezésének köszönhetően - erősen a használt böngésző típusának függvénye. Jelentős eltérések fedezhetők fel már csak Windows-os böngészők JavaScript implementációinak összehasonlítása során is. Nézzünk csak meg egy Internet Explorer 5.0-ra optimalizált oldalt Netscape, vagy Opera böngészőkkel! Jó esetben csak néhány funkció nem működik az oldalon, máskor azonban az egész weblap működésképtelenné válhat.
További problémák merülhetnek fel, ha oldalunk látogatója olyan böngészőt használ, mely nem támogatja, vagy nem ismeri a JavaScriptet, bár ennek valószínűsége manapság igen kicsi. E böngészők ugyanis hajlamosak arra, hogy a számukra értelmezhetetlen utasításokat egyszerűen megjelenítik, mintha az a weblap szövegének része lenne, elcsúfítva és feltárva ezzel gondosan elkészített oldalunkat. Hogy ezt elkerüljük az utasításainkat a HTML kód megjegyzései közé kell beillesztenünk: a "<!--" és "-->" szekvenciák közé. Az újabb böngészőket nem zavarja ez a kis csalafintaság, a HTML szabványt pontosan követő régebbi változatok pedig nem zavarodnak össze tőle, mert egyszerűen kommentként értelmezik a valójában script-kódot tartalmazó oldalrészeket.
A fentiek miatt nagyon fontos, hogy szem előtt tartsuk a következő dolgokat: scripteket csak korlátozott mértékben alkalmazzunk, és lehetőleg úgy, hogy azt több böngésző segítségével is kipróbáljuk. A másik dolog, hogy ha amennyiben lehetőség van rá, alkalmazzunk statikus HTML megoldásokat a feladatok ellátására és szerver-oldali ellenőrzéseket a bemenő adatok validálására arra az esetre, ha a JavaScript kódunk ezt a feladatot a böngésző vezriója és/vagy beállításai miatt nem képes elvégezni. Hogy egy kicsit érthetőbb legyen: ha script segítségével automatikusan átirányítunk egy oldalt egy másikra (később leírjuk hogyan), akkor tegyünk az oldalra egy linket is, amelyik a másik oldalra vezet, azon böngészők számára, akik nem értik a JavaScriptet. A problémák egy része ugyan a böngésző azonosításával (szintén később) elkerülhető, azonban jobb a scriptek használatával csínján bánni.



JavaScript beágyazása a HTML dokumentumba

Miután megismertük a nyelv történetét és sajátosságait, lássuk az első programot, melynek feladata mindössze annyi lesz, hogy egy kis felbukkanó üzenetablakban megjeleníti a "Hello World!" szöveget.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
 alert("Hello World!");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

A példa egyszerű, de ugyanakkor nagyon szemléletes (remélhetőleg). A HTML dokumentumunk fejrészébe illesztettünk be egy programsort a <SCRIPT> tagok közé, így a böngészővel tudattuk, hogy a HTML kódot más nyelven írt scripttel szakítjuk meg. Mivel többféle scriptnyelv is létezik (pl.: VBScript), és ezek közül többet is használhatunk egy dokumentumon belül, a böngészőnek megmondhatjuk, hogy mely scripteket hogyan kell értelmeznie. Ehhez a SCRIPT tag LANGUAGE attribútumát kell beállítanunk. Ha például egyszerűen a JavaScript szót írjuk ide be, az a böngésző számára a JavaScript 1.0-s verzióját jelenti. Ha olyan szolgáltatásokat is használni szeretnénk, melyek ebben a verzióban még nem szerepelnek, az attribútumnak adjuk értékül a JavaScript1.2-t, és máris új funkciókkal bővülnek scriptünk lehetőségei.
Térjünk vissza egy pillanatra a programhoz, mely tulajdonképpen egyetlen sorból áll, mely elvégzi a kitűzött feladatot, azaz megjeleníti üzenetünket. Ehhez az ALERT() metódust (ha jobban tetszik függvényt, de legyünk objektum alapúak), használtuk. Az alert eljárás használata rendkívül egyszerű a zárójelek között kell megadnunk a megjelenítendő szöveget. Ha szövegünk statikus, azaz nem változik, idézőjelek között kell beillesztenünk a függvénybe. Az alert segítségével a változók értékeit is megjeleníthetjük, de erről majd később lesz szó.

Fontos események

Nem csak a mi életünkben, hanem HTML oldalunk életében is vannak fontos események, például amikor valaki végre betölti lapunkat, amikor kattint rajta, vagy amikor elhagyja azt. Ezeket az eseményeket, vagy ha jobban tetszik felhasználói interakciókat scriptünk képes lekezelni beépített eseményekezelői segítségével. A legfontosabb eseményeket foglaljuk össze az alábbiakban.
 

Esemény neve

Eseménykezelő

Mikor következik be

load

onLoad

a HTML oldal betöltésekor

click

onClick

az objektumra történő kattintáskor

change

onChange

ha az űrlap mezőjének értéke megváltozik

mouseover

onMouseOver

az egérmutató az objektum fölött van

A felsorolás természetesen nem teljes, azonban néhány alapvető ismeretet szerezhetünk belőle. Az első, amit fontos tudni, hogy értelemszerűen nem minden objektumhoz rendelhetünk hozzá minden eseményt (a későbbiekben egy nagyobb táblázat segít majd ebben eligazodni). A második fontos tudnivaló az eseménykezelők helyes leírásának módja, a JavaScript ugyanis - akárcsak az igazi Java - különbséget tesz a kis és nagybetűk között. Ennek megfelelően az eseménykezelők neveit mindig kis kezdőbetűvel, a szóösszetételeknél azonban nagybetűvel kell írni, így lesz az onmouseover-ből onMouseOver.

Használjuk amit tudunk, 2. példa

A következő példában tudjuk is alkalmazni a most megszerzett ismereteinket. A feladat kicsit bonyolódott, de a HTML-t ismerők számára azért könnyen értelmezhető lesz. Mindössze annyi a dolgunk, hogy egy gombra való kattintáskor írjuk ki a "Rámkattintottál!" szöveget. Ehhez létre kell hoznunk egy HTML formot, amibe beágyazhatjuk a gombot. A HTML kód ismertetésébe most nem szeretnék belebonyolódni, hiszen a cikknek ez nem témája. A gombra való kattintáskor tehát bekövetkezik egy Click esemény, mely meghívja az onClick eseménykezelőt, melynek hatására lefut a scriptünk, és kiírja a szöveget. A forráskód tehát a következő:

<HTML>
<BODY>
<FORM>
<INPUT TYPE="BUTTON" NAME="GOMB" VALUE="Kattints ide!"
   onClick= "alert('Rámkattintottál!')">

</FORM>
</BODY>
</HTML>

A fentiekből remélem teljesen egyértelmű mit miért csináltunk, de az idézőjelek helyes használatára azért szeretném mindenki figyelmét felhívni. Scriptünk írása közben ugyanis használhatunk szimpla és dupla idézőjeleket is, és kombinálhatjuk is őket, de mindig ügyeljünk a sorrendre. Ha egy szöveget szimpla idézőjellel kezdtünk, akkor azzal is zárjuk be, egyértelműen kifejezve ezzel a szöveg és az utasítás határait.

Link a Script-re

Ennek a fejezetnek két fontos tanulsága lesz. Az első, hogy a JavaScriptünket nemcsak események hatására hívhatjuk meg, hanem szabványos HTML linkek segítségével is, a második pedig az, hogy ahány böngésző, annyi szokás. Mit is jelent ez? Azt már tudjuk, hogy a Netscape-ben jelent meg először a JavaScript, és mint látványos és jól használható scriptnyelv hamarosan el is terjedt, és több böngészőbe is beépítették. A böngészők fejlesztői azonban nem egységesen implementálták a nyelvet, és ez érdekes megoldásokhoz vezetett. IE 4.0 alatt tesztelve oldalunkat semmi baj nem származik abból, ha egy képhez rendeljük hozzá az onClick eseményt - ami a JavaScript szabályai szerint súlyos hibának számít - sőt, oldalunk még megfelelően is fog működni. Ha azonban ezt az oldalt a Netscape valamely kiadásával tekintjük meg jobb esetben nem történik semmi, ha a képre kattintunk, rosszabb esetben hibaüzenetet is kapunk. Akkor vajon mi a teendő ha egy képhez az onClick eseménykezelőt  szeretnénk rendelni, és szeretnénk oldalunkat lehetőleg Netscape és Opera böngészőkkel is élvezhetővé tenni? Ekkor használhatjuk a következő megoldást: képhez ugyan nem, de linkhez már rendelhetünk Click eseményt. Tehát a képet, mint szabványos linket hozzuk létre viszont href attribútumának a következő értéket adjuk: href="javascript:void(utasítások, függvények)". Talán egy példa segíteni fog az előbbiek megértésében.

<HTML>
<BODY>
<a href="javascript:void(alert('Működik!'))">link, ami akár egy kép is lehet</a>
</BODY>
</HTML>

Tehát létrehoztunk egy linket -  ami nem csak szöveg, hanem akár egy kép is lehet - aminek href tagjában megadtuk, hogy a link valójában nem egy másik HTML oldalra mutat, hanem egy JavaScript utasításra, ami esetünkben az alert függvény meghívása. Jogos a kérdés, hogy miért kell az egészet zárójelbe tenni, és még azt is eléírni, hogy void? A válasz egyszerű: a függvény értéket adhat vissza, és a visszaadott érték a képernyőn jelenne meg, amit viszont a VOID() megakadályoz. Ezt a megoldást csak akkor kell alkalmaznunk, ha a meghívott eljárásnak van visszaadott értéke, tehát esetünkben nem.

Csoportosítsunk, avagy a függvények

A függvények jelentőségének megértéséhez képzeljük el, hogy egy gombra való kattintáskor két lépésből álló műveletsort kell elvégeznünk: le kell ellenőriznünk egy megadott mező értékét, és ha helyes, akkor el kell küldenünk azt a szervernek. Mi a teendő ilyenkor? Rakjuk az egészet az eseménykezelő meghívásába? Megtehetjük, de van szebb megoldás is: használjunk függvényeket. A függvényeket teljesen szabadon definiálhatjuk a következő szintaktikával:

function fuggveny(valtozo)

Az ellenőrzést és az adatok elküldését elvégezhetjük egy függvény segítségével, így az eseménykezelő meghívása után csak a függvényünk nevét kell írnunk. Ennek a függvénynek átadjuk az űrlap megfelelő mezőjének értékét és kezdődhet is a vizsgálat. Az ilyen függvényeket a HTML dokumentum elején szokás definiálni, elkerülve azt, hogy előbb hívjuk meg a függvényt, mint ahogy a leírása szerepelne. A legcélszerűbb ha függvényeinket még a fejrészben deklaráljuk, így ezek a problémák nem fordulhatnak elő. A függvény írása  során egész csomó változóval dolgozhatunk, így fontos hogy ismerjük azok hatáskörét. A változók érvényességi köre attól függ, hogy hol deklaráltuk őket. Ha a függvényeken kívül, akkor az egész dokumentumra érvényes, ha függvényen belül, akkor csak az adott függvényen belül érhetjük el őket.
A függvények használatát mutatja be a következő egyszerű példa, mely egy figyelmeztető ablakban írja ki, hogy az OK és a Mégse lehetőségek közül melyiket választottuk. A feladat nem túl bonyolult, nem is használja ki a függvények fenti sorokban leírt tulajdonságait, de talán érthetővé teszi használatuk okát.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">


 function dontes()
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<input type="button" value="Válassz!" onClick="dontes()">
</FORM>
</BODY>
</HTML>

Ha utasításainkat nem csoportosítjuk egy függvénybe már egy ilyen egyszerű feladat is teljesen átláthatatlan forráskódot eredményezhet, hiszen a függvényben szereplő utasítások mind egy sorba kerültek volna. A fenti script értelmezéséhez néhány alapvető ismeret azért szükséges. A CONFIRM() metódus egy választó-ablakot jelenít meg a képernyőn, ahol az OK és a Mégsem lehetőségek közül választhatunk. Ha az OK-t választjuk az eljárás igaz értékkel tér vissza, ha a Mégse gombra kattintunk hamis a visszatérési érték. Ennek megfelelően a függvényben lévő feltétel teljesül, illetve nem teljesül, tehát a választásunknak megfelelő figyelmeztető ablak jelenik meg a képernyőn.
Eddig még nem szóltunk a függvények alkalmazásának másik előnyéről: nevezetesen arról, hogy az ilyen módon megírt függvények funkcióit az oldalon, vagy más oldalakon többször is igénybe vehetjük, anélkül hogy újra meg kellene írnunk az egészet. Ahhoz, hogy mélyebben megismerkedjünk a JavaScript-tel, nagyon fontos megérteni a következő fejezetet.

Objektumok, dokumentumok

Tudjuk, hogy a JavaScript objektum alapú, és nem objektum orientált nyelv, hiszen az objektumok egy szinten helyezkednek el, objektumai között mégis szoros, alá és fölérendeltségi viszony figyelhető meg. Az egész HTML dokumentumunk ilyen objektumokból épül fel, melyek alapkontextusát a window objektum adja. Az objektumoknak további objektumai, tulajdonságai és metódusai is lehetnek, amelyekre a pont-operátor segítségével hivatkozhatunk. Lássunk egy egyszerű példát: ha a HTML oldalunk URL-jét akarjuk megtudni, tehát azt az Internet-címet, amin keresztül a lapot elérjük, a document objektum location objektumának értékét kell kiíratnunk: document.location. Az objektumok metódusait is hasonló módon érhetjük el: a dokumentum név mezőjére való fókuszáláshoz például a mezőhöz tartozó FOCUS() metódust kell meghívnunk: document.form.név.focus().
Az objektumokat nagyon sokféle módon elérhetjük programozás során, ami megkönnyíti a munkát, viszont nagyon zavaró is lehet, ha valaki nincs tisztában az objektumok hierarchiájával, ezért jól jöhet a következő segítség. A teljes HTML dokumentum objektumok sokaságából épül fel, és a JavaScript segítségével szinte minden egyes objektumnak meg tudjuk változtatni az összes tulajdonságát - hiszen erre találták ki. Építsünk fel egy HTML űrlapot, mely telis-tele van különböző beviteli mezőkkel rádiógombokkal, és checkbox-okkal. Ennek a dokumentumnak a fő objektuma a document objektum. Ennek további objektumai a formok, melyek további objektumokként tartalmazzák a beviteli mezőket. A beviteli mezőknek pedig további metódusai és tulajdonságai lehetnek. Így tehát egy beviteli mező értékét a következőképpen érhetjük el: document.form.mezo.value. Aki eddig követni tudta, most lehet, hogy elveszti a fonalat: az objektumoknak ugyanis nem kötelező, de lehet nevet adni. Az objektumok ekkor háromféle módon érhetők el. Az előbbi példánál maradva: a beviteli mező értéke a következőképpen érhető el:

- document.form.mezo.value - document.forms[0].elements[0].value - document.forms['form'].elements['mezo'].value

Annak érdekében, hogy teljes legyen a káosz a fenti elérési módozatokat kombinálhatjuk is. Sokat segíthet azonban, ha tudjuk, hogy a dokumentum elemei a lap tetejétől kezdve kerülnek beszámozásra, tehát a document.forms[0] a dokumentum tetejéhez legközelebb eső HTML formot jelenti. A fentiek megemésztésében jól jöhet a következő példa:

9. Az oldal tulajdonságainak módosítása

A feladatunk mindössze annyi lesz, hogy az előbbiekben leírtakat megpróbáljuk a gyakorlatban alkalmazni. Létrehozunk egy formot egy beviteli mezővel, amelynek kiírjuk, majd megváltoztatjuk az értékét. Ehhez két függvényt fogunk használni, egyet a kiíráshoz és egyet a megváltoztatáshoz.

<HTML>
<HEAD>
<SCRIPT LANGUGE="JavaScript">
 function kiiras(mezo)
 function valtoztatas()
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form">
<input type="text" name="szoveg">
<input type="button" value="Kiir" onClick="kiiras(document.form.szoveg.value)">
<input type="button" value="Valtoztat" onClick="valtoztatas()">
</FORM>
</BODY>
</HTML>

Ahhoz hogy a fent leírt feladatot el tudjuk végezni a KIIRAS() függvény meg kell hogy kapja a beviteli mező értékét meghívásakor, mely jelen esetben a document.form.szoveg.value tulajdonságon keresztül érhető el. A VALTOZTATAS() eljárásnak ezzel szemben nincs szüksége semmilyen paraméterre, hiszen feladata csak annyi, hogy a mező értékét megváltoztassa. A fenti példa ugyan nagyon egyszerű, de vegyük észre, hogy ezzel a módszerrel, tehát egy egyszerű értékadással, módosíthatjuk minden objektum tulajdonságát, dinamikusan változtatva ezzel oldalunk megjelenését. Kicserélhetjük a háttérszínt, de akár a betűk színét is megváltoztathatjuk. Ezeket a lehetőségeket a későbbiekben részletesen is bemutatom majd.
Most térjünk még vissza az előbbi példához. Mi van akkor, ha a beviteli mezőnek nem adunk nevet, akkor a változtatáskor hogyan érhetjük el a beviteli mezőnk értékét. A válasz egyszerű, a fentiekben leírt módon. Ha tehát az VALTOZTATAS() függvényt kicseréljük a következőre, minden ugyanúgy fog működni.

function valtoztatas()

Ha hibáztunk

Mi történik, ha hibát vétünk a program írása közben? A többi programozási nyelvben ilyenkor a fordítótól figyelmeztetést vagy hibaüzenetet kapunk. JavaScript esetében a fordítást és a futtatást is egy böngésző végzi, így a hibajelzéseket innen kell várnunk, néhány esetben sajnos hiába. Azért hiába, mert a böngészők "természetesen" ebben is különböznek. A legfejlettebb hibajelzéssel a Netscape rendelkezik, az Explorer már kicsit szűkmarkúbb, az Operát pedig még soha nem sikerült rábírnom hogy jelezze a hibát. Menjünk akkor szépen sorban.
Ha a Netscape hibát jelez ("Javascript error!" Felirat jelenik meg az állapot sorban), akkor a címsorba kell beírnunk a "javascript:" sort, és máris rámutat a hiba okára. Ez a funkció akkor is jól használható, ha csak ellenőrizni szeretnénk egy-egy utasítást, mivel azokat itt is tesztelhetjük. Írjuk be a címsorba, hogy "javascript:alert('Hiba')" és máris megjelenik a figyelmeztető ablak. Ez a funkció rendkívül egyszerűen és hatékonyan használható.
Az Explorer szolídabban (egy kis sárga háromszög a status sor sarkában) jelzi a hibánkat, és a hiba okának felderítésében sem jár el a Netscape gondosságával.
Az Opera, annak ellenére, hogy remek böngésző, sajnos semmilyen segítséget nem nyújt a hibák felderítésében, egyszerűen csak nem futtatja le a JavaScriptet, ha hibát talál.



További lehetőségek

A fent leírtak természetesen nem merítik ki a JavaScript lehetőségeit, azokról még oldalakat lehetne írni, de azt hiszem jó áttekintést adnak a szolgáltatások sokszínűségéről. A mostani rövid leírások után a továbbiakban részletesebben is meg fogunk ismerkedni az egyes funkciókban rejlő lehetőségekkel, és remélem használható példákkal tudok szolgálni, amiket mindenki felhasználhat majd saját honlapja szebbé és látványosabbá tételében. Addig is mindenkinek ajánlom, hogy nézze át, gépelje be és futtassa le a fenti példákat, szerkessze át őket, és akkor kedvet fog kapni, hogy megismerje ezt az egyszerű, de rendkívül jól használható nyelvet.



Események

Ahhoz, hogy hatékonyan használhassuk a JavaScript nyelvet, szükségünk lesz egész csomó esemény kezelésére, hiszen a felhasználói beavatkozások, tevékenységek irányítják lapunk működését. Az események lekezeléséhez - mint már tudjuk - eseménykezelőket kell használnunk. Ezek egy kis részét már ismerjük, de a programozás során sokkal több esemény megkülönböztetésére lesz szükségünk. Amit fontos még tudni, hogy nem minden esemény rendelhető hozzá minden objektumhoz, elemhez. Hogy tisztán lássuk az események - eseménykezelők - objektumok viszonyát, nézzük meg alaposan az alábbi táblázatot.
 
 

esemény

eseménykezelő

objektum

Akkor következik be...

blur

onBlur

window, frame, form

elemei ha a fókusz egy másik objektumra kerül

click

onClick

gomb, radio-gomb, checkbox,link

ha az objektumra kattintunk

change

onChange

text,textarea,select

ha megváltozik az adott mező értéke

focus

onFocus

window, frame, form

elemei ha a fókusz az elemre kerül

keydown

onKeyDown

document, image, link, text, textarea

ha egy billentyű lenyomásra kerül

keyup

onKeyUp

document, image, link, text, textarea

ha egy billentyű felengedésre kerül

load

onLoad

document

amikor a HTML oldal betöltődik

mouseout

onMouseOut

area, link

ha az egér elhagyja az objektumot

Mouseover

onMouseOver

area, link

ha az egér az elem fölé kerül

Select

onSelect

text, textarea

ha a mező valamely részét kiválasztjuk

Submit

onSubmit

form

ha a submit gombra kattintunk

események - eseménykezelők - objektumok

Ha esetleg a fenti táblázat értelmezéséhez íme egy kis magyarázat: az első oszlopban szerepel az esemény neve, a másodikban a hozzá tartozó eseménykezelő, a harmadik oszlop tartalmazza azon objektumok listáját, melyekhez az eseménykezelő hozzárendelhető, és végül a negyedik oszlopban láthatjuk, hogy az adott esemény mikor következik be.
Mivel a múltkori rész kicsit szárazra sikerült, és nem szeretnék újra ebbe a hibába esni, most használjuk is fel a fentieket valamilyen gyakorlati példán!


Változó képek

Mielőtt megvizsgálnánk a forráskódot, idézzük fel, hogyan is érhetünk el egy képet a HTML oldalunkon. Igen, igen, ennek meglehetősen sok módja van, most a legegyszerűbbet választjuk: nevet adunk a "gyereknek". Ezt úgy tehetjük meg, hogy a kép beillesztésénél az <IMG> tag-be berakjuk a NAME="kep" attribútumot. Ha ezt megtettük, képünkre a következő módon hivatkozhatunk: document.kep, a forrásfájlt pedig a document.kep.src tulajdonságon keresztül érhetjük el, illetve változtathatjuk meg.
A feladat rendkívül egyszerű lesz: változzon meg a kép, ha a felhasználó fölé viszi az egeret, nyerje vissza eredeti állapotát, ha elvitte onnan, és legyen más akkor is, ha rákattintottunk. Első látásra talán kicsit bonyolultnak tűnik a feladat, de vegyük sorra a szükséges ismereteket. Először is meg kell tudnunk különböztetni a látogató interakcióit: a kép fölött van, vagy klikkel stb. Ezt azonban eddigi tudásunkkal már meg tudjuk tenni, hiszen az előbb ismertetett események között ezek is szerepelnek. A másik probléma, hogy a megfelelő eseménykezelők meghívásakor cserélődjenek ki a képek. Ezt is egyszerűen meg tudjuk oldani. Mindössze annyit kell tennünk, hogy a document.kep.src attribútumát meg kell változtatnunk, mégpedig annak a fájlnak az elérési útját kell neki értékül adnunk, amelyik az új képet tartalmazza. Most, hogy minden ismeretnek birtokában vagyunk, lássuk a programot:

<html>
<body>
<a href="javascript:alert('Lenyomva is más a kép, de sajnos hamar visszaugrik')">
<img name="kep" src="1.jpg"
  onMouseOver="document.kep.src='2.jpg'"
  onMouseOut="document.kep.src='1.jpg'"
  onClick="document.kep.src='3.jpg'">
</a>
</body>
</html>

Még egy kis magyarázatot azért fűznék a fenti példához: az 1.jpg fájlban található az alapesetben megjelenő kép, a 2.jpg-ben a "Fölöttem az egér" feliratú gomb, míg a 3.jpg tartalmazza a kattintáskor megjelenő képet. Mivel az egérrel kattintás csak rövid ideig tart, ezért a 3-as számú képünk megjelenését nem is veszzük észre, de egy kis alert ablak azért tájékoztat bennünket, hogy az esemény bekövetkezett.
Azt hiszem senkinek nem okozott gondot a példa értelmezése, ezért most lépjünk tovább, de csak egy kicsivel. Mi történik, ha a cserélendő képek túl nagyok, vagy a felhasználó sávszélessége túl kicsi? Nagyon egyszerű, a képek kisebb nagyobb késéssel fognak megjelenni, hiszen letöltésük csak az első hivatkozás pillanatában fog elkezdődni (azaz pl. a 2.jpg akkor, amikor először mozgatjuk az egeret a kép fölé), és a kicsi sávszélesség miatt akár jó néhány másodpercbe is beletelhet mire  a böngészőnek sikerül a képet letöltenie, és végre megjelenítheti azt. Ez időnként elég zavaró lehet. Azonban erre is van megoldás.


Előtöltött képek

A fenti probléma megoldása nem is annyira egyszerű, mint amennyire gondolnánk. Létre kell hoznunk új objektumokat, mégpedig olyanokat, amelyek képek, de nem jelennek meg az oldal betöltődéskor a dokumentum felületén. Ezt az Image objektum használatával érhetjük el. Lássuk először a forráskódot, majd sorról sorra a magyarázatot.

<html>
<script>

elsoKep = new Image();
elsoKep.src = "1.jpg";
masodikKep = new Image();
masodikKep.src = "2.jpg";

function kepMutat(forras)

</script>

<body>
<a href="javascript:alert('Előre töltött képekkel...')">
<img name="kep" src="1.jpg"
 onMouseOver="kepMutat(2)"
 onMouseOut="kepMutat(1)">
</body>
</html>

A HTML kód remélem már mindenkinek világos: létrehozunk egy képet - ami feltétlenül link kell, hogy legyen -, amely különböző események hatására különböző függvényeket hív meg. A hangsúly itt a függvényeken, illetve a JavaScript kódon van. A script törzsében - tehát a függvény definícióján kívül - létrehozunk két új objektumot, melyek így a függvényből és azon kívülről is elérhetőek lesznek. Ezek az objektumok Image, azaz kép objektumok, melyeket a következőképpen hoztunk létre: elsoKep = new Image(). Tehát az elsoKep egy új (new) kép objektum lesz (Image), melynek, a következő sorban, az src attribútumában megadjuk a képet tartalmazó fájlnak a nevét. Hasonlóan hozzuk létre a második képünket is. Ezzel a módszerrel a képek már az oldal letöltésre kerülnek a memóriába vagy a böngésző helyi gyorsítótárába, így a képcserekor csak meg kell jeleníteni őket, nem kell azok letöltésére várnunk. Nincs más dolgunk, mint írni egy függvényt, ami a képek attribútumainak változtatásait elvégzi. Erre a feladatra szolgál a kepMutat eljárás, ami a paraméterétől függően az elsoKep vagy a masodikKep objektumokban tárolt képeket jeleníti meg, egy feltételtől függően.
A fenti módszerek alkalmazásával - akár többtucat képet is használhatunk - nagyon látványossá tehetünk már egy egyszerű oldalt is, azonban itt sem érdemes túlzásokba esni, és túldíszíteni a lapunkat.


Időzítések

Az oldalak díszítéséről, látványosabbá tételéről szól a következő fejezet is, de ehhez némi tudást kell magunkévá tennünk, meg kell ismerkednünk az időzítéssel és a böngésző status sorával is.
A JavaScript lehetőséget ad az utasítások időzítésére. Ez az időzítés tulajdonképpen azt jelenti, hogy az adott utasítás csak bizonyos idő múlva fog végrehajtódni. Erre a funkcióra sokszor szükségünk lehet, ha valamit késleltetni szeretnénk, például a felhasználónak időt szeretnénk adni egy szöveg elolvasására, mielőtt új oldalt töltenénk be. Az ilyen esetekre találták ki a setTimeout() metódust, melynek paraméterei a következők: setTimeout("utasítás",idő). Az eljárás a paraméterül kapott utasítást - melyet mindig idézőjelek közé kell tennünk - csak adott idő múlva hajtja végre. Ha tehát azt szeretnénk, hogy 5 másodperc múlva ugorjunk egy másik oldalra, akkor a következő utasítást kell használnunk: setTimeout("location.href='uj_oldal.html'",5000), ugyanis az idő paraméteréül szolgáló számokat milliszekundumokban (azaz ezred másodpercekben) kell megadnunk.
A következő egyszerű példa segít megérteni az időzítések használatának okát, és egy kis segítséget ad a következő fejezethez is. Feladatunk az lesz, hogy egy beviteli mezőben bizonyos késleltetéssel írjunk ki egy szöveget, mintha valaki éppen most gépelné be azt. Lássuk először a forráskódot majd a hozzá tartozó magyarázatot.

<html>
<script>

function kiiras()
 }



</script>
<body onLoad="kiiras()">
<form name='form'>
<input type='text' name='mezo' size='35'>
</form>
</body>
</html>

A lényeg - mint mindig - ezúttal is a JavaScript részben van. A HTML kódban mindössze egy beviteli mezőt definiálunk a hozzá tartozó form-mal, és az oldal betöltődésekor meghívjuk a kiiras eljárást. Nézzük akkor a függvényünket sorról sorra. Az első sorban definiálunk egy változót, melyben elhelyezzük a kiírandó szöveget. A második sorban létrehozunk még egy változót, melyben a már kiírt szöveget tároljuk el. Mivel szükségünk lesz mind a kiírandó, mind a kiírt szöveg hosszára, ezért a következő utasítások segítségével ezt a két értéket tároljuk el egy-egy változóban. Következik egy feltétel, mely eldönti, hogy folytassuk-e a kiíratást, vagy befejeződhet scriptünk futása, azaz már kiírtuk a kívánt szöveget. Ebből következően a feltétel igaz, ha a kiírt szöveg hossza kisebb, mint a kiírandóé. Ekkor a kiírt karakterek számát növeljük a substring metódus segítségével, majd újra meghívjuk függvényünket, egy kis késleltetés beiktatásával.
Azt hiszem, nem árt, ha a feltétel igaz ágában szereplő két sort kicsi tovább elemezzük. A kiirandoSzoveg változónak használjuk a substring metódusát, melynek két paramétere van. Az első paraméter mondja meg, hogy hányadik karaktertől kezdve, a második pedig hogy hányadik karakterig írjuk ki a stringet. Tehát ha stringünk a"valami" szóból áll, akkor annak string.substring(0,2) metódusa a "va" szótagot adja vissza értékül. Mivel esetünkben a második paraméter mindig egyel növekszik, így minden lépésben egyel több karakter jelenik meg a kiírandó stringből a képernyőn. Most következik a késleltetés, mely 0,3 másodperc múlva újra meghívja a kiiras() eljárást, és így újabb betű jelenhet  meg a beviteli mezőben.
Ezt a módszert, amikor a függvény saját magát hívja meg rekurziónak nevezzük, és ilyen, vagy ehhez hasonló problémák (faktoriális kiszámítása) nagyon jó hasznát vehetjük. Talán felmerül a kérdés a kedves olvasóban, hogy miért volt szükség a fenti példára, hiszen ennek nem sok hasznát vehetjük egy valódi oldal elkészítésében. A kérdésre a következő fejezetben kaphatunk választ.

Status sor

A díszítésnek, szépítésnek pár évvel ezelőtt nagyon kedvelt eszköze volt a status sor telezsúfolása különböző ide-oda mozgó szövegekkel, majd - ahogy az lenni szokott - "kiment a divatból". Ennek oka leginkább az volt, hogy mindenki, minden helyzetben és szinte mindent itt jelenített meg, és így meglehetősen elcsépelté vált. A status sor egyébként - ha valaki esetleg nem tudná - a böngészők alján lévő, általában üres, keskeny, szürke sáv, ahol különböző információkat szokott a böngésző megjeleníteni, az oldal letöltésével és a linkekkel kapcsolatban. Ha ízlésesen és informatívan használjuk ki ezt az apró kis helyet, elkerülhetjük a túlzsúfoltság érzését, és hasznos információkkal láthatjuk el az oldalunkra tévedt látogatókat.
A status sorban állandó és változó információk is megjelenhetnek, éppúgy, mint egy beviteli mezőben. A két mezőbe való írás módja sem tér el jelentősen egymástól, így kézenfekvő, hogy az előbbi példában használt szövegkiíró scriptet ültessük át a status sorra. A kód csak annyiban változik, hogy nem kell formot deklarálnunk, és a beviteli mező helyett a scriptünk kimenete a status sor lesz.

<html>
<script>

function kiiras()
 }

</script>
<body onLoad="kiiras()">
Ne ide nézz, hanem egy kicsit lejjebb...
</body>
</html>

A kódban történt változtatások szerintem maguktól értetődőek, ezért nem is szeretném túlmagyarázni a dolgot. A scriptünkkel - remélhetőleg - csak egyetlen gond van, mégpedig az, hogy ugyan hajlandó kiírni a szöveget, azonban futása ekkor be is fejeződik, és a status sor újra unalmassá válik. Erre a problémára nyújt gyógyírt a következő példa.

Status sor törléssel

A feladatot tovább bonyolítjuk: a szöveg megjelenítése után scriptünk törölje is azt le, majd újra írja vissza, utánozva ezzel valamiféle reklámcsíkot. Ezzel oldalunk állandó mozgásban lesz tartava, és ne ül rá a szürke egyhangúság.
A kódunk hosszra nem sokat, tartalmilag viszont annál többet fog változni. Először is tudnunk kell, hogy milyen irányba haladunk a kiírással, írunk, vagy éppen törlünk. Ennek érdekében a   script törzsében deklarálunk egy változót torles névvel, melynek kezdeti értékét 0-ba állítjuk, jelezve ezzel, hogy nem törlünk, hanem írunk. Ezek után a kiírást végző függvényünkben a kapcsolóként viselkedő torles változót átállítjuk, vagy változatlanul hagyjuk a kívánt funkciótól függően. Átkapcsolásra akkor van szükség, ha a sor végére értünk, azaz a kiírt szöveg hossza megegyezik a kiírandó szöveg hosszával, vagy akkor, ha ismét a sor elejére értünk, azaz a kiírt szövegünk hossza nulla. A kapcsoló állásától függően a szöveget tartalmazó stringünkből egyel hosszabb, vagy egyel rövidebb rész-stringet íratunk ki a substring metódus segítségével. Ha ezzel készen vagyunk következik a rekurzió, majd a függény lezárása. Most hogy tudjuk mit is kellene csinálnunk, lássuk a forráskódot.

<html>
<script>

var torles=0;

function kiiras()

</script>
<body onLoad="kiiras()">
Ne ide nézz, hanem egy kicsit lejjebb...
</body>
</html>

A fenti program paramétereinek megváltoztatásával, tetszőleges szöveget kiírathatunk, az általunk beállított gyorsasággal. A script egyszerűen a kivág-beilleszt módszer alkalmazásával beágyazható bármely HTML oldalba.
Scriptünk segítségével most már mindenféle egyszerűbb feladatot elvégeztünk: képeket cserélgetünk, ablakokat jelenítetünk meg, de vajon komolyabb, vagy komolyabbnak tűnő problémák megoldhatók-e segítségével? Hogy a JavaScript bonyolult, vagy annak látszó feladatok megoldására mennyire alkalmas, azt jól szemlélteti a következő példa.

Le az ékezetekkel!

Egy ismerősöm vetette fel azt a problémát, hogy egy szövegből távolítsuk el az ékezetes karaktereket. Ő egy sms-küldő oldalon látott egy programot, amely a beírás pillanatában kicserélte az ékezetes betűket ékezet nélküli párjukra. Mivel kíváncsi voltam a megoldásra, ezért gondolkodni kezdtem, melynek a következő kis programocska lett az eredménye:

<html>
<script>

function check()
 if (ujKarakter)
  document.form.text.value=document.form.text.value.substring(0,document.form.text.value.length-1) + ujKarakter;

</script>
<body>
Ide lehet bepötyögni a szöveget, amiből majd kiszedjük az ékezetes betűket:<br>
<form name="form">
<textarea name="text" rows="10" cols="30" onKeyUp="check()"></textarea>
</form>
</body>
</html>

A HTML kód most is meglehetősen egyszerű, a lényegi munkát a JavaScript látja el. Létrehoztunk egy form-ot egy beviteli mezővel, és megadtuk, hogy minden egyes billentyű lenyomása után fusson le az általunk megírt ellenőrző függvény. Metódusunk nem túl bonyolult mindössze egy változó definíciót, egy switch-case szerkezetet, és egy feltételt tartalmaz. Az első lépésben beolvassuk a beviteli mezőben lévő sztringet, és levágjuk róla az utolsó karaktert, hiszen elég ezt vizsgálnunk. Ezek után el kell döntenünk, hogy mit tegyünk ezzel a karakterrel. Ehhez egy switch-case szerkezetet használhatunk, mely a következőképpen működik. A switch a paraméterként megkapott változó, switch(valtozo), értékétől függően különböző utasításokat hajt végre. Ezeket az értékeket és a hozzájuk tartozó utasításokat a case "érték" : utasítás szintaktikával definiálhatjuk. A switch sajátossága, hogy minden egyes ilyen sor után, ha nem akarjuk, hogy a következő is végrehajtódjon, egy break utasítást kell írnunk. Ennek megfelelően a case "é" : ujKarakter="e"; break; sor abban az esetben, ha az utolsó leütött karakter "é" volt az ujKarakter változónak az "e" karaktert adja értékül, és befejezi a vizsgálatot. Mivel ezt minden ékezetes betűre elvégeztük, így mindegyik helyére saját ékezet nélküli párja helyettesítődik majd be. Ehhez azonban szükség van még egy lépésre: meg kell vizsgálnunk, hogy megváltoztattuk-e a karaktert, azaz az ujKarakter változóba került-e valami. Ha a feltétel igaznak bizonyul, akkor a beviteli mezőben lévő stringhez a függvény által visszaadott karaktert fűzzük, a feltétel hamis volta esetén nem történik semmi. És ezzel meg is oldottuk a sokak számára megoldhatatlanak, de legalábbis rejtélyesnek tűnő feladatot.

Ékezettelenítés 2.0

A - mondjuk úgy - 1.0-ás verziónak két, viszonylag nagy, hibája van. Az egyik, hogy csak az utolsó karaktert vizsgálja, így ha valaki utólag szúr be valamit a szövegbe, akkor abban már nem cseréli le az ékezeteket. A másik hiba, hogy ha kivág/beilleszt módszerrel nagyobb szöveget másolunk a beviteli mezőbe, akkor az előbb említett okokból szintén elmarad a kívánt hatás. Mindkét probléma orvosolható a következő módszerrel. Minden egyes bevitelkor, egy for ciklus segítségével, az egész szöveget leellenőrizzük. Következzen most a javított változat, és egy kis magyarázat hozzá:

<html>
<script>

function check()

if (ujKarakter)

}


</script>
<body>
Ide lehet bepötyögni a szöveget, amibõl majd kiszedjük az ékezetes betûket:<br>
<form name="form">
<textarea name="text" rows="10" cols="30" onKeyUp="check()"></textarea>
</form>
</body>
</html>

Akkor lássuk mi is változott. A HTML form, illetve az ékezetek kiszűrését végző switch-case szerkezet, teljes egészében ugyan az, mint az előző programban. Változott viszont a függvényünk szerkezete, és néhány utasítása. Az első sorban egy egyszerű értékadással kiküszöböljük, a változónevek hosszú, és fáradságos begépelését. Ezek után egy for ciklus segítségével végigmegyünk az egész string-en, és egyesével levizsgáljuk a karaktereket. A karakterek eléréséhez a substring metódust használjuk a megfelelő paraméterezéssel. Megadjuk neki a kezdő és vég indexet, amelyek közötti részre kíváncsiak vagyunk. A kiválasztás után következik a már ismert vizsgálat.

A vizsgálat végén ellenőrizzük, hogy kellet-e változtatni az aktuális karaktert. Ha igen, akkor visszahelyezzük azt a szövegbe. És itt van a másik fontos változás. Mivel eddig csak az utolsó karaktert vizsgáltuk, nem volt nehéz dolgunk, de itt már több figyelmet igényel a feladat, hiszen a karakter akár a szöveg közepén is lehet. A megoldás az, hogy létrehozunk egy új string-et, amely a következőképpen áll össze: a változtatott karakter előtti rész plusz az aktuális karakter, és ehhez hozzáfűzzük a maradék szöveget. Ezt az értéket visszaírjuk a beviteli mezőbe, és már kész is vagyunk a feladattal.

Ez a script kiküszöböli a beillesztésből adódó hibákat is, mivel minden egyes karakter begépelésekor levizsgálja az egész szöveget.

Folytassuk a gyakorlati problémák megoldását egy újabb életszerű példával.


Ellenőrzések

A valódi internetes oldalak kialakításakor általában szükség van adatok bevitelére a felhasználó részéről. Ez eddig rendben is van, azonban ezeket az adatok ellenőrizni kell a feldolgozásuk előtt. Mivel itt kliens oldali programozásról írunk, így az adatok feldolgozásával nem, csak az ellenőrzésükkel foglalkozunk.

Ehhez szükség van HTML ismeretekre is, amit gyorsan átveszünk, hogy érthető legyen a probléma, és a megoldás is.

Már eddig is hoztunk létre form-okat (magyarra fordítva talán űrlapokat), de a valódi jelentőségükről még nem, vagy csak alig esett szó. Ezek az űrlapok biztosítják a felhasználó és a szerver közötti adatcserét. Az így kitöltött adatokat elküldjük a szerverre, ahol valamilyen CGI (Common Gateway Interface) program feldolgozza azt. Az űrlap különböző beviteli elemekből áll, ezekből mutatok be most röviden néhányat:

típus

tulajdonságok

text

Sortörések nélküli szöveg bevitelére alkalmas mező.

textarea

Többsoros szöveg bevitelekor használjuk

select

Választólista, több lehetséges, rögzített érték közül választhatunk.

button

Nyomógomb, ami a felhasználói interakciókat hivatott lekezelni.

submit

Nyomógomb, ami a form adatainak elküldésére szolgál.

hidden

Speciális rejtett mező, amiben a szerver oldali program számára fontos adatokat kezelhetünk.

Form néhány eleme, és tulajdonságaik

A példák során csak a text, és a submit, illetve a button objektumokkal fogunk megismerkedni, mivel a feladatok nagy része ezek segítségével jól bemutatható. A későbbiekben igyekszem majd a többi elem bemutatására is.

Egy egyszerű form a következő elemekből áll: beviteli mezők és submit vagy button nyomógomb. Általában a submit gombot használjuk az adatok elküldésére, de kerülő úton a button gombbal is megoldható ez a feladat.



Lássunk akkor egy form-ot, melynek csak annyi a feladata, hogy két mező tartalmát elküldi a szervernek (a <body> és <html> tagokat most elhagyjuk):

<form name="form" action="feldolgoz.cgi" method="post">
név: <input type="text" name="nev"><br>
e-mail cím: <input type="text" name="email"><br>
<input type="submit" name="gomb" value="Elküld">
</form>

A form-nak körülbelül ezek azok a paraméterei amiket mindenképpen érdemes megadni. A name értelemszerűen az űrlap nevét jelenti, amivel hivatkozhatunk rá. Az action jelenti annak a CGI programnak a nevét, ami a feldolgozást végzi majd. A method paraméterben adhatjuk meg, hogy milyen módon küldjük az adatokat. A post érték azt jelenti, hogy az adatokat egy "csomagként" kapja meg a szerver oldali program. A részletesebb ismertetésbe nem mennék bele, mivel elég messze sodródnánk a cikk témájától.

Amit érdemes megfigyelni az a submit gomb paraméterezése. A name magától értetődően az elem nevét jelenti, a value pedig azt a szöveget tartalmazza, ami a gomb felirataként megjelenik.

Ha tehát a gombra kattintunk, a mezők tartalma a feldogoz.cgi programnak adódik át.

A küldés előtt, mint már említettem, ellenőrizni kell az adatokat, és itt használhatjuk fel a JavaScript-et.

"Üres szöveg"

Az üres szöveg itt remélhetőleg nem a mondandóm tartalmi értékére vonatkozik. A feladatunk az lenne, hogy ellenőrizzük le küldés előtt, hogy valamelyik mező tartalmaz-e üres adatokat. Ha hiányos információt adna meg valaki, akkor figyelmeztessük, és állítsuk le az adatok küldését. Ehhez az előző form-ot kicsit át kell alakítanunk, és írni kell hozzá egy ellenőrző függvényt:

<html>
<head>
<script>

function ellenoriz()

if (document.form.email.value=="")


return true;
}

</script>
</head>
<body>
<form name="form" action="feldolgoz.cgi" method="post">
név: <input type="text" name="nev"><br>
e-mail cím: <input type="text" name="email"><br>
<input type="submit" name="gomb" value="Elküld" onClick="return ellenoriz()">
</form>
</body>
</html>

Lássuk hogyan is működik a dolog. Először is meg kell mondanunk a böngészőnek, hogy az Elküld gombra történő kattintáskor hívja meg az ellenoriz() függvényt, és figyelje is hogy milyen értékkel tér vissza. Azt ügye tudjuk, hogy az onClick eseménnyel figyelhetjük a kattintást. Azt viszont mindeddig nem tudtuk, hogy a return kulcsszóval mondhatjuk meg, hogy a visszatérési értéket figyelembe véve küldjük el a form-ot, vagy állítsuk le a folyamatot. Ha tehát a meghívott függvény true, azaz igaz értékkel tér vissza, a folyamat tovább fut, ha azonban false, azaz hamis értékkel tér vissza a küldés megszakad.

Nincs más dolgunk tehát, csak megírni úgy a függvényt, hogy ezeket az értékeket adja vissza. Egy egyszerű if szerkezettel, pontosabban kettővel, vizsgáljuk a mezők tartalmát. A vizsgálat történhet a benne lévő tartalom, vagy a tartalom hossza szerint, én az előbbit választottam.

Tehát ha a mező üres, akkor egy üzenetet küldünk a felhasználó felé, majd hamis értékkel térünk vissza. Ha mindkét vizsgálaton túljutottunk, az azt jelenti, hogy nem volt hiba, és visszaadhatjuk az igaz értéket.

Itt szeretném megemlíteni, hogy az ellenőrzést más helyen is lehet végezni, de tapasztalataim szerint ez a "legböngészőkompatibilisebb" módszer. A másik eljárás egyébként a form onSubmit eseményét használni, de ez nem mindig hozza meg a kívánt eredményt.

Helyes-e?

Itt most ne a Morphologic helyesírás-ellenőrzőjére tessék gondolni. Egyszerűen csak azt fogjuk vizsgálni, hogy adott típusú adat megfelel-e bizonyos formai követelményeknek, tehát vélhetően valós adatot visz-e be a tisztelt felhasználó.

Ahhoz hogy a vizsgálatokat el tudjuk végezni, meg kell ismerkednünk egy pár újabb string-fügvénnyel. A követező metódusokra lesz szükségünk:

Metódus

Működése

indexOf

Visszaadja az adott string-ben, egy adott karakter első előfordulásának indexét. pl.: string.indexOf("a")

lastIndexOf

Hasonló az előzőhöz, de az utolsó előfordulást adja vissza.

charAt

Megadja az adott string, adott indexen lévő karakterét. pl.: string.charAt(0), visszaadja az első karaktert.

Ha valaki arra gondol, hogy az ékezettelenítő programban a charAt() függvényt is használhattuk volna az aktuális karakter kiválasztására, annak teljesen igaza van, de akkor ezt a metódust még nem ismertük.

Minden adott tehát ahhoz, hogy e-mail címet, vagy egyéb adatot vizsgáljunk.

E-mail ellenőrzés

A követező kis példa egy elég jól használható e-mail ellenőrző rutint mutat be.

<html>
<head>
<script>

function ellenoriz()

if (text.indexOf('.') == -1)
if ((text.length-text.lastIndexOf('.'))>4 || (text.length-text.lastIndexOf('.'))<2) if (text.indexOf('.')==text.indexOf('@')+1) return true; } </script> </head> <body> <form name="form" action="feldolgoz.cgi" method="post"> e-mail cím: <input type="text" name="email"><br> <input type="submit" name="gomb" value="Elküld" onClick="return ellenoriz()"> </form> </body> </html>

Az alap form, és az ellenőrzés hívása megegyezik az előző példában látottakkal, azonban itt már egy jóval erőteljesebb ellenőrzésen esik át a felhasználó által megadott e-mail cím.

A már ismert értékadással indul a program, majd mindegyik if szerkezet egy bizonyos típusú hiba kiszűrését valósítja meg.

Az első blokk ellenőrzi, hogy van-e "@" karakter az e-mail címben. Ezt úgy tudjuk megoldani, hogy vizsgáljuk az "@"-jel pozícióját az indexOf() metódussal. Mivel ez a függvény (-1)-et ad vissza, ha az adott karakter nem szerepel a string-ben, így az általunk kívánt feladatot tökéletesen ellátja. Tehát ha a metódus (-1)-el tér vissza a cím hibás, mivel nincs benne "@"-jel. Ha bármi más értéket ad vissza, akkor a cím átesett az első ellenőrzésen.

A második lépcső a "." karakter meglétének vizsgálatát végzi el, hiszen e nélkül formailag biztosan hibás az e-mail cím. A vizsgált teljesen hasonló az előbbihez. Ami esetleg újdonság lehet, az a két plusz sor a blokkokban. A document.form.email.focus() metódus a fókuszt állítja be az adott mezőre, míg a select() függvény kijelöli az adott mező tartalmát. Így a felhasználó egyszerűen, és gyorsan ki tudja javítani a hibáját.

Ha a második lépcsőn átesett a cím, akkor a harmadik lépcsőben további feltételeknek kell megfelelnie: megvizsgáljuk, hogy az utolsó pont után már ne lehessen három karakternél hosszabb végződés, hiszen az nem lehet valós cím. A cím akkor sem jó, ha ez a rész-string rövidebb mint két karakter. Ezt a vizsgálatot a lastIndexOf() metódus segítségével végezzük. Az általa visszaadott értéket kivonva a a string hosszából kapjuk a számunkra érdekes, és vizsgálandó substringet.

A negyedik lépcső még egy utolsó vizsgálatot végez el a címen: megnézi hogy a "@" karakter és az utána következő "." között mennyi a távolság. Ha ez a két karakter egymás után következik, tehát az e-mail cím "közepe" üres, akkor hibát jelez.

Ha a cím minden lépcsőfokon átküzdötte magát, akkor nagy valószínűséggel valós, vagy legalább is a formai követelményeknek megfelel, így megérdemli hogy elküldjük a szervernek.

De nem csak az e-mail cím formátuma lehet érdekes, ahogy azt az utolsó példa is mutatja.

Rögzített karakterek

Ha bemutattuk a charAt() metódust, akkor használjuk is ki. Erre jó alkalom az alábbi feladat.

Megkell vizsgálnunk egy adott szót, ami csak az abc kis és nagy betűit, illetve számokat tartalmazhat. Erre olyankor lehet szükség, ha valamilyen azonosítót kérünk be, amiben nem lehet szóköz, vessző, vagy egyéb illegális karakter.

A vizsgálatot egy példa-string segítségével végezzük, ami tartalmazza az összes érvényes karaktert.

<html>
<head>
<script>

function ellenoriz()

}
return true;
}

</script>
</head>
<body>
<form name="form" action="feldolgoz.cgi" method="post">
azonosító: <input type="text" name="login"><br>
<input type="submit" name="gomb" value="Elküld" onClick="return ellenoriz()">
</form>
</body>
</html>

Az értelemszerűen szükséges változások magyarázatát most átugorjuk. Az alap gondolat az, hogy készítünk egy string-et, ami az összes érvényes karaktert tartalmazza. Ez a karakterlánc a feladattól függően szűkíthető, vagy bővíthető. Ezek után fogjuk a beolvasott szöveget, és levizsgáljuk a karaktereit, hogy benne vannak-e a megadott ellenőrző string-ben. Ha egyetlen olyan karaktert is találunk, amire hamis értéket kapunk, akkor az azonosítót hibásnak jelöljük meg.

A feladatot ismét az indexOf() metódussal végezzük el, kihasználva a visszaadott értékét. Segítségül hívjuk a charAt() függvényt is, a karakterek egyszerű elérése érdekében. Ha az indexOf() metódus (-1)-el tér vissza, az adott karakter illegális, tehát a függvényünk is hamis értéked ad vissza a form felé.

Érdemes megfigyelni, hogy a for ciklus inicializálásakor a var i=0 értékadást már a program törzsében használtuk. Ez jól szemlélteti a JavaScript rugalmasságát: a változókat nem csak a program elején deklarálhatjuk, hanem bárhol a programkódban. Ezzel azonban érdemes vigyázni, mert esetleg összevisszaság lehet az eredménye, ha nem logikusan végezzük a deklarációkat.


Találat: 2498