Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
innerText и innerHTML Свойство onload - Обработчик событий Метод setAttribute

Свойство onload объекта Window - Функция обратного вызова - Обработчик событий

JavaScript - Практическое применение

Урок №9 Свойство onload - Обработчик событий

Количество просмотров: 507

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

При помощи свойства onload объекта window и функции init мы дадим команду браузеру о выполнении javascript-кода только после полной загрузки страницы.

При этом javascript код будет расположен в начале страницы.

JavaScript-код в начале или в конце страницы...

JavaScript-код в начале или в конце страницы...

Здесь мы говорили о том, что строку вызова скрипта javascript следует располагать в конце веб-документа, чтобы javascript-код включался в работу после полной загрузки страницы и построения DOM-дерева.

Рассмотрим пример...

<head>

...

...

<script type="text/javascript">

var planet = document.getElementById("sun");
planet.innerHTML = "Sun is yellow planet";

</script>

</head>

 

<body>

<h1>Our Planet</h1>

<p id="earth">Green Planet</p>

<h1>Red Planet</h1>

<p id="mars">Mars is red planet</p>

<h1>Yellow Planet</h1>

<p id="sun">Sun is ... </p>

</body>

Пример №1 - Javascript-код расположен в начале страницы

Our Planet

Green Planet

Red Planet

Mars is red planet

Yellow Planet

Sun is ...

Комментарии к примеру...

  • При помощи метода getElementById мы получаем доступ к элементу страницы с индексом id="sun", то есть к последнему параграфу - тегу p.
  • Результат заносим в переменную planet. Напомним, что в переменную заносится ссылка на указанный элемент страницы, с которым через переменную planet можно работать как с объектом.
  • Далее при помощи свойства innerHTML «объекта» planet мы собираемся изменить содержимое выбранного элемента (то есть изменить текст абзаца с индексом id="sun").

    Но этого сделать нельзя, так как javascript-код расположен в начале страницы - в теге head. И если заглянуть в Веб-консоль браузера (в Firefox это путь Инструменты - Веб-разработка - Веб-консоль или комбинация Ctrl+Shift+K), то мы увидим: TypeError: planet is null.

    Вспомним, о чем говорилось в предыдущем уроке: javascript-код следует располагать в конце веб-документа. Но речь на этой странице не об этом....

    Дело в том, что в javascript есть возможность заставить работать код, расположенный в начале страницы. Но при условии ее полной загрузки. Читайте об этом далее...

Свойство onload объекта Window - Функция init

Свойство onload объекта Window - Функция init

Итак, для того, чтобы javascript-код, расположенный в начале страницы, выполнялся, необходимо поместить его в функцию init (не обязательное имя функции), которая в свою очередь присваивается свойству onload объекта Window.

Стоит отметить: само по себе название функции init ничего не значит (оно может быть любым). Просто оно используется в таких случаях по традиции.

<head>

...

...

<script type="text/javascript">

function init(){

var planet = document.getElementById("sun");
planet.innerHTML = "Sun is yellow planet";

}

window.onload = init;

</script>

</head>

<body>

<h1>Our Planet</h1>

<p id="earth">Green Planet</p>

<h1>Red Planet</h1>

<p id="mars">Mars is red planet</p>

<h1>Yellow Planet</h1>

<p id="sun">Sun is ... </p>

</body>

Пример №2 - Свойство onload объекта Window - Функция init

Our Planet

Green Planet

Red Planet

Mars is red planet

Yellow Planet

Sun is yellow planet

Комментарии к примеру...

  • Здесь javascript-код расположенный в начале страницы, сначала поместили в функцию init.
  • Затем эту функцию связали со свойством onload объекта Window. Заметьте при этом функция init указывается без круглых скобок, так как мы не вызываем ее, а устанавливаем связь функции с объектом.

Теперь браузер сначала загружает всю веб-страницу, строит DOM-дерево, и только после этого включается в работу javascript-код расположенный в начале страницы.

Функция обратного вызова или обработчик событий

Функция обратного вызова или обработчик событий

Использование функции onload  - это стандартный прием в программировании. Он применяется, когда  необходимо сначала узнать о каком-либо событии, а потом выполнить код.

Этот прием называется функцией обратного вызова или обработчиком событий.

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

После загрузки страницы выполняется javascript-код.

О том, что страница полностью загружена, знает  браузер, а точнее объект Window. Так вот работа функции обратного вызова основывается на том, что она передается объекту, который знает о событии.

Как только событие возникает, объект вызывает переданную ему функцию.

Итак, в нашем случае:

- загружается веб-страница, т.е. происходит событие;

- свойство onload объекта Window вызывает функцию init;

- выполняется javascript-код, содержащийся в функции.

Главная Изучаем JavaScript Свойство onload - Обработчик событий Метод setAttribute

Ваши комментарии к уроку:

Комментариев нет...

Добавить комментарий:

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
JavaScript
Частота просмотра уроков
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru