«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


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

При помощи свойства 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-код, содержащийся в функции.

Отзывы и комментарии:

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

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


JavaScript и Web
Последние заметки
Популярные заметки