Подключение и выполнение javascript
В этом разделе мы понемногу рассмотрим все основные элементы javascript. Это позволит тут же писать и тестировать простейшие скрипты.
Javascript подключается напрямую в HTML-файл. Самый простой способ — это написать javascript-команды внутрь тега <script> где-нибудь в теле страницы.
Когда браузер читает HTML-страничку, и видит <script>
— он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.
Так, в следующем примере будет показано начало страницы, затем три раза выполнится функция alert, которая выводит окошко с информацией, а только потом появится остальная часть страницы.
<html> <body> <h2>Считаем кроликов</h2> *!* <script type="text/javascript"> for(var i=1; i<=3; i++) { alert("Из шляпы достали "+i+" кролика!") } </script> */!* <h2>...Посчитали</h2> </body> </html>
В этом примере использовались следующие элементы.
- <script type=»text/javascript»> … </script>
- Тег
<script>
сообщает браузеру о том, что внутри находится исполняемый скрипт. Атрибутtype
говорит о том, что это javascript. Вообще говоря, атрибут может отсутствовать — разницы нет, но с точки зрения стандарта его следует указать. - Конструкция for
- Обычный цикл, по синтаксису аналогичный другим языкам программирования.
- Объявление var i
- Объявление переменной внутри цикла:
i
— локальная переменная. - Функция alert
- Выводит сообщение на экран и ждет, пока посетитель не нажмет ОК
Обычно javascript стараются отделить от собственно документа.
Для этого его помещают внутрь тега HEAD
, а в теле страницы по возможности оставляется чистая верстка.
В следующем примере javascript-код только описывает функцию count_rabbits
, а ее вызов осуществляется по нажатию на кнопку input
.
<html> <head> *!* <script type="text/javascript"> function
Как подключить JavaScript к HTML-документу
Возможности HTML/CSS позволяют создавать красивые и динамичные страницы. Язык программирования JavaScript помогает разработчику назначать элементам страницы функциональность, обрабатывать события, организовывать диалог с посетителем и обеспечивать обмен данными с сервером.
HTML-страницы и CMS
Современное интернет-программирование все чаще использует системы управления контентом (Content Management System — CMS). В этом случае подключение каких-либо файлов решается автоматически.
В этом примере все кнопки, добавленные на страницу сайта, могут быть оснащены дополнительной функциональностью, как через событие onclick, так и путем подключения дополнительного файла скриптов.
Подключение шаблонов и фреймворков (например, jQuery) делается автоматически. JavaScript — это неотъемлемая составляющая браузера. Любая CMS это учитывает и использует максимально эффективно. Как правило, CMS в полной мере использует механизм AJAX, наиболее прогрессивные инструменты JS, но оставляет разработчику возможность корректировать и уточнять функционал страницы в браузере, особенно контролировать обработку событий.
Традиционное подключение JavaScript к HTML
Вариантов не так много. Можно вставить JS код тегом script в саму страницу (3) или подключить как внешний файл (1). У каждого варианта свои плюсы. Обычно разработчики используют оба варианта одновременно.
JavaScript — это события, DOM и полное управление всеми элементами страницы. Вариант 2 — это непосредственное подключение JS кода к телу страницы, которое срабатывает, когда страница будет полностью загружена.
Внешние файлы и серверное управление
Формирование HTML-документа при разработке на базе CMS и при ручном создании веб-ресурса программируется. Обработка событий, создание элементов страницы и внешних файлов может производиться так, как это удобно в каждом конкретном случае, в реальном масштабе времени.
PHP интерпретатор, формируя страницу, может создавать код страницы, JavaScript-файлы, рисунки, компоновать структуру файлов и папок. Через области видимости переменных и данных разработчик может переключать функционал.
Обычно HTML-документ обеспечивает несколько вариантов работы с посетителем. Например, в зависимости от региона, пола, возраста и пр. могут подключаться те или иные возможности сайта, которые удобно и целесообразно иметь на одной странице.
В этом примере то, как подключить JavaScript к HTML-элементам страницы, показано на примере событий мышки. Такой вариант использования возможностей JS бывает необходим, когда функциональность элемента нужно менять в процессе работы страницы.
Функциональность элементов страницы
JavaScript ориентирован на обслуживание событий на элементах страницы и дерева объектов DOM (Document Object Model). С такой точки зрения вопрос «Как подключить JavaScript к HTML-элементам?» решается изначально.
Например, все поля формы для ввода данных могут сразу получить JS-обработчики для валидации (проверки) данных на корректность. Дата должна быть датой, число — числом, а строка символов должна содержать только корректные символы.
Контроль ввода данных — важный функционал, и нет никакого смысла решать его в реальном времени и подключать обработчик JS в процессе нахождения посетителя на странице. Целесообразно заранее предусмотреть форму по структуре, содержанию и функциональности проверки. Задачу, как подключить JavaScript к HTML-элементам формы, можно решить сразу.
Иная ситуация будет на элементах при решении задачи передачи данных посредством механизмов Drag and Drop. В большинстве случаев придется динамично менять обработчики. Захват элемента для перемещения — это одно событие, собственно перемещение через границы других элементов — другое событие.
Вопрос как подключить JavaScript к HTML-элементам страницы, которые «встречаются по дороге», может быть не только динамичным, но и непредсказуемым.
Динамика и обработка событий
Особенность JavaScript — изначально распределенные алгоритмы и события, которые могут сработать в самом непредсказуемом варианте. Программа (скрипт) на JS это далеко не программа на C/C++, PHP или Perl. Обычные языки программирования допускают события, динамику типов данных, параллельные вычисления, но оригинальность JS и его тесная связь с DOM привносит специфику в программирование на этом языке и, что очень важно, правильное размещение кода.
Все скрипты JS сливаются в единое пространство, но правильное размещение переменных, функций, обработчиков событий и последовательности выполнения операций имеет существенное значение.
Использование серверного языка PHP внутри JavaScript кода удобнее делать, когда это код непосредственно вставлен в HTML-документ. Не принято размещать PHP-код внутри внешнего файла *.js, хотя воображение современного разработчика мало чем ограничено, если он работает без той или иной системы управления сайтом.
Важно иметь в виду: JavaScript — это изначально распределенные алгоритмы и события. Серверные языки — это последовательности операций, алгоритмы действий, которые выполняются до того момента, как страница попадает в браузер. Ответ на вопрос «Как подключить JavaScript к HTML-документу?» будет зависеть не только от логики алгоритма, но и времени решения.
Подключение и выполнение JavaScript на странице
Несколько примеров как подключить JS скрипты к web страницам и некоторые тонкости.
1
JS в отдельных файлах
<script src="/script.js" type="text/javascript"></script>
Также можно указать кодировку файла атрибутом charset
:
<script src="/script.js" type="text/javascript" charset="utf-8"></script>
Атрибут async
загрузит скрипт асинхронно т.е. не будет блокировать дальнейшую загрузку страницы.
<script src="/script.js" type="text/javascript" async></script>
Атрибут defer
откладывает выполнение скрипта до тех пор, пока вся страница не будет полностью загружена.
<script src="/script.js" type="text/javascript" defer></script>
Атрибут crossorigin
используется для внешних ресурсов ускоряя загрузку.
Могут быть значения:
anonymous |
При загрузке не передаются cookie, сертификат X.509, логин/пароль для аутентификации по HTTP |
use-credentials |
Выполняется кросс-доменный запрос Origin |
<script src="/script.js" type="text/javascript" crossorigin="anonymous"></script>
<script src="/script.js" type="text/javascript" crossorigin="use-credentials"></script>
2
JS в коде страницы
<script type="text/javascript">
...
</script>
<script>
...
</script>
3
Мета-тег Content-Script-Type
Указывает используемый язык в тегах<script>...</script>
. По умолчанию используются значение text/javascript
.<meta http-equiv="content-script-type" content="text/javascript">
4
Noscript
Браузер покажет содержание тега <noscript>
если JS не поддерживается или отключен.
<noscript>
...
</noscript>
5
Экранирование JS кода
В старых браузерах где был отключён JS содержание тега выводилось на странице, поэтому JS код экранировали:
<script type="text/javascript">
<!--
...
//-->
</script>
Как встроить в HTML код страницы JS-скрипты?
Подключение JavaScript в HTML код
Есть два способа вызова JavaScript в HTML-коде страницы:
[html]<script type=’text/javascript’ src=’путь_к_скрипту’></script>[/html]
[html]<script type=’text/javascript’>код_скрипта</script>[/html]
Первый способ подключает js-файл, который может быть расположен как в одной из директорий сайта, так и на другом ресурсе. Второй способ встраивает код js-файла в HTML-код страницы. Тут стоит разобраться в том, что использование того или другого метода должно зависеть от объема js-скрипта. Если объем скрипта достаточно большой, то лучше будет вызвать его из файла. Кроме этого, большие по объему скрипты можно оптимизировать, ознакомившись со статьей как сжать JS-скрипты. Но если же весь код скрипта заключен в несколько строчек, то встраивание JavaScript в HTML код страницы будет более правильным. Встраивание небольшого по размеру js-кода лишает сервер необходимости запрашивать этот самый файл, что в свою очередь уменьшит задержки при загрузке других ресурсов и сократит время обработки страницы.
Какие по объему JS-скрипты необходимо встраивать в HTML код?
Хорошей подсказкой для встраивания JavaScript может послужить Page Speed от Google. Данный инструмент подскажет вебмастеру какие .js и .css-файлы должны быть встроены в HTML код страницы.
Что делать с JS-скриптами, которые вызываются с других сайтов?
Со скриптами, которые вызываются из других сайтов, можно провернуть следующие действия:
- Находите их и копируете их код.
- Создаете в текстовом редакторе аналогичный js-скрипт.
- Заливаете его в корневую(или в любую другую) директорию своего сайта.
- Изменяете путь вызова js-скрипта на адрес, по которому расположился Ваш скрипт.
В основном проблемы могут возникнуть с 4-ым пунктом. В статье «Как встроить небольшой css-файл в HTML-код страницы» я описал алгоритм, с помощью которого в CMS WordPress можно найти место вызова стиля и изменить его, встроив вместо него небольшой css-файл. Данный алгоритм вполне подойдет и для js-файлов.
Где лучше подключить JavaScript?
JavaScript лучше всего подключить в футере(footer) страницы. Разместив js-скрипт в начале(head) или середине(body) страницы, Вы приостановите загрузку страницы на время выполнения данного скрипта. Если же скрипт будет размещен в конце страницы и будет выполняться только после загрузки основного содержимого страницы, пользователи смогут быстрее начать изучать материал. Ну, а скрипты подтянуться позднее. К тому же, желательно скрипты загружать после css-файлов. Почему после, а не до стилей, читайте в статье Оптимизация порядка загрузки стилей и скриптов, в которой этот момент подробно рассмотрен.