Как подключать скрипты для сайта – JavaScript в HTML

Как подключать скрипты для сайта – JavaScript в HTML

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

Если вы хотите отобразить статический контент, например, набор изображений, тогда HTML выполнит для вас эту работу. Однако, статические страницы медленно, но уверенно становятся вчерашним днём. Большинство контента сегодня интерактивное и включает динамические слайд-шоу, формы и меню. Они расширяют восприятие пользователя и добавляют динамичности сайту. Это достигается использованием скриптовых языков и JavaScript – один из самых известных в этом отношении. Он позволяет разработчикам делать сайты, взаимодействующие с пользователем. Хотя, есть много других доступных языков, но не один из них не достиг такой популярности, как JavaScript. Для раскрытия огромного потенциала этого языка, его используют совместно с HTML.

Преимущества JavaScript

JavaScript вначале назывался LiveScript. Но, так как на тот момент Java была у всех на устах (по всему миру), Netscape решил переименовать его в JavaScript. Дата его первого появления – 1995 как часть Netscape 2.0. Некоторые самые выдающиеся преимущества JavaScript опишем ниже.

Минимизация взаимодействия с сервером

Хорошо известный факт, что если вы хотите оптимизировать производительность своего сайта, лучший путь – это снизить взаимодействие с сервером. JavaScript тут помогает проверкой корректности ввода пользователем на стороне клиента. Запрос серверу отправляется только тогда, когда начальные проверки пройдены. Как результат, использование ресурсов и количество запросов к серверу значительно уменьшается.

Более богатый интерфейс, ориентированный на удобство пользователя

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

Молниеносный отклик пользователю

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

Лёгкая трассировка

JavaScript – это интерпретируемый язык, что значит, что написанный код выполняется построчно. Если возникла ошибка, вы будете точно знать номер строки, в которой возникла проблема.

Вставка JavaScript в HTML

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

Вставка JavaScript непосредственно в HTML-файл

Первый способ добавить JavaScript в HTML – прямой. Вы можете сделать это путём использования тэгов <script></script>, которые должны обрамлять весь код JS, который вы пишете. JS код может быть вставлен:

  • между тэгами <head>
  • между тегами <body>

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

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>JAVASCRIPT IS USUALLY PLACED HERE</script>
<title>Time right now is: </title>
</head>
<body>
<script>JAVASCRIPT CAN ALSO GO HERE</script>
</body>
</html>

В таком виде код, представленный выше не содержит JavaScript и поэтому не будет показывать текущее время. Мы можем добавить код, чтобы убедится верное ли отображается время:

var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());

Заключим этот код в тэги <script> и </script> и поставим его в заголовочной части кода HTML, чтобы быть уверенным в том, что независимо от того, загрузилась ли страница полностью, сообщение будет показывать текущее время для пользователя. Так файл HTML будет выглядеть после добавления кода:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now is: </title>
<script>
var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
</script>
</head>
<body>
</body>
</html>

Если же вы хотите расположить этот код в теле, вам нужно включить его внутри тэгов <body> HTML страницы. Вот так будет выглядеть код в этом случае:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now is: </title>
</head>
<body>
<script>
let d = new Date();
document.body.innerHTML = "<h1>Time right now is:  " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()
"</h1>"
</script>
</body>
</html>

А вот результат:

Пример того, как подключать скрипты для сайта - javascript в html

Вставка JavaScript в HTML из отдельного файла

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

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

Ссылку на файл JavaScript внутри файла HTML можно сделать так:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now:</title>
</head>
<body>
</body>
<script src="js/myscript.js"></script>
</html>

Содержимое файла myscript.js будет:

let d = new Date();
document.body.innerHTML = "<h1>Time right now is:  " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()</h1>"

Примечание: Здесь предполагается, что файл myscript.js находится в каталоге js, который находится в том же каталоге, что и файл HTML.

Пример кода JavaScript для проверки адреса email

JavaScript позволяет вашему приложению осуществить проверку ввода данных на стороне пользователя. Один из параметров, который часто требует проверки – это email адрес. Эта функция JavaScript может помочь вам с проверкой введённого адреса email перед отправкой данных формы на сервер:

function validateEmailAddress(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
$("#result").text("");
var emailaddress = $("#email").val();
if (validateEmailAddress(emailaddress)) {
$("#result").text(emailaddress + " is valid :)");
$("#result").css("color", "green");
} else {
$("#result").text(emailaddress + " is not correct, please retry:(");
$("#result").css("color", "red");
}
return false;
}
$("#validate").bind("click", validate);

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

<form>
<p>Enter an email address:</p>
<input id='email'>
<button type='submit' id='validate'>Validate!</button>
</form>
<h2 id='result'></h2>

Вот результат, который вы получите после соединения всех компонентов вместе в файле HTML:

Пример того, как подключать скрипты для сайта - javascript в html - проверка email на правильность ввода - 1

И если проверка не прошла, результат будет иной:

Пример того, как подключать скрипты для сайта - javascript в html - проверка email на правильность ввода - 2

Поздравляем! Мы рассмотрели подключение JavaScript в HTML на нескольких простых примерах.

Заключение

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

Author
Автор

Elena B.

Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.