3.4 switch … case 문
switch … case문은 변수의 값에 따라 각각의 처리를 달리해야 할 경우에 if … else if … else 문의 형태로도 구현이 가능하지만 코드의 가독성이 떨어지고 복잡한 면이 없지 않아 이에 대한 대안으로 유용하게 사용할 수 있는 구문으로 다음과 같은 형식을 사용합니다.
switch 표현식 {
case 값1 : 실행할
코드1; break;
case 값2 : 실행할
코드2; break;
…
default : 실행할 코드;
}
위에서 표현식에는
일반적으로 변수가 들어갑니다. 그리고 case 다음에 이어지는
값1, 값2 … 에는 표현식에 나타난 변수에 저장된 값과
비교할 값을 설정합니다. 문자열(string)의 형태는 이중
따옴표를 이용하여 “값1”, “값2”의 형태로 나타내고 숫자형의 경우는 11, 12.5와 같이 이중
따옴표없이 표기해주면 됩니다. 그리고 위에서 break 키워드는
해당 switch … case 구문 블록을 빠져나갈 때 사용하며
while문이나 for문에서는 특정 조건에 의해 반복을 중단하고 해당 블록을 빠져나갈 때
사용합니다.
이제 메모장을 열어서 하나의 변수의 값을 이용하여 어떻게 switch … case문을 사용할
수 있는지 알아봅니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>switch ... case 예제</title>
<script type="text/javascript">
var yourName = "김소월";
switch (yourName)
{
case "김소월": document.write("김소월님! 안녕하세요."); break;
case "윤동주": document.write("윤동주님! 시가
너무 아름답습니다."); break;
case "신석정": document.write("신석정님의 시는 너무 서정적이에요."); break;
default: document.write("만나서
반가워요!");
}
</script>
</head>
<body>
</body>
</html>
우리와 같이
문자열 변수 yourName에 “김소월”이라는 값을 저장한 후 switch문의 표현식에 yourName을 대입하고 이 yourName에 저장되어 있는 값과 case 문들을 비교하여 해당 문자열과 같은 문자열이 명시된 case문의
실행할 코드를 실행하고 switch … case 문을 빠져나가게 됩니다.
switchcaseEx.html 로 저장한 후 IE9를 통해 확인해보면 yourName에 저장된 값이 “김소월”이고 switch … case 문 안에 첫 번째 case문의 비교할 값이 “김소월”로
같으므로 “김소월님! 안녕하세요.”라는 문자열을 다음과 같이 나타냅니다.
3.5 for 문
for문은 특정 조건에 맞는 동안 초기화된 값으로부터 시작해서 증감하며 반복하는데 사용하는 구문으로
여러분이 다른 언어들을 사용해보았다면 쉽게 이해할 수 있는 구문으로 다음과 같은 형식을 사용합니다.
for (초기식 ; 조건식 ; 증감식)
{
실행할 코드들;
}
위에서 초기식은 반복을 시작하는 시점에서 변수의 초기화할 때 사용합니다. 예를 들어 변수 i가 존재할 때 반복을 i가 0일 때부터 시작한다고 하면 초기식은 i=0이 되는 것입니다.
다음으로 조건식은 반복문이 언제까지 반복될 것인가를 나타내는 식으로 앞서 초기식이 반복의 시작을 의미한다면 조건식은 반복의 종료의
조건을 의미한다고 보면 됩니다. 마지막으로 증감식은 얼마씩 증가시키거나 감소시킬 것인가를 나타내는 식으로 1씩 증가한다면 i++, 1씩 감소한다면 i--와 같이 사용할 수 있습니다.
예를 들어 1부터
10까지 화면에 나타내고자 한다면 다음과 같이 간단하게 처리할 수 있습니다.
<script
type="text/javascript">
var startValue=1;
for(startValue; startValue<=10;
startValue++)
document.write(startValue);
</script>
startValue라는 변수를
선언하면서 1로 그 값을 초기화하고 for문에서 초기식은 startValue로 설정하였고 얼마 동안 반복할 것인가를 나타내는 조건식에는
1부터 10까지 반복할 것이므로 위와 같이
startValue<=10의 형태로 작성합니다.
마지막으로 1씩 증가하면서 나타낼 것이므로
startValue++ 형태로 나타내면 다음과 같이 1부터 10까지 반복하면서 화면에 표시합니다.
3.6 for … in 문
for … in 문은 for문과 유사하지만 대개 배열(array)이나 object 같은 Javascript 객체와 함께 사용되는 구문으로 for문에서처럼 조건식에 의해서 반복하는 것이 아니라 객체의 속성에 의해서 반복되는 구문으로 다음과 같은 형식을
따릅니다.
for ( var 변수 in object)
{
실행할 코드들;
}
위에서 변수는
임의의 이름으로 정해주면 되며 in 다음의 object에는 array이나 객체(object)가 오게 됩니다. 그래서 자동적으로 객체에 저장되어 있는 데이터를 반복하며 객체에 저장되어 있는 값에 접근할 수 있게 됩니다. 이제 메모장을 열어서 다음과 같이 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>for ... in 예제</title>
<script type="text/javascript">
var student={name:"김덕훈", student_number:"20080912",
age:24};
for (info in student)
{
document.write(student[info] +
" ");
}
</script>
</head>
<body>
</body>
</html>
"forinEx.html"로 저장하고 IE9를 통해 보면 다음과 같이 student 변수에 저장되어 있는 값들을 화면에 나타냅니다.
3.7 while문
while문은 if문과 형식이 유사합니다만 if문은 반복기능이 없는 반면에 while문은 조건식이 참(True)인 동안 블록 내에 정의한 코드들을
반복 실행합니다. 사용형식은 다음과 같습니다.
while (조건식)
{
실행할 코드들;
}
보통 while 문을 설명할 때 while문을 이용하여 1부터 10까지의 합을 구하는 형태로 예를 들어서 설명하곤 하는데
이번에는 조금 다르게 Javascript의 Date 객체(object)를 이용하여 현재의 날짜를 “월/일/년” 형태로 5번 출력하는 예제를 해봅니다.
메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>while 예제</title>
<script
type="text/javascript">
var yourDate = new Date(); //Date 객체 생성
var curr_date = yourDate.getDate(); //현재 날짜
var curr_month = yourDate.getMonth(); //현재 월(month)
curr_month++; //내부적으로 월이 0부터 시작하므로
var curr_year =
yourDate.getFullYear(); //현재 년도
var count =1;
while(count <6) {
document.write(curr_month +
"/" + curr_date + "/" + curr_year+"<br
/>");
count++;
}
</script>
</head>
<body>
</body>
</html>
위와 같이 작성한
후 “whileEx.html”로 저장한 후 IE9를 통해
보면 다음과 같이 현재 날짜를 “월/일/년” 형태로 5번 출력합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 4.3 다른 함수로부터 함수 호출 (0) | 2013.08.06 |
|---|---|
| 4. 함수(Function) (0) | 2013.08.06 |
| 3. 흐름 제어(Flow Control) (0) | 2013.08.06 |
| 2.8 변환(Conversion) (0) | 2013.08.06 |
| 2. 연산자(Operators)와 변환(Convert) (0) | 2013.08.06 |