События onMouseOut и onUnload
Это два последних обработчика событий, которые вы должны иметь в своем арсенале: onMouseOut и onUnload (обратите внимание на заглавные буквы). onMouseOver вызывает некое событие, если навести мышь, к примеру, на ссылку. В противоположность ей onMouseOut начинает действовать, если курсор увести со ссылки. Вы также знаете, что команда onLoad запускает скрипт, когда страница загружается. Команда onUnload действует, когда пользователь уходит со страницы.
Скрипт
С мышью:
<A HREF="les10.htm" onMouseOver="window.status='Эй! Убирайся с меня!';
return true"
onMouseOut="window.status='Так-то лучше, спасибо'; return true">
Наведите курсор на эту ссылку и уведите обратно</A>
При уходе со страницы:
<BODY onUnload="alert('Уже уходите?')">
Разбор скрипта
Эффекты с мышью, как вы уже догадались, создаются с помощью команд onMouseOver и onMouseOut. Обратите внимание, что между ними ощутимая разница. Вам не нужно, чтобы эти события происходили одновременно. Нужно писать их как две абсолютно разные команды, каждая из которых содержит свою команду return true.
Чтобы получить такой эффект при уходе со страницы, добавляем команду onUnload="alert('Уже уходите?')" в строку BODY. Обратите внимание на двойные и одинарные кавычки. Внутри двойных — одинарные. Вторая пара двойных кавычек означает для браузера конец команды.
Задание
Создайте функцию, которая вызовет два запроса (prompt). (Подсказка: один следует за другим с новой строки.) Первый попросит пользователя ввести свое имя, второй — отчество. Затем та же функция должна вызвать окно предупреждения (alert) c текстом:
«Привет, имя отчество, добро пожаловать на адрес страницы, мою замечательную страницу!»
Непременно создайте переменную для адреса страницы.
Если хотите еще поразвлечься, пусть слова "мою замечательную страницу" будут не просто вставлены в текст alert, сделайте это по-другому. Присвойте переменную и этому элементу.
Потренируемся с функцией, onMouseOver и onMouseOut.
- Создайте страницу с гипертекстовой ссылкой.
- Когда курсор находит на ссылку, в строке состояния должны появляться слова: «Привет, пользователь название браузера!».
- Когда курсор уходит со ссылки, в строке состояния должен появляться текст: «Не скучаете у нас на URL страницы?»
- Если щелкнуть по ссылке, должно всплыть окно со словами: «Уже уходите? Сейчас всего только текущее время»;
- Время должно определяться через функцию.
- Не пользуйтесь командой onClick, чтобы вызвать окно предупреждения, возьмите команду onUnload
Лабораторная работа № 4
Работа посвящена открытию новых окон. Сначала рассмотрим, как через команды Javascript открыть новый документ HTML в другом окне. Затем, как с помощью функции поместить две разные страницы в одном документе.
Скрипт
<SCRIPT LANGUAGE="javascript">
window.open('opened.html', 'joe', config='height=300,width=300')
self.name="main window"
</SCRIPT>
Разбор скрипта
Расположение на странице
Начнем с расположения скрипта на странице. Когда открываем новое окно, располагайте скрипт ближе к концу документа. Тогда сначала загрузится страница, а потом всплывет окошко, иначе окошко всплывет прежде, чем пользователь увидит страницу. window.open
window (окно) — объект, a open (открыть) — метод, который на него воздействует.
Конфигурация нового окна
Информация об этом находится в круглых скобках
Вот схема:
('URL документа в новом окне', 'Название нового окна', config='параметры нового окна')
образец:
('opened.html','joe',config='height=300,width=300')
- opened.html — это URL страницы, которая появится в новом окне. Если страница располагается на другом сервере, то добавьте http:// и так далее.
- joe — название нового окна. Через минуту я объясню вам, для чего оно нужно. config= указывает, что следующие команды относятся к конфигурации нового окна.
Команды конфигурации
Они сообщают, что новое окно будет размером 300 на 300 пикселей.
Обратите внимание, что команды height (высота) и width (ширина) разделены только запятойбез пробелов, а значения поставлены в одинарные кавычки, так как эти два элемента являются подкомандами config. Пробел для браузера означает конец команды. Есть множество подкоманд для команды config. Про высота и ширина определяются в пикселях. Остальные подкоманды употребляются со словами «yes» или «no» в зависимости от того, нужны ли в новом окне эти элементы. (Можно ставить «1» вместо «да» и «0» вместо «нет».) Никаких пробелов между подкомандами и одинарные кавычки.
- toolbar= отвечает за наличие панели инструментов c кнопками НАЗАД, ВПЕРЕД, СТОП и т.д.
- menubar= отвечает за наличие строки меню с элементами ФАЙЛ, ПРАВКА, ВИД и т.д.
- scrollbars= отвечает за наличие полосы прокрутки.
- resizable= указывает, сможет ли пользователь изменить размер окна по своему желанию.
- location= отвечает за наличие адресной строки, где виден URL страницы.
- status= отвечает за наличие строки состояния.
От строки с заголовком не избавиться никогда.
Тэги в новом окне
Всплывающее новое окно — это не просто рамка для страницы.
Как видите, имеются две ссылки. Первая открывает домашнюю страницу HTML Goodies в главном окне. Вот как это получается:
<A HREF="http://www.htmlgoodies.com" TARGET="main window"></A>
У большого окна есть имя, «main window» (главное). Вот почему оно главное. В скрипте это обозначено строкой self.name="main window". Добавляем в ссылку HREF TARGET="--" (цель) и указание на main window.
Если надо, чтобы страница загружалась в маленьком окошке нужно написать «joe» после команды target.
С помощью многократных команд window.open можно вызывать многократные окна. Только следите за тем, чтобы у каждого нового окна было свое имя. Можете связывать окна ссылками при условии, что правильно указываете имена окон в команде target.
Закрыть окно
Вторая ссылка нового окна закрыла его. Вот как это сделано:
<A HREF="" onClick="self.close">Щелкните, чтобы закрыть</A>
Это обычная ссылка HREF, которая никуда не ведет. Видите пустые кавычки? Команда onClick="self.close" закрывает окно и никуда не ведет.
self (само, себя) — это свойство может относиться к любому объекту. В нашем случае это свойство окна. Команда close (закрыть) закрывает окно.
Если, вы хотите открыть окно по команде, а не когда пользователь заходит на страницу. Вот как это можно сделать:
<A HREF="les11.htm" onClick="window.open('opened.html', 'joe',
config='height=300,width=300')">Щелкните, чтобы открыть 'joe'</A>