Вставка скрипта в HTML

Подключение JavaScript к HTML

В этой главе мы займемся размещением сценариев в HTML-документе, чтобы иметь возможность использовать их для оперативной модификации HTML-документа. Для вставки JavaScript-кoдa в НТМL-страницу обычно используют элемент <script>.

Первая программа

Чтобы ваша первая пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно внедрить в НТМL-документ.
Сценарии внедряются в HTML-документ различными стандартными способами:

  • поместить код непосредственно в атрибут события HTML-элемента;
  • поместить код между открывающим и закрывающим тегами <script>;
  • поместить все ваши скрипты во внешний файл (с расширением .js), а затем связать его с документом HTML.

JavaScript в элементе script

Самый простой способ внедрения JavaScript в HTML-документ – использование тега <script>. Теги <script> часто помещают в элемент <head>, и ранее этот способ считался чуть ли не обязательным. Однако в наши дни теги <script> используются как в элементе <head>, так и в теле веб-страниц.

Таким образом, на одной веб-странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Как правило, выполнение сценариев браузерами происходит по мере их загрузки. Браузер читает HTML-документ сверху вниз и, когда он встречает тег <script>, рассматривает текст программы как сценарий и выполняет его. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе <script>.

JavaScript — это язык сценариев, который работает работает только в браузере пользователя, то есть на стороне клиента. Для вызова этого языка в HTML-код пишут теги <script> и </script>.

Вот пример простой программки, выводящей в окно браузера фразу «Привет, Мир!»:

<html> <head> <title>Пример JavaScript</title> </head> <body> <script> document.write(«Привет, Мир!») </script> </body> </html>

Подробнее про эту команду мы поговорим позже, а сейчас вернёмся к теме этой статьи — вставка сценария JavaScript в код HTML.

На самом деле расширеная и более точная запись тега <script> выглядит так: <script type=»text/javascript»>. В атрибуте type мы указывает тип языка, на котором написан скрипт. В нашем случае это JavaScript. В реальности у JavaScript сейчас нет заметных конкурентов, поэтому во всех современных браузерах по умолчанию будет использоваться JavaScript.

Но для достоверности давайте приведём пример расширенного использования тега:

<html> <head> <title>Пример JavaScript</title> </head> <body> <script type=»text/javascript»> document.write(«Привет, Мир!<br><br>Я рад тебя видеть!») </script> <noscript> Ваш браузер не поддерживает JavaScript или поддержка отключена в настройках. </noscript> </body> </html>

В этом примере также обратите внимание на пару тегов <noscript> и </noscript>. Этот тег будет выводить текст на экран только в том случае, если в браузере пользователя отключён JavaScript или он не поддерживается.

Сценарий можно вставлять не только в раздел <boby>, но и в раздел <head>.

<html> <head> <title>Пример JavaScript</title> <script type=»text/javascript»> var i = «Привет, Мир!» </script> </head> <body> <script type=»text/javascript»> document.write(i) </script> <noscript> Ваш браузер не поддерживает JavaScript или поддержка отключена в настройках. </noscript> </body> </html>

К этому примеру требуется некоторое пояснение. В разделе <head> мы командой var мы создали переменную i и присвоили ей текстовое значение Привет, Мир!. Потом, в разделе <body> мы командой document.write(i) вывели значение этой переменной на экран. Подробнее про переменные написано в статье переменные JavaScript, тут же вы узнали что код JavaScript можно вставить в оба раздела HTML-документа: <head> и <boby>.

Второй способ — включение файла

В статье что такое CSS был описан способ присоединения файла с кодом стилей CSS в документ, называемый связывание. Также можно связывать документ с файлом, в котором записан код JavaScript. Для этого в раздел <head> вставляем тег, как в примере:

<html> <head> <title>Пример JavaScript</title> <script src=»/my/script.js»></script> <script src=»/my/script_2.js» type=»text/javascript»></script> <script src=»http://ivan-monetkin.info/javascript/script.js»></script> </head> <body> </body> </html>

Как видете, к документу можно прикрепить два и более файлов с JavaScript сценариями. Можно использовать файлы сценариев, расположенные на стороннем домене, для этого в атрибуте src тега <script> нужно указать URL файла со скриптом. Также можно игнорировать атрибут type, если есть желание.

