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

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

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

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

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

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

Задание

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

· Создайте страницу с гипертекстовой ссылкой.

· Когда курсор указывает на ссылку, в строке состояния должны появляться слова: "Привет, пользователь 'название браузера'!".

· Когда курсор уходит со ссылки, в строке состояния должен появляться текст: "Не скучаете у нас на 'URL страницы'?"

· Если щелкнуть на ссылке, должно появиться окно со словами: "Уже уходите? Сейчас всего только 'текущее время'";

· Время должно определяться с помощью функции.

· Не пользуйтесь командой onClick, чтобы вывести окно сообщения, возьмите команду onUnload.

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

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

<HEAD> <SCRIPT LANGUAGE="javascript">  </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 помещена в двойные кавычки. Отрезки текста стоят в одинарных кавычках. Внимательно закрывайте все кавычки и скобки, и тогда у вас не будет больших проблем.

11. Урок: Открываем новые окна

Методы создания и работы с новыми окнами.

Концепция

Это первый из двух уроков, посвященных открытию новых окон. Первый урок имеет дело с командами Javascript, которые используются для открытия нового окна. В новом окне будет выводиться другой документ HTML.

Второй урок также рассматривает создание нового окна, но с помощью функции — так, чтобы оба окна содержали одну и ту же страницу. Не нужно будет использовать две страницы HTML. Все можно будет сделать с помощью одной страницы HTML и сценария JavaScript.

Начнем с основ.

Сценарий

<SCRIPT type="text/javascript" > window.open('opened.html', 'joe', config='height=300,width=300') </SCRIPT>

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: