Sibprompost.ru

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

Счетчик по клику jquery

Счетчик по клику jquery

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Создайте свой сайт за 3 часа и 30 минут.

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

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

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

*Наведите курсор мыши для приостановки прокрутки.

JavaScript без jQuery: 10 советов

jQuery – отличная библиотека! Она пришла к нам в те времена, когда браузер IE6 был браузером номер один. В те времена было много сложностей и препятствий при работе с браузерами, что делало работу более чем утомительной. В такой ситуации библиотека jQuery была отличным инструментом чтобы добиться кроссбраузерности сайта.

С тех пор браузеры ушли далеко вперёд, что определённо развязывает нам руки при написании кода. Мы можем комфортно использовать все преимущества предоставляемые ES5, а так же в нашем арсенале есть наикрутейший HTML5 APIs, который значительно упрощает работу с DOM.

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

Не поймите меня неправильно – jQuery по прежнему остаётся отличной библиотекой, и в большинстве случаев вам действительно нужно будет использовать её. Тем не менее, для каких-то простых и маленьких вещей, вроде простой страницы с ограниченным JavaScript-взаимодействием, расширения для браузеров или мобильных сайтов, вы можете использовать чистый JS.

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

1. Ожидание готовности документа (Document Ready)

Правило номер 1: когда вы пишете код на jQuery, возьмите себе в привычку оборачивать его в $(document).ready(). Так вы всегда будете уверены что ваш документ и его DOM-структура полностью готовы для дальнейших манипуляций.

Без jQuery, вместо $(document).ready() можем использовать document.addEventListener(‘DOMContentLoaded’). Вот как это выглядит:

2. Выборка элементов

Раньше для выборки элементов мы могли полагаться лишь на id , class и имена тегов и jQuery для нас с вами был чем-то вроде спасателя, так как позволял осуществлять сложные выборки по селекторам CSS. С тех пор браузеры поймали эту фишку и ввели два важнейших API-метода — querySelector и querySelectorAll:

Читайте так же:
Как самому поверить счетчик

3. Добавление и удаление отслеживания событий

Отслеживание событий – это фундаментальная вещь при создании любых веб-приложений. Раньше существовало два основных лагеря, которые подходили к вопросу отслеживания событий по-разному: это IE и все остальные. Однако сегодня мы просто используем addEventListener:

4. Управление классами и атрибутами

Раньше управление классами и атрибутами элементов без jQuery было довольно неудобно. Однако всё изменилось с появлением свойства classList. И если вам нужно поуправлять атрибутами, то всё что вам нужно — это задать атрибут setAttribute

5. Получение и задание контента элемента.

Для этого в jQuery есть удобные методы text() и html(). Но вы так же можете использовать методы textContent и innerHTML эти методы уже достаточно давно существуют на чистом JS.

6. Вставка и удаление элементов

Несмотря на то, что на jQuery это делается несколько проще, добавление или удаление DOM-элементов не является непосильной задачей для JavaScript. Вот как это делается на JS:

7. Проход по дереву элементов структуры DOM

Настоящие JS-джедаи знают, как много всего бывает спрятано в DOM. В сравнении с jQuery, обычное API DOM ограничено в функциональности при выборке родительских а также братских/сестринских элементов. Так или иначе, в вашем кармане есть множество различных способов, чтобы сверху донизу пройтись по DOM-дереву.

8. Обработка массивов

Некоторые из служебных методов, которые обеспечивает jQuery, теперь доступны с появлением ES5-стандартов. Для множественных ассоциативных массивов мы можем использовать forEach и map вместо их jQuery-аналогов each() и map(). Вот только будьте внимательны, есть между ними определённые отличия в аргументах и в возвращаемом по умолчанию значении this.

9. Анимация

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

Однако, благодаря чудесам современных CSS3-свойств, мы можем без проблем создать свою простейшую анимацию либо использовать специальные CSS-библиотеки как например Animate.css, позволяющую создавать и запускать анимации, просто добавляя или удаляя классы к тем или иным элементам страницы.

10. AJAX

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

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

Но! Вам не нужно подключать всю jQuery-библиотеку только ради AJAX. Вы можете использовать одну из доступных лёгких библиотек. Вот как можно писать AJAX-запросы, используя маленькую библиотеку запросов

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

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

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

Материал подготовил Денис Малышок специально для сайта CodeHarmony.ru

P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Как посчитать количество кликов по ссылке

