[JS] 03. 변수

Kang So Hyun·2023년 4월 1일
0

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>

🖥️ 환율계산기 결과

profile
중국어랑 코딩하기 (❛ ֊ ❛„)

0개의 댓글