[17 Project] Calculator

 

[새로 알게 된 것]

 

1. onclick 메서드와 value 값만으로 계산기를 간편하게 만들 수 있다는 것을 알았다.

 

2. value = ' ' 로 값을 비우게 해 Clear 로 만들 수 있다. 

 

3. eval() : 문자로 표현 된 Js코드를 실행하는 함수

eval(string)

 

eval is evil? 사용을 지양하자!
  • eval()은 인자로 받은 코드를 caller의 권한으로 수행하는 위험한 함수다.
  • ES5부터 eval을 직접 호출하지 않고 간접적으로 사용한다면, 지역 범위가 아니라 전역 범위로 동작한다 (!)
  • 때문에 제3자 코드가 eval()이 호출된 위치의 스코프를 볼 수 있다.
  • 그리고 느리다! eval()을 사용하면 브라우저는 코드에 해당 변수가 있는지 확인하고 값을 대입하기 위해 일일이 검색해야한다.
  • math 객체 : 수학적인 상수와 함수를 위한 속성과 메서드를 가졌다!!! mathjs.org 

 

 

 

[내가 짠 코드]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" name="viewport">
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div class="calculator">
      <form name="forms">
        <input type="text" id="output" name="output" readonly>
        <div class="buttons">
          <section class="operator">
            <input type="button" id="add" value="+" onclick="document.forms.output.value+='+'">
            <input type="button" id="sub" value="-" onclick="document.forms.output.value+='-'">
            <input type="button" id="multi" value="x" onclick="document.forms.output.value+='*'">
            <input type="button" id="divi" value="÷" onclick="document.forms.output.value+='/'">
          <section class="numbers">
            <input type="button" value="7" onclick="document.forms.output.value+='7'">
            <input type="button" value="8" onclick="document.forms.output.value+='8'">
            <input type="button" value="9" onclick="document.forms.output.value+='9'">
            <input type="button" value="4" onclick="document.forms.output.value+='4'">
            <input type="button" value="5" onclick="document.forms.output.value+='5'">
            <input type="button" value="6" onclick="document.forms.output.value+='6'">
            <input type="button" value="1" onclick="document.forms.output.value+='1'">
            <input type="button" value="2" onclick="document.forms.output.value+='2'">
            <input type="button" value="3" onclick="document.forms.output.value+='3'">
            <input type="button" value="." onclick="document.forms.output.value+='.'">
            <input type="button" value="0" onclick="document.forms.output.value+='0'">
            <input type="button" value="C" onclick="document.forms.output.value=''">
          </section>
          <input type="button" id="btn_eq" value="=" onclick="document.forms.output.value=eval(document.forms.output.value)">
        </section>
        </div>
      </form>
    </div>
  </body>
</html>

 

 

 

 

 

참고: velog.io/@modolee/javascript-eval-is-evil