YJ의 새벽

Java Script ( 간이계산기 ) 본문

WebFront_/Java Script

Java Script ( 간이계산기 )

YJDawn 2023. 2. 24. 18:48

 

 

 

 

-- eval ( "코드형식의 문자열" )

   --> 매개변수의 문자열을 JS 코드로 해석/수행 함수

   --> 속도가 느림 + 보안 이슈로 인해 사용 X 

 

-- new Function 사용.

-- new Function ( "return " + number+ string + number) () ;

 

 

 

 

<!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>간이계산기</title>
    <style>
        #resultBox{
            display: inline-block;
        }
    </style>
</head>
<body>
    <h1> 간이계산기 만들기 </h1>
    
    첫번째 값 : <input type="number" id="num1"><br>
    두번째 값 : <input type="number" id="num2"><br>

    <button onclick="plus()"  >+</button>
    <button onclick="minus()"  >-</button>
    <button onclick="mul()"  >*</button>
    <button onclick="div()"  >/</button>
    <button onclick="quo()"  >%</button>
    <br><br>
    계산결과 : 
   <div id = "resultBox"> </div>
    <script src="/js/05_간이계산기.js"></script>
</body>
</html>
const input1=document.getElementById("num1");
const input2=document.getElementById("num2");
const output1=document.getElementById("resultBox")

function plus(){
    output1.innerText=Number(input1.value) + Number(input2.value);
}
function minus(){
    output1.innerText=Number(input1.value) - Number(input2.value);
}
function mul(){
    output1.innerText=Number(input1.value) * Number(input2.value);
}
function div(){
    output1.innerText=Number(input1.value) / Number(input2.value);
}
function quo(){
    output1.innerText=Number(input1.value) % Number(input2.value);
}

 

 

 

 

간이계산기

간이계산기 만들기

첫번째 값 :
두번째 값 :


계산결과 :

 

 

 

 

 

 

 

 

 

 

 

 

 

>>>>>>>>>>>> 코드를 간단하게 줄여보자 .

 


    첫번째 값 : <input type="number" id="num1"><br>
    두번째 값 : <input type="number" id="num2"><br>

    <!-- 여기서 this == 클릭이 된 버튼 .(자기자신) -->
    <button onclick="calc(this)" >+</button>
    <button onclick="calc(this)" >-</button>
    <button onclick="calc(this)" >*</button>
    <button onclick="calc(this)" >/</button>
    <button onclick="calc(this)" >%</button>
    <br><br>

    계산결과 : 

   <div id = "resultBox"> </div>
const input1=document.getElementById("num1");
const input2=document.getElementById("num2");
const output1=document.getElementById("resultBox")

function calc(btn){
    
    const op = btn.innerText;     // + - x / %
  
    const n1= Number(input1.value);
    const n2= Number(input2.value);

    output1.innerText=new Function("return "+n1+op+n2)();
}

 

 

 

 

 

 

 

 

 

 

 

 

 

'WebFront_ > Java Script' 카테고리의 다른 글

Java Script ( 정규표현식 )  (0) 2023.02.27
Java Script ( 이벤트 )  (0) 2023.02.24
Java Script ( 변수 )  (0) 2023.02.24
Java Script ( 채팅창구현 )  (0) 2023.02.23
Java Script ( DOM , 요소접근방법 )  (0) 2023.02.23
'WebFront_/Java Script' Related Articles more
Comments