코드랩 레퍼런스
자바스크립트 - 변수 본문
변수의 선언
Sample1 변수
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 지역 변수 / 전역 변수
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 매개 변수
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>