02_javascript기초_변수처리하기

이번엔 자바스크립트 변수 처리하는 방법에 대해 알아봅시다.

자바스크립트에서 변수를 지정해주기 위해선 스크립트 내에서 변수를 지정해 주어야 합니다.

바디 영역에 var를 붙여서 변수 x와 y, sum에 값을 넣어 변수를 만들어 줍니다.

	<h3>자바스크립트 변수 처리하기</h3>
    <p id="p1"></p>
    <script type="text/javascript">
        // 변수 선언 및 정의하기
        var x; // 변수선언(메모리에 넣어놓기 위해서 선언을 해준다)
        var x = 10;  // 변수의 값을 넣어주는게 정의
        var y = 20;  // 변수에 = :할당연산자 (주소값을 할당해준다)
        var sum = x + y;
    </script>

 그리고 p1영역에서 실행이 되게끔 스크립트 영역 마지막줄에 문구를 추가해 줍니다.

        // p태그의 아이디가 p1인 곳에 위의 sum값 출력하기
        document.getElementById("p1").innerHTML = sum;

---

자바스크립트 변수 처리하기

---

이번엔 버튼을 이용하여 버튼을 클릭하면 p1아이디의 p태그에 x와y의 곱이 출력되도록 해주는 함수를 만들어 실행해 봅시다.

함수이름은  goMath로 만들어 봅시다.

바디영역에 버튼을 만들고, 헤더영역에 함수도 만들어 줍니다.

<button onclick="goMath()">곱</button>

 

    <script type="text/javascript">
        function goMath(){
            x = 10;
            y = 20;
            var sum = x * y;
            document.getElementById("p1").innerHTML = sum;
        }
    </script>

---

자바스크립트 변수 처리하기

---

 

이번에는 버튼을 클릭하면 1씩 증가되는 함수를 만들어 봅시다.

함수이름은 Addone으로 만들어 봅시다.

우선 바디영역에서 버튼을 만들고

<h3>버튼을 클릭하면 1씩 증가되는 함수 만들기</h3>
    <p id="p3">1씩 증가된 값은 이곳에 출력됨</p>
    <button onclick="AddOne()">1씩 증가시키기</button>

헤더영역 > 스크립트 영역에서 함수를 만들어 줍시다.

    <script>
        var num = 0;  // 전역변수
        function AddOne(){
            //var num = 0;  // 지역변수라서 함수가 끝나면 사라진다.
            num = num + 1;
            msg = "현재 count : ";
            document.getElementById("p3").innerHTML = msg + num;
        }
    </script>

num을 함수 영역 밖에서 생성을 해 주면 지역변수여서 함수가 끝나면 사라지기 때문에

함수 밖에 전역 변수로 num을 만들어 줍니다.

---

버튼을 클릭하면 1씩 증가되는 문서 만들기

1씩 증가된 값은 이곳에 출력됨

---

또 다른 방법으로는 ++라는 증가 연산자를  사용하는 방법도 있습니다.

    <script>
        var num = 0;  // 전역변수
        function AddOne(){
            //var num = 0;  // 지역변수라서 함수가 끝나면 사라진다.
            //num = num + 1;
            num++;
            msg = "현재 count : ";
            document.getElementById("p3").innerHTML = msg + num;
        }
    </script>

num = num + 1을 num++ 로 바꿔줍니다. 그리고 저장후 새로고침 실행해보면 똑같이 증가 하는걸 볼 수 있습니다