3. 흐름 제어(Flow Control)
다른 프로그래밍
언어와 마찬가지로 Javascript도 스크립트를 작성하면서 필요에 따라 조건에 맞는 처리가 필요하거나
반복적으로 처리해야 할 필요성이 대두됩니다.
그래서 이러한 상황들에 맞게 사용할 수 있도록 크게 if문, switch … case문과 같은 조건문과 for, for … in문, while문 같은 반복문들을 제공합니다.
3.1 if문
만일 여러분이 특정 조건이 참(true)일 경우에만
특정 코드를 실행해야 할 경우에는 다음과 같이 가장 단순한 단일 if문의 형식을 사용할 수 있습니다.
if (조건식) {
조건식이 참(true)일
때 처리해 줄 코드;
}
위에서 조건식의 결과가 참(true)이면 처리해 줄 코드를 실행하고 거짓(false)일 경우에는 처리해 줄 코드를 생략하는 형태입니다.
<script
type="text/javascript">
var student_name="김덕훈";
if(student_name=="김덕훈")
document.write("학생이름은 "+student_name);
</script>
위 코드에서 보는 것처럼 student_name 변수를 선언하고 그 값을 “김덕훈”으로 초기화한 후 if문의
조건식에서 student_name 변수에 저장된 값이 “김덕훈”이면 write() 메서드를 이용하여 화면에 나타내도록 한 것으로 student_name 변수에 저장된 값이 “김덕훈”이므로 조건식이 참(true)이 되어 브라우저에 “학생이름은 김덕훈”과 같이 나타냅니다.
3.2 if … else 문
if … else 문은 if문이 단순히 조건식이 참(true)일 경우에만 처리해 줄 코드를 실행했는데 조건식이 참이 아닐 경우에도 특정 코드를 실행해야 할 필요성이 있을 때 사용하는 구문으로 다음과 같은 형식을 사용합니다.
if (조건식) {
조건식이 참(true)일
때 처리해 줄 코드;
}
else {
조건식이 거짓(false)일
때 처리해 줄 코드;
}
방금 전 if문에서 사용된 예제는 student_name 변수에 저장된 값이 “김덕훈”이고 조건식에서도 “김덕훈”인지를 체크하는 조건식이라 참(true)이 되어 브라우저에 “학생이름은 김덕훈”과 같이 나타내었는데 조건식에서 “김덕훈”이 아닌 다른 데이터가 설정되면 웹브라우저에 아무것도 나타내지 않게 됩니다. 그러므로 “김덕훈”이 아닐 경우 만일 “김덕훈이 아닙니다.”라고 웹브라우저에 표시도록 하려면 if … else문을 이용하여 다음과 같이 코드를 작성해주면 됩니다.
<script
type="text/javascript">
var student_name="김덕훈";
if(student_name=="노주형")
document.write("학생이름은 "+student_name);
else
document.write("김덕훈이 아닙니다.");
</script>
3.3 if … else if … else 문
이제 조금 더 복잡한 구조를 볼까요? 여러 개의 조건식을 이용한 if … else if … else 문이며 다음과 같은 형식을 이용합니다.
if (조건식1) {
조건식1이 참(true)일 때 처리해 줄 코드;
}
else if (조건식2){
조건식1이 거짓(false)이고 조건식2가 참(true)일
때 처리해 줄 코드;
}
else {
조건식1, 조건식2 모두 거짓(false)일 때 처리해 줄 코드;
}
위 형식에서
조건식이 2개 있을 경우를 나타낸 것으로 만일 조건식이 3개일
경우에는 위 형식에서 else { … } 블록 위에 else if (조건식3) { … } 형태로 코드를 추가해서 작성해주면 됩니다.
메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>if … else if … else 예제</title>
<script
type="text/javascript">
var student_name = prompt("이름을 입력해주세요.");
if(student_name=="김덕훈")
document.write("학생이름은 "+student_name);
else if (student_name=="노주형")
document.write("학생이름은 노주형입니다.");
else
document.write("누군지 모릅니다.");
</script>
</head>
<body>
</body>
</html>
위 코드에서 prompt() 함수를 이용하여 사용자로부터 데이터를 입력받도록 합니다. 그
다음 첫 번째 조건식에서 prompt() 함수를 이용하여 입력된 데이터가 “김덕훈”인지 비교하여 참이면 “학생이름은~”의 코드를 실행하고 거짓이면 else if (조건식2)로 이동하여 조건을 비교하여 “노주형”이면
“학생이름은 노주형입니다.”를 나타내고 거짓이면 else로
이동하여 “누군지 모릅니다.”를 브라우저에 나타내게 됩니다. “ifelseifelseEx.html”로 저장하고 IE9를 통해
열어보면 화면하단에 보안 경고가 뜨는데 “차단된 컨텐츠 허용”을
클릭하면 다음과 같은 Explorer 사용자 프롬프트창이 나타나며
undefined로 되어 있는 부분에 “김덕훈”, “노주형”, 기타 데이터를 입력하면 위 코드에서 정의된 조건식에 따라서 처리결과를 브라우저에 나타냅니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 4. 함수(Function) (0) | 2013.08.06 |
|---|---|
| 3.4 switch … case 문 (0) | 2013.08.06 |
| 2.8 변환(Conversion) (0) | 2013.08.06 |
| 2. 연산자(Operators)와 변환(Convert) (0) | 2013.08.06 |
| 1.2 변수(Variable) (0) | 2013.08.06 |