Валидный скрипт счётчика: рецепт компактного скрипта

В наши дни существует великое множество счётчиков и систем статистики. Выбор воистину велик, но большинство из них не удовлетворяют требованиям xHTML. В этой статье я покажу пару фишек, которые позволят навсегда избавится от громоздкого кода, помогут приблизить структуру кода вёрстки к минимализму.

Для экспериментов мы возьмем самый обычный скрипт счётчика HotLog и хорошенько его изучим. Для наглядности я буду поэтапно изменять код и комментировать свои действия. Поехали.

HotLog счётчик: базовый код

<!-- HotLog --> 
<script type="text/javascript" language="javascript"> hotlog_js="1.0"; hotlog_r=""+Math.random()+"&s=2016268&im=133&r="+ escape(document.referrer)+"&pg="+escape(window.location.href); document.cookie="hotlog=1; path=/"; hotlog_r+="&c="+(document.cookie?"Y":"N"); </script>
<script type="text/javascript" language="javascript1.1"> hotlog_js="1.1"; hotlog_r+="&j="+(navigator.javaEnabled()?"Y":"N"); </script>
<script type="text/javascript" language="javascript1.2"> hotlog_js="1.2"; hotlog_r+="&wh="+screen.width+"x"+screen.height+"&px="+ (((navigator.appName.substring(0,3)=="Mic"))?screen.colorDepth:screen.pixelDepth); </script>
<script type="text/javascript" language="javascript1.3"> hotlog_js="1.3"; </script>
<script type="text/javascript" language="javascript"> hotlog_r+="&js="+hotlog_js; document.write('<a href="http://click.hotlog.ru/?2016268" target="_top"><img '+ 'src="http://hit32.hotlog.ru/cgi-bin/hotlog/count?'+ hotlog_r+'" border="0" width="88" height="31" alt="HotLog"><\/a>'); </script>
<noscript>
<a href="http://click.hotlog.ru/?2016268" target="_top">
<img src="http://hit32.hotlog.ru/cgi-bin/hotlog/count?s=2016268&im=133" border="0" width="88" height="31" alt="HotLog">
</a>
</noscript>
<!-- /HotLog -->

Если мы присмотримся к счётчику, то обратим внимание, что он состоит не из одного скрипта, а целых пяти! Зачем нам столько хлама? Зачем определять версию JS поддерживаемую клиентской машиной? Нещадно режем лишнее:

HotLog счётчик: компактный вид.

<!-- HotLog -->
<script type="text/javascript">
hotlog_js="1.3";
hotlog_r=""+Math.random()+"&s=2016268&im=133&r="+
escape(document.referrer)+"&pg="+escape(window.location.href);
document.cookie="hotlog=1; path=/"; hotlog_r+="&c="+(document.cookie?"Y":"N");
hotlog_r+="&j="+(navigator.javaEnabled()?"Y":"N");
hotlog_r+="&wh="+screen.width+"x"+screen.height+"&px="+
(((navigator.appName.substring(0,3)=="Mic"))?screen.colorDepth:screen.pixelDepth);
hotlog_r+="&js="+hotlog_js;
document.write('<a href="http://click.hotlog.ru/?2016268" target="_top"><img '+
'src="http://hit32.hotlog.ru/cgi-bin/hotlog/count?'+
hotlog_r+'" border="0" width="88" height="31" alt="HotLog"><\/a>');
</script>
<noscript>
<a href="http://click.hotlog.ru/?2016268" target="_top">
<img src="http://hit32.hotlog.ru/cgi-bin/hotlog/count?s=2016268&im=133" border="0"
width="88" height="31" alt="HotLog" />
</a>
</noscript>
<!-- /HotLog -->

Мы объединили скриты в один и теперь он выглядит гораздо приятнее. Что можно сделать еще? А давайте вынесем его за пределы страницы в отдельный файл. Для этого просто скопируйте всё, что находится между тегами <script></script>, создайте новый текстовый файл с расширением js, вставьте в него код и сохраните.

Перенесите новый скрипт со счётчиком к себе на сервер и подключите так, как показано в примере ниже:

HotLog счётчик: финальный вид.

<!-- HotLog -->
<script type="text/javascript" src="/stat.js"></script>
<noscript>
<a href="http://click.hotlog.ru/?2016268" target="_top">
<img src="http://hit32.hotlog.ru/cgi-bin/hotlog/count?s=2016268&im=133" border="0"
width="88" height="31" alt="HotLog" />
</a>
</noscript>
<!-- /HotLog -->

Обращу ваше внимание на содержимое тега <noscript>. Это изображение-баннер, которое будет показано пользователю при отключенных JavaScript. Логика браузера будет следующей: первым делом он попытается выполнить скрипт над тегом <noscript>. Там счётчик формирует параметры катринки и ссылки, которая будет отрисована. При невозможности выполнить скрипт пользователю покажется обычная картинка, код которой находится в <noscript>.

Вот так просто и быстро груда кода обретает чистый и опрятный вид. Замечу, что этот алгоритм применим абсолютно ко всем счётчикам на базе джава скриптов. Вы можете даже собрать все счётчики в один файл, что позволяет существенно разгрузить вёрстку и сделать сайт более семантичным.

Еще одним немаловажным моментом является то, что некоторые счётчики невалидны. На самом деле проблема валидности кроется в url строках, которые в соответствии со спецификацией не должны содержать в чистом виде такие символы, как например &. Решает это довольно просто.

<img src="http://shift-web.ru/rater/counter.html?id=7&addr=&ref=&j=false&dep=&rez=" alt="Shift-Web Rater" width="88" height="31" />

Заменим их HTML аналогами.

<img src="http://shift-web.ru/rater/counter.html?id=7&addr=&ref=&j=false&dep=&rez=" alt="Shift-Web Rater" width="88" height="31" />

Не забудьте прописать правильный путь до скрипта со счётчиком и имя файла. Успехов в минимализме и «валидаторстве»!