Цель работы: формирование умений использования JavaScript для проверки правильности заполнения форм и создания окон диалога.

Литература

Поясняющая информация

Объектная модель браузера

Объектная модель браузера содержит 12 объектов:

  1. Document - предоставляющий возможность доступа к компонентам документа HTML.

  2. Event - предоставляющий возможность доступа к свойствам событий, когда последние происходят.

  3. History - предоставляет информацию об адресах, которые клиент посетил.

  4. Location - предоставляет информацию об адресе текущего документа.

  5. MimeType - предоставляет информацию о типе MIME.

  6. Navigator - позволяет обращаться к свойствам браузера.

  7. Selection - отображает текущее выделение документа.

  8. Style - представляет конкретный элемент стиля в таблице стилей.

  9. TextRange - отображает разделы текста, формирующего документ HTML.

  10. Screen - предоставляет информацию о мониторе и системе вывода, информации клиента.

  11. Window - предоставляет свойства, методы и события, связанные с окном браузера.

  12. StyleSheet - представляет все элементы стиля внутри таблицы стилей.

которые позволяют обращаться к части браузера или части страницы с помощью языка JavaScript.

Кроме объектов в объектной модели вводятся следующие понятия:

Методы - способы работы с объектами. Например: закрыть окно. По сути это функция, ассоциированная с объектом.

object.methodname

События - объект сообщает нам, что нечто произошло. Например: элемент становиться активным.

Свойства - свойства объекта. Например: имя и размеры окна.

Окна диалога. Объект Window

Открытие окна

Синтаксис:

window.open ("URL или URI","имя окна","свойства окна")

Следующий оператор создаёт окно, которое отображает содержимое страницы http://www.kstu.ru:

window.open("http://www.kstu.ru")

При создании окна вы можете также предоставить имя, в данном случае - kstuWindow, для обращения к окну как к цели/target при отправке формы или при переходе по гиперссылке.

window.open("http://www.kstu.ru", "kstuWindow" )

Имя окна не требуется при создании окна. Но окно обязано иметь имя, если вы хотите обратиться к нему из другого окна.

При открытии окна вы можете специфицировать атрибуты, такие как высота/height и ширина/width, панель утилит/toolbar, адресная строка/location field или полосы прокрутки/scrollbars. Следующий оператор создаёт окно без панели утилит, но с полосами прокрутки:

window.open ("http://www.kstu.ru","wwwWindow","toolbar=no,scrollbars=yes")

Некоторые свойства окна:

directories - Если yes, создаются стандартные кнопки директорий браузера, такие как What's New и What's Cool.

height - Специфицирует высоту окна в пикселах.

innerHeight - Специфицирует высоту области содержимого окна в пикселах. Это свойство заменило height, которое оставлено для обеспечения обратной совместимости.

innerWidth - Специфицирует ширину области содержимого окна в пикселах. Это свойство заменило width, которое оставлено для обеспечения обратной совместимости.

location - Если yes, создаёт поле ввода Location.

menubar - Если yes, создаёт строку меню в верхней части окна.

outerHeight - Специфицирует размер по вертикали в пикселах внешней границы окна.

resizable - Если yes, даёт пользователю возможность изменять размеры окна.

screenX - Специфицирует расстояние, на котором новое окно помещается от левого края экрана.

screenY - Специфицирует расстояние, на котором новое окно помещается от верха экрана.

scrollbars - Если yes, создаются вертикальная и горизонтальная полосы прокрутки, если документ становится больше размеров окна.

status - Если yes, создаётся статусная строка внизу окна.

titlebar - Если yes, создаётся окно со строкой заголовка.

toolbar - Если yes, создаётся стандартная панель браузера с кнопками, такими как Back и Forward.

width - Специфицирует ширину окна в пикселах.
 

Для того чтобы функция отрабатывалась при нажатии мышкой на элементе документа, будем использовать событие onClick объекта Document.

Пример:

Откроем ссылку в новом окне

1
2
3
4
5
6
7

<a href=""
 
onClick="window.open('http://www.kstu.ru','kstuWindow','left=300,top=300,width=200,hight=400,toolbar=no,menubar=no,location=no,directories=no')">
 
Открыть новое окно
 
</a>

Исполнение: Открыть новое окно

Тоже самое можно сделать с помощью кнопки:

1
2
3

<input type="button" value="Открыть новое окно"
 
onClick="window.open('http://www.kstu.ru','kstuWindow','left=300,top=300,width=200,hight=400,toolbar=no,menubar=no,location=no,directories=no')">

Исполнение:

 

Закрытие окна

Следующий оператор закрывает текущее окно:

window.close()

Пример:

 

Проверка правильности заполнения форм с помощью JavaScript.

С помощью JavaScript можно контролировать правильность заполнения форм.

Попробуйте нажать на "Отправить" в форме расположенной ниже, не заполняя ее.

 

Имя
E-mail
Комментарий

 

Функции для этого примера:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<script language="JavaScript">
<!--
 
function CheckForm(UserForm)
{
 var is_ok = true;
 
 if (UserForm.name.value == '')
 {
 is_ok = false;
 alert("Введите ваше имя!!");
 UserForm.name.focus();
 }
 if (UserForm.Comment.value == '')
 {
 is_ok = false;
 alert("Введите ваши коммениарии!");
 UserForm.Comment.focus();
 }
 if (UserForm.email.value == '')
 {
 is_ok = false;
 alert("Введите ваш e-mail!");
 UserForm.email.focus();
}
 
return is_ok;
} 
// -->
</script>

 

Вызов функции в теге <FORM> при нажатии на кнопку "Отправить"

1

<form onSubmit = "return CheckForm(this)">

 

Имена полей 

1
2
3

<input type="text" name="name" size="20">
<input type="text" name="email"  size="20">
<textarea rows="3" name="Comment" cols="20">

 

 

 

Практические задания

Задание 1

  1. Сделайте, чтобы формы предыдущей лабораторной работы открывались в новом диалоговом окне. Нужно обязательно задать:
    - отступ слева
    - отступ с верху
    - ширину
    - высоту
    - не отображение панели инструментов
    - не отображение панели меню
    - отображение строки состояния
    - не отображение адресной строки
    - не отображение кнопок браузера
    - отображение полос прокрутки

  2. Проверьте работоспособность на сервере.

Задание 2

  1. Сделайте проверку заполнения для каждой из этих форм.

  2. Проверьте работоспособность на сервере.



 

К сдаче лабораторной предоставляются: работающие страницы на сервере с комментариями указанных тегов и их свойств в исходнике.

строкой заголовка. 

Последнее изменение: пятница, 11 октября 2013, 13:01