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

Інструментальні засоби розробки програм призначені для спрощення та прискорення створення програмного забезпечення. В якості подібного кошти може виступати як потужна інтегроване середовище розробки (англ. - 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 (останнє більш переважно, так як, в цих редакторах на відміну від Блокнота є підсвічування синтаксису, що спрощує редагування коду).

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

Для початку необхідно розібратися, що ж із себе має подавати додаток яке буде виконувати ці функції. З давніх часів людям був відомий такий обчислювальний інструмент як звичайні рахунки (в римському - абак). Вони дозволяли виконувати найпростіші обчислення включаючи додавання і віднімання порівняно великих чисел завдяки поділу рядів по типу розрядів. Наступним кроком у розвитку людства в даному напрямку став арифмометр - настільна (або портативна) механічна обчислювальна машина, призначена для точного множення і ділення, а також для додавання і віднімання. Прогрес був наявним т. К. Крім простих процедур - додавання і віднімання, можна було виконати більш складні математичні операції - розподіл і множення .. Але людство не зупинилося на досягнутому .. Прогрес взагалі неможливо зупинити, люди хочуть більшого, кращого та більш зручного у всіх сферах життя .. і ось на зміну арифмометр прийшло чудо XX століття - електронний калькулятор, який дозволяв виконувати не тільки додавання, віднімання, ділення і множення з приголомшливою точністю, але і витягувати квадратний корінь числа, процентне відношення, розраховувати ступеня чисел і т. п. операції над числами або алгебраїчними формулами. І тут прогрес не зупиняється ні на мить - з'являються все більш різноманітні види калькуляторів - фінансові, інженерні, статистичні, медичні і т. П. Калькулятори вбудовуються у всіляку техніку - мобільні телефони, годинники і т. Д. Вбудовувані калькулятори стало можливим створити, завдяки програмування додатків виконують необхідні функції і мають впізнаваний і інтуїтивно-зрозумілий користувачеві інтерфейс. Таким чином на поточний момент, самим універсальним засобом для виконання математичних розрахунків і обчислень є програмний калькулятор. Його ми і будемо створювати в процесі роботи над проектом. І використовувати будемо крос-платформену технологію засновану на базі змішання мови програмування Java Script, мови гіпертекстової розмітки HTML, і технології каскадних таблиць стилів CSS, яку ми використовуємо для додання додатком звичного користувачеві виду.

Для реалізації поставленого завдання, необхідно вибрати відповідний інструментарій.
В даному випадку вирішено використовувати мову програмування «JavaScript», тому що в цій мові реалізована велика різноманітність методів та інструментів для розробки програмного забезпечення.

JavaScript - об'єктно-орієнтована скриптова мова програмування. Є діалектом мови ECMAScript.
JavaScript зазвичай використовується як вбудований мова для програмного доступу до об'єктів додатків. Найбільш широке застосування знаходить в браузерах як мова сценаріїв для додання інтерактивності веб-сторінок.

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

Додаток функціонально буде складатися з трьох основних частин:

HTML-документа
CSS-блоків
Java Script - коду

ОПИС 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. Це виконується такими рядками:

Як видно, код для створення цифрових клавіш, абсолютно ідентичний, за винятком яких призначено клавіші цифр. Для всіх клавіш призначений один клас 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. Код нічим від попередніх цифрових клавіш нічим не відрізняється, і наведено нижче:

Знову викликається в якості обробника функція numControl з передачею в якості параметра значення клавіш.
Далі буде створена клавіша операції віднімання. Код створює клавішу наведено нижче:

Клас CSS - blueText, функцією-обробником призначена operMinus.
Після цього сода клавіша обчислення функції f (x) = 1 / x. Код наведено нижче:

І знову ніяких особливих відмінностей крім напису, ідентифікатора елемента і функції-обробника operRecip.
Наступна клавіша продовжує деяке розширення функціональності калькулятора. Вона називається М + і відповідає за складання значення з дисплея зі значенням записаним в пам'ять і збереженням результату операції в пам'яті. Код створення клавіші наведено нижче:

Тут використовується звичний стиль оформлення redText, і функція-обробник addMem приймаюча як параметр вміст дисплея калькулятора. І знову видно. Що при зверненні до вмісту дисплея використовується доступ через ієрархію документа з використанням унікальних ідентифікаторів елементів сторінки.
Потім створюється цифрова клавіша 0. Її створення не унікальна і нічим не відрізняється від інших цифрових клавіш. Код наведено нижче:

Знову викликається в якості обробника функція numControl з передачею в якості параметра значення клавіші.
Далі пишемо клавішу унарною операції присвоєння числа знака +/-.

Код повторюється знову, відмінність - функція-обробник operNegative.
Далі продовжуємо розширювати функціональність калькулятора. Пишемо клавішу встановлює знак «. ». Код наведено нижче:

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

Для клавіші використовується стиль redText, унікальне ім'я і функція-обробник operPlus, приймаюча як параметр прапор виконання операції додавання.
І ось можна написати останню клавішу мого калькулятора - клавішу «=». Код створення цієї клавіші наведено нижче:

Стиль оформлення клавіші redText, функція-обробник operEqual не приймає ніяких параметрів при виклику.
На цьому створення html-документа закінчується. Закриваємо всі вкладені таблиці закриває тегом </ table>. Потім закриваємо форму закриває тегом </ form> і тіло документа тегом </ body>. Потім закривається html-документ тегом </ html>. На цьому створення графічної частини калькулятора закінчено, можна переходити до створення функціональної начинки на мові Javascript.

ОПИС 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. Лістинг функції наведено нижче:

Алгоритм роботи функції наступний. Для початку обчислюємо довжину рядка виведеної на дисплей калькулятора. Для того, щоб це було можливо, функція приймає параметр, в якому їй передається вміст дисплея. У параметра є властивість length, яке повертає довжину рядка в тимчасову локальну змінну answerlenght. У наступному рядку за допомогою вбудованої функції substring, яка приймає два параметри - точку початку відліку виділяється підрядка (рівну в даному випадку нулю, т. Е. З початку рядка) і точку кінця відліку виділяється підрядка (в даному випадку дорівнює довжині рядка виведеної на дисплей мінус один), виконується зменшення довжини записи на дисплеї на один символ. Далі потрібно нове вкорочене значення вивести на дисплей. Це робиться в наступних рядках, загальний зміст роботи яких такий: якщо змінна Digit2 не порожня, значить ми працюємо з її значенням, так як змінної Digit1 вже просто немає на дисплеї. Щоб вивести вкорочене число назад на дисплей, потрібно спочатку привести його до строковому увазі, так як в якості вмісту текстового поля зображує дисплей має бути рядок. Це виконується через виклик вбудованої функції toString. Перетворене в рядок число присвоюється змінної Digit2, яка виводиться на дисплей за допомогою виклику раніше описаної функції out2Display. Інакше (якщо Digit2 пусте) виконуються ті ж процедури (приведення до строковому типу і висновок за допомогою виклику функції out2Display) для змінної Digit1.
Тепер створимо функцію для скидання останнього набраного числа. Називатися вона буде ceCalc. Лістинг функції наведено нижче:

function ceCalc ()
{
Digit2 = "";
Status = "yes";
out2Display ( "");
}

Робота функції невибаглива. Вона очищає змінну Digit2, змінює значення прапора Status на «yes», яке використовується в функції форматування виведення numControl і викликає функцію out2Display, передаючи їй як параметр порожній рядок яка і виводиться на дисплей.
Тепер саме час створити функцію для перевірки і форматування виводу на дисплей символів. Лістинг функції як завжди наведено нижче:

Алгоритм роботи наступний. Функція приймає як параметр будь вводиться користувачем або виведене функцією на дисплей значення. Для реалізації цього функція викликається як при натисканні цифрових клавіш, так і при зміні стану дисплея викликаного роботою будь-яких реалізують математичні дії функцій, так як це простіше ніж викликати її за будь-якої операції. Тому при виклику по події 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>.

КЕРІВНИЦТВО КОРИСТУВАЧА

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

Виконання операції додавання, віднімання, множення і ділення

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

Натискайте цифрові клавіші «0» - «9» набираємо перше число
Натискаємо кнопку виконуваної операції «+», «-», «*» або «/»
Набираємо друге число за допомогою цифрових клавіш «0» - «9»
Якщо дія одне то натискаємо клавішу «=» і результат обчислення перед нами, якщо передбачається зробити ще одне обчислення то натискаємо клавішу наступної операції і на дисплеї бачимо проміжний результат, далі набираємо наступне число і т.д.

Виконання унарних операцій - зміни знаку, обчислення відсотків, видубуток кореня квадратного числа і функція F (X) = 1 / X

Унарні операції виконуються над одним числом. Цим числом при роботі на калькуляторі може бути як результат попередньої операції, так і знову введене число. Звідси випливає алгоритм:

Вводимо за допомогою цифрових клавіш «0» - «9» число над яким планується провести унарна операцію або завершуємо попередню операцію для отримання операнда.
Натискаємо клавішу виконуваної унарною операції:
a) якщо обчислюємо відсоток від числа, то «*» і переходимо до третього пункту алгоритму.
b) якщо змінюємо знак числа на протилежний, то «+/-» і на цьому дана операція закінчена.
c) якщо витягаємо корінь, то «sqrt», і на цьому дана операція закінчена.
d) якщо обчислюємо знечення функції f (x) = 1 / x, то «1 / x» і на цьому дана операція закінчена.
Натискаючи цифрові клавіші «0» - «9» набираємо друге число, що дорівнює кількості обчислюваних відсотків.
Натискаємо клавішу «%» і отримуємо на дисплеї результат операції.

