Разработка приложения для выполнения математических операций и вычислений

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

КОСТАНАЙСКИЙ СОЦИАЛЬНО-ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ

ИМЕНИ АКАДЕМИКА З.АЛДАМЖАР

ТЕХНИЧЕСКИЙ ФАКУЛЬТЕТ

КАФЕДРА ФИЗИКИ И ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ

Курсовая работа по дисциплине

Инструментальные средства разработки программ

Тема: Разработка приложения для выполнения математических операций и вычислений

Выполнил: Комаров

Сергей Борисович

3 курса специальности

ВТ и ПО

Научный руководитель

Рак О.В.

Костанай 2011

ВВЕДЕНИЕ

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

В настоящее время существует огромное множество технологий реализации приложений которые с успехом используются программистами. Одними из самых популярных технологий являются технологии базирующиеся на Web. Их преимущество перед другими технологиями заключается в абсолютной кросс-платформенности и низких требованиях к аппаратному обеспечению пользователя, т. к. в большинстве случаев обработка основных объемов информации выполняется на стороне мощных серверов и клиенту остается только вывести результат работы переданный ему по сети. Среди технологий ориентированных на использование в глобальной паутине есть и монстры вроде Java которые используют в немалой степени вычислительные мощности компьютеров конечных пользователей тем не менее являясь очень популярными среди разработчиков благодаря мощному инструментарию разработанному для этой среды.

Также в последнее время сильно набрали популярность технологии использующие интерпретируемые языки программирования, такие как PHP, JavaScript, Python и т. п. У каждого из этих средств разработки есть свои преимущества. РНР прост в освоении, имеет развитую систему библиотек кода которая позволяет найти готовые функции для выполнения практически любой поставленной задачи (кроме разве, что низкоуровневого программирования портов и т. п.). Phyton набирающий популярность в последнее время интересен своей лаконичностью и оригинальным синтаксисом (отсутствием всякого рода операторских скобок например -- вместо этого используется система отступов, что одновременно делает код более удобочитаемым), а кроме того он портирован на все популярные платформы (вплоть до Symbian OS используемой в смартфонах) и тоже имеет очень мощные библиотеки содержащие программные инструменты для выполнения любых задач программирования. Технология JavaScript стоит особняком среди всех этих средств разработки. Она отнюдь не нова -- разработан JavaScript был еще в 1995 году в недрах давно почившей компании Netscape которая поручила Брендону Айхо разработать скриптовый язык для их веб-браузера Netscape Navigator который в тот момент был одним из самых популярных. На синтаксис оказали большое влияние языки программирования C & Java. На текущий момент Java Script -- это широко используемый разработчиками объектно-ориентированный скриптовый язык программирования на котором основана популярная технология AJAX, которая позволяет обновлять содержимое страницы не перезагружая ее целиком с сервера, а лишь обновляя некоторые интерактивные элементы. Еще JavaScript удобен тем, что программы написанные на нем для выполнения на стороне клиента не требуют никакого программного обеспечения, кроме обычного веб-браузера т. е. являются истинно кросс-платформенными (будут одинаково хорошо работать как в Windows, так и в GNU/Linux или MacOS). Также удобно то, что для разработки приложения на Java Script можно использовать практически любую IDE, т. к. он поддерживается повсеместно, а можно при наличии опыта и вовсе воспользоваться Notepad под Windows или Vim || Gedit под GNU/Linux (последнее более предпочтительно, так как, в этих редакторах в отличие от Блокнота есть подсветка синтаксиса, что упрощает редактирование кода).

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

1. РАЗРАБОТКА ПРИЛОЖЕНИЯ

таблица клавиша память калькулятор

1.1 Задание на курсовой проект

Тема: Разработка приложения для выполнения математических операций и вычислений.

Необходимо разработать программу, которая будет выполнять все привычные для таких приложений функции, и иметь интуитивно-понятный интерфейс.

1.2 Теоретическое обоснование выбора формы реализуемого приложения

Для начала необходимо разобраться, что же из себя должно представлять приложение которое будет выполнять данные функции. С древних времен людям был известен такой вычислительный инструмент как обычные счеты (в римском - абак). Они позволяли выполнять простейшие вычисления включая сложение и вычитание сравнительно больших чисел благодаря делению рядов по типу разрядов. Следующим шагом в развитии человечества в данном направлении стал арифмометр - настольная (или портативная) механическая вычислительная машина, предназначенная для точного умножения и деления, а также для сложения и вычитания. Прогресс был налицо т. к. кроме простых процедур -- сложения и вычитания, можно было выполнить более сложные математические операции -- деление и умножение.. Но человечество не остановилось на достигнутом.. Прогресс вообще невозможно остановить, люди хотят большего, лучшего и более удобного во всех областях жизни.. И вот на смену арифмометру пришло чудо XX века -- электронный калькулятор, который позволял выполнять не только сложение, вычитание, деление и умножение с потрясающей точностью, но и извлекать квадратный корень числа, процентное отношение , рассчитывать степени чисел и т. п. операции над числами или алгебраическими формулами. И здесь прогресс не останавливается ни на мгновение - появляются все более разнообразные виды калькуляторов -- финансовые , инженерные, статистические , медицинские и т. п. Калькуляторы встраиваются во всевозможную технику -- сотовые телефоны, часы и т. д. Встраиваемые калькуляторы стало возможным создать, благодаря программированию приложений выполняющих необходимые функции и имеющих узнаваемый и интуитивно-понятный пользователю интерфейс. Таким образом на текущий момент, самым универсальным средством для выполнения математических расчетов и вычислений является программный калькулятор. Его мы и будем создавать в процессе работы над проектом. И использовать будем кросс-платформенную технологию основанную на базе смешения языка программирования Java Script, языка гипертекстовой разметки HTML, и технологии каскадных таблиц стилей CSS, которую мы используем для придания приложению привычного пользователю вида.

