JavaScript II Összeállította: Kosztyán Zsolt Tibor

Űrlapok Űrlapokkal gyakran találkozunk az Interneten. Sok oldal ettől nyeri az interaktivitását. Segítségükkel a felhasználók elküldhetik véleményüket egy oldalról, feliratkozhatnak egy játék résztvevői közé, megrendelhetnek különféle tárgyakat, programokat, szolgáltatásokat a világhálón keresztül, kereséseket hajthatnak végre speciális keresőszervereken. Az űrlapokat kitöltésük után legtöbbször elküldjük a hálózaton keresztül egy szerveren lévő CGI programnak, amely feldolgozza a benne lévő adatokat. Problémát jelenthet viszont az, ha az űrlapunk hibás adatot tartalmaz. Mivel járhat ez? Elküldjük a hibás adatot a hálózaton keresztül, ezzel gyakorlatilag feleslegesen növelve a hálózati forgalmat. Ugyanakkor a szerveren lévő program sem tud mit kezdeni az adatunkkal, jobb esetben visszaküld egy hibaüzenetet, ami tájékoztatja a felhasználót, hogy hol rontotta el az űrlap kitöltését. Ezután kezdődhet az egész eljárás elölről. Ez a folyamat sok-sok másodpercet vehet igénybe, igen lassú is lehet. A JavaScript itt is segíthet nekünk. Még a kitöltés fázisában, az űrlap tényleges elküldése előtt ellenőrizhetjük, hogy helyes-e a kitöltés. Ha nem, akkor nem is engedjük meg az űrlap elküldését. Ezzel nem okozunk forgalomnövekedést a hálózaton, valamint a hibaüzenetek is rögtön megjelennek a képernyőkön, hiszen azt nem a szerveren futó program küldi vissza, hanem a gépünkön futó JavaScript program. Általában két helyen szokás az ellenőrzést elvégezni. Minden egyes űrlapelemnél, amint a felhasználó kitölti azt, az onChange, illetve elküldéskor az onSubmit eseménykezelő segítségével. A következőkben több példát is látunk, amelyekben valamilyen adat ellenőrzését végezzük el.

Üres mező ellenőrzése <!-- A JavaScript kód elrejtése function uresCheck(mezo){ if (mezo.value != "") return true; else{ alert("Üres mező!"); return false; }}// -->

cím ellenőrzése <!-- A JavaScript kód elrejtése function Check(mezo){ szoveg = mezo.value; if && { alert("Rossz cím!"); return false; } else{alert("Formailag helyes cím!"); return true; }}// -->

Numeikus értékek bevitele <!-- A JavaScript kód elrejtése function uresCheck(mezo){ if (mezo.value != "") return true; else{alert("Üres mező!"); return false;}} function teszt(adat,minta){ for (var i=0; i<adat.length; i++) if (minta.indexOf(adat.charAt(i)) == -1) return false; return true;} function numerikusCheck(mezo){ if (!uresCheck(mezo)) return false; if (!teszt(mezo.value," ")){ alert("Ez nem numerikus érték!"); return false;} else{alert("Ez helyes érték!"); return true; }} // -->

Telefonszám bevitele <!-- A JavaScript kód elrejtése function uresCheck(mezo){ if (mezo.value != "") return true; else{alert("Üres mező!"); return false; }} function teszt(adat,minta){ for (var i=0; i<adat.length; i++) if (minta.indexOf(adat.charAt(i)) == -1) return false; return true;} function tartalmaz(adat,minta){ for (var i=0; i<adat.length; i++) if (minta.indexOf(adat.charAt(i)) != -1) return true; return false;} function telefonCheck(mezo){ if (!uresCheck(mezo)) return false; if (!teszt(mezo.value," ()/- ") || !tartalmaz(mezo.value," ")){ alert("Ez nem jó telefonszám!"); return false;} else{alert("Ez helyes telefonszámnak tűnik!");return true; }} // -->

Fókusz állítása űrlapmezőkre <!-- A JavaScript kód elrejtése var aktualis = 0; function fokusz_allitas(){ if (aktualis == 0){ document.select_form.text1.focus(); document.select_form.text1.select();} else{ document.select_form.text2.focus(); document.select_form.text2.select(); } aktualis = 1 - aktualis;} // -->

Űrlapok elküldése levélben <!-- A JavaScript kód elrejtése function uresCheck(mezo){ if (mezo.value != "") return true; else{ alert("A(z) "+ mezo.name +" mező üres!"); return false; }} function Check(mezo){ var szoveg = mezo.value; if && alert("Rossz cím!"); return false; } else return true;} function teszt(adat,minta){ for (var i=0; i<adat.length; i++) if (minta.indexOf(adat.charAt(i)) == -1) return false; return true;} function numerikusCheck(mezo){ if (!uresCheck(mezo)) return false; if (!teszt(mezo.value," ")){ alert("Ez nem numerikus érték!"); return false;} else return true;}

Űrlapok elküldése levélben function tartalmaz(adat,minta){ for (var i=0; i<adat.length; i++) if (minta.indexOf(adat.charAt(i)) != -1) return true; return false;} function telefonCheck(mezo){ if (!uresCheck(mezo)) return false; if (!teszt(mezo.value," ()/- ") || !tartalmaz(mezo.value," ")){ alert("Ez nem jó telefonszám!"); return false;} else return true;} function ellenoriz(){ if (uresCheck(document.form.nev) && numerikusCheck(document.form.ev) && telefonCheck(document.form.telefon) && Check(document.form. )){ document.form.action = "mailto:"+document.form. .value; return true; } else return false;}

Űrlapok elküldése levélben // --> Neved? Hány éves vagy? Telefonszám ellenőrzése: Az urlap a következő címre lesz elkűldve...

A képek kezelése A képeket a JavaScript Image (kép) objektumán keresztül kezelhetjük. Ez az objektum a JavaScript 1.1-es verziója óta létezik, így csak az újabb böngészők, pl. Netscape Navigator 3.0-ás vagy 4.0-ás verziója (IE 4.0), vagy annál későbbi változatok ismerik és képesek kezelni. Az Image objektum segítségével megváltoztathatjuk az oldalunkon lévő képek paramétereit, illetve magát a képet is. Hogyan kezeli a JavaScript az oldalakon lévő képeket? Minden kép egy tömbön keresztül érhető el. A tömböt images- nek hívják. Az oldalon lévő képek kapnak egy sorszámot. A legelső kép a 0-ás sorszámmal rendelkezik, a második az 1- essel, és így tovább. Ha a legelső képre akarunk hívatkozni például egy JavaScript programból, akkor az a document.images[0] hivatkozáson keresztül lehetséges. Minden képet az Image objektum egy példányának tekintünk. Az Image objektum rendelkezik bizonyos tulajdonságokkal, amikhez JavaScript programból hozzáférhetünk. Ilyen tulajdonságok például:

A képek kezelése name - a kép neve src - a kép helye, az a cím, ahonnan betöltjük width - szélessége (képpontokban) height - magassága (képpontokban) border - keret mérete képpontokban Ezeket a tulajdonságokat kiolvashatjuk. Az első kép szélességét például a document.images[0].width adja meg képpontokban mérve. Természetesen ha neveket adunk a különböző képeknek, akkor azokkal is hivatkozhatunk rájuk. Ez megkönnyíti a programozást, ha sok képet töltünk be egy oldalra.

Új képek betöltése A leglátványosabb lehetőség azonban az, ha új képeket tölthetünk be az oldalunkra, illetve az oldalainkon lévő képeket kicserélhetjük újakra. Ehhez a már korábban említett src attribútum szükséges. Ha ugyanis ezt megváltoztatjuk, akkor automatikusan betöltődik az a kép, amelyet az új src attribútum meghatároz. Lássunk erre egy rövid példát! Ez a HTML-ből is ismert utasítás betölti a kep1.jpg nevű képet, miközben az "elso" nevet kapja. Ezen a néven hivatkozhatunk rá. A következő programsor kicseréli ezt a képet a kep2.jpg nevű képre. document.elso.src = "kep2.jpg";Az új kép örökli az előző méreteit, amiket nem is lehet megváltoztatni. Ha a gombra kattintunk, akkor rögtön kipróbálhatjuk a tanultakat. Azonban ennek a megoldásnak van egy szépséghibája. Ugyan a képek kicsi mérete miatt, illetve a gyors betöltésnek köszönhetően a második kép a gomb megnyomása után szinte azonnal megjelenik, de valójában van betöltési idő. Még rosszabb a helyzet, ha a második kép nagy méretű, ráadásul az Interneten keresztül, kis sávszélességű (mondjuk modemes) kapcsolatnál töltődik le. Ez a késés a legtöbb esetben elfogadhatatlan. Erre nyújt megoldást a képek előre történő betöltése.

