Добавление кода JavaScript в HTML
JavaScript (JS) – это язык программирования, используемый в веб-разработке. Наряду с HTML и CSS JavaScript является одной из основных технологий и используется для создания интерактивных веб-страниц и приложений. Современные веб-браузеры, которые придерживаются базовых стандартов отображения, поддерживают JavaScript через встроенные модули и не требуют дополнительных плагинов.
Создавая файлы приложения, JavaScript необходимо загружать и запускать вместе с разметкой HTML. Это можно сделать либо внутри HTML-документа, либо в отдельном файле, который браузер загрузит вместе с HTML-документом.
Данный манул научит внедрять JavaScript в HTML-документы и отдельные файлы программы.
Добавление JavaScript в HTML-документ
Чтобы вставить JavaScript в HTML-документ, используйте специальный тег , который охватывает код JavaScript.
Тег можно вставить в раздел и в
или после закрывающего тега в зависимости от того, когда нужно загрузить JavaScript.Как правило, код JavaScript размещается внутри раздела , что позволяет отделить его от основного содержимого документа HTML.
Однако если скрипт должен запускаться в определенной точке разметки страницы, его нужно размещать именно в этой точке. Обычно она находится внутри раздела .
Рассмотрим следующий HTML-документ с заголовком Today’s Date.
На данный момент этот файл содержит только разметку HTML. Предположим, в документ нужно добавить следующий код JavaScript:
let d = new Date();
alert(«Today’s date is » + d);
Этот код позволит веб-странице отображать сообщение с текущей датой независимо от того, когда пользователь загружает сайт.
Для этого нужно добавить тег и поместить в него код JavaScript.
Добавьте код JavaScript в раздел . В этом случае браузер будет обрабатывать JavaScript прежде остального содержимого страницы. Добавьте следующий код JavaScript в теги .
Загрузите страницу. На ней появится следующее предупреждение:
Today’s date is Thu Jun 29 2017 10:46:47 GMT-0400 (EDT)
Попробуйте добавить этот код в раздел и вынести его за этот раздел. Поскольку этот HTML-документ довольно прост, это не особо повлияет на отображение страницы.
Чтобы дата отображалась не в отдельном предупреждении, а прямо на странице, нужно добавить скрипт в раздел .
Загрузите эту страницу в браузере. Теперь дата будет указана прямо в теле страницы.
Today’s date is Thu Jun 29 2017 14:04:45 GMT-0400 (EDT)
Небольшие скрипты и скрипты для одной страницы будут хорошо работать внутри HTML-документа. Но объемные скрипты, предназначенные для нескольких страниц, помещать в документ не очень эффективно. Такие скрипты будут лучше обрабатываться в отдельных файлах.
Отдельные файлы JavaScript
Большие скрипты JavaScript помещают в специальные файлы js, а затем ссылаются на них внутри HTML-документа. Подобный механизм используется в CSS.
Преимущества такого подхода:
- Разметку HTML и скрипты JavaScript проще читать по отдельности.
- Такой код проще поддерживать.
- Если JavaScript кэшируется, страницы будут быстрее загружаться.
Чтобы научиться связывать файлы JavaScript с HTML, создайте небольшой тестовый проект. Он будет состоять из таких файлов:
- script.js в каталоге js/,
- style.css в каталоге css/,
- главный файл index.html в корневом каталоге проекта.
project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html
Начать можно с файла index.html и шаблона, который мы рассмотрели в предыдущем разделе.
Затем перейдите к файлу script.js, в котором хранится скрипт JavaScript. Он будет отображать заголовок .
let d = new Date();
document.body.innerHTML = «
Today’s date is » + d + «
«
Добавьте ссылку на этот скрипт в раздел или под ним:
Тег указывает на скрипт script.js в каталоге js/.
Теперь главный документ index.html будет выглядеть так:
Теперь отредактируйте файл style.css и укажите в нем цвет фона и стиль заголовка .
body background-color: #0080ff;
>
h1 color: #fff;
font-family: Arial, Helvetica, sans-serif;
>
После этого нужно сослаться на файл CSS в разделе HTML-документа index.html:
Попробуйте загрузить эту страницу в браузере. Она будет выглядеть так:
Today’s date is Thu Jun 29 2017 14:08:55 GMT-0400 (EDT)
На этот файл JavaScript могут ссылаться и другие HTML-документы.
Заключение
Теперь вы умеете внедрять код JavaScript в HTML-документы, создавать специальные файлы для скриптов JavaScript и ссылаться на них.
Читайте также:
Подключение JavaScript к HTML
Осваивайте профессию, начните зарабатывать, а платите через год!
Курсы Python Акция! Бесплатно!
Станьте хакером на Python за 3 дня
Веб-вёрстка. CSS, HTML и JavaScript
Станьте веб-разработчиком с нуля
В этой главе мы займемся размещением сценариев в HTML-документе, чтобы иметь возможность использовать их для оперативной модификации HTML-документа. Для вставки JavaScript-кoдa в НТМL-страницу обычно используют элемент .
Первая программа
Чтобы ваша первая пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно внедрить в НТМL-документ.
Сценарии внедряются в HTML-документ различными стандартными способами:
- поместить код непосредственно в атрибут события HTML-элемента;
- поместить код между открывающим и закрывающим тегами ;
- поместить все ваши скрипты во внешний файл (с расширением .js), а затем связать его с документом HTML.
JavaScript в элементе script
Самый простой способ внедрения JavaScript в HTML-документ – использование тега . Теги часто помещают в элемент , и ранее этот способ считался чуть ли не обязательным. Однако в наши дни теги используются как в элементе , так и в теле веб-страниц.
Таким образом, на одной веб-странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Как правило, выполнение сценариев браузерами происходит по мере их загрузки. Браузер читает HTML-документ сверху вниз и, когда он встречает тег , рассматривает текст программы как сценарий и выполняет его. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе .
Обратите внимание: мы указали атрибут language тега , указывающий язык программирования, на котором написан сценарий. Значение атрибута language по умолчанию – JavaScript, поэтому, если вы используете скрипты на языке JavaScript, то вы можете не указывать атрибут language .
JavaScript в атрибутах событий HTML-элементов
Вышеприведенный сценарий был выполнен при открытии страницы и вывел строку: «Привет, мир!». Однако не всегда нужно, чтобы выполнение сценария начиналось сразу при открытии страницы. Чаще всего требуется, чтобы программа запускалась при определенном событии, например при нажатии какой-то кнопки.
В следующем примере функция JavaScript помещается в раздел HTML-документа. Вот пример HTML-элемента с атрибутом события, обеспечивающим реакцию на щелчки мышью. При нажатии кнопки генерируется событие onclick.
Внешний JavaScript
Если JavaScript-кода много – его выносят в отдельный файл, который, как правило, имеет расширение .js .
Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут src (source) тега . Его значением должен быть URL-aдpec файла, в котором содержится JS-код:
В этом примере указан абсолютный путь к файлу с именем script.js, содержащему скрипт (из корня сайта). Сам файл должен содержать только JavaScript-кoд, который иначе располагался бы между тегами .
По аналогии с элементом атрибуту src элемента можно назначить полный URL-aдpec, не относящийся к домену текущей НТМL-страницы:
На заметку: Подробнее о путях файлов читайте в разделе «Абсолютные и относительные ссылки».
Чтобы подключить несколько скриптов, используйте несколько тегов:
Примечание: Элемент , хотя внешний сценарий выполняется, встроенный код игнорируется.
Независимо от того, как JS-код включается в НТМL-документ, элементы интерпретируются браузером в том порядке, в котором они расположены в HTML-документе. Сначала интерпретируется код первого элемента , затем браузер приступает ко второму элементу и т. д.
Внешние скрипты практичны, когда один и тот же код используется во многих разных веб-страницах. Браузер скачает js-файл один раз и в дальнейшем будет брать его из своего кеша, благодаря чему один и тот же скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера. Кроме этого, благодаря внешним скриптам, упрощается сопровождение кода, поскольку вносить изменения или исправлять ошибки приходится только в одном месте.
Примечание: Во внешние файлы копируется только JavaScript-код без указания открывающего и закрывающего тегов .
Расположение тегов
Вы уже знаете, что браузер читает HTML-документ сверху вниз и, начинает отображать страницу, показывая часть документа до тега . Встретив тег , переключается в JavaScript-режим и выполняет сценарий. Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.
Это наглядно демонстрирует следующий пример. Метод alert() выводит на экран модальное окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК»: