[Labyrinthe Noir]>[Top]>[Computer Forum]>[実用JavaScript集]>[こども工作教室]>

記述式計算機のソースと解説

<html>
<head>
<title>記述式計算機</title>
</head>
<body>
<h3>記述式計算機</h3>
<hr>

</body>
</html>

記述式計算機用に「calc_inline.html」を作成して、保存します。

<html>
<head>
<title>記述式計算機</title>
</head>
<body>
<h3>記述式計算機</h3>
<hr>
<form name="calc" onSubmit="calc_run(); return false;">
<input name="siki" type="text" size="100">
<input type="submit" value="計算">
</form>
</body>
</html>

【フォームの作成】

必要なのは数式を入力するテキストボックスと計算を実行するボタンだけです。

今回は「onSubmit」を使うため、ボタンがなくても計算が可能です。
テキストボックスの中で「Enter」または「Return」キーを押すと計算が実行されます。

「onSubmit」はフォームの内容を送信するために使いますが、ここでは、「submit」タイプのボタンやフォーム内で「Enter」キーが押された時にユーザー関数を呼び出して、計算を実行させます。
「calc_run()」を呼び出した後に、「return false」としているのは、送信するデータがないため、フォームの送信を禁止しています。

送信を許可すると、指定のメールアドレスやURLに対してデータが送信されます。今回は指定がないため、同じページを読み込んで表示がリセットされてしまいます。

 

（省略）

<form name="calc" onSubmit="calc_run(); return false;">
<input name="siki" type="text" size="100">
<input type="submit" value="計算">
</form>

<div id="rireki"></div>

（省略）

【計算履歴を表示させる】

<div>タグを使って、計算履歴を表示する場所として「rireki」を設定します。

（省略）

<div id="rireki"></div>

<script language="javascript">
rrk = "";

function calc_run() {
var s = document.calc.siki.value;
rrk = s + " = <font color='#FF0000'>" + eval(s) + "</font><br>" + rrk;
document.getElementById("rireki").innerHTML = rrk;
}
</script>

（省略）

【スクリプトを書く】

初期設定には、履歴のデータを入れる変数rrkだけ用意します。

ユーザー関数calc_run()は、フォームから呼び出されます。
変数sにフォームのテキストボックスの内容をそのまま入れます。
次に履歴を作成して変数rrkに入れます。その中で変数sの中にある計算を関数eval()を使って実行しています。計算結果は色を着けて表示しています。
最後に履歴を指定の場所（rireki）に表示しています。

【この時点の calc_inline.html を別枠で表示】

（省略）

<form name="calc" onSubmit="calc_run(); return false;">
<input name="siki" type="text" size="100">
<input type="submit" value="計算">
[<a href="calc_inline_text.html" target="_blank">HELP</a>]
</form>

（省略）

【改良点：使い方の表示】

「使い方」はこちらのリンクをクリックして新しいウィンドウで開きます。
ファイルが表示されたら、calc_inline.htmlと同じフォルダに「名前を付けて保存」します。ファイル名は「calc_inline_text.html」です。

ソースにリンク用のアンカータグを書きましょう。
<a></a>で挟んだ部分がリンクとなります。

<img>タグを使ってアイコンを表示し、<a>タグで囲えば、アイコンがリンクボタンの役割になります。

「href」オプションはURLを指定します。同じサーバーやフォルダにある場合は省略して表記できます。

オンラインでリンクしたい場合は、「http://」で始まるURLの全部をブラウザのアドレスバーからコピーしてhrefに貼り付けます。

「target」オプションでは、表示方法を指定できます。ここでは新しいウィンドウ（またはタブ）を開いて表示させています。

targetを省略すると同じウィンドウ内にリンク先のファイルを表示します。
これを省略せずに書くと「target="_self"」になります。
この他に「_parent」と「_top」がありますが、こちらは画面をフレームで分割したときの、１つ親のフレーム、最も上のフレームを示します。

（省略）

<table border="0" ><tr valign="top"><td>
<form name="calc" onSubmit="calc_run(); return false;">
<input name="siki" type="text" size="100">
<input type="submit" value="計算">
[<a href="calc_inline_text.html" target="_blank">HELP</a>]
</form>

<div id="rireki"></div>
</td><td>
<iframe src='calc_inline_text.html' width="400" height="400">
[<a href="calc_inline_text.html" target="_blank">HELP</a>]
</iframe>
</td></tr>
</table>

（省略）

【改良点：履歴と使い方を同時に表示】

使い方が別のページに表示されると、画面を切り替えないと入力ができません。
入力画面の中に使い方も表示できると便利です。
しかし、使い方の説明が長いため、これを表示すると履歴が見えなくなってしまいます。
この２つを同時に見られるように表示できないものでしょうか。

画面を半分にして、右側に使い方を表示したいと思います。
これにはテーブルが使えます。
テーブルと履歴の表示を完全にテーブルの１マスに入れてしまいます。

続いて同じ行の２マス目に<iframe>を使って指定のURLを表示させましょう。URLの表記は「使い方の表示」でリンク（緑の部分）したものと同じにします。
このとき、widthとheightでフレームの大きさを決めます。使っている画面のサイズに合わせて調節してください。

計算式の入力用テキストボックスが大きいときはsizeを小さくしてください。

フレームは幅が400で、テキストボックスは100なのに、テキストボックスの方が幅が大きくなっています。
これはwidthやheightがドット数であるのに対して、sizeは文字数を示しているからです。ただし、フォントによって文字幅が変わるので、正確に表示の文字数とは合いません。

また、テキストボックスはsizeで表示の文字数を指定しても、それ以上の文字を入力することができます。

先に作った緑の部分はいらなくなりますので、削除しても良いのですが、青の位置に移動しておきます。
こうすることで、<iframe>タグが使えないブラウザの場合に<iframe></iframe>で挟んだ部分が表示されます。

【この時点の calc_inline.html を別枠で表示】

戻る