Как добавить 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
<!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>тегами, например, как показано ниже:

index.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>
    <script>
        let d = new Date();
        alert("Today's date is " + d);
    </script>
</head>

<body>

</body>



</html>

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

Пример предупреждения JavaScript

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

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

index.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>

  <script>
      let d = new Date();
      document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
  </script>

</body>

</html>

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

Пример даты JavaScript

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

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>раздела:

index.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>

<script src="js/script.js"></script>

</html>

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

style.css
body {
    background-color: #0080ff;
}

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

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

index.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>

</body>

<script src="js/script.js"></script>

</html>

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

Дата JavaScript с примером CSS

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

Заключение

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

Здесь вы можете узнать, как работать с JavaScript Developer Console и как писать комментарии в JavaScript .

 

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *