Запуск Кода JavaScript
Код 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
будет выполняться прежде, чем элемент определяется в документе.
Пример
<html>
<head>
<script>
// Попытка обратиться к элементу слишком рано
приведет к непредсказуемым результатам.
var title = document.getElementById( "hello-world" );
console.log( title );
</script>
</head>
<body>
<h1 id="hello-world">Привет Мир</h1>
</body>
</html>
Попробуйте Сами »
Выходом из положения является расположение сценариев в конце страницы до заключительного HTML тега <body>
. Это гарантирует, что элементы уже определены, когда сценарий выполняется:
Пример
<html>
<head></head>
<body>
<h1 id="hello-world">Привет Мир</h1>
<script>
// Помещение скрипта в конец страницы гарантирует, что элемент существует.
var title = document.getElementById( "hello-world" );
console.log( title );
</script>
</body>
</html>
Попробуйте Сами »