Postupné vypisování textu ve stavovém řádku prohlížeče

15. prosince 2000

•

V minulých dílech miniseriálku o textech ve stavovém řádku jsme si ukázali, jak lze pomocí časovače a vlastnosti status objektu window vytvářet v této části prohlížeče zajímavé efekty. Tentokrát se k ještě jednou vrátíme k tématu a ukážeme si asi nejhezčí efekt z této rodiny: postupné vypisování zadaného textu ve stavovém řádku prohlížeče.

Podívejte se nejprve dolů do stavového řádku, jak takové postupné vypisování textu. Pokud se tam náhodou nic neděje, zřejmě jste dlouho četli úvod, a simulace mezitím doběhla - zkuste reload stránky.

Princip této techniky je znovu velice prostý. Využijeme opět náš starý známý časovač, dále jednoduché manipulace s řetězci, a konečně generátor pseudonáhodných čísel (o něm se podrobněji dočtete v článku o náhodě na stránkách).

První verze skriptu pro simulaci psacího stroje vypadá následovně:

message = "Někdo píše ve stavovém řádku... *Kdo to může být?";
len = 0;
function randNum (num) {
    var rnd1 = Math.round( (num-1) * Math.random() + 1 )
    return rnd1;
}
function WriteIt1() {
    window.status = message.substring(0,len);
    len++
    if ( len <= message.length ) {
        setTimeout('WriteIt1()',randNum(500));
    }
}
// Spustime simulaci
WriteIt1();

Do proměnné message uložíme text, který chceme nechat vypisovat ve statovém řádku. Proměnná len je pomocná a udává aktuální pozici v řetězci message. Funkce randNum je vlastně generátor pseudonáhodných čísel, upravený tak, aby vracel celé číslo v intervalu 1..num. Použili jsme jej již dříve, konkrétně ve článku o náhodě na stránkách.

Hlavní práci vykonává funkce WriteIt1. Ta "vyřeže" z řetězce message prvních len znaků a umístí je do stavového řádku, poté inkrementuje počitadlo len, a na závěr nastaví časovač tak, aby po uplynutí časového kvanta byla opět zavolána funkce WriteIt1, která dodá do stavového řádku další znak. Na tom není samozřejmě nic složitého, celý vtip spočívá vlastně v tom, že časové kvantum mezi jednotlivými voláními funkce WriteIt1 není vždy stejné, ale nastavuje se náhodně v rozmezí 1 - 500 milisekund, právě pomocí generátoru randNum. Vypisování textu musíme ještě spustit, k tomu slouží poslední řádek uvedeného kódu.

Vylepšení

Toto jednoduché vypisování textu můžeme ve druhé variantě vylepšit tím, že jej naučíme v definovaných místech textu "odřádkovat" - tj. smazat stavový řádek a začít další text jakoby na prázdném řádku. Text, který běží na této stránce, dole, ve stavovém řádku prohlížeče, je právě tato vylepšená varianta s řádkováním.

Pro takové vylepšení musíme jednak definovat pomocnou proměnnou position, do které budeme ukládat aktuální začátek textu po odřádkování, a dále upravit funkci WriteIt1. Upravenou variantu nazveme WriteIt2:

position = 0;
function WriteIt2() {
    if ( message.charAt(len) == "*" ) {
        position = len + 1;
        window.status = "";
    } else {
        window.status = message.substring(position,len);
    }
    len++
    if ( len <= message.length ) {
        setTimeout('WriteIt2()',randNum(500));
    }
}

V upravené funkci testujeme, zda se v řetězci message na aktuální pozici nenachází znak hvězdičky (*). Pokud ano, provedeme odřádkování, tj. vymažeme obsah stavového řádku a přenastavíme pomocnou proměnnou position. Podíváte-li se do prvního příkladu v úvodu tohoto článku, uvidíte, že jsme v řetězci message skutečně hvězdičku použili. Pokud vám hvězdička nevyhovuje, lze samozřejmě po příslušné úpravě funkce použít jakéhokoliv jiného znaku, doporučuji oblíbenou vlnovku - tildu (~).

Postřehy na závěr:

Použijete-li řádkování podle druhé varianty, lze ve stavovém řádku takto psát i dlouhý text plný upoutávek; chcete-li do textu vložit dramatickou pomlku, stačí v příslušném řetězci udělat místo jedné několik mezer.

Námět na vylepšení - uvedenou funkci by bylo dobré upravit tak, aby po doběhnutí textu na konec začala vypisovat vše znovu od začátku.

A nakonec: jako u všech dalších javascriptových "poskakovadel" a "běhadel" neuškodí při použití umírněnost - méně znamená toiž v tomto případě více. Souhlasíte?