1.3 Обоснование выбора используемых инструментов

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

В данном случае решено использовать язык программирования «JavaScript», т.к. в этом языке реализовано большое разнообразие методов и инструментов для разработки программного обеспечения.

JavaScript -- объектно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript.

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.[1]

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

Разработка программы будет выполнена на ПК под управлением ОС GNU/Linux, так как данная ОС очень удобна для нужд программиста, благодаря большому количеству свободного инструментария для разработки на любом языке программирования. В качестве редактора кода выбрана среда Bluefish Editor -- свободный инструмент распознающий синтаксис многих языков программирования и предоставляющий средства отладки. Проверка кода будет выполняться в интернет-браузерах Opera, Mozilla Firefox и Google Chrome.

1.4 Описание структуры приложения

Программа будет использовать алгоритм согласно Рисунку 1 Приложения С и функционально будет состоять из 3 основных частей:

HTML-документа

CSS-блоков

Java Script - кода

1.5 Описание HTML-документа

HTML (от англ. HyperText Markup Language -- «язык разметки гипертекста») -- стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.

Основой для приложения будет тело HTML-документа, этот код будет представлен в виде таблиц и формы. Таблица задает точное расположение элементов калькулятора, а форма делает элементы интерактивными и доступными для Java Script кода. Любой html-документ представлен в виде иерархии элементов. т. е. Всегда имеется головной открывающий тег <html> и парный ему закрывающий тег </html> которые определяют границы html-документа и содержат все остальные элементы документа. Подобная иерархия элементов не только упорядочивает код, но и позволяет организовать доступ к объектам документа из javascript-кода на том-же принципе , что и при объектно-ориентированном построении программы. После головного открывающего тега, находится блок заголовка html-документа. Он ограничивается тегами <head><title></title></head>.

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

CSS (англ. Cascading Style Sheets -- каскадные таблицы стилей) -- технология описания внешнего вида документа, написанного языком разметки.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.

CSS при отображении страницы может быть взята из различных источников (порядок иерархии от сильного к слабому):

Авторские стили (информация стилей, предоставляемая автором страницы) в виде:

- Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style.

- Встроенных стилей -- блоков CSS внутри самого HTML-документа.

- Внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе.

- Пользовательские стили

- Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам.

- Стиль браузера

- Стандартный стиль, используемый браузером по умолчанию для представления элементов.

Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений.

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

Блок определений CSS содержит пункты описывающие следующие элементы:

- элемент <body>, для него задается тип начертания шрифта по умолчанию; в качестве оного используется шрифт из семейства helvetica, т. к. на мой взгляд в данном случае он будет более приятен глазу.

- элемент <p>, для которого задается размер шрифта по умолчанию равный 12 pt.

- Класс redText который задает как видно из названия красный цвет элемента в параметрах которого указана ссылка на использование данного класса.

- Класс blueText который задает синий цвет элементам.

Далее в теле документа располагается блок кода на языке Java Script. Он предваряется строкой комментарием <SCRIPT LANGUAGE="JavaScript"> которая указывает браузеру выполняющему обработку документа, что с этого момента начинается javascript-код и необходимо передать управление от парсера, который разбирает html-код к соответсвующему встроенному в браузер интерпретатору языка . Этот блок содержит функции реализующие работу калькулятора. Они описываются в следующем разделе. Блок заканчивается закрывающим тегом </script> который является парным открывающему.

Затем, после закрывающего заголовок тега </head> начинается основная часть html-документа, это непосредственно тело документа, которое начинается с открывающего тега <body>. В теге тела описывается стиль по умолчанию, для отображения данного документа. Это выполнено в строке <body bgcolor="#EDEDED" text="#000000" link="#000000" topmargin="0" leftmargin="0">.

Сам калькулятор реализован в форме, которая начинается тегом <form> и содержит обычно интерактивные элементы, которые могут обрабатыватся как на машине пользователя, так и на удаленном сервере в зависимости от выбранной технологии. Формы обычно содержат элементы для ввода пользователем некоторых данных необходимых для работы приложения.

В нашем случае будут использованы 3 вида полей ввода:

- текстовое поле имитирующее дисплей калькулятора

- кнопка (это тоже элемент ввода -- просто ввод выполняется в неявной форме -- передачей параметра записанного при описании кнопки)

- кнопка сброса -- специальная разновидность кнопки, которая сбрасываетвсе состояния элементов формы в исходное.

