Практикум по программированию на JavaScript

Команды последействия: onUnLoad и onMouseOut

Показывать лекцию целиком

Концепция

Это два последних обработчика событий, которые необходимо иметь в своем арсенале: onMouseOut и onUnload (обратите внимание на заглавные буквы). Они рассматриваются в одном уроке, потому что начинают действовать после того, как что-то сделано.

onMouseOver вызывает некое событие, если навести мышь, к примеру, на ссылку. В противоположность ей onMouseOut начинает действовать, если курсор увести со ссылки. Мы также знаем, что команда onLoad запускает сценарий, когда страница загружается. Команда onUnload действует, когда пользователь уходит со страницы.

Сценарий

Следующий код использует события при перемещении указателя мыши:

<A HREF="index.htm" onMouseOver="window.status='Эй! Убирайся с меня!'; 
return true"
onMouseOut="window.status='Так-то лучше, спасибо'; return true">
Наведите курсор на эту ссылку и сместите в сторону</A>

Использование команды onUnload при уходе со страницы:

<BODY onUnload="alert('Уже уходите?')">

Результат работы сценария

При размещении сценария на странице выводится текстовая ссылка "Наведите курсор на эту ссылку и сместите в сторону". Если навести курсор на ссылку и сместить в сторону несколько раз, то в строке состояния можно видеть изменяющиеся сообщения. Это первый результат. При нажатии на ссылку можно увидеть второй.

Разбор сценария

Эффекты с мышью, как легко видеть, создаются с помощью команд onMouseOver и onMouseOut.

Обратите внимание, что эти две команды никак не связаны между собой. Вам не нужно, чтобы эти события происходили одновременно. Помните, несколько уроков назад мы разделяли два обработчика событий запятой, чтобы они происходили одновременно? Здесь не тот случай. Требуется, чтобы одно событие происходило, когда курсор мыши указывает на ссылку, а другое — когда курсор мыши смещается со ссылки. Поэтому нужно писать их как две совершенно независимые команды, каждая из которых содержит свою команду return true.

Сообщение при уходе со страницы создается с помощью команды onUnload="alert('Уже уходите?')", которая добавлена в строку BODY документа HTML. Обратите внимание на двойные и одинарные кавычки. Внутри двойных — одинарные. Вторая двойная кавычка означает для браузера конец команды.

Задание

В этом задании необходимо использовать функции onUnload, onMouseOver, и onMouseOut. Сделайте следующее:

  • Создайте страницу с гипертекстовой ссылкой.
  • Когда курсор указывает на ссылку, в строке состояния должны появляться слова: "Привет, пользователь 'название браузера'!".
  • Когда курсор уходит со ссылки, в строке состояния должен появляться текст: "Не скучаете у нас на 'URL страницы'?"
  • Если щелкнуть на ссылке, должно появиться окно со словами: "Уже уходите? Сейчас всего только 'текущее время'";
  • Время должно определяться с помощью функции.
  • Не пользуйтесь командой onClick, чтобы вывести окно сообщения, возьмите команду onUnload.
    •

    Возможное решение

    Вот сценарий, который реализует задание:

    <HEAD>

<SCRIPT LANGUAGE="javascript">

  <!-- Скрываем от браузеров, которые не 
    поддерживают Javascript 

  function goodbyedate()
  {
  var d = new Date(); 

  var h = d.getHours(); 
  var m = d.getMinutes(); 

  var t = h + ':' + m + ' '; 

  alert
    (" Уже уходите?  Сейчас всего только " + t + ".");
  }

  // конец сокрытия --> 

  </SCRIPT>
</HEAD>

<body bgcolor="FFFFCC" onUnload="goodbyedate();">

<A HREF="assign_10.html" 
  onMouseOver="window.status=
   'Привет, пользователь ' +navigator.appName+ 
     ' — щелкни здесь!'; 
  return true" onMouseOut="window.status=
   'Не скучаете у нас на ' +document.location+ 
     '.'; 
  return true">Проведите курсор мыши над этой ссылкой</A>

</BODY>

    Функция, определенная в заголовке (между командами <head> ) задает время. К этой функции обращается команда onUnload в строке <body> документа HTML. Переменная времени используется в команде alert.

    Команды onMouseOver и onMouseOut построены по той же схеме, что и в уроке, кроме переменных navigator.appName в onMouseOver и document.location в onMouseOut. Не запутайтесь с двойными и одинарными кавычками. Каждая из команд window.status помещена в двойные кавычки. Отрезки текста стоят в одинарных кавычках. Внимательно закрывайте все кавычки и скобки, и тогда у вас не будет больших проблем.

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^