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

описание курса by elkhimova-irina · Pull Request #2 · iu5git/JavaScript · GitHub

/ JavaScript Public

описание курса #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iu5git merged 1 commit into from
Jan 23, 2023
Conversation 0 Commits 1 Checks 0 Files changed
Merged

описание курса #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension .md  (1) All 1 file type selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
147 changes: 6 additions & 141 deletions tutorials/calculator/Calculator-JS.md
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# ЛР 1. HTML/CSS/JavaScript
# ЛР 1. HTML/CSS

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

![](assets/prototype.png)

Expand Down Expand Up @@ -443,147 +443,12 @@ p.my-large-italic {
```


Если все выполнено верно, изображение страницы должно соответствовать требуемому. Весь код можно найти в конце методички.

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

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

Как и CSS, js-скрипт можно задать в самом HTML-документе (вложенный скрипт), либо вынести в отдельный файл и сослаться на него в HTML-файле:

```html
<head>
<title>калькулятор</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
```

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

Самый распространенный путь доступа к HTML-элементам из скрипта - получение HTML-объекта по его идентификатору. Для этого существует метод `getElementById`:

```html
<body>
<p id="paragraph">Lorem Ipsum</p>

<!--вложенный JS-скрипт-->
<script>
<!-- обращаемся к HTML-документу и ищем объект с id=paragraph -->
element = document.getElementById("paragraph")

<!-- через свойство innerHTML у полученного объекта можно изменить его содержимое-->
element.innerHTML = "Измененный текст параграфа";
</script>
</body>
```

Также JS предоставляет и другие методы получения элементов:

```jsx
document.getElementsByTagName(name) // поиск элементов по тэгу
document.getElementsByClassName(name) // поиск элементов определенного css класса
```

про другие способы взаимодействия с HTML-элементами из JS можно почитать [здесь](https://www.w3schools.com/js/js_htmldom.asp).

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

```python
// файл script.js

let a = ''
let b = ''
let expressionResult = ''
let selectedOperation = null

// окно вывода результата
outputElement = document.getElementById("result")

// список объектов кнопок циферблата (id которых начинается с btn_digit_)
digitButtons = document.querySelectorAll('[id ^= "btn_digit_"]')

function onDigitButtonClicked(digit) {
if (!selectedOperation) {
if ((digit != '.') || (digit == '.' && !a.includes(digit))) {
a += digit
}
outputElement.innerHTML = a
} else {
if ((digit != '.') || (digit == '.' && !b.includes(digit))) {
b += digit
outputElement.innerHTML = b
}
}
}

// устанавка колбек-функций на кнопки циферблата по событию нажатия
digitButtons.forEach(button => {
button.onclick = function() {
const digitValue = button.innerHTML
onDigitButtonClicked(digitValue)
}
});

// установка колбек-функций для кнопок операций
document.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 = '/'
}

// кнопка очищения
document.getElementById("btn_op_clear").onclick = function() {
a = ''
b = ''
selectedOperation = ''
expressionResult = ''
outputElement.innerHTML = 0
}

// кнопка расчёта результата
document.getElementById("btn_op_equal").onclick = function() {
if (a === '' || b === '' || !selectedOperation)
return

switch(selectedOperation) {
case 'x':
expressionResult = (+a) * (+b)
break;
case '+':
expressionResult = (+a) + (+b)
break;
case '-':
expressionResult = (+a) - (+b)
break;
case '/':
expressionResult = (+a) / (+b)
break;
}

a = expressionResult.toString()
b = ''
selectedOperation = null

outputElement.innerHTML = a
}
```
Если все выполнено верно, изображение страницы должно соответствовать требуемому.

# Задание

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

1. Запрограммируйте операцию смены знака +/-, поменяйте цветовую палитру калькулятора с оранжево-серой на любую другую;
2. Запрограммируйте операцию вычисления процента %, сделайте фон калькулятора темным (наподобие ночной темы);
3. Добавьте кнопку стирания введенной цифры назад (backspace), сделайте кнопки квадратными вместо круглых. Расположить кнопку можно, например, на месте нерабочих +/- и % кнопок.
1. Поменяйте цветовую палитру калькулятора с оранжево-серой на любую другую;
2. Сделайте фон калькулятора темным (наподобие ночной темы);
3. Сделайте кнопки квадратными вместо круглых.
Back | FazBrowse Home | New Git URL