Magyarázat gyanánt....: Noha sok-sok mindent lehetne még tenni a kliens oldali kódolás terén, ideje, hogy rátérjünk a szerver oldallal kapcsolatos tudnivalókra is, hogy - ha még csak alapozó szinten is, de - átvegyük a legszükségesebb ottani skill-eket. Ezért hát, ezzel a résszel zárjuk a kliens oldallal kapcsolatos teendőinket. Mielőtt azonban ezt megtennénk, meg kell, hogy emlékezzünk a szerver felé benyújtandó űrlapok, kliensnél történő ellenőrzéséről. Ezt, s még néhány egyéb pontot hivatottak tisztázni az alább vázoltak.

Nosza, szedjük hát ízekre e kis kódot! Mindjárt az elején, rögzítsük a tényt, miszerint az "Ott a helyem!" gomb megnyomásakor itt most nem történik valódi "beküldés" (submit). Arra, hogy mi szükség van erre a kis csalásra, e szösszenet végén még visszatérek. Addig is azonban sietve leszögezem, hogy az űrlap ellenőrzésének (tehát az aktuális tananyag elsajátításának) módján ez lényegében semmit sem változtat. Tehát, a lényeg: alább, kötelező mindent kitölteni (kijelölni, kiválasztani, stb), úgy mégpedig, hogy a szóban forgó adatok beviteli módja megfeleljen az elvárt formáknak, értékeknek, stb.

Magyarán, minden beviteli elem kapcsán két dolgot kell ellenőriznünk: egyfelől azt, hogy történt-e egyáltalán bevitel, másfelől pedig azt, hogy megfelelően történt-e az. Természetesen, a biztonság kedvéért a szerver oldalon is szerét kell majd ejtenünk hasonló vizsgálatnak, ám itt a lényeg az, hogy, ha nem muszáj, ne terheljük feleslegesen a szervert, s csak akkor engedjünk benyújtani egy űrlapot, ha mindent rendben találtunk rajta. Nézzük, miként zajlik ez a Javascript kódban!

Mint az látható, a kód elején, ezúttal két segédfüggvényünk van: a byId és a byName Az első már ismerős (csak eddig "$" volt a neve), a másodikra a jelölő négyzetek és a rádió gombok miatt van szükség (később még visszatérünk rá). A js oldal alján 3 függvényt akasztottam rá kettő gombra, melyek közül - egyelőre - csak az elsővel kell törődnünk, ahol a beküldő - "reg" azonosítójú - gombra az ellenorzes nevű függvény van ráhegesztve. A függvény, hívásakor - ahogy azt láthatjuk - szépen végigveszi a beviteli mezőket, kezdve a névvel, mellyel kapcsolatban csak annyit vizsgál meg - az urese függvény segítségével - , hogy nem üres-e az adott input "value"-ja.

Hasonlóan jár el az email és a kor inputjával is, mindössze annyi a különbség, hogy e két utóbbi esetén, amennyiben nem lettek üresen hagyva, a hibasemail, illetve a szame függvényeket segítségül hívva megvizsgálja azt is, hogy a megadott információ, s egyáltalán a megadás módja megfelel-e a követelményeknek. Az évfolyamhoz kötődő input vizsgálata triviális, így nem ejtenék szót róla. A vizsgáló függvényeket sem ismertetném részletekbe menően, mivel progi1-ből ezeknél messze "szigorúbb" algoritmusokat is implementáltunk már anno, így önálló megértésük nem okozhat problémát. Legfeljebb annyit emelnék ki, hogy az email vizsgálata ezúttal kimerül abban, hogy megnézzük, hogy az @ karakter megfelelő helyen van-e. Az indexOf-ot használjuk erre, mely az adott karakter pozíciójával, sikertelen keresés esetén pedig a -1 -es értékkel tér vissza. Vegyük észre, hogy a függvényben szereplő feltétel fejében lévő email.indexOf('@')>0 kifejezés folyományaként, a sikertelen keresés esetén visszaadott -1 -es érték hamissá teszi a email.indexOf('@')>0 && email.indexOf('@')<email.length-1 feltételt, így nem csupán a @ karakter helyének vizsgálata megoldott, de az is, hogy a hiányakor is jelezzük a hibát.

Kapcsolódván az előző bekezdés zárásához, térjünk rá a hiba megtalálásakor esedékes teendőkre! Első lépés gyanánt, hiba észlelésekor a hibak nevű tömbbe helyezünk egy - az aktuális bibihez fűződő - karakterláncot a tömb push metódusával, mely metódus a tömb végébe biggyeszti a kapott paramétert, mint legutolsó tömb-elemet. Ezt a tömböt listázzuk majd ki a hibakkiir függvénnyel az űrlap alján, a már előre megírt, "hibalista" id-jű rendezetlen lista innerHTML-jét megadván általa. A hibakkiir függvényben nem egy általunk megírt ciklussal zongorázzuk végig a hibákkal kapcsolatos "mondásokat" tartalmazó tömböt, hanem a tömb join metódusával, ami úgy fűzi össze a tömb elemeit, hogy közéjük beilleszti az általunk - paraméterként - megadott szeparátort (esetünkben a listaelemek lezáró és nyitó tag-jait).