Файлы с кодом JavaScript должны иметь расширение .js.

В самом файле.js с кодом JavaScript теги <script> использовать не нужно. Это приведёт к ошибке.

Устаревшие и нестандартные браузеры

Чтобы поддерживать весьма устаревшие браузеры, которые не понимают код JavaScript, его нужно взять в комментарии используя теги комментариев HTML <!— и —>. Если не сделать этого, то браузер не понимающий JavaScript-код выведет его на экран как обычный текст. Но таких браузеров уже не осталось. Хотя такой код вы можете встретить, и, чтобы понимать его, — давайте разберёмся в этом.

<html> <head> <title>Пример JavaScript</title> </head> <body> <script type=»text/javascript»> <!— document.write(«Привет, Мир!») // —> </script> </body> </html>

Двойной прямой слэш // — это уже комментарий JavaScript, он показывает что вся строка, идущая после него — это комментарий с точки зрения JavaScript. Подробнее про комментарии JavaScript читайте тут: комментарии в JavaScript. Этот JavaScript-комментарий вставлен для браузеров с поддержкой JavaScript, чтобы они проигнорировали символы —>, не восприняли их как часть кода сценария.

Такое решение имеет не самый красивый вид, практической пользы от него мало и она уменьшается с каждым годом, но его ещё можно встретить в некоторых местах. Например счётчики посещаемости сайтов от liveinternet.ru имеют такой код.

Часто для реализации задуманного функционала на сайте или в блоге нам требуется внедрить некий JavaScript код. Для опытного пользователя это не проблема, а вот новичок от словосочетания: «добавляем скрипт» может впасть в ступор, чтобы этого не происходило и написана данная статья.

  • Разделы поста
  • Что такое и зачем нужен JavaScript
  • Структура HTML-документа. Куда добавить скрипт
  • Удаленное подключение JS-файла
  • Добавление JavaScript в шаблоны Blogger

Что такое и зачем нужен JavaScript

Скрипт(сценарий) — программа, написанная на сценарном языке программирования, выполняющая действия с готовыми компонентами. Если упростить, то можно сказать, что скрипты ничего не создают, они лишь управляют тем что есть.
Для веб-программирования на клиентской стороне наиболее полярным является язык JavaScript(JS).
Для отображения содержимого веб-страниц используется браузер, именно он обрабатывает и выполняет внедренный JavaScript-код.
Функции, добавляемых сценариев могут быть совершенно разные, от влияющих на отображение сайта и его компонентов в целом, до таких, которые изменяют всего одно слово.
От предназначения скрипта может зависеть его расположение в коде веб-документа.

Структура HTML-документа. Куда добавить скрипт

Чтобы правильно разместить скрипт в веб-документе, необходимо знать и соблюдать структуру HTML.
Практически любой веб-документ имеет, примерно, следующую разметку:
<!DOCTYPE …>
<html>
<head>
<!— основная информация о странице —>
<title>Название сайта</title>
<!— глобальные данные —>
</head>
<body>
<!— содержимое страницы —>
</body>
</html> Скрипты предпочтительно размещать в секции HEAD, обычно перед закрывающим тегом (</head>), однако допустимо и в BODY. Кроме этого, если скрипт добавлен лишь на одну страницу сайта из нескольких, то он будет выполнен браузером только на этой странице.
При размещении скриптов нужно понять один важный момент: веб-страница не храниться на сервере как фотография в коробке. Видимое на экране монитора изображение сайта формируется браузером, что называется, «на лету», то есть считывая записанный в HTML-документе код, браузер каждый раз «строит» веб-страницу.
Сначала считывается информация размещенная в HEAD затем, исходя из полученных данных, отображается BODY.
Скрипт, который должен выполняться до/во время загрузки обрабатываемого содержимого размещают до </head>. Чтобы внедрить JavaScript в HTML, его код необходимо заключить в специальные теги:
<script>
//здесь JavaScript код
</script> <!— закрывающий тег обязателен—> Не обязательно окружать тегами каждый скрипт отдельно, в один такой контейнер возможно объединить сразу несколько JS-сценариев, а чтобы не нагружать страницу большим количеством кода его можно подключить из внешнего файла.

