2.4.3. Текст , що біжить , у рядку стани браузера

Поширена задача - відображення тексту, що біжить, у рядку стани браузера.

Рядок стана звичайно використовується браузерами для відображення різноманітної інформації, наприклад інформації про виконання поточної операції. Для того щоб записати що-небудь у рядок стана, необхідно змінити уміст властивості status об'єкта window вікна браузера. Цю задачу можна вирішити, наприклад, так:

window. status = "Новий рядок";

Для створення ефекту рядка, що біжить, операцію відновлення властивості status необхідно виконувати періодично, отображая текст із зсувом, що змінюється. Проте не варто робити це в циклі, тому що в результаті нормальна робота браузера буде порушена.

У сценарії (листинг 2.5) застосований засіб виконання періодичних процедур, заснований на використанні методу setTimeout, визначеного для об'єкта window. Нагадаємо, що цей метод дозволяє організувати відкладене в часу виконання команди, заданої першим параметром. Час, через який команд буде запущена, указується методу setTimeout другим параметром.

Листинг 2.5. Файл chapter2/StatusScrol/StatusScroll. html

<HTML>

<HEAD>

<Т1ТLЕ>Авторський компакт-диск</Т1ТLЕ>

<SCRIPT LANGUAGE="JavaScript">

<!--

var szMsg = "You are welcome to our Web site http://www.glasnet.ru/~frolov";

var nSpace = 100;

var nIteration = 0;

function sscroll()

{

var cmd = "sscroll()";

var szOut = "";

var szText = "";

for (i=0 ; i < nSpace ; i++)

{

szText += " ";

}

szText += szMsg;

szOut = szText.substring(nIteration, nSpace + nIteration);

window.status = szOut;

nlteration++;

if(nIteration > nSpace + szMsg.length)

{

nIteration = 0;

}

timer = window.setTimeout(cmd, 50);

}

//-->

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

<Н1>Новий випуск авторського CD</H1>

<SCRIPT LANGUAGE="JavaScript">

<!--

sscroll();

//-->

</SCRIPT>

<P>Перший випуск нашого компакт-диска вже з'явився в продажі. Інформацію про цей, а також про такий випуск ви знайдете на нашому сервері Web, адреса якого відображається у вікні стани браузера

</BODY>

</HTML>

У області заголовка документа визначені глобальні перемінні szMsg, nSpace і nIteration, а також функцію sscroll.

Перемінна szMsg инициализируется текстовим повідомленням, що буде безупинно переміщатися в рядку стани браузера. Значення, записане в перемінну nSpace, визначає кількість прогалин, що буде додано до рядка повідомлення зліва перед початком операції зсуву. І нарешті, перемінна nIteration служить лічильником зсувів для функції sscroll.

Функція sscroll визивається перший разом у тілі документа:

<BODY BGCOLOR=white>

<Н1>Новий випуск авторського CD</H1>

<SCRIPT LANGUAGE="JavaScript">

<!--

sscroll();

//-->

</SCRIPT>

</BODY>

Надалі функція sscroll організує за допомогою методу setTimeout свій власний виклик, відкладений у часу на 50 мс, і завершує роботу. Проте через зазначений час функція буде викликана знову, і це буде продовжуватися доти, поки документ HTML, що містить сценарій, залишається завантаженим у вікно браузера.

Спрощено структура функції sscroll показана нижче:

function sscroll ()

{

var cmd = "sscroll()";

...

// Відображення повідомлення в рядку стани браузера

...

// Зсув повідомлення вліво на одну позицію

...

timer = window. setTimeout(cmd, 50);

}

Після відображення повідомлення в рядку стани і зсуву цього повідомлення вліво на одну позицію функція sscroll викликає метод setTimeout, предавая йому через перший параметр перемінну з командою, що підлягає виконанню, а через другий - час затримки, по прошествии який дану команду потрібно буде виконати.

У якості виконуваної команди методу setTimeout зазначений виклик функції sscroll.

У функції sscroll визначені три локальні перемінні. Перемінна cmd береже команду виклику функції sscroll. У перемінної szOut підготовляється текст, відображуваний у рядку стани браузера при кожному виклику функції sscroll.

Текстова перемінна szText використовується як робоча. У ній формується повідомлення для висновка. Спочатку в перемінну szText записується nSpace прогалин, а потім добавляється рядок szMsg:

for (i=0 ; i < nSpace ; i++)

{

szText += " ";

}

szText += szMsg;

Для того щоб при кожному виклику функції sscroll повідомлення відображалося зі зсувом на одну позицію, витягається з перемінної szText подстрока. Витяг подстроки виконується за допомогою методу substring, визначеного в умонтованому класі текстових рядків String. Отримана подстрока записується у властивість status об'єкта window і в такий спосіб відображається в рядку стани:

szOut = szText. substring(nIteration, nSpace + nIteration);

window. status = szOut;

Перший параметр методу substring визначає початкову позицію подстроки усередині рядка, а другий - кінцеву.

Після відображення повідомлення функція sscroll збільшує значення глобального лічильника nIteration на одиницю:

nIteration++;

Коли в результаті зсуву повідомлення цілком іде з рядка стана, лічильник nIteration знову встановлюється в нульове значення:

if(nIteration > nSpace + szMsg.length)

{

nIteration = 0;

}

Загальна довжина що зрушується рядка тут обчислюється як сума значення nSpace (кількість початкових прогалин) і довжини повідомлення szMsg. Остання знаходиться за допомогою методу length, визначеного в умонтованому класі String.