Skip to content

README.md

Latest commit

History

History
401 lines (329 loc) · 24.1 KB

README.md

File metadata and controls

401 lines (329 loc) · 24.1 KB
Raw

ЛР 2. Calculator. JavaScript

Цель данной лабораторной работы - знакомство с инструментами построения пользовательских интерфейсов web-сайтов: HTML, CSS, JavaScript. В ходе выполнения работы, вам предстоит продолжить реализовывать простой калькулятор, и затем выполнить задания по варианту.

План

  1. Программирование логики с помощью JavaScript
  2. Доступ к HTML-элементам из JavaScript
  3. Программирование кнопок калькулятора
  4. Запуск калькулятора с помощью LiveServer
  5. Задание

1. Программирование логики с помощью JavaScript

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

Как подключить JavaScript к HTML?

Есть два способа добавить JavaScript на веб-страницу:

  1. Встроенный скрипт - когда код пишется прямо в HTML-файле внутри тега <script>:
<script>// Здесь пишем JavaScript кодconsole.log("Привет, мир!");</script>
  1. Внешний файл - когда код хранится в отдельном файле с расширением .js:
<head><title>калькулятор</title><linkrel="stylesheet" href="style.css"><scripttype="text/javascript" src="script.js"></script></head>

Для нашего калькулятора мы будем использовать второй способ, так как это более организованный подход.

2. Доступ к HTML-элементам из JavaScript

Чтобы управлять элементами на странице, нам нужно сначала получить к ним доступ. JavaScript предоставляет несколько способов это сделать:

Основные методы получения элементов:

  1. По ID (метод getElementById) - самый распространенный способ:
<body><pid="paragraph" className="textRed">Lorem Ipsum</p><!--вложенный JS-скрипт--><script>
<!-- обращаемся к HTML-документу и ищем объект с id=paragraph -->
element=document.getElementById("paragraph")<!--черезсвойствоinnerHTMLуполученногообъектаможноизменитьегосодержимое-->element.innerHTML="Измененный текст параграфа";</script></body>
  1. По тегу - получаем все элементы определенного типа:
// Получить все параграфы на страницеletparagraphs=document.getElementsByTagName("p")
  1. По классу - получаем все элементы с определенным классом:
// Получить все элементы с классом "button"letbuttons=document.getElementsByClassName("textRed")

про другие способы взаимодействия с HTML-элементами из JS можно почитать здесь.

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

События могут быть разными.

События мыши:

  • click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
  • contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
  • mouseover / mouseout – когда мышь наводится на / покидает элемент.
  • mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
  • mousemove – при движении мыши. События на элементах управления:
  • submit – пользователь отправил форму .
  • focus – пользователь фокусируется на элементе, например нажимает на . Клавиатурные события:
  • keydown и keyup – когда пользователь нажимает / отпускает клавишу. События документа:
  • DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен. CSS events:
  • transitionend – когда CSS-анимация завершена.

И многие другие. В нашем случае мы обрабатываем событие нажатия на кнопку - то есть click.

Способы задания обработчиков событий:

  1. Через атрибут HTML (inline-обработчик):
<buttononclick="alert('Кнопка нажата!')">Нажми меня</button>
  1. Через свойство элемента (как в нашем калькуляторе):
element.onclick=function(){alert('Кнопка нажата!');}
  1. Через метод addEventListener (современный способ):
element.addEventListener('click',function(){alert('Кнопка нажата!');});

или стрелочная функция

element.addEventListener('click',()=>{alert('Кнопка нажата!');});
  1. Через метод addEventListener с именованной функцией:
functionhandleClick(){alert('Кнопка нажата!');}element.addEventListener('click',handleClick);

Во всех вариантах выше при нажатии на кнопку появится на странице алерт с текстом "Кнопка нажата".

Не рекомендуется использовать Inline-обработчики (через HTML), особенно объемных функций, потому что происходит смешивание HTML и JavaScript, что не является хорошей практикой. В первом и втором способе нельзя задать несколько обработчиков события, что позволяет сделать третий способ. Inlinre-обработчик невозможно удалить во время исполнения программы. AddEventListener имеет более гибкую настройку (например, фаза события и другие опции) и считается современным стандартом. В нашем калькуляторе мы используем второй способ (через свойство onclick), так как для каждой кнопки нам нужен только один обработчик, и это делает код более простым и понятным.

Функция onсlick имеет объект события, доступ к которому можно получить внутри функции. В примере перечислены некоторые свойства объекта.

