Статьи  : 

JavaScript: тренажер таблицы умножения

20 апреля 2018, 20:04

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

Ознакомимся с кодом страницы. Как видно, он содержит два больших фрагмента:

<table>
...
</table>


и

<script>
...
</script>


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

Для того, чтобы кнопки нашего тренажера реагировали на нажатия, мы добавляем на них события, в данном случае onClick (то есть реакция на клик). В самом событии указывается, что мы ожидаем. У нас происходит вызов той или иной функции. Функции – это фрагменты кода, выполняющие определенную задачу. Например, при нажатии на цифровую кнопку у нас вызывается set_digit – функция, которая отображает нажатую цифру на табло. Кнопка "X" вызывает функцию clear_digit – очистку экрана. А кнопка "ответ" – функцию set_answer, которая проверяет корректность ответа. Всё это названия функций, по которым мы можем к ним обратиться. Правилом хорошего тона считается давать функциям такие названия, чтобы было сразу понятно (или примерно понятно), что они делают.

Рассмотрим теперь второй блок. В первую очередь, следует отличать объявления функций от их вызовов. Объявление функции содержит ключевое слово function, например:

// формирование примера для решения
function set_example() {
	first_digit = get_random_int(3, 9);
	second_digit = get_random_int(3, 9);
	$("#question").html(first_digit + ' * ' + second_digit + ' = ');
}


Это лишь последовательность команд, а выполнятся они только тогда, когда мы вызовем эту функцию:

set_example();


Аналогичным образом объявлены и другие функции – clear_digit, draw_stat и так далее. Также обратим внимание, что внутри одной функции может вызываться другая, а из нее – третья и тому подобное (примеры найдите самостоятельно).

Некоторое затруднение вызывает использование знака "+" в javascript. Он может быть как математическим символом:

show_value = 10*cur_value + digit


так и символом "склейки" строк:

first_digit + ' * ' + second_digit + ' = ?'


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

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