Sfera-perm.ru

Сфера Пермь
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Javascript счетчик по клику

Замыкания

Курсы Веб-вёрстка
Акция! -30%

Курс Фронтенд-разработчик -30%

Курсы Python-разработчик -40%

Разработчик игр на UNITY
Акция! -40%

Курс JavaScript/jQuery с нуля -30%

Курс Linux/GIT/Hosting -40%

Курс: Основы HTML и CSS

Курс: Разработка на C#

Курс: Python-разработчик с нуля

Осваивайте профессию, начните зарабатывать, а платите через год!

Курсы Python Ак­ция! Бес­плат­но!

Станьте хакером на Python за 3 дня

Веб-вёрстка. CSS, HTML и JavaScript

Курс Bootstrap 4

Станьте веб-разработчиком с нуля

Замыкание (англ. closure) – функция, в теле которой присутствуют ссылки на переменные, объявленные вне тела этой функции в окружающем коде и не являющиеся её локальными переменными или передаваемыми параметрами. Говоря другим языком, замыкание – функция, которая ссылается на свободные переменные в своей области видимости.

Лексическая область видимости

Как и в большинстве современных языков программирования, в JavaScript используются лексические области видимости, или лексический контекст (англ. lexical scope).

Если одна функция определена внутри другой, внутренняя имеет доступ к области видимости внешней. Это называется «лексической областью видимости» или «замыканием».

Почему такое происходит? Когда функция вызывается, у нее создается специальнй внутренний объект LexicalEnvironment , в котором хранятся все локальные переменные этой функции, а также ссылка на внешнюю область видимости.

Простой для понимания пример:

Интерпретатор JavaScript на стадии инициализации, ещё до выполнения первой строчки кода, создает пустой объект LexicalEnvironment и заполняет его:

  • В нашем случае есть локальная переменная name , у которой сразу есть значение (аргумент, который мы передаем) и это «John».
  • Как известно, интерпретатор JavaScript «поднимает» объявления переменных в начало области видимости, при этом, присваивание значений переменным не поднимается вместе с их объявлением. Именно по этому у нас в самом начале функции уже есть переменная phrase и она равна undefined .

На стадии выполнения функции происходит присвоение локальной переменной phrase , и наш объект LexicalEnvironment меняется. Его свойство phrase становится равным тому, что мы записали – «Hello, John» .

После того, как функция отработала, объект LexicalEnvironment уничтожается и память очищается. При последующих вызовах функции он будет создан снова и т.д.

А теперь давайте как будет вести себя функция, если в её теле не объявлена локальная переменная:

В JavaScript есть скрытое свойство, которое называется [[Scope]] . Когда функция объявляется, то она всегда объявляется в какой-либо области. Эта функция может быть объявлена в другой функции, в глобальном объекте и т.д. В нашем случае функция объявлена в глобальном объекте window , поэтому свойство greeting.[[Scope]] равно window .

Интерпретатор JavaScript, при доступе к переменной, сначала пытается найти переменную в текущем объекте LexicalEnvironment , а затем, если её нет – ищет во внешнем объекте переменных. В нашем случае переменную name интерпретатор возьмет из объекта LexicalEnvironment , а переменную phrase из объекта window . Конечно, если у нас будет одноименная локальная переменная phrase , то она запишется в объект LexicalEnvironment и впоследствии будет взята оттуда, а не из внешней области видимости.

Читайте так же:
Метод измерения диафрагменного счетчика

Обратите внимание, что свойство [[Scope]] устанавливается по тому месту, где функция была объявлена, а не вызвана, именно поэтому код ниже выведет Hello, John , а не Bye, John :

Замыкания

Как было сказано выше, в конце выполнения функции объект с переменными LexicalEnvironment обычно уничтожается и память очищается. В примерах выше так и происходит.
Однако что, если мы хотим сохранить эти данные? Т.е. мы хотим, чтобы все, что записано в объект LexicalEnvironment сейчас, сохранилось и было доступно при следующих вызовах? Именно для этого и существуют замыкания.

Итак, замыкание – это область действия, которая создается при объявлении функции и позволяет ей получать доступ к внешними (свободным) по отношению к ней переменными.