Удаленное подключение JavaScript-файла

При желании и чтобы дополнительно не нагружать страницу, весь JavaScript код можно вынести в отдельный файл, разместить удаленно и подключить к сайту. Файлы с JavaScript-сценарием должны иметь расширение .js .
Вместо нескольких десятков, а то и сотен, строк программного кода, в HTML документа размещается всего одна — указывающая на месторасположение необходимого файла со скриптом:
<script src=»путь/ссылка к файлу скрипта.js»></script> Если нет возможности разместить JS-файлы в пределах собственного хостинга, можно воспользоваться специальными сервисами, например бесплатным Google Диск, также можно использовать Google Сайты.
Подключение скриптов из внешнего файла ускоряет загрузку станицы в целом, но не ускоряет обработку и выполнение самого сценария. В любом случае, если JS-код закончен и не будет более подвергаться правке, его рекомендуют выносить за пределы HTML документа.

Добавление JavaScript в шаблоны Blogger

В Blogger, как и на любой другой платформе возможно добавлять пользовательские скрипты. Код скрипта можно разместить непосредственно в HTML шаблона, подключить файл скрипта удаленно, воспользоваться гаджетом HTML/JavaScript или добавить на определенную страницу при создании сообщения.

Однако, добавляя скрипты непосредственно в код шаблона, нужно помнить что шаблон Blogger написан на XML, а значит, если в скрипте используются символы:
< > & » ‘- они будут заменены на строчные выражения, соответственно:
&lt; &gt; &amp; &quot; &apos; Что может привести к ошибке выполнения сценария если в нем есть сравнительные выражения: «||» — «или», «&&» — «и», а также «больше/меньше» — «>/<«, естественно что сценарий в этом случаи выполняться не будет. Чтобы этого не происходило, JavaScript код, содержащий такие выражения и символы, можно поместить в специальной секции — CDATA. Выгладить это будет так:
<html>
<head>
<!— основная информация о странице —>
<title>Название сайта</title>
<!— глобальные данные —>
<script>
//<!]>
</script>
</head>
<body> Размещенный внутри шаблона скрипт, также можно выполнять только на определенных страницах, заключая его в условные теги
JavaScript для Blogger-блогов во многом не заменимый помощник, впрочем, как и для любых других сайтов и блогов различных платформ, именно поэтому хотя бы минимальные знания в области у любого самостоятельного блогера должны присутствовать.

6.7. Добавление скриптов на веб-страницу

Вы можете добавить JavaScript-код на ваши HTML-страницы и сделать их интерактивными. Скрипты должны быть вставлены между тегами <script> и </script>. Ниже представлен пример JavaScript-кода:

<script type=»text/javascript»> // Показывает простое окно оповещения с текстом «Hello World!». $(document).ready(function() { alert(‘Hello World!’); }); </script>

В примере выше мы создали элемент <script> и поместили в него функцию обратного вызова jQuery. jQuery обязывает функцию выполниться, когда DOM завершит загрузку. После выполнения функции, появится простое окно оповещения с текстом «Hello World!» и кнопкой «ОК».

Так как вы поместили этот JavaScript-код внутрь HTML-файла, мы будем называть его встроенным скриптом. Другой способ хранить JavaScript-код — разместить его во внешнем .js-файле. Внешние файлы, как правило, содержат код, предназначенный для использования несколькими веб-страницами. Обычно такие файлы хранятся в каталоге APP_DIR/public/js/. Чтобы привязать внешний JS-файл к HTML-странице, добавьте элемент <script> таким образом:

<script type=»text/javascript» src=»/js/yourscript.js»></script>

Когда браузер встретится с этим элементом, он прочитает внешний JS-файл и выполнит код.

В целом, вы можете разместить скрипт в двух местах HTML-файла:

  • JavaScript-код можно разместить в раздел <head> HTML-страницы. Этот способ рекомендуется использовать, когда вам нужно, чтобы JavaScript загружался до содержимого страницы. Мы использовали этот способ для загрузки расширений Twitter Bootstrap и библиотеки jQuery.

  • Скрипт может быть помещен в нижнюю часть раздела <body> HTML-страницы, прямо перед закрывающим тегом </body>. Этот метод допустим для случаев, когда вам нужно, чтобы вся DOM 14 загружалась перед тем, как скрипт может начать работу.

