05 연산자, 계산을 위한 도구!
# 연산자, 데이터 처리의 기초!
## 미션
연산자의 개념을 조사하고, 그 기초 사용법을 연습하시오.
<img src="http://drive.google.com/uc?export=view&id=1hMK6WaHzWR6urhSweVTxgpJ23W_t7JLW" alt="홍팍-자바스크립트-연산자란">
## 04:00 기본파일 생성
#### HTML
```
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 외부 파일 연결 -->
<link rel="stylesheet" href="operators.css">
<Script defer src="operators.js"></script>
</head>
<body>
<h1>연산자, 기초 계산 도구!</h1>
<img src="" alt="">
<h2>대입 연산, 오른쪽 값을 왼쪽 변수로!</h2>
<p>홍팍이네 과일 가게, 다음 3종류 팜!</p>
<ul>
<li>🍓 strawberry = 200 원</li>
<li>🥝 kiwi = 800 원</li>
<li>🍌 banana = 500 원</li>
</ul>
<h2>문자열 덧셈, 연결하기!</h2>
<p>과일 가격을 다음과 같이 출력하려면?</p>
<ul>
<li>🍓딸기 개당 가격: 200 원</li>
<li>🥝키위 개당 가격: 800 원</li>
<li>🍌바나나 개당 가격: 500 원</li>
</ul>
<h2>산술 연산, 기초 산수!</h2>
<p>기초 연산자들, 결과 무엇?</p>
<ul>
<li>🍓 + 🥝 - 🍌 = ?</li>
<li>5 x 🍓 ÷ 🍌 = ?</li>
<li>🍌 - 🍓 x 5 + 🥝 = ?</li>
<li>7 % 3 = ?</li>
<li>2 ** 3 = ?</li>
</ul>
<h2>연산자 우선순위, 뭐를 먼저 연산?</h2>
<p>다음 수식은 어떠한 순서로 계산됨?</p>
<ul>
<li>100 + 200 / 50 = ?</li>
<li>500 / (200 - 150) = ?</li>
<li>500 + 2 + "3" = ?</li>
<li>"3" + 500 + 2 = ?</li>
</ul>
</body>
</html>
```
#### CSS
```
/* CSS 관련 키워드, MDN(https://developer.mozilla.org/ko)에서 검색 */
body {
font-family: Arial, Helvetica, sans-serif;
}
```
#### JS
```
// JavaScript 관련 키워드 검색
// 👉 MDN(https://developer.mozilla.org/ko)
'use strict';
```
## 05:10 대입(할당) 연산 - assignment operator
```
// 1. 대입 연산: 오른쪽 값을 왼쪽 변수에 대입
// 구글링 👉 site:developer.mozilla.org 자바스크립트 대입(할당) 연산자
const strawberry = 200;
const kiwi = 800;
const banna = 500;
```
## 06:53 문자열 연결 - string concatenation, template literals
```
// 2. 문자열 덧셈: 문자열을 연결
// 구글링 👉 site:developer.mozilla.org 자바스크립트 문자열 연결
console.log("🍓딸기 개당 가격: " + strawberry + " 원");
console.log("🥝키위 개당 가격: " + kiwi + " 원");
console.log(`🍌바나나 개당 가격: ${banana} 원`);
```
## 10:22 산술 연산 - arithmetic operator
```
// 3. 산술 연산, 기초 산수!
// 구글링 👉 site:developer.mozilla.org 자바스크립트 산술 연산자
// 🍓 + 🥝 - 🍌 = ?
const result1 = strawberry + kiwi - banana;
console.log(result1);
// 5 x 🍓 ÷ 🍌 = ?
const result2 = 5 * strawberry / banana;
console.log(result2);
// 🍌 - 🍓 x 5 + 🥝 = ?
const result3 = banana - strawberry * 5 + kiwi;
console.log(result3);
// 나머지 연산자 7 % 3 => 2.. 1
console.log(7 % 3);
// 제곱 연산, 2 ** 3 => 2x2x2 => 8
console.log(2 ** 3);
```
## 13:38 연산자 우선순위 - operator precedence
```
// 4. 연산자 우선순위, 뭐를 먼저 연산?
// 구글링 👉 site:developer.mozilla.org 자바스크립트 연산자 우선순위
console.log(100 + 200 / 50);
console.log(500 / (200 - 150));
console.log(500 + 2 + "3");
console.log("3" + 500 + 2);
```
## 구글링 훈련 🔥
- site:developer.mozilla.org 자바스크립트 대입(할당) 연산자
- site:developer.mozilla.org 자바스크립트 복합 대입(할당) 연산자
- site:developer.mozilla.org 자바스크립트 문자열 연결
- site:developer.mozilla.org 자바스크립트 template literals
- site:developer.mozilla.org 자바스크립트 산술 연산자
- site:developer.mozilla.org 자바스크립트 연산자 우선순위