Как добавить JavaScript в HTML
Введение
JavaScript, также сокращенно JS, — это язык программирования, используемый в веб-разработке. Являясь одной из основных технологий Интернета наряду с HTML и CSS, JavaScript используется для создания интерактивных веб-страниц и создания веб-приложений. Современные веб-браузеры, которые придерживаются общих стандартов отображения, поддерживают JavaScript через встроенные механизмы без необходимости использования дополнительных подключаемых модулей.
При работе с файлами для Интернета необходимо загружать и запускать JavaScript вместе с разметкой HTML. Это можно сделать либо внутри HTML-документа, либо в отдельном файле, который браузер загрузит вместе с HTML-документом.
В этом руководстве будет рассказано, как включить JavaScript в ваши веб-файлы, как встроенные в HTML-документ, так и в виде отдельного файла.
Добавление JavaScript в документ HTML
Вы можете добавить код JavaScript в документ HTML, используя специальный HTML-тег <script>, который окружает код JavaScript.
Тег <script> можно поместить в раздел <head> вашего HTML-кода или в раздел <body>, в зависимости от того, когда вы хотите, чтобы JavaScript загружался.
Как правило, код JavaScript может размещаться внутри раздела документа <head>, чтобы он не выделялся из основного содержимого вашего HTML-документа.
Однако, если ваш скрипт должен запускаться в определенной точке макета страницы — например, при использовании document.write для создания контента — вы должны поместить его в то место, где он должен вызываться, обычно в пределах Раздел <body>.
Давайте рассмотрим следующий пустой HTML-документ с заголовком браузера Сегодняшняя дата:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
</body>
</html>
Сейчас этот файл содержит только HTML-разметку. Допустим, мы хотели бы добавить в документ следующий код JavaScript:
let d = new Date();
alert("Today's date is " + d);
Это позволит веб-странице отображать предупреждение с текущей датой независимо от того, когда пользователь загружает сайт.
Для этого мы добавим тег <script> вместе с некоторым кодом JavaScript в файл HTML.
Для начала мы добавим код JavaScript между тегами <head>, сигнализируя браузеру о необходимости запуска сценария JavaScript перед загрузкой остальной части страницы. Мы можем добавить JavaScript под тегами <title>, например, как показано ниже:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
<script>
let d = new Date();
alert("Today's date is " + d);
</script>
</head>
<body>
</body>
</html>
Как только вы загрузите страницу, вы получите предупреждение, подобное этому:
Если бы мы изменяли то, что отображается в теле HTML, нам нужно было бы реализовать это после раздела <head>, чтобы он отображался на странице, как в примере ниже:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
<script>
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
</script>
</body>
</html>
Вывод для указанного выше HTML-документа, загруженного через веб-браузер, будет выглядеть следующим образом:
Небольшие сценарии или сценарии, которые выполняются только на одной странице, могут нормально работать в HTML-файле, но для больших сценариев или сценариев, которые будут использоваться на многих страницах, это не очень эффективное решение, поскольку его включение может стать громоздким или трудным для чтения. и понять. В следующем разделе мы рассмотрим, как обрабатывать отдельный файл JavaScript в вашем HTML-документе.
Работа с отдельным файлом JavaScript
Чтобы разместить более крупные сценарии или сценарии, которые будут использоваться на нескольких страницах, код JavaScript обычно находится в одном или нескольких файлах js, на которые ссылаются в документах HTML, аналогично тому, как ссылаются на внешние ресурсы, такие как CSS.
Преимущества использования отдельного файла JavaScript включают в себя:
- Разделение HTML-разметки и кода JavaScript для упрощения работы с ними.
- Отдельные файлы упрощают обслуживание
- Когда файлы JavaScript кэшируются, страницы загружаются быстрее
Чтобы продемонстрировать, как связать документ JavaScript с документом HTML, давайте создадим небольшой веб-проект. Он будет состоять из script.js в каталоге js/, style.css в каталоге css/, и основной index.html в корне проекта.
project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html
Мы можем начать с нашего предыдущего HTML-шаблона из раздела выше:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
</body>
</html>
Теперь давайте переместим наш код JavaScript, который будет отображать дату в виде заголовка <h1>, в файл script.js:
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
Мы можем добавить ссылку на этот скрипт в раздел <body> со следующей строкой кода:
<script src="js/script.js"></script>
Тег <script> указывает на файл script.js в каталоге js/ нашего веб-проекта.
Давайте рассмотрим эту строку в контексте нашего HTML-файла, в данном случае в разделе <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>
Наконец, давайте также отредактируем файл style.css, добавив цвет фона и стиль к заголовку <h1>:
body {
background-color: #0080ff;
}
h1 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
Мы можем сослаться на этот файл CSS в разделе <head> нашего HTML-документа:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>
Теперь, когда у нас есть JavaScript и CSS, мы можем загрузить страницу index.html в выбранный нами веб-браузер. Мы должны увидеть страницу, похожую на следующую:
Теперь, когда мы поместили JavaScript в файл, мы можем вызывать его таким же образом с дополнительных веб-страниц и обновлять их все в одном месте.
Заключение
В этом руководстве рассказывается, как включить JavaScript в ваши веб-файлы, как встроенные в HTML-документ, так и в виде отдельного файла .js.
Отсюда вы можете узнать, как работать с тем, как писать комментарии в JavaScript.