[새로 알게 된 것]
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="ｘ" 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>