Voodoo's Intro to JavaScript

VOODOO'S INTRODUCTION TO JAVASCRIPT
© 1996, 1997 by Stefan Koch © 1998 Romanian translation by Calin Nicolae

Partea a 5-a: Bara de stare (statusbar) si intreruperile (timeouts)

Bara de stare (statusbar)

Programele dumneavoastra JavaScript pot scrie pe bara de stare - Aceasta este bara din josul ferestrei dumneavostra de browser. Tot ce aveti de facut este sa dati o valoare-sir lui window.status. Urmatorul exemplu arata doua butoane care pot fi folosite pentru a scrie pe bara de stare iar apoi pentru stergerea acestui text.

Scriptul arata astfel:

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

function statbar(txt) {
   window.status = txt;
}

// -->
</script>
</head>
<body>

<form>
  <input type="button" name="look" value="Write!" 
    onClick="statbar('Hi! This is the statusbar!');">
  <input type="button" name="erase" value="Erase!" 
    onClick="statbar('');">
</form>

</body>
</html>

Creem un formular cu doua butoane. Ambele butoane apeleaza functia statbar(). Puteti vedea ca apelarea functiei creata de butonul Write! arata astfel:

statbar('Hi! This is the statusbar!');

In interiorul parantezelor specificam sirul 'Hi! This is the statusbar!' Aceasra inseamna ca sirul este trimis functiei statbar(). Puteti vedea ca am definit functia statbar() astfel:

function statbar(txt) {
   window.status = txt;
}

Ceea ce aduce nou este folosirea txt in interiorul parantezelor apartinand functiei. Aceasta inseamna ca sirul pe care il transmitem ete inmagazinat intr-o variabila txt.
Transmiterea valorilor catre functii este deseori folosita pentru a face functiile mai flexibile. Puteti transmite mai multe valori functiilor - trebuie doar sa le separati prin virgule.
Sirul txt este afisat pe bara de stare prin intermediul window.status = txt.
Stergerea textului de pe bara de stare se face prin definirea unui sir gol pentru window.status.

Afisarea textului pe bara de stare poate fi usor utilizata in combinatie cu legaturile hipertext. In loc ca bara de stare sa afiseze locatia web a paginii din link este posibil ca pe bara de stare sa aveti o descriere a paginii urmatoare. Acest link demonstreaza chiar asta - este de ajuns sa pozitionati cursorul deasupra legaturii. Codul pentru acest exemplu arata astfel:

<a href="dontclck.htm" 
  onMouseOver="window.status='Don\'t click me!'; return true;"
  onMouseOut="window.status='';">link</a>

Aici utilizam onMouseOver si onMouseOut pentru a detecta cand pointerul mouseului trece deasupra legaturii (linkului).
Probabil va intrebati de ce trebuie sa scriem return true in interiorul proprietatii onMouseOver . Aceasta inseamna ca browserul nu va executa codul sau propriu ca reactie a evenimentului onMouseOver. In mod obisnuit browserul afiseaza pe bara de stare URL-ul (adresa din Internet) spre care trimite legatura. Daca nu utilizam return true browserul va scrie pe bara de stare imediat ce codul nostru a fost executat - deci va sterge textul nostru si utilizatorul nu il va putea citi. In general putem sa suprimam actiunile urmatoare ale browserului folosind return true in managerul de eveniment.
onMouseOut nu exista in JavaScript 1.0. Daca folositi Netscape Navigator 2.x puteti obtine rezultate diferite pe platforme diferite. Pe platformele Unix textul dispare chiar daca browserul nu cunoaste onMouseOut. Pe platformele Windows textul nu dispare. Daca doriti ca scriptul dumneavoastra sa fie compatibil cu Netscape 2.x pentru Windows puteti scrie de exemplu o functie care scrie textul pe bara de stare si il sterge periodic dupa o anumita perioada de timp. Acest efect este realizat cu ajutorul unei intreruperi - pauza (timeout). Vom analiza intreruperile in paragraful urmator.
In acest script pueti vedea inca un lucru - cateodata veti dori sa afisati ghilimele. Dorim sa afisam textul Don't click me - deorece specificam sirul in interiorul unui manager de eveniment onMouseOver folosim gilimele simple. Dar cuvantul Don't foloseste inca o ghilimea sinpla! Browserul este 'ametit' dac scrieti direct 'Don't ...'. Pentru a rezolva problema puteti sa folositi \ inaintea ghilimelelor - ceea ce inseamna ca urmarea apartine iesirii (puteti folosi acelasi procedeu si cu ghilimele duble ").

Intreruperi

Cu ajutorul intreruperilor (sau a unui numarator) puteti lasa computerul sa execute un anumit cod dupa o anumita perioada de timp. Am creeat un buton - daca apasati acest buton o fereastra va aparea dupa 3 secunde:

Scriptul arata astfel:

<script language="JavaScript">
<!-- hide

function timer() {
  setTimeout("alert('Time is up!')", 3000);
}

// -->
</script>

...

<form>
  <input type="button" value="Timer" onClick="timer()">
</form>

