제어문 이란?
제어문은 프로그램의 흐름을 제어 할 수 있도록 도와주는 문장을 말한다.
제어문에는 조건식에 만족여부에 따라 코드를 제어하는 '조건문'과 '변수'의 일치에 따라 코드를 제어하는 '선택문'
특정 코드를 원하는 횟수만큼 반복 실행하는 '반복문'이 있다.
if
if문은 조건식의 만족 여부에 따라 코드를 제어하는 '조건문'이다.
if문에 쓰이는 조건식은 앞에서 배웠던 Boolean 데이터와 마찬가지로 true 또는 false 값을 반환한다.
계산 순서는 아래와 같다.
| 조건식 검사 | 1-1 | 조건식 결과 값 true | 2-1 | {중괄호} 안의 코드 실행 | 종료 |
| 1-2 | 조건식 결과 값 false | 2-2 | - |
먼저 조건식을 검사하고, 조건식을 만족(true)할 경우 {중괄호} 안의 코드를 실행 후 종료한다.
만약, 조건식을 불만족(false) 한다면 {중괄호}안의 코드를 실행하지 않고 그냥 종료한다.
//기본형
if(조건식){ 조건식을 만족했을 경우 실행할 코드; }if 문은 Boolean 데이터와 같이 true / false 값을 반환하기 때문에 조건식에 빈 데이터가 들어갈 경우 false값을 반환한다.
반대로 어떠한 문자값이 들어가도 true 값이 반환되며,
조건식이 들어갈 경우 맞을 경우엔 true 틀릴 경우는 false값이 반환된다.
//예시
var a = 10;
var b = 3;
if (a > b) {
document.write("a는 b보다 큽니다.");
}
// 논리연산자
Boolean(0); // false
Boolean("하이"); //true
if ("하이") {
document.write("문자형 데이터는 결과값이 나옵니다.");
}
if (0) {
document.write("숫자0은 결과값이 안나옵니다.");
}
if ("0") {
document.write("문자형데이터 0은 결과값이 나옵니다.");
}
if (true) {
document.write("ture는 결과값이 나옵니다.");
}
if (false) {
document.write("false는 결과값이 안나옵니다.");
}
if ("") {
document.write("빈문자는 결과값이 안나옵니다.", "<br/>");
}else
else는 if 문의 조건식이 만족하지 않았을 경우 코드를 실행하는 문장이다.
if 문과 함께 쓰이기 때문에 if 문이 반드시 필요하다.
// 기본형
if(조건식){
조건식이 만족했을 경우 실행할 코드;
} else {
조건식을 만족하지 못했을 경우 실행할 코드;
}※ 문제1
: 사용자에게 하루 통화량이 얼마나 되는지 묻고 60분 이상이면 "많이 통화하는 편이네요." 라고 화면에 출력하기.
var dailyCallingTime = prompt("하루 통화량이 몇분 정도 되시나요?");
if (dailyCallingTime >= 60) {
document.write("많이 통화하는 편이시네요!");
} else {
document.write("적게 통화하시는 편이네요!");
}※ 문제2
: 사용자에게 좋아하는 숫자를 물어보고 입력한 숫자가 짝수인지 홀수인지 알려주기.
수를 2로 나눴을 경우 나머지 값이 0일 때 짝수인 것을 알고 있다면 다음과 같이 쓸 수 있다.
if 문에 변수값을 2나누고 나머지값이 0일 때(=짝수) 중괄호 안의 코드를 출력하면,
else 값은 자동 적으로 홀수만 남아 중괄호안의 코드를 출력한다.
var numbeer = prompt("당신이 좋아하는 숫자는?", "0");
if (number % 2 == 0) {
document.write("당신이 좋아하는 숫자는 짝수네요.");
}
else {
document.write("당신이 좋아하는 숫자는 홀수네요.");
}else if
else if()문은 두 가지 이상의 조건식과 정해놓은 조건을 만족하지 않았을 경우 실행되는 코드로 이루어져있다.
else if문은 가장 위에 있는 조건식부터 마지막 조건식 까지 차례로 검사하면서 만족하는 값을 찾는다.
검사 후 만족하는 값이 나오면 그에 해당하는 코드를 실행한 뒤 조건문을 종료하고,
만족하는 값이 없다면 else문의 코드를 실행하고 종료한다.
// 기본형
if(조건식1){ 조건식1이 만족하면 실행할 코드; }
else if(조건식2){ 조건식2가 만족하면 실행할 코드; }
else if(조건식3){ 조건식3가 만족하면 실행할 코드; }
...
else { 모든 조건이 만족하지 않았을 경우 실행할 코드; }※문제
: 사용자에게 몇월에 태웠났는지를 물어보고, 태어난 월에 맞는 계절을 대답하기.
먼저 mon 이라는 변수에 사용자가 태어난 월을 담는다.
그리고 if 문과 else if 문을 총 4개를 만들어 각각의 조건식에 봄,여름,가을,겨울에 해당하는 달을 넣는다.
봄같은 경우는 mon이 3보다 크거나 같고 5보단 작거나 같다고 입력하면 3월, 4월, 5월달이 이에 해당하게 된다.
만약 사용자가 봄에 해당하는 달을 입력했다면 조건식에 해당하는 "꽃피는 봄에 태어나셨군요!"코드가 화면에 나타난다.
사용자가 잘못 입력하여 전혀 해당하지 않는 답을 했을 경우에는 마지막 else 문에 해당하는 "날짜를 잘못 입력하셨습니다. 다시 한번 확인해주세요."라는 코드가 나온다.
var mon = prompt("당신은 몇월에 태어나셨나요?", "0월");
if (mon >= 3 + "월" && mon <= 5 + "월") {
document.write("꽃피는 봄에 태어나셨군요!", "<br/>");
} else if (mon >= 6 + "월" && mon <= 8 + "월") {
document.write("햇볕이 따스한 여름에 대어나셨군요!", "<br/>");
} else if (mon >= 9 + "월" && mon <= 11 + "월") {
document.write("풍성한 계절, 가을에 태어나셨군요!", "<br/>");
} else if (mon >= 11 + "월" && mon <= 2 + "월") {
document.write("눈처럼 깨끗한 겨울에 태어나셨군요!", "<br/>");
} else {
document.write(
"날짜를 잘못 입력하셨습니다. 다시 한번 확인해주세요!",
"<br/>"
);
}중첩 if문
조건문안에 또 다른 조건문이 들어있는 것을 '중첩 if 문' 이라고 한다.
중첩 if 문 또한 위에서 부터 차례대로 조건식을 확인하며, 조건식이 맞을 경우
//기본형
if( 조건식1 ){
if( 조건식2 ){ 조건식2가 만족하면 실행될 코드;}
else{ 조건식2가 만족되지 않았을 경우 실행될 코드;}
} else { 조건식1이 만족하지 않았을 경우 실행할 코드;※문제
: 사용자에게 아이디와 패스워드를 입력받고 같다면 로그인 완료창을, 틀렸을 경우엔 경고창을 띄운 뒤 처음 화면으로 돌아가도록 만드시오.
사용자의 아이디와 비밀번호가 맞는지를 확인하기 위해서는 먼저 서버에 회원 정보가 저장되어 있어야한다.
그렇기 때문에 먼저, 변수를 만들고 임의로 사용자의 id와 pw값을 만들어 두었다.
이후 prompt 메서드로 사용자에게 아이디와 패스워드를 입력하게 만든다음 중첩 if 문으로 두개의 값을 비교하였다.
중첩 if 문의 계산 순서 또한 위에서 아래로 내려간다.
다음의 if문 또한 첫번째 if 문으로 아이디를 비교한 뒤 두번째 if 문으로 비밀번호를 비교한다.
//서버에 저장된 회원 정보
var id = "user123";
var pw = "1234";
//사용자에게 입력받은 회원 정보
var userId = prompt("아이디를 입력하세요");
var userPw = prompt("패스워드를 입력하세요");
if (id === userId) {
if (pw === userPw) {
document.write("로그인이 완료되었습니다.");
} else {
alert("패스워드가 일치하지 않습니다.");
location.reload(); //새로고침
}
} else {
alert("아이디가 일치하지 않습니다.");
location.reload(); //새로고침
}switch 문
'선택문'인 switch문은 변수의 저장된 값과 switch문에 들어있는 경우(case)의 값을 검사하여,
변수와 경우의 값에서 일치하는 값이 있을 때 그에 해당하는 코드를 실행한다.
if 문과 용도는 비슷하지만 if 문은 만족하는 데이터가 여러 개일 경우 주로 사용하고,
switch문은 여러 경우의 값 중에 일치하는 데이터를 찾아 코드를 실행 할 때 주로 사용한다.
if 문은 true/false 값이 존재하지만 switch 문은 true/false 값이 없고 단순히 변수의 일치 여부만을 따진다.
변수에 저장된 값은 switch문을 만나면 case의 값을 하나씩 검사한다.
일치하는 데이터가 있으면 그에 해당하는 코드를 실행하고 break(강제종료)문을 만나서 코드를 종료한다.
만약 case 값 중 일치하는 데이터가 없으면 default 문을 실행하고 switch문을 종료한다.
// 기본형
var 변수 = 초깃값;
switch(변수){
case 값1 : 자바스크립트 코드1;
break;
case 값2 : 자바스크립트 코드2;
break;
case 값3 : 자바스크립트 코드3;
break;
case 값4 : 자바스크립트 코드4;
break;
default : 자바스크립트 코드5;
}※ 문제
: 사용자에게 즐겨 사용하는 포털 사이트를 물어보고 일치하면 링크로 연결하고 일치하지 않으면 경고창을 띄워라.
먼저 switch 문은 내부에 변수를 선언할 수 없기 때문에 필요한 변수를 먼저 만들어준다.
사용자에게 질문을 하고 값을 받기 위해 site라는 변수를 만들고, 주소를 입력하기 위해 url 이라는 변수를 선언했다.
이후에 site 에 들어있는 값을 switch에 입력하여 case에 들어있는 값들과 비교하기 시작한다.
사용자가 대답한 값이 만약 case에 들어있는 값과 동일하다면 뒤에 입력한 코드가 실행되는데, 다음의 값에서는
url에 값과 맞는 주소가 변수값으로 입력된다.
변수값이 생긴 뒤에는 undifind 였기에 false 값이었던 if문이 true 값으로 변환되며 실행된다.
// 사용자에게 묻기
var site = prompt(
"네이버, 다음, 구글, 네이트 중 \
즐겨 사용하는 포털 사이트는?"
);
var url;
// 사용자에게 받은 site의 값과 case의 값을 비교
switch (site) {
case "구글":
url = "www.google.com";
break;
case "다음":
url = "www.daum.net";
break;
case "네이버":
url = "www.naver.com";
break;
case "네이트":
url = "www.nate.com";
break;
// 경고창
default:
alert("보기 중에 존재하지 않는 사이트입니다.");
}
// url 값이 생겼을 때 실행할 프로퍼티
if (url) location.href = "https://" + url;반복문
반복문을 이용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있다.
예를 들어 '안녕하세요'라는 문구를 100회 출력하려면 출력문을 100번 작성해야 하지만 반복문을 이용하면 1줄만으로도 문장을 100회 출력할 수 있다.
반복문에는 while 문, do while 문, for 문이있다.
*보통 for문이 문법이 간단하기 때문에 많이 사용한다.
while 문
while 문은 조건식이 만족되지 않을 때까지 {중괄호} 안의 코드를 여러번 반복 실행시킨다.
while 문의 실행 순서는 아래와 같다.
| 1 | 조건식 검사 | 2-1 | 조건식이 true 값일 때 | 3-1 | 자바스크립트 코드와 증감식 실행 | 4 | 1로 돌아가서 증감식 검사 |
| 2-2 | 조건식이 false 값일 때 | 3-2 | 종료 | ||||
먼저, while문 안의 조건식을 검사한다.
이때 조건식의 값이 true일 경우는 함께 들어있는 자바스크립트 코드를 실행시킨다.
그리고 그 아래의 증감식을 실행한 뒤 다시 맨 처음으로 돌아가 조건식 검사부터 시작한다.
만약 조건식을 검사했을 때 false 값이 반환된다면 자동으로 while 문이 종료된다.
// 기본형
var 변수 : 초기값;
while(조건식){
자바스크립트 코드;
증감식;
}※ 문제1
: 변수 i를 활용해 1부터 10까지의 수를 작성하고 화면에 작성하시오.
변수 i에게 초기값 1을 주어 선언한다.
while문에 i는 10 이하 라는 조건식을 입력하면 변수 i의 값이 11이상이 될 때 자동으로 while 문이 종료될 것이다.
10 이하 까지는 while 문의 조건식이 계속 true 값이 나올 것이기 때문에 아래의 자바스크립트 코드가 계속 실행된다.
이후 증감식으로 들어있는 i++(증감연산자)가 실행된다.
i의 값이 1 씩 증가할 때마다 화면에 입력되고 10까지 작성 후 종료된다.
var i = 1;
while (i <= 10) {
document.write(i);
i++;
}※ 문제2
: while 문을 사용하여 1부터 30까지 숫자 중 4의 배수인 숫자와 6의 배수인 숫자를 출력하시오.
코드 부분에 if문을 넣어 특정 조건일 경우 화면에 출력되도록 입력할 수 있다.
var test = 1;
while (test <= 30) {
if (test % 4 == 0 || test % 6 == 0) document.write(test);
test++;
}※ 문제3
: while문을 사용하여 20부터 10까지의 숫자 중 짝수일 경우 파란색, 홀수일 경우 빨간색으로 화면에 출력하시오.
파란색 혹은 빨간색으로 출력하는 선택지가 생겼기 때문에 코드 또한 선택지를 줄 수 있는 문법으로 가져와야한다.
두가지의 방법으로 문제를 풀어봤다.
첫번째 방법에서는 if문으로 코드를 만들었다.
조건식에 짝수일 경우를 넣었기 때문에 else값이 자동적으로 홀수 값이 되어 분리된다.
두번째 방법에서는 삼항 조건 연산자로 풀어보았는데,
짝수일 경우가 ture일 경우에는 파란색값으로 false일 경우는 빨간색 값으로 출력된다.
// 방법 1
while (test2 >= 10) {
if (test2 % 2 == 0) {
document.write('<p class="blue">' + test2);
} else {
document.write('<p class="red">' + test2);
}
test2--;
// 방법 2
while (test2 >= 10) {
test2 % 2 == 0
? document.write('<p class="blue">' + test2 + "</p>")
: document.write('<p class="red">' + test2 + "</p>");
test2--;
}do while문
while 문의 경우 조건식의 만족여부를 먼저 검사한 후 중괄호에 있는 코드를 실행 여부를 검사한다.
do while 문은 반드시 한 번은 코드를 실행한 후에 조건식을 검사한다.
*맨 처음에 코드를 바로 실행하기 때문에 자주 사용되지는 않는다.
// 기본형
var 변수 : 초기값;
do{
자바스크립트 코드;
증감식;
}
while (조건식) var i = 10;
do {
document.write("hello", "<br/>");
i--;
} while (i > 3);위와 같이 작성했을 때, 브라우저에는 hello가 7번 반복출력된다.
증감연산자를 사용했기 때문에 3과 같아지기 전까지는 do의 내용을 계속해서 반복하는 것이다.
var i = 10;
do {
document.write("hello", "<br/>");
i--;
} while (i < 3);위와 같이 while의 값이 false 값이 나와도 조건식이 뒤에 나와있기 때문에 hello는 한번 출력되고 끝이난다.
for 문
while문과 마찬가지로 조건식을 만족할 때까지 코드를 반복 실행한다.
사용 방법은 while 문과 동일하지만 문법이 더 간단해서 for 문을 가장 많이 사용한다.
| 1 | 조건식 검사 | 2-1 | true 일 경우 | 3-1 | 자바스크립트 코드 실행 | 4 | 증감식 적용 | 5 | 1번부터 다시 반복 |
| 2-2 | false 일 경우 | 3-2 | 종료 | ||||||
for 문은 데이터에 변수를 선언할 수 있다.
초기값으로 변수를 선언하고 조건식을 검사한다.
이후는 다른 반복문들과 같다.
// 기본형
for(초기값; 조건식; 증감식){
자바스크립트 코드;
}※ 문제1
: for문을 활용해 0부터 9까지 화면에 작성하시오.
변수 i에 초기값 0을 담고 조건식을 통해 10보다 작은 수 까지 반복하도록 하면 문제를 해결할 수 있다.
for (var i = 0; i < 10; i++) {
document.write(i, "<br/>");
}만약 for문 안의 식은 그대로 유지하고 1 부터 10까지로 범위를 조정하고 싶다면 메서드에 +1를 추가하면 된다.
for (var i = 0; i < 10; i++) {
document.write(i + 1, "<br/>");
}※ 문제2
: for 문을 활용하여 1부터 100까지의 숫자 중에 5의 배수일 경우 빨간색, 7의 배수일 경우 초록색,
5의 배수이면서 7의 배수일 경우 파란색으로 출력하시오.
5의 배수 와 7의 배수에게 각각 빨간색 초록색을 부여하고 두개의 배수가 공통된 부분에는 파란색을 부여해야한다.
공통부분의 수를 어떻게 정리하냐에 따라 방법이 달라진다.
방법1의 경우 5의 배수를 기본으로 묶고 그 안의 7의 배수들을 분리하여 색을 부여했다.
방법2의 경우 각각의 색깔의 수를 논리연산자와 비교연산자를 통해 각각의 조건식을 입력하여 명확하게 분리하였다.
// 방법1
for (var test = 1; test < 101; test++) {
// 5의 배수
if (test % 5 == 0) {
// 5의 배수이면서 7의 배수이면 파란색을 출력.
if (test % 7 == 0) {
document.write('<p class="blue">' + test + "</p>");
}
// 5의 배수이면서 7의 배수가 아닌수를 빨간색으로 출력.
else {
document.write('<p class="red">' + test + "</p>");
}
}
// 5의 배수를 제외하고 나머지 수에서 7의 배수인 수를 초록색으로 출력.
else if (test % 7 == 0) {
document.write('<p class="green">' + test + "</p>");
}
}
// 방법2
for (var test = 1; test <= 100; test++) {
// 5의 배수이면서 7의 배수는 아닌 수를 빨간색으로 출력.
if (test % 5 == 0 && test % 7 != 0) {
document.write('<p class="red">' + test + "</p>");
}
// 7의 배수이면서 5의 배수는 아닌 수를 초록색으로 출력.
else if (test % 7 == 0 && test % 5 != 0) {
document.write('<p class="green">' + test + "</p>");
}
// 5의 배수이면서 7의 배수인 수는 파란색으로 출력.
else if (test % 5 == 0 && test % 7 == 0) {
document.write('<p class="blue">' + test + "</p>");
}
}중첩 for문
for문 안에 for문이 들어있으면 중첩 for문이라고 한다.
자바스크립트가 중첩 for문을 만나면 바깥쪽 for문의 초깃값과 조건식을 먼저 검사한다.
이후 조건식이 만족되면 안쪽 for문의 초깃값과 조건식을 검사하고, 조건식이 true에서 false가 될 때까지 반복한다.
그 다음 안쪽 for문의 조건식이 false가 되면 바깥쪽 for문의 증감식을 실행하고 다시 조건식을 검사한다.
바깥쪽 for문의 조건식이 만족하면 다시 안쪽 for문의 초깃값과 조건식을 처음부터 다시 검사하고,
또 조건식이 true에서 false가 될 때까지 반복한다. 이 과정을 바깥쪽 for문이 false가 될 때까지 반복한다.
//기본형
for(초깃값; 조건식; 증감식){ -> 바깥쪽 for문
for(초깃값; 조건식; 증감식{ -> 안쪽 for문
자바스크립트 코드;
}
}※ 문제1
: 중첩 for 문으로 5행 5열의 표를 만드시오.
복합 대입 연산자를 활용해 테이블 표를 만들었다.
table이란 변수를 만들어놓고 복합 대입 연산자 += 기호를 활용해 tr태그와 td 태그들을 넣어주는 형식을 취했다.
아래표를 한줄로 풀어보면 table + (tr + (td + num + /td) x 5 +/tr) x5 + /table 과 같은 모습이 된다.
변수 num과 같은 경우는 변수 선언이 for문 바깥에 선언되어있기 때문에 for문이 반복할 수록 수가 증가하는 것을 볼 수 있다. for문을 반복할 경우 괄호 안에서 초기값을 다시 선언하는 과정이 있기 때문에 for에서 선언한 변수는 초기값으로 돌아가지만 num의 경우는 없기 때문이다.
var num = 1;
var t = "<table>";
for (var i = 1; i <= 5; i++) {
t += "<tr>";
for (var k = 1; k <= 5; k++) {
t += "<td>" + num + "</td>";
num++;
}
t += "</tr>";
}
t += "</table>";
document.write(t);
※ 문제2
: for 문을 활용하여 구구단 5단을 출력하시오.
기본 for문과 중첩 for문을 활용하여 코드를 짜보았다.
첫번째 방법은 곱하는 수에 초기값과 증가값을 주어 for문으로 코드를 짠 것이고,
두번째 방법은 곱하려는 수와 곱해지는 수 두개에 초기값을 입력하여 코드를 짠 것이다.
//방법1
for (var i = 1; i <= 9; i++) {
document.write("5 x " + i + " = " + i * 5, "<br/>");
}
//방법2
for (var i = 5; i == 5; i++) {
for (var k = 1; k <= 9; k++) {
document.write(i + " x " + k + " = " + i * k, "<br/>");
}
}제어문은 아니지만 반복해서 실행하는 코드들
1. 재귀함수
함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 재귀 함수 호출이라고 한다.
재귀 함수 호출은 반복문처럼 여러 번 호출하기 위해 사용한다.
// 기본형
function 함수명(){
자바스크립트 코드();
함수명(); <- 재귀 함수 호출
}
함수명();testFnc()라는 함수를 만들고 함수 내부에 호출문을 함께 넣으면 종료할 상황이 나오기 전까지 안의 내용을 반복한다.
let num = 0;
function testFnc() {
num++;
document.write(num, "<br/>");
if (num == 10) {
return; //num 이 10이 되면 함수를 종료
}
testFnc(); //바깥에 함수 호출문이 실행되면 안쪽의 함수호출을 실행
}
testFnc(); //바깥에 있는 함수 호출문'자바스크립트(JavaScript) > 자바스크립트' 카테고리의 다른 글
| [JavaScript] 자바스크립트의 객체(Object)란? (0) | 2024.07.15 |
|---|---|
| [JavaScript] continue 과 break 의 차이 (0) | 2024.07.12 |
| [JavaScript] 자바스크립트로 평균 체중 계산기 만드는 방법 (0) | 2024.07.09 |
| [JavaScript] 연산자 (0) | 2024.07.05 |
| [JavaScript] 변수와 자료형 (0) | 2024.07.05 |
