Uvod v JavaScript

4.del

JavaScript nam omogoča tudi pisanje v statusni vrstici (vrstica na dnu vašega brskalnika, kjer so prikazani URL-naslovi...). Izvedeli pa bomo tudi kako deluje scroller - premikajoči tekst v statusni vrstici.
Začnimo s 'klicanjem' statusne vrstice. Naslednji primer kaže, kako lahko preprosto vpišemo besedilo v statusno vrstico.

Skripta sledi...

<html>
<head>
<script language="JavaScript">
<!-- skrivanje
function StatusnaVrstica(txt) {
   window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="glej" value="Vpisi!" onclick="StatusnaVrstica('Hojla! To je statusna vrstica!');">
<input type="button" name="brisi" value="Brisi!" onclick="StatusnaVrstica('');">
</form>
</body>
</html>

Kreirali smo dva ukazna gumba (button), ki kličeta funkcijo StatusnaVrstica(txt). Txt med oklepaji je le spremenljivka, ki smo jo določili pri klicu funkcije (spremenljivko lahko poimenujemo tudi kakorkoli drugače). Funkcijo StatusnaVrstica(txt) smo klicali iz <form> tag-a, kjer smo kreirali gumba. A tu namesto txt vpisemo tekst, ki ga želimo videti v statusni vrstici. Torej: ko je funkcija klicana, definira spremenljivko txt - 'vrednost' spremenljivke pa smo podali pri klicu funkcije. Ko kliknemo gumb 'Vpisi!' pokličemo funkcijo StatusnaVrstica(txt) in spremenljivka txt prevzame vrednost 'Hojla! To je ukazna vrstica!'. Spremenljivko txt lahko spet uporabimo. Ta metoda določanja spremenljivk pri klicu funkcije omogoča zelo fleksibilno funkcijo. Poglejte drugi gumb. Klicali smo isto funkcijo. Brez metode določanja spremenljivk pri klicu funkcije bi morali uporabiti dve funkciji. In kaj naredi funkcija StatusnaVrstica(txt)? Preprosto. Vsebino txt zapišemo v spremenljivko window.status. To naredimo z ukazom window.status=txt; Vpis praznega besedila ("") v statusno vrstico kakopak le-to izbriše. Bodite pozorni na uporabo enojnih navednic ', saj smo uporabili dvojne navednice pri definiranju dogodka onClick. Brskalnik mora vedeti, katere navednice sodijo skupaj - zato moramo navednice ločevati.

OnMouseOver dogodek (property) poznamo že iz drugega dela Uvoda v JavaScript:
<a href="dajstran.htm" onMouseOver="window.status='Odmakni kurzor!'; return true">
Verjetno ste opazili, da, ko kurzor umaknemo, napis v statusni vrstici ne izgine. Rešitev je preprosta. Napisali bomo preprosto funkcijo, ki uporabi enako tehniko brisanja statusne vrstice kot primer zgoraj. Toda, ker nimamo dogodka, ki bi določal, kdaj je kurzor 'zapustil' območje linka, bomo uporabili timer (štoparico).

Preizkusite tole skripto tule. Kurzor samo premaknite čez - ne klikajte po link-u (in ne pozabite gledati v statusno vrstico).

<html>
<head>
<script language="JavaScript">
<!-- skrivanje
function Premik(txt) {
   window.status = txt;
   setTimeout("Brisi()",1000);
}
function Brisi() {
   window.status="";
}
// -->
</script>
</head>
<body>
<a href="neklikni.htm" onMouseOver="Premik('Pocasi izginjam...!');return true;">
link</a>
</body>
</html>

Verjetno ste prepoznali večino delov te skripte. Funkcija Premik(txt) je zelo podobna funkciji StatusnaVrstica(txt). Tako je tudi s funkcijo Brisi(txt). Kreirali smo link z znanim dogodkom onMouseOver. Pri klicu funkcije Premik(txt) smo za spremenljivko txt dolocili 'Počasi izginjam...!' - tako kot pri funkciji StatusnaVrstica(txt). Kar je pa novega, je funkcija setTimeout(...). Ta določi, kako dolg je časovni inteval timer-ja in kaj se zgodi, ko ta čas preteče. V našem primeru je funkcija Brisi() klicana po preteku 1000 milisekund. Gre za zelo uporabno funkcijo! Funkcija Premik(txt) neha delovati po eni sekundi, saj brskalnik pokliče funkcijo Brisi().
Potem, ko določeni čas preteče, se timer ne vklopi znova. Lahko pa bi ga klicali še enkrat iz funkcije Brisi(). To pa nas že vodi na področje scroller-ja (premikajočega teksta v statusni vrstici).

Ker že znate pisati v statusno vrstico in veste, kako nastaviti setTimeout dogodek, bo scroller lahek za razumevanje.

Preizkusite scroller s klikom na gumb.

Oglejte si skripto:

<html>
<head>
<script language="JavaScript">
<!-- skrivanje

var scrtxt="To je sporocilo, ki ga bodo obiskovalci "+
"na vasi domaci strani obcudovali ure in ure...";
var dolztxt=scrtxt.length;
var sirina=100;
var poz=1-sirina;

function scroll() {
  poz++;
  var scroller="";
  if (poz==dolztxt) {
    poz=1-sirina;
  }
  if (poz<0) {
    for (var i=1; i<=Math.abs(poz); i++) {
      scroller=scroller+" ";}
    scroller=scroller+scrtxt.substring(0,sirina-i+1);
  }
  else {
    scroller=scroller+scrtxt.substring(poz,sirina+poz);
  }
  window.status = scroller;
  setTimeout("scroll()",150);
  }
//-->
</script>
</head>
<body onLoad="scroll();return true;">
Domaca stran, ki si jo lahko le zelite!
</body>
</html>

Zgornji primer uporablja funkcije, ki smo jih že spoznali v prejšnjih primerih. setTimeout 'ukaže' timer-ju, da po preteku časovnega intervala pokliče funkcijo scroll(). Tekst v statusni vrstici se pomakne naprej. Na začetku programa je veliko kalkulacij, ki pa niso pomembne za razumevanje delovanja skripte. Kalkulacije le določijo, kje naj se premikajoči tekst začne ipd.

avtor: Žiga Mahkovec
november, 1998