컴퓨터는 잘못이 없다..

[JavaScript]document.querySelector() 사용해보기 document.querySeletor()의 value와 innerText 사용해서 산술연산 예제(계산기) 풀어보기 본문

공부/JavaScript

[JavaScript]document.querySelector() 사용해보기 document.querySeletor()의 value와 innerText 사용해서 산술연산 예제(계산기) 풀어보기

도토리까꿍v 2020. 11. 4. 20:40
Contents 접기

[object type과 함수]

1) Console에 document.querySelector을 입력하면 f가 출력된다. 이때 f는 함수를 의미!

-단계별로 이해해보기

document. => object type의 값 호출 방법

document.querySelector() => 함수일 때의 호출 방법

document.querySelector(). => object type일 때의 값 호출 방법

document.querySelector().value => key가 value인 값을 불러와라.

 

[산술연산 예제 QUIZ]

​Q01)document.querySelector()을 이용하여 아래와 같은 화면을 구현하시오.

​

Q01 답)

*헷갈 : 자바스크립트는 비교연산자(==)는 유연하게 형변환 해서 비교해주지만 산술 연산자는 아님 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step02_example.html</title>
</head>
<body>
    <h1>산술연산 예제</h1>
    <input type="text" id="num1" placeholder="숫자 입력...">
    <button onclick="plus()">+</button>
    <button onclick="minus()">-</button>
    <button onclick="mul()">*</button>
    <button onclick="div()">/</button>

    <input type="text" id="num2" placeholder="숫자 입력...">
    <span>=</span>
    <strong id="result">0</strong>
    
    <br>
    
    <script>
       
        function plus(){
            var num1 = document.querySelector("#num1").value; 
            //num1이라는 아이디를 가지고 있는 text박스에 입력한 숫자값을 호출해서 num1에 대입합니다.
            var num2 = document.querySelector("#num2").value; 
            //num2라는 아이디를 가지고 있는 text박스에 입력한 숫자값을 호출해서 num2에 대입합니다.
            var result = parseFloat(num1) + parseFloat(num2); 
            //두 값을 float으로 형변환하여 산술연산자로 계산한 후 result변수에 대입합니다.

            document.querySelector("#result").innerText=result; 
            //result라는 아이디를 가지고 있는 텍스트의 innertext를 result로 바꿔서 출력하기.
        }

        function minus(){
            var num1 = document.querySelector("#num1").value; 
            //num1이라는 아이디를 가지고 있는 text박스에 입력한 숫자값을 호출해서 num1에 대입합니다.
            var num2 = document.querySelector("#num2").value; 
            //num2라는 아이디를 가지고 있는 text박스에 입력한 숫자값을 호출해서 num2에 대입합니다.
            var result = parseFloat(num1) - parseFloat(num2);
             //두 값을 float으로 형변환하여 산술연산자로 계산한 후 result변수에 대입합니다.

            document.querySelector("#result").innerText=result; 
            //result라는 아이디를 가지고 있는 텍스트의 innertext를 result로 바꿔서 출력하기.
        }
        function mul(){
            var num1 = document.querySelector("#num1").value; 
            //num1이라는 아이디를 가지고 있는 text박스에 입력한 숫자값을 호출해서 num1에 대입합니다.
            var num2 = document.querySelector("#num2").value; 
            //num2라는 아이디를 가지고 있는 text박스에 입력한 숫자값을 호출해서 num2에 대입합니다.
            var result = parseFloat(num1) * parseFloat(num2); 
            //두 값을 float으로 형변환하여 산술연산자로 계산한 후 result변수에 대입합니다.

            document.querySelector("#result").innerText=result; 
            //result라는 아이디를 가지고 있는 텍스트의 innertext를 result로 바꿔서 출력하기.
        }
        function div(){
            var num1 = document.querySelector("#num1").value; 
            //num1이라는 아이디를 가지고 있는 text박스에 입력한 숫자값을 호출해서 num1에 대입합니다.
            var num2 = document.querySelector("#num2").value; 
            //num2라는 아이디를 가지고 있는 text박스에 입력한 숫자값을 호출해서 num2에 대입합니다.
            var result = parseFloat(num1) / parseFloat(num2); 
            //두 값을 float으로 형변환하여 산술연산자로 계산한 후 result변수에 대입합니다.

            document.querySelector("#result").innerText=result; 
            //result라는 아이디를 가지고 있는 텍스트의 innertext를 result로 바꿔서 출력하기.
        }

        


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

 

[document.querySelector().value와 document.querySelector().innerTextext]

저작자표시

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

[JavaScript]버튼을 누를때마다 버튼 속 숫자를 1씩 증가시키기  (0) 2020.11.04
[JavaScript]number type, 대입연산자, 산술연산자, 연결연산자  (0) 2020.11.04
[JavaScript]자바스크립트 7가지 데이터타입  (0) 2020.11.04
'공부/JavaScript' Related Articles more
Comments