Доброго времени суток, дорогие читатели блога. После прочтения текущей публикации вы научитесь самостоятельно программировать простой калькулятор на JavaScript с кнопкой сброса. Я поделю свой рассказ на три части.
Вначале я опишу создание разметки калькулятора на html, далее расскажу, какие стилевые правила необходимо будет задать, а после перейду к объяснению функций на JavaScript. Давайте приступим!
Оформление гипертекстовой разметки
Изначально для приложения «Калькулятор» необходимо задать разметку элементов и сразу назначить обработчики событий. Для этого лучше всего использовать таблицу. Поскольку в коде будет множество инпутов, то потребуется и форма.
Поэтому создаем форму с именем «Calculation». В нее вписываем таблицу, которая будет содержать 5 строк и 5 столбцов. Первая строка табличного представления будет занята текстовым полем ввода. А далее разместим кнопки с цифрами, арифметическими операциями, знаком «равно», сбросом последнего введенного числа (CE) и полным сбросом ©.
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 | <form name="Calculation" action=""> <table class="Table" cellpadding="2" cellspacing="2"> <tr> <td colspan=5 align=middle> <input id="TextEdit" name="ReadOut" type="Text" size=28 value="0" width="250px"> </td> </tr> <tr> <td><input name="btnSeven" type="Button" value="7" onclick="PressedNum(7)"></td> <td><input name="btnEight" type="Button" value="8" onclick="PressedNum(8)"></td> <td><input name="btnNine" type="Button" value="9" onclick="PressedNum(9)"></td> <td><input name="btnClear" type="Button" value="C" onclick="Clear()" /></td> <td><input name="btnClearEntry" type="Button" value="CE" onclick="ClearEntry()" /></td> </tr> <tr> <td><input name="btnFour" type="Button" value="4" onclick="PressedNum(4)"></td> <td><input name="btnFive" type="Button" value="5" onclick="PressedNum(5)"></td> <td><input name="btnSix" type="Button" value="6" onclick="PressedNum(6)"></td> <td><input name="btnPlus" type="Button" value="+" onclick="Operations('+')" /></td> <td><input name="btnMultiply" type="Button" value="*" onclick="Operations('*')" /></td> </tr> <tr> <td><input name="btnOne" type="Button" value="1" onclick="PressedNum(1)"></td> <td><input name="btnTwo" type="Button" value="2" onclick="PressedNum(2)"></td> <td><input name="btnThree" type="Button" value="3" onclick="PressedNum(3)"></td> <td><input name="btnMinus" type="Button" value="-" onclick="Operations('-')" /></td> <td ><input name="btnDivide" type="Button" value=" / " onclick="Operations('/')" /></td> </tr> <tr> <td><input name="btnZero" type="Button" value="0" onclick="PressedNum(0)"></td> <td colspan="2"><input id="WideBtn" name="btnEquals" type="Button" value="=" onclick="Operations('=')"></td> <td></td> <td></td> </tr> </table> </form> |
Превратим набор элементов во что-то стоящее
Для любого пользовательского приложения в первую очередь важен графический интерфейс. Поэтому нужно привести в порядок расположение клавиш и текстового поля, а также скомпоновать их так, чтобы они выглядели, как единое целое.
Итак, для начала оформим внешний вид самой таблицы. Я задал объемную рамку вокруг калькулятора, установил цвет фона, внешние отступы, ширину таблицы и вид размещения текста внутри нее.
1 2 3 4 5 6 7 8 | .Table { border: 3px inset gray; background: #E6E6FA; margin-left: 22%; margin-top: 12px; width: 270px; text-align: center; } |
Теперь красиво оформим кнопки.
1 2 3 4 5 6 | .Table input { border: 2px solid gray; border-radius: 4px; width: 30px; margin: 4px; } |
Также у меня в коде есть особые поля. Это широкая кнопка для знака «равно» и само текстовое поле ввода. Для начала я опишу стили поля ввода, которому я задал идентификатор TextEdit.
#TextEdit {
width: 255px;
height: 23px;
}
А теперь займемся редактированием широкой кнопки с идентификатором WideBtn.
#WideBtn {
width: 93px;
}
Как видите, теперь разрабатываемый калькулятор выглядит достаточно привлекательно и аккуратно. Осталось прописать логику работы функций на JS.
Вперед! Работай!
Вот теперь пришло время разобрать самое увлекательное! Ниже я прикреплю программный код на JS и прокомментирую важные моменты.
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 56 57 58 59 60 61 62 63 64 65 66 | <script language="JavaScript"> var ThisCalc = document.Calculation; //Определяю объект, с которым буду работать var CurResult = 0; //хранит текущий численный результат var IsNewNumFlag = false; //определяю вводится новое число или нет var OperPending = "";// хранит текущее нажатое значение //функция обрабатывает кнопки с цифрами function PressedNum (Num) { if (IsNewNumFlag)//если ввод нового числа, т.е. первой его цифры { ThisCalc.ReadOut.value = Num; IsNewNumFlag = false; } else {//если не новое if (ThisCalc.ReadOut.value == "0")//если был сброс и стоит 0 //то заменяем его на новую цифру ThisCalc.ReadOut.value = Num; Else //иначе дописываем цифры ThisCalc.ReadOut.value += Num; } } //функция обрабатывает кнопки с арифметическими операциями function Operations (Op) { var Readout = ThisCalc.ReadOut.value; if (IsNewNumFlag && OperPending != "=") { ThisCalc.ReadOut.value = CurResult; } else { IsNewNumFlag = true; if ( '+' == OperPending ) CurResult += parseFloat(Readout); else if ( '-' == OperPending ) CurResult -= parseFloat(Readout); else if ( '/' == OperPending ) CurResult /= parseFloat(Readout); else if ( '*' == OperPending ) CurResult *= parseFloat(Readout); else CurResult = parseFloat(Readout); ThisCalc.ReadOut.value = CurResult; OperPending = Op; } } // Очистка текущей цифры function ClearEntry () { ThisCalc.ReadOut.value = "0"; IsNewNumFlag = true; } // Сброс всех параметров калькулятора function Clear () { Currents = 0; OperPending = ""; ClearEntry(); } </script> |
Вот теперь программа готова. Буду очень рад, если вы подпишитесь на обновления моего обучающего блога и поделитесь ссылкой на него с коллегами и друзьями. Пока-пока!
С уважением, Роман Чуешов
Руслан, JS воспринимает текстовое поле как то, что в него будет введён текст, а мы вводим цифры. Какая функция занимается этим переводом?
У меня не работает. Куда вставлять программный код на JS? Я вписал его после формы. Вся программа оформлена в тег html.