Schetchiksg.ru

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

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

jQuery Счётчик кликов

На этой тестовой странице сайта проверяю интересную возможность использования jQuery для подсчёта кликов и, что особенно интересно, по каждой из тестовых кнопок отдельно !

Работу управляющего скрипта и ядра jQuery показываю сразу. Подробности о создании — под рисунками мотоциклов.

Пример работы счётчика

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

А здесь счётчик кликов выводит результат.

Для повторного просмотра работы скрипта счётчика, страницу нужно перезагрузить.

Создание счётчика кликов

Сначала создал в HTML-коде три кнопки с разным текстом, на которых и проверяется работа кода счётчика.

После подключил библиотеку jQuery отдельным файлом, и прописал JavaScript-код внутри кода этой страницы, который и считает сделанные клики.
Prim* Этот, написанный, JavaScript-код в отдельный файл НЕ ВЫРЕЗАТЬ! Перестанет работать!

Настройка размера, жирности и цвета цифр и рамок у полей вывода результатов производится атрибутом «style» в блоке вывода у каждого из тэгов «span» HTML-кода этой страницы.

Если в управляющем коде вместо строки: $(‘.counter’).eq($(this).index()).text($(this).data(‘counter’)); которая прописана сейчас, прописать другую, попроще, то результат кликов будет выводится уже по-другому!

Если, вместо показанной выше строчки кода, написать такую: alert($(this).data(‘counter’)); тогда результат кликов будет выводиться во всплывающем окне. Тоже неплохо!
Однако, пользователю будет не особо ясно, результат кликов по какой именно(?!) кнопке оно показывает.

* Обе строчки скрипта срабатывают ПРАВИЛЬНО! *
Но всё же вариант, использованный в управляющем коде сейчас, гораздо лучше. Понятнее!

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

Использование счётчика

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

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

Для практического использования счётчика кликов, чтобы получать данные о том, что именно заинтересовало посетителя сайта, сколько раз он кликнул по тому или иному элементу веб-страницы, нужно применять уже более сложную технологию. И подобная технология существует!

Это совместное использование двух языков программирования: «PHP и JavaScript» (откроется в новом окне) .

Все права защищены. Copyright © 2009 — Коротеев Владимир.

Яндекс Метрика. Цель на Javascript событие.

Когда вы будете настраивать цели в системе Яндекс Метрика, можно столкнуться с видом цели, который называется Javascript-событие.

Это находится в меню «Настройка — Цели — Добавить цель».

Каким образом можно настроить данный вид цели у себя на сайте?

На этой странице небольшая вводная инструкция о том, как это можно сделать. Полный курс по работе и настройке целей в системе Яндекс Метрика находится здесь. Переходите по ссылке.

Читайте так же:
Wix разместить яндекс счетчик

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

Все, что можно сделать внутри аккаунта Яндекс Метрики для этого вида цели — это придумать уникальный идентификатор цели.

Разумеется, придумав и указав этот идентификатор, цель на Javascript — событие работать еще не будет.

Для того, чтобы эта цель начала работать и начала передавать данные в систему Яндекс Метрика, нужно на вашем сайте добавить специальный код, который будет сообщать Яндекс Метрике, что цель с тем или иным идентификатором была выполнена.

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

Метод, который отвечает за передачу информации о выполнении Javascript цели на вашем сайте называется reachGoal.

Вызвать выполнение этого метода можно с помощью языка Javascript.

Все, что нужно сделать, чтобы данные о выполнении Javascript-цели передались в Яндекс Метрику — это зафиксировать нужное событие, которое произвел пользователь на той или иной странице вашего сайта и вызвать метод reachGoal.

Событий, при которых может быть выполнена Javascript цель на вашем сайте, может быть очень много.

  • Клик по какому-либо элементу.
  • Отправка данных формы.
  • Переход на определенную страницу сайта, и.т.д.

После того, как вы определитесь с тем событием, при выполнении которого должна быть выполнена Javascript-цель Яндекс Метрики, нужно с помощью языка Javascript зафиксировать это событие и вызвать метод reachGoal.

Давайте рассмотрим простой пример.

Предположим, на вашем сайте есть какая-либо кнопка-ссылка. Необходимо, чтобы при клике по этой кнопке, выполнялась Javascript — цель и данные об этом клике передавались в Яндекс Метрику.

