-
[JS] Do it! JS - 03 변수와 자료형, 연산자FrontEnd/JavaScript 2022. 5. 2. 20:17
03-1
변수를 선언하는 규칙
var (let 또는 const) 변수이름;
1. 의미가 있는 이름으로 짓는다.
2. 여러 단어를 연결한 변수 이름은 Camel Case로 지음
- 첫 번째 단어는 소문자로, 두 번째 단어부터는 대문자로 시작하는 방법
3. 선언할 수 없는 이름도 있다.
- 변수이름의 첫 글자는 문자, 밑줄(_) 또는 달러 기호($)로 시작
- 그 뒤부터는 문자, 밑줄, 달러 기호, 숫자 사용 가능
변수에 값이나 식 저장하기
<script> var apple = "yummy"; var banana; banana = "long and yummy"; apple = 2000; banana = 10000; var total = apple + banana; </script>Do it! 실습 - 나이 계산 프로그램 만들기
<body> <button class="btn">나이 계산하기</button> <div id="result" class="show">(결과 값 표시)</div> <script> function calc(e) { var currentYear = 2022; var birthYear = prompt("태어난 연도를 입력하세요.", "YYYY"); // 프롬프트 창에 태어난 연도를 입력 var age; age = currentYear - birthYear + 1; document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세 입니다."; } const btn = document.querySelector(".btn"); btn.addEventListener("click", calc); </script> </body>let과 const
: ES6 버전부터 변수 선언 시 let, const 사용 가능, let으로 선언한 변수는 블록 내에서만 사용 가능
<body> <button class="btn">나이 계산하기</button> <div id="result" class="show">(결과 값 표시)</div> <script> function calc(e) { const currentYear = 2022; let birthYear = prompt("태어난 연도를 입력하세요.", "YYYY"); // 프롬프트 창에 태어난 연도를 입력 let age; age = currentYear - birthYear + 1; document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세 입니다."; } const btn = document.querySelector(".btn"); btn.addEventListener("click", calc); </script> </body>
03-2 자료형 이해하기
자료형의 종류
기본형
- number(숫자) : 따옴표 없이 표기한 숫자
- string(문자열) : 작은따옴표(')나 큰따옴표(")로 묶어 나타냄
- boolean(논리형) : 참(true)과 거짓(false) 두 개의 값만 가지고 있는 유형
- undefined : 자료형을 지정하지 않았을 때의 유형
- null : 값이 유효하지 않은 유형
복합형
- array(배열) : 하나의 변수에 여러 값을 저장하는 유형
- object(객체) : 함수와 속성이 함께 포함된 유형
자료형을 확인하는 방법 : typeof 연산자
- typeof 변수이름
자바스크립트 자료형의 특징
느슨한 자료형 체크(Weak Data Type Check)
03-3 연산자 이해하기
사칙 연산자
- 더하기(+), 빼기(-), 곱하기(*), 나누기(/)
나머지 연산자
- 나머지(%)
증감 연산자
- 증가(++), 감소(--)
Do it! 실습 - 할인 가격 계산 프로그램 만들기
<body> <div id="contents"> <img src="./sale.png"> <ul> <li> <label for="oPrice">원래 가격</label> <input type="text" id="oPrice">원 </li> <li> <label for="rate">할인율</label> <input type="text" id="rate">% </li> <li> <button onclick="showPrice()">할인 가격 계산하기</button> </li> </ul> <div id="showResult"></div> </div> <script> function showPrice() { var originPrice = document.querySelector("#oPrice").value; var rate = document.querySelector("#rate").value; var savedPrice = originPrice * (rate / 100); var resultPrice = originPrice - savedPrice; document.querySelector("#showResult").innerHTML = "상품의 원래 가격은 " + originPrice + "원, 할인율은 " + rate + "% 입니다. " + savedPrice + "원 할인되어 " + resultPrice + "원에 살 수 있습니다."; } </script> </body>
03-4 연산자 깊게 알아보기
할당 연산자 or 대입 연산자 '='
- y += x : y = y + x
- y -= x : y = y - x
- y *= x : y = y * x
- y /= x : y = y / x
- y %= x : y = y % x
더하기 연산자와 연결 연산자 구별하기
더하기 연산자
- 수의 덧셈
연결 연산자
- 문자열과 문자열을 연결
비교 연산자 알아보기
==와 !=
== : 두 수(또는 변수)가 같은지 확인
!= : 두 수(또는 변수)가 다른지 확인
== 연산자와 === 연산자
10 == "10" // true 10 === "10" // false== : 자동으로 자료형을 변환하여 비교 (안의 내용만 비교)
=== : 두 자료형의 변환 허용 X (자료형과 내용(값) 모두 비교)
'FrontEnd > JavaScript' 카테고리의 다른 글
[JS] Nomadcoders - Zoom Clone Coding (0) 2022.05.06 [JS] Nomadcoders - Vanila JS (0) 2022.05.03 [JS] Do it! JS - 02 자바스크립트와 친해지기 (0) 2022.05.02 [JS] Do it! JS - 01 자바스크립트 (0) 2022.04.30 [JS] 선택자 종류 (0) 2022.04.24