Сценарии или скрипты на стороне клиента относятся к типу компьютерных программ, которые выполняются веб-браузером на стороне пользователя. JavaScript (Js) — самый популярный язык скриптов на стороне клиента в сети.
Элемент <script> используется для встраивания ссылки на JavaScript в HTML-документе, чтобы добавить интерактивность веб-страницам.
Вот наиболее распространенные применения JavaScript: проверка формы (валидация), генерация предупреждающих сообщений, создание галереи изображений, слайдера, показа скрытого содержимого через попапы, манипулирование DOM и многое другое.
Добавление JavaScript на HTML-страницы
JavaScript может быть либо встроен непосредственно в HTML-страницу, либо помещен во внешний файл и указан внутри HTML-страницы. Оба метода используют элемент <script>.
Встраивание JavaScript
Чтобы встроить JavaScript в HTML-файл, просто добавьте код в качестве содержимого элемента <script>.
JavaScript в следующем примере записывает строку текста на веб-страницу.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedding JavaScript</title>
</head>
<body>
<div id="greet"></div>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
</body>
</html>В идеале скрипты должны размещаться внизу страницы, перед закрывающим тегом </body>, потому что когда браузер встречает скрипт, он приостанавливает рендеринг остальной части страницы, пока не проанализирует его, а это может существенно повлиять на производительность сайта.
Вставка внешнего файла JavaScript
Вы также можете поместить свой JavaScript код в отдельный файл (с расширением .js) и вызвать его файл в HTML-документе с помощью атрибута src тега <script>.
Это полезно, если вы хотите, чтобы один и тот же скрипт был доступен для нескольких документов. Это избавляет вас от повторения одной и той же задачи снова и снова и делает ваш сайт намного проще в обслуживании.
В следующем примере показано, как связать внешний файл Js с HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Linking External JavaScript</title>
</head>
<body>
<div id="greet"></div>
<script src="hello.js"></script>
</body>
</html>Если указан атрибут src, элемент <script> должен быть пустым. Это просто означает, что вы не можете использовать один и тот же элемент <script> как для встраивания JavaScript, так и для ссылки на внешний JavaScript-файл в HTML-документе.
Файлы JavaScript — это обычные текстовые файлы с расширением .js. Внутри внешних js-файлов не должно быть тегов <script> … </script>, как во встроенных.
HTML-элемент <noscript>
Элемент <noscript> используется для предоставления альтернативного контента пользователям, которые либо отключили JavaScript в своем браузере, либо браузер не поддерживает скрипты на стороне клиента.
Этот элемент может содержать любые HTML-элементы, кроме тега <script>. Рассмотрим на примере:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Noscript Demo</title>
</head>
<body>
<div id="greet"></div>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
<noscript>
<p>К сожалению этот сайт требует браузер с поддержкой JavaScript.</p>
</noscript>
</body>
</html>Содержимое внутри элемента noscript будет отображаться только в том случае, если браузер пользователя не поддерживает скрипты или они отключены в браузере.