Форма создается тегом <form> который содержит специальный параметр name = calculator, в котором указываем имя данной формы. Это принципиально, и кроме того, имя должно быть уникальным, т. к. если возникает необходимость обратиться к какому либо элементу html-документа из кода, то это делается по иерархии элементов, указывая их имена в качестве идентификаторов.

Итак начинается описание калькулятора, создание графической оболочки приложения. В первую очередь создаем таблицу которая будет являться каркасом приложения и в которой будут располагаться элементы управления приложением -- при помощи тега <table>. В этом теге мы также задаем цвет фона (свойство bgcolor="#aaaaaa") и ширину таблицы (свойство width=220) , которая будет являться шириной нашего приложения. Так как структура калькулятора с точки зрения html -- разметки вещь довольно сложная, я буду использовать вложение одних таблиц в другие, т. к. это позволит придать калькулятору более привычный пользователю вид.

Далее создается следующая -- теперь уже вложенная таблица, с параметрами bgcolor="#cccccc" задающим цвет фона и border=1 задающем толщину линий которыми рисуется таблица. Эта таблица будет состоять из одной ячейки и ее назначение -- нарисовать окантовку калькулятора.

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

Предназначение верхней ячейки -- вывести название программы JsCalculator строго по центру. Это достигается применением тега <center> и выводом названия через теги <b style="color:white">JsCalculator</b>. Свойство style тега <b> задает цвет начертания шрифта -- белый.

Предназначение нижней ячейки -- размещение элементов калькулятора во вложенной таблице.

Следующая вложенная таблица при создании имеет только два параметра задающих отсутствие бордюра вокруг элементов калькулятора и ширину таблицы содержащей элементы равной 100% от возможной (возможная ширина 220pt была задана выше, в таблице «первого уровня»).

В первой строке этой таблицы создается одна ячейка, которая будет содержать текстовое поле, настроенное так, чтобы его поведение полностью копировало поведение дисплея калькулятора. Это выполняется при помощи строки <tr><td colspan=6><input type="text" name="answer" size=40 maxlength=30 onChange="numControl(this.value)" readonly></td></tr>. Разберем ее:

- тег <tr> (сокращение от table row) создает строку таблицы.

- тег <td> создает ячейку в этой строке. И имеет параметр colspan=6, который нужен для координации размещения данной ячейки над низлежащими в других строках ячейках. То есть эта ячейка растягивается в ширину на 6 нижележащих ячеек.

- само текстовое поле, создающееся при помощи тега <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" class="redText" value=" Backspace " onClick = "Backspace(document.calculator.answer.value); return false;">.

Разберем её по параметрам:

- type=button, этот параметр задает тип элемента кнопка.

- name=backspace -- уникальный идентификатор элемента в html-документе.

- class=redText, в этой строке впервые используется класс CSS, созданный в начале документа, он задает цвет выводимого шрифта на кнопке красным.

- value= « Backspace », этот параметр отвечает за выводимый на кнопке текст, для размещения текста по центру используются отступы пробелами.

- далее кнопке назначается функция-обработчик для события onClick, которое возникает как несложно догадаться принажатии данной кнопки. В качестве обработчика назначена функция Backspace, принимающая в качестве параметра строку содержащую текущее содержимое дисплея калькулятора. В конце вызова функции-обработчика описывается состояние возвращаемое функцией системе после выполнения.

Далее создается кнопка CE выполняющая очистку последнего введенного числа. Выполняется это действие строкой <input type="button" name="CE" class="redText" value=" CE " onClick="ceCalc(); return false;">. Параметры в ней идентичны по своему значению параметрам кнопки Backspace. В качестве функции-обработчика события onClick выбрана ceCalc() не принимающая никаких параметров, да и зачем они здесь...

Следующая кнопка отличается от предыдущих своим типом, это кнопка С выполняющая сброс всех переменных в исходное состояние. Выполняется это действие строкой <input type="reset" name="C" class="redText" value=" C " onClick="clearCalc(); return false;">. Здесь интересен тип элемента type=reset, который указывает браузеру создать кнопку сбрасывающую все значения установленные в форме в исходное состояние. Тем не менее и этой кнопке назначается дополнительная функция-обработчик события onClick. Это необходимо, так как в программе существуют переменные недоступные через систему элементов формы. А их тоже необходимо очистить. Для этого используется функция-обработчик ClearСalc(), не принимающая параметров при вызове.

Далее создается клавиша МС которая выполняет очистку памяти калькулятора. Выполняется это строкой <input type="button" name="MC" class="redText" value=" MC " onClick="clearMem(); return false;">, в которой как и прежде назначаются тип элемента, уникальный идентификатор и функция-обработчик.

Переходим к созданию цифровых клавиш. Первыми описываются клавиши 7, 8 и 9. Это выполняется следующими строками:

<input type="button" name="calc7" class="blueText" value=" 7 " onClick = "numControl('7'); return false;">

<input type="button" name="calc8" class="blueText" value=" 8 " onClick = "numControl('8'); return false;">

<input type="button" name="calc9" class="blueText" value=" 9 " onClick = "numControl('9'); return false;">

