Запуск Кода JavaScript

Рубрика: JavaScript 101

Код JavaScript может быть запущен несколькими способами - из внешнего файла, из втроенного фрагмента в разделе head страницы и прямо из обработчика события HTML элемента. Рассмотрим все эти способы более подробно.

Внешний код

Первая и рекомендуемая опция - записать код во внешнем файле (с расширением .js ), который может затем быть включен в нашу веб-страницу, используя HTML тег <script> и указав в атрибуте src расположение файла. Наличие JavaScript в отдельном файле уменьшит дублирование кода, если Вы будете использовать его повторно на другой странице. Это также позволит браузеру кэшировать файл на компьютере удаленного клиента, уменьшая время загрузки страницы.

<!-- Код записан в .js файле и включен
	через атрибут src тега script. -->
<script src="/path/to/example.js"></script>

Встроенный код

Вторая опция - встроить код непосредственно в веб страницу. Это также достигается, используя HTML теги <script>,но вместо указания файла в атрибуте src, код помещается между тегами. Хотя существуют случаи, когда уместно использовать эту опцию, в большинстве случаев лучше всего хранить наш код во внешнем файле, как описано выше.

<!-- Встраивание кода прямо в веб страницу,
	используя теги script. -->
<script>
alert( "Привет Мир!" );
</script>

Атрибуты

Последняя опция - использовать атрибуты обработчика событий элементов HTML. Этот метод категорически не рекомендуется:

Пример

<a href="javascript:alert( 'Привер Мир' );">
Кликни Меня!</a>
<button onClick="alert( 'Пока Мир' );">
Кликни Меня Тоже!</button>

Попробуйте Сами »

Расположение

Расположение предыдущих двух опций важно и может изменяться в зависимости от ситуации. Если Вы включаете JavaScript, который не получает доступ к элементам на странице, можно безопасно поместить сценарий перед заключительным HTML тегом<head>. Однако, если код будет взаимодействовать с элементами на странице, необходимо удостовериться, что эти элементы уже существуют во время, когда сценарий выполняется. Эта распространенная ошибка может быть рассмотрена на примере ниже. Сценарий для того, чтобы обнаружить элемент с ID hello-world будет выполняться прежде, чем элемент определяется в документе.

Пример

<!doctype html>
<html>
<head>
    <script>
    // Попытка обратиться к элементу слишком рано
     приведет к непредсказуемым результатам.
    var title = document.getElementById( "hello-world" );
    console.log( title );
    </script>
</head>
<body>

<h1 id="hello-world">Привет Мир</h1>

</body>
</html>

Попробуйте Сами »

Выходом из положения является расположение сценариев в конце страницы до заключительного HTML тега <body>. Это гарантирует, что элементы уже определены, когда сценарий выполняется:

Пример

<!doctype html>
<html>
<head></head>
<body>

<h1 id="hello-world">Привет Мир</h1>
<script>
// Помещение скрипта в конец страницы гарантирует, что элемент существует.
var title = document.getElementById( "hello-world" );
console.log( title );
</script>

</body>
</html>

Попробуйте Сами »

Далее: Сводка Способов Ссылки на Функцию jQuery

Смотрите также

Комментарии

Написать