Скрипт для увеличения счетчика

JavaScript Замыкания

Переменные JavaScript могут принадлежать локальным или глобальном масштабе.

Глобальные переменные можно сделать локальными (частными) с замыканиями.

Глобальные переменные

Функция может получить доступ ко всем переменным, определенным внутри функции, например:

Пример

Но функция также может получить доступ к переменным, определенным вне функции, например:

Пример

В последнем примере a является глобальной переменной.

В веб-странице глобальные переменные принадлежат объекту Window.

Глобальные переменные могут быть использованы (и изменены) всеми скриптами на странице (и в окне).

В первом примере a — локальная переменная .

Локальную переменную можно использовать только внутри функции, где она определена. Он скрыт от других функций и другого кода скрипта.

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

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

Переменная продолжительность жизни

Глобальные переменные живут до тех пор, пока ваше приложение (ваше окно/ваша веб-страница) живет.

Локальные переменные имеют короткую жизнь. Они создаются при вызове функции и удаляются при завершении функции.

Встречная дилемма

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

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

Пример

// Initiate counter
var counter = 0;

// Function to increment counter
function add() <
counter += 1;
>

// The counter should now be 3

Проблема с решением выше: любой код на странице может изменить счетчик, без вызова Add ().

Счетчик должен быть локальным для функции Add (), чтобы предотвратить его изменение другим кодом:

Пример

// Initiate counter
var counter = 0;

// Function to increment counter
function add() <
var counter;
counter += 1;
>

//The counter should now be 3. But it is 0

Он не работает, потому что мы отображаем глобальный счетчик вместо локального счетчика.

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

Пример

// Function to increment counter
function add() <
var counter;
counter += 1;
return counter;
>

//The counter should now be 3. But it is 1.

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

Внутренняя функция JavaScript может решить эту проблему.

Вложенные функции JavaScript

Все функции имеют доступ к глобальной области видимости.

В самом деле, в JavaScript, все функции имеют доступ к области «выше» их.

JavaScript поддерживает вложенные функции. Вложенные функции имеют доступ к области «выше» их.

В этом примере внутренняя функция Plus () имеет доступ к переменной Counter в родительской функции:

Пример

Это могло бы решить дилемму борьбы, если бы мы могли достичь плюс () функции извне.

Нам также нужно найти способ выполнить Counter = 0 только один раз.

Нам нужно закрыться.

JavaScript замыкания

Помните самостоятельно ссылающиеся функции? Что делает эта функция?

Пример

// the counter is now 3

Пример объяснено

Переменной Add присваивается возвращаемое значение функции, ссылающейся на само себя.

Функция самостоятельного вызова запускается только один раз. Он устанавливает значение счетчика равным нулю (0) и возвращает выражение функции.

Таким образом, Add становится функцией. «замечательная» часть заключается в том, что она может получить доступ к счетчику в родительской области.

Это называется закрытием JavaScript . Это делает возможным для функции иметь «Private» переменные.

Счетчик защищен областью действия анонимной функции и может быть изменен только с помощью функции Add.

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

Создайте простой счетчик кликов с помощью JavaScript

Счетчик кликов записывает количество кликов и отображает его на экране. Счетчик использует событие click JavaScript для увеличения значения счетчика. Мы можем использовать его в различных областях, в том числе в играх (для увеличения количества очков или очков) и в некоторых хаках для экономии времени. Давайте посмотрим на код для создания простого счетчика кликов в JavaScript.

Счетчик кликов на кнопке с использованием JavaScript

В коде мы увеличиваем значение переменной счетчика counterVal на 1 при каждом нажатии пользователем. Шаги следующие.

Мы создаем отображение счетчика в HTML с тегом

и назначаем ему идентификатор counter-label , чтобы его можно было обновить из кода javascript с помощью document.getElementById() функция в javascript.

В HTML мы также добавляем пару кнопок. Одна кнопка с текстом Click Me , при нажатии на которую значение счетчика увеличивается на 1 . Точно так же в другой кнопке у нас есть текст Reset в HTML, который сбрасывает счетчик на 0 .

При нажатии кнопки кликни меня нам нужно увеличить значение счетчика. Для этого мы используем прослушиватель событий onclick . И вызовите функцию incrementClick() нажатием кнопки Click Me .

