|  | ||||||||
|  | ||||||||
| | ||||||||
| | ||||||||
 |
kategória |  |
||||||||
|
|
||||||||||
 |
 |
|
|
|
|
|
||
|
|
JavaScript alapok
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.
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.
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ó.
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.
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.
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.
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.
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()
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.
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.
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!
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.
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.
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.
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.
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.
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.
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>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.
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">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.
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>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.
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.
A követező kis példa egy elég jól használható e-mail ellenőrző rutint mutat be.
<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.
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>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: 3661