К примеру, это может быть вот такой код:

Первое, с чего нужно начать — это определиться со способом, как можно зафиксировать событие клика по элементу.

Это можно сделать разными способами:

  • С помощью HTML-атрибутов.
  • С помощью библиотеки jQuery для языка Javascript
  • С помощью диспетчера тэгов Google Tag Manager.

Подробнее в видео.

На этой странице небольшая вводная инструкция о том, как это можно сделать. Полный курс по работе и настройке целей в системе Яндекс Метрика находится здесь. Переходите по ссылке.

В каждой ситуации нужно подходить по своему. Наиболее универсальное и удобное решение, на мой взгляд — это использование диспетчера тэгов Google Tag Manager. Но, работа с этим инструментом — это тема другой статьи, поэтому затрагивать этот способ здесь я не буду.

Аналогично, ситуация обстоит со способом использования библиотеки jQuery.

Проще всего передать информацию о выполнении цели с помощью HTML-атрибутов. На этом способе мы сейчас и остановимся.

Для этого способа важно, чтобы вы имели доступ и могли отредактировать исходный HTML-код нужного элемента.

Читайте так же:
Счетчик нажатия кнопки excel

Для того, чтобы зафиксировать событие клика по элементу, в Javascript можно воспользоваться HTML-атрибутом onClick (в буквальном смысле переводится как «при клике»). Т.е. при клике по ссылке-кнопке, можно вызвать метод reachGoal, который передаст информацию в Яндекс Метрику о выполнении Javascript-цели.

Выглядеть это будет следующим образом:

XXXXXXXX — это уникальный идентификатор вашего счетчика в системе Яндекс Метрика.

aimId — это идентификатор цели, который указывался при создании цели в Яндекс Метрике.

reachGoal — это метод, который передает в Яндекс Метрику информацию о том, что была выполнена цель с указанным идентификатором.

Собственно, все. Вот таким образом с помощью метода reachGoal мы с вами можем передать информацию о выполнении Javascript цели на вашем сайте и передать эту информацию в Яндекс Метрику.

Добро пожаловать в мир React

Сейчас вы на каждом шагу вы слышите: “React! Виртуальный DOM! Компоненты! JSX!”. Настало время внести ясность, что это такое, как с этим жить и работать.

Виртульный DOM

DOM до безобразия медленный. Это не секрет. Особенно хорошо вы можете это заметить при работе с большими объемами данных. Долгое время разработчикам с этим приходилось мириться, пока не пришёл он, супергерой React. В наши руки попал очень мощный инструмент — виртуальный DOM, который позволяет значительно уменьшить количество перерисовок и обращений к DOM дереву.

Разберём стандартную ситуацию. Представьте, что вы владелец крупного интернет-магазина и решили отображать на одной странице данные о всех ваших клиентах (число переваливает за несколько тысяч). Данные получаете с сервера (AJAX или JSONP) и отрисовываете их с помощью JavaScript на странице (например, вот так). Вы посылаете запрос на сервер каждую секунду и полностью обновляете все данные, так как не знаете, что изменилось. В результате каждую секунду вам необходимо заново отрисовать на странице несколько тысяч DOM элементов. Но зачастую большая часть данных остаётся неизменной и получается так, что из-за одного-двух значений приходится перерисовывать все остальные.

Гораздо логичнее было бы получить данные и сравнить их с более ранними, а потом отрендерить на страницу только разницу. Например, при очередном запросе пользователи под номерами 24, 678 и 3391 сделали заказ, значит и изменить нужно только те элементы, которые принимают непосредственное участие в отображении информации об этих пользователях. Именно этим и занимается React со своим виртуальным DOM.

Чтобы понять, как это происходит, достаточно представить себе структуру обычного документа, точнее то, как её видит браузер. window , document , все DOM элементы для браузера являются не более, чем обычными объектами (у некоторых подобное заявление вызывает шок и заставляет хорошенько задуматься). Такая “особенность” строения документа позволяет создать очень похожую виртуальную структуру и держать её в памяти в виде простых объектов, не являющихся DOM элементами. В случае же когда необходимо внести изменения сначала происходит сравнение с виртуальной копией, вычисляется разница, после чего эта самая разница и передаётся в реальный DOM. В результате мы имеем сверхбыстрые приложения с самым минимальным количеством перерисовок.

Читайте так же:
Счетчик мощности для сети

