Главная / Верстка сайта / Как добавить JavaScript в HTML

Как добавить JavaScript в HTML

JavaScript — это язык программирования, используемый в веб-разработке. Он используется для создания интерактивных веб-страниц и веб-приложений. Современные браузеры поддерживают JavaScript при помощи тега HTML script и не требуют установки дополнительных плагинов.

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

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

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

Можно добавить JavaScript-код в HTML-документ при помощи специального тега <script>. Он может быть помещен в раздел <head> HTML-документа, <body> или после него. В зависимости от того, когда необходимо загрузить JavaScript.

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

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

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

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

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

Начнем с того, что добавим скрипт между тегами <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>
<script>
let d = new Date();
alert("Today’s date is " + d);
</script>
</head>

<body>

</body>

</html>

Теперь при загрузке страницы с HTML script вы увидите сообщение, которое будет выглядеть так:

Как добавить JavaScript в HTML

Можно поэкспериментировать: вставить этот код внутри или наоборот вынести за пределы тега <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-документа в браузере веб-страница с script body HTML будет выглядеть следующим образом:

Как добавить JavaScript в HTML

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

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

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

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

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

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

Как добавить JavaScript в 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.jslet d = new Date();
document.body.innerHTML = "<h1>Today’s date is " + d + "</h1>"

Без script type text html ссылку на этот сценарий можно разместить <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.cssbody {
background-color: #0080ff;
}

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

Теперь можно добавить ссылку на CSS-файл:

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 в HTML

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

Перевод статьи “HOW TO ADD JAVASCRIPT TO HTML” был подготовлен дружной командой проекта Сайтостроение от А до Я.

О нас seoexpert

продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

Смотрите также

Создание цветной рамки вокруг текста с помощью HTML и CSS

Рамка на HTML-страницах, созданная с помощью border color, помогает привлечь внимание к тексту или выделить ...