Képek előre történő betöltése Hozzuk létre az Image objektum egy példányát a következő kóddal: rejtett_kep = new Image();rejtett_kep.src = "kep2.gif"; Az első sor létrehozza a rejtett_kep nevű Image objektumot. A második sor beállítja az objektum src attribútumát, gyakorlatilag meghatározza a képet és annak címét. Ez most az aktuális könyvtárban lévő kep2.jpg nevű kép. A kép gyakorlatilag ekkor már betöltődik a memóriába, de még nem jelenik meg. Ezt viszont megtehetjük azzal, hogy egy -az oldalon lévő kép- src attribútumához hozzárendeljük a rejtett_kep.src által meghatározott címet. ducoment.egy_kep.src = rejtett_kep.src; A kép a memóriában van, így azonnal megjelenik, nincs betöltési idő.

Felhasználói események által kiváltott képcserék Akkor érhetünk el igazán szép effektusokat az oldalainkon, ha a képekkel végzett manipulációkat felhasználói, pl. egéreseményekhez kapcsoljuk. Szinte minden szebb oldalon megjelennek olyan gombok, amelyek benyomódnak vagy más színben jelennek meg, ha az egér mutatót fölé visszük. Ezt két eseménykezelővel valósíthatjuk meg. Az onMouseOver esetén betöltjük az új képet, míg az onMouseOut eseménynél visszaállítjuk a régit.

Felhasználói események által kiváltott képcserék <!-- A JavaScript kód elrejtése browserNev = navigator.appName; browserVer = parseInt(navigator.appVersion); if (browserNev == "Netscape" && browserVer >= 3) browserVer = "1"; else if (browserNev == "Microsoft Internet Explorer" && browserVer >= 4) browserVer = "1";else browserVer = "2"; if (browserVer == 1){ i1 = new Image(); i1.src = "gomb1g.jpg"; i2 = new Image(); i2.src = "gomb1w.jpg"; i3 = new Image(); i3.src = "gomb2g.jpg"; i4 = new Image(); i4.src = "gomb2w.jpg"; i5 = new Image(); i5.src = "gomb3g.jpg"; i6 = new Image(); i6.src = "gomb3w.jpg"; i7 = new Image(); i7.src = "gomb4g.jpg"; i8 = new Image(); i8.src = "gomb4w.jpg"; i9 = new Image(); i9.src = "gomb5g.jpg"; i10 = new Image(); i10.src = "gomb5w.jpg";} function mutat(kep_nev,kep_obj){ if (browserVer == 1) document.images[kep_nev].src = kep_obj.src;} // --> <a href="link.htm"

Felhasználói események által kiváltott képcserék onMouseOver="mutat('link1',i2)" onMouseOut="mutat('link1',i1)">

Layerek használata A Netscape Navigator 4.0 egy rendkívül fontos, jól hasznosítható új tulajdonsága volt a layerek (rétegek) használatának bevezetése. Aki már dolgozott valamilyen jobb képfeldolgozó, képretusáló programmal, például az Adobe Photoshoppal, annak nem jelenthet nagy újdonságot a layerek fogalma. A layereket (rétegek) legegyszerűbben fóliáknak képzelhetjük el. Minden egyes ilyen fóliarétegnek más és más lehet a tartalma, egymástól függetlenül kezelhetjük őket. Tehetünk rá képet, szöveget, űrlapelemeket stb., majd a layereket elhelyezhetjük az oldalunkon. Az egyes rétegek egymásra is kerülhetnek, természetesen a felső rétegek takarják az alattuk levő rétegeket, de ahol az egyes rétegek átlátszóak, ott átengedik az alattuk levő rétegek tartalmát. Ezzel például könnyedén megvalósíthatunk pusztán HTML elemek használatával olyan képet, amelyre egy szöveget írunk, vagy az oldalon lévő szöveg is kerülhet takarásba valamely más objektum, például egy kép által.