Как видно, код для создания цифровых клавиш, абсолютно идентичен, за исключением назначенных клавишам цифр. Для всех клавиш назначен один класс CSS blueText, который заставляет выводить цифры на клавишах синим цветом . Функция-обработчик для всех клавиш назначена одна и та-же -- numControl отличие при ее вызове в передаваемом параметре -- цифровом значении клавиши.

Далее создается клавиша операции деления. Это выполняется строкой <input type="button" name="divide" class="redText" value=" / " onClick = "operDiv(1); return false;">. Здесь снова используется для оформления класс redText, функцией-обработчиком назначена operDiv.

Затем создается клавиша функции извлечения корня. Код - <input type="button" name="sqrt" class="blueText" value="sqrt" onClick="operSqrt(); return false;">. Функцией-обработчиком назначается operSqrt.

Далее создается клавиша извлечения значения из памяти MR. Код создающий эту клавишу выглядит так - <input type="button" name="MR" class="redText" value=" MR " onClick="recallMem(Mem); return false;">. Функцией-обработчиком назначается recallMem, получающая в качестве параметра переменную Mem, содержащую текущее сохраненное значение.

Теперь снова создаем цифровые клавиши. На этот раз 4, 5 и 6. Код приведен ниже:

<input type="button" name="calc4" class="blueText" value=" 4 " onClick = "numControl('4'); return false;"> .

<input type="button" name="calc5" class="blueText" value=" 5 " onClick = "numControl('5'); return false;">.

<input type="button" name="calc6" class="blueText" value=" 6 " onClick = "numControl('6'); return false;">.

Здесь используется тот же код, что и при создании других цифровых клавиш калькулятора, описанный выше. Только используемые цифры свои. Снова вызывается в качестве обработчика функция numControl с передачей в качестве параметра значения клавиш.

Следующей создается клавиша умножение *. Код приведен ниже:

<input type="button" name="multiply" class="redText" value=" * " onClick = "operMult(1); return false;">.

Класс оформления redText, так как это клавиша операции, функция-обработчик назначена operMult.

Далее создается клавиша операции получения процентного отношения. Код приведенный ниже показывает, как это делается:

<input type="button" name="percent" class="blueText" value=" % " onClick = "operPercent(); return false;">.

Как и в других случаях отличий два -- стиль оформления -- здесь использован класс blueText, уникальное имя и функция-обработчик -- PrecentButton.

Функциональность следующей клавиши чуть-чуть расширяет стандартный набор функций калькулятора -- она предназначена для вычитания текущего значения находящегося на дисплее из значения сохраненного в памяти. Код создающий эту клавишу приведен ниже:

<input type="button" name="MS" class="redText" value=" MS " onClick = "subtrMem(document.calculator.answer.value); return false;">.

Класс оформления снова redText, функцией-обработчиком назначается subtrMem, принимающая в качестве значения содержимое дисплея калькулятора. При передаче параметра здесь используется доступ к содержимому элемента по иерархии html-документа, и вот именно в таких случаях важны уникальные идентификаторы. Чтобы избежать ошибок в сценарии.

Создаем еще три цифровые клавиши -- 1, 2 и 3. Код ничем от предыдущих цифровых клавиш ничем не отличается, и приведен ниже:

<input type="button" name="calc1" class="blueText" value=" 1 " onClick = "numControl('1'); return false;">

<input type="button" name="calc2" class="blueText" value=" 2 " onClick = "numControl('2'); return false;">

<input type="button" name="calc3" class="blueText" value=" 3 " onClick = "numControl('3'); return false;">

Снова вызывается в качестве обработчика функция numControl с передачей в качестве параметра значения клавиш.

Далее будет создана клавиша операции вычитания. Код создающий клавишу приведен ниже:

<input type="button" name="minus" class="redText" value=" - " onClick = "operMinus(1); return false;">

Класс CSS - blueText, функцией-обработчиком назначена operMinus.

После этого содается клавиша вычисления функции f(x) = 1/x. Код приведен ниже:

<input type="button" name="recip" class="blueText" value="1/x " onClick = "operRecip(); return false;">

И снова никаких особенных отличий кроме надписи, идентификатора элемента и функции-обработчика operRecip.

Следующая клавиша продолжает некоторое расширение функциональности калькулятора. Она называется М+ и отвечает за сложение значения с дисплея со значением записанным в память и сохранением результата операции в памяти. Код создания клавиши приведен ниже:

<input type="button" name="Mplus" class="redText" value=" M+ " onClick = "addMem(document.calculator.answer.value); return false;">

Здесь используется привычный стиль оформления redText, и функция-обработчик addMem принимающая в качестве параметра содержимое дисплея калькулятора. И снова видно. Что при обращении к содержимому дисплея используется доступ через иерархию документа с использованием уникальных идентификаторов элементов страницы.

Затем создается цифровая клавиша 0. Ее создание не уникально и ничем не отличается от прочих цифровых клавиш. Код приведен ниже:

<input type="button" name="calc0" class="blueText" value=" 0 " onClick = "numControl('0'); return false;">

Снова вызывается в качестве обработчика функция numControl с передачей в качестве параметра значения клавиши.

Далее пишем клавишу унарной операции присвоения числу знака +/-.

<input type="button" name="negate" class="blueText" value="+/- " onClick = "operNegative(); return false;">

