記述式計算機用に「calc_inline.html」を作成して、保存します。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>記述式計算機</title> </head> <body> <h3>記述式計算機</h3> <hr>
</body> </html>
フォームの構造は非常に単純です。テキスト入力のフィールドと、計算実行のボタンだけ配置します。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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>タグを使って、ID名「rireki」を指定します。
<div id="rireki"></div>
<script type="text/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()は、フォームから呼び出されます。
1行目、変数sには、フォームのテキストボックスの内容がそのまま入ります。
2行目、履歴用の変数rrkに対し、計算結果を直接代入します。右辺の式では、フォームからの問題文そのままの変数sと、関数eval()を使った計算結果の両方があります。計算結果には色を着けています。
3行目、ID名rirekiに変数rrkを出力しています。
計算機としてはこれで機能します。
関数eval()が、文字式を計算するという関数なので、式の書き方さえ守っていたら答えがちゃんと表示されるのです。
【この時点の calc_inline.html を別枠で表示】
計算式の書き方や関数の種類の解説を表示させましょう。
「使い方」はこちらのリンクをクリックして新しいウィンドウで開きます。
ファイルが表示されたら、calc_inline.htmlと同じフォルダに「名前を付けて保存」します。ファイル名は「calc_inline_text.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>
ファイルが保存できたら、リンクを作って計算機のHTMLから呼びだして開きます。
<a></a>で挟んだ部分がリンクとなります。
<img>タグを使ってアイコンを表示し、<a>タグで囲えば、アイコンがリンクボタンの役割になります。
<a>タグの「href」属性にはURLを指定します。同じサーバーやフォルダにある場合はパス名を省略して表記できます。
オンラインでリンクしたい場合は、「http://」で始まる転送先のURLをブラウザのアドレスバーからコピーしてhrefに貼り付けます。
ここでは「target」属性が重要な役割をしています。「_」で始まる予約語には意味が設定されていて、「_blank」は新しいウィンドウ（またはタブ）を開いて表示することを意味しています。そうしないと、計算式が消えてしまいますので、必ず設定して起きましょう。
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>
画面を半分にして、右側に使い方を表示したいと思います。
テーブルを作って段組をしましょう。
テーブルと履歴の表示は、段組の左側に起きますので、テーブルの1列目にそのまま入れてしまいます。
テーブルの2列目には<iframe>を使って使い方のHTMLを表示させます。リンクはsrc属性にURLを指定します。また、widthとheightでフレームの大きさも決めておきます。使っている画面のサイズに合わせて見やすい大きさに調節すると良いでしょう。
計算式の入力用テキストボックスが大きいときはsizeを小さくしてください。
フレームは幅が400で、テキストボックスは100なのに、テキストボックスの方が幅が大きくなっています。
これはwidthやheightがドット数であるのに対して、sizeは文字数を示しているからです。ただし、フォントによって文字幅が変わるので、正確に表示の文字数とは合いません。
また、テキストボックスはsizeで表示の文字数を指定しても、それ以上の文字を入力することができます。
先に作ったリンクの部分（青字抹消）はいらなくなりますので、削除しても良いのですが、<iframe>タグの中に移動しておきます。
この中に置くと<iframe>タグが使えないブラウザの場合では、その部分が表示されるので、元々のリンクと同じ動きをします。