Wprowadzenie do 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