Wiki-учебник по веб-технологиям: JavaScript/СтрокаСостоянияИТаймауты ...

Главная | Каталог |

Строка состояния


Ваши программы Java Script? могут писать в строку состояния – это область снизу вашего окна броузера. Все, что Вы должны сделать, это указать строку в window.status. Следующий пример показывает Вам две кнопки, которые могут использоваться, чтобы записать в строку состояния и опять стереть текст.
Сценарий выглядит следующим образом:



Мы создаем форму с двумя кнопками. Обе кнопки вызывают функцию statbar(). Посмотрите, как выглядит обращение к функции, созданное кнопкой Write!:

statbar('Hi! This is the statusbar!');

Внутри скобок мы определяем строку 'Hi! This is the statusbar!' Это значит, что строка передаётся в функцию statbar(). Вы видите, что мы определили функцию statbar(), как показано ниже:



Что является новым – то, что мы используем txt внутри скобок имени функции. Это означает строка, которую мы передали в функциу, сохранена в переменной txt.
Передача переменных в функции – часто используемый путь для создания более гибких функций. Вы можете передавать несколько значений в функции – Вы только должны отделить их через запятые.
Строка txt отображается в строке состояния через window.status = txt.
Стирание текста в строке состояния – достигаеться через задание пустой строки в window.status.

Показ текста в строке состояния может легко использоваться в комбинации с ссылками. Вместо того, чтобы показывать URL связи Вы можете объяснять на словах, относительно чего следующая страница. Эта ссылка показывает это – только переместите ваш курсор поверх ссылки. Код для этого примера выглядит следующим образом:



Здесь мы используем onMouseOver и onMouseOut, чтобы обнаружить, когда курсор перемещается поверх ссылки.
Вы можете задать вопрос, почему мы должны писать return true внутри свойства onMouseOver. Это означает, что броузер не будет выполнять собственный код как реакцию на событие Mouse Over?. Обычно броузер отображает URL ссылки в строке состояния. Если мы не используем return true, броузер будет писать в строку состояния сразу после того, как наш код был выполнен – это означает, что броузер записало поверх нашего текста, и пользователь не смог бы прочитать его. В общем, мы можем подавить такие действия броузера, используя return true в обработчике событий.
onMouseOut не существовал в Java Script? 1.0. Если Вы используете Netscape Navigator 2.x, Вы можете получить различные результаты на различных платформах. На Unix платформах например текст исчезнет даже при том, что броузер не знает onMouseOut. В Windows текст останется. Если Вы хотите, чтобы ваш сценарий был совместимым с Netscape 2.x для Windows, Вы могли бы например писать функцию, которая пишет текст в строку состояния и стирает этот текст после некоторого периода времени. Это программируется с использованием таймаутов. Мы узнаем больше относительно таймаутов в следующем разделе.
В этом сценарии Вы можете видеть другую вещь – иногда Вы хотите вывести кавычки. Мы хотим вывети строку Don't click me – поскольку мы определяем эту строку внутри onMouseOver обработчика событий, мы используем одиночные кавычки. Но слово Don't тоже использует одиночную кавычку! Броузер запутается, если Вы просто напишете 'Don't ...'. Чтобы решить эту проблему, Вы можете просто написать наклонную черту влево \ перед кавычкой – что означает, что она принадлежит выводу (Вы можете проделать тоже самое с двойными кавычками").

Таймауты


С помощью таймаутов (или таймеров) Вы можете позволять компьютеру выполнять любой код по прошествии некоторого периода времени. Представлен код в котором при нажатии кнопрки появляется окно через три секунды.
Сценарий выглядит примерно так:



setTimeout() является методом window-объекта. Он устанавливает время ожидания – я думаю, что Вы так и предположили. Первый параметр – код Java Script?, который должен быть выполнен после некоторого времени. В нашем случае этот параметр – «alert('Time is up!')". Пожалуйста обратите внимание, что код Java Script? должен быть внутри кавычек.
Второй параметр сообщает компьютер, когда код должен быть выполнен. Вы должны определить время в миллисекундах (3000 миллисекунд = 3 секунды).

Прокрутчик


Теперь, когда Вы знаете, как писать в строку состояния и как работают таймауты, мы разберём прокрутчики. Вы могли уже видеть бегущую строку в строке состояния. Она встречается практически везде в Internet. Мы увидим, как пишется простейший прокрутчик. Помимо этого мы подумаем о возможных усовершенствованиях прокрутчика.
Прокрутчик очень просто выполняется. Давайте подумаем, над тем, как мы могли реализовать перемещающийся текст в строке состояния. Мы должны записать текст в стоку состояния. После короткого промежутка времени мы должны писать тот же самый текст в стоку состояния – но мы должны переместить его немного влево. Если мы повторим это несколько раз, пользователь получит впечатление бегущей стоки.
Мы должны подумать относительно того, как мы можем определить, которая часть текста должна отображаться, поскольку весь текст обычно длиннее чем строки состояния.

Эта кнопка открывает новое окно и отображает прокрутчик:

Вот исходный текст – с некоторыми добавленными комментариями:



Основная часть функции scroll() необходима для вычисления, какая часть текста отображается. Я не объясняю код подробно – Вы только должны понять, как этот прокрутчик работает вообще.
Чтобы запустить прокрутчик, мы используем обработчик события onLoad тега <body>. Это означает, что функция scroll() будет вызываться сразу после загрузки HTML-страницы.
Мы вызываем функцию scroll() с помощью свойства onLoad. Первый шаг прокрутчика – вычисление и отображение. В конце функции scroll() мы устанавливаем время ожидания (таймаут). Это заставляет функцию scroll() выполняться снова после 100 миллисекунд. Текст перемещается на один шаг вперед и устанавливается другое время ожидания. Это продолжается бесконечно.
(Имелись некоторые проблемы с этим видом прокрутчика в Netscape Navigator 2.x.. Это иногда вызывало ошибку 'Out of memory'. Я получил много писем, объясняющие это как рекурсивное обращение к функции scroll() – в заключение ведущие к переполнению памяти. Но это не правда. Это не рекурсивное обращение к функции! Мы получаем рекурсию, если мы вызываем функцию scroll()непосредственно из функции scroll(). Но это не то, что мы делаем здесь. Старая функция, которая устанавливает время ожидания, заканчивается прежде, чем новая функция выполняется. Проблема состояла в том, что строки действительно не могли быть изменены в Java Script?. Если Вы пробовали делать это, Java Script? просто создал новый объект – без того, чтобы удалить старый. Это и заполняло память.)
Прокрутчики широко используются в Internet. Есть риск, что они быстро станут непопулярными. Я должен признать, что мне они не слишком нравятся. Особенно раздражает на большинстве страниц то, что URL больше не может отображаться при перемещении указателя поверх ссылки. Это может решиться через остановку прокрутчика, когда событие Mouse Over? происходит – Вы можете запустить его снова с onMouseOut. Если Вам нужен прокрутчик, постарайтесь не использовать стандартый прокрутчик – попробуйте добавлять какой-нибудь изящный эффект. Например, одна часть текста перемещается слева а другая часть исходит справа – когда они встречаются в середине, текст останавливается на несколько секунд.