Posunující se text ve stavovém řádku

20. prosince 2000

•

Jak jsem vám minule slíbil, ukážeme si další techniky, které můžeme použít při vytváření textových efektů ve stavovém řádku prohlížeče. V tomto článku se zaměříme na posunující se text.

Posunující se (scrolling) texty ve stavovém řádku už, jak se zdá, trochu vyšly z módy. Nám však poslouží aspoň pro procvičení JavaScriptu, a pokud pro ně někdy v budoucnu naleznete praktické upotřebení, tím lépe. Ukázku posunujícího se textu vidíte dole ve stavovém řádku. Stejně jako v minulém článku, veškeré použité techniky jsou standardní a fungují bez problémů v Internet Exploreru a v Netscape.

Kód, zabezpečující posouvání textu, je následující:

speed = 100; // počet millisekund mezi posuny
amount = 2; // velikost posunu ve znacích v každé iteraci

function ScrollLeft() {
    window.setTimeout(‚ScrollLeft()‘,speed);
    amt = amount
    msg = msg.substring(amt) + msg.substring(0,amt);
    window.status = msg;
}
msg = "                        Toto je text ve stavovém řádku                          ";
ScrollLeft(); // spustíme scrolling

Opět jsme použili nám již známou funkci časovače window.setTimeout(), pomocí které opakovaně voláme naši funkci ScrollLeft(). Ta nejprve posune text v rámci proměnné msg (pomocí textové funkce substring „uřeže“ prvních amount znaků řetězce msg a přidá je na konec), a poté upravený text vloží do stavového řádku prohlížeče funkcí window.status().

Všimněte si rovněž definice řetězce msg. Při této technice je nutné před i za vlastní zprávu, kterou chceme sdělit světu, vložit několik mezer – jejich počet stanovíme nejlépe zkusmo.

Poznámka: V uvedeném příkladě by stačilo vložit mezery pouze na jednu stranu řetězce. Pro další příklady uvedené v tomto článku je však vhodnější použít mezery na obou stranách.

Posun textu na opačnou stranu

Chceme-li posunovat text ve stavovém řádku na opačnou stranu, tedy doprava, stačí nám k tomu mírná modifikace funkce ScrollLeft(). Upravenou funkci nazveme netradičně ScrollRight():

function ScrollRight() {
    window.setTimeout(‚ScrollRight()‘,speed);
    amt = msg.length – amount;
    msg = msg.substring(amt) + msg.substring(0,amt);
    window.status = msg;
}

Úprava spočívá v modifikaci druhého řádku funkce, s využitím JavaScriptové funkce length (přesněji: vlastnosti length proměnné msg), která udává délku řetězce ve znacích. Posouváme nadále doleva, tentokrát však nikoliv o amount znaků, ale o délka_řetězce mínus amount znaků, tedy vlastně o amount znaků doprava.

Do třetice: posun textu tam a zpátky

Text můžeme rovněž nechat ve stavovém řádku „kvedlat“ tam a zpět. Opět tak učiníme, tentokrát trochu rozsáhlejší, modifikací fukce ScrollLeft(). Upravenou funkci nazveme ScrollAlternate(). Kromě modifikace funkce budeme rovněž potřebovat zavést pomocnou proměnnou, ve které budeme přechovávat aktuální směr pohybu. Tuto proměnnou nazveme dir. Zde je upravený kód:

dir = 0; // smer pohybu
function ScrollAlternate() {
    window.setTimeout(‚ScrollAlternate()‘,speed);
    if (dir)
        amt = amount
    else
        amt = msg.length – amount
    msg = msg.substring(amt) + msg.substring(0,amt);
    if ( msg.substring(0,1) != " " )
        dir = dir ? 0 : 1;
    else
        window.status = msg;
}

Modifikace jsme provedli dvě. Nejprve (druhý až pátý řádek v těle funkce) podle stavu proměnné dir provedeme posun textu doleva nebo doprava, poté (sedmý až desátý řádek) zkontrolujeme, zda už se scrollující text neocitl na některém okraji; v tom případě změníme směr pohybu.

Poznámka mimo téma (pouze pro JavaScript začátečníky)

Povšimněte si nezvyklé konstrukce s otazníkem na osmém řádku v těle funkce. Jedná se o ternální („trojný“, tedy nikoliv termální) operátor otazník, který umožňuje stručně a efektivně vyhodnocovat rozhodovací výrazy – jedná se tedy o jakýsi (velmi nepřesně řečeno) ekvivalent konstrukce if..else. Řádek dir = dir ? 0 : 1 tedy v našem příkladě nahrazuje konstrukci:

if(dir)
dir = 0
else
dir = 1

Vzhledem k tomu, že na rozdíl od kompilovaného kódu (Java, C) je kód JavaScriptu přenášen „tak jak je napsán“, záleží u delších skriptů kvůli rychlosti stahování stránek leckdy na každém řádku – nehledě na zlepšení přehlednosti takového kódu. Vřele Vám proto doporučuji operátor otazník prostudovat a hojně jej používat.

Tolik malé odbočení a to je také vše ke dnešnímu tématu.