단비의 코딩 공부 blog

[Vanilla JS]study 2일차 - 조건문 본문

javascript&jquery

[Vanilla JS]study 2일차 - 조건문

황굽달 2022. 11. 23. 09:56

1. 기본 if문

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS 조건문</title>
        <script>
            //제어문 : 코드의 흐름을 제어
            //FIFO(first in first out) : 먼저 쓴 코드를 먼저 처리하고, 나중에 쓴 코드를 나중에 처리한다.

            /* 
                //if else문 : 조건식에 따라 코드를 다르게 실행
                if(조건식){
                    //참표현식
                }else{
                    //거짓표현식
                }
            */

            //점수가 80점 이상이면 [합격], 그렇지않으면 [불합격]이라는 경고창을 띄우시오.

            var score = prompt('점수입력', '0~100사이 정수 입력');
            
            if(score >= 80){
                alert('합격');
            }else{
                alert('불합격');
            }
        </script>
    </head>
    <body>
    
    </body>
</html>

2. 다중 if문

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS 조건문</title>
        <script>
            /*
            - 다중if문 (if else if문) : 결과 코드가 3개 이상일 때 사용
            if(조건식1){
                //조건식1이 참일때 표현식
            }else if(조건식2){
                //조건식2이 참일때 표현식
            }else{
                //조건식1, 2가 모두 거짓일때 표현식
            }
            */

            //신입사원 연수점수가 90점 이상이면 [기획팀], 80점 이상이면 [총무팀], 나머지는 [영업팀]으로 배치

            var score = prompt('신입사원 연수점수입력' , '0~100사이 정수 입력');
            
            if(score >= 90){
                alert('기획팀');
            }else if(score >= 80){
                alert('총무팀');
            }else{
                alert('영업팀');
            }
        </script>
    </head>
    <body>
    
    </body>
</html>

3. 다중 if문 - 응용문제

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS 조건문</title>
        <script>
            //사용자에게 점수를 입력받아, 90점 이상이면 [수], 80점 이상이면 [우], 70점 이상이면 [미], 60점이상이면 [양], 나머지는 [가]로 경고창에 출력하시오.

            var score = prompt('점수입력' , '0~100사이 정수 입력');

            if(score >= 90){
                alert('수');
            }else if(score >= 80){
                alert('우');
            }else if(score >= 70){
                alert('미');
            }else if(score >= 60){
                alert('양');
            }else{
                alert('가');
            }
        </script>
    </head>
    <body>
    
    </body>
</html>

4. 논리연산자

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS 조건문</title>
        <script>
            //논리연산자 : 결과가 true/false로 나오는 연산자
            //1. &&(논리곱연산자) : 모든 조건이 true면 true반환, 그렇지 않으면 false로 반환
            //2. ||(논리합연산자) : 조건 중 하나라도 true면 true반환, 그렇지 않으면 false반환
            //3. !(부정연산자) : true면 flase를 반환, false면 true를 반환

            var ex01 = 10 > 5; //ture
            var ex02 = 10 < 5; //false

            alert(ex01 && ex02); //false
            alert(ex01 || ex02); //true
            alert(!ex01); //flase
            alert(!ex02); //true
        </script>
    </head>
    <body>
    
    </body>
</html>

5. 논리곱 if문

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS 조건문</title>
        <script>
            //엑셀과 액세스점수가 모두 70점 이상이면 합격, 그렇지 않으면 불합격으로 경고창을 반환하시오.

            var excel = prompt('엑셀점수입력' , '0~100사이 정수 입력');
            var eccess = prompt('액세스점수입력' , '0~100사이 정수 입력');

            if(excel >= 70 && eccess >= 70){
                alert('합격');
            }else{
                alert('불합격');
            }

            //&& : 모두, ~이고, 사이값(0~10)
        </script>
    </head>
    <body>
    
    </body>
</html>

6. 논리합 if문

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS 조건문</title>
        <script>
            //주민번호 뒷자리의 첫글자를 입력받아, 1혹은 3이면 [남자], 2혹은 4이면 [여자], 나머지는 [1~4사이의 정수로 입력하세요.]라는 경고창 띄우기

            var first = prompt('주민번호 뒷지리를 입력하세요' , '정수입력');

            if(first ==  1 || first == 3){
                alert('남자');
            }else if(first ==  2 || first == 4){
                alert('여자');
            }else{
                alert('1~4사이의 정수로 입력하세요.');
            }
        </script>
    </head>
    <body>
    
    </body>
</html>

7. 논리합 if문 - 응용문제

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS 조건문</title>
        <script>
            //사용자에게 월을 입력받아, 마지막일 일자를 경고창에 반환받으시오.
            //31,30,28

            var month = prompt('월을 입력하세요' , '정수입력');

            if(month ==  1 || month == 3 || month == 5 || month == 7 || month == 9 || month == 11){
                alert('31일');
            }else if(month == 4 || month == 6 || month == 8 || month == 10 || month == 12){
                alert('30일');
            }else if(month == 2){
                alert('28일');
            }

            //|| : ~이거나, 혹은, 하나라도
        </script>
    </head>
    <body>
    
    </body>
</html>

8. 부정연산자 if문

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS 조건문</title>
        <script>
            //confirm() : 확인과 취소버튼이 있는 창을 띄우는 함수
            //확인버튼을 누르면 true를 반환, 취소버튼을 누르면 flase를 반환

            var q = confirm('결제하시겠습니까?');
            //alert(q);

            //취소버튼을 눌렀을 때, [취소되었습니다.]라는 경고창 띄우기
           
            /* 
            if(q){
                
            }else{
                alert('취소되었습니다.');
            } 
            */

            if(!q){ //취소버튼을 눌렀을 때 - false인 경우만 처리
                alert('취소되었습니다.');
            }
        </script>
    </head>
    <body>
    
    </body>
</html>

9. siwch구문

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS 조건문</title>
        <script>
            //scitch : case에 따른 코드를 실행하는 조건문

            var first = prompt('첫글자입력' , '1~4');

            switch(first){
                case '1': case '3' :
                    alert('남자');
                    break;
                case '2': case '4' :
                    alert('여자');
                    break;
                default:
                    alert('14사이의 정수를 입력하라.');
                    break;
            }
        </script>
    </head>
    <body>
    
    </body>
</html>

10. 삼항연산자

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS 조건문</title>
        <script>
            //연산자 : 연산을 하는 기호
            //피연산자(연산을 당하는) : 연산을 당하는 숫자나 변수
            //1. 일항연산자 : 피연산자가 1개인 것 ex) -1, a++
            //2. 이항연산자 : 피연산자가 2개인 것 ex) 사칙연산자, 10 + 10
            //3. 삼항연산자 : 피연산자가 3개인 것 - 조건문
                //조건식?참표현식:거짓표현식;
            
           
            var score = prompt('점수입력');
            score >=80?alert('합격'):alert('불합격');  //삼항연산자
        </script>
    </head>
    <body>
    
    </body>
</html>

11. 짧은 조건문

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS 조건문</title>
        <script>
            //짧은 조건문 : 논리연산자를 이용한 조건문
            //조건식&&참표현식;
            //조건식||거짓표현식;

            var score = prompt('점수입력');

            score >=80 && alert('합격');
            score >=80 || alert('불합격');
        </script>
    </head>
    <body>
    
    </body>
</html>

12. 중첩 if문

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS 조건문</title>
        <script>
            //중첩if문 - if문을 중첩해서 사용
            /* 
                if(){
                    if(){

                    }
                }
            */

            var score = prompt('점수를 입력하세요' , '0~100사이 정수 입력');
            
            if(score >= 0 && score <= 100){
                if(score >= 80){
                    alert('합격')
                }else{
                    alert('불합격');
                }

            }else{
                alert('0~100사이의 정수로 입력해주세요.');
            }
        </script>
    </head>
    <body>
    
    </body>
</html>

13. 응용문제

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS 조건문</title>
        <script>
           //정수를 입력받아, [홀수], [짝수], [정수로 다시 입력하세요]라는 경고창 띄우기

            var score = prompt('정수를 입력하세요' , '정수 입력');
            
            if(score % 2 == 1){
                alert('홀수');
            }else if(score % 2 == 0){
                alert('짝수');
            }else{
                alert('정수로 다시 입력해주세요');
            };
        </script>
    </head>
    <body>
    
    </body>
</html>
저작자표시

'javascript&jquery' 카테고리의 다른 글

[Vanilla JS]study 4일차 - 배열과 for in문  (0) 2022.11.29
[Vanilla JS]study 3일차 - 반복문  (0) 2022.11.24
[Vanilla JS]study 1일차 - 기본문법과 변수  (0) 2022.11.22
[javascript]플러그인 없이 슬롯 머신 만들기  (0) 2022.10.20
[jQuery] 플러그인 없이 slide만들기  (0) 2022.10.12
'javascript&jquery' Related Articles more