A JavaScript
A JavaScript programok képesek írni az állapotsorra, amely a böngésző alján
található. Nem kell mást tenni, mint hozzárendelni egy sztringet a window.status-hoz
(azaz a window objektum status mezőjéhez). A következő példa ezt
mutatja be.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript kód elrejtése
function statusz(szoveg){
window.status=szoveg;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="urlap1">
<INPUT TYPE="text" NAME="szoveg"
VALUE="Írj be egy szöveget, ami majd megjelenik az állapotsorban!" SIZE=40>
<INPUT TYPE="button" VALUE="Írd ki!" onClick="statusz(document.urlap1.szoveg.value)">
<INPUT TYPE="button" VALUE="Töröld!" onClick="statusz('')">
</FORM>
</BODY>
</HTML>
Létrehoztunk egy rövid statusz() nevű függvényt, amely a paraméterként megkapott sztringet írja ki az állapotsorba. Létrehoztunk egy űrlapot is, egy szövegmezővel és két gombbal. Ha az első gombra kattintunk, akkor a szövegmező tartalmával (document.urlap1.szoveg.value) hívjuk meg a statusz() függvényt, ha a második - törlés - gombra kattintunk, akkor üres sztringet adunk át a függvénynek, ugyanis ha ezt rendeli a window.status-hoz, akkor törli annak korábbi tartalmát (és mi éppen ezt akartuk elérni).
Az állapotsort gyakran használjuk arra, hogy információkat közöljünk a felhasználókkal. Például ha egy link felett tartózkodik az egérmutató, akkor az állapotsorban leírhatjuk, hogy hová juthatunk, ha rákattintunk. Álljon itt egy rövid példa, amely bemutatja ezt: www.yahoo.com
<A HREF="http://www.yahoo.com" onMouseOver="window.status='Ez a Yahoo keresőszerverre visz'; return true;" onMouseOut="window.status='';">www.yahoo.com</A>
Két eseménykezelőt használtunk itt fel, az onMouseOver és az onMouseOut nevűt. Az előbbi akkor aktivizálódik, amikor az egérmutató a link felett van, a második pedig akkor, amikor kilép onnan. Az egyetlen magyarázatra váró részlet az, hogy miért használtunk return true utasítást. Ennek az az oka, hogy természetes körülmények között a böngésző megjeleníti azt a címet, ahova a link visz bennünket. Ha most is ezt tenné a böngésző, akkor először egy pillanatra megjelenne az a szöveg, amit ki szeretnénk íratni, majd azt rögtön átírná a böngésző az adott címre. A böngészőnek ezt a természetes működését kerülhetjük ki azzal, hogy a return true utasítást alkalmazzuk az eseménykezelőben.
A régebbi böngészôk még nem ismerik az onMouseOver eseményt, hiszen az még nem szerepel a JavaScript 1.0-ban. Ha azt akarjuk, hogy a fenti programot ezen böngészôkön is lehessen futtatni, akkor helyettesíteni kell ezt az eseményt valami mással. Például írjuk ki a szöveget az állapotsorba, és hagyjuk ott valamennyi ideig. Ezt késleltetés (timeout) révén érjük el, ami azt jelenti, hogy a számítógép valamely kódot bizonyos idô elteltével fog csak végrehajtani. A következô példa létrehoz egy gombot, ami átváltja a háttérszínt, majd 3 másodperc múlva visszavált az eredetire.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
function idozit(){
document.bgColor="#00FFFF";
setTimeout("document.bgColor='#FFFFFF'",3000);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM>
<INPUT TYPE="button" VALUE="Háttérszín cseréje 3 mp-ig" onClick="idozit()">
</FORM>
</CENTER>
</BODY>
</HTML>
Az idozit() függvényben felhasználtuk a setTimeout() függvényt, amely a window objektum metódusa. Két argumentuma van a függvénynek. Az elsô az a JavaScript kód, amit végre kell hajtani bizonyos idô eltelte után (idézôjelek közé kell tenni). A második argumentum mondja meg, hogy mennyi idô múlva hajtsa végre a számítógép a kódot. Ezredmásodpercben kell megadni.
Lássunk még egy egyszerű példát az időzítésre. Ha az alábbi linkre kattintunk, akkor egy olyan oldalra kerülünk, amely automatikusan továbblép egy új oldalra 5 másodperc múlva.
Ha kivárjuk az 5 másodpercet, akkor visszakerülünk ide (persze, ha türelmetlenek vagyunk, kattinthatunk a linken is :-). Nézzük meg az oldal kódját!
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
function LoadPage(){
setTimeout("location.href='statusz.htm'",5000);
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad='LoadPage()'>
<A HREF="statusz.htm">Ez a link automatikusan is aktivizálódik 5mp múlva</A>
</BODY>
</HTML>
Amint az látható, a <BODY> HTML elembe beraktuk az onLoad eseménykezelőt. Ez az aktuális oldal betöltésének befejeződésekor aktivizálódik. Az eseménykezelő meghívja a LoadPage() függvényt, ahol a már ismerős setTimeout() függvényt találjuk. Időzítés révén a location objektum href mezőjének új értéket adunk 5000 ezredmásodperc, azaz 5 másodperc múlva. Így töltjük be automatikusan az új oldalunkat.
Mire lehet ezt használni? Ha van egy olyan oldalunk, amely például 5 percenként új adatokat közöl egy éppen folyó sporteseményről, akkor érdemes egy automatikus frissítést beépíteni, hogy az oldalunkat böngésző érdeklődők is a legfrissebb adatokat olvashassák. Ezt pedig úgy oldhatjuk meg, hogy a location.href-hez az oldal címét rendeljük hozzá (azaz rátöltjük önmagára az eredeti oldal egy újabb, módosított változatát).
A másik gyakori alkalmazás, hogy ha több szerverre is van azonosítónk, de honlapunk csak az egyiken létezik, akkor ilyen automatikus átirányításokkal eljuttathatjuk honlapunkhoz azokat is, akik esetleg másik szerverről próbálják meg elérni azt. Ehhez elegendő azokon a szervereken elhelyezni egy ilyen automatikus átirányítást elvégző HTML oldalt.
Egyszerűsége miatt gyakran alkalmazott JavaScript program a scroll, ami egy szöveget gördít az állapotsorban. Lássuk, hogyan is valósítható ez meg? Ha kiírjuk a szöveget, majd rövid idő múlva kiírjuk ugyanazt a szöveget, csak egyetlen karakterrel balra tolva, és ezt az eljárást ismételgetjük, akkor olyan hatást érünk el, mintha mozogna a szövegünk jobbról-balra. A következő gombra kattintva megnyitunk egy ablakot, amely státuszsorában egy szöveget görgetünk.
A program kódja a következő:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
var str = "";
function scroll(){
if (str == ""){
for (var i=0; i<150; i++) str = str + " ";
str = str + "Bevezetés a JavaScript programozásába";
}
else
str = str.substring(2, str.length);
window.status = str;
window.setTimeout('scroll()',70);
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="FFFFFF" onLoad="scroll()">
JavaScript scroll...
</BODY>
</HTML>
A program működése rendkívül egyszerű. Az oldal betöltése után az onLoad esemény meghívja a scoll() függvényt. Ez felhasznál egy str nevű sztringet. Ha ez a sztring üres, akkor belerakunk 150 darab szóközt illetve magát a kiírandó szöveget. Ha nem, akkor a substring metódussal levágjuk az első karaktereit.
str = str.substring(1, str.length);
A substring a String objektum metódusa (a következő fejezetben részletesen szó lesz róla). Egy részsztringet ad vissza, a fenti esetben az egész sztringet az első karakter kivételével. Ha megjelenítjük az így megrövidített szöveget és ezt setTimeout segítségével ismételgetjük, akkor éppen a kívánt hatást érjük el.
A következő scroll egy kicsit módosított változata az előzőnek.
Nézzük meg a kódot részletesebben!
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
var init_str = "A JavaScript programozása ";
var mozgat_str = "";
var temp_str = "";
var bal_str = "";
function scroll(){
if (temp_str == ""){
mozgat_str = " ";
temp_str = init_str;
bal_str = "";
}
if (mozgat_str.length == 1){
while (temp_str.substring(0,1) == " "){
bal_str = bal_str + mozgat_str;
mozgat_str = temp_str.substring(0,1);
temp_str = temp_str.substring(1,temp_str.length);
}
bal_str = bal_str + mozgat_str;
mozgat_str = temp_str.substring(0,1);
temp_str = temp_str.substring(1,temp_str.length);
for (var i = 0; i < 120; i++) mozgat_str = " " + mozgat_str;
}
else
mozgat_str = mozgat_str.substring(10, mozgat_str.length);
window.status = bal_str + mozgat_str;
setTimeout('scroll()',100)
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="ffffff" onLoad="scroll()">
Egy módosított JavaScript scroll...
</BODY>
</HTML>
Négy sztringet használtunk fel. Az init_str tartalmazza az eredeti szöveget, a bal_str tárolja azokból a karakterekből álló sztringet, amelyeket már átmozgattunk balra. A mozgat_str az aktuális karakter mozgatására szolgál, a temp_str pedig a jobb oldalon "maradt" karaktereket tartalmazza. Ha a temp_str kiürült vagy üres volt, akkor teljesül a temp_str == "" feltétel. Ekkor a
if (temp_str == ""){
mozgat_str = " ";
temp_str = init_str;
bal_str = "";
}
rész kerül végrehajtásra. Itt újra feltöltjük a temp_str sztringet az init_str segítségével, valamint a bal_str és mozgat_str-nek is kezdőértéket adunk. A program működési elve az, hogy a sztringeket a fent látott módon inicializáljuk. Ha a mozgat_str sztring csak 1 karaktert tartalmaz, akkor beletesszük az első jobbról-balra görgetendő betűt úgy, hogy elé még 120 darab szóközt is felfűzünk. Vegyük észre, hogy a mozgat_str sztring közvetlenül az inicializálás után, illetve akkor, amikor "átért" a betű jobbról-balra, éppen 1 darab szóköz karaktert tartalmaz. Így belekerül egy új karakter a temp_str elejéről ill. a 120 darab szóköz is, miután a mozgat_str tartalmát a bal_str-hez fűztük.
if (mozgat_str.length == 1){
..........
bal_str = bal_str + mozgat_str;
mozgat_str = temp_str.substring(0,1);
temp_str = temp_str.substring(1,temp_str.length);
for (var i = 0; i < 120; i++) mozgat_str = " " + mozgat_str;
}
Ha nem csak 1 karakter van a mozgat_str-ben (azaz a jobbról gördülő betű még nem ért át a másik oldalra), akkor a
mozgat_str = mozgat_str.substring(10, mozgat_str.length);
utasítás levágja a mozgat_str elejét (első 10 karakterét, ezek szóközök) és ezt írja vissza a mozgat_str-be. Ez okozza majd a betű mozgását, ha majd kiírjuk a státuszsorba a bal_str+mozgat_str összefűzött sztringet:
window.status = bal_str + mozgat_str;
Már csak egy kódrészlet maradt ki.
while (temp_str.substring(0,1) == " "){
bal_str = bal_str + mozgat_str;
mozgat_str = temp_str.substring(0,1);
temp_str = temp_str.substring(1,temp_str.length);
}
Ez a while ciklus a fentebb kiemelt programrészlet kipontozott részén van és azért felelős, hogy a temp_str elejéről a szóközöket (tehát olyan karaktereket, amelyeket hiába mozgatnánk át, nem látszanának) a bal_str sztring végéhez fűzze.
A setTimeout révén 100 ezredmásodpercenként lefut a függvény, ez erdeményezi az animációt. [ 6. fejezet ] [ Tartalomjegyzék ]