- само текстовое поле, создающееся при помощи тега <input> в параметрах которого присутствуют настройки делающие обычное поле ввода неотличимым от дисплея калькулятора.
Первый параметр type=text говорит браузеру о том, что необходимо отобразить текстовое поле ввода.
Следующий, обязательный для всех элементов параметр name=answer дает уникальное имя данному элементу. По этому имени будут выполняться все обращения из функций к данному текстовому полю.
Следующий параметр size задает длину текстового поля, равную 40 символам.
Далее установлен параметр maxlength=30 , который как видно из названия задает максимальную длину выводимых на дисплей цифр. Этот параметр одновременно ограничивает максимальные числа для операций.
А теперь мы добрались до самого важного параметра - назначение функции-обработчика для события onChange, которое как видно из названия возникает каждый раз при изменении состояния текстового поля. Функцией-обработчиком данного события назначается функция numControl(this.value), которая как видно из описания принимает параметр this.value, который позволяет передать содержимое текущего объекта в функцию по значению.
Последний по порядку, но не по значимости параметр - readonly, придает текстовому полю важное свойство, увеличивающее сходство с дисплеем калькулятора - доступ пользователя только для чтения. На функции это ограничение не распространяется, они могут делать запись в это текстовое поле.
Следующая строка - <input type="text" name="mem" size=3 maxlength=3 readonly>, создает поле типа text, с именем mem и длиной 3 символа, для отображения пользователю сообщения о том, что в память калькулятора занесено какое-то значение, для последующих операций с ним. Это поле также содержит параметр readonly, задающий режим только для чтения для данного поля.
Далее начинается создание цифровых и операционных клавиш. Начинаю с создания кнопки Backspace, которая будет выполнять затирание введенных символов. Выполнено это строкой <input type="button" name="backspace">
Разберем её по параметрам:
- type=button, этот параметр задает тип элемента кнопка.
- name=backspace - уникальный идентификатор элемента в html-документе.
- class=redText, в этой строке впервые используется класс CSS, созданный в начале документа, он задает цвет выводимого шрифта на кнопке красным.
- value= « Backspace », этот параметр отвечает за выводимый на кнопке текст, для размещения текста по центру используются отступы пробелами.
- далее кнопке назначается функция-обработчик для события onClick, которое возникает как несложно догадаться принажатии данной кнопки. В качестве обработчика назначена функция Backspace, принимающая в качестве параметра строку содержащую текущее содержимое дисплея калькулятора. В конце вызова функции-обработчика описывается состояние возвращаемое функцией системе после выполнения.
Далее создается кнопка CE выполняющая очистку последнего введенного числа. Выполняется это действие строкой <input type="button" name="CE">Параметры в ней идентичны по своему значению параметрам кнопки Backspace. В качестве функции-обработчика события onClick выбрана ceCalc() не принимающая никаких параметров, да и зачем они здесь...
Следующая кнопка отличается от предыдущих своим типом, это кнопка С выполняющая сброс всех переменных в исходное состояние. Выполняется это действие строкой <input type="reset" name="C">Здесь интересен тип элемента type=reset, который указывает браузеру создать кнопку сбрасывающую все значения установленные в форме в исходное состояние. Тем не менее и этой кнопке назначается дополнительная функция-обработчик события onClick. Это необходимо, так как в программе существуют переменные недоступные через систему элементов формы. А их тоже необходимо очистить. Для этого используется функция-обработчик ClearСalc(), не принимающая параметров при вызове.
Далее создается клавиша МС которая выполняет очистку памяти калькулятора. Выполняется это строкой <input type="button" name="MC">
Переходим к созданию цифровых клавиш. Первыми
описываются клавиши 7, 8 и 9. Это выполняется следующими строками:
<input type="button" name="calc7">
<input type="button" name="calc8">
<input type="button"
name="calc9">
Как видно, код для создания цифровых клавиш, абсолютно идентичен, за исключением назначенных клавишам цифр. Для всех клавиш назначен один класс CSS blueText, который заставляет выводить цифры на клавишах синим цветом . Функция-обработчик для всех клавиш назначена одна и та-же - numControl отличие при ее вызове в передаваемом параметре - цифровом значении клавиши.
Далее создается клавиша операции деления. Это выполняется строкой <input type="button" name="divide">Здесь снова используется для оформления класс redText, функцией-обработчиком назначена operDiv.
Затем создается клавиша функции извлечения корня. Код - <input type="button" name="sqrt">Функцией-обработчиком назначается operSqrt.
Далее создается клавиша извлечения значения из памяти MR. Код создающий эту клавишу выглядит так - <input type="button" name="MR">Функцией-обработчиком назначается recallMem, получающая в качестве параметра переменную Mem, содержащую текущее сохраненное значение.
Теперь снова создаем цифровые клавиши. На этот
раз 4, 5 и 6. Код приведен ниже:
<input type="button" name="calc4">
<input type="button" name="calc5">
<input type="button"
name="calc6">
Здесь используется тот же код, что и при создании других цифровых клавиш калькулятора, описанный выше. Только используемые цифры свои. Снова вызывается в качестве обработчика функция numControl с передачей в качестве параметра значения клавиш.
Следующей создается клавиша умножение *. Код
приведен ниже:
<input type="button"
name="multiply">
Класс оформления redText, так как это клавиша операции, функция-обработчик назначена operMult.
Далее создается клавиша операции получения
процентного отношения. Код приведенный
ниже
показывает,
как
это
делается:
<input type="button"
name="percent">
Как и в других случаях отличий два - стиль оформления - здесь использован класс blueText, уникальное имя и функция-обработчик - PrecentButton.
Функциональность следующей клавиши чуть-чуть
расширяет стандартный набор функций калькулятора - она предназначена для
вычитания текущего значения находящегося на дисплее из значения сохраненного в
памяти. Код создающий эту клавишу приведен ниже:
<input type="button" name="MS">
Класс оформления снова redText, функцией-обработчиком назначается subtrMem, принимающая в качестве значения содержимое дисплея калькулятора. При передаче параметра здесь используется доступ к содержимому элемента по иерархии html-документа, и вот именно в таких случаях важны уникальные идентификаторы. Чтобы избежать ошибок в сценарии.
Создаем еще три цифровые клавиши - 1, 2 и 3. Код
ничем от предыдущих цифровых клавиш ничем не отличается, и приведен ниже:
<input type="button" name="calc1">
<input type="button" name="calc2">
<input type="button"
name="calc3">
Снова вызывается в качестве обработчика функция numControl с передачей в качестве параметра значения клавиш.
Далее будет создана клавиша операции вычитания.
Код создающий клавишу приведен ниже:
<input type="button"
name="minus">
Класс CSS - blueText, функцией-обработчиком назначена operMinus.
После этого содается клавиша вычисления функции
f(x) = 1/x. Код приведен ниже:
<input type="button" name="recip">
И снова никаких особенных отличий кроме надписи, идентификатора элемента и функции-обработчика operRecip.
Следующая клавиша продолжает некоторое
расширение функциональности калькулятора. Она называется М+ и отвечает за
сложение значения с дисплея со значением записанным в память и сохранением
результата операции в памяти. Код создания
клавиши
приведен
ниже:
<input type="button"
name="Mplus">
Здесь используется привычный стиль оформления redText, и функция-обработчик addMem принимающая в качестве параметра содержимое дисплея калькулятора. И снова видно. Что при обращении к содержимому дисплея используется доступ через иерархию документа с использованием уникальных идентификаторов элементов страницы.
Затем создается цифровая клавиша 0. Ее создание
не уникально и ничем не отличается от прочих цифровых клавиш. Код
приведен
ниже:
<input type="button"
name="calc0">
Снова вызывается в качестве обработчика функция numControl с передачей в качестве параметра значения клавиши.
Далее пишем клавишу унарной операции присвоения
числу знака +/-.
<input type="button"
name="negate">
Код повторяется вновь, отличие - функция-обработчик operNegative.
Далее продолжаем расширять функциональность
калькулятора. Пишем клавишу устанавливающую знак « . ». Код приведен ниже:
<input type="button"
name="dot">
Код снова повторяется , функция-обработчик numControl принимающая в качестве параметра символ « . ».
Теперь создаем клавишу тривиальной
математической операции - сложения. Код создающий
клавишу
« + » приведен
ниже:
<input type="button"
name="plus">
Для клавиши используется стиль redText, уникальное имя и функция-обработчик operPlus, принимающая в качестве параметра флаг выполнения операции сложения.
И вот можно написать последнюю клавишу моего
калькулятора - клавишу « = ». Код создания
этой
клавиши
приведен
ниже:
<input type="button"
name="equal">
Стиль оформления клавиши redText, функция-обработчик operEqual не принимает никаких параметров при вызове.
На этом создание html-документа заканчивается. Закрываем все вложенные таблицы закрывающим тегом </table>. Затем закрываем форму закрывающим тегом </form> и тело документа тегом </body>. Затем закрывается html-документ тегом </html>. На этом создание графической части калькулятора закончено, можно переходить к созданию функциональной начинке на языке Javascript.
1.6 Описание
JavaScript-кода
В качестве языка программирования для данного проекта выбран JavaScript. Функции на этом языке располагаются всегда в начале документа, так как при вызове функции-обработчика в html-коде она уже должна быть объявлена и описана. Первой строкой всегда идет тег <script> содержащий указатель на используемый скриптовый язык, в данном случае JavaScript. Это необходимо для корректной работы браузера. Дело в том, что в браузере есть подпрограмма называемая парсером, которая отвечает за отображение html-кода, но совершенно не разбирающаяся в скриптовых языках. Поэтому браузер встречая тег <script> в теле html-документа проверяет параметр Language и в зависимости от того какой скриптовый язык там указан, вызывает обработчик именно для этого языка. Обработчик начинает считывать и построчно интерпретировать текст программы непосредственно со строки следующей за тегом <SCRIPT LANGUAGE="JavaScript">. Итак перейдем к рассмотрению функций реализующих функциональность калькулятора.
В начале программы как это обычно принято располагается блок объявления переменных. Объявление каждой переменной начинается с ключевого слова var, так как в JavaScript не поддерживается строгая типизация и тип переменной определяется по содержимому. Переменные одновременно с объявлением инициализируются исходными значениями. Здесь объявлены следующие переменные:
Mem = 0;
Переменная хранящая в себе число записываемое в
нее какой-либо функцией-обработчиком при нажатии клавиш «MS», «MR», «M+» и
очищаемая при нажатии клавиш «MC» или «C». В исходном состоянии переменная
проинициализирована значением 0.Digit1 = "";Digit2 = "";
Две переменных предназначенных для хранения первого и второго операндов. Больше двух переменных такого типа использовать нет смысла, так как при большем числе операндов содержимое одной из них перезаписывается новым значением содержащим результат предыдущего действия, а вторая готова к приему следующего операнда и так далее.. Инициализируются эти переменные пустым полем. Для хранения вспомогательных состояний будет использоваться переменная-флаг Status.
Status = "blank";
Далее объявляется и инициализируется последняя переменная, которая хранит в себе значение текущей математической операции.
CurrOper = "";
В исходном состоянии переменная инициализирована пустым значением.
Далее начинается описание функций-обработчиков нажатий клавиш.
Первой описана функция out2Display которая выводит на дисплей результат какого либо действия пользователя. Описание функции out2Display дается ниже:
out2Display(displaynumber)
{.calculator.answer.value = displaynumber;
}
Описание любой функци начинается с ключевого слова function. Данная функция принимает в качестве параметра переменную displaynumber, которая как видно из названия будет содержать значение для вывода на дисплей калькулятора. Обращение к свойству value элемента answer выполняется через последовательное указание иерархии элементов в документе, через символ прямого доступа к членам класса «.», от старшего элемента «document» обозначающего текущий html-документ, через элемент «форма» с именем «calculator», к строке ввода изображающей дисплей калькулятора под именем «answer». Функция выполняет простейшую функцию - присвоение значения принятой в параметрах переменной содержимому текстового поля ввода (изображающего дисплей).
Следующая функция называется clearMem и предназначена для очистки памяти калькулятора. Описание ее приведено ниже:
clearMem()
{= 0;.calculator.mem.value = "";
}
Выполняет она следующее: очищает переменную Mem, присваивая ей значение 0 и стирает символ «М» из текстового поля «mem», который напоминает пользователю о том, что в памяти сохранено какое-то значение.
Продолжаем работу с памятью калькулятора. Следующая функция называется recallMem и предназначена для вызова из памяти сохраненного значения для выполнения с ним какого-либо действия. Описание функции приведено ниже:
recallMem(answer)
{(Status != "blank")
{+= answer;
}
{= answer;
}= "blank";Display(answer);
}
В первую очередь выполняется проверка состояния переменной флага Status, если оно равно исходному состоянию «blank», то значение переменной Digit2 складывается со значением хранящемся в переменной Mem и передаваемой в данную функцию в виде параметра и полученное значение вновь присваивается переменной Digit2. Если значение переменной флага было изменено, то содержимое переменной Mem передаваемой в функцию в виде параметра просто присваивается переменной Digit1. Затем восстанавливается исходное значение переменной Status и вызывается функция out2Display которой передается параметр answer для вывода на дисплей калькулятора.
Продолжая работу с реализацией операций с участием памяти калькулятора пишем следующую функцию subtrMem, предназначенную для вычитания значения находящегося на дисплее из значения хранящегося в памяти калькулятора. Описание этой функции приводится ниже:
subtrMem(answer)
{= Mem - eval(answer);
}
Эта функция принимает в качестве параметра значение находящееся на дисплее , и вычитает его из значения переменной Mem с присвоением результата операции снова переменной Mem, то есть по факту уменьшая значение хранящееся в памяти на значение взятое с дисплея калькулятора. К значению полученному в виде параметра перед операцией вычитания применяется встроенная функция eval, которая приводит строковое значение полученное в параметре к виду применимому в арифметических операциях, то есть числовому.
Заканчивая реализацию функций работающих с памятью калькулятора, создадим еще одну - addMem, выполняющую сложение значения находящегося на дисплее с значением хранящимся в памяти калькулятора и выполняющую запись результата назад в память калькулятора. Описание этой функции немного отличается от предыдущей, поэтому нуждается в описании и приведено ниже: