JavaScript урок11. Объектная модель документа (продолжение) и идентификация

Авторadmin / Опубликовано1 комментарий

На уроке рассматриваются способы доступа к элементу textarea в javascript. Разбираются события текстовых полей и текстовых областей onblur и onfocus. Объясняется работа с событием для объекта body onload javascript

Назад
К оглавлению
Далее к уроку 12

События объекта (тега) body onLoad и onUnload

  • Обработчик события onload прекрасно подходит для инициализации всех остальных событий.
  • Данное событие добавляется в тег body:
    • <body onload="myFunction()">
  • Аналогичное событие есть для инициализации функций при закрытии документа — событие onUnload. Событие вызывается тогда, когда пользователь закрывает окно браузера или окно конкретной веб-страницы.
  • Вместо onUnload сегодня можно использовать onBeforeUnload
  • Вывод сообщений при использовании onUnload сегодня работает только в браузере IE

Рассмотрим пример двух вариантов использования события onload в javascript:

Пример: По загрузке документа поместить в текстовое поле сообщение «Добрый день!» (запускать функцию)

Выполнение:

  1. Скрипт:

        function printText() {
        document.getElementById("txt1").value = "Добрый день!";
    }

    HTML-код:

    <body onload="printText()">
<form name="myForm">
<input id="txt1" type="text" name="input" value="">

    Таким образом, при загрузке веб-страницы браузером произойдет вызов функции printText(), которая выведет в текстовое окно текст «Добрый день!»

  2. Скрипт:

    window.onload= function() {
        document.getElementById("txt1").value = "Добрый день!";
    }
    <body>
<form name="myForm">
<input id="txt1" type="text" name="input" value="">

В данном случае код полностью реализован в скрипте. Результат будет аналогичен.

Задание js11_1.

  • Добавьте форму в документ и расположите в форме текстовое поле.
  • Добавьте обработчики событий onload и onunload для тега body.
  • Отождествите событие onload с отображением сообщения в текстовом поле «Здравствуйте», а событие onunload — с отображением предупреждающего диалогового окна «До свидания!» (последнее будет работать только в браузере IE).
  • Опишите скрипты сначала с использованием функций, а затем в виде значений атрибутов событий

Выполнение данного задания к уроку доступно на видео:
youTube

Теперь выполним задание. Внимательно ознакомьтесь с постановкой задачи и ее детализацией, а затем перейдите к поэтапному выполнению задания.

Задание js11_2.
Постановка задачи:
На странице представлены изображения кресел, которые могут быть либо занятыми, либо пустыми (атрибут тега alt=yes || no), и кнопка для поиска свободного места.
Щелчок по кнопке осуществляет поиск пустого места. Если таковое имеется – к соответствующему изображению добавлять рамку.
javascript onload

HTML-код:

<img src="1.jpg" id="seat0" alt="" title="seat0">
<img src="1.jpg" id="seat1" alt="" title="seat1">
<img src="1.jpg" id="seat2" alt="" title="seat2">
<img src="1.jpg" id="seat3" alt="" title="seat3">
<br>
<input type="button" id="findseats" value="Определить свободные места">
Детализация задания:
Создать три функции:

  • функция инициализации мест initSeats(); (занято: alt=no либо свободно: alt=yes); запуск функции по загрузке страницы;
  • функция отображения состояния мест showSeatStatus(num); запускается по щелчку на изображении с сидением и выдает сообщение «свободно» или «занято»
  • функция поиска свободных мест findSeats(); выделяет изображения со свободными местами рамкой

По загрузке страницы должна запускаться функция, где происходит:

  • привязка функции findSeats() к событию onclick кнопки;
  • привязка событий onclick к изображениям кресел;
  • вызов функции инициализации кресел.
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
31
32
33
34
35
36
37
38
39

//инициализация мест
function initSeats() {
 ... .alt="yes";
 ... .alt="no";
 ...
 ...
}
 
// функция отображения состояния мест: занято или свободно
function showSeatStatus(num){
	if (...("seat"+num).alt=="yes") 
		{alert ("свободно")} 
	else 
		{alert ("занято")}
}
 
// Поиск свободных мест среди всех возможных
function findSeats() {
let i = 0;
// Проверяем, свободно ли текущее место 
for(i;i<=document.getElementsByTagName("img").length;i++)
	if (...) 
	{
	// Выделяем свободные кресла 
		... .style.border="5px #999 solid";
	}
}
 
window.onload = function() {
	//связываем функцию findSeats() с событием onclick при помощи ссылки.
	... .onclick=findSeats;
	//связываем события onclick изобр-й с запуском функции showSeatStatus()
	... .onclick = function(){showSeatStatus(0);}
	...
	...
	...
	//запускаем функцию инициализации мест
	...
};

Объект textarea в javascript

Свойства объекта:
name — соответствует атрибуту name тега textarea
value — соответствует текущему значению объекта textarea т.е. текущему содержимому области текста;
type — для объекта textarea всегда содержит значение "textarea"

Пример осуществления доступа к объекту textarea в javascript:

<form name="f1">
Ваше имя:<br>
<textarea name="yourName" id="t1"></textarea>
</form>
1
2
3
4
5

<script type="text/javascript">
document.getElementById('t1').value="Имя"; // 1 способ
document.f1.yourName.value="Имя"; // 2 способ
document.f1.elements[0].value="Имя"; // 3 способ
</script>

Первый вариант является наиболее предпочтительным.

Событие onfocus в javascript: получение фокуса

  • Событие onfocus происходит, когда элемент управления получает фокус, т.е. курсор устанавливается в объект.
Пример: Необходимо, чтобы содержимое текстового поля и поля для ввода (textarea) выделялось при получении этими элементами фокуса.

Выделение происходит при помощи метода select() самих объектов:
объект.select()

Выполнение:

Будем использовать служебное слово this:

…
function selectContents (Obj) { 
	Obj.select() ; 
}
…
<body>
<input type="text" size="30" onfocus="selectContents(this)"> 
<textarea rows="3" cols="50" onfocus="selectContents(this)"> 
</textarea>

В примере оба объекта (textarea и input) имеют событие onfocus, которое вызывает функцию selectContents(). В качестве параметра функции передается сам объект (на это указывает служебное слово this). В функции вызывается метод select для выделения объекта.

Задание js11_3. Необходимо реализовать выше описанный пример без использования функции (обработка события в качестве значения атрибута события)
Пример: создайте веб-страницу с тегом изображения в виде гиперссылки. По щелчку на гиперссылке (картинке) вызывать функцию открытия той же картинки (увеличенной) в отдельном окне
1
2
3
4
5
6
7

function displayPicture(){	
let myWin=window.open("","bigPic"); // open - метод создания и открытия нового окна
	myWin.document.open();
	myWin.focus(); // переносим фокус в новое окно
	myWin.document.write("<h1>Большое фото</h1><img src='Фото026.jpg'>"); // добавляем теги в новое окно
	myWin.document.close(); // закрываем окно
}
…
<a href="javascript: displayPicture()">
<img src="Фото026.jpg" width="300" alt="увеличить" />
</a>

Событие onblur в javascript: потеря фокуса

  • Событие onblur происходит при потере объектом фокуса. Т.е. когда курсор только что размещался на/в объекте, а теперь помещается на/в другой объект.
Пример: Создать функцию проверки заполнения полей (пустое ли), которая вызывается для любого поля при наступлении события onblur (вызывается функция с параметром)

Выполнение:

Скрипт:

1
2
3
4
5
6
7
8
9

function validateNonEmpty(inputField) {
	// Проверка на наличие текста
	if (inputField.value.length == 0) {
		// Сообщаем пользователю, что данные не введены
		alert("Заполните поле.");
		return false;
	}
return true;
}

HTML-код:

<form name="f1">
Ваше имя:<br>
<input type="text" id="t1" onblur="validateNonEmpty(this)">
<input type="text" id="t2" onblur="validateNonEmpty(this)">
<input type="text" id="t3" onblur="validateNonEmpty(this)">
<input type="text" id="t4" onblur="validateNonEmpty(this)">
</form>
Задание js11_4. Трансформируйте программу так, чтобы проверка заполнения всех текстовых полей формы производилась по щелчку на кнопке. Дополните код:
1
2
3
4
5

function checkAll() {
for(let i=1;i<=4;i++){
	...
	}
}
...
<input id="b1" type="button" onclick="checkAll()">

При выполнении задания имейте в виду, что при обращении к объектам через скрипт возможно использование такого имени объекта: document.getElementById('t'+i) — для объекта с идентификатором t1, где 1 заменяется на i.

Выполнение данного задания доступно на видео:
youTube

* Добавьте второй параметр функции для вывода номера незаполненного поля
Вопросы для самоконтроля:

  • Когда происходит событие onLoad?
  • Охарактеризуйте два способа обработки события onLoad.
  • Для чего используется тег textarea?
  • Когда происходят события onfocus и onblur?
Назад
К оглавлению
Далее к уроку 12

1 комментарий для “JavaScript урок11. Объектная модель документа (продолжение) и идентификация”

  1. в задании со стульями как понять функцию инициализации? Дайте еще одну подсказку,я уже неделю голову ломаю))

Обсуждение закрыто.