14) DOM (Document Object Model — объектная модель документа) — это удобное представление структуры HTML-документа в виде дерева элементов.

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

Чтобы добавить скрипт для конкретной страницы, который будет размещен в разделе <head>, используйте помощник вида HeadScript. Его методы описаны в таблице 6.1:

Таблица 6.1. Методы, предоставляемые помощником вида HeadScript

Method name Description
appendFile() Помещает ссылку на внешний JS-файл в конец.
offsetSetFile() Вставляет ссылку на внейшний JS-файл в список на заданную позицию.
prependFile() Помещает ссылку на внешний JS-файл в начало.
setFile() Очищает список скриптов и помещает в него один внешний JS-файл.
appendScript() Помещает встроенный скрипт в конец.
offsetSetScript() Вставляет встроенный скрипт в список на заданную позицию.
prependScript() Помещает встроенный скрипт в начало.
setScript() Очищает список встроенных скриптов и помещает в него один встроенный скрипт.

Чтобы добавить ссылку на внешний JS-файл в раздел страницы <head>, поместите следующий PHP-код в начало вашего файла шаблона представления (.phtml):

<?php $this->headScript()->appendFile(‘/js/yourscript.js’, ‘text/javascript’); ?>

В представленном выше фрагменте мы вызываем метод appendFile() помощника вида HeadScript. Этот метод принимает два аргумента. Первый — путь к внешнему JS-файлу (если файл хранится внутри каталога APP_DIR/public/js) или URL JS-файла (если файл находится на другом веб-сервере). Второй аргумент — это тип скрипта (как правило, «text/javascript»).

Другие методы, предоставляемые помощником вида HeadScript (такие как prependFile(), offsetSetFile() и setFile()) различаются только позицией в списке скриптов, на которую будет помещен новый скрипт.

Методы prependScript(), appendScript(), offsetSetScript() и setScript() предназначены для вставки JavaScript-кода. Они используются довольно редко, так как обычно внешние JS-скрипты вставляются в раздел заголовка документа.

Чтобы вставить скрипт в конец раздела <body>, воспользуйтесь помощником вида InlineScript 15. Он предоставляет точно такие же методы, как и помощник вида HeadScript. Ниже приведен пример, который можно использовать для добавления встроенного JavaScript-кода в конец тела документа:

15) Имя InlineScript (inline script — встроенный скрипт) не полностью отражает возможности этого помощника вида. На самом деле, с его помощью можно вставить и встроенные, и внешние скрипты. Более подходящим именем было бы BodyScript, так как этот помощник вида предназначен для вставки скриптов в тело документа.

<?php $script = <<<EOT $(document).ready(function() { alert(‘Hello World!’); }); EOT; $this->inlineScript()->appendScript($script);

В этом примере мы использовали Heredoc-синтаксис 16 чтобы заполнить переменную $script встроенным JavaScript-кодом. Затем мы вызываем функцию appendScript() помощника вида InlineScript и передаем этот код как аргумент.

16) Heredoc («здесь документ») — альтернативный способ определения строк. Он хорошо работает с многострочными переменными.

Однако, при использовании помощника вида InlineScript могут возникнуть проблемы с читаемостью. Более того, проверка синтаксиса NetBeans застрянет на Heredoc-записи и не распознает JavaScript-код. Чтобы это исправить, просто поместите элемент <script> в конец вашего шаблона представления, как показано на этом примере:

<!— Содержимое страницы идет первым —> <!— Встроенный скрипт — последним —> <script type=»text/javascript»> $(document).ready(function() { // Show a simple alert window with the «Hello World!» text. alert(«Hello World!»); }); </script>

Таким образом можно добиться того же эффекта, что и с помощником вида InlineScript, но с лучшей читаемостью скрипта и автоматической проверкой синтаксиса в NetBeans.

Чтобы помощники видов HeadScript и InlineScript работали, их содержимое должно отображаться в шаблоне представления лэйаута (смотрите строки 23 и 62 файла layout.phtml). Если вы уберете эти строки из шаблона лэйаута, скрипты не будут вставлены на веб-страницу.

6.7.1. Пример

В качестве практического примера вставки JavaScript-кода на веб-страницу, добавим страницу с автозаполнением. С помощью этой функции браузер будет «предсказывать» слово или фразу, которые хочет набрать пользователь, по первым набранным им буквам. Мы используем библиотеку JavaScript Twitter Typeahead. Аналогично Twitter Bootstrap, библиотека Typeahead была изначально разработана в компании Twitter для их нужд и на данный момент распространяется свободно.

Скачайте файл typeahead.min.js (минифицированная версия библиотеки Typeahead) из официальной страницы проекта. Затем поместите этот файл в каталог APP_DIR/public/js.

После этого добавьте файл typeahead.phtml в подкаталог application/index/static под каталогом модуля view. Этот каталог обслуживается типом маршрута StaticRoute, который мы создали и настроили ранее, в главе Маршрутизация, и все «статические» страницы, помещенные сюда, будут автоматически доступными для всех пользователей сайта.

В файле шаблона представления typeahead.phtml разместите следующий код:

<?php $this->headTitle(‘Typeahead’); // Добавляем JavaScript-файл $this->headScript()->appendFile(‘/js/typeahead.min.js’, ‘text/javascript’); ?> <h1>Typeahead</h1> <p>Type a continent name (e.g. Africa) in the text field below:</p> <input type=»text» class=»typeahead» title=»Type here»/> <script type=»text/javascript»> $(document).ready(function() { $(‘input.typeahead’).typeahead({ name: ‘continents’, local: }); }); </script>

В этом фрагменте мы задали заголовок страницы (строка 2), затем добавили файл typeahead.min.js в раздел страницы <head>, используя помощник вида HeadScript (строка 4).

В строке 9 мы создаем поле ввода текста, куда пользователь сможет ввести некоторый текст. Мы помечаем поле ввода CSS-классом typeahead.

Строки 11-25 содержат встроенный JavaScript-код, находящийся в конце шаблона представления (мы не используем помощник вида InlineScript для лучшей читаемости кода).

В строке 12 находится обработчик событий jQuery, привязанный к событию «document is ready» (документ готов). Событие вызывается, когда целиком загрузится DOM-дерево.

В строке 13 находится селектор jQuery(«input.typeahead»), который выбирает все поля ввода с CSS-классом typeahead и выполняет для них функцию typeahead().

Функция typeahead() связывает обработчик события «change» (изменение значения) и поле ввода текста. Как только пользователь вводит символ в поле, начинает работу обработчик и проверяет введенные буквы. Затем он выводит выпадающее меню с предлагаемыми вариантами автозаполнения.

Функция typeahead() принимает два аргумента: аргумент name, определяющий набор данных, и аргумент local — JSON-массив, содержащий варианты автозаполнения.

Чтобы придать полю автозаполнения и его выпадающему меню привлекательный вид, добавьте в файл style.css следующие CSS-правила.

.typeahead, .tt-query, .tt-hint { width: 396px; height: 30px; padding: 0px 12px; font-size: 1.1em; border: 2px solid #ccc; border-radius: 4px; outline: none; } .tt-dropdown-menu { width: 422px; margin-top: 12px; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; } .tt-suggestion { padding: 3px 20px; font-size: 1.1em; line-height: 24px; } .tt-suggestion.tt-is-under-cursor { color: #fff; background-color: #0097cf; } .tt-suggestion p { margin: 0; }

Чтобы увидеть автозаполнение в действии, наберите в браузере URL «http://localhost/typeahead» и нажмите Enter. Появится страница Typeahead, и вам будет предложено ввести название континента. Например, наберите букву a и увидите, как Typeahead предлагает вам имеющиеся варианты (рисунок 6.7).

Рисунок 6.7. Функция автозаполнения

Вы можете увидеть образец выше в работе в примере Hello World, поставляемом с этой книгой, набрав в своем браузере «http://localhost/typeahead».

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *