JavaScriptサンプル(簡易電卓)

JavaScriptで簡易電卓を作ってみました。

このソースコードは以下のようになります。

    <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=" ７ " onClick="calc('7')">
    <INPUT TYPE="button" VALUE=" ８ " onClick="calc('8')">
    <INPUT TYPE="button" VALUE=" ９ " onClick="calc('9')">
    <INPUT TYPE="button" VALUE=" ＊ " onClick="calc('*')">
    <P>
    <INPUT TYPE="button" VALUE=" ４ " onClick="calc('4')">
    <INPUT TYPE="button" VALUE=" ５ " onClick="calc('5')">
    <INPUT TYPE="button" VALUE=" ６ " onClick="calc('6')">
    <INPUT TYPE="button" VALUE=" ／ " onClick="calc('/')">
    <P>
    <INPUT TYPE="button" VALUE=" １ " onClick="calc('1')">
    <INPUT TYPE="button" VALUE=" ２ " onClick="calc('2')">
    <INPUT TYPE="button" VALUE=" ３ " onClick="calc('3')">
    <INPUT TYPE="button" VALUE=" － " onClick="calc('-')">
    <P>
    <INPUT TYPE="button" VALUE=" ０ " onClick="calc('0')">
    <INPUT TYPE="button" VALUE=" Ｃ " onClick="calc('C')">
    <INPUT TYPE="button" VALUE=" ＝ " onClick="calc('=')">
    <INPUT TYPE="button" VALUE=" ＋ " onClick="calc('+')">
    </TT>
    </FORM>
    </BODY>
    </HTML>

ボタンを押した際に onClick="..." で指定した関数 calc()が実行されます。

clac()などの関数は通常、<HEAD>～</HEAD>の間で定義しておきます。