Внутри функции incrementClick() мы увеличиваем глобальную переменную counterVal на 1 и вызываем функцию updateDisplay .

При нажатии кнопки Сброс вызываем функцию resetCounter() . В этой функции мы сбрасываем значение глобального счетчика ( counterVal ) на 0 и вызываем функцию updateDisplay() .

В функции updateDisplay() мы отображаем полученное значение как параметр в теге

, который содержит значение счетчика. Он использует функцию javascript document.getElementById() для запроса элемента HTML с идентификатором counter-label , а затем обновляет атрибут innerHTML с новым значением счетчика. Атрибут innerHTML дополнительно изменяет текст, отображаемый в интерфейсе графического пользовательского интерфейса HTML.

В приведенном выше примере кода отображается счетчик кликов, который увеличивается при нажатии кнопки. В большинстве случаев мы не всегда можем применять счетчик кликов к кнопке. Чтобы сделать его гибким, нам нужно будет поддерживать эту функцию для других элементов HTML, таких как div , li и т. Д. Почти все элементы HTML имеют событие click с обработчиком события onclick .

Счетчик кликов в div с использованием JavaScript

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

Вы можете заметить, что в этом примере мы использовали div в строке

Счетчик кликов — беспрепятственный подход

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

Здесь мы привязываем события щелчка к коду JavaScript. Структура осталась прежней, за исключением того, что мы используем прослушиватель onclick для div Click Me и кнопки Reset . Эта привязка происходит во время выполнения. И к этому прослушивателю кликов мы привязываем наши определенные функции. Таким образом, код выглядит похожим и не претерпел особых изменений.

Замечания

Разница между беспрепятственным подходом состоит в том, что мы привязываем прослушиватель onclick в коде javascript, а не делаем это в HTML. Из одного только HTML будет сложно понять, если кнопке или div назначен обработчик события onclick .

При таком подходе код выглядит чище, поскольку все события onclick связываются и обрабатываются в JavaScript. Он сохраняет HTML в чистоте с разметкой, поскольку код JavaScript не вторгается в HTML.

JavaScript Закрытие функции

Переменные JavaScript могут принадлежать к локальной или глобальной области.

Глобальные переменные можно сделать локальными (частными) с помощью замыканий.

Глобальные переменные

function может получить доступ ко всем переменным, определенным внутри функции, например:

Пример

Но function также может обращаться к переменным, определенным вне функции, например:

Пример

В последнем примере a — это глобальная переменная.

На веб-странице глобальные переменные принадлежат объекту window.

Глобальные переменные могут использоваться (и изменяться) всеми скриптами на странице (и в window).

В первом примере a — это локальная переменная.

Локальную переменную можно использовать только внутри функции, в которой она определена. Она скрыта от других функций и другого скриптового кода.

Глобальные и локальные переменные с одинаковыми именами — это разные переменные. Изменение одной не изменяет другую.

Переменные, созданные без ключевого слова объявления ( var , let , или const ), всегда являются глобальными, даже если они созданы внутри функции.

Продолжительность жизни переменной

Глобальные переменные существуют до тех пор, пока страница не будет отброшена, например, когда вы переходите на другую страницу или закрываете окно.

У локальных переменных короткий срок жизни. Они создаются при вызове функции и удаляются по завершении функции.

Встречная дилемма

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

Вы можете использовать глобальную переменную и function для увеличения счетчика:

Пример

// Запуск счетчика
var counter = 0;

// Функция увеличения счетчика
function add() <
counter += 1;
>

// Счетчик теперь должен быть 3

Существует проблема с решением, приведенным выше: любой код на странице может изменить счетчик без вызова add().

Счетчик должен быть локальным для add() функции, чтобы другой код не мог его изменить:

Пример

// Запуск счетчика
var counter = 0;

// Функция увеличения счетчика
function add() <
var counter = 0;
counter += 1;
>

// Счетчик теперь должен быть 3. Но он равен 0

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

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

Пример

// Функция увеличения счетчика
function add() <
var counter = 0;
counter += 1;
return counter;
>

// Теперь счетчик должен быть 3. Но он равен 1.

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

Внутренняя функция JavaScript может решить эту проблему.