Задача подсчета кликов по ссылке встала передо мною, поскольку я захотел реализовать у себя на сайте что-то наподобие строк NOLIX и DAOS. О том как сделать такую строчку я уже написал в статье: «как сделать строку как у NOLIX и DAOS». Данная статья является продолжением той статьи и носит технический характер анализа полученных результатов, а именно принципа определения кликов по каждому объявлению. Однако ниже описанный метод может использоваться для подсчета кликов по любым ссылкам. Код является универсальным и его можно легко модифицировать под Ваши конкретные цели.

Читайте так же:
Счетчик гранд где производят

Подсчет кликов по ссылке описанный ниже придуман лично мною. Не удивляйтесь, если Вы сможете реализовать этот механизм ещё лучше, поскольку я не мега крутой веб-программист. Мой способ основан на использовании 4ех технологий HTML, JavaScript, PHP и MySQL. Было бы неплохо, если бы Вы что-то понимали в этих языках, но не стоит особо переживать, если у Вас нет никаких навыков их использования, поскольку все исходные коды я приведу ниже. Ваша задача только правильно все установить и настроить это под себя. Если же Вы ничего не понимаете в кодах, то, скорее всего, Вам проще всего использовать Яндекс Метрику или Google Analitics, которые так же позволяют подсчитывать клики по ссылке.

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

Сразу хочу дать ссылку на скачивание архива: cntclick.rar, в котором есть все необходимые файлы для работы. Поэтому настоятельно рекомендую скачать его заранее.

Реализация механизма

1. Создание AJAX функции

Создать файл rttr.js (название можете придумать другое или вообще записать его содержимое в уже существующий файл .js). Главная суть этого файла в том, что в нем описана специальная функция setrate :

Кратко опишу, что делает эта функция. Функция setrate получает параметр id и с помощью метода POST посылает параметр id в файл /sts/click.php на исполнение. Уже в файле click.php происходит обработка полученного параметра (id), а далее и запись информации о клике в базу данных.

Итак, Ваша первая задача: создать файл rttr.js с содержимом, которое я указал чуть выше (также файл rttr.js есть в архиве cntclick.rar). На тех страницах где будет осуществляться подсчет кликов по ссылке подключите этот файл:

Файл jquery.js является копией ЯваСкрипта от Google: http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js. Можете подключать файл прямо с Гугла (установить прямой адрес в src=»https://zarabotat-na-sajte.ru/uroki-html/js/jquery.js»), но я скопировал его и добавил к себе на сайт, поскольку иногда бывает, что связь с Гуглом плохая и из-за этого сайт грузится долго.

2. Создание базы данных и таблиц

Для того, чтобы подсчитывать клики, нужно где-то хранить информацию, т.е. нужна база данных. Дабы не использовать файлы для хранения информации (т.к. это считается медленной реализацией), я решил сделать все красиво и воспользоваться MySQL. Для создания БД на MySQL Вы должны сделать следующее:

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

Примечание: я не описываю механизм создания БД на Вашем хостинге, поскольку на каждом хостинге она создается по-разному. Советую прочитать FAQ Вашего хостинга, там со 99.99% вероятностью есть информация о создании бд.

2.2. Создание таблиц для нашей задачи. Через phpmyadmin зайдите в панель управления базой данных. Нажмите выполнить SQL-запрос и напишите следующее:

Читайте так же:
Механизм сброса счетчика драм картриджа

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

Кратко опишу, что означают поля таблицы. Первая таблица main_rtr содержит следующие поля:

  • id (уникальный идентификатор)
  • text (анкоры ссылок)
  • click (общее количество кликов)

Вторая таблица click_data содержит:

  • id_num (уникальный идентификатор)
  • id (для связи с первой таблицей)
  • date (дату клика)
  • time (время клика)

3. Создание конфигурационного файла

Здесь все просто: создаете специальный файл, где будут хранится настройки для подключения к БД. Например, можно назвать его config.php . Его содержимое представлено ниже:

Отредактируйте файл config.php, заполнив Ваши данные (имя базы данных, логин и пароль в поля $dbname , $dbuser и $dbpasswd соответственно). Если база данных находится не на Вашем хосте, то нужно ещё поменять и параметр $dblocation.

4. Заполнение таблицы

Первую таблицу с именем main_rtr нужно заполнить анкорами ссылок, которые будут участвовать в подсчете кликов. Я сделал специальную миниформу, чтобы заполнять таблицу более удобно. Приводить сюда код я не стал в связи с тем, что статья и так получается слишком огромная. В архиве, который я привел выше, есть файлик add.php с помощью которого можно заполнить первую таблицу довольно просто и быстро.

Кратко о форме в файле add.php: эта форма просто выводит текстовое поле textarea, а далее по клику на кнопку «добавить» добавляет новую строку в первую таблицу.

5. Обработка результата клика

Для этого есть файл click.php , который нужно разместить в папку /sts. Его содержимое:

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

6. Подготовка ссылок для подсчета кликов

К тем ссылкам, которые учувствуют в подсчете кликов дописываем атрибут onclick=»javascript:setrate(N)» . Выглядит это примерно следующим образом в коде:

Число в скобочках у функции setrate должно соответствовать номеру id Вашего анкора в таблице main_rtr.

7. Вывод результатов

Для вывода результатов (статистики кликов) я разработал очень простой html-документ ( stat.html ). С помощью него удобно отслеживать те ссылки, по которым чаще всего кликают. Вся информация выводится в соответствующие таблицы.

Я не буду описывать каждую таблицу, т.к. они все похожи. Для примера рассмотрим только первую таблицу. Она выводит общую информацию о клике. Вот её код:

Примеры jQuery-функции setTimeout()

JavaScript timeout представляет собой нативную javascript-функцию , которая исполняет фрагмент кода после установленной временной задержки ( в миллисекундах ). Это может пригодиться, когда нужно вывести всплывающее окошко после того, как пользователь провел некоторое время на вашей странице. Или нужно, чтобы эффект при наведении курсора на элемент запускался лишь спустя какое-то время. Таким образом, можно избежать непреднамеренного запуска эффекта, если пользователь навел курсор случайно.

  • Простой пример setTimeout
  • Синтаксис
  • setTimeout vs window.setTimeout
  • Примеры использования
  • Передаем параметры в setTimout
  • Альтернативный метод
  • Сопутствующие проблемы и “this”
    • Принудительно установить значение this
    • Использовать библиотеку
    • Отключение таймера
  • Подведем итоги
  • В завершение

Простой пример setTimeout

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

Синтаксис

В документации MDN приведен следующий синтаксис для setTimeout :

  • timeoutID – числовой id , который можно использовать в сочетании с clearTimeout() для отключения таймера;
  • func – функция, которая должна быть выполнена;
  • code ( в альтернативном синтаксисе ) – строка кода, которую нужно исполнить;
  • delay – длительность задержки в миллисекундах, после которой будет запущена функция. По умолчанию установлено значение 0.
Читайте так же:
Руны счетчики дота 2

setTimeout vs window.setTimeout

В приведенном выше синтаксисе используется window.setTimeout . Почему?

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

Лично я считаю, что это лишь сильно усложняет код. Если бы мы определили альтернативный метод JavaScript timeout , который может быть найден и возвращен в приоритетном порядке, то столкнулись бы с еще большими проблемами.

В данном руководстве я не хочу связываться с объектом window , но в целом, вы сами решаете, какой синтаксис стоит использовать.

Примеры использования

setTimeout принимает ссылки на функцию в качестве первого аргумента.

Это может быть название функции:

Переменная, которая обращается к функции:

Или же анонимная функция:

Но я не рекомендую так делать по следующим причинам:

  • Такой код плохо воспринимается, а, следовательно, его сложно будет модернизировать или отладить;
  • Он предполагает использование метода eval() , который может стать потенциальной уязвимостью;
  • Этот метод работает медленнее других, так как ему требуется запускать JavaScript-интерпретатор .

Также обратите внимание, что для тестирования кода мы используем метод alert для JavaScript timeout .

Передаем параметры в setTimout

В первом ( к тому же, кроссбраузерном ) варианте мы передаем параметры в callback-функцию , исполняемую при помощи setTimeout .

В следующем примере мы выделяем случайное приветствие из массива greetings и передаем его в качестве параметра функции greet() , которая исполняется setTimeout с задержкой в 1 секунду:

Альтернативный метод

В синтаксисе, приведенном в начале статьи, существует еще один метод, с помощью которого можно передать параметры в callback-функцию , исполняемую JavaScript timeout . Данный метод подразумевает под собой вывод всех параметров, следующих после задержки.

Опираясь на предыдущий пример, мы получаем:

Этот метод не будет работать в IE 9 и ниже, где передаваемые параметры расцениваются как undefined . Но для решения этой проблемы на MDN есть специальный полифилл .

Сопутствующие проблемы и “this”

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

Причина такого вывода кроется в том, что в первом примере this ведет к объекту person , а во втором примере — указывает на глобальный объект window , у которого отсутствует свойство firstName .

Чтобы избавиться от этой нестыковки, можно воспользоваться несколькими методами:

Принудительно установить значение this

Это можно сделать при помощи bind() – метода, который создает новую функцию, которая при вызове в качестве значения ключа this использует определенное значение. В нашем случае — указанный объект person . Это в результате дает нам:

Примечание: метод bind был представлен в ECMAScript 5 , а значит, что он будет работать только в современных браузерах. В других при его применении вы получите ошибку выполнения JavaScript « function timeout error » .

Использовать библиотеку

Многие библиотеки включают в себя встроенные функции, необходимые для решения проблемы с this . Например, метод jQuery.proxy() . Он берет функцию и возвращает новую, в которой всегда будет использовать определенный контекст. В нашем случае, контекстом будет:

Отключение таймера

Возвращенное значение setTimeout представляет собой числовой id , который можно использовать для отключения таймера при помощи функции clearTimeout() :

Давайте посмотрим на нее в действии. В следующем примере, если кликнуть по кнопке « Start countdown », начнется обратный отсчет. После того, как он завершится, котята получат свое. Но если нажать кнопку « Stop countdown », таймер JavaScript timeout будет остановлен и сброшен.

Подведем итоги

setTimeout – асинхронная функция, а это значит, что полученное обращение к этой функции попадает в очередь, и будет исполнено только после того, как завершатся все остальные действия в стеке. Она не может работать одновременно с другими функциями или отдельным потоком:

Читайте так же:
Сброс счетчика страниц samsung ml 1640

Многие также путают использование JavaScript-функции setTimeout , и jQuery-метода delay . Метод delay предназначен для установки временной задержки между методами в заданной очереди jQuery . Задержку отметить невозможно.

К примеру, если вы хотите затемнить изображение на секунду, сделать его видимым на 5 секунд, а затем снова затемнить на 1 секунду, то придется сделать следующее:

Все же лучше использовать JavaScript timeout для чего-то другого.

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

В завершение

В этой статье я попытался показать, как использовать setTimeout для отсрочки исполнения функции. К тому же я рассказал, как вносить параметры в setTimeout , работать со значением this внутри callback-функции и об отмене таймера.

/dev/energy

Сайт о том, как стать программистом и как с этим жить потом

Добавляем счетчики для полей ввода

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

Наверняка многие из Вас сталкивались с тем, чтобы ограничить ввод пользовательских данных длиной поля для удобства последующей валидации. К примеру, такие ограничения полезны при работе с официальными данными, оформленными по стандартам — номера ИНН, КПП и т.д.

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

Теперь код с примерами доступен на моем аккаунте в GitHub!

Приступим! Для начала как всегда подключим jQuery для удобного управления DOM-элементами.

Мы можем создавать счетчики каждый раз под каждую конкретную страницу. Но это очень неудобно. Гораздо проще создать абстрактный счетчик, который можно будет навесить на любой элемент на странице при помощи одной команды. В этом нам и помогут прототипы. Они задают базовый набор функциональных возможностей классу объекта и являются стандартным свойством любого объекта в JS.

Для начала создадим новый класс объектов — Counter. Для него стоит задать параметры по умолчанию — имя, родительский элемент и максимальную длину поля.

Наш объект будет иметь два метода — создания и уничтожения.

Итак, свойство прототип позволяет нам задать метод show() для любого объекта класса Counter. Теперь мы можем свободно вызывать этот метод в любом месте кода после идентификации класса и прототипов.

Логика создания достаточно простая. Мы проверяем возможность создания счетчика, переопределяем имена для удобного и уникального обращения. Затем удаляем имеющиеся счетчики — пусть активен будет только один счетчик на странице — эдакий js-аналог паттерна singleton. Далее мы расчитываем оставшиеся символы простым арифметическим действием вычитания =) .

Однако, нетрудно заметить, что в коде я вызываю странный метод .destroy(). Здесь можно было бы обойтись и стандартным .remove(), но это не показательно.

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

Все! С проектированием закончили. Теперь попробуем применить созданный класс на практике.

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

Также мы навесим событие уничтожения счетчика при уходе фокуса с требуемых полей:

Замечу, что подключать библиотеку jquery и счетчиков необходимо в шапке документа, а вот инициализировать сам счетчик — только перед закрытием тега body, дабы счетчик видел, к чему цепляться!

Рабочий пример можно посмотреть здесь, а библиотека для счетчика лежить здесь

Всем спасибо за внимание! Безошибочного Вам кода!

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