2013년 7월 9일 화요일

(130709) 12일차 Cul.html (Java Script Event를 이용한 계산기 프로그램)

 - 소스
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title> 계산기 </title>
</head>
<body>
<center>
<script type = "text/javascript">
function multipleF(){
document.form.field.value += '*';
}
function divisionF(){
document.form.field.value += '/';
}
function minusF(){
document.form.field.value += '-';
}
function clearF(){
document.form.field.value = '';
}
function sevenF(){
document.form.field.value += '7';
}
function eightF(){
document.form.field.value += '8';
}
function nineF(){
document.form.field.value += '9';
}
function zeroF(){
document.form.field.value += '0';
}
function fourF(){
document.form.field.value += '4';
}
function fiveF(){
document.form.field.value += '5';
}
function sixF(){
document.form.field.value += '6';
}
function equalsF(){
document.form.field.value = eval(document.form.field.value); // 문자열을 자바스크립트화 시킴 (코드 평가)
}
function oneF(){
document.form.field.value += '1';
}
function twoF(){
document.form.field.value += '2';
}
function threeF(){
document.form.field.value += '3';
}
function plusF(){
document.form.field.value += '+';
}
</script>

<form name = "form">

<table border = "1" cellspacing = "2">
<tr>
<td>
<input type = "text" name = "field" size = "20" value = "">
</td>
</tr>
</table>

<table border = "1" cellspacing = "2">

<tr>
<td><input type = "button" name = "multiple" value = "*" onClick = "multipleF()" size = "5"></td>
<td><input type = "button" name = "division" value = "/" onClick = "divisionF()" size = "5"></td>
<td><input type = "button" name = "minus" value = "-" onClick = "minusF()" size = "5"></td>
<td><input type = "button" name = "clear" value = "c" onClick = "clearF()" size = "5"></td>
</tr>
<tr>
<td><input type = "button" name = "seven" value = "7" onClick = "sevenF()" size = "5"></td>
<td><input type = "button" name = "eight" value = "8" onClick = "eightF()" size = "5"></td>
<td><input type = "button" name = "nine" value = "9" onClick = "nineF()" size = "5"></td>
<td><input type = "button" name = "zero" value = "0" onClick = "zeroF()" size = "5"></td>
</tr>
<tr>
<td><input type = "button" name = "four" value = "4" onClick = "fourF()" size = "5"></td>
<td><input type = "button" name = "five" value = "5" onClick = "fiveF()" size = "5"></td>
<td><input type = "button" name = "six" value = "6" onClick = "sixF()" size = "5"></td>
<td><input type = "button" name = "equals" value = "=" onClick = "equalsF()" size = "5"></td>
</tr>
<tr>
<td><input type = "button" name = "one" value = "1" onClick = "oneF()" size = "5"></td>
<td><input type = "button" name = "two" value = "2" onClick = "twoF()" size = "5"></td>
<td><input type = "button" name = "three" value = "3" onClick = "threeF()" size = "5"></td>
<td><input type = "button" name = "plus" value = "+" onClick = "plusF()" size = "5"></td>
</tr>
</table>
</form>

</center>

</body>
</html>


 - 결과