컴퓨터는 잘못이 없다..

[JavaScript]연산자 퀴즈와 innerText 참조 알아두기!(헷갈리는 개념!) 본문

공부/JavaScript

[JavaScript]연산자 퀴즈와 innerText 참조 알아두기!(헷갈리는 개념!)

도토리까꿍v 2020. 11. 9. 18:32
Contents 접기

[퀴즈1]

└문제

키가 너무 작거나 몸무게가 너무 크면 탈 수 없는 놀이기구가 있다. 키는 150이상, 몸무게는 100미만이 기준이다.

키와 몸무게를 입력하고 확인하기 버튼을 누르면 해당 놀이기구를 탈 수 있는지 없는지 메세지를 p요소의 innerText로 출력하는 프로그래밍을 해보세요. 탈 수 있습니다. or 탈 수 없습니다.

        

[퀴즈1 답안]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step08_exemple.html</title>
</head>
<body>
    <h1>논리 연산자 테스트 예제</h1>

    <input type="text" id="height" placeholder="키를 입력하세요...">
    <input type="text" id="weight" placeholder="뭄무게를 입력하세요...">
    <button id="checkBtn">놀이기구를 탈 수 있는지 확인하기</button>
    <p id="result"></p>
    <script>

        document.querySelector("#checkBtn").addEventListener("click",function(){
            let yes = "탈 수 있습니다."
            let no = "탈 수 없습니다."
            //1. 입력한 키를 읽어온다.
            let height =document.querySelector("#height").value;
            //2. 입력한 몸무게를 읽어온다.
            let weight =document.querySelector("#weight").value;
            
            let result = document.querySelector("#result");

            //3.키가 150이상이고 몸무게가 100미만이면 탈 수 있습니다를 출력, 그게 아니면 탈 수 없습니다. 를 출력!
            if(height>=150&&weight<100){
                result.innerText = yes;

            }else{
                result.innerText = no;
            }

            //위 3.을 ||로만 구현해보기!
            // if(height<150||weight>=100){
            //     result.innerText = no;
            // }else{
            //     result.innerText = yes;
            // }
            
        });
        
    </script>
</body>
</html>

 

[퀴즈1 해설]

 

 

[퀴즈2]

└문제

아이디는  "gura" 비밀번호는 "1234" 가 맞는 정보이다. 아이디 와 비밀번호를 입력하고 인증하기 버튼을 눌렀을때 

해당 정보가 일치하는지 판별해서 일치하면 p 요소의 innerText 로  "인증 되었습니다." 를 출력하고

일치하지 않으면 "아이디 혹은 비밀번호가 틀려요" 를 출력하도록 프로그래밍 해 보세요. 

[ hint ]

같은지 비교하는 비교 연산자  == 

[퀴즈2 답안]

<!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>
    <input type="text" id="inputId" placeholder="아이디입력...">
    <input type="password" id="inputPwd" placeholder="비밀번호입력...">
    <button id="authBtn">인증하기</button>
    <p id="result">인증하기</p>

    <script>
        document.querySelector("#authBtn").addEventListener("click",function(){

            let id = document.querySelector("#inputId").value;
            let pwd = document.querySelector("#inputPwd").value;
            let result = document.querySelector("#result");
            if(id=="gura" && pwd=="1234"){
                result.innerText = "인증되었습니다.";
            }else{
                result.innerText= "아이디 혹은 비밀번호가 틀려요";
            }

        });
    </script>
</body>
</html>

 

 

[innerText]

위 코드에서 헷갈렸던 내용!

let result = document.querySelector("#result"); 하고 result.innerText = "인증되었습니다" 로 하면 p태그 내용이 

인증되었습니다 로 바뀌는 반면

 

let result = document.querySelector("#result").innerText 하고 result = "인증되었습니다." 로 하면 p태그 내용이

인증되었습니다 로 바뀌지 않는다.

 

이유가 뭘까?

1번코드를 let result = document.querySelector("#result"); 하고 result.innerText = "인증되었습니다" 라고 하고

2번코드를 let result = document.querySelector.innerText("#result"); 하고 result = "인증되었습니다"라고 해보자.

 

1번 코드 stack과 heap상태

2번 코드 stack과 heap상태

 

 

 

 

저작자표시

'공부 > JavaScript' 카테고리의 다른 글

[JavaScript]document객체 참조할 수 있는 키 값 보는 방법, document 객체 의미  (0) 2020.11.10
[JavaScript]증감연산자  (0) 2020.11.09
[JavaScript]비교연산자, ==와 ===의 차이  (0) 2020.11.09
'공부/JavaScript' Related Articles more
Comments