5. Рядок стану й таймери

5. Рядок стану й таймери

Рядок стану
Програми мовою JavaScript можуть записувати у рядок стану — прямокутник у нижній частині вікна проградача браузера (якщо налаштовано показ цього рядка стану). Для цього достатньо записати потрібний рядок у window.status. У наступному прикладі створено дві кнопки. Одну з них використано для запису тексту; "Увага! Це вікно стану. ". Іншу — для стирання довільного тексту з цього рядка шляхом запису порожнього рядка.

Скрипт для цього випадку має такий вигляд:

<html><head><script language="JavaScript">     <!-- hide

function statbar(txt) { window.status = txt; } // -->
</script></head>
<body>

<form>
  <input type="button" name="look" value="Записати!"
       onClick="statbar('Увага! Це вікно стану. ');">
  <input type="button" name="erase" value="Стерети!" 
       onClick="statbar('');">
</form>

</body></html>

Таким чином, створено форму з двома кнопками. Обидві ці кнопки викликають функцію statbar(). Виклик з клавиші Записати! має вигляд:

statbar('Увага! Це вікно стану. ');

В дужках записано: 'Увага! Це вікно стану. ' — аргумент функції statbar() для цього виклику. Саму функцію означено таким чином:

function statbar(txt) { window.status = txt; }

Тут txt — аргумент функції. Цей рядок занесено у рядок стану вказівкою window.status = txt. Відповідно, видалення тексту з рядка стану здійснюють записом у window.status порожнього рядка.

Таймери
За допомогою функції setTimeout (таймера) можна запрограмувати виконання певних команд через певний час. У наступному скрипті створено кнопку, яка відкриває випадне вікно не зразу, а через 4 секунди після натискання.

Скрипт має такий вгляд:

<script language="JavaScript">                <!-- hide

function timer()
{
  setTimeout("alert('Час вичерпано!')", 4000);
}                                             // -->
</script> ...
<form><input type="button" value="На 4 секунди" onClick="timer()"></form>

Тут setTimeout() — метод об'єкту window. Його перший аргумент — код JavaScript, який потрібно виконати через встановлений далі час. У нашому випадку це виклик випадного вікна "alert('Час вичерпано!')". Зауважте: код JavaScript має бути в лапках. Другий аргумент — заданий час у мілісекундах.

Прокрутка тексту
Прокрутку тексту у рядку стану запрограмувати доволі просто. Спочатку потрібно записати у рядок стану певний текст. Потім через певний час потрібно записати туди той самий текст, але трохи його змістивши. Якщо це повторювати багатократно через короткі проміжки часу, то побачимо текст, що рухається. Але потрібно докласти ще зусиль, що кожного разу визначати, яку частину тексту потрібно виводити у рядок стану. Як правило, рядок стану не може вмістити весь текстовий матеріал. Наступна кнопка відкриє вікно і покаже рухомий текст у рядку стану.

Код скрипту має такий вигляд:


<html><head>
<script language="JavaScript">   <!-- hide
var scrtxt = "0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 " +
    "і так далі ... ";
var len = scrtxt.length;
var width = 100;
var pos = -(width + 2);

function scroll()
{
  pos++;
  var scroller = "";
  if (pos == len)
  { pos = -(width + 2);
  }
  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()", 90);
}                                 // -->
</script>
</head>
<body onLoad="scroll()">
Приклад прокрутки в рядку стану засобами JavaScript.
</body>
</html>

Зауважимо:

використано процедуру опрацювання подій onLoad, описану в тезі <body>. Тобто функцію scroll() буде викликано одразу після завантаження HTML-сторінки;
функція scroll() не є рекурсивною, бо її повторний виклик буде здійснено через таймер вже після того, як закінчить роботу той виклик, що встановив цей таймер.

Дружня порада: не зловживайте рухомим рядком! У більшості випадків маленькі рухомі літери викликають швидше роздратування, ніж зацікавленність. Можливо, паузи для спокійного сприйняття такого тексту, рух назустріч з подальшою зупинкою якось врятують становище.

[попереднє] [зміст] [наступне]