Layerek létrehozása Layereket a illetve a HTML elemekkel készíthetünk. Az alábbi táblázat bemutatja a beállítható tulajdonságokat: A HTML elemmel az oldal tetszőleges pozíciójába elhelyezhetünk layereket. A pozíciót a left és a top attribútumok adják meg. Ezek a layer bal felső pontjának helyét határozzák meg. Amennyiben nem adunk meg ilyen értékeket, akkor az alapértelmezett pozíció az ablak bal felső sarka. Az elem a layer pozícióját nem határozza meg explicit módon, hanem a dokumentum aktuális pozíciójába helyezi el.

Layerek létrehozása Layer példa

A JavaScript és a layerek kapcsolata A layereket JavaScript-en keresztül is kezelhetjük. Ezt két módon tehetjük meg legegyszerűbben. Adjunk nevet a layernek:... Ekkor a layert elérhetjük a document.layers["layer_neve"] ill. a document.layer_neve hivatkozásokkal. Elérhetjük a layereket a korábbiakban már megismert indexes módszerrel is, bár ennek használata nem túl kényelmes. A legalsó layert a document.layers[0] hivatkozással érhetjük el. A következőt a document.layers[1] néven és így tovább. Vegyük észre, hogy ezen indexelés nem egyezik meg a z-indexeléssel!

A JavaScript és a layerek kapcsolata <!-- A JavaScript elrejtése function Show(){ if (document.layers["myLayer"].visibility=="show") document.layers["myLayer"].visibility="hide"; else document.layers["myLayer"].visibility="show";} //--> Ez a szöveg a layer része...

Mozgó rétegek A layerek left és top attribútumaihoz is rendelhetünk új értékeket JavaScript segítségével. Hatására layerünk új helyen jelenik meg. Például a következő sor 150-re állítja a layer vízszintes pozícióját: document.layers["layer_neve"].left = 150; Ha egy olyan programot írunk, amely folyamatosan változtatja ezeket az értékeket, akkor egyszerű animációt készíthetünk.

Mozgó rétegek <!-- A JavaScript kód elrejtése layerArr = new Array(); index = 0; function setArr(name,dir){ layerArr[index] = new Array(2); layerArr[index][0] = name; layerArr[index][1] = dir; index++;} function init(){ setArr("layer1",true); setArr("layer2",false); setArr("layer3",true);} function move(){ for (var i=0; i<3; i++){ set_layer_pos(i); }} function change_dir(i){ layerArr[i][1] = !(layerArr[i][1]);}

