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 jest 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łana a zmienną 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, jaką 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 do
wiedzieć s
ię, czy kursor myszki
opuścił odsyłacz. Rozwiązanie polega na ustawieniu timera.
Wypróbujmy następujący skrypt:
.
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óre 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óry
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
zanotowane.pldoc.pisz.plpdf.pisz.plteen-mushing.xlx.pl