JavaScriptを用いたインタラクティブな数学教材の開発

　WWWサーバー上に数学の教材を置き，それらをWWWブラウザーで利用させるとき，一方的に知識を押し付けるのでなく，WWWブラウザー上で入力するパラメーターを変更させることにより，コンピューターに異なる結果を表示させ，学習者の理解を深めることを目的とした教材の開発を試みた。

1 ねらい（CGI・JavaScript・Java）

　普通Webサーバーは静的な情報(テキストやイメージ，音声)をブラウザーに送信する。ユーザーのアクションにより動的に変化するドキュメントを作るためにはCGI・JavaScript・Javaなどいくつかの手法がある。

　CGIはPerl，sh，Cなどをプログラムをサーバー内に置いて実行されるので，サーバーやUNIXの知識が必要であるため，利用するには作成者に多くの負担がかかる。セキュリティーホールになり得ることから多くのサーバーでCGIの利用を禁止されているなど問題点も多い。

　JavaScriptはHTMLドキュメントの中にテキストファイルとして埋め込まれ，解釈実行するのはクライアント側のブラウザーである。このためネットワークにつながなくても実行でき，とりあえずブラウザーとエディターだけで開発に取り掛かるこどが可能であり。特定なCPUやOSに依存しないことなどの特長がある。

　JavaもまたCPUやOSに依存しないインタラクティブなホームページを作成することが出来る言語であるが，特別な開発環境が必要なこと，本格的なオブジェクト指向言語であることから，簡単に自分のホームページに取り込むには難しい言語である。

　以上ように，JavaScriptは普通のエンドユーザーがインタラクティブなホームページを作る上で最も適したプログラム言語と思われる。

2　指導計画（２分法）

(1) 目的

　2分法のアルゴリズムを理解させるためのホームページ

(2) 特長

　初期値を変えることにより，解へどのように近づいていくかをみることができる。一定の方程式だけでなく，JavaScriptで実行できる任意の関数を使った方程式を解くことができる。これはJavaScriptがインタープリターであること，数式を評価するeval()という関数を備えていることにより実現できた。またHTMLのフレーム機能を生かし，パラメーターを入力するフレームと結果を表示するフレームとを分け，利用者が結果を見ながらパラメーターを入力しやすくした。

(3) 本時の学習内容

　f(x)=x*x-3,A=0,B=2として３の平方根を求めているところ。（方程式x²-3=0(0<x<2) を解く）
f(x)の３平方根

f(x)=sin(x)-0.5 A=0 B=1実行している。（方程式sin(x)=0.5(0<x<1)を解く）

(4)リスト

1)<FRAMESET>タグを用いて，画面を左右に２分割した。利用者は最初にこのページにアクセスする。

<!-- 2bunfr.htm -->
<HTML>
<HEAD>
   <TITLE>frame</TITLE>
</HEAD>
<FRAMESET COLS="40%,*">
   <FRAME SRC="2bun.htm" NAME="jWin" SCROLLING="y">
   <FRAME SRC="dummy.htm" NAME="Result">
</FRAMESET>
</HTML>

2)２分法を実行するJavaScriptのプログラムを埋め込んだ2bun.htmのリスト

<!-- 2bun.htm -->
<HTML>
<HEAD>
<TITLE>JavaScript AND Math 1 </TITLE>
<SCRIPT LANGUAGE="JavaScript">

<!-- HIDE FROM OTHER BROWSER
var FX;
var A,B,C,x;

function set(f){
　FX=f.fx.value;
　A=eval(f.a.value);
　B=eval(f.b.value);
}

function F(A){
　var Y;
　x=A;
　with (Math) {
    Y = eval(FX);
  }
　return Y;
}

function display(r) {
　r.document.write("<TR ALIGN='right'>");
　r.document.write("<TD>",A ,"</TD> <TD>",B," </TD> <TD>" ,C,"</TD>");
　r.document.writeln("</TR>");
　r.document.writeln("<TR> </TR>");
　r.document.writeln("<TR> </TR>");
}

function check(A,B) {
　if ( F(A) * F(B) > 0 ) {
     alert("A,Bの選びかたが間違っています");
     return 1;
　}
　return 0;
}

function main(f){
var I;
　set(f);
　if ( check(A,B)==0 ) {
    r=parent.Result;
    r.document.writeln("<HTML>");
    r.document.writeln("<BODYB GCOLOR='#000000' TEXT='#FFFF00' >");
    r.document.writeln("<H4>結果</H4>")；
    r.document.writeln("<TABLE>");
    for( i=1; i >0 ; ){
        C = (A+B)/2;
        if (Math.abs(A-C)< 0.00001 ) {
            break;
        }
        if ( F(A)*F(C) > 0 ) {
            A = C;
        }
        else {
            B = C;
        }
        display(r);
    }
    r.document.writeln("</TABLE>");
    r.document.writeln("<BR> <BR>");
    r.document.writeln("</BODY>");
    r.document.writeln("</HTML>");
    r.close();
　}
}

// STOP HIDING FROM OTHER BROWSER -->
</SCRIPT>
</HEAD>
<BODYBGCOLOR="#000000" TEXT="#FFFF00" LINK="#FF0000" >
<H1> 2分法</H1>
<H4>２分法で方程式f(x)=0の解を求めます。<p>
下を入力してからボタンを押して下さい。
</H4>
<FORM name="gauss.form">
f(x)=<INPUT TYPE="text" name="fx"SIZE="20" > <p>
A=<INPUT TYPE="text" name="a" SIZE="4" > <p>
B=<INPUTTYPE="text" name="b" SIZE="4" > <p>
f(A)f(B)<0となるようにA，Bを選んで下さい。<P>
<INPUT TYPE="button" name="bu" VALUE="Calc" onClick="main(this.form)">
</FORM>
</BODY>
</HTML>

3)最初に結果を表示するためフレームであることを表示する。プログラム実行後は表示されない。

<!-- dummy.htm -->
<HTML>
<HEAD>
<TITLE>Result</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#000080">
<H4> ここに結果が表示されます</H4>
</BODY>
</HTML>