Mozgó rétegek function set_layer_pos(i){ var layer = document.layers[layerArr[i][0]]; var pos = layer.left; if (pos > 300) change_dir(i); //elértük a jobb végét, hatra megyünk if (pos < 0) change_dir(i); //elértük a bal végét, újra előre if (layerArr[i][1]) pos += 5; //ha előre megyünk, növeljük a pos-t else pos -= //egyébként csökkentjük layer.left = pos; //beállítjuk az új pozíciót}// --> Layer példa

Vágás Minden layernek kijelölhetünk egy téglalap alakú részét úgy, hogy a layerből csak ez a rész lesz látható. Ezt a műveletet nevezzük vágásnak. Az alábbi egyszerű példában egy kép részét vágjuk ki az HTML elem CLIP attribútumának segítségével. Természetesen a elem is rendelkezik ezzel az attribútummal. Kivágtuk a képet tartalmazó layer (70,90) x (210,260) méretű részét. A CLIP attribútummal a kivágandó téglalap bal felső és jobb alsó csúcsainak koordinátáit definiálhatjuk. Természetesen sokkal látványosabb effektusok készíthetők a kivágásnak és a JavaScriptnek a kombinációjával. A kivágás mezőjét JavaScript-tel is módosíthatjuk, mégpedig úgy, hogy módosítjuk a layer objektum clip.left, clip.top, clip.right, clip.bottom mezőit. Ha új értékeket írunk ezekbe a mezőkbe, akkor a kivágás területe is módosulni fog. A következő példa a kivágás tartományának módosításával ér el egy egyszerű hatást:

Vágás <!-- A kód elrejtése var pic_width; var pic_height;var pos; function init(){ pic_width = document.layers["picLayer"].document.kep1.width; pic_height = document.layers["picLayer"].document.kep1.height; pos = 0; start();} function clip(left,top,right,bottom){ document.layers["picLayer"].clip.left=left; document.layers["picLayer"].clip.top=top; document.layers["picLayer"].clip.right=right; document.layers["picLayer"].clip.bottom=bottom;} function start(){ clip(0,0,pic_width,pos); pos+=2; if (pos

Egymásba ágyazott layerek Arról már volt szó, hogy a layerek több különböző objektumot tartalmazhatnak. A layerek ezen kívül más layereket is tárolhatnak. Ez arra lehet jó megoldás, ha objektumokat szeretnénk összecsoportosítani. A következő példa jól szemlélteti ezt. Létrehozunk egy "szülő" layert, amely két másik "gyerek" layert tartalmaz. Ha mozgatjuk a szülő layert (jobbra-balra), akkor ez hatással van az általa tartalmazott layerekre is. Azok is mozognak a szülő layerrel együtt. A gyerek layereket azonban külön-külön is mozgathatjuk, a szülőtől függetlenül (le és fel). A példában három gombot is létrehozunk, ezekre kattintva ki-bekapcsolhatjuk az egyes layerek mozgását.

Egymásba ágyazott layerek <!-- A kód elrejtése// az adatokat tartalmazó tömb létrehozása layerArr = new Array(); var index = 0; var attr;var border;// új elem létrehozása a layerArr[] tömbben function new_element(pos,moving,dir,layer){ layerArr[index] = new Array(3); // a layerArr minden eleme egy három elemű tömb layerArr[index][0] = pos; // a layer pozíciója layerArr[index][1] = moving; // a layer mozog-e (true = igen, false = nem) layerArr[index][2] = dir; // a layer mozgásának iránya (true = előre, false = hátra) layerArr[index][3] = layer; // a layer objektum index++;} // itt definiálom az új elemeket function init(){ new_element( 50,true, true,document.layers['szulo'].layers['gyerek1']); new_element( 100,true,false,document.layers['szulo'].layers['gyerek2']); new_element( 0,false, true,document.layers['szulo']);}// az i-edik layert megállítja/elindítja function StartStop(n){layerArr[n-1][1] = !layerArr[n-1][1];} function setPos(n,value){layerArr[n][0] = value;} function setMoving(n,value){ layerArr[n][1] = value;}

Egymásba ágyazott layerek function setDir(n,value){ layerArr[n][2] = value;} function getPos(n){ return layerArr[n][0];} function getMoving(n){ return layerArr[n][1];} function getDir(n){ return layerArr[n][2];} function getLayer(n){ return layerArr[n][3];}// a mozgatást végző függvény function move(){ for (var j=0; j<3; j++){ if (getMoving(j)){ // mozog-e a vizsgált layer if (getDir(j)) setPos(j,getPos(j)+1); // ha igen, melyik irányba else setPos(j,getPos(j)-1); if (j==2) border=200; else border = 80; if (getPos(j) < 0 ) setDir(j,true); // az irány megváltoztatása, ha elértük a széleket if (getPos(j) > border) setDir(j,false); if (j==2) getLayer(j).left = getPos(j); else getLayer(j).top = getPos(j); } } }// --> 1. LAYER 2. LAYER

A "sütik" Mire jók ezek? Tudjuk, hogy a HyperText Transfer Protocoll-t (HTTP) nem alkalmas arra, hogy kapcsolatot teremtsen két felhasználói (kliens) kérés között. Tegyük fel például, hogy egy olyan oldalt szeretnénk készíteni, amely felismeri azt, hogy ha valaki már nem az első alkalommal látogatja meg, és ismerve azt, hogy előzőleg milyen témákat tartalmazó oldalakat járt be az illető, most máshová küldi. A sütik segítségével adatokat tárolhatunk a felhasználó gépén. Persze nem kell megijedni, ezek lényegében veszélytelen információk, mégpedig a cookies.txt állományban megjelenő szöveges bejegyzések. Formátumuk a következő: név=érték;expires=dátum;

A "sütik" Először megadjuk az adat nevét, majd az egyenlőség másik oldalán az adat értéke áll. Ha a név ill. az érték tartalmaz vessző, pontosvessző vagy szóköz karaktereket, akkor az escape() függvényt kell felhasználni, hogy megfelelő formában kódoljuk, és az unescape() függvényt, hogy visszakódolhassuk. Az expires mező tartalmazza az érvényesség dátumát. A dátumot GMT formátumban kell megadni, amely a következő: Nap, NN-HHH-ÉÉ ÓÓ:PP:MP GMT Például: Wed, 12- Mar-98 12:23:45 GMT Ez március 12-ét, egy szerdai napot (Wed) ad meg, egészen pontosan 12 óra 23 perc 45 másodpercet. Egyszerűbben úgy adhatunk meg ilyen formátumú időt. hogy a Date által visszaadott dátumot a toGMTString() függvénnyel ilyen formátumúra hozzuk.

A "sütik" Megszorítások 1.A "sütikre" az alábbi korlátozások érvényesek: 2.legfeljebb 300 ilyen bejegyzés lehet a cookies.txt file-ban 3.egy bejegyzés mérete legfeljebb 4Kb 4.Szerverenként vagy domain-enként legfeljebb 20 "süti" lehet A "sütik" és a JavaScript A dokument objektum cookies mezője egy sztring, amely tartalmazza a Netscape Navigator összes bejegyzését, ami a cookies.txt állományban található. 1.A "sütikkel" a következőket tehetjük: 2.beállíthatjuk az értékét illetve az érvényességi idejét 3.megkaphatjuk az értékét a megadott nevű "sütinek"

A "sütik" A Netscape dokumentációja a következő függvényeket javasolja ezen műveletek elvégézséhez: 1. az érték és az opcionális érvényességi idő beállítása: function setCookie(name, value, expire) { document.cookie = name + "=" + escape(value) + ((expire == null) ? "" : ("; expires=" + expire.toGMTString()))} A függvény működése rendkívül egyszerű. Paraméterként adjuk át a cookie nevét, értékét, érvényességi dátumát. A függvény a name (név) paraméternek olyan sztringet vár, amelyben nincs az előzőekben említett speciális karakter. A value sztringet kódoljuk az escape() függvénnyel, hogy a sztringben lévő pontosvesszők, vesszők, szóközök helyesen kerüljenek tárolásra, majd hozzáfűzzük a name sztringhez. Ha nem adtunk meg dátumot (azaz a paraméter értéke null), akkor egy üres sztringet, ellenkező esetben a toGMTString() függvénnyel GMT formátumra hozott sztringet fűzzük az előzőekhez.

A "sütik" 2. adott nevű cookie értékének visszaadása function getCookie(Name){ var search = Name + "="; if (document.cookie.length > 0){ // megvizsgáljuk, hogy vannak-e cookie-k offset = document.cookie.indexOf(search);// ha igen, megkeressük az adott nevű elejét if (offset != -1){ // ha van ilyen akkor: offset += search.length; end = document.cookie.indexOf(";", offset); // az end egyenlő a vizsgált cookie végét lezáró ; helyével if (end == -1) end = document.cookie.length; // ha nincs pontosvessző akkor end egyenlő a cookie sztring hosszával return unescape(document.cookie.substring(offset, end)); } }}

Példa a "süti" használatára <!-- JavaScript kód rejtése function setCookie(name, value, expire) { document.cookie = name + "=" + escape(value) + ((expire == null) ? "" : ("; expires=" + expire.toGMTString()));} function getCookie(Name){ var search = Name + "="; if (document.cookie.length > 0){ offset = document.cookie.indexOf(search); if (offset != -1){offset += search.length; end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(offset, end)); } }}// -->

Példa a "süti" használatára <!— var user = getCookie("greeting"); if (user == null){ user = prompt("Köszöntelek ezen az oldalon! Kérlek írd be a neved!",""); if (user == null){ alert("Nem írtad be a neved ezért a továbbiakban \"Fantomnak\" nevezlek!"); user = "Fantom"; } expDate = new Date(); expDate.setTime(expDate.getTime() + (365*24*60*60*1000)); setCookie('greeting',user,expDate); document.write("Ha legközelebb visszatérsz, már megismerlek!");} else{ document.write("Üdvözöllek ismét ezen az oldalon "+user+"! Látom visszatértél.");}//-->

Köszönöm a figyelmet!

Felhasznált irodalom bp.sulinet.hu/seged/javas.ziphttp:// bp.sulinet.hu/seged/javas.zip