본문 바로가기
Learning/HTML&JavaScript

자바스크립트 제어문

cozy coding 2020. 7. 31. 11:50

 

  • if else문

 

 

 

 

 

 

  • if else문과 confirm 객체

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> else문 </title>

<script>

    var result=confirm("정말 탈퇴를 하겠습니까?");

    if(result){

        document.write("탈퇴 처리 완료");

    }else{

        document.write("탈퇴 취소");

    }

</script>

</head>

<body>

</body>

</html>

 

확인버튼=true

 

 

 

 

취소버튼=false

 

 

 

  • 처리 조건이 여러개일때 if else문

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> else if문 </title>

<script>

    var mon = prompt("현재는 몇 월입니까?", "0");

    if(mon>=9 && mon<=11){

        document.write("가을입니다.");

    }else if(mon>=6 && mon<=8){

        document.write("여름입니다.");

    }else if(mon>=3 && mon<=5){

        document.write("봄입니다.");

    }else if(mon==12 || mon<=2){

        document.write("겨울입니다.");

    }

    if(mon>12){

        document.write("1~12 사이만 입력가능");

    }

</script>

</head>

<body>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

  • 중첩 if 문

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> 중첩 if문 </title>

<script>

    var id = "easy1004";

    var pw = "112233";



    var usr_id=prompt("아이디: ", "");

    var usr_pw=prompt("비밀번호: ","");



    if(usr_id==id){

        if(usr_pw==pw){

            document.write("로그인 성공");

        }else{

            alert("비밀번호 불일치");

            location.reload(); //브라우저 새로고침

        }

    }else{

        alert("해당 아이디가 없음");

        location.reload(); //브라우저 새로고침

    }

</script>

</head>

<body>

</body>

</html>

 

=>>경고창이 뜬 후 다시 아이디 입력

 

 

=========================================================

 

 

=>>경고창이 뜬 후 다시 아이디 입력

 

==========================================================

 

 

  • switch문

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> 선택문 </title>

<script>

    var site = prompt("네이버, 다음, 네이트, 구글 중 \

    즐겨 사용하는 포털 검색 사이트는?", "");

    var url;



    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="http://"+url;

    }

    

</script>

</head>

<body>

</body>

</html>

 

 

 

 

 

  • 반복문 while

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> while문 </title>

<script>

        var i = 1;

        while(i<=10){

            document.write("안녕"+i,"<br>");

            i++;

        }

        document.write("==== The End ====");

</script>

</head>

<body>

</body>

</html>

 

 

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> while문 </title>

<script>

        var i = 1;

        do{

            document.write("안녕"+i,"<br>");

            i++;

        }while(i<=10)

        document.write("==== The End ====");

</script>

</head>

<body>

</body>

</html>

 

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> while문 </title>

<script>

        var i = 1;

        for(i=1;i<=10;i++){

            document.write("안녕"+i, "<br>");

        }

        document.write("==== The End ====");

</script>

</head>

<body>

</body>

</html>

 

 

  • 20~10까지 짝수면 파랗게, 홀수면 빨간 글씨로 출력

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .red{

            color: red;

        }

        .blue{

            color: blue;

        }

    </style>

</head>

<body>

    <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>

</body>

</html>

 

 

 

  • 5의 배수는 파란색, 7의 배수는 빨간색, 5와 7의 공배수는 초록색 글씨로 표시

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .blue{

            color: blue;

        }

        .red{

            color: red;

        }

        .green{

            color: green;

        }

    </style>

</head>

<body>

    <script>

        for(var i=1;i<=100;i++){

            if(i%5==0 && i%7!=0){

                document.write("<p class='blue'>"+i+"</p>");

            }else if(i%7==0 && i%5!=0){

                document.write("<p class='red'>"+i+"</p>");

            }else if(i%5==0 && i%7==0){

                document.write("<p class='green'>"+i+"</p>");

            }

        }

    </script>

</body>

</html>

 

 

 

  • break: 반복문을 강제로 종료

  • continue: 반복문의 처음으로 돌아감

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> break문 </title>

<script>

    for(var i=1;i<100;i++){

        if(i==6){

            break;

        }

        document.write(i,"<br>");

    }

    document.write("=== The End ===");

</script>

</head>

<body>

</body>

</html>

 

 

  • 1에서 100까지 홀수만 출력 (break사용)

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> break문 </title>

<script>

    for(var i=1;i<100;i++){

        if(i%2==0) continue;

        document.write(i,"<br>");

    }

    document.write("=== The End ===");

</script>

</head>

<body>

</body>

</html>

 

 

 

  • 중첩 for 문

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> 중첩for문 </title>

<script>

    for(var i=1;i<=3;i++){

        for(var j=1;j<=2;j++){

            document.write(i+"행"+j+"열");

        }

        document.write("<br>");

    }

</script>

</head>

<body>

</body>

</html>

 

 

  • 구구단 출력

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        var dan=prompt("단 입력", "");

        for(var i=1;i<=9;i++){

            document.write(dan+" X "+i+"="+i*dan+"<br>");

        }

    </script>

</body>

</html>

 

 

 

 

  • 이중 for문으로 5행 5열 테이블 출력

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        var n=1;

        var t="<table border=1>";

        for(var i=1;i<=5;i++){

            t+="<tr>";

            for(var j=1;j<=5;j++){

                t+="<td>"+n+"</td>";

                n++;

            }

            t+="</tr>";

        }

        t+="</table>";

        document.write(t);

    </script>

</body>

</html>

 

 

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

'Learning > HTML&JavaScript' 카테고리의 다른 글

자바스크립트 함수 1  (0) 2020.07.31
자바스크립트 객체  (0) 2020.07.31
자바스크립트  (0) 2020.07.24
CSS3 선택자  (0) 2020.07.24
HTML 멀티미디어  (0) 2020.07.24

'Learning/HTML&JavaScript' Related Articles

티스토리툴바