ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 제어문
      Javascript 2023. 6. 22. 15:24

      자바스크립트 기초 문법

       

      제어문이란?

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

      • 조건에 따라 특정 코드를 실행시킬 수 있다.

      선택문(switch문)

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

      반복문 (while 문 / for 문)

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

       

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

       

      if문

      예제) if_1 (걷는양에 따라 ture)

      <!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>
    <script>
        var walkAmount = prompt("당신의 하루 걷는 양은 몇 보인가요?","0");
        
        if (walkAmount >=100000) {
            document.write("매우 좋은 습관을 지니고 계시는군요!!","<br>");
        }
        document.write ("============ The End =============","<br>");
    </script>
</head>
<body>
    
</body>
</html>

       

      예제) if_2 (이름을 입력하면 이름 붙여서 환영인사)

      <!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>
    <script>
        var userName = prompt("방문자의 이름은?","");

        // 값이 있어야 함
        if (userName) {
            document.write(userName + "님 반갑습니다! 방문을 환영합니다.");
        }
    </script>
</head>
<body>
    
</body>
</html>

       

      else문

      예제) else (회원 탈퇴 확인)

      <!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>
    <script>
       var result = confirm("정말로 회원을 탈퇴하겠습니까?");

            //확인일때
       if (result) {
            document.write("탈퇴 처리되었습니다.");
            // 취소일때
        } else {
            document.write("탈퇴 취소되었습니다.");
       }
    </script>
</head>
<body>
    
</body>
</html>

       

      else if문

      예제) else if ( 월수마다 날짜 나오는거)

      <!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>
    <script>
        var mon = prompt("현재는 몇 월입니까?","0");

        // 9이상 이고, 11이하면 참
        if (mon >= 9&& mon <= 11){
            document.write("독서의 계절 가을이네요");
        }else if(mon >= 6&& mon <= 8){
            document.write("여행 가기 좋은 여름이네요");
        }else if(mon >= 3&& mon <= 5){
            document.write("햇살 가득한 봄이네요");
        }else {
            document.write("스키의 게절 겨울이네요");
        }
    </script>
</head>
<body>
    
</body>
</html>

       

      중첩 if문

      예제) if (아이디와 비밀번호 틀릴시 물어봄)

      <!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>
    <script>
        var id = "easy1004";
        var pw = "112233";

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

        if (id==user_id) {
            // 아이디가 일치하는 경우
            // 값이 없을때도 거짓
            // 취소도 거짓
            alert("아이디가 일치합니다");  //경고창
            if (pw==user_pw) {
                // alert("비밀번호가 일치합니다");
                document.write(user_id+"님 반갑습니다");
            } else {
                alert("비밀번호가 일치하지 않습니다");
                // 브라우저 새로고침
                location.reload();
            }
        } else {
            // 아이디가 일치하지 않는 경우
            alert("아이디가 일치하지 않습니다");  //경고창
            // 브라우저 새로고침
            location.reload();
        }
    </script>
</head>
<body>
    
</body>
</html>

       

      선택문(switch문)

       

      switech문

       

      예제) switch (해당 사이트 연결)

      <!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>
    <script>
        // \ 문장이 길때 쓰면 이어서 가능
        var site = prompt("네이버,다음,네이트,구글 중 \
            즐겨 사용하는 포털 검색 사이트");
            var url;
            
            switch (site) {
                // 입력받은 사이트가 구글이면
                case "구글":
                    // 구글일때 실행
                    url="www.google.com";
                    break;
                case "다음":
                    url="www.daum.net";
                    break;
                    case "네이트":
                        url="www.nate.com";
                        break;
                        case "네이버":
                            url="www.naver.com";
                            // 없거나 구글, 다음이 아닌 경우
                            default:
                            alert("보기중에 없는 사이트입니다.");
                        }
            // 중괄호 생략
            if(url)
                // href 속성으로 사이트 이동
                location.href = "http://"+ url;
    </script>
</head>
<body>
    
</body>
</html>

       

      do_while문

       

      예제) do_while (최초 한번 실행하고 거짓으로 끝남)

      <!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>
    <script>
        var i=10;
        do {
            document.write("hello!");
            // 최초 한번만 실행하고, 거짓으로 끝남
        } while (i<3);
    </script>
</head>
<body>
    
</body>
</html>

       

      반복문 (while 문 / for 문)

       

      while문

       

      예제) while (인사말 10까지 반복)

       

      <!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>
    <script>
        var i = 1;
        while (i<=10) {
            document.write("안녕하세요"+i,"<br>");
            i++;
        }
    </script>
</head>
<body>
    
</body>
</html>

       

      예제) while (2,5의 배수 포함되게 반복)

       

      <!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>
    <script>
        var i=1;

        while(i<=30){
            // 2의배수와 5의 배수 둘다 포함된것만 화면에 뜸
            if (i%2 == 0 && i%5 == 0) {
                document.write(i,"<br>");
            }
            i++;
        }
    </script>
</head>
<body>
    
</body>
</html>

       

      do_while

      for문

      초깃값 → 조건식 → 자바스크립트 코드 → 증감식 → 조건식

       

      예제) for문 (홀수 113까지 출력)

      <!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>
    <script>
        // 초기값: 조건식 : 증감식
        // for(var i=1; i<=10; i++){
        //     document.write(i,"<br>");
        // }
        // for (var i=1; i<=20; i++){
        //     if (i==15) {
        //         break;
        //     }
        //     // 14까지만 출력
        //     document.write(i,"<br>");
        // }
        // 변수를 빼도 됨
        // for (i=1; i<=20; i++){
        //     if (i==15) {
        //         break;
        //     }
        //     // 14까지만 출력
        //     document.write(i,"<br>");
        // }
        // var i=1;
        // for (; i<=20; i++){
        //     if (i==15) {
        //         break;
        //     }
        //     // 14까지만 출력
        //     document.write(i,"<br>");
        // }
        var i=1;
        // 조건식이 true면 무한루프
        for (; true; i++){
            if (i==115) {
                break;
            }
            // 14까지만 출력
            document.write(i,"<br>");
        }
    </script>
</head>
<body>
    
</body>
</html>

       

      예제) for문 5의배수 (빨간색 7의 배수 파란색)

      <!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>
    <style>
        .red{color: red;}
        .blue{color: #00f;}
        .aqua{color: #0ff;}
    </style>
    <script>
        // 1에서 100까지 1씩 증가
        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='blue'>"+i+"</p>");
            }else if(i%7==0 && i%5 ==0){
                document.write("<p class='aqua'>"+i+"</p>");
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

       

      break문

       

      예제) break문

      <!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>
    <script>
        for(var i=1; i<=10; i++){
            //if문은 중괄호 생략하면서 한줄로 사용가능
            if(i==6) break;
            document.write(i,"<br>");
        }
    </script>
</head>
<body>
    
</body>
</html>

       

      continue문

       

      예제) continue문

      <!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>
    <script>
        for(var i=1; i<=10; i++){
            //짝수일 때 출력안하고 건너뛰기
            if(i%2==0) continue;
            document.write(i,"<br>");
        }
    </script>
</head>
<body>
    
</body>
</html>

      'Javascript' 카테고리의 다른 글

      for 예제문  (0) 2023.06.22
      Math, 시간 나타내기  (0) 2023.06.22
      자바스크립트 기초 문법  (0) 2023.06.22
      자바 스크립트 시작하기  (0) 2023.06.22
      JQuery  (0) 2023.05.08

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바