TOC

Как добавить 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> или после закрывающего тега</body>, в зависимости от того, когда вы хотите, чтобы JavaScript нагрузка.

Как правило, код JavaScript может находиться внутри раздела документа<head>, чтобы они содержались вне основного содержимого вашего HTML-документа.

Однако, если ваш сценарий должен запускаться в определенной точке макета страницы - например, при использованииdocument.write для создания контента - вы должны поместить его в точку, где он должен быть вызван, обычно в пределах<body> раздел.

Рассмотрим следующий пустой документ HTML с заголовком браузераToday's Date:

index.html





    
    
    Today's Date

Сейчас этот файл содержит только HTML-разметку. Допустим, мы хотели бы добавить следующий код JavaScript в документ: 

let d = new Date();
alert("Today's date is " + d);

Это позволит веб-странице отображать предупреждение с текущей датой независимо от того, когда пользователь загружает сайт.

Для этого мы добавим тег<script> вместе с некоторым кодом JavaScript в файл HTML.

Для начала мы добавим код JavaScript между тегами<head>, сигнализирующий браузеру о необходимости запуска сценария JavaScript перед загрузкой на остальной странице. Мы можем добавить код JavaScript под тегами<title>, например, как показано ниже:

index.html





    
    
    Today's Date

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

JavaScript Alert Example

Вы также можете поэкспериментировать с размещением скрипта внутри или вне тегов<body> и перезагрузить страницу. Поскольку это не надежный HTML-документ, вы, вероятно, не заметите никакой разницы в загрузке страницы.

Если бы мы изменяли то, что показано в теле HTML, нам нужно было бы реализовать это после раздела<head>, чтобы он отображался на странице, как в примере ниже:

index.html





    
    
    Today's Date

Вывод вышеупомянутого HTML-документа, загруженного через веб-браузер, будет выглядеть примерно так:

JavaScript Date Example

Небольшие сценарии, которые выполняются только на одной странице, могут нормально работать в файле 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-шаблона из раздела выше:

index.html





    
    
    Today's Date

Теперь переместим наш код JavaScript, который будет отображать дату в виде заголовка<h1>, в файлscript.js:

script.js

let d = new Date();
document.body.innerHTML = "
Today's date is " + d + "
"

Мы можем добавить ссылку на этот скрипт в раздел<body> или ниже, с помощью следующей строки кода:

Тег<script> указывает на файлscript.js в каталогеjs/ нашего веб-проекта.

Давайте посмотрим на эту строку в контексте нашего HTML-файла, в данном случае под секцией<body>:

index.html





    
    
    Today's Date

Наконец, давайте также отредактируем файлstyle.css, добавив цвет и стиль фона в заголовок<h1>:

style.css

body {
    background-color: #0080ff;
}

h1 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

Мы можем ссылаться на этот файл CSS в разделе<head> нашего HTML-документа:

index.html





    
    
    Today's Date

Теперь, используя JavaScript и CSS, мы можем загрузить страницуindex.html в веб-браузер по нашему выбору. Мы должны увидеть страницу, похожую на следующую:

JavaScript Date with CSS Example

Теперь, когда мы поместили JavaScript в файл, мы можем вызывать его таким же образом с дополнительных веб-страниц и обновлять их все в одном месте.

Заключение

В этом руководстве было рассмотрено, как включить JavaScript в ваши веб-файлы, как встроенные в документ HTML, так и в виде отдельного файла.js.

Отсюда вы можете узнать, как работать сJavaScript Developer Console иhow to write comments in JavaScript.

Related