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