


#11 — Первая программа-калькулятор на JavaScript
Привет всем! Вот мы и добрались до видеоурока, на котором напишем первую настоящую программу – калькулятор. Писать будем на JavaScript, а в качестве редактора будем использовать SublimeText. Разберемся, что к чему.
Задачи программы
Задача программы принимать на вход данные, обрабатывать их и выводить обратно результат обработки. На предыдущем видеоуроке мы писали уже графический интерфейс. Теперь нам нужно осуществить следующие операции:
1. Ввод данных – это работа программы с клавиатурой и мышкой.
2. Обработка данных – это все функции, переменные, циклы и так далее. Этот этап является самым важным в программировании.
3. Вывод результата обработки – это вывод результата обработки на экран, то есть работа с графикой. Этот этап уже готов.
Компилятор vs Интерпретатор
Как исходный код превращается в рабочий? При выполнении программы, совершенно не важно, на каком языке он написан. Главное превратить исходный код в машинный. Это можно сделать двумя способами – компиляцией и интерпретацией.
Компилятор
Компиляция – это превращение кода в код, понятный компьютеру (машинный код). Преобразование происходит с помощью программы – компилятора, причем исходный код остается у разработчика неизменным.
Компилятор, по сути, является переводчиком между программистом и компьютером. Его принцип работы заключается в том, что компилятор сначала читает весь код, проверяет на ошибки и затем, в случае отсутствия ошибок, выполняет его.
После компиляции создается отдельный файл с откомпилированным кодом. Из этого следует недостаток компиляции – плохая переносимость программ для конкретных моделей.
Интерпретатор
Интерпретация – это процесс превращения исходного кода в машинный, когда программа – интерпретатор, получая код, выполняет его построчно. При интерпретации на разных машинах код каждый раз последовательно читается и тут же выполняется. Вот в чем заключается отличие между компиляцией и интерпретацией.
Из всего этого следует, что интерпретируемый код выполняется в разы медленнее, но в то же время обладает высочайшей переносимостью.
План работы
Прежде чем начать писать код, предлагаем составить план на бумаге в виде алгоритмической схемы необходимых функций:
- 1. Нажатие на кнопки с номерами (func Number Press) – нажата ли кнопка от 1 до 9 или нет.
- 2. Нажатие на кнопки операций (func operation) – сложение, вычитание и т.д.
- 3. Добавление десятичной точки (func decimal) – нажали или не нажали.
- 4. Очистка экрана (func clear) – очистка последнего действия или всего ввода.
- 5. Кнопка (how work) – цикл, который будет повторяться всегда по всем возможным операциям (for) и в результате выведет в виде списка все возможности калькулятора.
Поехали…
Дорогие зрители, убедительно просим вас при просмотре видеоурока не открывать ваши редакторы, а посмотрев все видео от начала до конца, разобраться в сути и принципах написания калькулятора. А затем, используя подсказки в описании, написать свой калькулятор самостоятельно. Так вы приобретете больше практических навыков и усвоите материал гораздо лучше!
Итак, вам нужно в main.js определить функции numberPress (argument), operation (argument), decimal (argument), clear (argument), howWork (argument). Для этого сначала определяются кнопки цифр классом number, кнопки с операциями – классом operation, кнопка с десятичной точкой – id decimal и так далее. Затем вы накладываете на каждую кнопку обработчик событий и прописываете сами функции.
!НЕ НАЗЫВАЙТЕ ФУНКЦИИ И ОПЕРАЦИИ ОДНИМ ИМЕНЕМ.
!НЕ ЗАБУДЬТЕ ДОБАВИТЬ ПЕРЕМЕННЫЕ ПАМЯТИ MemoryCurrentNumber, MemoryNewNumber, MemorypendingOperation.
Детали реализации
• Определение кнопок через класс или id:
1 2 |
var name_variable = document.querySelectorAll(‘.name_class’), name_element = document.getElementById(‘id_element’); |
• Обработчики событий на кнопки:
1 2 3 4 5 |
name_variable.addEventListener(‘click’, name_eventHandler); name_variable.addEventListener(‘click’, function (e) { //обработка события //е – элемент события }); |
• Все свойства элемента можно вывести в консоль:
1 |
console.log(e); |
o Свойство для распознавания кнопки:
1 |
e.srcElement.id |
o Свойство для получения текста кнопки:
1 |
e.target.textContent |
• Общие структуры функций:
o Функция, которая отражает введенное число на экране калькулятора:
1 2 3 4 5 6 7 |
function numberPress (number) { if (условие) { //ввод нового значение и меняем значение флага} else { if (условие) { //стирает 0 с дисплея} else { //добавляет цифру к числу на экране} } }; |
o Функция обработки операций калькулятора и вывода результата:
1 2 3 4 5 6 7 8 9 10 11 12 |
function operation (op) { //создаем локальную переменную памяти if (условия) { //сохраняем значение на экране в переменную памяти} else { //говорим переменной памяти о том, что мы вводим новое число} if (условие с +) { //выполнение операции} else if (условие с -) { //выполнение операции} else if (условие с *) { //выполнение операции} else if (условие с /) { //выполнение операции} else { //действия с глобальной и локальной памятью}; //вывод результата //сохранение текущей операции }; |
!Функция преобразования строки к числу с плавающей точкой parseFloat().
o Функция добавления десятичной точки:
1 2 3 4 5 6 7 |
function decimal (argument) { //создаем локальную переменную if (условие) { //добавляем 0.} else { if (условие) { //если не существует символа ‘.’ в строке – добавляй точку }; }; }; |
o Функция обработки кнопок очищения C и СЕ:
1 2 3 4 |
function clear (argument) { if (условие с се) { //удаление введённого числа с дисплея} else if (условие с с) { //очищения дисплея }; }; |
o Функция вывода списка функций калькулятора — «Как это работает?»
1 2 3 4 5 6 7 |
function howWork (argument) { //новый элемент списка for (по операциям) { //добавление в элемент списка текста //вставка в лист элемента }; }; |
На этом наш продолжительный и немного сложный видеоурок подойдет к концу! Если вам понравилось это видео, ставьте лайки! Оставляйте в комментариях ваши варианты калькуляторов! Всем спасибо!
Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш LoftBlog!
Оставь комментарий!
One thought on “#11 — Первая программа-калькулятор на JavaScript”
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
можно скинуть этот графический интерфейс калькулятора с говыми HTML и СSS,а JS код я напишу сам???