코드랩 레퍼런스

자바스크립트 - 변수 본문

JAVASCRIPT

자바스크립트 - 변수

webstoryboy 2018. 1. 17. 14:52
변수는 하나의 데이터를 처리하는 저장소 역할을 합니다. 변수는 프로그램을 작성하는 데 가장중요한 요소이므로 선언하는 방법과 이름 짓는 방법에 대해서 알아보도록 하겠습니다.
var 변수명 = 값;

Sample1 변수

10
200
javascript
210
2000
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sample2</title>
    <script type="text/javascript">
        var x = 10;     //변수 x에 10(숫자)를 저장함
        var y = 20;     //변수 y에 20(숫자)를 저장함
        var z = "javascript";   //변수 z에 javascript(문자)를 저장함
        y = 200;        //변수 y에 값이 20 -> 200 변경
        
        document.write(x);
        document.write("<br>");
        document.write(y);
        document.write("<br>");
        document.write(z);
        document.write("<br>");
        document.write(x+y);
        document.write("<br>");
        document.write(x*y);
    </script>
</head>
<body>
    
</body>
</html>     

변수는 사용 가능 범위에 따라 4가지로 구분됩니다.

지역 변수 : 특정 범위 안에서만 사용하는 경우
전역 변수 : 모든 영역 안에서 사용하는 경우
매개변수(파라미터) : 함수 외부에서 함수 내부로 데이터를 전달하기 위해 사용하는 경우
멤버변수(프로퍼티) : 클래스 내부에 만들어지며 주로 객체에서 사용하는 경우

Sample1 지역 변수 / 전역 변수

area 함수 안
x의 값 : 300
y의 값 : 600
z의 값 : 500

area 함수 밖
x의 값 : 100
y의 값 : 600
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sample3</title>
    <script type="text/javascript">
        var x = 100;        //변수(전역) x에 100을 저장
        var y = 200;        //변수(전역) y에 200을 저장
        
        function area(){
            var x = 300;        //변수(지역) x에 300을 저장      
            var z = 500;        //변수(지역) z에 500을 저장
            y = 600;            //변수(전역) y에 값을 200에서 600으로 변경
            
            document.write("area 함수 안");
            document.write("<br>");
            document.write("x의 값 : " + x);
            document.write("<br>");
            document.write("y의 값 : " + y);
            document.write("<br>");
            document.write("z의 값 : " + z);
            document.write("<br><br>");
        }
        
        area();
        document.write("area 함수 밖");
        document.write("<br>");
        document.write("x의 값 : " + x);
        document.write("<br>");
        document.write("y의 값 : " + y);
        document.write("<br>");
        document.write("z의 값 : " + z);

    </script>
</head>
<body>
    
</body>
</html>     

Sample2 매개 변수

javascript
jquery
html
css
javascript + jquery
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sample4</title>
    <script>
        //화면에 "javascript" 문자를 출력해주세요.
		document.write("javascript");
		document.write("<br>");
        
        //변수를 이용해서 화면에 "jquery" 문자를 출력해주세요.
		var str = "jquery";
		document.write(str);
		document.write("<br>");
        
        //함수를 이용해서 화면에 "HTML" 문자를 출력해주세요.
		function str1(){
			document.write("html");
			document.write("<br>");
		}
		str1();
        
        //매개 변수를 이용해서 화면에 "CSS" 문자를 출력해주세요.
		function str2(num){
			document.write(num);
			document.write("<br>");
		}
		str2("css");
        
        //매개 변수를 이용해서 화면에 "javascript" + "jquery"를 출력하세요.
		function str3(num1, num2){
			document.write(num1," + " + num2);
			document.write("<br>");
		}
		str3("javascript","jquery");
    </script>
</head>
<body>
    
</body>
</html>     

Ad

Comments