[JavaScript] 제어문

재림·2024년 4월 29일
JavaScript

JS 개념 정리

목록 보기
3/6
post-thumbnail

🍎 제어문이란?

프로그램의 흐름을 제어할 수 있도록 도와주는 문장
조건문, 선택문, 반복문

🎃 조건문( if문 / else문 / else if문 )

조건(true/false)에 따라 특정 코드를 실행시킬 수 있음

🥞 if문

조건식을 만족(true)할 경우에만 코드를 실행함

if(조건식){
  자바스크립트 코드;
}
var num = 10;
if(num < 500){
  document.write("hello")
} //true 반환

조건식에 있는 0은 false를 반환하여 조건문의 코드를 실행시키지 않음

if(0){
  document.write("hello")
} //false 반환

예제

<script>
  var age = prompt("당신의 나이는?", "0");

if(age >= 24){
  document.write("저보다 나이가 많으시네욤");
}
document.write("히히");
</script>

24 이상의 숫자를 입력했을 경우

24 미만의 숫자를 입력했을 경우

조건식에 논리형 데이터(true/false)가 아닌 다른 형이 오는 경우
다른 형의 데이터가 입력되어도 true 혹은 false로 인식함.
아래 값이 조건식에 입력되면 false를 반환하지만 그 밖의 값은 true로 인식함.

0, null, ""(빈 문자), undefined

출력되는 경우

var num = 2;
if(num){
  document.write(num)
}// 3는 true

출력되지 않는 경우

var num = 0;
if(num){
  document.write(num)
} // 0은 false

예제

<script>
  var name = prompt("이름을 입력하세요", "");

if(name){
  document.write(name + "님 안녕하세요~");
}
</script>

이름을 입력했을 때 :

이름을 입력하지 않고 확인을 눌렀을 때 : 암것두 안 뜸

🥞 else문

else문은 조건식을 만족할(true) 경우와 만족하지 않을(false) 경우에 따라 실행되는 코드가 달라짐. 즉, 두 가지 결과가 나옴.

if(조건식){
  자바스크립트 코드 1;
}else{
  자바스크립트 코드 2;
}

예제

<script>
  var num = prompt("숫자를 적어보세요", "0");

if(num % 2 == 0){ // 짝수일 경우 실행
  document.write("그 숫자는 짝수입니다.");
}else{ // 홀수일 경우 실행
  document.write("그 숫자는 홀수입니다.");
}
</script>

num 값을 2로 나눈 나머지의 값이 0이면 코드 1 실행, 0이 아니면 코드 2 실행

예제

<script>
  var result = confirm("트레저가 누군지 아시나요?");

if(result){
  document.write("당신은 트메입니다.");
}else{
  document.write("좀 알아보세요.");
}
</script>

confirm()

[확인]을 누르면 true값 반환

[취소]를 누르면 false값 반환

🥞 else if 문

두 가지 이상의 조건식과 정해 놓은 조건을 만족하지 않았을 때 실행

가장 위에 있는 조건식부터 차례로 조건 검사를 하고 true값이 나오면 그에 해당하는 코드를 실행함. 조건식 중 true값이 하나도 없으면 else 코드 실행

if(조건식1){
  코드1;
}else if(조건식2){
  코드2;
}else if(조건식3){
  코드3;
}else{
  코드4;
}

예제

<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의 중괄호 안에 있는 코드만 실행하고 종료됨.

예제

<script>
 var id = "1212"; // 아이디
 var pw = "1313"; // 비밀번호

var user_id = prompt("아이디는?", "");
var user_pw = prompt("비밀번호는?", "");

if(id == user_id){ // 아이디가 일치하면 실행
  if(pw == user_pw){
    document.write(user_id+" 님 반갑습니다."); // 비밀번호가 일치하면 실행
  } else{
    alert("비밀번호가 일치하지 않습니다."); // 비밀번호 불일치시 실행
    location.reload(); // 브라우저 새로고침
  }
} else{
  alert("아이디가 일치하지 않습니다."); //아이디 불울치시 실행
  location.reload();
}
<script>

🎃 선택문 ( switch문 )

일치하는 경우의 값이 있을 경우에만 특정 코드를 실행시킬 수 있음

🥞 switch문

switch문은 변수에 저장된 값과 switch문에 있는 case의 값을 검사하여 변수와 경우의 값에서 일치하는 값이 있을 때 그에 해당하는 코드를 실행함.
if문과 용도는 비슷하지만 if문은 만족하는 데이터가 여러개일 경우 사용하고, switch문은 여러 경우의 값 중 일치하는 데이터를 찾아 해당하는 코드를 실행시킬 때 사용함.

var 변수 = 초깃값;

switch(변수){
  case 값1:코드1;
    break;
  case 값2:코드2;
    break;
  case 값3:코드3;
    break;
  case 값4:코드4;
    break;
    
  default: 코드5;
}

변수에 저장된 값은 switch문을 만나면 case의 값을 하나씩 검사함.
일치하는 데이터가 있으면 그에 해당하는 코드를 실행하고 break문을 만나 switch문을 종료함.
만일 case의 값 중에 일치하는 데이터가 없다면 마지막 default에 있는 코드를 실행하고 switch문을 종료함.

<script>
  var site = prompt ("네이버, 다음, 구글 중 \
즐겨 사용하는 사이트는?", "");
var url;

switch(site){
    case"구글":url="www.google.com";
    break;
    case"네이버":url="www.naver.com";
	break;
    case"다음":url="www.daum.com";
	break;
    
  default:alert("보기에 없는 사이트입니다.");
}

if(url) location.href = "http://" + url;
</script>

결과

네이버 입력시 > 이동

🎃 반복문 ( while문 / for문 )

