| ■ このページについて
このページは，Ｊａｖａｓｃｒｉｐｔを用いたインタラクティブなホームページ型教材を作成しようと考えておられる方への参考として，作者が学んできたことの要点を記述するものです．作者自身，教育工学もJavascriptも専門ではなく，充分勉強する時間もないため，内容的に物足りないと思います．これらについてさらに深く学びたい方は，その種のホームページや参考書をお読みください． また，ホームページとして公開するには，十分調べて正確に記述すべきですが，時間的余裕も能力もありません．そこでこのページは，「アサオの言いたい放題」「アサオ節全開」というスタイルで，初心者に分かりやすいことだけを目指して多少の正確さを犠牲にして書きます． 教育目的に絞れば，Ｊａｖａｓｃｒｉｐｔの全部をマスターする必要はなく，限られた構文でほとんどの目的を達成することができます．むしろほとんどの技術は，使わないと言った方が実態に合うと思います．（まずフレームは使いません−−印刷に対応せず，画面も狭くなり，集中力の不足する生徒に外の景色を見せているようなことになるからです．ステイタスバーに文字を表示したり，画面の色を変えたり，音を出したりするのも必要とは言えないでしょう．・・・）大事なのは，応答することです． |
視聴覚機器，特にコンピュータを用いた教育の考え方については，「教育工学」関係の図書をお読みください．
比喩的に言えば，教育工学の手法は，□□ハンバーガー，□□ドーナツのような外食産業において，一定水準以上のサービスを多数者に提供するための技術と似ています．これに対して，家庭教師や個人指導の手法は，和風料理店において，なじみの客の好みに応じた料理を提供するノウハウと似ています(非常に高価な料理です．)． |
| ■ ＨＴＭＬによる応答形ホームページ
次の図は，生徒が（先生の代わりに）パソコンから情報を取り入れている様子を図示したものです．インターネットを利用した情報収集においては、図の(1)のみで学習が成り立ちます．また，シミュレーション（コンピュータ模擬実験）のような場合にも図の(1)に示した一方向の情報伝達のみで学習が成り立ちます．  ホームページでこの条件を満たすためには，生徒の解答(2)−−入力は，マウスやキーボードから行われるのが普通−−が正しいか間違っているかに応じて「分岐する」ことが最低条件となります．分岐をＨＴＭＬのリンクだけで実現するには，次のような形が考えられます． (ただし，ア にはanswer1-1.htmへの，イ にはanswer1-2.htmへのリンクがかけられているものとします．) -----question1.htm------------------------------ (1) 問題：「現在の日本の首都はどこですか．」 ア 京都 イ 東京 -----answer1-1.htm------------------------------ 住めば都といっても，首都とは
-----answer1-2.htm------------------------------ 正解です． -----------------------------------------------
|
グラフィック機能を用いたシミュレーション型教材を作るには，Javaが適していると言われています．
JavascriptはJavaとは全く別のものです．Javascriptは，ブラウザをインタプリタとして利用するものなので，HTMLで作成したものに少しばかり書き加えるだけで容易に利用できます．またプログラムの中身(ソース)は公開されますので，気に入ったホームページの作成方法からヒントを得ることができます−−著作権上保護されるのは「表現」です．工業の分野で登録によって保護される特許権や実用新案権と異なり，そこに用いられている「アイデア」は，保護の対象ではありません．そこで，Javascriptで作られたホームページからは，プログラミング上のアイデアを，お互いに学びながら向上していける利点があります． (1)と(3)は，いずれも教える側から学ぶ側に向けて出される情報ですが，その区別はどこにあるでしょうか？ (3)は(2)よりも後にあるのです．(ジョークをいっているのではありません：学習する側が答えた内容(2)に対して，それが合っているか間違っているか，間違っている場合のヒントを示してさらなる回答を求めるかなど，(3)は学習する側の行動に対して評価を与えるものです．)
ホームページとするファイルはファイル名．htmまたはファイル名．htmlという形で，ドット（ピリオド）の後ろにhtmまたはhtmlを付けます．
|
| ■ Javascriptを用いた応答形ホームページ
Javascriptを用いれば，正答，誤答に応じたメッセージを簡単に出すことができます．選択肢「ア 京都，イ 東京」のいずれをクリックしたかに応じて出すべき図を差し替えます．（すでに表示されている画面の一部を変化させる場合，図を入れ替える方が文字を入れ替えるよりも簡単です．） 次の例では，選択肢「ア 京都，イ 東京」からJavascript疑似プロトコル（リンクの形式を借りて関数を呼び出す仕組みのようなもの）を用いて採点関数に数値を渡し，採点関数は渡された数値に応じて，white.gifというメッセージ用の図（白紙）をyes.gif，no.gifのいずれかに差し替えます． ＜例１＞ |
ホームページに貼り付けることができる画像形式として，jpg，gifなどがあります．gif特許問題を避けるためにpng形式も利用できるそうですがあまり見かけません.
Javascriptでは，Ｃと同様にコーディングの形式(プログラムの書き方)は自由です−−何列目に何を書かなければならないというような約束はありません．多くの解説書では，Ｃの先駆者に習ってＫＲ式(この場合のＫＲは2人の人の名前)で書くようです(関数本体の始まりのブレースを()の直後に置くなど)が，私はネスト(入れ子)が深くなったときの点検のために { と } とを同じ縦列に書くスタイルに決めています． ホームページに使えるスクリプト言語(script language)でJavascript以外にマイクロソフト社独自のものがありますので<script language="javascript">......</script>はおまじないとして必ず書きます．<script language="javascript">......</script>の部分は，そのファイル内のどこにあってもよいのですが，本文<body>......</body>の中にあると，画面上の文字や画像などと混乱しやすいので，私はヘッダ部分<head>......</head>に置いています． |
|
function saiten(anum){...}が関数の定義です．これを書いたからといって関数が実行されるのではありません．この関数は saiten(x); の形で書かれたら実行されます．この例では，<a
href="javascript:saiten(1)">ア 京都</a>のところと，<a href="javascript:saiten(2)">イ 東京</a>のところに関数の実行文がありますが，これらはリンク同様のものなので，その文字がクリックされたら実行されます．「ア 京都」がクリックされたら，関数saiten()は引数1を受け取ります．そこで，関数定義を見ると引数をanumで表わしているので，anumが１ならば，document.kekka1.srcに
"no.gif"が代入されます．これで×が出ます．
蛇足ですが，関数定義があって，関数の実行文がなければ，関数は実行されません．関数定義がなくて，関数実行文があるとき，その関数が左記saiten()のようにJavascriptの組込関数にないものであれば，エラーメッセージが出ます．このエラーメッセージはファイル読込み時でなく，左の例ではクリックしたときに出ます． |
関数の中に記述された事柄は，関数が呼び出されてから実行されるため，上記の"yes.gif","no.gif"はホームページ閲覧時にはまだサーバ側にあり，解答を選択してから呼び出しに行きます．これに対して，次のようにメッセージに使う画像ファイルをあらかじめメモリに呼び出しておき，解答が選択されたときメモリから出すようにすると，応答が速くなります．
＜例２＞ |
Ｃと同様に，Javascriptでは等しいかどうかを調べる演算子は == です．これに対して，演算子 = は右辺の値を左辺の変数に代入します．
Image()型のオブジェクトを作って，それにmessage21という名前を付けます．message21のソ−スにyes.gifを代入します．message22についても同様です．これらはファイルが読み込まれたときに実行されます．つまりmessage21,mesage22はメモリ上にあります．
左の例のように同種のものに一度に名前を付けるには，配列を用いることができます． message2 = new Array(); //message2は配列です．
この場合，関数saiten()による画像差し替えは，document.kekka2.src= message2[1].src;などとなります． |
|
|
|
次の例は，テキストボックスによる記述式の解答欄を作り，そこに書かれた文字を採点するものです．ソースを見れば解答が分かりますが，ソースが読めるほどの基礎学力があればほめるべきことなので気にしないことにしています．（もちろん，ソースを見ても簡単には解読できず，元の問題をまじめに考えた方がはるかに簡単となるように変形することはできます．）
|
テキストボックスやボタンはフォームの中に置きます．ボタンが押されたら(onClick)，関数saiten3()が呼び出されます．この関数はdocumentのうち，q3という名前のフォームの中の，t31というテキストボックスの値が"東京"と一致しているかどうか文字列として照合します．一致していればmessage31さもなけれれば32に入れ替えます．
テキストボックスを用いたこの形の教材では，初めに使用する生徒には空欄が見えていますが，次の時間に使用する生徒には，前の時間に他の生徒が記入した解答が残っています．<input type="text" name="t31" size="4" value="">による初期化は１回きりなので，後で述べる完成版のように更新することが大切です． |
|
(1) 問題：「現在の日本の首都を漢字で書きなさい．」 |
さて，マウス選択方式とテキストボックス入力方式とを比較すると，どちらが教材に適しているでしょうか？じっくり考えてほしい問題で，まぐれ当たりを避けたいという願いが強ければ，テキストボックスがよいでしょう．しかし，生徒の反応が非常に重くて，教材に向かわせるのが精一杯というような場合は，選択肢の数を増やしてマウス選択にする方が初めのつかみの成功度が高くなるでしょう．また初回に学習するのでなく，全体の範囲を能率よく復習したり，インチキする必要のない大人向けにはマウス選択が喜ばれるでしょう．さらに，多くのテキストボックスに自由に記入させるのは，両手が自由に使える生徒を想定したものですので，手の不自由な方は困るかもしれません−−タブキーを用いると，フォームの要素となっているテキストボックスやボタンへフォーカスを順に移動させることができますが，タブキーとenterキーを片手で操作するのは簡単ではありません．
|
上記のマウス選択方式の完成版
＜例４＞ |
ア 京都 イ 東京
|
上記のテキストボックス方式の完成版
＜例５＞ |
■■■ ＜例５＞ 実際の見え方 ■■■ 左の空欄更新関数renew()のうち，document.q5.t51.value = " ";の部分はいらないはずです．document.q5.t51.value = "";だけで働くはずですが，前のメモリ状態までは初期化されないと思うので，私はなぜかこのように書く習慣にしています． 空欄更新関数renew();を書く場所は重要です．ブラウザがファイルを前から読んでいくので，もし，<input type="text" name="t51" size="4" value="">よりも前にrenew();を書くと，document.q5.t51.valueを変更しなさいというが，そんなものはない(前方参照のため)という意味で，ファイル読み出し時にエラーメッセージが出ます．だから，この関数の実行文はボディの最後においています．同様の内容を実行するために，onLoad()という組込関数を利用する方法も考えられますが，onLoad()関数に複雑な処理をさせると，動きが不安定になるとどこかに書かれていましたのでこの方法は調べていません． |