Пора понять замыкания в JavaScript! Часть 2. Переходим к делу

Пора понять замыкания в JavaScript! Часть 2. Переходим к делу

Продолжаем понимать замыкания в JavaScript. Увлекательное путешествие с интерпретатором языка по контекстам выполнения кода.

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

Функционал такой: Пользователь заходит на сайт, выскакивает форма, он голосует, затем выполняется ajax-запрос, записывается кука и форма пропадает.

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

Описание: (по строчкам)

• 4 — функция для получения кук, для дальнейшей проверки
• 12 — получаем куку и записываем её в переменную
• 15 — здесь идёт проверка, если кука не существует, то появляется форма, если нет — форма не появится
• 25 — при клике на кнопку закрыть, форма изчезает и записывается cookie (для того, чтобы больше не появлялось голосование)
• 33 — выполняется скрипт при кнопке «отправить».
• 34 — удаляем кнопку
• 35 — получаем значение из голосования при выборе, у <input>, значение value (1, 2 или 3) и записываем в переменную
• 42 — при успешном ajax-запросе записываем cookie.
• 46 — вставляем текст вместо кнопки.
• 47 — через 1 секунду после нажатия, появляется текст и форма изчезает

Нужен JS скрипт типа счетчика цыферок (+1 в секунду)

Подскажите, может кто знает готовый скрипт или чтобы доработать можно было:
клиент хочет на сайт типа счетчика "условных единиц продукции" — например 198573844 енотов, и каждую секунду становится на 1 енота больше.

Пробовала счетчик времени докрутить, но там 60 минут, 60 секунд. не тот формат чисел. А я в джаваскрипте только читатель, совсем не писатель.

#2 Volkov4191

• Из Подподподподмосковье

Ваш результат будет отличаться, так как Math.round((new Date()).getTime() / 1000) — текущее время в секундах

Сообщение отредактировал Volkov4191: 09 Октябрь 2012 — 16:26

#3 Serg_pnz

• Из *** гонец? Гонец из Пензы. Нет – реальный гонец!

#4 Nov

Volkov4191 , спасибо, потестим

Serg_pnz , вай! спасибо огромное! только тут оно после рефреша заново начинает считаться

#5 Serg_pnz

• Из *** гонец? Гонец из Пензы. Нет – реальный гонец!

Nov , ну если страница набирается с помощью пхп, то можно "старт" изменить при загрузке страницы, а иначе или с куков брать, или с хеша. Я ж не знаю чем Вы там располагаете.

Если есть jquery (я с чистым js только "со словарем"), то можно всякие красивости придумать.

#6 Nov

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

но! формат вывода аля 2(часа)12(минут)5(сек)
а мне нужно002(часа)012(минут)005(сек)- тогда бы скрипт работал как мне нужно

#7 Serg_pnz

• Из *** гонец? Гонец из Пензы. Нет – реальный гонец!

Пример там же. Старт 158, но показывается 200158

так можно ведущие нули сделать, только надо смотреть какое у нас число, меньше 10 или больше

#8 Nov

Serg_pnz (09 Октябрь 2012 — 17:03) писал:

Пример там же. Старт 158, но показывается 200158

так можно ведущие нули сделать, только надо смотреть какое у нас число, меньше 10 или больше

так еще надо придумать, как сделать, чтобы не рефрешилось )))

это исходный скрипт, который я пробовала

#9 Volkov4191

• Из Подподподподмосковье

Nov (09 Октябрь 2012 — 17:09) писал:

Чтобы не рефрешилось и было одно и тоже число у всех пользователей — отталкивайтесь от текущего времени на сервере.

#10 Nov

Volkov4191 (09 Октябрь 2012 — 17:13) писал:

#11 dik

Nov (09 Октябрь 2012 — 17:17) писал:

Не знаю где php вызывать правильно у битрикса (не изучал это чудо природы), в хэдере или в шаблоне, поэтому вот 2 самых простых готовых рецепта на выбор, так:

Циферку с очень большими (1000000000) нулями можете на любую другую бОльшую или мЕньшую поменять По сути этой цифрой начальное количество енотов задается (а точнее начальное время счетчика, т.е. дата с которой идет отсчет секунд на сервере) и показываются эти еноты в диве. В css для id этого дива можете заодно красоту прописать.

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

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

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

Чтобы отследить нажатие игрока на какую-либо клавишу, необходимо использовать отслеживание событий — addEventListener . К примеру, чтобы отследить нажатие на любую клавишу на клавиатуре надо прописать следующий код:

Инициализация виджета через javascript

Пришло время поработать с нашим файлов widget.js. В нем мы создадим объект с свойствами и методами. Основным интересующим нас методом будет метод инициализации виджета init.

Так как подключение css стилей виджета осуществляется, в методе «addStyle» объекта «wrgsv», то из файла http://yoursite.loc/widget.php необходимо удалить подключение файла стилей «widget.css», которое мы добавили ранее при подключении виджета через iframe.

Для базового расширения функционала виджета, мы можем добавить возможность во время его инициализации, указать в качестве параметра, идентификатор HTML-элемента, в который будет встроен виджет. Это видно в методе init: function(id) .

Код подключения нашего виджета с указанием нового идентификатора «new_id_box»

Типы циклов в JavaScript, управление циклом

• Содержание:

1. Цикл for

Цикл for используется для выполнения итераций по элементам массивов или объектов, напоминающих массивы, таких как arguments и HTMLCollection . Условие проверяется перед каждой итерацией цикла. В случае успешной проверки выполняется код внутри цикла, в противном случае код внутри цикла не выполняется и программа продолжает работу с первой строки, следующей непосредственно после цикла.

