Главная » Создание сайта, раскрутка сайта

Как подключить JS-скрипты к HTML-коду страницы?

как подключить js-скрипт к коду страницы

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

Есть два способа вызова JavaScript в HTML-коде страницы:

  1. <script type='text/javascript' src='путь_к_скрипту'></script>
  2. <script type='text/javascript'>код_скрипта</script>

Первый способ подключает js-файл, который может быть расположен как в одной из директорий сайта, так и на другом ресурсе. Второй способ встраивает код js-файла в HTML-код страницы. Тут стоит разобраться в том, что использование того или другого метода должно зависеть от объема js-скрипта. Если объем скрипта достаточно большой, то лучше будет вызвать его из файла. Кроме этого, большие по объему скрипты можно оптимизировать, ознакомившись со статьей как сжать JS-скрипты. Но если же весь код скрипта заключен в несколько строчек, то встраивание JavaScript в HTML код страницы будет более правильным. Встраивание небольшого по размеру js-кода лишает сервер необходимости запрашивать этот самый файл, что в свою очередь уменьшит задержки при загрузке других ресурсов и сократит время обработки страницы.

Какие по объему JS-скрипты необходимо встраивать в HTML код?

Хорошей подсказкой для встраивания JavaScript может послужить Page Speed от Google. Данный инструмент подскажет вебмастеру какие .js и .css-файлы должны быть встроены в HTML код страницы.

Что делать с JS-скриптами, которые вызываются с других сайтов?

Со скриптами, которые вызываются из других сайтов, можно провернуть следующие действия:

  1. Находите их и копируете их код.
  2. Создаете в текстовом редакторе аналогичный js-скрипт.
  3. Заливаете его в корневую(или в любую другую) директорию своего сайта.
  4. Изменяете путь вызова js-скрипта на адрес, по которому расположился Ваш скрипт.

В основном проблемы могут возникнуть с 4-ым пунктом. В статье «Как встроить небольшой css-файл в HTML-код страницы» я описал алгоритм, с помощью которого в CMS WordPress можно найти место вызова стиля и изменить его, встроив вместо него небольшой css-файл. Данный алгоритм вполне подойдет и для js-файлов.

Где лучше подключить JavaScript?

JavaScript лучше всего подключить в футере(footer) страницы. Разместив js-скрипт в начале(head) или середине(body) страницы, Вы приостановите загрузку страницы на время выполнения данного скрипта. Если же скрипт будет размещен в конце страницы и будет выполняться только после загрузки основного содержимого страницы, пользователи смогут быстрее начать изучать материал. Ну, а скрипты подтянуться позднее. К тому же, желательно скрипты загружать после css-файлов. Почему после, а не до стилей, читайте в статье Оптимизация порядка загрузки стилей и скриптов, в которой этот момент подробно рассмотрен.

2 комментариев к записи “Как подключить JS-скрипты к HTML-коду страницы?
  1. Сергей в cказал :

    Извините конечно, но таким путем JavaScript почему то не подключается, ну или не выполняется.(Я с этим на большое ВЫ) В общем вывожу средствами php JavaScript и все работает, но как только вывожу подключение к коду и удаляю функцию с загружаемой страницы работать отказывается! ПОМОГИТЕ! функции на JavaScript нужны на многих страницах! Тупо копировать не вариант, они слишком большие!

    • admin в cказал :

      Просмотрите исходный код любого сайта и любой страницы — по другому скрипты не подрубишь. Где то ошибаетесь.

      А можно подробнее? Вы скрипт хотите в отдельном файле подключить?

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

Ваш комментарий появится после модерации.