Как добавить скрипт на сайт

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

Что такое и зачем нужен 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>
 //<![CDATA[
  //здесь JavaScript код
 //]]>
 </script>

 </head>
 <body>
 Размещенный внутри шаблона скрипт, также можно выполнять только на определенных страницах, заключая его в условные теги


  JavaScript для Blogger-блогов во многом не заменимый помощник, впрочем, как и для любых других сайтов и блогов различных платформ, именно поэтому хотя бы минимальные знания в области у любого самостоятельного блогера должны присутствовать.
©http://magentawave.com

10 комментариев:

  1. Подскажите, не раз сталкивался когда одна HTML страница формируется из нескольких, в которых не указан тег head, а если он указывается то не работает.
    Можно ли считать за ошибку, если скрипт или его подключение указывать прямо в теле документа? Ведь этот скрипт нужен именно тогда, когда загружается этот кусок страницы... или же правильней будет подключить скрипт в самом начале родительского документа. Но тогда будут грузиться вместе с сайтом те скрипты, которых пользователь может даже и не увидит в работе...

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

      Удалить
  2. Анонимный16.12.2013, 13:51

    В ступоре от разноголосицы где вставлять скрипт. Теперь говорят надо вставлять не в хеад а в конце хтмл страницы. Так где правда?

    ОтветитьУдалить
  3. Может это смотря где будет расположен элемент. В заголовке или в Футоре шаблона... Я лично статью не поняла... буду осмысливать...

    ОтветитьУдалить
    Ответы
    1. Не важно где находиться элемент, важно какие задачи возлагаются на скрипт и как он написан, т.е. алгоритм работы с требуемым элементом. Иногда, для успешного выполнения, скрипт должен находится непосредственно после элемента, все зависит от кода.

      Удалить
  4. Познавательная статья. Спасибо.

    ОтветитьУдалить
  5. Анонимный04.03.2016, 23:20

    Не нашла более подходящего поста, куда это написать. А нет ли у вас готового скрипта, отображающего (цифрой) количество просмотров каждой статьи на Blogger?

    ОтветитьУдалить
  6. Анонимный12.02.2021, 10:25

    На Блоггере после скрипта видно кусок кода //]]> как убрать?

    ОтветитьУдалить
    Ответы
    1. Переместите его перед данным скриптом

      Удалить

Следующее Предыдущее

BestProject