<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

Данный курс научит Вас программировать на языке C#, который является одним из самых востребованных языков программирования в мире. Курс состоит из 7 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

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

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

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; //вычисляем сумму двух случайных чисел

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.