제어문이란 프로그램의 흐름을 제어할 수 있도록 도와주는 문장이다.
조건을 만족하는지의 여부에 따라 코드를 제어할 수 있는 조건문과 변수에 일치하는 경의 값에 따라 코드를 제어할
수 있는 선택문 그리고 특정 코드를 여러번 반복해서 실행할 수 있도록 하는 반복문이 있다.
조건문
조건식의 값이 true인지 false인지에 따라 자바스크립트 코드를 제어한다.
조건문의 종류에는 if문 else문 그리고 else if문이 있다.
if문
if문은 조건식을 만족할 경우에만 코드를 실행한다.
boolean과 마찬가지로 어떤 데이터를 입력해도 true 또는 false를 반환한다.
기본형은 자바와 같다.
기본형
if(조건식) {
자바스크립트 코드;
}var num=10;
if(num<500){ //true를 반환한다.
document.write("hello");
}위 예제에서 num<500 의 비교결과는 10<500이므로 true를 반환한다.
조건문 내에 적어 놓은 hello는 현재 조건이 만족하기 때문에 출력된다.
if(0){ //false를 반환한다.
document.write("hello");
}위 예제의 조건식에 있는 0은 boolean()메소드에 0을 입력했을 때와 결과가 같다.
그 결과 false를 반환하여 조건문 내의 코드를 실행하지 않는다.
다음 에제는 방문자로부터 입력받은 걸음 수를 조건문으로 만들고, 걸음 수가 10,000보 이상일 경우에만 결과를
출력한다.
<script>
var walkAmount = prompt("당신의 하루 걷는 양은 몇 보인가요?", "0");
if(walkAmount >= 10000){
document.write("매우 좋은 습관을 지니고 계시는군요!!","<br>");
}
document.write("==========The End==========");
</script>10,000보 이상일 경우에는 조건식에 true를 반환하여 { }안의 코드를 실행하지만 10,000보 미만일 경우에는
========The End=========를 출력한다.
조건식에 논리형 데이터가 아닌 다른 형이 오는 경우
조건식에 논리형데이터(ture,false)가 아닌 다른 형의 데이터가 입력되어도 true 또는 false로 인식된다.
다음 예제에서 방문자가 질의응답 창에 이름을 입력하지 않으면 기본 응답값인 빈문자("")가 변수에 저장되어
조건식에 false값이 반환되고 그 결과 문장이 출력되지 않는다.
<script>
var userName = prompt("방문자의 이름은?","");
if(userName){ //userName에 이름이 저장되면 중괄호 내의 코드가 실행.
document.write(userName+"님 반갑습니다! 방문을 환영합니다.");
}
</script>
else문
조건식을 만족할 경우와 만족하지 않을 경우에 따라 실행되는 코드가 달라진다.
즉, 두가지 결과가 나올 수 있다.
다음은 조건식의 만족 여부에 따라 실행되는 코드가 달라지는 else문의 기본형이다.
if(조건식){
자바스크립트코드1;
}else{
자바스크립트코드2;
}
<script>
var num = prompt("당신이 좋아하는 숫자는?","0");
if(num % 2 == 0){ //짝수일 경우에 실행
document.write("당신이 좋아하는 숫자는 짝수입니다.");
}else{
document.write("당신이 좋아하는 숫자는 홀수입니다.");
}
</script>
다음은 confirm객체를 사용하여 웹페이지에 회원 탈퇴 여부를 묻는 확인/취소 창이 나타나게 하고,
else 조건문으로 사용자가 확인 버튼을 눌렀을 때와 취소 버튼을 눌렀을 때 결과 화면이 다르게 나타나도록 할 것이다.
확인/취소 창은 confirm() 메소드를 사용한다.
확인 버튼은 true, 취소 버튼은 false를 반환한다.
기본형
confirm("message");
다음은 confirm() 메소드를 사용해 회원 탈퇴 여부를 묻는 창을 만드는 예제이다.
<script>
var result = confirm("정말로 회원을 탈퇴하시겠습니까?");
if(result){
document.write("탈퇴처리 되었습니다.");
}else{
document.write("탈퇴 취소 되었습니다.");
}
</script>else if문
else if문은 두가지 이상의 조건식과 정해놓은 조건을 만족하지 않았을 때 실행되는 코드로 이루어져 있다.
다음은 else if문의 기본형이다.
if(조건식1){
코드1;
}else if(조건식2){
코드2;
}else if(조건식3){
코드3;
}else if(조건식4){
코드4;
}else if(조건식5){
코드5;
}else{
코드 6;
}가장 위에 있는 조건식 1부터 5까지 차례로 조건 검사를 하면서 만족하는 값이 나오면 그에 해당하는 코드를 실행하고
조건문을 종료한다.
조건식 중 만족하는 값이 하나도 없으면 else문의 중괄호 { }에 있는 코드를 실행한다.
다음 예제는 질의응답 창을 이용하여 "현재는 몇월입니까"를 묻고 else if문을 사용해 현재 월에 해당하는 계절과
관련된 문구가 출력되도록 했다.
<script>
var mon = prompt("현재는 몇월입니까?","0");
if(mon >= 9 && mon <= 11){ //9-11
document.write("독서의 계절 가을이네요!!");
}else if(mon >= 6 && mon <= 8{ //6-8
document.write("여행가기 좋은 여름이네요!!");
}else if(mon >= 3 && mon <= 5{ //3-5
document.write("햇살 가득한 봄이네요!!");
}else{
document.write("스키의 계절 겨울이네요!!");
}
</script>중첩 if문
조건문 안에 조건문이 있는 것을 중첩 if문이라 한다.
기본형
if(조건식1){
if(조건식2){
자바스크립트코드;
}
}중첩 if문은 바깥쪽에 있는 조건문인 조건식 1을 만족해야만 안쪽에 있는 조건문인 조건식 2를 검사한다.
만일 안쪽 if문의 조건식 2를 만족하지 않으면 바깥쪽 조건문인 조건식1의 중괄호 안에 있는 코드만 실행하고
종료한다.
다음은 중첩 if문을 사용해 아이디와 비밀번호가 일치했을 때 환영문구가 출력되도록 작성한 예제이다.
<script>
var id="easy1004"; //아이디
var pw="112233"; //비밀번호
var user_id=prompt("아이디는?", "0"); //아이디입력
var user_pw=prompt("비밀번호는?", "0"); //비밀번호 입력
if(id == user_id){ //아이디가 일치하면 실행한다.
if(pw == user_pw){
document.write(user_id+"님 반갑습니다."); //비밀번호가 일치하면 실행한다.
}else{
alert("비밀번호가 일치하지 않습니다."); //비밀번호가 일치하지 않으면 실행한다.
loaction.reload(); //브라우저 새로고침
}
}else{
alert("아이디가 일치하지 않습니다"); //아이디가 일치하지 않으면 실행한다.
location.reload();
}
</script>반복문
while문
while문은 조건식을 만족할 때까지 코드를 여러 회 반복하여 실행할 수 있다.
다음은 while문의 기본형이다.
var 변수=초기값;
while(조건식){
자바스크립트코드;
증감식;
}while문의 실행 순서는 조건식을 검사하고 만족하면 중괄호 안에 있는 코드를 실행한다.
그리고 다시 조건식을 검사한다.
다음은 while문을 사용해 "안녕하세요1 ~ 안녕하세요10"까지 1씩 증가하면서 10회 출력하도록 작성한 예제이다.
<script>
var i = 1;
while(i<=10){
document.write("안녕하세요"+i, "<br>");
i++;
}
document.write("======The End======");
</script>
다음은 while문을 사용하여 1부터 30까지의 숫자 중 2의 배수이면서 6의 배수인 숫자만 출력하는 예제이다.
<script>
var i = 1;
while(i<=30){
if(i % 2 == 0 && i % 6 == 0){
document.write(i, "<br>");
}
i++;
}
</script>
다음은 20부터 10까지의 숫자 중 짝수일 경우에는 파란색으로 출력되고, 홀수일 경우에는 빨간색으로 출력되도록
작성한 예제이다.
<script>
var i = 20;
while(i>=10){
if(i % 2 == 0){
document.write("<p class='blue'>"+i+"</p>");
}else{
document.write("<p class='red'>"+i+"</p>");
}
i++;
}
</script>do while문
do while문은 반드시 한번은 코드를 실행하고 조건식을 검사한다.
다음은 do while문의 기본형이다. 중괄호에 있는 코드를 먼저 실행하고 조건식을 검사한다.
var 변수 = 초기값;
do{
자바스크립트코드;
증감식;
}while(조건식)다음은 do while문의 예제이다.
<script>
var i = 10;
do{
document.write("hello!");
}while(i<3)
</script>
do에 있는 hello를 먼저 출력하고 조건식을 검사한다. 조건식은 false이기 때문에 do while문이 종료된다.
for 문
for문은 조건식을 만족할 때까지 특정 코드를 반복하여 실행한다. while문과 사용방법은 같지만 while문보다
사용하기 편해 사용 빈도가 높은 편이다.
다음은 for문의 기본형이다.
for(초기값; 조건식; 증감식){
자바스크립트코드;
}다음은 for문으로 '반복1~반복 10'까지 i를 1씩 증가하며 출력한 예제이다.
<script>
for(var i = 1; i <= 10; i++){
document.write("반복"+i, "<br>");
}
</script>
다음은 1부터 100까지 5의 배수일 경우에는 빨간색글자, 7의 배수일 경우에는 초록색 글자 그리고 5의 배수이며
7의 배수일 경우에는 아쿠아색 글자로 출력하는 예제이다.
<script>
for(var i = 1; i <= 100; i++){
if(i % 5 == 0 && i % 7 != 0){
document.write("<p class='red'>"+i+"</P>");
}else if(i % 7 == 0 && i % 5 != 0){
document.write("<p class='green'>"+i+"</p>");
}else if(i % 7 == 0 && i % 5 == 0){
document.write("<p class='aqua'>"+i+"</P>");
}
}
</script>break 문
반복문에서 break문을 실행하면 조건식과 상관없이 강제로 반복문을 종료한다.
즉, break문은 반복문을 강제로 종료할 때 사용한다.
다음은 break문의 기본형이다.
break문이 코드보다 앞에있으므로 코드는 실행되지 않고 반복문이 바로 종료된다.
for(초기값; 조건식; 증감식){
break; <!--반복문을 강제로 종료한다.-->
자바스크립트코드;
}
var 변수 = 초기값;
while(조건식){
break;
자바스크립트코드;
증감식;
}다음은 1부터 10까지 반복하도록 작성한 예제이다. 그리고 break문을 사용하여 i의 값이 6일경우 강제로 종료한다.
<script>
for(var i = 1; i <= 10; i++){
if(i == 6) break;
document.write(i, "<br>");
}
document.write("=====The End=====");
</script>
continue문
continue문은 반복문에서만 사용할 수 있다. while문에 사용할 경우 continue문 다음에 오는 코드는 무시하고
바로 조건식으로 이동해 조건 검사를 한다. 즉, while문 안에 있는 continue문은 "다음에 오는 코드는 무시하고
조건식에서 조건 검사를 실행"하라고 하는 것이다.
for 문에서 continue문을 실행할 경우에는 continue문 다음에 오는 코드는 무시하고 바로 증감식으로 이동하여
증감연산을 실행한다. 즉, for 문 안에 있는 continue문은 "다음에 오는 코드는 무시하고 증감식을 바로 실행"
하라는 것이다.
continue문의 기본형은 다음과 같다.
for(초기값; 조건식; 증감식){
continue;
자바스크립트 코드;
}
var 변수 = 초기값;
while(조건식){
증감식;
continue;
자바스크립트 코드;
}다음은 for문을 이용해 1부터 10까지 i가 2의 배수일 경우에만 continue 문을 실행하여 홀수만 출력하는 예제이다.
<script>
for(var i = 1; i <= 10; i++){
if(i % 2 ==0)continue;
document.write(i, "<br>");
}
document.write("====The End====");
</script>
중첩 for문
for문 안에 for문을 사용한 것을 중첩 for문이라고 한다. 중첩 for문은 예를 들어 자바스크립트를 이용해 3행 5열의
표를 만든다고 할 때 1행씩 행이 만들어질 때 마다 5개의 열을 만들어야 할 경우에 사용한다.
중첩 for문의 기본형은 다음과 같다.
for(초기값; 조건식; 증감식){
for(초기값; 조건식; 증감식){
자바스크립트 코드;
}
}다음은 중첩 for문을 사용하여 1행 1열부터 3행 2열까지 출력하는 예제이다.
<script>
for(var i = 1; i<=3; i++){
for(var k=1; k<=2; k++){
document.write(i+"행"+k+"열", "<br>");
}
document.write("<br>");
}
</script>
(참고 : do it 자바스크립트+제이쿼리 입문)
'Java Script' 카테고리의 다른 글
| 객체(내장객체) (1) | 2020.05.19 |
|---|---|
| 연산자 (0) | 2020.05.17 |
| 변수 (0) | 2020.05.16 |
| 자바 스크립트 기초문법 (1) | 2020.05.16 |
| 자바스크립트 간단한 실행문 예제 (1) | 2020.05.16 |