3 способа запуска функции или кода Javascript (js) при загрузке страницы.

Опубликовано: 06.05.2017

видео 3 способа запуска функции или кода Javascript (js) при загрузке страницы.

Из HTML в WordPress для новичков (Часть 2). Подключаем CSS и JavaScript

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



Они пытаются взаимодействовать с HTML-элементами на странице, которые находятся ниже по коду, чем сам скрипт. Соответственно, скрипт уже подгрузился, а элемент, с которым нужно будет взаимодействовать, еще нет. По этой причине ничего работать не будет.

Особенность языка Javascript в том, что его код выполняется последовательно, строка за строкой, как они написаны в исходном коде.


Основы программирования. Изучаем анонимные функции и JavaScript

Вот пример:

<!doctype html> <html> <head> <style type="text/css"> #block {width:100px; height:100px; border:1px solid #ccc;} </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script>    $("#block").css("background-color", "yellow"); </script> <meta charset="utf-8"> <title>Документ без названия</title> </head> <body>  <div id="block"></div> </body> </html>

К элементу с id #block не будет применяться правило css (background-color:yellow), т.к. строка

   $("#block").css("background-color", "yellow");

Будет выполняться раньше, чем загрузиться html-строка:

<div id="block"></div>

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

Я хочу рассказать о трех способах, как это можно сделать.

1 способ. С использованием библиотеки Jquery.

Чаще всего сам им пользуюсь, наиболее простое и удобное решение, но требует подключения библиотеки Jquery.

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

<!doctype html> <html> <head> <style type="text/css"> #block {width:100px; height:100px; border:1px solid #ccc;} </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $(document).ready ( function(){ $("#block").css("background-color", "yellow"); }); </script> <meta charset="utf-8"> <title>Документ без названия</title> </head> <body> <div id="block"></div> </body> </html>


Понравилась статья? Вы можете оставить отзыв или подписаться на RSS, чтобы автоматически получать информацию о новых статьях.

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

Ваш отзыв

Деление на параграфы происходит автоматически, адрес электронной почты никогда не будет опубликован, допустимый HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*

*