setTimeout() este o metoda a obiectului window. Aceasta metoda fixeaza intreruperea - v-ati dat deja seama de aceasta. Primul argument este codul JavaScript care va fi executat dupa o anumita perioada de timp. In cazul nostru argumentul este "alert('Time is up!')". Va rog sa observati ca secventa de cod JavaScript trebuie sa fie in interiorul ghilimelelor.
Cel de-al doilea argument spune computerului care este momentul in care codul va fi executat. Trebuie sa specificati timpul in milisecunde (3000 millisecunde = 3 secunde).

Scroller - Linie text in miscare

Acum ca stiti cum sa scrieti pe bara de stare si stiti cum functioneaza intreruperile o sa vedem cum sunt realizate linilile de text in miscare - scroller-ele. Probabile ca deja sunteti familiarizati cu liniile de text in miscare pe bara de stare. Ele pot fi vazute peste tot pe Internet. Vom vede cum sa programam un scroller. In afara de aceasta vom incerca sa analizam posibile imbunatatire ale scrollerului de baza.
Scroller-urile sunt destul de usor de implementat. Haideti sa ne gandim cum sa realizam un text in miscare. Trebuie sa scriem un textpe bara de stare. Dupa o perioada foarte scurta trebuie sa scriem acelasi text pe bara de stare - dar trebuie sa il mutam un pic mai la stanga. Daca repetam operaiunile de mai multe ori obtinem un text in miscare.
Trebuie acum sa ne gandim cum putem determina care parte a textului sa fie afisata, deoarece lungimea totala a textului este de regula mai mare dacat bara de stare.

Acest buton va deschide o noua fereastra si va afisa un scroller:

Iata codul sursa - am adauat cateva comentarii:

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


// define the text of the scroller
var scrtxt = "This is JavaScript! " +
    "This is JavaScript! " +
    "This is JavaScript!"; 
var length = scrtxt.length;
var width = 100;
var pos = -(width + 2);

function scroll() {

  // display the text at the right position and set a timeout

  // move the position one step further
  pos++;

  // calculate the text which shall be displayed
  var scroller = "";
  if (pos == length) {
    pos = -(width + 2);
  }

  // if the text hasn't reached the left side yet we have to
  // add some spaces - otherwise we have to cut of the first
  // part of the text (which moved already across the left border
  if (pos < 0) {
    for (var i = 1; i <= Math.abs(pos); i++) {
      scroller = scroller + " ";}
    scroller = scroller + scrtxt.substring(0, width - i + 1);
  }
  else {
    scroller = scroller + scrtxt.substring(pos, width + pos);
  }

  // assign the text to the statusbar
  window.status = scroller;

  // call this function again after 100 milliseconds
  setTimeout("scroll()", 100);
}

// -->
</script>
</head>

<body onLoad="scroll()">
Your HTML-page goes here.
</body>
</html>

Partea centrala a functiei scroll() este necesara pentru calcularea exacta a carei parti a textului este afisata. Nu voi explica codul in detaliu - trebuie doar sa intelegeti cum functioneaza scrollerele in general.
Pentru a porni scrollerul folosim managerul de eveniment onLoad in tagul <body>. Aceasta inseamna ca functia scroll() va fi apelata imediat dupa ce pagina HTML a fost incarcata.
Apelam functia scroll() cu proprietatea onLoad. Primul pas al scrollerului este calculat si afisat. La sfarsitul fuctiei scroll() fixam o intrerupere. Aceasta face ca functia scroll() sa fie executata din nou dupa 100 millisecunde. Textul este mutat un pas inainte si o alta intrerupere isi face aparitia. Acest proces continua la infinit.
(Au fost unele probleme cu acest tip de scroller cu Netscape Navigator 2.x. Cateodata acest cod genera o eroare 'Out of memory'. Am primit multe mesaje cu explicand aceasta prin recursivitatea functiei scroll() - care duce in final la memory overflow. Dar nu este adevarat. Aceasta nu este o functie recursiva! Avem o functie recursiva daca apelam functia scroll() in interiorul functiei scroll() insasi. Dar nu facem asa ceva aici. Functia veche ce fixeaza intreruperea este incheiata inainte ca noua functie sa fie executata. Problema era ca sirurile nu por fi cu usurinta schimbate. Daca incercati JavaScript va creea un nou sir dar nu il va sterge pe cel vechi. Iata ce ducea la umplerea memoriei.)
Scroller-urile sunt foarte raspandite pe Internet. Exista de aceea riscul sa devina nepopulare foarte repede. Trebuie sa recunosc ca nu ma atrag prea tare, in special in cazurile in care URL unei legaturi nu se mai poate citi din cauza scrollerului pe bara de stare. Aceasta situatie se poate remedia prin orirea scrollerului atunci cand un eveniment MouseOver are loc - scrollerul poate porni cu onMouseOut. Daca oriti neaparat sa aveti un scroller incercati sa nu aveti un scroller standard - incercati sa adaugati un efect interesant. Poate ca o parte a textului vine dinspre stanga iar cealalta parte vine dinspre dreapta iar atunci cand se intalnesc textul se opreste pentru cateva secunde. Cu fantezie puteti casi cateva variante interesante. (Am cateva exemple in cartea mea de JavaScript).

[previous] [index] [next]

©1996,1997 by Stefan Koch
e-mail:skoch@rumms.uni-mannheim.de
http://rummelplatz.uni-mannheim.de/~skoch/
My JavaScript-book