Код повторяется вновь, отличие -- функция-обработчик operNegative.

Далее продолжаем расширять функциональность калькулятора. Пишем клавишу устанавливающую знак « . ». Код приведен ниже:

<input type="button" name="dot" class="blueText" value=" . " onClick = "numControl('.'); return false;">

Код снова повторяется , функция-обработчик numControl принимающая в качестве параметра символ « . ».

Теперь создаем клавишу тривиальной математической операции -- сложения. Код создающий клавишу « + » приведен ниже:

<input type="button" name="plus" class="redText" value=" + " onClick="operPlus(1); return false;">

Для клавиши используется стиль redText, уникальное имя и функция-обработчик operPlus, принимающая в качестве параметра флаг выполнения операции сложения.

И вот можно написать последнюю клавишу моего калькулятора -- клавишу « = ». Код создания этой клавиши приведен ниже:

<input type="button" name="equal" class="redText" value=" = " onClick = "operEqual(); return false;">

Стиль оформления клавиши 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 не поддерживается строгая типизация и тип переменной определяется по содержимому. Переменные одновременно с объявлением инициализируются исходными значениями. Здесь объявлены следующие переменные:

var Mem = 0;

Переменная хранящая в себе число записываемое в нее какой-либо функцией-обработчиком при нажатии клавиш «MS», «MR», «M+» и очищаемая при нажатии клавиш «MC» или «C». В исходном состоянии переменная проинициализирована значением 0.

var Digit1 = "";

var Digit2 = "";

Две переменных предназначенных для хранения первого и второго операндов. Больше двух переменных такого типа использовать нет смысла, так как при большем числе операндов содержимое одной из них перезаписывается новым значением содержащим результат предыдущего действия, а вторая готова к приему следующего операнда и так далее.. Инициализируются эти переменные пустым полем. Для хранения вспомогательных состояний будет использоваться переменная-флаг Status.

var Status = "blank";

Далее объявляется и инициализируется последняя переменная, которая хранит в себе значение текущей математической операции.

var CurrOper = "";

В исходном состоянии переменная инициализирована пустым значением.

Далее начинается описание функций-обработчиков нажатий клавиш.

Первой описана функция out2Display которая выводит на дисплей результат какого либо действия пользователя. Описание функции out2Display дается ниже:

function out2Display(displaynumber)

{

document.calculator.answer.value = displaynumber;

}

Описание любой функци начинается с ключевого слова function. Данная функция принимает в качестве параметра переменную displaynumber, которая как видно из названия будет содержать значение для вывода на дисплей калькулятора. Обращение к свойству value элемента answer выполняется через последовательное указание иерархии элементов в документе, через символ прямого доступа к членам класса «.», от старшего элемента «document» обозначающего текущий html-документ, через элемент «форма» с именем «calculator», к строке ввода изображающей дисплей калькулятора под именем «answer». Функция выполняет простейшую функцию -- присвоение значения принятой в параметрах переменной содержимому текстового поля ввода (изображающего дисплей).

Следующая функция называется clearMem и предназначена для очистки памяти калькулятора. Описание ее приведено ниже:

function clearMem()

{

Mem = 0;

document.calculator.mem.value = "";

}

Выполняет она следующее: очищает переменную Mem, присваивая ей значение 0 и стирает символ «М» из текстового поля «mem», который напоминает пользователю о том, что в памяти сохранено какое-то значение.

Продолжаем работу с памятью калькулятора. Следующая функция называется recallMem и предназначена для вызова из памяти сохраненного значения для выполнения с ним какого-либо действия. Описание функции приведено ниже:

function recallMem(answer)

{

if(Status != "blank")

{

Digit2 += answer;

}

else

{

Digit1 = answer;

}

Status = "blank";

out2Display(answer);

}

В первую очередь выполняется проверка состояния переменной флага Status, если оно равно исходному состоянию «blank», то значение переменной Digit2 складывается со значением хранящемся в переменной Mem и передаваемой в данную функцию в виде параметра и полученное значение вновь присваивается переменной Digit2. Если значение переменной флага было изменено, то содержимое переменной Mem передаваемой в функцию в виде параметра просто присваивается переменной Digit1. Затем восстанавливается исходное значение переменной Status и вызывается функция out2Display которой передается параметр answer для вывода на дисплей калькулятора.

Продолжая работу с реализацией операций с участием памяти калькулятора пишем следующую функцию subtrMem, предназначенную для вычитания значения находящегося на дисплее из значения хранящегося в памяти калькулятора. Описание этой функции приводится ниже:

function subtrMem(answer)

{

Mem = Mem - eval(answer);

}

Эта функция принимает в качестве параметра значение находящееся на дисплее , и вычитает его из значения переменной Mem с присвоением результата операции снова переменной Mem, то есть по факту уменьшая значение хранящееся в памяти на значение взятое с дисплея калькулятора. К значению полученному в виде параметра перед операцией вычитания применяется встроенная функция eval, которая приводит строковое значение полученное в параметре к виду применимому в арифметических операциях, то есть числовому.

