JavaScript
Wprowadzenie do JavaScript
 CzΩ╢µ 4



Teraz chcia│bym pokazaµ, jak mo┐na umie╢ciµ tekst w linii statusu (chodzi o wiersz u do│u ekranu przegl▒darki, gdzie zwykle pokazywane s▒ URL-e) i wyja╢niΩ, na czym polega przewijanie umieszczonego tam tekstu - chocia┐ tego akurat JavaScript bardzo nie lubi (powiem po╝niej dlaczego).
Zacznijmy od pokazania, jak linia statusu jest w│a╢ciwie "adresowana"? Poni┐szy skrypt pokazuje, jak mo┐na umie╢ciµ tam prosty tekst:

úadnie, no nie? A oto skrypt: 

<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
   window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="Pisz!" onclick="statbar('Hej! To jest linia statusu!');">
<input type="button" name="erase" value="Wyma┐!" onclick="statbar('');">
</form>
</body>
</html>

Utworzyli╢my dwa przyciski i oba wywo│uj▒ funkcjΩ statbar(txt). Wyra┐enie 'txt' wskazuje, ┐e funkcja otrzymuje pewn▒ zmienn▒ przekazan▒ jej podczas wywo│ania. (Ja nazwa│em tΩ zmienn▒ po prostu txt - mo┐na by j▒ nazwaµ inaczej). Je╢li przyjrzysz siΩ znacznikowi <form> w miejscu, gdzie definiowane s▒ przyciski, dostrze┐esz ┐e jest tam wywo│ywana funkcja statbar(txt). Nie napisa│em tam jednak txt tylko poda│em tekst, kt≤ry ma zostaµ umieszczony w linii statusu. Mo┐na to odczytaµ nastΩpuj▒co: funkcja zostaje wywo│anaa a zmienna txt uzyskuje warto╢µ, kt≤ra przekazana zostaje tej funkcji. Po naci╢niΩciu przycisku 'Pisz!' wywo│ana zostaje funkcja statbar(txt), a txt zawiera string 'Hej! To jest linia statusu'. Taka metoda przekazywania zmiennych do funkcji jest bardzo elastyczna. Sp≤jrz teraz na drugi przycisk. Wywo│uje on tΩ sam▒ funkcjΩ. Gdyby╢my nie mogli przekazywaµ funkcjom pewnych parametr≤w, musieliby╢my dla ka┐dego przypadku tworzyµ odrΩbn▒ funkcjΩ.
Co w│a╢ciwie robi statbar(txt)? Jest to funkcja do╢µ prosta. Przypisuje warto╢µ zmiennej txt zmiennej 'window.status' czyli window.status = txt;. Je╢li podany zostanie pusty string (''), to wiersz statusu zostanie wyczyszczony. Zauwa┐, ┐e musieli╢my tu u┐yµ pojedynczych cudzys│ow≤w ('), gdy┐ podw≤jne cudzys│owy (") u┐yte zosta│y do zdefiniowania 'onClick'. Kompilator musi jednoznacznie rozpoznaµ zawarto╢µ ujΩt▒ cudzys│owami, dlatego te┐ trzeba by│o obu rodzaj≤w u┐yµ przemiennie. S▒dzΩ, ┐e to jest ca│kiem proste.

W│asno╢µ 'onMouseOver' znasz ju┐ z drugiej czΩ╢ci niniejszego podrΩcznika:
<a href="stupid.htm" onMouseOver="window.status='Jeszcze jeden g│upi odsy│acz ...'; return true">
Czy nie irytuje ciΩ, ┐e linia statusu nie zostaje wyczyszczona kiedy kursor nie wskazuje ju┐ na ┐aden odsy│acz? Mam na to do╢µ prosty spos≤b. Napiszmy niewielk▒ funkcjΩ, kt≤ra wykorzystuje tΩ sam▒ technikΩ wymazywania linii statusu, kt≤r▒ przedstawili╢my wy┐ej.

Ale jak funkcja wymazuj▒ca ma byµ wywo│ana, skoro nie mamy metody ani w│asno╢ci, kt≤ra pozwoli│aby nam dowiedzieµ siΩ, czy kursor myszki opu╢ci│ odsy│acz. Rozwi▒zanie polega na ustawieniu timera.

Wypr≤bujmy nastΩpuj▒cy skrypt: tu. Przesu± tylko kursor - nie klikaj!

Posz│o do╢µ g│adko, prawda? Sp≤jrz tylko na kod ╝r≤d│owy - jest prostszy ni┐ siΩ na pierwszy rzut oka wydawa│o. 

<html>
<head>
<script language="JavaScript">
<!-- Hide
function moveover(txt) {
   window.status = txt;
   setTimeout("erase()",1000);
}
function erase() {
   window.status="";
}
// -->
</script>
</head>
<body>
<a href="dontclck.htm" onMouseOver="moveover('Znika!');return true;">
link</a>
</body>
</html>

Wiele czΩ╢ci tego skryptu jest Ci ju┐ znanych. Funkcja moveover(txt) jest funkcj▒ statbar(txt) poddan▒ operacji kopiuj/wklej! Prawie to samo sta│o siΩ z funkcj▒ erase().

W obrΩbie dokumentu HTML (po znaczniku <body>) utworzyli╢my odsy│acz, wykorzystuj▒c znan▒ ju┐ w│asno╢µ onMouseOver. Nasza funkcja moveover(txt) wywo│ywana jest ze stringiem 'Znika!' przekazanym zmiennej txt - tak samo jest w przypadku funkcji statbar(txt). Jedynie funkcja setTimeout(...) jest nowa. Ustala ona timeout, czyli okre╢la, jak d│ugo timer bΩdzie odlicza│ czas i co siΩ stanie, gdy limit czasu zostanie przekroczony. W naszym przyk│adzie funkcja erase() jest wywo│ana po up│ywie 1000 milisekund (czyli po sekundzie, jak │atwo obliczyµ). To fantastystyczna cecha! Funkcja moveover(txt) zostaje zako±czona po up│ywie ustalonego z g≤ry czasu. Przegl▒darka automatycznie wywo│uje funkcjΩ erase() po up│ywie 1 sekundy. (Mo┐na wyobraziµ sobie stronΩ, na kt≤rej m≤wi siΩ siΩ u┐ytkownikowi: Je╢li nie zrobisz tego a tego, to tw≤j dysk twardy zostanie zniszczony wci▒gu 10 sekund!)
Gdy mija ustalony okres, timer nie jest uruchamiany ponownie. Ale mo┐e go uruchomiµ ponownie funkcja erase().
To prowadzi nas do powszechnie lubianych przewijaczy (scrollers) tekstu.

Je╢li wiesz ju┐, jak umie╢ciµ tekst w linii statusu i jak dzia│a funkcja setTimeout - zrozumiesz │atwo, jak dzia│a przewijacz.

Naci╢nij ten przycisk, aby zobaczyµ m≤j przewijacz. Skrypt musi zostaµ za│adowany z serwera, a wiΩc b▒d╝ cierpliwy, je╢li nie zobaczysz przewijacza natychmiast.

Przyjrzyj siΩ skryptowi: 

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

var scrtxt="To jest wiadomo╢µ, na kt≤r▒ odwiedzaj▒cy twoj▒ stronΩ bΩd▒ "+
"patrzyli godzinami ca│kiem zafascynowani ...";

var lentxt=scrtxt.length;
var width=100;
var pos=1-width;

function scroll() {
  pos++;
  var scroller="";
  if (pos==lentxt) {
    pos=1-width;
  }
  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);
  }
  window.status = scroller;
  setTimeout("scroll()",150);
  }
