Подключение скриптов в HTML. Как JavaScript добавляет странице поведение?

подключение скриптов в html. как javascript добавляет странице поведение?

Для чего нужны скрипты

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

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

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

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

Подключение скрипта к странице

Для добавления скрипта к странице, HTML имеет специальный элемент <script>. Файл может храниться как на вашем сервере, так и скачиваться со стороннего ресурса. Место расположения скрипта указывается атрибутом src. В его значении должен содержаться абсолютный или относительный URL-адрес. Указание закрывающего тега </script> обязательно.

Обычно элементы <script> размещаются внутри <head>. Такой подход позволяет логически структурировать документы и отделять основную разметку от вспомогательной.

MIME-тип файла нужно задать явным образом, если он написан на языке программирования отличным от JavaScript. Для этого используется атрибут type. Например, при подключении VBScript атрибут должен содержать строку «text/vbscript».

Отметим, что программный код может быть выполнен и без подключения стороннего скрипта. Для этого необходимо убрать атрибут src, а код разместить между открывающим и закрывающим тегом «<script>программный код</script>».

Ниже приводится пример, в котором происходит подключение скрипта, расположенного в одной папке с HTML-страницей. Программный код приводится сразу за разметкой. Его нужно разместить в файле с именем list-exapmle.js. Скопируйте пример и посмотрите, как JavaScript динамически меняет содержимое страницы.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример подключения внешнего скрипта</title>
        <script src="list-example.js"></script>
    </head>
    <body>
        <input id="item-button" type="button" value="Добавить">
        <input id="item-text" type="text" placeholder="название товара">

        <h3>Список покупок:</h3>
        <ul id="container"></ul>
    </body>
</html>
document.addEventListener("DOMContentLoaded", function() {
    var button = document.getElementById('item-button');
    var list = document.getElementById('container');
    var text = document.getElementById('item-text');

    button.addEventListener('click', function (event) {
        var value = text.value.trim();
        text.value = '';

        if (value !== '') {
            var item = document.createElement('li');
            item.innerHTML = value;
            list.appendChild(item);
        }
    });
});
Пример использования скрипта для динамического списка покупок
Рис 1. Пример работы добавленного скрипта

Настройка загрузки скриптов

У элемента <script> имеется два дополнительных атрибута, существенно влияющих на тип загрузки и выполнения скрипта. Начинающим их различия могут показаться не существенными. Если в дальнейшем вы будете изучать наши курсы по JavaScript, то поймете роль этих атрибутов.

Оба работают как флаги. Им не нужно указывать никаких значений. Атрибут async заставит браузер загружать скрипты асинхронно и выполнять сразу же, не дожидаясь полной обработки страницы. Второй атрибут defer позволяет отложить выполнение скрипта, до тех пор, пока страница не будет загружена полностью.

Последние публикации