Часть 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(). В свою очередь, можно видеть, что функция statbar() определена следующим образом:
function statbar(txt) { window.status = txt; }В заголовке функции в скобках мы поместили слово txt. Это означает, что строка, которую мы передали этой функции, помещается в переменную txt.
Механизм вывода текста в строку состояния удобно использовать при работе со ссылками. Вместо того, чтобы выводить на экран URL данной ссылки, Вы можете просто на словах объяснять, о чем будет говориться на следующей странице. Так link демонстрирует это - достаточно лишь поместить указатель вашей мыши над этой ссылкой: Исходный код этого примера выглядит следующим образом:
<a href="dontclck.htm" onMouseOver="window.status='Don\'t click me!'; return true;" onMouseOut="window.status='';">link</a>Здесь мы пользуемся процедурами onMouseOver и onMouseOut, чтобы отслеживать моменты, когда указатель мыши проходит над данной ссылкой.
С помощью функции Timeout (или таймера) Вы можете запрограммировать компьютер на выполнение некоторых команд по истечении некоторого времени. В следующем скрипте демострируется кнопка, которая открывает выпадающее окно не сразу, а по истечении 3 секунд.
Скрипт выглядит следующим образом:
<script language="JavaScript"> <!-- hide function timer() { setTimeout("alert('Врем\я истекло!')", 3000); } // --> </script> ... <form> <input type="button" value="Timer" onClick="timer()"> </form>Здесь setTimeout() - это метод объекта window. Он устанавливает интервал времени - я полагаю, Вы догадываетесь, как это происходит. Первый аргумент при вызове - это код JavaScript, который следует выполнить по истечении указанного времени. В нашем случае это вызов - "alert('Врем\я истекло!')". Обратите пожалуйста внимание, что код на JavaScript должен быть заключен в кавычки.
Теперь, когда Вы знаете, как делать записи в строке состояния и как работать с таймерами, мы можем перейти к управлению прокруткой. Вы уже могли видеть, как текст перемещается строке состояния. В Интернет этим приемом пользуются повсеместно. Теперь же мы рассмотрим, как можно запрограммировать прокрутку в основной линейке. Рассмотрим также и всевозможные усовершенствования этой линейки.
Создать бегущую строку довольно просто. Для начала давайте задумаемся, как вообще можно создать в строке состояния перемещающийся текст - бегущую строку. Очевидно, сперва мы должны записать в строку состояния некий текст. Затем по истечении короткого интервала времени мы должны записать туда тот же самый текст, но при этом немного переместив его влево. Если мы это сделаем несколько раз, то у пользователя создастся впечатление, что он имеет дело с бегущей строкой.
Однако при этом мы должны помнить еще и о том, что обязаны каждый раз вычеслять, какую часть текста следует показывать в строке состояния (как правило, объем текстового материала превышает размер строки состояния).
Эта кнопка откроет окно и покажет образец прокрутки:
Итак, исходный код скрипта - я добавил к нему еще некоторые комментарии:
<html> <head> <script language="JavaScript"> <!-- hide // define the text of the scroller var scrtxt = "Это JavaScript! " + "Это JavaScript! " + "Это JavaScript!"; 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; // вызвать эту функцию вновь через 100 миллисекунд setTimeout("scroll()", 100); } // --> </script> </head> <body onLoad="scroll()"> Это пример прокрутки в строке состояния средствами JavaScript. </body> </html>Большая часть функции scroll() нужна для вычленения той части текста, которая будет показана пользователю. Я не буду объяснять этот код подробно - Вам необходимо лишь понять, как вообще осуществляется эта прокрутка.
©1996,1997 by Stefan Koch
e-mail:skoch@rumms.uni-mannheim.de
http://rummelplatz.uni-mannheim.de/~skoch/
Моя книга по JavaScript