このソースコードは以下のようになります。
<HTML>
<HEAD>
<TITLE>JavaScript Sample(Easy Calculator)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function calc(ch) {
if (ch == "=") {
document.form1.text1.value =
eval(document.form1.text1.value);
} else if (ch == "C") {
document.form1.text1.value = "";
} else {
document.form1.text1.value += ch;
}
}
// --> JavaScript対応ブラウザでないと動作しません。
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1" ACTION="">
<TT>
<INPUT TYPE="text" NAME="text1" VALUE="" SIZE=26>
<P>
<INPUT TYPE="button" VALUE=" 7 " onClick="calc('7')">
<INPUT TYPE="button" VALUE=" 8 " onClick="calc('8')">
<INPUT TYPE="button" VALUE=" 9 " onClick="calc('9')">
<INPUT TYPE="button" VALUE=" * " onClick="calc('*')">
<P>
<INPUT TYPE="button" VALUE=" 4 " onClick="calc('4')">
<INPUT TYPE="button" VALUE=" 5 " onClick="calc('5')">
<INPUT TYPE="button" VALUE=" 6 " onClick="calc('6')">
<INPUT TYPE="button" VALUE=" / " onClick="calc('/')">
<P>
<INPUT TYPE="button" VALUE=" 1 " onClick="calc('1')">
<INPUT TYPE="button" VALUE=" 2 " onClick="calc('2')">
<INPUT TYPE="button" VALUE=" 3 " onClick="calc('3')">
<INPUT TYPE="button" VALUE=" − " onClick="calc('-')">
<P>
<INPUT TYPE="button" VALUE=" 0 " onClick="calc('0')">
<INPUT TYPE="button" VALUE=" C " onClick="calc('C')">
<INPUT TYPE="button" VALUE=" = " onClick="calc('=')">
<INPUT TYPE="button" VALUE=" + " onClick="calc('+')">
</TT>
</FORM>
</BODY>
</HTML>
ボタンを押した際に onClick="..." で指定した関数 calc()が実行されます。
clac()などの関数は通常、<HEAD>〜</HEAD>の間で定義しておきます。