//-->
</script>
</head>
<body onLoad="scroll();return true;">

Oto twoja odlotowa strona!

</body>
</html>

Skrypt ten wykorzystuje te same funkcje (lub ich czΩ╢ci ), kt≤rych u┐yli╢my powy┐ej.
Funkcja setTimeout(...) 'm≤wi' timerowi, kiedy ma wywo│aµ funkcjΩ scroll(). Scroller przesunie tekst o krok dalej. Na pocz▒tku jest wiele oblicze±, ale nie s▒ one zbyt wa┐ne dla zrozumienia, jak ten skrypt dzia│a. Obliczenia s▒ potrzebne do ustalenie pozycji, od kt≤rej ma siΩ zacz▒µ przesuwanie.

Powiedzia│em na pocz▒tku tej czΩ╢ci, ┐e przewijacze nie s▒ zbyt popularne, albo - je╢li s▒ popularne - to wkr≤tce takimi nie bΩd▒. Ma to swoje przyczyny. WymieniΩ tu kilka, ale jest ich z pewno╢ci▒ wiΩcej.
Je╢li zobaczysz przewijany tekst po raz pierwszy, efekt ten mo┐e Ci siΩ wydaµ do╢µ fajny. Kiedy jednak widzisz go ju┐ milion razy, to ju┐ taki fajny nie jest. PrawdΩ m≤wi▒c nie jest to ca│kiem dobry argument, gdy┐ to samo mo┐na powiedzieµ prawie o ka┐dym ciekawszym triku, kt≤rego u┐yjesz na swojej stronie.
S▒ jednak argumenty powa┐niejsze. Nie podoba mi siΩ to, ┐e zmienia siΩ prΩdko╢µ przesuwania tekstu. Je╢li ruszysz myszkΩ - tekst przyspiesza!. Mnie w ka┐dym razie to dra┐ni. Ten efekt staje siΩ znacznie bardziej wyra╝ny, je╢li chc▒c uczyniµ przesuwanie szybszym, zmieni siΩ warto╢µ setTimeout. Mo┐e znajdzie siΩ rozwi▒zanie tego problemu. Najgorsze jest jednak to, ┐e je╢li pozwolisz dzia│aµ swojemu skryptowi przez d│u┐szy czas, to otrzymasz komunikat Out of memory error. A to jest do╢µ przykre. Jest to problem Netscape Navigatora 2.0. Byµ mo┐e w kolejnych wersjach ten b│▒d zostanie usuniΩty.

Jest jeszcze wiele innych procedur dostΩpnych w Sieci. Widzia│em przewijacze, kt≤re wypisuj▒ tekst do ramki. Programowanie takich efekt≤w nie jest zbyt trudne.

Indeks - CzΩ╢µ 1 - CzΩ╢µ 2 - CzΩ╢µ 3 - CzΩ╢µ 5 - CzΩ╢µ 6 - CzΩ╢µ 7


Aktualizacja: 11 maja 96
(c) 1996 by Stefan Koch