Это руководство поможет вам начать работу и сделать первые шаги с JavaScript, показав, как встроить код JavaScript в HTML-страницу.
Чтобы вставить JavaScript в HTML-страницу, вы используете элемент <script>. Существует два способа использования элемента <script> на HTML-странице:
- Встраиваемый код JavaScript прямо в HTML-страницу.
- Ссылка на внешний файл кода JavaScript.
Встроить код JavaScript в HTML-страницу
Размещение кода JavaScript непосредственно внутри элемента <script> не рекомендуется и должно использоваться только для проверки концепции или в целях тестирования.
Код JavaScript в элементе <script> интерпретируется сверху вниз. Например:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example</title>
<script>
alert('Hello, World!');
</script>
</head>
<body>
</body>
</html>В элементе <script> мы используем функцию alert() для отображения Hello, World! сообщение.
Включение через внешний файл JavaScript
Чтобы включить JavaScript из внешнего файла:
- Сначала создайте файл с расширением
.js, например,app.js, и поместите его в подпапкуjs. Обратите внимание, что помещать файл JavaScript в папкуjsне обязательно, однако это рекомендуется. - Затем используйте URL-адрес файла исходного кода JavasScript в атрибуте
srcэлемента <script>.
Ниже показано содержимое файла app.js:
alert('Hello, World!');Ниже показан файл helloworld.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript Hello World Example</title> <script src="js/app.js"></script> </head> <body> </body> </html>
Если вы запустите файл helloworld.html в веб-браузере, вы увидите предупреждение с надписью Hello, World!.
Обратите внимание, что вы можете загрузить файл JavaScript с удаленного сервера. Это позволяет вам использовать JavaScript из различных доменов, например, сети доставки контента(CDN), чтобы ускорить страницу.
Когда у вас есть несколько файлов JavaScript на странице, механизм JavaScript интерпретирует файлы в том порядке, в котором они появляются. Например:
<script src="js/service.js"></script> <script src="js/app.js"></script>
В этом примере движок JavaScript будет интерпретировать файлы service.js и app.js последовательно. Он завершает интерпретацию файла service.js перед интерпретацией файла app.js
Для страницы, содержащей множество внешних файлов JavaScript, на этапе рендеринга страницы отображается пустая страница.
Чтобы избежать этого, вы включаете файл JavaScript непосредственно перед </body>, как показано в этом примере:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript Hello World Example</title> </head> <body> <!-- end of page content here--> <script src="js/service.js"></script> <script src="js/app.js"></script> </body> </html>
Атрибуты async и defer
Чтобы изменить способ загрузки и выполнения файлов JavaScript браузером, вы используете один из двух атрибутов элемента async и defer.
Эти атрибуты действуют только для внешних файлов сценариев. Атрибут async указывает веб-браузеру выполнять файл JavaScript асинхронно. Атрибут async не гарантирует, что файлы сценариев будут выполняться в том порядке, в котором они появляются. Например:
<script async src="service.js"></script> <script async src="app.js"></script>
Файл app.js может выполняться до файла service.js. Поэтому необходимо убедиться, что между ними нет зависимости.
Атрибут defer запрашивает у веб-браузера выполнение файла сценария после того, как HTML-документ будет проанализирован.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript defer demonstration</title> <script defer src="defer-script.js"></script> </head> <body> </body> </html>
Даже если мы поместим элемент <script> в раздел <head>, скрипт будет ждать, пока браузер получит закрывающий тег <html>, чтобы начать выполнение.
Заключение
- Используйте элемент <script>, чтобы включить файл JavaScript в HTML-страницу.
- Атрибут
asyncэлемента <script> предписывает веб-браузеру параллельно получать файл JavaScript, а затем анализировать и выполнять его, как только файл JavaScript станет доступен. - Атрибут
deferэлемента <script> позволяет веб-браузеру выполнять файл JavaScript после того, как документ был проанализирован.