Captcha и генератор случайных чисел на JS

Captcha и генератор случайных чисел на JS

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

Что такое арифметическая капча

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

Captcha и генератор случайных чисел на JS

Создание HTML разметки для защиты (капчи)

1. Добавим к готовой форме контейнер с классом captcha, до кнопки «Отправить».


<div class="captcha">
    ...
</div>

2. Внутри контейнера создадим два блока для первой и второй цифры — класс firstNumber и secondNumber. Оставим оба блока внутри пустыми, куда разные цифры будут автоматически записываться при помощи генератора случайных чисел. Сделаем по отдельному блоку для знаков сложения и равно.


<div class="captcha">
    <div class="firstNumber">...</div>
    <div class="plus">+</div>
    <div class="secondNumber">...</div>
    <div class="equal">=</div>

</div>

3. Создадим поле ввода для правильного ответа и установим ему максимальную длину.


<input type="text" name="captcha" class="result" maxlength="2" value="">

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

Captcha и генератор случайных чисел на JS

4. Добавим CSS стили для всех классов. Блок с классом captcha сделаем flex-контейнером и одно магическое свойство display: flex, расставит все элементы внутри контейнера в один ряд. Зададим всем flex-элементам отступ справа, чтобы они не прилипали друг к другу.


// flex-контейнер

.captcha {
    display: flex;
    margin: 20px;
}

// flex-элементы
.firstNumber,
.plus,
.secondNumber,
.equal,
.result {
    margin-right: 3%;
}


Мы сделали HTML разметку, далее перейдем к написанию генератора случайных чисел.

Captcha и генератор случайных чисел на JS

Как работает генератор случайных чисел в JS

Наверное вы уже догадались, что числа для капчи будут генерироваться случайным образом из объекта Match. Метод Math.random() возвращает случайное число от 0 до 1. Данный метод и есть генератор случайных чисел. Чтобы увидеть генератор в работе, нужно занести метод Math.random() в переменную и вывести содержимое переменной в модальном окне.


const random_number = Math.random();
alert(number);

При каждом обновлении браузера, будет обновлятся и число внутри переменной. Созданная переменная random_number хранит случайное число.

Captcha и генератор случайных чисел на JS

Есть одна проблемка, нам нужно целое число в диапазоне от 0 до 10. Для этого, нужно случайное число умножить на 10 и округлить его до целого через метод round. Наш генератор случайных чисел стал чуть сложнее, механизм его действия следующий: «Мы генерируем случайное число, умножаем его на 10, округляем до целого числа и результат действия заносим в переменную.


const random_number = Math.round(Math.random() * 10);

Создадим функцию myRandom, которая генерирует случайное целое число в диапазоне from (от) и to (до). При обращении к функции, вместо условных параметров (from, to), подставятся реальные случайные числа из заданных диапазонов. После того, как будет сгенерировано первое число, оно запишется в переменную rand_num1. На втором заходе сгенерируется второе число и запишется в переменную rand_num2. На следующем этапе, вычисляем сумму двух случайных чисел и результат заносим в переменную sum.


function myRandom (from, to) {
return Math.round((Math.random() * (to - from + 1)) + from);
}

let rand_num1 = myRandom(1,9); //задаем диапазон для первого числа от 1 до 9
    rand_num2 = myRandom(1,7); //задаем диапазон для второго числа от 1 до 7
    sum = rand_num1 + rand_num2; //вычисляем сумму двух случайных чисел

Источник

Просмотров:

Добавить комментарий

Adblock
detector