FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

описание курса · nathanKith/JavaScript@583e0aa · GitHub

/ JavaScript Public
forked from iu5git/JavaScript

Commit 583e0aa

Browse files
elkhimova-irina
authored
описание курса
1 parent 5fd438b commit 583e0aa

1 file changed

Lines changed: 6 additions & 141 deletions

File tree

‎tutorials/calculator/Calculator-JS.md‎

Lines changed: 6 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# ЛР 1. HTML/CSS/JavaScript
1+
# ЛР 1. HTML/CSS
22

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

55
![](assets/prototype.png)
66

@@ -443,147 +443,12 @@ p.my-large-italic {
443443
```
444444

445445

446-
Если все выполнено верно, изображение страницы должно соответствовать требуемому. Весь код можно найти в конце методички.
447-
448-
# Программирование логики с помощью JavaScript
449-
450-
Язык программирования JavaScript служит основным инструментом для описания логики и интерактивности веб-страниц. В данной работе с помощью Js мы будем программировать кнопки калькулятора.
451-
452-
Как и CSS, js-скрипт можно задать в самом HTML-документе (вложенный скрипт), либо вынести в отдельный файл и сослаться на него в HTML-файле:
453-
454-
```html
455-
<head>
456-
<title>калькулятор</title>
457-
<link rel="stylesheet" href="style.css">
458-
<script type="text/javascript" src="script.js"></script>
459-
</head>
460-
```
461-
462-
### Доступ к HTML-элементам из JavaScript
463-
464-
Самый распространенный путь доступа к HTML-элементам из скрипта - получение HTML-объекта по его идентификатору. Для этого существует метод `getElementById`:
465-
466-
```html
467-
<body>
468-
<p id="paragraph">Lorem Ipsum</p>
469-
470-
<!--вложенный JS-скрипт-->
471-
<script>
472-
<!-- обращаемся к HTML-документу и ищем объект с id=paragraph -->
473-
element = document.getElementById("paragraph")
474-
475-
<!-- через свойство innerHTML у полученного объекта можно изменить его содержимое-->
476-
element.innerHTML = "Измененный текст параграфа";
477-
</script>
478-
</body>
479-
```
480-
481-
Также JS предоставляет и другие методы получения элементов:
482-
483-
```jsx
484-
document.getElementsByTagName(name) // поиск элементов по тэгу
485-
document.getElementsByClassName(name) // поиск элементов определенного css класса
486-
```
487-
488-
про другие способы взаимодействия с HTML-элементами из JS можно почитать [здесь](https://www.w3schools.com/js/js_htmldom.asp).
489-
490-
### Программирование кнопок калькулятора
491-
492-
```python
493-
// файл script.js
494-
495-
let a = ''
496-
let b = ''
497-
let expressionResult = ''
498-
let selectedOperation = null
499-
500-
// окно вывода результата
501-
outputElement = document.getElementById("result")
502-
503-
// список объектов кнопок циферблата (id которых начинается с btn_digit_)
504-
digitButtons = document.querySelectorAll('[id ^= "btn_digit_"]')
505-
506-
function onDigitButtonClicked(digit) {
507-
if (!selectedOperation) {
508-
if ((digit != '.') || (digit == '.' && !a.includes(digit))) {
509-
a += digit
510-
}
511-
outputElement.innerHTML = a
512-
} else {
513-
if ((digit != '.') || (digit == '.' && !b.includes(digit))) {
514-
b += digit
515-
outputElement.innerHTML = b
516-
}
517-
}
518-
}
519-
520-
// устанавка колбек-функций на кнопки циферблата по событию нажатия
521-
digitButtons.forEach(button => {
522-
button.onclick = function() {
523-
const digitValue = button.innerHTML
524-
onDigitButtonClicked(digitValue)
525-
}
526-
});
527-
528-
// установка колбек-функций для кнопок операций
529-
document.getElementById("btn_op_mult").onclick = function() {
530-
if (a === '') return
531-
selectedOperation = 'x'
532-
}
533-
document.getElementById("btn_op_plus").onclick = function() {
534-
if (a === '') return
535-
selectedOperation = '+'
536-
}
537-
document.getElementById("btn_op_minus").onclick = function() {
538-
if (a === '') return
539-
selectedOperation = '-'
540-
}
541-
document.getElementById("btn_op_div").onclick = function() {
542-
if (a === '') return
543-
selectedOperation = '/'
544-
}
545-
546-
// кнопка очищения
547-
document.getElementById("btn_op_clear").onclick = function() {
548-
a = ''
549-
b = ''
550-
selectedOperation = ''
551-
expressionResult = ''
552-
outputElement.innerHTML = 0
553-
}
554-
555-
// кнопка расчёта результата
556-
document.getElementById("btn_op_equal").onclick = function() {
557-
if (a === '' || b === '' || !selectedOperation)
558-
return
559-
560-
switch(selectedOperation) {
561-
case 'x':
562-
expressionResult = (+a) * (+b)
563-
break;
564-
case '+':
565-
expressionResult = (+a) + (+b)
566-
break;
567-
case '-':
568-
expressionResult = (+a) - (+b)
569-
break;
570-
case '/':
571-
expressionResult = (+a) / (+b)
572-
break;
573-
}
574-
575-
a = expressionResult.toString()
576-
b = ''
577-
selectedOperation = null
578-
579-
outputElement.innerHTML = a
580-
}
581-
```
446+
Если все выполнено верно, изображение страницы должно соответствовать требуемому.
582447

583448
# Задание
584449

585450
Вариант = (№ в списке % 3) + 1
586451

587-
1. Запрограммируйте операцию смены знака +/-, поменяйте цветовую палитру калькулятора с оранжево-серой на любую другую;
588-
2. Запрограммируйте операцию вычисления процента %, сделайте фон калькулятора темным (наподобие ночной темы);
589-
3. Добавьте кнопку стирания введенной цифры назад (backspace), сделайте кнопки квадратными вместо круглых. Расположить кнопку можно, например, на месте нерабочих +/- и % кнопок.
452+
1. Поменяйте цветовую палитру калькулятора с оранжево-серой на любую другую;
453+
2. Сделайте фон калькулятора темным (наподобие ночной темы);
454+
3. Сделайте кнопки квадратными вместо круглых.

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL