JavaScript Урок 3 В Каком Месте Исходного Кода HTML Вставлять Скрипты?
JavaScripts может быть вставлен в секции и страницы HTML.
JavaScript в секции
Пример ниже вставляет текущую дату в существующий элемент
когда страница загружается:
Пример
Моя Первая Веб Страница
Заметьте, что JavaScript размещается в самом низу страницы, чтобы код не был выполнен прежде, чем элемент
будет создан.
JavaScript Функции и События
Java-Скрипты внутри HTML страницы будут выполнены, когда страница загружается. Это не всегда то, что мы хотим.
Иногда вы хотим выполнить JavaScript когда происходит некоторое событие, например, когда пользователь нажимает на кнопку. В этом случае мы можем вставить скрипт внутри функции.
События как правило используеются в комбинации с функциями (вызов функции происходит, когда имеет место соответствующее событие).
Вы узнаете больше о функциях JavaScript и событиях в последующих уроках JavaScript.
JavaScript в Секции
Пример ниже вызывает функцию когда происходит нажатие кнопки:
Пример
Моя Первая Веб Страница
Скрипты в Секциях и
Вы можете разместить неограниченное количество скриптов в вашем документе, а также вы можете вставлять скрипты в секцию body и в то же время в секцию head.
Это стандартная практика встраивать функции в секцию head, или в самый низ страницы. Таким образом, все они собраны в одном месте и не мешают основному содержимому страницы.
Использование Внешних Скриптов
JavaScript также может быть помещен во внешние файлы.
Внешние файлы JavaScript обычно содержат код, который используется на нескольких различных веб страницах.
Внешние файлы JavaScript имеют расширение .js.
Замечание: Внешний скрипт не должен содержать теги !
Чтобы подключить внешний скрипт к странице, укажите на .js файл в атрибуте «src» тега :
Пример
Замечание: Помните, что размещать ссылку на внешний файл скриптов следует там же, где бы писали эти скрипты, не используя внешний файл!
Как правильно подключить JS- и PHP-скрипты к вашему сайту?
Сегодня я расскажу вам, как осуществляется подключение разных типов скриптов к вашему сайту. Это своего рода основа основ, и написать эту статью я должен был одной из первых. Потому – начнем.
Подключение 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-скрипта на сервере.
Реализация будет следующая:
Где «.result» – это класс, куда будут грузиться данные, а «/main.php», соответственно, адрес до PHP-скрипта.
Если вы грузите данные с другого сервера, то поддержка PHP на вашем сервере не обязательна. Не забывайте подключить к вашему сайту библиотеку jQuery.
Здесь правила абсолютно те же: полный адрес к файлу, если он находится на внешнем сервере, относительный – если на вашем.
Обратите внимание! Если вы хотите подключить PHP-скрипт к вашему сайту, то на сервере должна быть поддержка PHP. О том, есть ли у вас такая возможность – узнайте у своего хостинг-провайдера.
Если вы осуществляете подключение скриптов первый раз – попробуйте подключить скрипты из архива, который прикреплен в конце статьи. Если в обоих случаях вы получили сообщение «Hello World!» – значит, вы все сделали правильно.
Куда вставлять Javasсript
Чтобы код Javascript сработал в браузере пользователя, его необходимо вставить между тегами и .
Пример JavaScript
В данном примере, как только HTML страница будет загружена, браузер запустит команду document.getElementById(«demo»).innerHTML = «Первый сценарий на JavaScript», которая ищет элемент с идентификатором «demo» и, найдя его, помещает в него строку «Первый сценарий на JavaScript».
В действительности полная запись тега имеет следующий вид: . В атрибуте type указывается используемый язык скриптов. Однако в настоящее время существует не так уж много таких языков, и в HTML язык Javascript установлен как язык скриптов по умолчанию. Поэтому атрибут type использовать не нужно.
Также, обратите внимание на теги и . Этот тег срабатывает, когда по той или иной причине, например, выполнение сценариев отключено в настройках браузера, невозможно выполнить сценарий Javasсript.
Функции и события JavaScript
Функция JavaScript — это блок кода, который выполняется по «вызову».
Например, функция может вызываться при возникновении какого-нибудь события, вроде нажатия пользователем на кнопку мыши.
Подробнее о функциях и событиях вы узнаете позже в соответствующих главах.
JavaScript в теге и
В HTML документ можно вставлять любое число скриптов.
На HTML странице скрипты можно размещать внутри секции или , либо в обоих сразу.
В следующем примере функция JavaScript размещена в секции . Эта функция вызывается при нажатии пользователем на кнопку:
function myFunction() Веб-страница
Параграф
В следующем примере функция JavaScript размещена в секции :
Веб-страница
Параграф
function myFunction()
Размещение скриптов в нижней части элемента увеличивает скорость отображения HTML документа, так как компиляция скриптов замедляет рендеринг веб-страницы.
Внешний JavaScript
Скрипты также можно размещать во внешних файлах:
Внешний файл: myScript.js
function myFunction()
Внешние скрипты оправданы тогда, когда нужно один и тот же сценарий использовать в нескольких HTML документах.
Обычно у файлов JavaScript расширение .js.
Чтобы использовать внешний скрипт, нужно поместить имя файла Javascript в атрибут src тега :
Подключать внешние скрипты можно внутри тега или .
Скрипт будет вести себя так же, как если бы он был вставлен непосредственно внутри тега .
Внимание! Внешние скрипты не могут содержать теги .
Преимущества внешних JavaScript
У размещения скриптов во внешних файлах есть ряд преимуществ:
- Разделяется HTML и Javascript код
- Становится проще читать и обслуживать HTML и JavaScript
- Благодаря кешированию файлов JavaScript увеличивается скорость загрузки веб-страницы
Чтобы добавить несколько файлов скриптов на HTML страницу, достаточно вставить нужное число тегов :
Внешние ссылки
В качестве ссылок на внешние скрипты может использоваться либо абсолютный URL, либо относительный путь к текущей веб-странице.
В следующем примере для подключения внешнего скрипта используется полный URL:
В следующем примере скрипт расположен в подкаталоге текущего веб-сайта:
В следующем примере скрипт расположен в том же подкаталоге что и текущая страница:
Устаревшие и нестандартные браузеры
Для обеспечения совместимости со старыми браузерами, которые не умеют работать со скриптами Javascript, код скрипта размещают внутри тегов комментариев HTML и —>. Если пренебречь этой предосторожностью, то браузер, не знающий Javascript, просто выведет на экран код скрипта в виде обычного текста. К счастью таких нестандартных браузеров в настоящее время практически не осталось. Однако подобный код все еще встречается, и стоит знать для чего он используется.
Пример JavaScript
В приведенном выше примере сразу же после тега