JavaScript와 친해지길 바래 🙏(2) - 조건문, 반복문

joyfulwave·2022년 9월 14일
0

재밌는 이벤트의 세계, JavaScript



💡 조건문

📎 조건문의 종류

  • if ~ else if ~ else
  <script>
    if(조건식){
      // if문의 조건이 true일 경우 실행할 구문
    } else if(조건식){
      // if문의 조건이 false이고, else if문의 조건이 true일 경우 실행할 구문
    } else{
    	// if문과 else if문의 조건이 false일 경우 실행할 구문
    }
  </script>  
  • switch
  <script>
    switch(입력변수) {
    case 입력값1: // 입력 변수가 '입력값1'에 해당할 때 실행할 구문
         break; // 조건문 switch를 빠져나간다.
    case 입력값2: // 입력 변수가 '입력값2'에 해당할 때 실행할 구문
         break;
    ...
    default: // 입력 변수가 모든 입력값에 해당하지 않을 때 실행할 구문
         break;
}
  </script>  

📎 조건문 예제

⚫️ (1)

prompt로 id를 입력받습니다. 만약 입력받은 id가 usertest인 경우일 때, password를 입력받고 입력받은 password가 1234이면 [인증되었습니다.] 라는 경고창 출력을 합니다. password가 1234가 아닌 경우, [인증에 실패하였습니다.] 라는 경고창 출력하고 id가 usertest아닌 경우에도 [인증에 실패하였습니다.] 라는 경고창 출력합니다.

	<script>
        var id = prompt("아이디를 입력해주세요.");

        if( id == "usertest"){
            var pw = prompt("비밀번호를 입력하세요.");
            if(pw == "1234"){
                alert("인증되었습니다.")
            }else{
                alert("인증에 실패하였습니다.")
            }
        }else{
            alert("인증에 실패하였습니다.");
        }

    </script>

⚫️ (2)

prompt로 id와 password를 각각 입력받습니다. 만약 id가 usertest이고, password가 1234이면 [인증되었습니다.] 라는 경고창 출력을 합니다. id가 usertest아니거나, password가 1234아니면 [인증에 실패하였습니다.] 라는 경고창 출력합니다.

	<script>
        var id = prompt("아이디를 입력해주세요.");
        var pw = prompt("비밀번호를 입력하세요.");

        if(id == "usertest" && pw == "1234"){
            alert("인증되었습니다.");
        }else{
            alert("인증에 실패하였습니다.")
        }
    </script>

⚫️ (3)

prompt로 id를 입력받습니다. 만약 id가 usertest1, usertest2, usertest3이면 [인증되었습니다.] 라는 경고창 출력을 합니다. 그렇지 않으면 [인증에 실패하였습니다.] 라는 경고창 출력합니다.

	<script>
       var id = prompt("아이디를 입력해주세요.");

       if(id == "usertest1" || id == "usertest2" || id == "usertest3"){
            alert("인증되었습니다.")
       }else{
            alert("인증에 실패하였습니다.")
       }
    </script>

📎 boolean 의 대체제

⚫️ false로 간주되는 데이터형

	<script>
        if( !'' ){
            console.log('빈 문자열');
        }
        
        if( !undefined ){
            console.log('undefined');
        }

        var a;
        if( !a ){
            console.log('값이 할당되지 않은 변수');
        }

        if(!null){
            console.log('null');
        }

        // NaN = Not A Number
        if( !NaN ){
            console.log('NaN');
        }
    </script>



💡 반복문

📎 반복문의 종류

  • for
  <script>
    for(초기식; 조건식; 증감식){
		// 반복적으로 동작할 구문    
    }
  </script>  
  • while
  <script>
    초기식;
    while(조건식){
    	// 반복적으로 동작할 구문
    	증감식
    }
  </script>  

📎 반복문에서의 break, continue

⚫️ break

반복작업을 중간에 중단시키고 싶을 때 사용해요.

	<script>
        for( var i = 0; i < 10; i++ ){
            if( i == 5 ){
                break; // i가 5와 같으면 반복문은 종료된다.
            }
            document.write('Hello, world ' + i + "번째 <br/>");
        }
    </script>

⚫️ continue

해당 조건의 실행을 중단 하지만, 바로 증감식으로 이동하여 반복을 지속해요.

	<script>
        for( var i = 0; i < 10; i++ ){
            if( i == 5 ){
                continue; // i가 5가되면 아래 구문을 실행하지 않고 증감식으로 넘어간다.
            }
            document.write('continue ' + i + "번째 <br/>");
        }
    </script>


📎 반복문 예제

⚫️ (1)

아래 사진과 같이 구구단을 출력하라.

	<script>
        for( var i = 2; i <= 9; i++ ){
            document.write("<h1>" + i + "단</h1>");
            document.write("<ul>");
            for( var j = 1; j <= 9; j++){
                var k = i * j;
                var result = i + " x " + j + " = " + k;
                document.write("<li>" + result + "</li>");
            }
            document.write("</ul>");
        }
    </script>    

⚫️ (2)

아래 사진과 같이 출력하라.

	<script>
        document.write("<table width='80%' border='1' style='margin:auto; text-align:center'>");
        for( var i = 0; i <= 5; i++ ){
            document.write("<tr>")
            for( var j = 0; j <= 6; j++ ){
                document.write("<td>(" + i + "," + j + ")</td>");
            }
            document.write("</tr>")
        }
        document.write("</table");
    </script>



다음에 더 JavaScript와 친해질 거예요.🎈




출처
https://media.giphy.com/media/qqtvGYCjDNwac/giphy.gif
https://media.giphy.com/media/26tPplGWjN0xLybiU/giphy.gif

0개의 댓글