На заметку: Свободные переменные — это переменные, которые не объявлены локально в рассматриваемой функции и не передаются ей в качестве параметров.

Это понятие лучше всего пояснить на примере конкретного кода. Поэтому начнем с небольшого кода, реализующего функцию-счетчик:

В приведенном выше примере кода переменная count и функция counter объявляются в одной и той же области действия (в данном случае в глобальной window ). После этого функция выполняется, при этом переменная count доступна для данной функции. Мы с вами только что невольно создали самое простое замыкание!

Приведенный пример, по-видимому, вас не особенно впечатляет. Здесь переменная и функция объявлены в глобальной области действия, которая вообще не завершается (пока страница загружена), и поэтому переменная count существует в данной области действия и по-прежнему доступна для функции.

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

В этом примере мы вызываем функцию outerCounter , которая создает функцию counter и возвращает ее вместе с окружением, содержащим свободную переменную count . Обратите внимание, что мы возвращаем функцию, а не её значение ( return counter , а не return counter() ). Таким образом создаётся замыкание. Функция, возвращенная из outerCounter , сохраняется в runCount .

Для глобальной области действия переменная count остается невидимой. Тем не менее мы можем использовать ее при каждом вызове функции runCount . К переменной count невозможно обратиться иначе, кроме как при вызове runCount .

Читайте так же:
Потребителей снимают со счетчика

Далее в примере мы outerCounter присваиваем null , т.е. мы просто уничтожаем нашу функцию outerCounter . Однако, когда мы вызовем runCount() , то увидим очередное значение переменной count функции outerCounter . Как такое возможно? Все дело в том, что наша возвращаемая функция counter() также имеет свойство [[Scope]] , которое ссылается на внешнюю область видимости, а эта внешняя область видимости в нашем случае – объект LexicalEnvironment нашей функции outerCounter . Объект LexicalEnvironment не удалился вместе с функцией outerCounter и остался в памяти, и будет оставаться в памяти до тех пор, пока на него будет хотя бы одна ссылка. В нашем случае эта ссылка – возвращаемая функция counter , которая использует переменную count этого объекта LexicalEnvironment .

Примечание: В рассмотренном примере используется именованное функциональное выражение. Это не обязательно, но удобно для ссылок на имя внутренней функции. Возвращаемая функция должна вызываться по ссылке на внешнюю функцию runCount (а не counter ).

Упростим немножко пример выше – уберём необходимость отдельно вызывать функцию outerCounter , сделав ее аномимной и вызвав сразу же после ее объявления:

Как добавить счётчик посетителей на сайт

Google Analytics

В Вебасисте есть встроенная интеграция с сервисом Google Analytics, поэтому для его подключения нужно только сохранить ваш номер аккаунта (Google Analytics Property ID вида UA-123456-1) в поле настроек.

  1. В приложении «Сайт» перейдите в раздел «Настройки сайта».
  2. Вставьте свой идентификатор в поле «Google Analytics Property ID».
  3. Если в своем Google-аккаунте вы используете Universal Analytics, то включите флажок рядом с полем для ввода номера аккаунта. Как узнать, используется ли Universal Analytics.
  4. Сохраните настройки «Сайта».

Другие счетчики («Яндекс.Метрика», HotLog)

Счетчик посетителей обычно предоставляется популярными веб-сервисами в виде фрагмента JavaScript-кода, который необходимо вставить в исходный код страниц сайта.

Фрагмент JavaScript-кода можно добавить на сайт 2 способами.

Способ 1. Пользовательский JavaScript-код в настройках «Сайта»

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

  1. В приложении «Сайт» перейдите в раздел «Настройки сайта».
  2. Вставьте скопированный фрагмент кода в поле «Дополнительный JavaScript-код для вставки перед закрывающим тегом » и сохраните настройки сайта.

Готово: счётчик добавлен на сайт.

Способ 2. Вставка блока «Сайта» в шаблон дизайна

  1. В приложении «Сайт» перейдите в раздел «Блоки».
  2. Создайте новый блок, придумайте для него любой идентификатор (допускаются латинские буквы, цифры и символы подчеркивания) и описание, чтобы не забыть, для чего вы создали этот блок. Описание блока не будет видно на сайте.
  3. Добавьте в редакторе исходного кода блока следующие строки:
