JavaScript

2-1 변수

리버윤 2023. 6. 10. 21:15
728x90
  • 먼저, 자바스크립트에서 변수는 변하는 값을 저장하기 위한 공간이라 할 수 있다.
    • 예를 들어 두 수의 합을 계산하여 결과 출력하는 프로그램을 만들 때 사용자가 입력하는 두 수가 매번 같지 않을테니 이럴때 상황에 따라 다른 값을 입력 받아야할 경우 변수를 사용한다.
  • 상수, 변수란?
    • 변하지 않는 값을 상수(Constant)라고 한다.
    • 상황에 따라 변할 수 있는 값을 변수(Variable)라고 한다.
변수를 선언하는 규칙
  1.  변수의 이름은 의미가 나타나도록 지어야한다. - 의미를 나타내고 가독성이 좋도록 명확하고 간결하게 정하는 것이 좋다. 코드를 이해하고 기억하기 쉬워진다.
  2.  변수의 이름은 낙타 표기법(camel case)으로 작성해야한다. - 낙타 표기법이란 여러 단어로 이루어진 변수 이름을 작성할 때 첫번째 단어를 소문자로 시작하고 이후 단어들의 첫 글자를 대문자로 쓰는 것이다. 낙타 표기법을 쓰지 않는다고 프로그램에 영향을 주지는 않지만 가독성이 좋을 뿐만아니라 개발자들은 대부분 낙타 표기법을 사용하니 낙타 표기법을 사용하는 것이 좋다.
  3. 변수 이름은 유효한 식별자여야 한다. -  변수 이름은 문자, 숫자, 밑줄(_) 또는 달러 기호($)로 시작해야 하며, 그 후에도 동일한 종류의 문자와 숫자를 포함할 수 있다. 변수 이름은 공백이나 특수 문자를 포함해서는 안된다.
    • 예를 들어, myName, _count, totalAmount와 같은 변수 이름은 유효한 식별자이고 1name, .age, #year 이러한 변수 이름은 사용할 수 없다.
변수에 값, 식 저장
  • 변수에 값을 저장하는 방법은 두가지로 나뉜다.
    1. 변수를 선언하면서 저장하는 방법 
var dog = "woof";

           2. 변수를 선언한 다음에 값을 저장하는 방법

var cat;
cat = "meow";

 

  • 변수에 식을 저장할 경우에 식에 들어있는 변수는 미리 선언해 두어야한다.
var dog = 3;
var cat = 4;
var total = dog + cat;

 

과목 평균 계산 프로그램 만들기

1-1. 변수 선언 - </body>태그 앞에 <script>를 열어 변수를 저장해준다.

<!DOCTYPE html>
<html lang="kr">
<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>Document</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 kor = 97; //국어 과목 점수를 저장할 변수
            var eng = 50; //영어 과목 점수를 저장할 변수
            var tot = kor + eng; //두 과목 합계를 저장할 변수
            var avg; //계산한 평균 점수를 저장할 변수
    </script>
</body>
</html>

1-2. 평균을 구하는 식을 적어준다.

<script>
   function calc() {
       var kor = 97;
       var eng = 50;
       var tot = kor + eng;
       var avg;
       avg = tot / 2; //두 과목 합계에서 2로 나누어 avg에 저장
</script>

1-3. avg에 저장된 값이 크롬 브라우저에 나타나도록 아래 소스 코드를 넣어준다.

document.querySelector("#result").innerHTML = "두 과목의 평균은 "+avg+"입니다.";

document.querySelector("#result").innerHTML는 DOM(Document Object Model)을 사용하여 HTML 문서에서 특정 요소를 선택하고, 해당 요소의 내용을 가져오거나 변경하는 코드이다. 구체적인건 나중에..

 

이렇게 만들어 실행해보면.. 두 과목 평균 구하기 버튼을 누르면 avg에 저장된 값이 출력되게 된다.

 

2-1. 조금 더 나아가 사용자 입력값을 변수에 할당해보기

2023.06.09 - [JavaScript] - 1-1 자바스크립트 코드 작성, 실행

 

1-1 자바스크립트 코드 작성, 실행

html문서에 자바스크립트 작성하는 방법 실행 결과 2. 외부 스크립트 파일 연결하는 방법 js폴더 생성 후 Ctrl+N 눌러 새 문서 만들기 Ctrl+S 눌러 제목을 gifok.js로 설정 후 js폴더 안에 저장 색깔 바꾸

river-yun28.tistory.com

위의 게시글에서 알아보았던 prompt()함수를 이용할 것인데 prompt()함수는 사용자가 값을 입력할 수 있는 함수이다.

 

2-2 kor, eng에 할당했던 값을 지우고 prompt()함수를 넣어준다.

<!DOCTYPE html>
<html lang="kr">
<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>Document</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 kor = parseFloat(prompt("첫번째 과목의 점수를 입력하세요."));
            var eng = parseFloat(prompt("두번째 과목의 점수를 입력하세요."));
            var tot = kor + eng;
            var avg = tot / 2.0;
            document.querySelector("#result").innerHTML = "두 과목의 평균은 " + avg + "입니다.";
        }
    </script>
</body>
</html>

(*여기에서 prompt() 함수를 통해 입력받은 값은 문자열로 반환되기 때문에, 숫자로 변환해주지 않고 그대로 연산을 하기 때문에 계산 중 문제가 발생한다. 따라서 입력받은 점수를 숫자로 변환해주어야 한다.

 parseFloat() 함수를 사용하여 입력받은 문자열을 부동 소수점 숫자로 변환한다. 이렇게 하면 입력된 점수를 숫자로 인식하여 올바른 결과를 계산할 수 있게된다.)

728x90