Commit 1fa9723
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,146 @@ | |||
| 1 | + # ЛР 2. HTML/CSS/JavaScript | ||
| 2 | + | ||
| 3 | + **Цель** данной лабораторной работы - знакомство с инструментами построения пользовательских интерфейсов web-сайтов: HTML, CSS, JavaScript. В ходе выполнения работы, вам предстоит продолжить реализовывать простой калькулятора, и затем выполнить задания по варианту. | ||
| 4 | + | ||
| 5 | + # Программирование логики с помощью JavaScript | ||
| 6 | + | ||
| 7 | + Язык программирования JavaScript служит основным инструментом для описания логики и интерактивности веб-страниц. В данной работе с помощью Js мы будем программировать кнопки калькулятора. | ||
| 8 | + | ||
| 9 | + Как и CSS, js-скрипт можно задать в самом HTML-документе (вложенный скрипт), либо вынести в отдельный файл и сослаться на него в HTML-файле: | ||
| 10 | + | ||
| 11 | + ```html | ||
| 12 | + <head> | ||
| 13 | + <title>калькулятор</title> | ||
| 14 | + <link rel="stylesheet" href="style.css"> | ||
| 15 | + <script type="text/javascript" src="script.js"></script> | ||
| 16 | + </head> | ||
| 17 | + ``` | ||
| 18 | + | ||
| 19 | + ### Доступ к HTML-элементам из JavaScript | ||
| 20 | + | ||
| 21 | + Самый распространенный путь доступа к HTML-элементам из скрипта - получение HTML-объекта по его идентификатору. Для этого существует метод `getElementById`: | ||
| 22 | + | ||
| 23 | + ```html | ||
| 24 | + <body> | ||
| 25 | + <p id="paragraph">Lorem Ipsum</p> | ||
| 26 | + | ||
| 27 | + <!--вложенный JS-скрипт--> | ||
| 28 | + <script> | ||
| 29 | + <!-- обращаемся к HTML-документу и ищем объект с id=paragraph --> | ||
| 30 | + element = document.getElementById("paragraph") | ||
| 31 | + | ||
| 32 | + <!-- через свойство innerHTML у полученного объекта можно изменить его содержимое--> | ||
| 33 | + element.innerHTML = "Измененный текст параграфа"; | ||
| 34 | + </script> | ||
| 35 | + </body> | ||
| 36 | + ``` | ||
| 37 | + | ||
| 38 | + Также JS предоставляет и другие методы получения элементов: | ||
| 39 | + | ||
| 40 | + ```jsx | ||
| 41 | + document.getElementsByTagName(name) // поиск элементов по тэгу | ||
| 42 | + document.getElementsByClassName(name) // поиск элементов определенного css класса | ||
| 43 | + ``` | ||
| 44 | + | ||
| 45 | + про другие способы взаимодействия с HTML-элементами из JS можно почитать [здесь](https://www.w3schools.com/js/js_htmldom.asp). | ||
| 46 | + | ||
| 47 | + ### Программирование кнопок калькулятора | ||
| 48 | + | ||
| 49 | + ```python | ||
| 50 | + // файл script.js | ||
| 51 | + | ||
| 52 | + let a = '' | ||
| 53 | + let b = '' | ||
| 54 | + let expressionResult = '' | ||
| 55 | + let selectedOperation = null | ||
| 56 | + | ||
| 57 | + // окно вывода результата | ||
| 58 | + outputElement = document.getElementById("result") | ||
| 59 | + | ||
| 60 | + // список объектов кнопок циферблата (id которых начинается с btn_digit_) | ||
| 61 | + digitButtons = document.querySelectorAll('[id ^= "btn_digit_"]') | ||
| 62 | + | ||
| 63 | + function onDigitButtonClicked(digit) { | ||
| 64 | + if (!selectedOperation) { | ||
| 65 | + if ((digit != '.') || (digit == '.' && !a.includes(digit))) { | ||
| 66 | + a += digit | ||
| 67 | + } | ||
| 68 | + outputElement.innerHTML = a | ||
| 69 | + } else { | ||
| 70 | + if ((digit != '.') || (digit == '.' && !b.includes(digit))) { | ||
| 71 | + b += digit | ||
| 72 | + outputElement.innerHTML = b | ||
| 73 | + } | ||
| 74 | + } | ||
| 75 | + } | ||
| 76 | + | ||
| 77 | + // устанавка колбек-функций на кнопки циферблата по событию нажатия | ||
| 78 | + digitButtons.forEach(button => { | ||
| 79 | + button.onclick = function() { | ||
| 80 | + const digitValue = button.innerHTML | ||
| 81 | + onDigitButtonClicked(digitValue) | ||
| 82 | + } | ||
| 83 | + }); | ||
| 84 | + | ||
| 85 | + // установка колбек-функций для кнопок операций | ||
| 86 | + document.getElementById("btn_op_mult").onclick = function() { | ||
| 87 | + if (a === '') return | ||
| 88 | + selectedOperation = 'x' | ||
| 89 | + } | ||
| 90 | + document.getElementById("btn_op_plus").onclick = function() { | ||
| 91 | + if (a === '') return | ||
| 92 | + selectedOperation = '+' | ||
| 93 | + } | ||
| 94 | + document.getElementById("btn_op_minus").onclick = function() { | ||
| 95 | + if (a === '') return | ||
| 96 | + selectedOperation = '-' | ||
| 97 | + } | ||
| 98 | + document.getElementById("btn_op_div").onclick = function() { | ||
| 99 | + if (a === '') return | ||
| 100 | + selectedOperation = '/' | ||
| 101 | + } | ||
| 102 | + | ||
| 103 | + // кнопка очищения | ||
| 104 | + document.getElementById("btn_op_clear").onclick = function() { | ||
| 105 | + a = '' | ||
| 106 | + b = '' | ||
| 107 | + selectedOperation = '' | ||
| 108 | + expressionResult = '' | ||
| 109 | + outputElement.innerHTML = 0 | ||
| 110 | + } | ||
| 111 | + | ||
| 112 | + // кнопка расчёта результата | ||
| 113 | + document.getElementById("btn_op_equal").onclick = function() { | ||
| 114 | + if (a === '' || b === '' || !selectedOperation) | ||
| 115 | + return | ||
| 116 | + | ||
| 117 | + switch(selectedOperation) { | ||
| 118 | + case 'x': | ||
| 119 | + expressionResult = (+a) * (+b) | ||
| 120 | + break; | ||
| 121 | + case '+': | ||
| 122 | + expressionResult = (+a) + (+b) | ||
| 123 | + break; | ||
| 124 | + case '-': | ||
| 125 | + expressionResult = (+a) - (+b) | ||
| 126 | + break; | ||
| 127 | + case '/': | ||
| 128 | + expressionResult = (+a) / (+b) | ||
| 129 | + break; | ||
| 130 | + } | ||
| 131 | + | ||
| 132 | + a = expressionResult.toString() | ||
| 133 | + b = '' | ||
| 134 | + selectedOperation = null | ||
| 135 | + | ||
| 136 | + outputElement.innerHTML = a | ||
| 137 | + } | ||
| 138 | + ``` | ||
| 139 | + | ||
| 140 | + # Задание | ||
| 141 | + | ||
| 142 | + Вариант = (№ в списке % 3) + 1 | ||
| 143 | + | ||
| 144 | + 1. Запрограммируйте операцию смены знака +/-; | ||
| 145 | + 2. Запрограммируйте операцию вычисления процента %; | ||
| 146 | + 3. Добавьте кнопку стирания введенной цифры назад (backspace). Расположить кнопку можно, например, на месте нерабочих +/- и % кнопок. | ||
0 commit comments