Авторизация

Я в деле!

Новичок

12 уроков

Курс

Основы программирования

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

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

Февраля

2017

Автор урока:

Николай Чернобаев

комментарий

лайков

Привет всем! Вот мы и добрались до видеоурока, на котором напишем первую настоящую программу – калькулятор. Писать будем на 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:

var name_variable = document.querySelectorAll(‘.name_class’),
    name_element = document.getElementById(‘id_element’);

1 2	var name_variable = document.querySelectorAll(‘.name_class’), name_element = document.getElementById(‘id_element’);

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

name_variable.addEventListener(‘click’, name_eventHandler);
name_variable.addEventListener(‘click’, function (e) {
 	//обработка события
	//е – элемент события
});

name_variable.addEventListener(‘click’, name_eventHandler);

name_variable.addEventListener(‘click’, function (e) {

//обработка события

//е – элемент события

});

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

console.log(e);

1	console.log(e);

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

e.srcElement.id

1	e.srcElement.id

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

e.target.textContent

1	e.target.textContent

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

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

function numberPress (number) {
if (условие) { //ввод нового значение и меняем значение флага}
else {
if (условие) { //стирает 0 с дисплея}
	else { //добавляет цифру к числу на экране}
     }		 
};

function numberPress (number) {

if (условие) { //ввод нового значение и меняем значение флага}

else {

if (условие) { //стирает 0 с дисплея}

else { //добавляет цифру к числу на экране}

}

};

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

function operation (op) {
	//создаем локальную переменную памяти
if (условия) { //сохраняем значение на экране в переменную памяти}
	else { //говорим переменной памяти о том, что мы вводим новое число}
		if (условие с +) { //выполнение операции}	
		else if (условие с -) { //выполнение операции}	
		else if (условие с *) { //выполнение операции}	
		else if (условие с /) { //выполнение операции}	
		else { //действия с глобальной и локальной памятью};	 
		//вывод результата
		//сохранение текущей операции
};

function operation (op) {

//создаем локальную переменную памяти

if (условия) { //сохраняем значение на экране в переменную памяти}

else { //говорим переменной памяти о том, что мы вводим новое число}

if (условие с +) { //выполнение операции}

else if (условие с -) { //выполнение операции}

else if (условие с *) { //выполнение операции}

else if (условие с /) { //выполнение операции}

else { //действия с глобальной и локальной памятью};

//вывод результата

//сохранение текущей операции

};

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

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

function decimal (argument) {
	//создаем локальную переменную
	if (условие) { //добавляем 0.}
	else { 
if (условие) { //если не существует символа ‘.’ в строке – добавляй точку };
};	 
};

function decimal (argument) {

//создаем локальную переменную

if (условие) { //добавляем 0.}

else {

if (условие) { //если не существует символа ‘.’ в строке – добавляй точку };

};

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

function clear (argument) {
	if (условие с се) { //удаление введённого числа с дисплея}
	else if (условие с с) { //очищения дисплея };
};

function clear (argument) {

if (условие с се) { //удаление введённого числа с дисплея}

else if (условие с с) { //очищения дисплея };

};

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

function howWork (argument) {
	//новый элемент списка
	for (по операциям) {
//добавление в элемент списка текста 
//вставка в лист элемента
};
};

function howWork (argument) {

//новый элемент списка

for (по операциям) {

//добавление в элемент списка текста

//вставка в лист элемента

};

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

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

Видеокурс Видеоурок основы программирования программа программирование

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

Делись:

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

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

shahin:

14.10.2019 в 11:09

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

Войдите, чтобы ответить

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

Для отправки комментария вам необходимо авторизоваться.