Следующий цикл выведет на консоль строчку Hello, JavaScript! пять раз.

Рис. 1. Результат выполнения цикла for на консоли

1.1. Как работает цикл for

Цикл for состоит из трёх разных операций:

Шаг 1. инициализация var i = 0; — объявление переменной-счётчика, которая будет проверяться во время выполнения цикла. Эта переменная инициализируется со значением 0 . Чаще всего в качестве счётчиков цикла выступают переменные с именами i , j и k .

Шаг 2. проверка условия i < 5; — условное выражение, если оно возвращает true , тело цикла (инструкция в фигурных скобках) будет выполнено. В данном примере проверка условия идёт до тех пор, пока значение счётчика меньше 5 .

Шаг 3. завершающая операция i++ — операция приращения счётчика, увеличивает значение переменной var i на единицу. Вместо операции инкремента также может использоваться операция декремента.

По завершении цикла в переменной var i сохраняется значение 1 . Следующий виток цикла выполняется для for (var i = 1; i < 5; i++) < >. Условное выражение вычисляется снова, чтобы проверить, является ли значение счётчика i всё ещё меньше 5 . Если это так, операторы в теле цикла выполняются ещё раз. Завершающая операция снова увеличивает значение переменной на единицу. Шаги 2 и 3 повторяются до тех пор, пока условие i < 5; возвращает true .

1.2. Вывод значений массива

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

Приведённый ниже скрипт выведет на экран пять сообщений с названиями цветов:

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

2. Цикл for. in

Циклы for. in используются для обхода свойств объектов, не являющихся массивами. Такой обход также называется перечислением. При обходе рекомендуется использовать метод hasOwnProperty() , чтобы отфильтровать свойства, которые были унаследованы от прототипа.

Для примера создадим объект с помощью литерала объекта.

Рис. 2. Результат выполнения цикла for. in на консоли

Предположим, что в сценарии до или после создания объекта user прототип объекта Object был расширен дополнительным методом clone() .

Так как цепочка наследования прототипа постоянно проверяется интерпретатором, то все объекты автоматически получают доступ к новому методу.

Рис. 3. Результат повторного выполнения цикла for. in на консоли

Чтобы избежать обнаружения этого метода в процессе перечисления свойств объекта user , используется метод hasOwnProperty() , который отфильтрует свойства прототипа.

Рис. 4. Результат перечисления свойств объекта с помощью метода hasOwnProperty()

3. Цикл while

Цикл while — цикл с предварительной проверкой условного выражения. Инструкция внутри цикла (блок кода в фигурных скобках) будет выполняться в случае, если условное выражение вычисляется в true . Если первая проверка даст результат false , блок инструкций не выполнится ни разу.

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

Данный цикл выведет на экран таблицу умножения для числа 3:

Рис. 5. Результат выполнения цикла while

4. Цикл do. while

Цикл do. while; проверяет условие продолжения после выполнения цикла. В отличие от цикла while , в do. while; тело цикла выполняется как минимум один раз, так как условие проверяется в конце цикла, а не в начале. Данный цикл используется реже, чем while , так как на практике ситуация, когда требуется хотя бы однократное исполнение цикла, встречается редко.

Рис. 6. Результат выполнения цикла do. while

В следующем примере операторы внутри цикла выполняются один раз, даже если условие не выполняется.

5. Бесконечные циклы

При создании любого цикла можно создать бесконечный цикл, который никогда не завершится. Такой цикл может потенциально продолжать работать до тех пор, пока работает компьютер пользователя. Большинство современных браузеров могут обнаружить это и предложат пользователю остановить выполнение скрипта. Чтобы избежать создания бесконечного цикла, вы должны быть уверены, что заданное условие в какой-то момент вернёт false . Например, следующий цикл задаёт условие, которое никогда не возвращает ложь, так как переменная i никогда не будет меньше 10 :

6. Вложенные циклы

Цикл внутри другого цикла называется вложенным. При каждой итерации цикла вложенный цикл выполняется полностью. Вложенные циклы можно создавать с помощью цикла for и цикла while .

Рис. 7. Результат выполнения вложенного цикла for

7. Управление циклом

Циклом можно управлять с помощью операторов break; и continue; .

7.1. Оператор break;

Оператор break; завершает выполнение текущего цикла. Он используется в исключительных случаях, когда цикл не может выполняться по какой-то причине, например, если приложение обнаруживает ошибку. Чаще всего оператор break; является частью конструкции if .

Когда оператор break; используется без метки, он позволяет выйти из цикла или из инструкции switch . В следующем примере создаётся счётчик, значения которого должны изменяться от 1 до 99 , однако оператор break прерывает цикл после 14 итераций.

Рис. 8. Результат работы оператора break в цикле for

Для вложенных циклов оператор break; используется с меткой, с помощью которой завершается работа именованной инструкции. Метка позволяет выйти из любого блока кода. Именованной инструкцией может быть любая инструкция, внешняя по отношению к оператору break; . В качестве метки может быть имя инструкции if или имя блока инструкций, заключенных в фигурные скобки только для присвоения метки этому блоку. Между ключевым словом break; и именем метки не допускается перевод строки.

7.2. Оператор continue;

Оператор continue; останавливает текущую итерацию цикла и запускает новую итерацию. При этом, цикл while возвращается непосредственно к своему условию, а цикл for сначала вычисляет выражение инкремента, а затем возвращается к условию.

В этом примере на экран будут выведены все чётные числа:

Рис. 10. Результат работы оператора continue с меткой