728x90

자바스크립트 제어문

자바스크립트 제어문

조건문(if, if~else, switch~case) 조건에따라 다음문장을 선택적으로 실행한다.

반복문(for, while, do~while) 동일한 명령을 여러번 처리하거나 특정 연산을 반복적으로 처리한다

보조제어문(contune, break) 조건문을 만나면 건너뛰거나 반복수행을 종료한다. 반복문내에서 사용한다.

조건문

if문

if~else문

<script>
      var gender = "M"; //남자
      var age = 21; //나이
      if (gender == "M") {
        if (age >= 19) {
          result = "남자 성인입니다.";
        } else {
          result = "남자 미성연자입니다.";
        }
      } else {
        if (age >= 19) {
          result = "여자 성인입니다.";
        } else {
          result = "여자 미성년자입니다.";
        }
      }
      document.write("당신은 " + result + "<p/>");
    </script>
// M 자리에는 M외에 다른 문자들은 모두 여자로 출력된다.

아래는 if~else문을 이용해 다른 html파일을 를 불러오는 예제이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>아이디, 비밀번호 입력</p>
    <script src="ifelse문2.js"></script>
  </body>
</html>
id = prompt("아이디입력");
if (id == "admin") {
  password = prompt("비밀번호입력");
  if (password === "12345") {
    location.href = "20_login.html";
  } else {
    location.href = "20_error.html";
  }
} else {
  location.href = "20_error.html";
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>회원인증에성공했습니다.</h2>
    <p>저자 홈페이지를 클릭하세요</p>
    <a href="http://naver.com">네이버</a>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>회원인증에실패했습니다.</h2>
    <p>웹 문서에 접근할수없습니다. 관리자에게 문의하시기바랍니다.</p>
    <p>관리자 email: js@cleancode.kr</p>
  </body>
</html>

다중if~else문

<script>
var point=93; // 과목 점수
var grade="";
if(point>100) {
document.write("0~100점 사이 값을 입력해야 합니다." + "<p/>");
}
else if(point>=90) {
grade="A";
document.write("아주 잘했어요." + "<p/>");
}
else if(point>=80) {
grade="B";
document.write("잘했어요." + "<p/>");
}
else if(point>=70) {
grade="C";
document.write("조금만 노력하면 잘할 수 있어요." + "<p/>");
}
else if(point>=60) {
grade="D";
document.write("좀 더 노력하세요." + "<p/>");
}
else{
grade="F";
document.write("많이 노력하시기 바랍니다." + "<p/>");
}
document.write("학생의 학점은 <b>" + grade + "</b>입니다.<p/>");
</script>
//출력결과 : 아주잘했어요. 학생의 학점은 A입니다.

아래는 if~else문을 이용해 href를 불러오는 예제이다.

​

*<p> 태그는 paragraph 약자로 문단을 구분할 때 사용합니다 <p>태그 앞뒤로 여백이 들어가는 <br>이 두번 들어간 것과 같이 나오게 됩니다.

switch~case문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>요일을알려주는프로그램만들기</title>
</head>
<body>
    <script>
        var day;
        var week = new Date().getDay(); //0일요일~6토요일
                                        //getDay 자동으로 제공해주는 메소드
        switch(week) {
            case 0:
                day="일요일"; break;
            case 1:
                day="월요일"; break;
            case 2:
                day="화요일"; break;
            case 3:
                day="수요일"; break;
            case 4:
                day="목요일"; break;
            case 5:
                day="금요일"; break;
            case 6:
                day="토요일"; break;
            default:
                day="없는요일"; break;
        }
        document.write('오늘은 <b>' + day + "</b>입니다. <p/>");

    </script>
</body>
</html>
 

첨부 이미지출처 : 한빛

728x90
저작자표시 비영리 변경금지

'STUDY > JavaScript' 카테고리의 다른 글

[JS] 22-06-02 자바스크립트 함수 ☑  (0) 2022.06.02
[JS] 22-05-31 자바스크립트 반복문/보조제어문 ☑  (0) 2022.06.02
[JS] 22-05-30 자바스크립트 연산자 ☑  (0) 2022.06.02
[JS] 22-05-27 DOM과 자바스크립트 기본문법 ☑  (0) 2022.06.02
[JavaScript 생활코딩] 값으로서의 함수와 콜백  (0) 2022.06.01

티스토리툴바