 |
|
|
|
|
|
|
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="Ez fog majd megjelenni 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='A Yahoo keresõ honlapja'; 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="#0000FF";
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 (ezt 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 visszalép ide 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 scroll() 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. | |||||
