Скрипты являются еще одним важным фактором для корректной работы страницы. Если на HTML возлагается роль формирования ее структуры, а на стили – внешнего вида, то скрипты отвечают за поведение документа. Они позволяют создавать на страницах всевозможные подвижные элементы. Самым ярким примером будет анимация. Но есть и много других эффектов. Для создания скриптов применяется такой язык, как JavaScript .
Процесс подключения скриптов на странице точно такой же, как и стилей. То есть, существует два варианта. Первый заключается в том, чтобы написать код скрипта внутри самой страницы. Второй подразумевает подключение их с помощью внешних файлов.
Инлайновые скриптыДля того, чтобы написать скрипт внутри страницы, следует использовать тег . Приведем пример:
JavaScript-код
По большому счету не имеет значения, где именно в HTML документе будет задействован тег . Однако я рекомендую размещать его в конце кода страницы, непосредственно перед тегом , который закрывает документ.
Следует отметить, что с течением времени определенные возможности языка JavaScript переходят в CSS . В качестве примера можно привести такую возможность, как указание плавного изменения значений свойств.
Внешние скриптыКак правило, для подключения внешних скриптов используются файлы с расширением .js . Осуществляется данное действие с применением тега , сопровождаемого атрибутом src , где задается путь к самому файлу. Например:
Обратите внимание, что тег является парным. Поэтому в данном случае, когда речь идет о внешних скриптах, внутри тега ничего писать не требуется.
Лучше всего осуществлять подключение скриптов из файла перед тегом , который закрывает документ.
Перед тем как использовать JavaScript, его необходимо добавить в HTML документ . Сделать это можно с помощью элемента двумя способами:
Примечание: элемент может быть расположен в любом месте внутри элемента и/или внутри элемента и использоваться любое количество раз.
Встроенный сценарийJavaScript код можно вставить непосредственно внутри элемента . Сценарий, расположенный непосредственно внутри элемента, называется встроенным .
Название документа // JavaScript-код // JavaScript-код
Внешний сценарийВ HTML документ можно также добавить JavaScript код, расположенный во внешнем файле. Сценарий, расположенный внутри внешнего файла, называется внешним . Подключение внешнего файла выполняется с помощью атрибута src тега следующим образом:
- Создадим папку и назовём её к примеру example , внутри этой папки создаём текстовый файл с расширением.js , например myscript.js (имя файла может быть любым), открываем его и добавляем строку JavaScript-кода:
Примечание: если вы не знаете как менять расширение у файлов, то можете прочитать об этом в разделе: смена расширения файла .
Обратите внимание, что внутри внешнего файла JavaScript-код не нужно располагать между тегами и . Сохраняем изменения в файле и закрываем его.
- Теперь создадим ещё один файл и назовём его myscript2.js , открываем его и добавляем следующую строку JavaScript кода:
Сохраняем изменения в файле и закрываем его.
- И последнее, что нам осталось сделать, это создать HTML-документ, к которому будут подключены наши созданные два файла с внешними сценариями. В той же папке, где хранятся наши два сценария (example), создаём HTML-документ и называем его к примеру test.html . Теперь c помощью элемента подключаем два внешних файла c JavaScript-кодом:
Вот и всё! Сохраняем изменения в HTML-документе, открываем его в браузере и смотрим результат. У вас должно получиться нечто подобное:
Будьте внимательны, так как мы указали с помощью тега кодировку utf-8 в HTML-документе, кодировка самих файлов (test.html, myscript.js и myscript2.js) также должна быть utf-8 .
Примечание: если подключается внешний сценарий, то внутри того же самого элемента нельзя одновременно располагать встроенный сценарий.
Сравнение внешних и встроенных сценариевИспользование внешних сценариев даёт ряд преимуществ перед встроенными:
- HTML-документы становятся проще для редактирования, так как из них можно убрать большие блоки JavaScript-кода и отделить структуру от поведения страницы.
- Если один и тот же JavaScript-код, используется в нескольких HTML-документах, его лучше подключать в качестве внешнего сценария. Это намного облегчает поддержку и редактирование кода, так как при внесении изменений отпадает необходимость редактировать каждый HTML-документ в отдельности.
- Внешний сценарий загружается браузером всего один раз, при первом посещении страницы. Переходя на другие страницы, использующие тот же сценарий, он будет извлекаться из кэша браузера, что в свою очередь ускорит загрузку и обработку содержимого страницы.
Примечание: располагать сценарий (как внешний так и встроенный) лучше всего в конце HTML-документа, перед закрывающим тегом . Такое расположение сценария позволяет браузеру загружать страницу быстрее, так как сначала загрузится контент страницы, а потом будет загружаться код сценария.
Возможности HTML/CSS позволяют создавать красивые и динамичные страницы. помогает разработчику назначать элементам страницы функциональность, обрабатывать события, организовывать диалог с посетителем и обеспечивать обмен данными с сервером.
HTML-страницы и CMSСовременное интернет-программирование все чаще использует системы управления контентом (Content Management System - CMS). В этом случае подключение каких-либо файлов решается автоматически.
В этом примере все кнопки, добавленные на страницу сайта, могут быть оснащены дополнительной функциональностью, как через событие onclick, так и путем подключения дополнительного файла скриптов.
Подключение шаблонов и фреймворков (например, jQuery) делается автоматически. JavaScript - это неотъемлемая составляющая браузера. Любая CMS это учитывает и использует максимально эффективно. Как правило, CMS в полной мере использует механизм AJAX, наиболее прогрессивные инструменты JS, но оставляет разработчику возможность корректировать и уточнять функционал страницы в браузере, особенно контролировать обработку событий.
Традиционное подключение JavaScript к HTMLВариантов не так много. Можно вставить JS код тегом script в саму страницу (3) или подключить как внешний файл (1). У каждого варианта свои плюсы. Обычно разработчики используют оба варианта одновременно.
JavaScript - это события, DOM и полное управление всеми элементами страницы. Вариант 2 - это непосредственное подключение к телу страницы, которое срабатывает, когда страница будет полностью загружена.
Внешние файлы и серверное управлениеФормирование 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-документу?" будет зависеть не только от логики алгоритма, но и времени решения.
Сегодня я расскажу вам, как осуществляется подключение разных типов скриптов к вашему сайту. Это своего рода основа основ, и написать эту статью я должен был одной из первых. Потому – начнем.
Подключение JS-скриптов (файлы с расширением *.js) к сайтуJavaScript помогает нам во многих моментах повысить функциональность сайта. Будь то стилизация форм или, например, какая-нибудь техническая сторона вопроса.
Подключение JavaScript"а осуществляется двумя способами:
1. Первый – это непосредственно вставка кода в ваш сайт с помощью тегов:
Код
2. Второй – с помощью файла:
Где «https://www.pandoge.com/main.js » – путь до файла скрипта. Такой вариант рекомендуется писать для файлов на удаленном (внешнем) сервере. Если же файл находится на вашем сайте, то можно просто указать относительный путь:
Это удобно, если вы вдруг захотите сменить домен или перевести сайт на другой протокол.
Что касается места подключения, то все скрипты рекомендуется подключать в секции HEAD , перед закрывающим ее тегом. Например:
Все для начинающего веб-мастера
Их также можно подключить в секции BODY . Например, все библиотеки рекомендуется подключать в секции HEAD , тогда как все счетчики, слайдеры, галереи и прочие скрипты – в секции BODY , также перед закрывающим тегом.
Подключение PHP-скриптов (файлы с расширением *.php) к сайтуПодключение PHP-скриптов осуществляется уже тремя способами:
1. Первый – это та же вставка кода в саму страницу сайта (обратите внимание, что если вы имеете страницу с расширением *.html – вам необходимо сменить расширение на *.php ) с помощью тегов:
2. С помощью файла (в таком случае подключение можно осуществлять и на странице с *.html расширением):
Но для работы этого способа в файл .htaccess , который находится в корне вашего сайта, в самый верх, необходимо добавить эти строки:
RemoveHandler .html .htm AddType application/x-httpd-php .php .htm .html .phtml
Если такого файла нет на хостинге - создайте его через любой текстовый редактор.
3. Третье – с помощью JS-скрипта. В этом случае вы также можете получить результат выполненного PHP-скрипта на сервере.
Реализация будет следующая:
$(document).ready(function() { $(".result").load("/main.php"); });
Где «.result » – это класс, куда будут грузиться данные, а «/main.php », соответственно, адрес до PHP-скрипта.
Если вы грузите данные с другого сервера, то поддержка PHP на вашем сервере не обязательна. Не забывайте подключить к вашему сайту библиотеку jQuery.
Здесь правила абсолютно те же: полный адрес к файлу, если он находится на внешнем сервере, относительный – если на вашем.
Обратите внимание! Если вы хотите подключить PHP-скрипт к вашему сайту, то на сервере должна быть поддержка PHP. О том, есть ли у вас такая возможность – узнайте у своего хостинг-провайдера.
Если вы осуществляете подключение скриптов первый раз – попробуйте подключить скрипты из архива, который прикреплен в конце статьи. Если в обоих случаях вы получили сообщение «Hello World! » – значит, вы все сделали правильно.
Последнее обновление: 1.11.2015
Еще один способ подключения кода JavaScript на веб-страницу представляет вынесение кода во внешние файлы и их подключение с помощью тега
Итак, в прошлой теме мы создали html-страницу index.html, которая находится в каталоге app. Теперь создадим в этом каталоге новый подкаталог. Назовем его js . Он будет предназначен для хранения файлов с кодом javascript. В этом подкаталоге создадим новый текстовый файл, который назовем myscript.js . Файлы с кодом javascript имеют расширение .js . То есть у нас получится следующая структура в папке app:
Откроем файл myscript.js в текстовом редакторе и определим в нем следующий код:
Var date = new Date(); // получаем текущую дату var time = date.getHours(); // получаем текущее время в часах if(time < 13) // сравниваем время с число 13 alert("Доброе утро!"); // если время меньше 13 else alert("Добрый вечер!"); // если время равно 13 и больше
Для совместимости с кодировкой страницы index.html для файла с кодом javascript также желательно устанавливать кодировку utf-8.
Здесь уже больше выражений языка javascript. Первое выражение получает текущую дату и присваивает ее переменной date . С помощью второй инструкции получаем время в часах. Дальше мы сравниваем полученное время с числом 13 и в зависимости от результатов проверки выводим первое или второе сообщение.
Теперь подключим этот файл на веб-страницу index.html:
JavaScript Первая программа на JavaScript
Чтобы подключить файл с кодом javascript на веб-страницу, применяется также тег , у которого устанавливается атрибут src . Этот атрибут указывает на путь к файлу скрипта. В нашем случае используется относительный путь. Так как веб-страница находится в одной папке с каталогом js, то в качестве пути мы можем написать js/myscript.js .
Также надо учитывать, что за открывающим тегом script должен обязательно следовать закрывающий
И после открытия файла index.html в браузере отобразится сообщение:
В отличие от определения кода javascript вынесение его во внешние файлы имеет ряд преимуществ:
Мы можем повторно использовать один и тот же код на нескольких веб-страницах
Внешние файлы javascript бразуер может кэшировать, за счет этого при следующем обращении к странице браузер снижает нагрузка на сервер, а браузеру надо загрузить меньший объем информации
Код веб-страницы становится "чище". Он содержит только html-разметку, а код поведения хранится во внешних файлах. В итоге можно отделить работу по созданию кода html-страницы от написания кода javascript
Поэтому, как правило, предпочтительнее использовать код javascript во внешних файлах, а не в прямых вставках на веб-страницу с помощью элемента script.
