Практическое занятие № 9
Тема: Работа
с окнами и диалогами на JavaScript
Цель работы: получить практические навыки по созданию новых окон и содержимого в нем, отработать принципы использования диалогов, обмена данными между родительским и дочерними окнами.
Работа с диалоговыми окнами
Пусть имеется страница с произвольным текстом. При старте страницы нужно выдать пароль. Если пароль верный, то страница открывается. В противном случае - выдается окно с сообщением об ошибке и страница закрывается.
Указания: в HTML файле пароль код скрипта должен выполниться автоматически до загрузки страницы. Для этого сразу за тегом <body> вставьте код скрипта:
Сохраните страницу, откройте ее в браузере и проверьте ее работу.
Внесем изменения. Пусть при закрытии страницы выдается запрос на дополнительную попытку ввода пароля. Такой повтор повторяется до тех пор, пока пароль не будет верным или пользователь откажется от ввода.
Указания: повтор будем организовывать с помощью цикла while...do. В код скрипта страницы внесите изменения:
Сохраните страницу и проверьте ее работу в браузере.
Обратите внимание, что метод close() для окна, которое не открывалось методом open(), не может быть закрыто в браузере Mozilla FireFox (проверьте работу страницы в этом браузере).
Указания. Для решения этой проблемы можно не закрывать окно, а отобразить новую страницу с сообщением об ошибке. Для этого создайте страницу с текстом об ошибке регистрации и сохраните под именем error.html. В скрипт внесем изменения:
Сохраните страницу и проверьте ее работу в браузере.
Работа с окнами
На странице создайте кнопку, которая будет открывать новое окно размером 300х200. В этом окне отобразите заголовок и абзац текста.
Указания: для создания кнопки вставьте на страницу тег вида:
<p><input
type="button" value="Новое окно" name="B1"></p>
Скрипт открытия формы должен выполняться не при загрузке страницы, а при наступлении события (в нашем случае при щелчке на кнопке). Такой код должен оформляться в виде функции и предпочтительно в разделе <head>.
В нашем случае в разделе <head> код скрипта будет иметь вид:
Для вызова функции по щелчку на кнопке в тег кнопки добавьте параметр вида:
onclick="new_window()"
Сохраните страницу и проверьте работу в браузере. Окно отображается в левом верхнем углу браузера.
Внесите изменения так, чтобы окно открывалось по центру экрана монитора.
Указания: в скрипт внесите изменения вида:
Сохраните страницу и проверьте работу в браузере. Попробуйте сдвинуть окно браузера и убедитесь, что новая форма всегда открывается по центру экрана.
Внесите изменения так, чтобы окно открывалось по центру окна браузера.
Указания: в скрипт внесите изменения вида:
Сохраните страницу и проверьте работу в браузере. Попробуйте сдвинуть окно браузера и убедитесь, что новое окно всегда открывается по центру экрана. Обратите внимание, что окно центрируется относительно всей области браузера, включая меню и панель инструментов.
Если вы хотите центрировать окно относительно только рабочей области, замените свойства outerWidth и outerHeight на innerWidth и innerHeight. Проверьте работу такого скрипта.
Внесите изменения в скрипт так, чтобы в новом окне появилась гиперссылка на сайт техникума. Внизу создайте кнопку для закрытия окна.
Указания: для отображения содержимого увеличим размер окна до 400х300. Внесем в скрипт изменения вида:
Открытие ссылок во вновь созданных окнах
На главной странице создайте гиперссылку, которая откроет страницу в новом окне заданного размера.
Указания: создайте страницу с произвольным текстом и сохраните под именем page1.html.
Для гиперссылки в событии onclick нужно присвоить код создания окна, а в параметре гиперссылки target нужно указать имя созданного окна.
Тег гиперссылки будет иметь вид:
Работа с
разными окнами и глобальными переменными
В созданную страницу внесите изменения. На главной странице создайте еще одну кнопку, которая будет закрывать дочернюю форму.
Указания: если посмотреть на код скрипта, то переменная win, в которую записывается ссылка на дочернее окно, описана внутри функции. Следовательно, она локальная и не будет доступна в других скриптах (например, в коде нашей второй кнопки).
Для решения этой проблемы опишем переменную win как глобальную. Для этого после тега <script> перед описанием функции вставьте команду:
var win;
В коде скрипта удалите описание var перед переменной win.
На странице создайте новую кнопку для закрытия дочерней формы. Окно закрывается через глобальную переменную win. Для этого в конец добавьте тег вида:
Обратите внимание, что в обоих окнам имеется кнопка для закрытия дочернего окна. На главной форме окно закрывается через глобальную переменную, в которой хранится ссылка на дочернее окно. На дочерней форме окно закрывается через объект Window, который указывает на текущее окно.
Внесем в код изменения: создать функцию, которая выдает предупреждение о том, что окно будет закрыто и закрывает его. Данная функция будет иметь входной параметр, с помощью которого будет задаваться имя или ссылка на окно, которое нужно закрыть.
Указания: в коде главной страницы в теге Script раздела Head напишем код новой функции:
function exit(param)
{
param.alert('Внимание! Окно будет закрыто!');
param.close();
}
Для второй кнопки на главной странице внесите изменения в тег. В качестве параметра передадим в функцию закрытия текущее окно. Для этого будем использовать стандартное имя объекта window, которое всегда указывает на текущий объект.
<p><input
type="button" value="Закрыть форму"
name="B2" onclick="exit(window);"></p>
Для кнопки на дочерней форме также нужно вызвать созданную функцию. При этом нужно учитывать следующие особенности:
- функция описана на главной форме, следовательно, для доступа к ней нужно использовать стандартное имя родительского окна opener. Функция имеет имя opener.exit;
- в качестве параметра функции нужно указать глобальную переменную win, в которой хранится ссылка на дочернее окно. Так как эта переменная описана на главной форме, то для доступа к ней используем имя opener.win.
В функции открытия нового окна внесите изменения в тег кнопки:
win.document.write('<p
align="center"><input type="button" value="Закрыть"
name="B1" onclick="opener.exit(opener.win);"></p>');
Вынос скрипта в отдельный файл
Пусть требуется создать еще одну страницу с кнопкой, которая также открывает новую форму с такими же параметрами, что и выше. Реализуйте эту задачу, не копируя код скрипта из предыдущего файла.
Указания. Откройте созданную страницу и переместите из нее весь код, который заключен в тег <script> в разделе head (сами теги не переносить). Сохраните новый файл под именем script.js.
В созданной странице внесите изменения, записав скрипт так:
<script
src='script.js'></script>
Сохраните изменения и проверьте работу страницы в браузере.
Создайте новую страницу. Добавьте в нее код создания кнопки вида:
<p><input
type="button" value="Новая форма"
name="B1" onclick="new_window()"></p>
Как видно, кнопка запускает функцию new_window(), расположенную в отдельном файле. Для ее использования в раздел head новой страницы добавьте теги:
<script
src='script.js'></script>
Сохраните изменения и проверьте работу страницы в браузере.
Таким образом, мы многократно можем использовать один и тот же код без необходимости копирования текста.
Пусть теперь код кнопок на сайте нужно изменить: размер окна сделать 350х270, текст заголовка заменить на "Новое окно".
Указания: если код вынесен в отдельный файл, то изменения достаточно внести в него.
Откройте файл script.js и в коде внесите изменения вида:
Сохраните изменения. Проверьте, что обе страницы выполняют обновленный код верно.
Дополнительно. Работа с формами
На новой странице создайте форму вида:
Кнопка "Закрыть" выдает запрос, и если получен утвердительный ответ, то окно закрывается.
Указания: Создайте новую страницу. С помощью команды "Вставка - Форма - Форма" добавьте на страницу новую форму (пунктирная рамка) и удалите все кнопки. На форме с помощью команды "Таблица - Вставить - Таблица" добавьте новую таблицы размером 4х2 с параметрами: ширина - 40%, размер границы - 0. В нужных ячейках таблицы введите тексты надписей. С помощью команды "Вставка-Форма-Поле" добавьте в нужные ячейки текстовые поля. С помощью команды "Вставка-Форма-Кнопка" добавьте в нужные ячейки кнопки. Для изменения надписей на кнопках сделайте по ним двойной щелчок.
Для выдачи запроса при закрытии страницы в разделе "Head" страницы вставим скрипт:
Для присваивания созданной функции кнопке "Закрыть" перейдите на закладку "С разделением", в нижней части окна выберите кнопку. В результате в верхней части выделиться тег данной кнопки. В тег добавьте вызов функции по событию onclick:
<input
type="button" value="Закрыть" name="B2" onclick="exit()">
Сохраните страницу в папку под именем calculate.htm. Откройте в браузере страницу index.htm и проверьте работу кнопок.
Самостоятельно
На странице для кнопки "Рассчитать" напишите код для суммирования двух полей.
Добавьте еще одну кнопку для очистки полей (type="reset").
Указания: откройте страницу в окне FrontPage. В коде найдите тег форм и присвойте форме некоторое имя. Для этого в тег добавьте параметр name="имя".
Для обращения к полю на форме используйте запись:
document.имя_формы.имя_поля.value
Для конвертирования содержимого поля в число используйте запись:
+document.имя_формы.имя_поля.value