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ę.
Własność 'onMouseOver' znasz już z drugiej części niniejszego podręcznika:
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.
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
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:
Skrypt ten wykorzystuje te same funkcje (lub ich części ), które użyliśmy
powyżej.
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.
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.
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:
<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>
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.
<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.
<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>
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.
<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>
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.
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.
Aktualizacja: 11 maja 96
© 1996 by Stefan Koch