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

Часто для реализации задуманного функционала на сайте или в блоге нам требуется внедрить некий 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

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

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

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

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

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

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

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

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

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

    ОтветитьУдалить

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

BestProject