Сценарии или скрипты на стороне клиента относятся к типу компьютерных программ, которые выполняются веб-браузером на стороне пользователя. 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 будет отображаться только в том случае, если браузер пользователя не поддерживает скрипты или они отключены в браузере.

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.