Как подключить файл js к html

Обновлено: 21.11.2024

JavaScript, также сокращенно JS, представляет собой язык программирования, используемый в веб-разработке. Являясь одной из основных технологий Интернета наряду с HTML и CSS, JavaScript используется для создания интерактивных веб-страниц и создания веб-приложений. Современные веб-браузеры, которые придерживаются общих стандартов отображения, поддерживают JavaScript через встроенные механизмы без необходимости в дополнительных подключаемых модулях.

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

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

Добавление JavaScript в документ HTML

Вы можете добавить код JavaScript в документ HTML, используя специальный тег HTML, который окружает код JavaScript.

Тег можно поместить в раздел вашего HTML или в раздел, в зависимости от того, когда вы хотите загрузить JavaScript.

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

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

Давайте рассмотрим следующий пустой документ HTML с заголовком браузера «Сегодняшняя дата»:

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

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

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

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

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

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

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

Небольшие сценарии или сценарии, которые выполняются только на одной странице, могут нормально работать в файле HTML, но для больших сценариев или сценариев, которые будут использоваться на многих страницах, это не очень эффективное решение, поскольку его включение может стать громоздким или трудно читать и понимать. В следующем разделе мы рассмотрим, как обрабатывать отдельный файл JavaScript в вашем HTML-документе.

Работа с отдельным файлом JavaScript

Для размещения более крупных сценариев или сценариев, которые будут использоваться на нескольких страницах, код JavaScript обычно размещается в одном или нескольких файлах js, на которые ссылаются в документах HTML, аналогично тому, как ссылаются на внешние ресурсы, такие как CSS.

Преимущества использования отдельного файла JavaScript включают:

• Разделение HTML-разметки и кода JavaScript для упрощения работы с ними.
• Отдельные файлы упрощают обслуживание
• Когда файлы JavaScript кэшируются, страницы загружаются быстрее

Чтобы продемонстрировать, как связать документ JavaScript с документом HTML, давайте создадим небольшой веб-проект. Он будет состоять из script.js в каталоге js/, style.css в каталоге css/ и основного файла index.html в корне проекта.

Мы можем начать с нашего предыдущего HTML-шаблона из раздела выше:

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

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

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

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

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

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

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

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

Заключение

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

Хотите узнать больше? Присоединяйтесь к сообществу DigitalOcean!

Присоединяйтесь к нашему сообществу DigitalOcean, насчитывающему более миллиона разработчиков, бесплатно! Получайте помощь и делитесь знаниями в нашем разделе "Вопросы и ответы", находите руководства и инструменты, которые помогут вам расти как разработчику и масштабировать свой проект или бизнес, а также подписывайтесь на интересующие вас темы.

Серия руководств: Как программировать на JavaScript

JavaScript – это высокоуровневый объектно-ориентированный динамический язык сценариев, популярный как инструмент для создания интерактивных веб-страниц.

В HTML код JavaScript вставляется между тегами .

Пример

В старых примерах JavaScript может использоваться атрибут типа: .
Атрибут type не требуется. JavaScript является языком сценариев по умолчанию в HTML.

Функции и события JavaScript

Функция JavaScript – это блок кода JavaScript, который может выполняться при "вызове".

Например, функцию можно вызвать, когда происходит событие, например, когда пользователь нажимает кнопку.

Вы узнаете гораздо больше о функциях и событиях в следующих главах.

JavaScript в или

Вы можете разместить любое количество скриптов в HTML-документе.

Сценарии можно размещать в разделе , или в разделе HTML-страницы, или в обоих случаях.

JavaScript в

В этом примере функция JavaScript размещена в разделе HTML-страницы.

Функция вызывается (вызывается) при нажатии кнопки:

Пример

Демонстрация JavaScript в Head

JavaScript в

В этом примере функция JavaScript размещена в разделе HTML-страницы.

Функция вызывается (вызывается) при нажатии кнопки:

Пример

Демонстрация JavaScript в теле