Заканчивая реализацию функций работающих с памятью калькулятора, создадим еще одну -- addMem, выполняющую сложение значения находящегося на дисплее с значением хранящимся в памяти калькулятора и выполняющую запись результата назад в память калькулятора. Описание этой функции немного отличается от предыдущей, поэтому нуждается в описании и приведено ниже:

function addMem(answer)

{

Mem = Mem + eval(answer);

document.calculator.mem.value = " M ";

Status = "blank";

}

В начале своей работы функция выполняет действие сложения значения из памяти со значением с дисплея, с применением приводящей функции eval. Затем во вспомогательном дисплее выводится символ «М» напоминающий о хранящемся в памяти значении и присваивается исходное значение переменной Status.

Следующей создается функция сброса калькулятора до исходного состояния. Называться она будет clearCalc и выполнять инициализацию перменных исходными значениями (как в блоке объявления переменных).

function clearCalc()

{

Digit1 = "";

Digit2 = "";

Status = "blank";

out2Display("");

}

Дальше создаем функцию предназначение которой стирать неверные символы из числа при ошибке пользователя. Название функции будет неоригинальным -- Backspace. Листинг функции приведен ниже:

function Backspace(answer)

{

answerlength = answer.length;

answer = answer.substring(0, answerlength - 1);

if (Digit2 != "")

{

Digit2 = answer.toString();

out2Display(Digit2);

}

else

{

Digit1 = answer.toString();

out2Display(Digit1);

}

}

Алгоритм работы функции следующий. Для начала вычисляем длину строки выведенной на дисплей калькулятора. Для того, чтобы это было возможно, функция принимает параметр, в котором ей передается содержимое дисплея. У параметра имеется свойство length, которое возвращает длину строки во временную локальную переменную answerlenght. В следующей строке при помощи встроенной функции substring, которая принимает два параметра -- точку начала отсчета выделяемой подстроки (равную в данном случае нулю, т. е. с начала строки) и точку конца отсчета выделяемой подстроки (в данном случае равную длине строки выведенной на дисплей минус один), выполняется уменьшение длины записи на дисплее на один символ. Дальше нужно новое укороченное значение вывести на дисплей. Это делается в следующих строках, общий смысл работы которых таков: если переменная Digit2 не пуста, значит мы работаем с ее значением, так как переменной Digit1 уже просто нет на дисплее. Чтобы вывести укороченное число назад на дисплей, нужно сначала привести его к строковому виду, так как в качестве содержимого текстового поля изображающего дисплей должна быть строка. Это выполняется через вызов встроенной функции toString. Преобразованное в строку число присваивается переменной Digit2, которая выводится на дисплей с помощью вызова ранее описанной функции out2Display. Иначе (если Digit2 пустое) выполняются те же процедуры (приведение к строковому типу и вывод посредством вызова функции out2Display) для переменной Digit1.

Теперь создадим функцию для сброса последнего набранного числа. Называться она будет ceCalc. Листинг функции приведен ниже:

function ceCalc()

{

Digit2 = "";

Status = "yes";

out2Display("");

}

Работа функции незатейлива. Она очищает переменную Digit2, изменяет значение флага Status на «yes», которое используется в функции форматирования вывода numControl и вызывает функцию out2Display, передавая ей в качестве параметра пустую строку которая и выводится на дисплей.

Теперь самое время создать функцию для проверки и форматирования вывода на дисплей символов. Листинг функции как всегда приведен ниже:

function numControl(answer)

{

if(answer == ".")

{

Number = document.calculator.answer.value;

if(Number.indexOf(".") != -1)

{

answer = "";

}

}

if(Status == "yes")

{

Digit2 += answer;

out2Display(Digit2);

}

else

{

if(Status == "blank")

{

Digit1 = answer;

Digit2 = "";

Status = "no";

}

else

{

Digit1 += answer;

}

out2Display(Digit1);

}

}

Алгоритм работы следующий. Функция принимает в качестве параметра любое вводимое пользователем или выводимое функцией на дисплей значение. Для реализации этого функция вызывается как при нажатии цифровых клавиш, так и при изменении состояния дисплея вызванного работой каких либо реализующих математические действия функций, так как это проще чем вызывать ее при каждой операции. Поэтому при вызове по событию onChange элемента answer, ей передается значение this.value, которое хранит содержимое дисплея, а по событию onClick вызванному при нажатии любой цифровой клавиши передается значение этой клавиши. Кроме того функция вызывается при нажатии клавиши «.» принимая в качестве параметра ее значение. Затем начинается обработка полученного параметра. Если в функцию передан символ точка, выполняется проверка допустимости введения данного символа. Берется значение выведенное в данный момент на дисплее через обращение по иерархии -- document.calculator.answer.value, и присвается локальной переменной Number, которая затем проверяется на присутствие в ней уже введенного ранее символа точка. Это выполняется при помощи функции indexOf которая возвращает позицию первого вхождения искомого символа или -1 если символ не найден. Если возвращенное этой функцией значение не равно -1, то есть точка уже присутствует в введенном числе, данный символ удаляется в без вывода на дисплей. Идем далее. Если флаг Status равен «yes», что означает что вводится второе число и оно пока пустое, то к значению хранящемуся в переменной Digit2 добавляется содержимое параметра (точка или цифра), и выводится на дисплей. Иначе, если флаг Status в исходном состоянии, значит работаем с первым вводимым числом и соответственно, добавляем в пустую переменную Digit1 содержимое параметра и выводим на дисплей. Иначе, если число уже вводится, добавляем к нему содержимое принятое в параметре и опять же выводим на дисплей.

