자바스크립트, 입문!

자바스크립트, 입문!

핵심만 쏙쏙, 바로 보고 실습하는 JavaScript!

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 자바스크립트 연산자 우선순위