Новичок
12 уроков
Курс
Основы программирования
Можете ли вы представить свою жизнь без различных электронных девайсов и устройств, которые окружают нас в современном мире? Задумывались ли вы над тем, как все это работает? Все это является трудом программистов. Вы тоже можете стать программистом, нужно лишь найти в себе силы и начать обучаться вместе с нами!

#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:

• Обработчики событий на кнопки:

• Все свойства элемента можно вывести в консоль:

o Свойство для распознавания кнопки:

o Свойство для получения текста кнопки:

• Общие структуры функций:

o Функция, которая отражает введенное число на экране калькулятора:

o Функция обработки операций калькулятора и вывода результата:

!Функция преобразования строки к числу с плавающей точкой parseFloat().

o Функция добавления десятичной точки:

o Функция обработки кнопок очищения C и СЕ:

o Функция вывода списка функций калькулятора — «Как это работает?»

На этом наш продолжительный и немного сложный видеоурок подойдет к концу! Если вам понравилось это видео, ставьте лайки! Оставляйте в комментариях ваши варианты калькуляторов! Всем спасибо!

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш LoftBlog!

Материалы к уроку:
Делись:

Оставь комментарий!

One thought on “#11 — Первая программа-калькулятор на JavaScript

  1. shahin:

    можно скинуть этот графический интерфейс калькулятора с говыми HTML и СSS,а JS код я напишу сам???

Добавить комментарий

Рекомендуемые курсы