Теперь самое время перейти к реализации математических операций. Начнем с функции сложения. Не мудрствуя лукаво, назовем ее operPlus. Листинг как обычно приводится ниже:

function operPlus(x)

{

if(x == 1) operEqual();

if(Digit2 != "")

{

Digit1 = parseFloat(Digit1) + parseFloat(Digit2);

}

Status = "yes";

CurrOper = '+';

out2Display(Digit1);

}

Функция принимает в качестве параметра 1или 0 которые применяются как флаги состояний операции. Если в параметре передана 1, это означает нажатие клавиши плюс, вызывается функция operEqual, которая будет описана позже. Если передан параметр 0, это знак начала выполнения сложения, то проверяем пусто ли значение переменой Digit2. Если не пусто, нужно сложить его со значением Digit1 и освободить для принятия следующего числа, что мы и делаем, считывая строковое значение из переменных и приводя его к типу с плавающей точкой при помощи функции JavaScript parseFloat для повышения точности вычисления.. Затем переводим флаг Status в состояние «yes», что означает готовность к приему новой цифры, запоминаем операцию в переменной CurrOper и выводим на дисплей результат операции сложения находящийся на текущий момент в переменной Digit1.

Следующей я хочу описать функцию вычитания. Она будет отличаться от предыдущей только выполняемым действием -- вычитание из переменной Digit1 переменной Digit2, с выводом на дисплей. Листинг функции ниже:

function operMinus(x)

{

if(x == 1) operEqual();

if(Digit2 != "")

{

Digit1 = parseFloat(Digit1) - parseFloat(Digit2);

}

Status = "yes";

CurrOper = '-';

out2Display(Digit1);

}

В дополнительном описании функция не нуждается, так как алгоритм не отличается от предыдущей.

Так как процедуры умножения и деления подобны сложению и вычитанию (алгоритмически) не будем выдумывать колесо и используем уже готовое описание функций сложения и вычитания для создания функций умножения и деления. Листинг функции умножения:

function operMult(x)

{

if(x == 1) operEqual();

if(Digit2 != "")

{

Digit1 = parseFloat(Digit1) * parseFloat(Digit2);

}

Status = "yes";

CurrOper = '*';

out2Display(Digit1);

}

А теперь листинг функции деления:

function operDiv(x)

{

if(x == 1) operEqual();

if(Digit2 != "")

{

Digit1 = parseFloat(Digit1) / parseFloat(Digit2);

}

Status = "yes";

CurrOper = '/';

out2Display(Digit1);

}

Данные функции работают так же как сложение и в дополнительном описании не нуждаются.

Далее создается функция выполняющая вычисление квадратного корня. Имя ее пусть будет operSqrt, а листинг будет приведен как обычно ниже:

function operSqrt()

{

Digit1 = Math.sqrt(Digit1);

Status = "blank";

out2Display(Digit1);

}

Алгоритм прост. Так как операция извлечения корня унарная, то к моменту ее применения число либо результат предыдущего действия будет записано в переменную Digit1 (вспомните описание предыдущих функций), а это значит, что и встроенную функцию sqrt объекта Math нужно применять только к этой переменной. Math является встроенным объектом JavaScript и предоставляет доступ к математическим операциям. После вычисления корня, флаг сбрасывается в исходное состояние а результат вычисления выводится на дисплей.

Теперь пора научить калькулятор вычислять заданный процент от числа.

function operPercent()

{

if(Status != "blank")

{

Digit2 *= .01;

Status = "blank";

out2Display(Digit2);

}

}

Сначала выполняется проверка не нажата ли клавиша вычисления процента до набора числа из которого процент вычисляется. Затем, в случае успешности проверки, число содержащееся в переменной Digit2 и обозначающее количество вычисляемых процентов, приводится к виду десятичной дроби при помощи умножения на 0.01. Затем после сброса флага, эта десятичная дробь выводится на дисплей. И все. А вычисление процента выполняется в функции умножения, умножением числа из переменной Digit1 на переданную в Digit2 десятичную дробь.

Далее опишем операцию вычисления функции f(x) = 1/x . Листинг:

function operRecip()

{

Digit1 = 1/Digit1;

Status = "blank";

out2Display(Digit1);

}

Алгоритм очень прост. Так как функция унурна, то она будет применяться всегда к числу или результату предыдущей операции хранящемупя в переменной Digit1. То есть для вычисления достаточно единицу разделить на содержимое переменной Digit1 и результат данной операции поместить в неё же. А затем вывести эту переменную на дисплей.

Унарная операция присвоения числу знака минус. Листинг функции реализующей этот функционал приведен ниже:

function operNegative()

{

Digit1 = parseFloat(-Digit1);

Status = "no";

out2Display(Digit1);

}

Снова применяем только к содержимому переменной Digit1 (т.к. операция унарна) и используем функцию приведения значения переменной к типу числа с плавающей точкой, а затем выводим результат операции на дисплей.