코드를 지정한 횟수만큼 반복해서 실행시킬 수 있음

🥞 while문

조건식을 만족할 때까지 코드를 반복해 실행할 수 있음

var 변수 = 초깃값;
while(조건식){
  자바스크립트 코드;
  증감식;
}

1 조건식을 검사하고, 만족하면 2 중괄호 안에 있는 코드와 증감식을 실행함. 그리고 3 다시 조건식을 검사함.

예제 1

<script>
  var i = 1;
while(i<=10){ // i <= 10을 만족하면 중괄호의 코드를 실행함.
  document.write("안녕하세요" + i, "<br />");
  i++;
}
document.write("====The End===-");
</script>

결과

예제 2 // whilte문의 조건식 i <= 30을 만족(true)하면 중괄호의 코드를 반복하여 실행함

<script>
  var i = 1;
while(i<=30){
  if(i % 2 == 0 && i % 6 == 0){ // i값이 2의 배수이면서 6의 배수일 경우 i값을 출력함
    document.write(i, "<br/>");
  }
  i++;
}
</script>

결과

예제 3 // 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>

i >= 10을 만족(ture)하면 코드를 실행함. i의 값이 20부터 10까지 1씩 감소되고 10회 반복함.

🥞 do while문

while문은 조건식의 만족 여부를 먼저 검사한 후 중괄호에 있는 코드의 실행 여부를 결정하지만 do while문은 반드시 한 번은 코드를 실행하고 조건식을 검사함.

var 변수 = 초깃값;

do{
  자바스크립트 코드;
  증감식;
}while(조건식)

예제 1

<script>
  var i = 10;
do{
  document.write("hello!!");
} while (i < 3)
</script>

결과 // 중괄호 {}의 document.write("hello!!");를 먼저 실행한 후 조건식 i < 3을 검사함. 변수 i에는 10이 저장되어 있으므로 두 수를 비교한 결과 false를 반황하여 do while문이 종료됨.

🥞 for문

조건식을 만족할 때까지 특정 코드를 반복하여 실행함

for(초깃값; 조건식; 증감식){
  자바스크립트 코드;
}

예제 1

<script>
  for( var i = 1; i <= 10; i++ ){
    document.write("반복" + i, "<br>"); // 중괄호의 코드가 10회 반복해서 실행됨
  }
</script>

결과

  1. 변수 i에 초깃값 1을 저장함
  2. 조건식을 만족할 경우 중괄호의 코드를 실행함
  3. 증가 연산자로 변수 i의 값이 1만큼 증가함
  4. 다시 조건식의 만족 여부를 검사한 후 중괄호의 코드를 실행할지 아니면 종료할지 결정함.


예제 2 // 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='red'>" + i + "</p>");
    }
  }
</script>

🥞 break문

while문 또는 for문에서 break문을 실행하면 조건식과 상관없이 강제로 반복문을 종료함
즉, break문은 반복문을 강제로 종료할 때 사용함.

for(초깃값; 조건식; 증감식){
  break; // 반복문을 강제로 종료함
  자바스크립트 코드;
}
var 변수 = 초깃값;
while(조건식){
  break; // 반복문을 강제로 종료함.
  자바스크립트 코드;
  증감식;
}

예제 1 // for문을 이용하여 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>

결과 // i의 값이 6이면 break문으로 종료함

🥞 continue문

반복문에서만 사용할 수 있음. while문에 사용할 경우 continue문 다음에 오는 코드는 무시하고 바로 조건식으로 이동해 조건 검사를 함.

for문에서 continue문을 실행할 경우 continue문 다음에 오는 코드는 무시하고 바로 증감식으로 이동하여 증감 연산을 실행함.

for(초깃값; 조건식; 증감식){
  continue;
  자바스크립트 코드;
}
var 변수 = 초깃값;
while(조건식){
  증감식;
  continue;
  자바스크립트 코드;
}

예제 1 // 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>

결과 // i가 1부터 10까지 증가하며 코드가 실행되므로 10회 반복하여 실행
2의 배수이면 continue문이 실행되어 홀수만 출력

🥞 중첩 for문

for문 안에 for문을 사용한 것
자바스크립트를 이용해 3행 5열의 표를 만든다고 할 때, 1행씩 행이 만들어질 때마다 5개의 열을 만들어야 할 경우에 사용함

for(초깃값; 조건식; 증감식){
  for(초깃값; 조건식; 증감식){
    자바스크립트 코드;
  }
}

예제 1 // '1행 1열'부터 '3행 2열'까지 출력
바깥쪽 for문은 행만큼 증가하고, 안쪽 for문은 열만큼 증가함

<script>
  for(var i = 1; i <= 3; i++){
    for(var k = 1; k <= 2; k++){
      document.write(i + "행" + k + "열", "<br>");
    } // 바깥쪽의 반복문이 1회 실행되면 안쪽의 반복문은 2회 실행됨
    document.write("<br>");
  }
</script>

결과 // 바깥쪽의 for문은 i가 3이 될 때까지 코드를 반복해서 실행함
안쪽의 for문은 k가 2가 될 때까지 코드를 반복해서 실행함.

즉, 바깥쪽의 for문이 1회 실행될 때마다 안쪽의 for문은 2회 실행되므로 코드가 총 6(3*2)회 실행됨

  <script>
    var i = 1;
    while(i <= 9){
      document.write("5X" + i + "="+i*5, "</br>");
      i ++;
    }
  </script>
  <script>
    var num = 1;
    var t = "<table border='1'>";
    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);
  </script>
profile
재림
@jaaerim
이전 포스트

[JavaScript] 기본 연산자

다음 포스트

[JavaScript] 함수 선언과 함수 표현식의 차이점

0개의 댓글