Читайте так же:
Когда появились общедомовые счетчики

Это нужно для того, чтобы фигурные скобки, используемые в JavaScript, правильно обрабатывались шаблонизатором Smarty, который используется в Вебасисте.

  • Вставьте код счетчика между этими строками, как показано в примере выше, и сохраните блок.
  • После сохранения блока в верхней панели появится автоматически сформированный фрагмент кода (хелпер). Скопируйте этот хелпер.
  • Для того чтобы счетчик срабатывал на всех страницах витрины интернет-магазина, добавьте хелпер блока в шаблон index.html вашей темы дизайна, например, как показано на рисунке:
  • Простой калькулятор на JavaScript

    Проще уже некуда

    Сегодня сделаем простейший калькулятор на JavaScript, но не просто так, а с умыслом. Позднее мы представим, что мы тестировщики, и попробуем протестировать этот калькулятор. Вернее, не протестировать, а дико сломать.

    Что делаем

    На старте у нас будет самый простой калькулятор, который сможет только складывать, вычитать, умножать и делить два числа. Этого уже будет достаточно, чтобы потренироваться и в коде, и в дальнейшем тестировании.

    Логика работы

    Так как это простой калькулятор, то поступим так:

    1. Сделаем поле ввода для первого числа.
    2. Под ним разместим 4 кнопки с математическими действиями.
    3. Потом сделаем поле ввода для второго числа.
    4. И внизу будет кнопка «Посчитать».

    Размещаем кнопки и поля ввода на странице

    Разместим кнопки с полями на странице, а потом будем писать скрипт.

    Обрабатываем нажатия на кнопки математических действий

    Сейчас у нас есть 4 кнопки, но нажимать их бесполезно — всё равно ничего не произойдёт, потому что нет обработчиков нажатий. Но что нам прописывать в обработчике?

    Первый вариант — привязать к каждой кнопке свою функцию, а потом для каждой операции выполнять свои действия внутри этого обработчика. Но раз у нас есть кнопка «Посчитать», то нам придётся при нажатии на неё из этих четырёх функций вытаскивать действие и нужные команды, запоминать выбранное и как-то использовать в вычислениях. Сложно и громоздко.

    Второй вариант — просто записывать в какую-то переменную, какая кнопка была нажата. А потом, при нажатии «Посчитать», просто смотреть в эту переменную и выполнять соответствующее действие. Так и поступим.

    Воспользуемся хитростью, про которые многие забывают: в обработчике onclick необязательно писать только функцию — туда можно отправить любую JS-команду. Главное, не забыть потом в скрипте предусмотреть эту переменную, которую мы используем.

    Читайте так же:
    Кто оплачивает замену общедомового счетчика

    Пишем скрипт

    Сам скрипт тоже будет простой:

    1. Берём два числа.
    2. Смотрим, какое значение в переменной для выбранного действия.
    3. В зависимости от этого вычисляем результат.

    Сразу привяжем функцию func() к нажатию на кнопку «Посчитать»:

    Выводим результат

    Сейчас в скрипте есть проблема: он всё считает, но ничего не выводит. А всё потому, что мы не предусмотрели на странице место для вывода. Исправим это и добавим строчку в скрипт.

    Это — добавим на страницу после кнопки с расчётом:

    А это — в функцию func(), чтобы она сразу отправляла результат на страницу:

    Собираем всё вместе и смотрим результат

    Отлично, калькулятор работает и складывает всё как нужно! Мы выполнили свою задачу — быстро запилили калькулятор на JavaScript, можно закрывать задачу в таск-трекере и браться за новую.

    Что дальше

    Дальше мы этот код отправим тестировщикам — вряд ли они в нём найдут что-то критичное или вообще какие-то ошибки, но правила есть правила. А если тестировщики тут что-то найдут, мы обязательно расскажем об этом в новой статье.

    Попробуйте сами побыть тестировщиком и протестировать эту программу, а результатами тестирования поделитесь в комментариях.

    Kama Click Counter

    Плагин умеет считать клики по указанным ссылкам и выводить блок загрузки файлов, клики по которому подсчитываются. Альтернатива, на мой взгляд, не очень удобному Downloads Manager.

    Лирика

    Я конечно согласен, что без интернета ужасно, но так бывает не всегда. Права была моя «еврейская бабушка», когда говорила, – нет худа без добра. Вот и я в этом убедился.

    Очередная поломка на АТС, которая периодически расшатывает мою, и без того нестабильную, нервную систему, навела меня на разные мысли. Череда хаотичных и не нужных мыслей кончилась ровно тогда, когда я решил улучшить свой плагин, умеющий считать клики по ссылке, с незамысловатым названием Kama Click Counter.

    Первую версию плагина я набросал в Марте 2011 года, и стало как-то легче дышать, потому что удалил «Downloads Manager» с этого блога. Как же меня раздражало добавление в нем новых файлов.

    Вторая версия родилась как раз в эти «безинтернетные» дни. Сначала было так, а сейчас стало так:

    О плагине

    Kama Click Counter – плагин для WordPress, который считает количество загрузок файла. Файлы загружаются отдельно. Также плагин умеет считать клики на любые другие ссылки в статье и теме вцелом — какие угодно.

    Kama Click Counter плотно связан с медиатекой WordPress. Если указанный для подсчета файл находится в медиатеке WordPress, то ссылка привязывается к этому файлу: при изменение названия или описания у файла из плагина они так же меняются у файла в медиатеке и наоборот. При удалении файла из медиатеки ссылка также удаляется из таблицы ссылок у плагина, но не наоборот. Визуально привязка видна в поле «Аттач» на странице статистики.

    Читайте так же:
    Патрон для старого счетчика

    Файлы загружаются через файловый загрузчик WordPress или как-то еще, нет разницы. Затем, копируем ссылку на загруженный файл используем кнопку в визуальном редакторе:

    В результате будет вставлен шоткод, который при просмотре записи будет заменен на html код — шаблон, который указывается в настройках плагина:

    Шаблон можно изменить под себя в настройках:

    Другие настройки

    html класс ссылки

    Плагин умеет считать клики на любые ссылки. Чтобы активировать подсчет ссылке нужно добавить класс count (class=»count»). Название класса меняется в настройках.

    Количество кликов для простых ссылок

    Включив эту опцию, можно выводить статистику кликов по ссылке «в аттирбуте title» или «текстом после ссылки». По умолчанию количество кликов не выводится для экономии на запроса к базе данных.

    Различать ссылки с разных постов

    Если галочка отмечена (по умолчанию), то плагин будет считать одинаковые ссылки с разных постов отдельно. Т.е. для каждого поста будет вестись свой подсчет кликов. Если такая опция не нужна, снимите галочку, тогда одинаковые ссылки будут записываться в одно место.

    Добавить ли jQuery

    Без этой галочки. Плагин будет считать ссылки с классом count только в контенте статьи. Если эта опция установлена, то в подвал сайта будет добавлен маленький jQuery код, благодаря которому можно указывать класс count для абсолютно любой ссылки на сайте и клики по ней будут фиксироваться в статистике. Отключать эту опцию в общем-то нет смысла, она никак не грузит ничего, единственная причина отключить её — это если у вас на сайте не используется jQuery и ради этой опции подключить библиотеку вы не хотите.

    Редактирование статистики

    После того, как ссылка записана в базу данных, её аттрибуты, такие как: размер файла, название, описание, количество кликов, можно изменять, для этого нажмите на ссылку «Изменить» на странице статистики и вы попадете на такую страницу:

    Установка

    Как устанавливать любой плагин читайте в этой статье.

    Удаление плагина

    Удалять плагин нужно как все плагины WordPress: со страницы плагинов, кнопка «удалить», когда плагин деактивирован. При удалении плагина со страницы плагинов, плагин удаляет за собой все: свою таблицу в базе данных и опции.

    голоса
    Рейтинг статьи
    Ссылка на основную публикацию
    Adblock
    detector