И вот последняя функция вызываемая по нажатию клавиши равно и запускающая процесс вычисления. Называется она operEqual:

function operEqual()

{

if(CurrOper == '+') operPlus(0);

if(CurrOper == '-') operMinus(0);

if(CurrOper == '*') operMult(0);

if(CurrOper == '/') operDiv(0);

Digit2 = "";

CurrOper = "";

}

Алгоритм функции не сложен -- по значению переменной CurrOper хранящей знак текущей операции, вызывается соответствующая функция-обработчик математической операции. После того как она выполнит вычисление и возвратит управление в текущую функцию, производится очистка содержимого переменной Digit2, так как ее значение уже не нужно и сброс состояния текущей операции в переменной CurrOper.

На этом описание функционала калькулятора закончено и скрипт закрывается тегом </script>.

2. РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ

При запуске файла calc.html пользователю выводится калькулятор на странице браузера. Как уже было указано выше браузер можно использовать любой и в любой операционной системе. Для примера запустим программу поочередно в трех разных браузерах Opera, Mozilla Firefox и Google Chrome (все под GNU/Linux).

Рисунок 1. Калькулятор в Opera.



Рисунок 2. Калькулятор в Mozilla Firefox.

Рисунок 3. Калькулятор в Google Chrome

Как видим отображение ничем не отличается в разных браузерах. И как будет видно далее использование калькулятора ничем не отличается от аппаратного устройства.

2.1 Выполнение операций сложения, вычитания, умножения и деления

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

1. Нажимая цифровые клавиши «0» - «9» набираем первое число

2. Нажимаем клавишу выполняемой операции «+», «-», «*» или «/»

3. Набираем второе число при помощи цифровых клавиш «0» - «9»

4. Если действие одно то нажимаем клавишу «=» и результат вычисления перед нами, если предполагается сделать еще одно вычисление то нажимаем клавишу следующей операции и на дисплее видим промежуточный результат, далее набираем следующее число и т. д.

2.2 Выполнение унарных операций - смены знака, вычисления процента, извлечения квадратного корня числа и функции f(x)=1/x

Унарные операции выполняются над одним числом. Этим числом при работе на калькуляторе может быть как результат предыдущей операции, так и вновь введенное число. Отсюда следует алгоритм:

1.Вводим при помощи цифровых клавиш «0» - «9» число над которым планируется провести унарную операцию или завершаем предыдущую операцию для получения операнда.

2.Нажимаем клавишу выполняемой унарной операции:

a) если вычисляем процент от числа, то «*» и переходим к третьему пункту алгоритма.

b) если изменяем знак числа на противоположный, то «+/-» и на этом данная операция закончена.

c) если извлекаем корень, то «sqrt», и на этом данная операция закончена.

d) если вычисляем знечение функции f(x) = 1/x, то «1/x» и на этом данная операция закончена.

3. Нажимая цифровые клавиши «0» - «9» набираем второе число, равное количеству вычисляемых процентов.

4.Нажимаем клавишу «%» и получаем на дисплее результат операции.

2.3 Использование клавиш редактирования и очистки

Клавиша редактирования введенного числа -- «Backspace», клавиши очистки - «С» и «СЕ». Используются они в следующих случаях:

1.Если введенное на дисплей число с ошибкой -- нажимаем клавишу «Backspace» столько раз, сколько символов нужно удалить.

2.Если введенное число неверно вообще -- нажимаем клавишу «СЕ», в результате текущее число удалено и калькулятор готов к приему правильного числа, а все предыдущие результаты ввода / вычисления остались в памяти калькулятора.

3.Если операции завершены и нужно сбросить калькулятор в исходное состояние - нажимаем клавишу «С».

2.4 Применение клавиш управления памятью калькулятора

У калькулятора есть ячейка памяти для запоминания одного значения. Для управления этой памятью используются клавиши начинающиеся с буквы «М» (от англ. memory -- память). Использовать их можно для следующих целей:

1.Если нужно запомнить некоторое число для выполнения с ним операции позже или сложить текущее значение на дисплее с числом ранее сохраненном в памяти нажимаем клавишу «М+» и число заносится в память, на вспомогательном дисплее отображается буква «М», напоминающая о хранении числа.

2.Если из этого числа нужно вычесть другое, находящееся в настоящий момент на дисплее калькулятора, нажимаем клавишу «MS» и в память записывается результат операции.

3.Если нужно вывести сохраненное значение из памяти на дисплей, нужно нажать клавишу «MR».

4.И наконец, если нужно удалить число из памяти жмем «MC».

На этом описание использования калькулятора заканчено.

ЗАКЛЮЧЕНИЕ

В данной курсовой работе решены задачи разработки программы для выполнения математических операций и вычислений.

В процессе создания курсовой работы, был разработан и реализован алгоритм решения поставленной задачи. Программа реализована на базе смешения языка разметки гипертекста HTML и скриптового языка программирования JavaScript, с использованием каскадных таблиц стилей CSS в среде программирования Bluefish Editor.

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

ПРИЛОЖЕНИЕ А

ЛИСТИНГ ПРОГРАММЫ

Листинг 1.1. Файл calc.html

<html>

<head>

<title>JsCalculator</title>