Но и это ещё не всё! Самое прекрасное в использование React не сам виртуальный DOM, а то, что вам абсолютно не нужно ничего делать самостоятельно. Любой компонент, созданный с помощью React, уже работает с виртуальным DOM. Таким образом, вы получаете возможность не думать о производительности при работе с DOM элементами — React всё сделает за вас максимально качественно и быстро, и вы сможете сосредоточиться на действительно важных задачах, а не бороться с оптимизацией.

Мир компонентов

Всё, что вы создаёте при работе с React является компонентом. Что такое компонент? Всё просто. Компонент — обычный JavaScript файл, содержащий JSX разметку и всю логику, необходимую для работы (в идеале ещё и все CSS правила). На первый взгляд всё кажется сложнее, чем есть на самом деле, поэтому начнём с простого примера обычной кнопки, увеличивающей счётчик по клику (живой пример на jsbin):

Состояние

Итак, компонент-кнопка, самый простой пример, который только можно придумать. Тем не менее, на столь малом количестве кода можно проиллюстрировать многие особенности работы с React. Начнём с состояния:

Задавая свойство state для текущего класса, вы говорите реакту: “Это данные, за которыми стоит следить”. При изменении состояния React будет проводить свои магические манипуляции с виртуальным DOM и заново рендерить все изменившиеся элементы. При использовании свойства state необходимо придерживаться одного простого правила: состояние задаётся присваиванием всего один раз при инициализации компонента. Другими словами, не стоит присваивать значения напрямую, а вместо этого использовать функцию setState :

Для изменения состояния чаще всего удобно создать отдельный метод, для кнопки подобный метод — increment , который и увеличивает счётчик на единицу:

С помощью свойства this.state.count мы получаем текущее значение, прибавляем к нему единицу и заново устанавливаем состояние. Но выше же было написано, что нельзя обращаться к свойствам объекта this.state ! Можно. Но только в том случае, если вы хотите получить значение, а не перезаписать его.

Непривычно писать HTML-разметку в JavaScript коде? Вы скоро привыкните и поймёте, что это очень удобно. На самом деле, всё, что возвращает метод компонентов render не более, чем шаблон, который вы хотите увидеть на странице. Другими словами, здесь работает обычная шаблонизация, которую, ко всему прочему, ещё и чрезвычайно удобна в использовании. На примере кнопки можно проследить немногое из того, на что способен JSX: создание DOM элементов, добавление обработчиков событий, создание атрибутов для элемента (вроде class ) и наполнение элемента содержимым (другими DOM элементами или обычным текстом). Всё это не выглядит таким впечатляющим, пока мы не дойдём до самой сути: все значения, находящиеся в <фигурных скобках>будут вычислены. Например, в любом месте вы можете написать < 2 + 3 >и получить число 5 . Разумеется, вы можете использовать и более сложные вычисления, вставлять свои переменные и функции, как и в приведённом выше примере:

Читайте так же:
Если живу один ставить счетчики
Свойства компонентов

Неплохо было бы ещё сделать и так, чтобы при инициализации компонента можно было передать какие-либо стартовые значения. Сделать это очень просто: достаточно создать нечто похожее на атрибут и передать в него значение:

Конструктору самого компонента вам необходимо передать аргумент, содержащий все эти настройки (чаще всего его называют просто props ).

Рендеринг

Мы создали компонент, это уже хорошо. Но React пока не знает, что с ним делать. Чтобы увидеть результат нашей работы во всей красе необходимо сообщить библиотеке react-dom , что надо всё это дело отрендерить и показать. Делается это очень просто с помощью функции render , которую мы предварительно изъяли из библиотеки: первым параметром функция принимает компонент, который нужно отрендерить, вторым — DOM элемент (или элемнты) в которых нужно отрендерить данный компонент:

Обработка событий

Подписка на события

Для подписки на события DOM и выполнения JavaScript-кода по их наступлении используйте директиву v-on .

Кнопка выше была нажата << counter >> раз

Обработчики событий

Логика обработчика события может быть довольно сложной, поэтому оставлять JavaScript-код в значении атрибута v-on не всегда возможно. В этом случае v-on может принять и название метода, который необходимо вызвать.

Методы и inline-обработчики

Кроме указания имени метода, можно использовать и JavaScript-выражения:

Иногда в inline-обработчиках необходим доступ к оригинальному событию DOM. Его можно передать в метод, используя специальную переменную $event :

Модификаторы событий

Очень часто возникает необходимость вызывать event.preventDefault() или event.stopPropagation() в обработчике события. Несмотря на то, что это легко сделать внутри метода, лучше сохранять чистоту логики и абстрагироваться от деталей реализации событий DOM.

Для решения этой задачи Vue предоставляет модификаторы событий для v-on , которые указываются как постфиксы и отделяются точкой:

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

При использовании модификаторов порядок имеет значение, потому что код генерируется в том же порядке. Поэтому v-on:click.prevent.self будет предотвращать все клики, в то время как v-on:click.self.prevent будет предотвращать клики только на самом элементе.

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

Vue также предоставляет модификатор .passive , соответствующий опции passive в addEventListener .

Модификатор .passive особенно полезен для повышения производительности на мобильных устройствах.

Не используйте вместе .passive и .prevent , потому что .prevent будет проигнорирован и браузер возможно покажет предупреждение. Помните, что .passive сообщает браузеру, что вы не хотите предотвращать поведение по умолчанию для события.

Читайте так же:
Где должен размещаться счетчик

Модификаторы клавиш

При обработке событий клавиатуры нас часто интересуют конкретные клавиши. Vue позволяет использовать модификаторы клавиш при использовании v-on для отслеживания событий от клавиатуры:

Можно также использовать любые допустимые имена клавиш, предоставляемые через KeyboardEvent.key в качестве модификаторов, именуя их в kebab-case.

В примере выше обработчик будет вызываться только если $event.key будет ‘PageDown’ .

Коды клавиш

Использование значения keyCode событий — устаревшая практика и может не поддерживаться в новых браузерах.

Использование значений keyCode также разрешено:

Vue предоставляет псевдонимы для наиболее часто используемых клавиш, когда это необходимо для поддержки устаревших браузеров:

  • .enter
  • .tab
  • .delete (ловит как «Delete», так и «Backspace»)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

Некоторые клавиши ( .esc и все клавиши со стрелками) имеют несогласованные значения в IE9, поэтому их встроенные псевдонимы должны быть предпочтительными, если необходимо поддерживать IE9.

Можно также определить пользовательские псевдонимы клавиш через глобальную опцию config.keyCodes :

Системные модификаторы клавиш

Можно использовать следующие модификаторы для отслеживания событий мыши или клавиатуры с зажатой клавишей-модификатором:

  • .ctrl
  • .alt
  • .shift
  • .meta

Примечание: На клавиатурах Apple клавиша meta отмечена знаком ⌘. На клавиатурах Windows клавиша meta отмечена знаком ⊞. На клавиатурах Sun Microsystems клавиша meta отмечена символом ромба ◆. На некоторых клавиатурах, особенно MIT и Lisp machine и их преемников, таких как Knight или space-cadet клавиатуры, клавиша meta отмечена словом «META». На клавиатурах Symbolics, клавиша meta отмечена словом «META» или «Meta».

Обратите внимание, клавиши-модификаторы отличаются от обычных клавиш и при отслеживании событий keyup они должны быть нажаты, когда событие генерируется. Другими словами, keyup.ctrl сработает только тогда, когда вы отпустите клавишу, удерживая нажатой ctrl . Это не сработает, если вы отпустите только клавишу ctrl . Если вы хотите такое поведение, используйте keyCode для ctrl вместо keyup.17 .

Модификатор .exact

Модификатор .exact позволяет контролировать точную комбинацию системных модификаторов, необходимых для запуска события.

Модификаторы клавиш мыши

  • .left
  • .right
  • .middle

Эти модификаторы ограничивают обработчик события только вызовами определённой кнопкой мыши.

Почему подписчики указываются в HTML?

Может показаться, что такой подход к отслеживанию событий нарушает старое доброе правило «разделения мух и котлет». Не беспокойтесь — поскольку все обработчики во Vue связываются с ответственным за текущее представление экземпляром vm, трудностей в поддержке не возникает. На практике есть даже несколько преимуществ при использовании v-on :

Легче получить представление об имеющихся обработчиках, просто пробежав глазами по HTML-коду шаблона.

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

Когда vm уничтожается, все слушатели событий автоматически удаляются. Нет необходимости волноваться, что придётся прибираться за собой.

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