A rádiógombok és jelölő négyzetek "érintettségét" a kivanvalasztva függvény ellenőrzi, mely a byName segédfüggvénnyel előbb tömbbe fogja az egyes - azonos nevű - inputokat, majd a tömböt bejárva a "csekkoltságot" teszi vizsgálat tárgyává. Tekintve, hogy ezúttal nem egy alapozó jellegű (progi1) tárgy kapcsán fújt össze minket a szél, ennél bővebben már nem térek ki az ellenőrzést végző algoritmusok magyarázatára. Felhívom viszont a figyelmet a hibalistát megformázó - hibalistastilus nevű - függvény pocakjának a tartalmára, mivel ott szembesülhetünk a HTML kód, Javascript által történő megformázásának - egyik - módjával (a style segítségével).

Láthatjuk, hogy az eltuntet nevű függvényben is a style-t használva tettük láthatatlanná a legfelső gombot annak megnyomásakor. Szintén erre a gombra "figyelt" a magyarazatmutat névre hallgató függvény is, mely a gomb lenyomásakor legott elkezdte "animálni" a jelen szöveget magába foglaló - leiras id-jű - div tag növekedését, hogy aztán a folyamat végén láthatóvá tegye a tartalom id-jű - eggyel "beljebb" lévő, e szöveget közvetlenül tartalmazó - div-et. Maga, az animációt végrehajtó kód, nem épp a legelegánsabb, de csak azért, mert nem akartam e tananyagot túlzsúfolni. Látszik, hogy a magyarazatmutat függvény a style-on keresztül növeli a rábízott div méretét (500-as szélességig), s teszi mindezt úgy, hogy rekurzíve hívja magát újra és újra, mely hívásnak - elkerülendő a túl gyors növekedést - 50 milliszekundumonként ejti szerét a setTimeout(magyarazatmutat, 50); segítségével.

Világos, hogy ilyen eljárás esetén a szélességet és magasságot hordozó változók nem deklarálhatók a magyarazatmutat függvény lokális változóiként, hiszen a függvény minden egyes hívásakor visszaállna az értékük. Ez így nem épp elegáns. Ha valaki szeretné ügyesebben kezelni az ilyen jellegű problémákat, nézzen utána a window.getComputedStyle()-nak, mely egy más módja a stílus - Javascript által történő - masszírozásának. Alkalmazásával, a magyarazatmutat függvény valahogy így nézne ki:

   
   function magyarazatmutat()
   {
    var leiras=byId('leiras'); 
    var w=parseInt(window.getComputedStyle(leiras).width, 10);
    var h=parseInt(window.getComputedStyle(leiras).height, 10);
    if(w<500) 
    {
     leiras.style.width=(w+10)+'px';
     leiras.style.height=(h+30)+'px';
     setTimeout(magyarazatmutat, 50);
    }
    if(w==500){byId('tartalom').style.display='inline';}
   }
   
   

Hmm .... miről is akartam még szót ejteni? ..... Ó, igen: a valódi beküldés! Tehát, ha valóban be szeretnénk nyújtani az alábbi űrlapot, akkor a beküldő gomb típusa submit lenne, a kezdo függvényt pedig nem magára gombra, hanem a form-ra aggatnánk rá az id-jén keresztül, a felbuborékoló submit eseményt figyelve. Ehhez szükségünk lenne persze az ellenorzes függvény első paramétereként lézengő eseményobjektumra (nevezhetjük eo-nak is a kódban), már csak azért is, mert hiba esetén úgy tudnánk meggátolni az űrlap beküldését, hogy életbe léptetnénk az eo.preventDefault(); utasítást.

Rátérve a magyarázat elején említett csalásom okára, azt lényegében az indokolja, hogy valódi submit esetén egy szerver oldali parancsfájlnak kellene benyújtani az űrlapot, márpedig itt most nincs olyan. Ettől még persze becsomagolhatnám egy email-be is a form nyitó tag-ében megadott action="mailto:email@cim.com" segítségével, de ekkor meg felvetődne a kérdés, hogy mégis kinek a címét írjam oda, ki kapja meg egy rakat - szakestre igyekvő - kolléga adatát? :-) Na, ez indoklta azt, hogy "éles" küldés helyett, ikább csak sima gombot adtam meg típus gyanánt az "Ott a helyem!" inputnak. Remélem, nem felejtettem ki egyetlen releváns dolgot sem e leírásból, de ha esetleg mégis, akkor nosza, kérdezzetek! :-)