계산기 프로그램
1. add기능
2. cal기능
3. reset기능
※ cal기능의 함수에서 eval메서드를 사용이 중요하다.
우선, 기본적인 틀을 만들어야겟죠? 만들려고 하는 계산기가 실제 계산기처럼 보이기 위해서 입력태그를 다음과 같은 모양으로 순서대로 작성해 줍니다. 그리고 onclick이벤트를 통해 추가, 계산, 리셋의 세 가지 함수를 만들었습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<body>
<form>
display <input id='display' value='0' size='30'>
<br>
<input type='button' value="7" onclick="add('7')">
<input type='button' value="8" onclick="add('8')">
<input type='button' value="9" onclick="add('9')">
<input type='button' value="/" onclick="add('/')">
<br>
<input type='button' value="4" onclick="add('4')">
<input type='button' value="5" onclick="add('5')">
<input type='button' value="6" onclick="add('6')">
<input type='button' value="*" onclick="add('*')">
<br>
<input type='button' value="1" onclick="add('1')">
<input type='button' value="2" onclick="add('2')">
<input type='button' value="3" onclick="add('3')">
<input type='button' value="-" onclick="add('-')">
<br>
<input type='button' value="0" onclick="add('0')">
<input type='button' value="+" onclick="add('+')">
<br>
<input type='button' value="clear" onclick="clearDisplay()">
<input type='button' value="Enter" name="enter" onclick="compute()">
</form>
</body>
|
이제, 만들어진 틀을 가지고 호출된 함수들의 생성문(=정의문)을 작성해야합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<script>
var tmp="";//전역변수
function add(input){
tmp=tmp+input; //add버튼 클릭시
document.getElementById('display').value=tmp; //display에 보여준다.
}
function compute(){ //compute버튼 클릭시, 입력한 값들을 eval을 통해 수식화된다 ==> 그 결과가 display에 보여진다.
document.getElementById('display').value=eval(tmp);
}
function clearDisplay(){
tmp=""; //입력값을 공백으로 초기화
document.getElementById('display').value='0'; //0으로 보이도록 초기화한다.
}
</script>
|
우선, 눈여겨봐야할 몇가지가 있습니다.
보시다시피 입력된 값을 저장하고, 저장된 값을 계산하는 것을 tmp라는 변수를 통해서 해야합니다.tmp라는변수를 입력공간이자, 입력할때마다 누적되는 변수를 더해줘야합니다. add함수에서 display(input태그의 아이디)를 통해 input태그의 value입력창에 tmp라는 입력값을 저장합니다.그리고 다음 compute라는 함수에서 입력된 값을 계산해서 다시 input태그의 value입력창에 저장해야합니다.이때 변수의 선언을 전역변수로써 선언해야 두 함수에서 사용할 수 있기때문에 변수의 선언위치가 중요합니다.
두번째로는 compute함수에서 사용된 eval메서드는 자바스크립트에서 문자열을 받아서 문자열을 정수로 바꿔서 사칙연산이 되는 것이 있다면 사칙연산을 해서 결과값을 반환하고, 문자열을 정수로 반환햇을때의 사칙연산을 할 수 없는 값들이라면 그 문자열 그대로를 반환합니다. 다만, eval은 최대한 사용하기를 권장합니다. 취약점도 그만큼 많이 있기때문에 사용은 최대한 피하시길 바랍니다. 자동연산이라는 eval메서드는 보안의 취약점이라는 것들이 있습니다.
그리고 마지막 함수에서 리셋함수를 누름으로써, tmp저장공간은 공백으로 비워둠으로써, 연산할 입력값을 초기화합니다. 또한 보여지는 input.value에 0을 저장하게됩니다.
<코드결과>
'WEB 기초 > Script' 카테고리의 다른 글
| 22. 내부객체 & window객체 "총"정리 (0) | 2018.04.15 |
|---|---|
| 20. 이벤트 & window객체 (0) | 2018.04.15 |
| 19. Dom (document object model 문서객체모델)이란? (0) | 2018.04.15 |
| 18. 게시판 응용하기 (0) | 2018.04.15 |
| 17. 주소 공백 분할(String 내부객체) (0) | 2018.04.12 |