MYSQL
PHP
HTML
CSS
JS

Пишем свой калькулятор на JS

Калькулятор - прекрасная задача для начинающего программиста. Она помогает понять основы работы с арифметическими и строковыми операциями. Если Вы ещё не сделали свой калькулятор, то советую закрыть этот пробел вместе с этим уроком. HTML:
?
1
2
3
4
5
<div id="calc-wrap">
    <div id="calc">
        <textarea id=inputVal>0</textarea>
    </div>
</div>
Используется javascript-функции: eval() - преобразует строку в javascript и выполняет его. innerHTML - получает и присваивает внутренний HTML текст DOM-элементу (div, span, label и т.д.)
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script>
// код начнёт выполняться после загрузки страницы
// когда окно загрузится, сработает метод window.onLoad
window.addEventListener('load', function OnWindowLoaded() {
    // набор кнопок
    var signs = [
        '1', '2', '3', '+',
        '4', '5', '6', '-',
        '7', '8', '9', '/',
        '0', '=', '.', 'c'
    ];
 
    // форма калькулятора
    var calc = document.getElementById('calc');
 
    // текстовое поле с математическим выражением
    var textArea = document.getElementById('inputVal');
 
    // Добавление кнопок к форме калькулятора
    signs.forEach(function (sign) {
        var signElement = document.createElement('div');
        signElement.className = 'btn';
        signElement.innerHTML = sign;
        calc.appendChild(signElement);
    });
 
    // проходит по всем кнопкам калькулятора
    // добавляет обработчик на клик
    document.querySelectorAll('#calc-wrap .btn').forEach(function (button) {
        // Добавляем действие, выполняемое при клике на любую кнопку
        button.addEventListener('click', onButtonClick);
    });
 
    // функция клика по кнопке калькулятора
    function onButtonClick(e) {
        // e - MouseEvent (содержит информацию о клике)
        if (e.target.innerHTML === 'c') {
            // Если нажата кнопка "с", то стирает все из текстового поля
            textArea.innerHTML = '0';
        } else if (e.target.innerHTML === '=') {
            // Если нажата кнопка "=", то, приведя выражение
            // в текстовом поле к javascript, вычислить значение
            textArea.innerHTML = eval(textArea.innerHTML);
        } else if (textArea.innerHTML === '0') {
            // Если textarea содержит только "0", то
            // стереть "0" и записать
            // значения кнопки в текстовое поле
            textArea.innerHTML = e.target.innerHTML;
        } else {
            // Добавление значения кнопки в текстовое поле
            textArea.innerHTML += e.target.innerHTML;
        }
    }
});
</script>
Используются CSS-свойства: line-height - устанавливает высоту строки для текста. Текст выравнивается по центру этой высоты. text-align - выравнивает текст по горизонтали (принимает значения: left,right,center) resize - устанавливает возможно изменение размеров текстового поля (принимает значения: vertical, horizontal,both,none)
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style>
    .btn {
        width: 60px;
        height: 60px;
        background: #fc0;
        display: inline-block;
        text-align: center;
        line-height: 60px;
        user-select: none;
    }
 
    .btn:hover {
        background: #f70;
        color: #fff;
    }
 
    #calc-wrap {
        padding: 10px;
        width: 100%;
        text-align: center;
        background: #eee;
    }
 
    #calc {
        width: 240px;
        display: inline-block;
    }
 
    #inputVal {
        width: 100%;
        border: 0;
        font-size: 16px;
        resize: vertical;
    }
</style>
Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Вывод JS массива как в PHP. print_r Обработчики событий. onClick, onMouseMove Управление HTML элементами Функции 2D игра на JS. Canvas, поворот изображения.
↑