Далее на странице...
Здесь Вы познакомитесь с понятием функция обратного вызова или обработчик событий.
При помощи свойства onload объекта window и функции init браузеру будет дана команда о выполнении 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
Итак, для того, чтобы 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;
- выполняется JavasScript-код, содержащийся в функции.
