티스토리 뷰

development/html javascript CSS

[JavaScript] if문

Happyoon ~ 2021. 10. 13. 14:56
728x90
반응형

C언어와 동일하기 떄문에 예제만 살펴보고 넘어가보도록 하겠다. 

 

 

예제1 - 단일 if문

if문을 활용하여 isFun 이 참일 때 p에' "좋아요!" 출력하기

<!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>Step04_if.html</title>
</head>
<body>
    <p id = "one"></p>
    <script>
        let isFun = confirm("javascript가 재미 있으면 확인을 누르세요.");
        
        //만일 isFun이 true일때만 아래의 코드를 실행하고 싶다면 if문을 활용한다. 
        if(isFun){
            document.querySelector("#one").innerText = "좋아요!";

        }


    </script>
    
</body>
</html>

 

 

 

예제2 - 비교연산자를 활용하여 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>Step02_if2.html</title>
</head>
<body>
    
    <input type="number" id = "jumsu" placeholder="점수를 입력하세요">
    <button id = "checkBtn">체크하기</button>
    <p id = "result"></p>
    
   
    <script>
    /*
        input 요소에 점수 입력 후 
        체크버튼을 눌렀을 때 
        입력한 점수가 60점 이상이면
        p요소에 "합격입니다."를 출력해 보세요.
    */
        
        document.querySelector("#checkBtn").addEventListener("click",function(){
            //1. 입력한 점수를 읽어온다.
            let jumsu = Number(document.querySelector("#jumsu").value);
            //2. 만일 입력한 점수가 60점 이상이면 p요소에 "합격입니다"를 출력한다.
            if(jumsu>=60){
                document.querySelector("#result").innerText = "합격입니다";
            }
        });

    </script>
</body>
</html>

 

 

 

 

예제3 - 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>Step04_if3.html</title>
</head>
<body>
    
    <input type="number" id = "jumsu" placeholder="점수를 입력하세요">
    <button id = "checkBtn">체크하기</button>
    <p id = "result"></p>
    
   
    <script>
    /*
        input 요소에 점수 입력 후 
        체크버튼을 눌렀을 때 
        입력한 점수가 60점 이상이면
        p요소에 "합격입니다."를,
        60점 미만이면 "불합격입니다."를 출력해 보세요.
    */
        
        document.querySelector("#checkBtn").addEventListener("click",function(){
            //1. 입력한 점수를 읽어온다.
            let jumsu = Number(document.querySelector("#jumsu").value);
            //2. 만일 입력한 점수가 60점 이상이면 p요소에 "합격입니다"를 출력한다.
            if(jumsu>=60){
                document.querySelector("#result").innerText = "합격입니다";
            }
            else{
                document.querySelector("#result").innerText = "불합격입니다";
            }
        });

    </script>
</body>
</html>

 

 

 

 

예제4 - 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>
</head>
<body>
    <input type="text" id = "jumsu" placeholder = "점수 입력 ...">
    <button id = "checkBtn">성적 확인</button>
    <p id ="result"></p>
    <script>
        /*
            input요소에 점수를 입력하고
            점수가 90점 이상이면 "A 입니다."
            점수가 80점 이상이면 "B 입니다."
            점수가 70점 이상이면 "C 입니다."
            점수가 50점 이상이면 "D 입니다."
            점수가 50점 미만이면 "F 입니다."
            를 p요소에 출력하는 코드를 작성해보세요.

        */
       document.querySelector("#checkBtn").addEventListener("click",function(){
           //입력한 점수를 읽어와서 숫자로 바꾸기
            score = Number(document.querySelector("#jumsu").value);
           //p요소의 참조값을 얻어와서 변수에 담기
           let p = document.querySelector("#result");
           if(score>=90){
               p.innerText = "A 입니다.";
           }
           else if(score>=80){
                p.innerText = "B 입니다.";

           }
           else if(score>=70){
               p.innerText = "C 입니다.";
           }
           else if(score>=60){
               p.innerText="D 입니다.";

           }
           else{
               p.innerText = "F 입니다.";
           }

       });
    </script>
</body>
</html>
반응형

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] 요소 삽입 방법 / append(), beforebegin, afterbegin, beforeend, afterend / insertAdjacentElement()  (0) 2021.10.14
[JavaScript] createElement() , setAttribute()  (0) 2021.10.14
[JavaScript] 반복문(2) forEach  (0) 2021.10.13
[HTML/JavaScript/CSS]innerText와 value 관련 예제  (0) 2021.10.12
[HTML/JavaScript/CSS] 특정 요소 스타일 지정 / 좌표 활용법  (0) 2021.10.12
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함