1.2 변수(Variable)
여러분들은 방금 전 문자열 데이터, 숫자 데이터, 참, 거짓 같은 데이터에 대해서 어떤 데이터 타입으로 해당 데이터들을
나타낼 수 있는지 보았습니다. 이러한 데이터들은 실제로 변수(variable)를
선언하고 선언된 변수에 값을 설정하여 사용합니다.
변수의 선언과 값 설정
Javascript에서 변수의 선언은 var 키워드를 이용하여 다음과 같이 변수를 선언하고
값을 설정합니다.
var 변수이름 = 값 ;
위와 같이 var 키워드를 이용하여 원하는 변수이름을
선언하고 선언된 변수에 값을 설정해주면 변수 선언 및 값 설정은 완료됩니다. 여기서 선언된 변수의 데이터
타입은 어떻게 되는지에 대한
궁금한 점이 하나 생길 것입니다. Javascript는 동적으로 데이터 타입이 정해지는
언어이므로 위와 같이 선언해주면 스크립트가 실행될 때 자동적으로 필요에 따라서 적용되게 됩니다.
참고로 JavaScript는 대, 소문자를 구분하기
때문에 변수이름을 명시할 때는 이점을 기억하고 변수이름을 사용하기 바랍니다. 예를 들어 var Client_ip; var client_ip; var client_IP; 이 3개의 변수는 모두 다른 변수들이라는 것입니다.
JavaScript에서 제공하는 prompt() 메서드를 이용하여 여러분이 입력된 데이터를
변수에 저장하는 예제를 하나 해보도록 합니다. 먼저 prompt() 메서드는
다음과 같은 형식을 이용합니다.
Prompt(“나타낼 문자열”, “기본값”)
위와 같은 prompt() 메서드의 반환값은 사용자가 취소(cancel) 버튼을 클릭하면 null을 반환하고 확인(OK) 버튼을 클릭하면 입력된 문자열이 반환됩니다. 이제 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>variable 예제</title>
<script type="text/javascript">
var InputedData = prompt("이름을 입력하세요.",
"");
if(InputedData != null)
document.write("입력된 데이터 : " + InputedData);
else
document.write("입력된 데이터 : " + "null");
</script>
</head>
<body>
</body>
</html>
prompt() 메서드를 통해
반환된 값을 InputedData 변수에 값을 저장합니다.
다음으로 if(InputedData != null) 부분에서 “!=” 는 InputedData 가 null이 아닌지를 비교하는 연산자입니다. 그래서 InputedData 가 null이 아니라면 “document.write("입력된 데이터 : " +
InputedData);”을 실행하라는 의미이며 만일 null일 경우는 “document.write("입력된 데이터 : " +
"null");”을 실행하는 것으로 여기서 사용된 if … else 문은
흐름 제어문에서 자세하게 설명합니다.
이제 “variableEx.html”로 저장하고 IE9로
열어보면 다음과 같이 prompt() 메서드에 의해서 다음과 같이
Explorer 사용자 프롬프트 창이 나타납니다.
여기서 먼저 옆에 취소 버튼을 클릭합니다. 그러면 다음과 같이 prompt() 메서드에 의해서 반환되는 값이 null이 되어 if … else 문에서 else 문에 다음에 이어지는 코드가 실행되어 나타납니다.
다시 새로 고침(F5)를 클릭하여 나타난 Explorer 사용자 프롬프트 창이 다음과 같이 입력하고 확인 버튼을 클릭합니다.
그러면 prompt() 메서드에 의해서 반환되는 값이
“체르니”가 되므로
if(InputedData != null) 부분에서 InputedData가 null 값을 갖지 않으므로 다음과 같은 결과를 나타냅니다.
변수의 적용
범위
일단 var 키워드를 이용하여 변수가 선언되고 값이
할당되면 해당 블록 내에서만 유효합니다. 뒤에서 나오겠지만 함수(function)
내에서 선언된 변수는 해당 함수 내에서만 유효하게 동작하고 함수 밖을 벗어나면 함수 내에 정의된 변수는 올바른 동작을 하지 않습니다. 메모장을 열어서 다음과 같이 코드를 작성해볼까요?
<!DOCTYPE HTML>
<html>
<head>
<title>variable scope 예제</title>
<script
type="text/javascript">
var Message = "안녕하세요.";
function greeting() {
var inMessage="여러분";
alert("greeting 함수 내에서 " + Message+"\t"+inMessage);
}
function hello() {
alert("hello 함수 내에서 "+ Message+"\t");
}
</script>
</head>
<body>
<button type="button"
onclick="greeting()">내부 함수에서</button>
<button type="button"
onclick="hello()">외부 함수에서</button>
</body>
</html>
위에서 <script> …
</script> 블록 내에 var 키워드를 이용하여 Message 라는 변수를 선언하고 해당 변수에 “안녕하세요.”라는 문자열(string) 데이터를 저장합니다. 그리고 바로 이어서 greeting() 함수 내에서 inMessage라는 변수에 “여러분” 이라는 문자열 데이터를 저장하고 alert() 함수를 이용하여 알림창을
띄워 "greeting 함수 내에서 "에
이어서 Message, inMessage 변수에 저장된 값을 나타내도록 하며 hello() 함수에서는 알림창을 띄워 “hello 함수 내에서 ”에 이어서 Message 변수에 저장된 값을 나타내도록 합니다.
다음으로 <body> … </body> 블록에서 button 요소(element) 2개를 이용하여 페이지가 로드된
후 각 버튼을 클릭하면 <script>…</script> 블록 안에 정의된 해당
함수들이 호출되도록 이벤트와 함수를 명시합니다. 작성이 끝났으면 “variableScope.html”로
저장합니다.
IE9를 이용 “http://localhost/ variableScope.html”형태로
입력하고 보면 다음과 같이 나타납니다.
먼저 내부 함수에서 버튼을 클릭하면 greeting() 함수를
호출하여 함수 내에 정의된 코드대로 실행되어 다음과 같이 나타냅니다.
확인 버튼을 클릭하여 알림창을 닫은 후 외부 함수에서 버튼을 클릭하면 hello() 함수가 호출되어 다음과 같이 나타냅니다.
이제 코드로 돌아가서 <script>…</script>
블록 내 hello() 함수 코드를 다음과 같이 greeting()
함수 내에 선언된 inMessage 변수에 저장되어 있는데 데이터를 표시하도록 수정합니다.
function hello() {
alert("hello 함수 내에서 "+
Message+"\t"+inMessage);
}
저장하고 다시 IE9를 이용 “http://localhost/
variableScope.html”형태로 입력하고 로드한 후 내부 함수에서 버튼을 클릭하면 조금 전과 동일한 결과를 나타냅니다. 다음으로 외부 함수에서 버튼을 클릭하면 조금 전과는 달리 아무런 알림창도 나타내지 않는데 그 이유는 방금 전
추가한 코드에서 inMessage가 선언되어 있지 않기 때문에 에러가 발생하여 결과를 나타내지 못하는
것입니다.
만일 조금 전과 동일한 결과를 얻고자 한다면 hello() 함수 내에 다음과 같이 inMessage 변수를 선언하여 주면 됩니다.
function
hello() {
var inMessage=”여러분”;
alert("hello 함수 내에서 "+ Message+"\t"+inMessage);
}
정리하면 이번 예제를 통해 하나의 함수 내에 정의된 변수는 해당 변수 내에서만 유효하게 동작하고
해당 함수 블록 밖에서는 동작하지 않음을 알 수 있는데 이렇게 하나의 블록 내에 정의된 변수를 지역 변수(local
variable)이라고 부릅니다.
그리고 greeting(), hello() 함수 밖에 정의된 Message 변수는 각각의 함수 내, 외부에서 유효하게 동작하므로
전역 변수(global variable)이라고 부른다는 점도 잘 알아두시길 바랍니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 2.8 변환(Conversion) (0) | 2013.08.06 |
|---|---|
| 2. 연산자(Operators)와 변환(Convert) (0) | 2013.08.06 |
| 1. JavaScript의 데이터 타입, 변수 (0) | 2013.08.06 |
| JavaScript (1) | 2013.08.06 |
| 8.2 내부 여백인 padding, 경계(border), 그리고 외부여백(margin) (0) | 2013.08.04 |