Лабораторная работа №13 на тему: Динамические веб-страницы на основе JavaScript
Иерархия объектов
На самом верхнем уровне иерархии находится объект window, представляющий окно браузера и являющийся "родителем" всех остальных объектов. Расположенные ниже в иерархии объекты могут иметь свои подчиненные объекты. На рис. 9.6 показана структура объектов клиента (браузера).
Особняком стоит объект navigator с двумя дочерними (подчиненными) объектами. Он относится к самому браузеру, и его свойства позволяют определить характеристики программы просмотра. Свойство appName содержит имя браузера (для Internet Explorer, например, его значение равно "Microsoft internet Explorer"), а свойство appVersion содержит информацию о версии браузера (например, для Internet Explorer версии 4.01 его значение равно "4.0 (compatible; MSIE 4.01; Windows 95)).
Каждая страница в добавление к объекту navigator обязательно имеет еще четыре объекта:
- window — объект верхнего уровня, свойства которого применяются ко всему окну, в котором отображается документ.
- document — свойства которого определяются содержимым самого документа: связи, цвет фона, формы и т. д.
- location — свойства которого связаны с URL-адресом отображаемого документа.
- history — представляет адреса ранее загружавшихся HTML-страниц.
Кроме указанных объектов страница может иметь дополнительные объекты, зависящие от ее содержимого, которые являются дочерними объектами объекта document. Если на странице расположена форма, то все ее элементы являются дочерними объектами этой формы. Для задания точного имени объекта используется точечная нотация с полным указанием всей цепочки наследования объекта. Это возможно, так как объект верхнего уровня имеет свойство, значением которого является объект нижнего уровня. Ссылка на объект осуществляется по имени, заданному параметром NAME тэга HTML.
Например, пусть в документе задана форма с элементами:
<FORM NAME="form1">
Фамилия:
<INPUT TYPE = "text" name = "studentName" size = 20>
Курс:
<INPUT TYPE = "text" name = "course" size = 2>
</FORM>
Для получения фамилии студента, введенного в первом поле ввода, в программе JavaScript следует использовать ссылку document.form1.studentName.value, a чтобы определить курс, на котором обучается студент, необходимо использовать ссылку document.Form1.course. value.
При ссылке на формы и их элементы необязательно указывать объект верхнего уровня document. В приведенном примере сослаться на значение первого поля ввода можно и так form1.studentName.value.
Объекты Form
Каждая форма в документе, определенная тэгом <FORM>, создает объект Form, порождаемый объектом document. Ссылка на этот объект осуществляется с помощью переменной, определенной в параметре NAME тэга <FORM>. В документе может быть несколько форм, поэтому для удобства ссылок и обработки в объект Form введено свойство-массив forms, в котором содержатся ссылки на все формы документа. Ссылка на первую форму задается как document.forms [0], на вторую — document.forms [1] и т. д. Вместо индекса в массиве forms можно указывать строку, значение которой равно имени переменной для формы. Например, если создана одна форма
<FORM NAME="form1">
Информация пользователя:
<INPUT TYPE="text" NAME="text1" value="Bведите что-нибудь"><HR>
<INPUT TYPE="button" NAME="Выполнить">
</FORM>
то любой из следующих операторов JavaScript содержит ссылку на эту форму:
document.forms[0]
document.forms["form1"]
Document.form1
Последний оператор возможен в силу того, что объект document порождает объект Form, и ссылку на него можно осуществлять по обычным правилам наследования языка JavaScript.
Все элементы формы порождают соответствующие объекты, подчиненные объекту родительской формы (см. рис. 9.6). Таким образом, для ссылки на объект Text формы form1 следует пользоваться любым из нижеприведенных операторов:
document.forms[0].text1
document.forms["form1"].text1
Document.form1.text1
Каждый объект Form имеет также свойство-массив elements, содержащий ссылки на все подчиненные форме элементы в том порядке, как они определены в документе HTML.
Элементы формы, точнее их объекты, имеют свойство name, значение которого равно значению параметра NAME тэга <INPUT>, а также свойство value, значение которого определяется смыслом параметра VALUE элемента формы. Например, для элементов text и textarea значением этого свойства будет строка содержимого полей ввода этих элементов, для кнопки подтверждения — надпись на кнопке и т. д.
Обработчики событий
Интерактивные страницы должны реагировать на действия пользователя. Например, при нажатии на кнопку появляется диалоговое окно с сообщением, или выполняется проверка правильности введенных пользователем данных в полях формы.
В JavaScript подобная интерактивность реализована возможностью перехвата и обработки событий, возникающих в результате действий пользователя. Для этого в тэги некоторых элементов (объектов с точки зрения JavaScript) введены параметры обработки событий, задающие действия, выполняемые при возникновении события, связанного с элементом. Имя параметра обработки события начинается с приставки on, за которой следует название события. Если событием является, например, щелчок кнопкой мыши click, то соответствующий параметр обработки этого события называется onclick; если обрабатываемым событием является нажатие кнопки мыши MouseDown, то параметр называется onMouseDown.
В табл. 9.9 представлены возможные события, и в каких элементах документа HTML они могут инициализироваться.
Таблица 9.9. События JavaScript
| Событие | Применяется к объектам | Когда происходит событие | Обработчик события |
| Abort | image | Пользователь отказывается от загрузки изображения | onAbort |
| Blur | window и все объекты формы | Потеря объектом фокуса | onBlur |
| Change | text, textarea, select | Пользователь изменяет значение элемента | onChange |
| Click | button, radio, checkbox, submit, reset, link | Щелчок на элементе формы или связи | onclick |
| DragDrop | window | Пользователь перетаскивает мышью объект в окно браузера, например файл | onDragDrop |
| Error | image, window | Загрузка документа или изо бражения вызывает ошибку | onError |
| Focus | window и все объекты формы | Окно или элемент формы получает фокус | onFocus |
| KeyDown | document, image, link, textarea | Пользователь нажимает клавишу клавиатуры | onKeyDown |
| KeyPress | document, image, link, textarea | Пользователь удерживает нажатой клавишу клавиатуры | onKeypress |
| KeyUp | document, image, link, textarea | Пользователь отпускает клавишу клавиатуры | оnКеуuр |
| Load | Тело документа | Загружается документ в браузер | onLoad |
| MouseDown | document, button, link | Пользователь нажимает кнопку мыши | onMouseDown |
| MouseMove | Никакой | Пользователь перемещает курсор мыши | onMouseMove |
| MouseOut | area, link | Пользователь перемещает курсор из области изображения или со связи | onMouseOut |
| MouseOver | link | Пользователь перемещает курсор над связью | onMouseOver |
| MouseUp | document, button, link | Пользователь отпускает кнопку мыши | onMouseUp |
| Move | window | Пользователь или сценарий перемещает окно | onMove |
| Reset | form | Пользователь нажимает кнопку Reset формы | onReset |
| Resize | window | Пользователь или сценарий изменяет размеры окна | onResize |
| Select | text, textarea form | Пользователь выбирает поле ввода элемента формы | onSelect |
| Submit | Тело документа | Пользователь нажимает кнопку Submit формы | onSubmit |
| Unload | Когда происходит событие | Пользователь закрывает документ Обработчик события | onUnload |
Процедуры JavaScript
Процедура, или функция, — это именованная последовательность операторов, которая инициализируется и выполняется простой ссылкой на имя функции.
Процедура задается оператором function, имеющим следующий синтаксис:
function имя_функции ([параметры]) {
[операторы]
}
где имя_функции — любое правильное имя языка JavaScript, параметры — список передаваемых в процедуру параметров, элементы которого отделяются запятыми.
Оператор function только определяет процедуру, но не выполняет ее. Для вызова процедуры достаточно указать ее имя с заданными в скобках параметрами.
Примечание
Если в процедуре параметры отсутствуют, наличие скобок без параметров в операторе вызова процедуры обязательно.
Процедура может возвращать некоторое вычисляемое в ней значение.
В этом случае обычно она называется функцией, и в операторах, определяющих последовательность выполняемых ею действий, обязательно должен присутствовать оператор return, задающий возвращаемое функцией значение. Вызов функции осуществляется аналогично вызову процедуры, но ее можно использовать в выражениях JavaScript.
Обычно все определения процедур и функций задаются в разделе <HEAD> документа. Это обеспечивает интерпретацию и сохранение в памяти всех процедур при загрузке документа в браузер.
Создадим обработчик событий на нажатие кнопки Выполнить пользовательской формы. Для этого в области заголовка <HEAD>..</HEAD> напишем процедуру, которая будет вызывать диалоговое окно и введенное значение будет отображено в текстовом поле.
<script>
function vvod() {
x=prompt("Введите данные", "Ничего не хочу вводить")
document.form1.text1.value=x
}
</script>
Чтобы процедура заработала необходимо вызвать ее выполнение, для этого добавьте в тег кнопки формы ссылку на событие – щелчок мыши:
<INPUT TYPE="button" NAME="mybutton" value="выполнить"
onclick="vvod()">
Ключевое слово this
Ключевое слово this используется для ссылки на текущий объект и обычно применяется для ссылки на объект при вызове процедуры обработки событий в обработчике событий элемента.
Например, добавим в форму еще одно текстовое поле
<Курс, на котором учитесь:</В>
<INPUT TYPE="text" NAME="text2" SIZE=3>
Необходимо организовать проверку вводимых данных, если пользователь ввел курс не 1-5, то выдать сообщение об ошибке.
Создадим в нашей html-страничке еще одну функцию (разместите ее ниже первой функции), которая будет проверять правильность ввода в текстовое поле курса, на котором учится студент. Напишите следующий код процедуры validate:
function validate (obj) {
if (obj.value < 1 || obj.value > 6) {
alert ("Правильно введите Ваш курс")
}
}
Как вы видите процедура с параметром. Параметр в нашем случае это объект формы – текстовое поле.
Вызовем эту процедуру в обработчике событий текстового поля, когда пользователь изменяет значение элемента формы onChange, следующим образом:
<INPUT TYPE="text" NAME="text2" SIZE=3
onChange="validate(this.form1.text2}">
Ключевое слово this в данном контексте ссылается на элемент Текстовое поле ввода text2. Свойство form этого объекта содержит ссылку на текущую форму. Таким образом, получается правильная ссылка на поле ввода в контексте объектной модели документа: document.Form1.text2. (Если по каким-то причинам объект this не выполняется то укажите прямую ссылку на элемент формы).
Объект event
В JavaScript каждое событие порождает ассоциированный с ним объект event. Этот объект содержит всю информацию о событии и его можно передать процедуре обработки события.
Информация о событии зависит от конкретного произошедшего события. Например, объект event события MouseDown содержит информацию о типе события (свойство type), какая кнопки мыши была нажата (свойство which), какая клавиша (Alt, Shift или Ctrl) удерживалась при щелчке кнопкой мыши (свойство modifiers), и значения координат курсора мыши в момент возникновения События (свойства screenX и screenY).
Объекты event совместно с обработчиками событий позволяют проводить достаточно тонкую обработку события.
Вызов процедуры обработки события
Вызов процедуры обработки события можно осуществить двумя способами:
- явно — назначив ссылку на процедуру обработки события в соответствующем свойстве объекта;
- неявно — в параметре обработки события тэга соответствующего элемента.
Каждый объект JavaScript, создаваемый для элементов HTML-документа, имеет свойства, ассоциированные с возможными событиями, которые могут быть сгенерированы для этого элемента. Присвоив этому свойству в качестве значения ссылку на процедуру обработки события, мы, тем самым, определим процедуру, которая будет вызываться при возникновении соответствующего события.
Например, следующий код определяет процедуру showEventType как процедуру обработки события MouseDown кнопки формы:
<FORM NAME="form1">
<INPUT TYPE="button" NAME="button1" value="Узнай событие">
<SCRIPT>
document.Form1.button1.onmousedown = showEventType
</SCRIPT>
</FORM>
Сама процедура задается следующим кодом:
function showEventType (e) {
alert("Произошло событие: " + e.type)
}
Обратим внимание на то, что, присваивая ссылку на процедуру, мы не задаем в скобках никаких параметров. Это связано с тем, что любая процедура в JavaScript представляется как объект. Поэтому указание имени процедуры (объекта) однозначно определяет ссылку на нее.
В объявлении функции showEventType присутствует параметр е, свойство type которого выводится в диалоговом окне. При явном вызове процедуры обработки события объект event передается ей по умолчанию, поэтому в данном случае печатается значение свойства type объекта event, т. е. тип СОбЫТИЯ — MouseDown.
Второй, неявный вызов процедуры обработки события требует задания обращения к ней в параметре onMouseoown тэга <INPUT>. При этом необходимо явно указывать параметр event, как показано в следующем фрагменте кода:
<FORM NAME="form1">
<INPUT TYPE="button" NAME="button1" value="Узнай событие"
onMouseDown = "showEventType(event)" >
</FORM>
Самостоятельно:
Создать новую веб-страничку c заголовком «Отдел кадров университета», применить градиентную заливку и подобрать цвет шрифта текста.
Добавить форму под именем MyForm со следующим полями:
· Текстовое поле Фамилия
· Текстовое поле Имя
· Текстовое поле Отчество
· Раскрывающийся список Должность со следующими элементами списка: Преподаватель – стажер, ассистент, старший преподаватель, доцент, профессор
· Опцию Пол (женский/мужской)
· Текстовое поле Возраст
· Текстовое поле Количество отработанных лет
· Опцию График работы (Полный день/Свободный)
· Опцию Занятость (Полное / Совмещенное)
· Текстовое поле Ставка (организовать проверку на ввод данных при потере фокуса с объекта: если значение выходит за пределы диапазона 0<ставка<1.5, то выдать сообщение на экран о не верном вводе данных, и не выходить из поля пока его значение не будет верным)
· Текстовое поле Зарплата (поле не заполняется).
В нижней части формы добавить три кнопки Сохранить, Сбросить, Зарплата.
Кнопка сохранить должна отправить электронное сообщение по адресу student@snu.edu.ua
Кнопка сбросить должна очистить все поля
Кнопка Зарплата должна рассчитать сумму зарплаты и вывести ее в текстовое поле в зависимости от следующих условий:
· Фиксированная зарплата в зависимости от должности:
· Преподаватель – стажер – 800 грн, ассистент – 1000 грн, старший преподаватель – 1200 грн, доцент – 1500 грн, профессор – 2500 грн.
· Надбавка за стаж работы: < 3 лет – 0%, >=3 и < 10 – 10%, >=10 – 15%.
· Зарплата = (Фиксир_зарплата +Фиксир_зарплата*Надбавка_стаж)*Ставка.