Використання клавіш редагування та чистки

Клавіша редагування введеного числа - «Backspace», клавіші очищення - «С» і «СЕ». Використовуються вони в таких випадках:
1.Якщо введене на дисплей число з помилкою - натискаємо кнопку «Backspace» стільки разів, скільки символів потрібно видалити.
2.Якщо введене число невірно взагалі - натискаємо кнопку «СЕ», в результаті поточне число видалено і калькулятор готовий до прийому правильного числа, а всі попередні результати введення / обчислення залишилися в пам'яті калькулятора.
3.Якщо операції завершені і потрібно скинути калькулятор в початковий стан - натискаємо клавішу «С».

Застосування клавіш управління пам'яттю калькулятора

У калькулятора є осередок пам'яті для запам'ятовування одного значення. Для управління цією пам'яттю використовуються клавіші починаються з літери «М» (від англ. Memory - пам'ять). Використовувати їх можна для наступних цілей:

Якщо потрібно запам'ятати деяке число для виконання з ним операції пізніше або скласти поточне значення на дисплеї з числом раніше збереженому в пам'яті натискаємо клавішу «М +» і число заноситься в пам'ять, на допоміжному дисплеї відображається буква «М», що нагадує про зберігання числа .
Якщо з цього числа потрібно відняти інше, що знаходиться в даний момент на дисплеї калькулятора, натискаємо кнопку «MS» і в пам'ять записується результат операції.
Якщо потрібно вивести збережене значення з пам'яті на дисплей, потрібно натиснути клавішу «MR».
І нарешті, якщо потрібно видалити число з пам'яті тиснемо «MC».

На цьому опис використання калькулятора закінчується. Надіємось стаття вам сподобалась і знання отримані в ній, будуть колись у пригоді.