1744
.pdf
Рис. 41. Вид Web-страницы в окне браузера
4.3.6. Использование объекта window в формах
Преимущество JavaScript, даже по сравнению со сложными языками программирования, состоит в том, что он позволяет управлять браузером. Сценарий позволяет загрузить в окно браузера новую Web-страницу, управлять ее внешним видом и преобразовывать документ, а также запускать новые окна браузера.
В табл. 7 приведены методы объекта window, позволяющие управлять окнами.
Таблица 7
Методы объекта window для управления окнами |
||
|
|
|
Метод |
Описание |
|
open |
Создание нового окна |
|
close |
Закрытие окна |
|
setTimeout |
Определяет временную задержку перед выполнением |
|
указанной команды |
||
|
||
setInterval |
Выполнение действий, повторяющихся с определенным |
|
интервалом времени |
||
|
||
clearTimeout |
Отмена действия метода setTimeout() |
|
clearInterval |
Отмена действия метода setInterval() |
|
showModalDialog |
Отображение модальных диалоговых панелей |
|
returnValue |
Возврат значения |
|
showhelp |
Отображение справочной информации |
|
Новое окно браузера создается с помощью метода window.open(). Метод window.open() имеет ряд дополнительных аргументов, которые позволяют задать местоположение окна, его размер и тип, а также указывают, должно ли окно иметь полосы прокрутки, панель команд
ит. п. Помимо этого можно задавать и имя окна.
Вобщем виде данный метод можно представить следующим образом:
nw=window.open('URL', 'Имя', 'Параметры')
70
Рассмотрим команду более подробно:
Переменная nw сохраняет данные нового объекта window. Ее имя можно использовать с методами и свойствами созданного объекта window.
Первый параметр метода window.open() – это URL документа, загружаемого в окне. Если его не заполнить, то окно останется пустым.
Второй параметр определяет название окна (Имя). Это имя используется в качестве значения параметра TARGET у тегов
<FORM> и <A>.
Третий параметр представляет список необязательных опций, разделенных запятой. С их помощью вы определяете вид нового окна: наличие в нем панелей инструментов, строки состояния и других элементов.
В табл. 8 приведен список опций, задаваемых третьим параметром (Параметры) метода open().
Таблица 8
Опции значения параметра метода open()
Параметр |
|
Значение |
|
Описание |
|
|
||
1 |
|
2 |
|
|
3 |
|
|
|
|
|
|
|
|
|
Указывает, развернуто ли новое |
окно |
на |
fullscreen |
|
yes |
|
no |
||||
|
|
|
полный экран или как обычное |
окно. |
По |
|||
|
1 |
|
0 |
|
||||
|
|
|
|
умолчанию развернуто как обычное окно |
|
|||
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
channelmode |
|
yes |
|
no |
|
Позволяет указать, отображается ли полоса |
||
|
1 |
|
0 |
|
каналов |
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|||
|
|
|
|
|
|
Позволяет указать, отображается ли полоса |
||
toolbar |
|
yes |
|
no |
|
|||
|
1 |
|
0 |
|
кнопок |
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|||
|
|
|
|
|
|
Позволяет указать, отображается ли полоса |
||
location |
|
yes |
|
no |
||||
|
1 |
|
0 |
|
для ввода адреса |
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|||
|
|
|
|
|
|
Позволяет указать, отображается ли полоса |
||
directories |
|
yes |
|
no |
|
|||
|
1 |
|
0 |
|
кнопок для выбора каталогов |
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|||
|
|
|
|
|
|
Позволяет указать, отображается ли полоса |
||
status |
|
yes |
|
no |
|
|||
|
1 |
|
0 |
|
статуса |
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
71
|
|
|
|
|
|
Окончание табл. 8 |
|
|
|
|
|
|
|
1 |
|
2 |
|
|
3 |
|
|
|
|
|
|
|
Позволяет указать, отображается ли полоса |
Menubar |
|
yes |
|
no |
||
|
1 |
|
0 |
|
меню |
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
Задает отображение горизонтальной и |
scrollbars |
|
yes |
|
no |
|
|
|
1 |
|
0 |
|
вертикальной полос прокрутки |
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
Позволяет указать, может ли окно изменять |
resizable |
|
yes |
|
no |
|
|
|
1 |
|
0 |
|
свой размер |
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
Задает ширину окна в пикселях. |
width |
|
yes |
|
no |
||
|
1 |
|
0 |
|
Минимальное значение – 100 |
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
Задает высоту окна в пикселях. |
height |
|
yes |
|
no |
|
|
|
1 |
|
0 |
|
Минимальное значение – 100 |
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
Задает вертикальную координату левого |
top |
|
yes |
|
no |
|
|
|
1 |
|
0 |
|
верхнего угла окна |
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
Задает горизонтальную координату левого |
left |
|
yes |
|
no |
|
|
|
1 |
|
0 |
|
верхнего угла окна |
|
|
|
|
|
|||
|
|
|
|
|
|
|
Рассмотрим примеры на использование методов объекта window в формах с обработчиками событий.
Пример
Создадим форму, состоящую из трех кнопок. Первая кнопка с надписью «Открыть новое окно» позволяет открыть новое окно, вторая кнопка с надписью «Закрыть новое окно» позволяет закрыть созданное окно, третья кнопка с надписью «Закрыть главное окно» позволяет закрыть окно с формой.
<html>
<head>
<title>Работа с окнами</title> </head>
<body>
<h3>Работа с окнами</h3> <hr>
Для открытия и закрытия окон используйте эти кнопки
<hr>
<form name="winform">
72
<input type="button" value="Открыть новое окно" onClick="NewWin=window.open('1.htm', 'NewWin', 'toolbar=yes, status=yes, menubar=yes, resizable=yes, width=300,height=200')">
<p>
<input type="button" value="Закрыть новое окно" onClick="NewWin.close()">
<p>
<input type="button" value="Закрыть главное окно" onClick="window.close()">
</form>
<hr>
</body>
</html>
На рис.42 показано, как будет выглядеть форма в окне браузера после выполнения описанного сценария.
Рис. 42. Вид Web-страницы в окне браузера
Если щелкнуть по кнопке «Открыть новое окно», то будет открыто новое окно с заданными параметрами (в окно будет загружен файл «1.htm»).
Если щелкнуть по кнопке «Закрыть новое окно», то новое окно закроется.
73
Если щелкнуть по кнопке «Закрыть главное окно», то предварительно отобразится сообщение с предупреждением о закрытии окна. Вид сообщения приведен на рис. 43. Если пользователь выберет «Да», то главное окно будет закрыто.
Рис. 43. Вид Web-страницы в окне браузера
Пример
С помощью метода window.setInterval() организовать вывод на экран окна с сообщением «Прошло 5 секунд» через каждые 5 секунд.
<html>
<head>
<title>Временные задержки</title> <script language="JavaScript"> function wz(){ window.alert('Прошло 5 секунд')
}
function demo(){
//вызывать функцию wz каждые 5 секунд window.setInterval('wz()', 5000)
}
demo()
</script>
</head>
<body>
<p> Ждем появления окна с сообщением через каждые 5 секунд
</body>
</html>
На рис.44 показано, как будет выглядеть форма в окне браузера после выполнения описанного сценария.
74
Рис. 44. Вид Web-страницы в окне браузера
Для отображения модальных диалоговых окон используется метод window.showModalDialog(). В общем виде данный метод выглядит следующим образом:
d=window.showModalDialog('URL','Аргументы','Параметры')
где
URL – адрес диалогового окна. Указание пустой строки (' ') недопустимо.
Аргументы – необязательный список аргументов любого типа (в том числе массив), которые могут быть переданы в диалоговое окно.
Параметры – необязательный список параметров диалогового окна, описанных в табл. 9.
Перечисленные параметры могут идти в любом порядке через запятую.
Подобные окна имеют следующие особенности:
отсутствуют кнопки навигации;
не работает правая кнопка мыши;
содержимое нельзя выделить.
Метод window.showModalDialog() возвращает значение,
присвоенное свойству returnValue диалогового окна.
Таблица 9
|
|
Список параметров |
|
|
|
|
|
Параметр |
Значение |
|
Описание |
1 |
2 |
|
3 |
border |
thick | thin |
|
Задает толщину рамки окна |
|
|
|
|
dialogWidth |
Число (px, %) |
|
Задает ширину диалогового окна |
|
|
|
|
75
|
|
|
|
|
|
Окончание табл. 9 |
1 |
|
|
2 |
|
3 |
|
dialogHeight |
|
Число (px, %) |
|
Задает высоту диалогового окна |
||
|
|
|
|
|
|
|
dialogTop |
|
Число (px, %) |
|
Задает вертикальную координату левого |
||
|
|
верхнего угла диалогового окна |
||||
|
|
|
|
|
|
|
dialogLeft |
|
Число (px, %) |
|
Задает горизонтальную координату левого |
||
|
|
верхнего угла диалогового окна |
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
center |
|
yes |
|
no |
|
Задает выравнивание диалогового окна по |
|
1 |
|
0 |
|
центру экрана |
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
maximize |
|
yes |
|
no |
|
Добавляет кнопку "Развернуть" в строке |
|
1 |
|
0 |
|
заголовка |
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
minimize |
|
yes |
|
no |
|
Добавляет кнопку "Свернуть" в строке |
|
1 |
|
0 |
|
заголовка |
|
|
|
|
|
|||
|
|
|
|
|
|
|
Пример
Пусть требуется при нажатии кнопки вызвать диалоговую панель для ввода пароля. Введенный пароль возвращается запрашивавшей странице.
Создадим файл index.htm (данный файл является основной webстраницей):
<html>
<head>
<title>Главная страница</title> </head>
<body>
<script language="JavaScript"> function p() {
s=window.showModalDialog('ss.htm', null, 'dialogWidth:15em; dialogHeight:10em; center:1')
alert('password='+s)
}
</script>
<form>
<center>
<input type='button' value='Нажми' onClick='p()'> </form>
</body> </html>
76
Создадим файл ss.htm (описание диалоговой панели, содержащей строку ввода пароля):
<html>
<head>
<title>Диалоговая панель</title> </head>
<body bgcolor='#abcdef'> <script language="JavaScript"> function w()
{
window.returnValue=window.document.all.s.value
window.close()
}
</script>
<form>
<center> Enter password:
<input type=password name=s>
<input type='button' value='OK' onClick='w()'> </form>
</body>
</html>
Рис. 45. Вид Web-страницы в окне браузера
Рассмотрим более подробно данный пример: при нажатии на кнопку "Нажми" вызывается функция p(), в которой используется
77
метод window.showModalDialog(), с помощью которого открывается диалоговая панель, описанная в файле ss.htm.
В этой панели отображается форма со строкой ввода и кнопкой «ОК». При нажатии кнопки содержимое строки с паролем передается вызывавшей странице (для этого используется метод window.returnValue), окно с формой закрывается, а введенный пароль отображается в окне alert. На рис.45 показано, как будет выглядеть форма в окне браузера после выполнения описанного сценария.
4.3.7. Обработка элементов форм
Очень часто при работе с формами возникает необходимость обработки элементов форм, например, при организации тестирования с применением элементов форм. Рассмотрим пример такой формы.
Пример
Создадим форму-тест с двумя вопросами и обработаем результаты проведенного тестирования.
<html> <title>Тест</title> <body>
<script language="JavaScript"> function Ok(){
var A = new Array(document.f.t1, document.f.t2, document.f.t3, document.f.t4, document.f.s1, document.f.s2,document.f.s3,document.f.s4)
var Res = 0 for (i in A) {
if (A[i].checked) Res = Res + parseInt(A[i].value)
}
switch (Res){
case 3: alert("Отлично! Вы полностью усвоили материал данной темы.")
break
case 2: alert("Хорошо! Но не блестяще!") break
case 1: alert("Удовлетворительно! Можно лучше.") break
case 0: alert("Плохо! Изучите материал заново.")
}
}
78
</script> <form name="f">
<p align="center"><font size="5"> <b>Тест</b></font></p> <font size="4">1. Какой метод реализует объединение всех элементов массива в одну строку? <br>
<font size="3">
<input type="radio" name="t1" value="0"> reverse() <br> <input type="radio" name="t2" value="0"> sort()<br> <input type="radio" name="t3" value="1"> join()<br> <input type="radio" name="t4" value="0"> concat()<br>
<br><br>
<font size="4">2. Какие методы позволяют организовать ввод информации? <br>
<font size="3">
<input type="checkbox" name="s1" value="0"> alert <br> <input type="checkbox" name="s2" value="1"> confirm <br> <input type="checkbox" name="s3" value="1"> prompt <br> <input type="checkbox" name="s4" value="0"> document.write
<br>
<p align="center">
<input onclick=Ok() type="button" value='Результат тестирования'>
<input type="reset" name="reset" value="Сброс"> </form>
</body>
</html>
На рис.46 показано, как будет выглядеть форма в окне браузера после выполнения описанного сценария.
Впрограмме создана форма с именем f, содержащая два вопроса
идве кнопки. Ответы на первый вопрос организованы с помощью элементов форм – переключателей, а ответы на второй вопрос организованы с помощью элементов форм – флажков. Каждый элемент (переключатель, флажок) имеет свое имя (t1, t2, t3, t4, s1, s2, s3, s4), а также значение value (если ответ правильный, то значение 1; если ответ не правильный, то значение 0).
При нажатии на кнопку «Результат тестирования» (обработчик события onClick) вызывается функция Ok(), производящая подсчет набранных очков и выводящая соответствующее сообщение. Все элементы формы (переключатели и флажки) организованы в массив
79