Пример переключения классов средствами javascript. Плюс простейшее замыкание для циклического счетчика нажатий:

https://jsfiddle.net/rgx74v8w/7/

#javascript #js #замыкания

Переключение CSS-классов средствами Javascript.
Подсветка выбранного элемента.
Пример логики выбора элементов.
Подсчет количества нажатий на каждый элемент посредством присваивания замыкания каждому элементу списка elementList.

https://jsfiddle.net/9md108g3/3/

#javascript #js #замыкания

Ручное + автоматическое рандомное переключение CSS-классов средствами Javascript. Подсветка выбранного элемента. Пример логики выбора элементов. Подсчет количества нажатий на каждый элемент посредством присваивания замыкания каждому элементу списка elementList. Мерцание с помощью метода setInterval(), использующий метод переключения CSS-классов в контексте текущего объекта, контекст которого получен через call()

https://jsfiddle.net/dpg3mybz/1/

#javascript #js #замыкания

Парочка интересных способов получения целой части вещественного числа в языке Javascript. Допустим, у нас есть вещественное double число
var n = 1234.567; Нужно получить только целую часть от него, т. е. 1234.

1 способ. Самый банальный. Использовать средства библиотеки Math.
Math.floor(n); Метод Math.floor() возвращает наибольшее целое число, которое меньше или равно данному числу. Поэтому при применении полностью отбрасывается дробная часть.

2 способ. Изящная работа со строкой, полученной из числа.
((n + "").split("."))[0]; Конкатенация числа и пустой строки возвращает из числа 1234.567 строку "1234.567". Затем для строки используется метод split(), принимающий в качестве параметра разделитель-точку, метод split() возвращает массив/список слов, полученных по разделителю. В нашем случае у нас всегда получится два слова. Далее мы получаем целую часть, обращаясь к первому слову по нулевому индексу. Правда оно остается строкой, но это легко изменить, обернув данное выражение в метод parseInt(). Функция parseInt(string, radix) принимает строку в качестве аргумента и возвращает целое число в соответствии с указанным основанием системы счисления radix. Удобство в том, что вместо точки может стоять запятая, которую легко применить в методы split(). Таким образом, число 1234 можно получить так:

parseInt(((n + "").split("."))[0], 10)

3 способ. Простое использование метода parseInt(n, 10);
Также возвращает целую часть. Однако, в некоторых версиях может выполнить нежелательно округление вверх.

4 способ. Использование побитовых операций. n ^ 0;
Так как побитовые операции в JS определены только для целых чисел, то на низком уровне отбрасывается дробная часть, а операция исключающего или (XOR, ^) некоторого числа n вместе с нулем дает именно это число n. Только без дробной части.

5 способ. Двойное побитовое отрицание (инверсия). ~ ~n;
Преимущества: самый быстрый способ отбрасывания дробной части вещественного числа. Побитовые операции в Javascript работают со знаковыми (signed) целыми (integer) длиной в 32 бита (оператор >> работает с unsigned). Иными словами, побитовые операторы интерпретируют операнды как последовательность из 32 битов.
Таким образом, 1234 в двоичном коде будет равно:

0000 0000 0000 0000 0000 0100 1101 0010

Его побитовая инверсия ~1234 в двоичном коде будет равна:

1111 1111 1111 1111 1111 1011 0010 1101 (2) —> -1235 (10)

А побитовая инверсия побитовой инверсии равна:

~ ~1234 = ~(~1234) = ~(-1235):
0000 0000 0000 0000 0000 0100 1101 0010 (2) —> 1234 (10)

т.е. получили исходное число, только с отброшенной частью после плавающей точки.

Благодаря свойству инвертирования и представления чисел в дополнительном коде, тождество -1235 + 1 = -1234 мы можем в общем случае записать как (~n + 1) == - n или ~n == - (n + 1)
Данное выражение можно использовать в логической ветке, когда нужно сделать некоторые действия, если n != -1 (или экранировать какой-то блок в случае если переменная-флаг равна -1 :

if( ~n ){ //зайдет в эту ветку только, если n != -1 }

➡️ https://jsfiddle.net/87fza9rs/19/ ⬅️

#js #javascript

Проверка полей input на ввод информации и активация/деактивация кнопки средствами Javascript. Возможная реализация решения.

Код: jsfiddle.net/f4qjz1ka/ или так jsfiddle.net/f4qjz1ka/1/
Версия с игнорированием пробелов: jsfiddle.net/f4qjz1ka/3/

#программирование #javascript #js

Замыкания в Javascript на наглядном примере

🔒 Замыкания — это функции, ссылающиеся на независимые (свободные) переменные. Другими словами, функция, определённая в замыкании, «запоминает» окружение, в котором она была создана.

Практический пример
▪️ Переключение CSS-классов средствами Javascript.
▪️ Подсветка выбранного элемента.
▪️ Пример логики выбора элементов.
▪️ Подсчет количества нажатий на каждый элемент посредством присваивания замыкания каждому элементу списка elementList.

📄 Исходный код:
https://jsfiddle.net/9md108g3/3/ (работает через VPN)
https://pastebin.com/Rbbwf5pK

📖 Что почитать по теме:
▪️ https://htmlacademy.ru/blog/js/lets-learn-javascript-closures
▪️ https://learn.javascript.ru/closure
▪️ https://habr.com/ru/company/ruvds/blog/424967/

#javascript #js #замыкания

Проверка полей input на ввод информации и активация/деактивация кнопки средствами Javascript. Возможная реализация решения.

Код: jsfiddle.net/f4qjz1ka/ или так jsfiddle.net/f4qjz1ka/1/
Версия с игнорированием пробелов: jsfiddle.net/f4qjz1ka/3/

HTML:

<input type="text" id = 'textField'> <br>
Event oninput: <span id="result"></span> <br>
<input type="button" id = 'buttonField' value="Кнопка" disabled ="disabled" onclick = 'alert("wow")'><br>

JavaScript:

var inputText = document.getElementById('textField');
var inputButton = document.getElementById('buttonField')
inputText.oninput = disableButton;

function disableButton() {
    document.getElementById('result').innerHTML = inputText.value;
    inputButton.disabled = (inputText.value.split(' ').join('') == 0);
}

#программирование #javascript #js