03-1 변수란 무엇일까?
변수는 변하는 값을 저장할 때 사용한다
프로그램소개: 나이 계산하기
수식으로 알아보는 상수와 변수
나이 = 올해 연도 - 태어난 연도 + 1
- 나이, 올해 연도, 태어난 연도는 변하는 값이므로 변수(Variable), 1은 변하지 않는 값이므로 상수(Constant)
변수를 선언하는 규칙 세 가지
규칙1 - 이름은 의미 있게 짓는다
규칙2 - 여러 단어를 연결한 변수 이름은 낙타 모양으로 만들어 준다. 낙타 표기법(Camel Case)
규칙3 - 선언할 수 없는 이름도 있다
첫 글자는 문자나 밑줄, 달러 기호로 시작해야 한다
변수에 값이나 식 저장하기
나이 계산 프로그램 만들기 - 변수 선언하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>나이 계산하기</title>
<link rel="stylesheet" href="css/age.css">
</head>
<body>
<button class="btn" onclick="calc()">나이 계산하기</button>
<div id="result" class="show">(결과 값 표시)</div>
<script>
function calc() {
var currentYear = 2023;
var birthYear = 1994;
var age;
age = currentYear - birthYear + 1;
document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다.";
}
</script>
</body>
</html>
나이 계산 프로그램 만들기 - 사용자 입력값 변수에 할당하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>나이 계산하기</title>
<link rel="stylesheet" href="css/age.css">
</head>
<body>
<button class="btn" onclick="calc()">나이 계산하기</button>
<div id="result" class="show">(결과 값 표시)</div>
<script>
function calc() {
var currentYear = 2023;
var birthYear = prompt("태어난 연도를 입력하세요.", "YYYY");
var age;
age = currentYear - birthYear + 1;
document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다.";
}
</script>
</body>
</html>
ES6 버전부터는 변수를 선언할 때 var 예약어 외에 let과 const 예약어를 사용할 수 있다. let으로 선언한 변수는 블록({})을 벗어나면 사용할 수 없고 const는 상숫값을 선언할 때 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>나이 계산하기</title>
<link rel="stylesheet" href="css/age.css">
</head>
<body>
<button class="btn" onclick="calc()">나이 계산하기</button>
<div id="result" class="show">(결과 값 표시)</div>
<script>
function calc() {
const currentYear = 2023;
let birthYear = prompt("태어난 연도를 입력하세요.", "YYYY");
let age = currentYear - birthYear + 1;
document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다.";
}
</script>
</body>
</html>
03-2 자료형 이해하기
자료형의 종류
| 자료형 | 설명 | |
| 기본형 | number(숫자) | 따옴표 없이 표기한 숫자 |
| string(문자열) | 작은따옴표(')나 큰따옴표(")로 묶어 나타냄 | |
| boolean(논리형) | 참(True)과 거짓(False)이란 두 가지 값만 가지고 있는 유형 | |
| undefined | 자료형을 지정하지 않았을 때의 유형. 예를 들어 변수를 선언만 하고 값을 정의하지 않으면 undefined | |
| null | 값이 유효하지 않을 때의 유형 | |
| 복합형 | array(배열) | 하나의 변수에 여러 값을 저장하는 유형 |
| object(객체) | 함수와 속성이 함께 포함된 유형 | |
자료형을 확인하는 방법 - typeof 연산자
숫자형 - 정수
자바스크립트에서 숫자는 정수와 실수로 나누어 구분
정수는 소수점 없는 숫자
숫자형 - 실수
실수는 소수점이 있는 숫자
주의) 자바스크립트에서는 0.1이나 0.2를 2진수로 변환해서 계산하는데 이 때 자릿수가 많은 소수로 변환되고, 그 상태에서 0.1과 0.2를 더하기 때문에 결과가 아래처럼 나옴
문자형
문자형(String)은 작은 따옴표나 큰따옴표로 묶은 자료
따옴표 안에 따옴표
논리형
논리형(Boolean)은 참(True)과 거짓(False)이라는 값을 표현하는 자료형
undefined와 null
undefined는 자료형이 정의되지 않았을 때의 상태. '처음부터 변수에 값이 할당되지 않았다'는 의미
null은 '처음에 할당된 값이 더는 유효하지 않음'을 의미
배열
배열은 하나의 변수에 여러 값을 저장하는 유형
배열의 특정 값을 가져올 때 사용하는 인덱스
객체
객체는 여러 자료를 중괄호({})로 묶을 수 있다. 키(Key)와 값(Value)을 콜론(:)을 사용하여 한 쌍으로 짝지어야 한다.
자바스크립트 자료형의 특징
변수를 선언할 때 변수의 자료형을 미리 지정해야 하는 강력한 자료형 체크(Strong Data Type Check)가 아니라 미리 지정하지 않는 느슨한 자료형 체크(Weak Data Type Check)임. 그래서 자바스크립트로 프로그램을 만들 때에는 변수에 의도한 값이 정확하게 들어갔는지 꼭 확인해야 함
cf. 타입스크립트는 자바스크립트에 '강한 유형(Strong Typing)'을 추가한 것
03-3 연산자 이해하기
프로그램 소개: 할인 가격 계산하기
기초 산술 연산자 간단히 살펴보기
| 분류 | 연산자 이름 | 기호 | 설명 |
| 사칙 연산자 | 더하기 | + | 두 값을 더한다. |
| 빼기 | - | 앞의 값에서 뒤의 값을 뺀다 | |
| 곱하기 | * | 두 값을 곱한다 | |
| 나누기 | / | 앞의 값을 뒤의 값으로 나눈다 | |
| 나머지 연산자 | 나머지 | % | 앞의 값을 뒤의 값으로 나눈 나머지 값을 구한다 |
| 증감 연산자 | 증가 | ++ | 변숫값을 1만큼 증가시킨다 |
| 감소 | -- | 변숫값을 1만큼 감소시킨다 |
연산자와 피연산자 구별하기
currentYear - birthYear + 1
연산자: -, +
피연산자: currentYear, birthYear, 1
사칙 연산자 이해하기
증감 연산자 이해하기
증감 연산자는 피연산자 뒤에 있을 때 전체 수식의 처리가 끝난 다음 적용된다. 반대로 앞에 있을 때는 전체 수식을 처리하기 전에 적용된다.
할인 가격 계산 프로그램 만들기 - 연산자 활용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>할인 가격 구하기</title>
<link rel="stylesheet" href="css/bargain.css">
</head>
<body>
<div id="contents">
<img src="images/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 = 10000;
var rate = 25;
document.querySelector("#showResult").innerHTML = "상품의 원래 가격은 " + originPrice + "원이고, 할인율은 " + rate + "%입니다.";
}
</script>
</body>
</html>
할인 가격 계산 프로그램 만들기 - 입력 상자에 입력한 값 받아 오기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>할인 가격 구하기</title>
<link rel="stylesheet" href="css/bargain.css">
</head>
<body>
<div id="contents">
<img src="images/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;
document.querySelector("#showResult").innerHTML = "상품의 원래 가격은 " + originPrice + "원이고, 할인율은 " + rate + "%입니다.";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>할인 가격 구하기</title>
<link rel="stylesheet" href="css/bargain.css">
</head>
<body>
<div id="contents">
<img src="images/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>
</html>
03-4 연산자 깊게 알아보기
할당 연산자 응용하기
더하기 연산자와 연결 연산자 구별하기
문자열을 더할 때는 +를 연결 연산자로 부름
문자형과 숫자형의 연산 이해하기
더하거나 뺄 때
곱하기와 나누기, 나머지를 구할 때
비교 연산자 알아보기
== 연산자는 문자형 자료와 숫자형 자료가 있을 때 자동으로 자료형을 변환하여 비교한다. 하지만 === 연산자는 두 자료형의 변환을 허용하지 않는다. 보통 === 연산자를 더 많이 사용한다.
문자끼리 비교하기 - 아스키 값
아스키 값이란 컴퓨터에서 문자형을 숫자형에 일대일 대응한 값을 의미한다. "A"의 아스키 값은 65, "a"의 아스키 값은 97
아스키 코드 테이블: theasciicode.com.ar
논리 연산자 알아보기
or 연산자 / and 연산자 / not 연산자
서로 다른 연산자를 계산하는 순서
다른 분류일 때 계산하는 순서
단항 연산자 -> 산술 연산자 -> 비교 연산자 -> 논리 연산자 -> 할당 연산자
같은 분류일 때 계산하는 순서
| 1st | 2nd | 3rd | 4th | 5th | 6th | 7th | |
| 단항 연산자 | ! | ++ | -- | ||||
| 산술 연산자 | * | / | % | + | - | ||
| 비교 연산자 | < | <= | > | >= | == | != | === |
| 논리 연산자 | && | || | |||||
| 할당 연산자 | = | += | -= | *= | /+ | %= |
마무리 실습: 혼자 힘으로 프로그램 완성하기
1. 나이 계산 프로그램
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>나이 계산하기</title>
<link rel="stylesheet" href="css/age.css">
</head>
<body>
<button class="btn" onclick="calc()">나이 계산하기</button>
<div id="result" class="show">(결과 값 표시)</div>
<script>
function calc() {
var currentYear, birthYear, age;
currentYear = 2023;
birthYear = prompt("태어난 연도를 입력하세요: ", "YYYY");
age = currentYear - birthYear + 1;
alert("당신의 나이는 " + age + "세 입니다.");
}
</script>
</body>
</html>
2. 할인 가격 계산 프로그램
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>할인 가격 구하기</title>
<link rel="stylesheet" href="css/bargain.css">
</head>
<body>
<div id="contents">
<img src="images/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;
if (originPrice > 0 && rate > 0) {
var savedPrice = originPrice * (rate / 100);
var resultPrice = originPrice - savedPrice;
}
document.querySelector('#showResult').innerHTML = " 상품의 원래 가격은 " + originPrice + "원이고, 할인율은 " + rate + "%입니다." + savedPrice + "원을 절약한 " + resultPrice + "원에 살 수 있습니다.";
}
</script>
</body>
</html>
'JavaScript > Do it! - 자바스크립트 기본' 카테고리의 다른 글
| [Do it! - 자바스크립트 기본] 02. 자바스크립트와 친해지기 (0) | 2023.03.09 |
|---|---|
| [Do it! - 자바스크립트 기본] 01. 안녕? 자바 스크립트! (0) | 2023.03.09 |
