1) 변수란?
📌 변수 : 데이터(값)을 한개 저장하는 공간을 의미
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트(JAVASCRIPT) 변수</title>
<script>
var num = 10;
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트(JAVASCRIPT) 변수</title>
<script>
var num = 10, str = '안녕하세요', price = 1000 + '원';
document.write(num + '<br>');
document.write(str + '<br>');
document.write(price + '<br>');
</script>
</head>
<body>
</body>
</html>
🖥️ 변수를 선언한 결과 ↓
- 변수 사용 이유의 예시
아래 예시는 오늘의 달러 환율이 1290원이라고 가정했을 때, 1~5달러를 환산해놓은 것이다.
<script>
console.log(1 * 1290);
console.log(2 * 1290);
console.log(3 * 1290);
console.log(4 * 1290);
console.log(5 * 1290);
</script>
근데 내일 달러가 1300원으로 오른다고 가정해보자.
그럼 1290이라고 적어놓은 것들을 모두 1300으로 바꿔야한다.
<script>
console.log(1 * 1300);
console.log(2 * 1300);
console.log(3 * 1300);
console.log(4 * 1300);
console.log(5 * 1300);
</script>
그렇다면 매일 확인하고 바꿔야하는데 굉장히 귀찮고 불편할 것이다.
만약 이것을 변수로 담았을 때,
<script>
var dollar = 1290;
console.log(1 * dollar);
console.log(2 * dollar);
console.log(3 * dollar);
console.log(4 * dollar);
console.log(5 * dollar);
</script>
dollar의 변수를 1290에서 1300으로 한번만 바꿔주면 된다 :)
<script>
var dollar = 1300;
console.log(1 * dollar);
console.log(2 * dollar);
console.log(3 * dollar);
console.log(4 * dollar);
console.log(5 * dollar);
</script>
- Prompt 함수로 환율계산기 만들기
📌 prompt함수 : 사용자가 값을 입력할 수 있는 창을 띄워주는 함수
✏️ prompt 함수를 추가한 환율계산기 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트(JAVASCRIPT) 변수</title>
<script>
var dollar = 1290;
var num = prompt('환전하실 달러를 입력하세요','정수입력');
alert('환전금액 : ' + (dollar * num) + '원');
</script>
</head>
<body>
</body>
</html>
🖥️ 환율계산기 결과