Вложенные функции JavaScript

Все функции имеют доступ к глобальной области видимости.

Фактически, в JavaScript все функции имеют доступ к области, расположенной «над ними».

JavaScript поддерживает вложенные функции. Вложенные функции имеют доступ к области «над ними».

В этом примере внутренняя функция plus() имеет доступ к counter переменной в родительской функции:

Пример

Это могло бы решить встречную дилемму, если бы мы могли добраться до plus() функции извне.

Нам также нужно найти способ выполнить counter = 0 только один раз.

Нам нужно закрытие.

Замыкания JavaScript

Помните самозапускающиеся функции? Что они делают?

Пример

// счетчик теперь 3

Объяснение примера

Переменная add присваивается возвращаемому значению самозапускающейся функции.

Самозапускающаяся функция запускается только один раз. Он устанавливает счетчик на ноль (0) и возвращает выражение функции.

Таким образом, add становится функцией. «Замечательно» то, что он может получить доступ к счетчику в родительской области.

Это называется закрытием JavaScript. Это позволяет функции иметь «частные» переменные.

Счетчик защищен областью действия анонимной функции и может быть изменен только с помощью функции добавления.

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

Простой код счетчика — нужна оценка и помощь

Спросил web-monster,
26 января 2013

Вопрос

web-monster

• Жалоба
• Поделиться

Добрый день, уважаемые форумчане!

Я не особенно дружу с JS и недавно решил прокачать свои скиллы, сделав что-нибудь простенькое. Задумал сделать счетчик для подсчета чего либо на сайте, например количество товара. Вобщем набросал немного кода и вот что получилось:

http://jsfiddle.net/6j8ss/1/ (CSS там слегка корявый, на данном этапе не важно)

Однако у меня возникло несколько вопросов:

1. Не получилось кроссбраузерно реализовать увеличение значения в счетчике стрелками на клавиатуре — работает только в FF. Гуглил, однако не нашел решения. Хотелось бы получить ссылку или совет, как можно реализовать это кроссбраузерно

2. Как можно инициализировать скрипт в head документа? Т.е. нужно, чтобы работало примерно при такой записи:

3. Ну и хотелось бы оценить скрипт на «говнокодность». Насколько все хорошо или плохо?

P.S. Скрипт делал после изучения этой статьи http://forum.htmlboo. showtopic=20782. Автору спасибо, написано очень доходчиво /emoticons/smile@2x.png 2x» width=»20″ height=»20″>

Ссылка на комментарий

Поделиться на других сайтах

4 ответа на этот вопрос

• Сортировать по голосам
• Сортировать по дате

Рекомендованные сообщения

Присоединяйтесь к обсуждению

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

Похожие публикации

Всем привет! Подскажите, пожалуйста, почему alert выводит ‘you are under 18!’, затем ‘you are more than 18!’, а ‘you are 18!’ пропускает. Имею в виду, если вводить 18, то ок, но если просто нажимать «ок», то как раз ‘you are 18!’ пропадает.
https://jsfiddle.net/4murgp2c/6/

И вот здесь https://jsfiddle.net/4murgp2c/10/ при выборе «ok» alert не должен был предотвратить вывод следующего значения (bad), который по идее должен выводиться только при нажатии на отмену?

https://jsfiddle.net/4murgp2c/12/ Здесь какая-то простая ошибка, но моему глазу не видна. Вписываю «you» good не появляется.

Заранее спасибо. Такие, возможно, очевидные вещи не видны/не понятны начинающему.

Здравствуйте. Начинающий верстальщик. Ищу первые заказы. Готов верстать что угодно за любую плату (в том числе и бесплатно). Есть 5-7 учебных работ, но этим никого не впечатлить — очень хочу практического опыта. Использую HTML5/CSS3, JS, JQuery, BEM. Так же разные инструменты, вроде Git, GitHub, SASS/SCSS, Gulp. Если не знаю чего-то необходимого для Вашего проектаработы — обязательно разберусь.

Если вы разработчик и вам некому спихнуть рутинную работу — я с радостью возьму её на себя;

Верстаю из Figma, Photoshop, Illustrator. Могу в адаптивность, отзывчивость, кроссбраузерность, несложную анимацию.