element.addEventListener('click',function(event){// вывести тип события, элемент и координаты кликаalert(event.type+" на "+event.currentTarget);alert("Координаты: "+event.clientX+":"+event.clientY);});

Прежде, чем оживить калькулятор, рассмотрим сначала самый простой пример с применением выше перечисленных методов: две строки ввода, одна кнопка "=", результат в консоли

Пользователь вводит два числа с клавиатуры, нажимает кнопку "=", результат выводится в алерт. HTML:

<inputid="a" type="number" placeholder="Первое число"><inputid="b" type="number" placeholder="Второе число"><buttonid="equal">=</button>

Фото 1

JS:

// обработчик события нажатия на кнопку =document.getElementById('equal').onclick=function(){// получение введенного значения, берем элемент по id, затем смотрим на его значение - value// обязательно приводим к числу, потому что знчение value - string,// если мы будем складывать стринги, то получим совсем другое ('4' + '6' = '46' - string, 4 + 6 = 10 - number)consta=Number(document.getElementById('a').value);// например ввели 4constb=Number(document.getElementById('b').value);// например ввели 6constsum=a+b;alert('Результат: '+sum);// в алерте увидим: Результат: 10}

Что происходит:
Вводим числа в поля, нажимаем "=" — результат появляется в алерте на странице.

Фото 2Фото 3

Вывод результата на экран (а не в алерт)

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

HTML:

<inputid="a" type="number" placeholder="Первое число"><inputid="b" type="number" placeholder="Второе число"><buttonid="equal">=</button><!-- поле в которое выводится результат --><spanid="result"></span>

JS:

// обработчик события нажатия на кнопку =document.getElementById('equal').onclick=function(){// получение значений из полей ввода - поле находим по idconsta=Number(document.getElementById('a').value);constb=Number(document.getElementById('b').value);constsum=a+b;// записываем результат в значение элемента (мы будем в калькуляторе записывать в innerHTML)document.getElementById('result').textContent='Результат: '+sum;}

Что происходит:
После нажатия "=" результат появляется на странице.

Фото 4

3. Программирование кнопок калькулятора

Теперь давайте разберем код калькулятора по частям. У нас число задается по цифрам, а не целиком, как в поле input, поэтому добавим переменные хранения чисел (a и b - достаточно двух, после каждой операции = значение записываем в a, значени b обнуляем), в которые будем записывать введенные цифры, чтобы по итогу получить число. Добавим вспомогательные переменные, чтобы хранить в них значения выбранной операции (чтобы использовать его при нажатии на кнопку =) и результата вычисления, напишем отдельно функцию формирования числа по нажатию на любую цифру и обработчики событий для каждой кнопки.

Файл script.js

Шаг 1: Инициализация переменных

window.onload=function(){// Переменные для хранения чисел и операцийleta=''// Первое числоletb=''// Второе числоletexpressionResult=''// Результат вычисленияletselectedOperation=null// Выбранная операция

Шаг 2: Получение доступа к элементам калькулятора

Чтобы каждый раз не обращаться к элементам, запомним их в переменные. Поскольку мы их не будем перезаписывать - то переменные будут const

// Получаем доступ к экрану калькулятора в поле выводаconstoutputElement=document.getElementById("result")// Получаем все кнопки с цифрами (их id начинаются с "btn_digit_")constdigitButtons=document.querySelectorAll('[id ^= "btn_digit_"]')

Разберем, что означает этот селектор [id ^= "btn_digit_"]:

  1. querySelectorAll() - метод, который позволяет выбрать все элементы, соответствующие CSS-селектору
  2. [id ^= "btn_digit_"] - это CSS-селектор атрибутов, где:
    • id - атрибут, по которому мы ищем
    • ^= - оператор "начинается с" (starts with)
    • "btn_digit_" - текст, с которого должен начинаться id

Например, этот селектор найдет все элементы с такими id:

  • btn_digit_0
  • btn_digit_1
  • btn_digit_2
  • и так далее...

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

Шаг 3: Функция обработки нажатия на цифровые кнопки

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

functiononDigitButtonClicked(digit){// Если операция не выбрана, работаем с первым числом (a) - после выбора операции начинается ввод второго числаif(!selectedOperation){// Проверяем, не пытаемся ли мы добавить вторую точкуif((digit!='.')||(digit=='.'&&!a.includes(digit))){// здесь у нас происходит складывание сохраненного уже числа и нажатой цифры. Оба поля string, поэтому// каждый раз цифра записывается в конец строки. Например: a = '14', digit = '5', // a += digit - это короткая запись a = a + digit - поэтомоу после этой операции a = '145'a+=digit;}outputElement.innerHTML=a;}// Если операция выбрана, работаем со вторым числом (b)else{if((digit!='.')||(digit=='.'&&!b.includes(digit))){b+=digit;outputElement.innerHTML=b;}}}

Шаг 4: Настройка обработчиков событий для кнопок

// Настраиваем обработчики для цифровых кнопок - для каждой кнопки с цифрой и точкой вызываем выше написанную функцию по формированию числаdigitButtons.forEach(button=>{button.onclick=function(){// берем текст, написанный на кнопке - он и является цифройconstdigitValue=button.innerHTML;onDigitButtonClicked(digitValue);}});// Настраиваем обработчики для кнопок операций - сохраняем выбранную операцию в ранее созданную переменную selectedOperationdocument.getElementById("btn_op_mult").onclick=function(){if(a==='')return;selectedOperation='x';}document.getElementById("btn_op_plus").onclick=function(){if(a==='')return;selectedOperation='+';}document.getElementById("btn_op_minus").onclick=function(){if(a==='')return;selectedOperation='-';}document.getElementById("btn_op_div").onclick=function(){if(a==='')return;selectedOperation='/';}

Шаг 5: Кнопка очистки

// Очищаем все значения при нажатии на кнопку C (вешаем обработчик события click на кнопку С)document.getElementById("btn_op_clear").onclick=function(){a=''b=''selectedOperation=''expressionResult=''outputElement.innerHTML=0}

Шаг 6: Кнопка равно

// Вычисляем результат при нажатии на = (вешаем обработчик события click на кнопку =)document.getElementById("btn_op_equal").onclick=function(){// Проверяем, что у нас есть оба числа и операцияif(a===''||b===''||!selectedOperation)return// Выполняем выбранную операцию - чтобы не плодить if, воспользуемся удобной и более наглядной функцией сравнения switch, которая на основе значения переданной переменной выполняет нужный кейс. В case указывается ожидаемое точное значение переменной (это может быть любое значение), а затем после : пишется код, который нужно выполнить в данном случае. Case проверяются последовательно, выход из switch происходит при попадании на break или если значение не совпало ни с чем.switch(selectedOperation){case'x':
expressionResult=(+a)*(+b)// обязательно пишется в конце действий case, чтобы выйти из switch, иначе продолжится сравнение case дальшеbreak;case'+':
expressionResult=(+a)+(+b)break;case'-':
expressionResult=(+a)-(+b)break;case'/':
expressionResult=(+a)/(+b)break;// желательно (но не обязательно) всегда прописывать дефолтное поведение, в случае если в переменной окажется не перечисленное выше значение. в нашем случае это не нужно.default:
break;}// Сохраняем результат и очищаем второе число, чтобы при новом вводе записывать значение нового числа в ba=expressionResult.toString()b=''selectedOperation=null// Показываем результат на экранеoutputElement.innerHTML=a}};

4. Запуск калькулятора с помощью LiveServer

Чтобы увидеть наш калькулятор в действии, нам нужно запустить его на веб-сервере. Для этого мы будем использовать расширение Live Server в VS Code:

  1. Откройте VS Code
  2. Перейдите в раздел расширений (Extensions)
  3. Найдите и установите "Live Server"
  4. После установки нажмите кнопку "Go Live" в нижней панели VS Code

Фото 1

Теперь ваш калькулятор будет работать в браузере, и вы сможете видеть все изменения в реальном времени!

5. Задания для самостоятельной проработки

Попробуйте самостоятельно добавить следующие функции в калькулятор:

  1. Запрограммируйте операцию смены знака +/-;
  2. Запрограммируйте операцию вычисления процента %;
  3. Добавьте кнопку стирания введенной цифры назад (backspace). Расположить кнопку можно, например, на месте нерабочих +/- и % кнопок;
  4. Сделайте смену цвета фона по кнопке;
  5. Запрограммируйте операцию вычисления квадратного корня √;
  6. Запрограммируйте операцию возведения в квадрат x²;
  7. Запрограммируйте операцию вычисления факториала x!;
  8. Добавьте кнопку, которая за раз добавляет сразу три нуля (000);
  9. Запрограммируйте накапливаемое сложние;
  10. Запрограммируйте накапливаемое вычитание;
  11. Сделайте смену цвета окна вывода результата по кнопке;
  12. Добавьте в калькулятор вашу индивидуальную операцию.

Подсказки для выполнения заданий:

  1. Для смены знака используйте умножение на -1
  2. Для процента делите число на 100
  3. Для backspace используйте метод slice() для строк
  4. Для смены цвета используйте style.backgroundColor
  5. Для корня используйте Math.sqrt()
  6. Для квадрата умножьте число на само себя
  7. Для факториала используйте цикл или рекурсию
  8. Для тройного нуля просто добавьте "000" к строке
  9. Для накапливаемых операций сохраняйте предыдущий результат
  10. Для индивидуальной операции проявите фантазию!