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

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

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

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

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