eval()
- 문자열로 된 코드를 실제 코드로 변경할 때 사용한다.
<script type="text/javascript">
function calcu(){
var calStr = document.querySelector("#calStr").value
document.querySelector("#show").innerText = calStr+"="+eval(calStr)
}
</script>
연산식을 입력하세요:<input type="text" id = "calStr" >
<input type='button' value='계산' onclick="calcu()"/>
<h2 id= "show"></h2>
## eval() 함수 응용 - 계산기 만들기
1. 게산기 형태의 화면 구성하기 : table
2. 각 항목별로 클릭시, 전달될 이벤트 핸들러 함수 설정
3. 이벤트 핸들러 함수
1) 매개변수를 통해 클릭한 문자열 전달
2) 계산식을 출력한 내용 상단 cell에 출력(문자열 누적)
3) 계산식 버튼(cell) 중 = 클릭 시, eval 함수를 통해 결과값 출력처리
<body>
<h2>계산기</h2>
<table id = "tab01" style="width : 50%; height:70%" >
<col width = "25%"><col width = "25%"><col width = "25%">
<tr><td style="height:20%; text-align: right" colspan="4">0</td></tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>+</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>*</td>
</tr>
<tr>
<td>C</td>
<td>0</td>
<td>=</td>
<td>/</td>
</tr>
</table>
</body>
<script type="text/javascript">
var tds = document.querySelectorAll("#tab01 td");
//출력할 td
for(var idx=0;idx<tds.length;idx++){
// <td
// this.innerText : td 중에 이벤트가 일어난 객체를 지칭
// tds[0].innerText : 상단 내용 출력하는 부분
// eval(tds[0].innerText) : 상단의 내용을 함수로 계산 처리(문자열 ==> 계산)
tds[idx].onclick = function(){
// 초기 출력 0을 지워주고 입력 시작
if(tds[0].innerText=='0') tds[0].innerText = ""
// = 버튼식 계산 처리
if(this.innerText=='=') {
// eval 함수를 통해서 지금까지 입력된 내용 계산 처리
tds[0].innerText=eval(tds[0].innerText)
}else{
// 그외 누적 처리 : 입력된 버튼 내용을 문자열 누적
tds[0].innerText+=this.innerText
// C 일때는 초기화 0으로 처리
if(this.innerText=='C') tds[0].innerText = "0"
}
}
}
</script>
아자아자 화이팅