[JAVA_Back-End]

[JAVASCRIPT] 제어문 (if, else, else if, switch, while, for) 본문

Programming/HTML+ CSS + JAVASCRIPT

[JAVASCRIPT] 제어문 (if, else, else if, switch, while, for)

너굴위 2023. 8. 9. 16:59
728x90
반응형

javascript =>ECMAScript

*스크립트(인터프리터)언어

소스=실행파일

실행-해석기(v8엔진- google:open source)

chrome(google)

safari(apple)

edge(ms)

 

node.js

 

성당(close source)과 시장(open source),,,

 

<javascript언어>

  • 자료(data)

- 자료형(논리형 숫자형 문자(열)형, undefined, object)

- 변수/상수(이름선언 var/let/const)

- 연산자 (산술연산자, 문자열 연결 연산자, 대입 연산자, 증감 연산자, 비교 연산자, 논리 연산자)

  • 제어

흐름-기술(해석) 순서

    위-아래

    조건 - 비교연산자 or 논리연산자의 결과(true/false)

    조건에 의한 분기(condition) -2갈래(참 아니면 거짓)

    조건에 의한 반복(loop) - 조건 만족할 때까지를 이용해서 반복횟수를 정함

    그림을 이해 - flowchart

  • 함수 
  • 객체

*조건에는 단순조건 -> true/false 한 방향에서 실행문이 존재한다.

if(조건) {

   // True일 때

       실행문

}else{

    //False일 때

       실행문

}

ex) 조건문의 예시 문장

num변수의 값이 10보다 크면 "크다"라고 출력.

 

*실습 - num 값에 따라 홀수면 홀수라고 출력/ 짝수면 짝수라고 출력하는 코드 작성

<script type="text/javascript">
        console.log('시작');

        let num=3;

        if(num%2==0){
            console.log('짝수');
        }else{
            console.log('홀수');
        }
        console.log('끝');
    </script>

! 비교의 기준점을 파악하는 것이 제일 중요하다!

 

*실습2 - num값이 3의 배수이면 "3의 배수"를 출력하고 그렇지 않으면 "3배수 아님"출력

<script type="text/javascript">
        console.log('시작');

        let num=12;

        if(num%3==0){
            console.log('3의 배수');
        }else{
            console.log('3의배수 아님');
        }
        console.log('끝');
    </script>

 

조건은 "중첩" 이 가능하다.

if(조건1) {

  if(조건2) {

       실행문1

  }else{

       실행문2

  }

}else{

 if(조건3) {

       실행문3

  }else{

       실행문4

}

 

flowchartㅋㅋ뭐 이렇게 나오겠지?

 

*실습3 - 시간을 입력해서 9시 이전을 아침 12시 이전을 아점 15시 이전을 점저 나머지 저녁

<script type="text/javascript">
        console.log('시작');

        let hour=14;

        if(hour<9)
        {
            console.log('아침');
        }else{
            if(hour<12){
                console.log('아점');
            }else{
                if(hour<15){
                    console.log('점저');
                }else{
                    console.log('저녁');
                }
            }
        }
        console.log('끝');
    </script>
 
//if문 남발하여 매우 안좋은 코드처럼 보이지만 성공 ㅋ

 

*실습4 - 점수를 입력 후 학점을 나타낼 수 있도록 하는 코드

<script type="text/javascript">
        console.log('시작');

        let score=100;
        if(score>=90)
        {
            console.log('A');
        }else{
            if(score>=80){
                console.log('B');
            }else{
                if(score>=70){
                    console.log('C');
                }else{
                    if(score>=60){
                        console.log('D');
                    }else
                    console.log('F');
                }
            }
        }
     
       
        console.log('끝');
    </script>

 

*실습5 - month가 3-5는 봄, 6-8은 여름, 9-11은 가을 , 기타는 겨울로 출력하는 코드

<script type="text/javascript">
        console.log('시작');

       let month=5;
       //논리연산자 사용
/*
       if(month>=3 && month<=5)
       {
        console.log('봄');
       }else if(month>=6 && month<=8)
       {
        console.log('여름');
       }else if(month>=9 && month<=11)
       {
        console.log('가을');
       }else{
        console.log('겨울');
       }
       */
       
       //중첩 if문
       if(month>=3 && month<=5){
        console.log('봄');
       }else{
            if(month>=6 && month<=8){
            console.log('여름');
            }else{
                if(month>=9 && month<=11)
                 {
                  console.log('가을');
                 }else{
                    console.log('겨울');
                 }

             }
       }


        console.log('끝');
    </script>

 

* Switch-case문 사용하여 학점 출력하기

<script type="text/javascript">
        console.log('시작');

        let score=70;

        switch(true){
            case score >=90:
                console.log('A학점');
                break;
            case score >=80:
                console.log('B학점');
                break;
            case score >=70:
                console.log('C학점');
                break;
            case score >=60:
                console.log('D학점');
            default:
                console.log('F학점');
        }
    </script>

 

 

*삼항 연산자를 사용하여 간편한 조건문 만들기

<script type="text/javascript">
        console.log('시작');

        let num=1;
        let result = ( num%2==1)? '홀수':'짝수';  //삼항 연산자는 값을 할당할 때 간편하게 많이 쓴다.
        console.log(result);

       (num%2 ==1)?console.log('홀수'):console.log('짝수');
        console.log('끝');
       
    </script>

 

*for문과 if문을 결합하여 홀수를 출력하는 코드

<script type="text/javascript">
       console.log('시작');
 
    //1부터 20까지 중 홀수를 출력
    for(let i=1;i<=20;i++)
    {
        if(i%2==1)
        {
            console.log(i);
        }
    }

     //1부터 20까지 중 홀수를 출력(i의 증가 숫자를 늘려 홀수만 출력될 수 있도록 설정)
     for(let i=1;i<=20;i+=2)
    {
            console.log(i);
    }
    console.log('끝');
    </script>

 

*실습6- 1-100까지에서 5와 7의 공배수의 합

<script type="text/javascript">
       console.log('시작');

       let sum=0;
      for(let i=0;i<=100;i++)
      {
        if(i%5==0&&i%7==0)
        {
            sum=sum+i;
        }
      }

      console.log(sum);
       
       console.log('끝');
    </script>

 

*별찍기

<script type="text/javascript">
       console.log('시작');

       let sum=0;
       // for(let row=1;row<=10;row++)
       for(let row=10;row>=1;row--)
      {
        let result=" ";
        for(let col=1;col<=row;col++)
        {
            result=result+'*';
        }
        console.log(result);
       
      }
       console.log('끝');
    </script>

 

* 변수를 통해 입력-> 처리-> 출력을 분리해서 사용

* for문을 통해 테이블 안에 별 찍기  (약간 쉽지 않음)

<!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 type="text/css">
        table{
            width:500px;
            border-collapse: collapse;   /*바깥선과 안쪽선을 합치기 위함*/
        }

        table, td{
            border: 1px solid black;
        }
    </style>
</head>
<body>

    <script type="text/javascript">
       console.log('시작');

       //입력 -> 처리 -> 출력 을 분리해서 쓰도록 하기
       let html = '';

        document.write('<table border="1" width="500">');
            for(let row=1;row<=10;row++){
                html+='<tr>';
                    for(let col=1;col<=10;col++){
                        if(col<=row){    //열이 행보다 작을 때 별을 찍는다는 문장
                            html+= '<td align=center>*</td>';  //html에 계속 쌓아가면서 만들기
                        }else{  //열이 행보다 크면 그냥 공백 테이블을 출력하도록 함
                            html+='<td></td>'
                        }
                    }

                html+= '</tr>';
            }
           html+='</table>';

           document.write(html);
       console.log('끝');
    </script>
</body>
</html>
 

해당 모양이 나오게 됨

 

for문/while문/ do while문 사용해보기

<script type="text/javascript">
       console.log('시작');

       //유한루프
       //1-5까지 출력
       for(let i=1;i<=5;i++)
       {
       //console.log(i);
       }

       /*
       무한루프(제한조치를 포함해서)

       let i=1;
       while(i<=5){
        console.log(i);
        i++;
       }
        */

        //do 안쪽 반드시 1번 실행할 수 있도록 함
       let j =1;
       do{
        console.log(j);
        j++;
       }while(j<=5);



       console.log('끝');
    </script>

 

* continue와 break의 기능

<!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 type="text/css">
       
    </style>
</head>
<body>

    <script type="text/javascript">
       console.log('시작');

       for(let i=1;i<=5;i++){
        //3일 때 정지

        if(i==3){
           continue;  //진행이 되다가 3이 되는 순간 증감식으로 돌아가기 때문에 3은 출력이 되지 않게된다.

            // break;  //진행이 되다가 3이 되는 순간 멈춰버리기 때문에 3까지만 출력이 된다.
        }

        console.log(i);

       }
       console.log('끝');
    </script>
</body>
</html>

 

* 9*9단 만들기(과제)

<!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 type="text/css">
        table{
            width:1000px;
            border-collapse: collapse;   /*바깥선과 안쪽선을 합치기 위함*/
            border: 1px solid black;
            background-color: rgb(100, 161, 161);
        }
       

        tr:nth-child(even){
            border: 1px solid black;
            background-color: #265ca1;
        }
    </style>
</head>
<body>

    <script type="text/javascript">
        console.log('시작');
 
        //입력 -> 처리 -> 출력 을 분리해서 쓰도록 하기
        let html = '';
 
         html+='<table border="1" width="500">';
               
                    html+='<tr>';
                    html+='<td align=center></td>'
                    for(title=1;title<=9;title++){
                    html+='<td align=center>'+'x'+title+'</td>';
                    }
                    html+='</tr>';
               
               

                for(let row=1;row<=9;row++){
                   
                    html+='<tr>';
                    html+='<td align=center width="100">'+row+'단</td>';
                   
                       
                   
                     for(let col=1;col<=9;col++){
                       
                        html+= '<td align=center>'+row+'x'+col+'='+row*col+'</td>';     //html에 계속 쌓아가면서 만들기
                     }
                 html+= '</tr>';
             }
            html+='</table>';
 
            document.write(html);
        console.log('끝');
     </script>
</body>
</html>
 

구구단 (9X9) 결과표

 

=> 표의 th, tr, td에 대해서 복습하고 원리를 확실히 파악하는 것이 중요하다고 생각했다^^

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형

'Programming > HTML+ CSS + JAVASCRIPT' 카테고리의 다른 글

[JAVASCRIPT] 객체  (0) 2023.08.11
[JAVASCRIPT] 함수  (0) 2023.08.10
[JAVASCRIPT] HTML 동작 구현  (0) 2023.08.08
[CSS]HTML 디자인2  (0) 2023.08.08
[CSS] 웹 서버 정리 + HTML 디자인  (0) 2023.08.04
'Programming/HTML+ CSS + JAVASCRIPT' Related Articles more