外国のことについて調べた生徒が日本の時刻とその国の時刻を表示させるページを作成する。これは，「最初からすべてを示すのではなく，彼らの必要に応じて示していく」過程での事柄です。JavaScriptを利用した時間の表示の指導は，このような過程の中で発生したものです。
プリントには，次のソースファイルのみを提示しました。
<html>
<head>
<title>時刻の表示</title>
<script language="JavaScript">
<!--
function jikoku() {
dd = new Date();
document.fm1.tm1.value =
dd.toLocaleString();
window.setTimeout("jikoku()", 1000);
}
//-->
</script>
</head>
<body onload="jikoku()">
現在の時刻
<form name="fm1" action="#">
<input type="text" name="tm1"
size="30">
</form>
</body>
</html>
これで，基本的なHTMLタグの使用方法を理解している生徒は，自由に時間を表示させることができます。HTMLタグは少々間違えても表示されますが，JavaScriptは１文字間違えると正しく表示されなかったり，全角スペースと半角スペースの間違いにも反応します。これにより，正確に入力する練習にもなります。
（１）時差のある２つの時計の表示
日本以外の時間を表示させるためには，時間を進めたり遅らせたりする必要があります。これには少々複雑な操作が必要です。
<html>
<head>
<title>時刻の表示</title>
<script language="JavaScript">
<!--
zone_a = 13 * 60; // ニュージーランド
zone_j = 9 * 60; // 日本：東京
function jikoku(){
dd = new Date();
tj = nowat(zone_j,dd)
tn = nowat(zone_a,dd)
document.fm1.tm1.value=tj;
document.fm1.tm2.value=tn;
window.setTimeout("jikoku()",1000);
}
function nowat(tz, now) {
var hr, mn, sc;
var t = new Date();
t.setTime(now.getTime() +
(now.getTimezoneOffset() + tz) * 60
* 1000);
hr = t.getHours();
mn = t.getMinutes();
sc = t.getSeconds();
if (hr < 10) {
hr = "0" + hr;
}
if (mn < 10) {
mn = "0" + mn;
}
if (sc < 10) {
sc = "0" + sc;
}
return hr + ":" + mn + ":" + sc;
}
// -->
</script>
</head>
<body onload="jikoku()">
現在の時刻
<form name="fm1" action="#">
<table>
<tr><td>日本</td><td><input
type="text" name="tm1"
size="8"></td></tr>
<tr><td>ニュージーランド
</td><td><input type="text"
name="tm2" size="8"></td></tr>
</table>
</form>
</body>
</html>
これで，一つの画面に異なる２つの時刻を表示させることができます。時差のある時計を表示させるためには，タイムゾーンについて学習する必要がありますが，これについては，ソースファイル中のzone_aの部分に標準時との差の時刻を分単位で入力しておけば世界中どこの時間でも表示させることができます。生徒達はソースファイルから時間を表示させるために必要な手続きやその困難さを理解し，問題を自ら解決する能力を身につけていきます。
（２）近くにある神社のページ
神社の歴史を調べたページを作成した生徒が「占いができるページを作るにはどうすればいいか」と尋ねてきました。神社ですから「おみくじ」ができるソースファイルを提示してみました。
<html>
<head>
<title>「○○神社」</title>
<script language="JavaScript">
<!--
function MakeArray(n){
this.length=n;
}
function omikuji(){
var msg=new MakeArray(7);
msg[1]="大吉"; msg[2]="中吉";
msg[3]="吉"; msg[4]="小吉";
msg[5]="末吉"; msg[6]="凶";
msg[7]="大凶";
k1=5; //大吉
k2=7; //中吉
k3=12; //吉
k4=11; //小吉
k5=8; //末吉
k6=5; //凶
k7=1; //大凶
k2+=k1; k3+=k2; k4+=k3;
k5+=k4; k6+=k5; k7+=k6;
var day=new Date();
var time=day.getTime();
var num=(time%k7)+1;
var mes;
if(num<=k1) mes=msg[1];
else{if(num<=k2) mes=msg[2];
else{if(num<=k3) mes=msg[3];
else{if(num<=k4) mes=msg[4];
else{if(num<=k5) mes=msg[5];
else{if(num<=k6) mes=msg[6];
else{if(num<=k7) mes=msg[7];
} } } } } }
alert(mes);
}
//-->
</script>
</head>
<body>
<form name="Omikuji" method="post">
<input type="button" value="おみくじ"
onClick="omikuji()">
</form>
</body>
</html>
これで，「おみくじ」と描いてある部分をクリックすると次の比で「大吉」「中吉」「吉」「小吉」「末吉」「凶」「大凶」が現れてきます。
k1:k2:k3:k4:k5:k6:k7
文字を表示させるための配列msg[]や演算子+や%については，個別に指導する必要がありますが，「大吉」や「吉」ではなく，「Lucky」や「頑張れ」等の言葉が追加され，それぞれ個性のあるおみくじができ上がっていました。
（３）他の授業で習ったことの利用
慣用句をまとめたページや数学の公式をまとめたページを作成する生徒もいます。ここでは，座標平面上の３点を入力してその３点によってできる三角形の面積を求めるJavaScriptを示します。
<html>
<head>
<title>三角形の面積</title>
<script language="JavaScript">
<!--
function calc(){
var a1=document.fm1.ax.value;
var a2=document.fm1.ay.value;
var b1=document.fm1.bx.value;
var b2=document.fm1.by.value;
var c1=document.fm1.cx.value;
var c2=document.fm1.cy.value;
s=((b1-a1)*(c2-a2)-(b2-a2)*(c1-a1))/2;
s=Math.abs(s);
document.fm1.sur.value=s;
}
//-->
</script>
</head>
<body>
<form name="fm1">
<table>
<tr><td>点Ａ</td><td>（</td>
<td><input type="text" name="ax"
size="10"></td>
<td><input type="text" name="ay"
size="10"></td>
<td>）</td></tr>
<tr><td>点Ｂ</td><td>（</td>
<td><input type="text" name="bx"
size="10"></td>
<td><input type="text" name="by"
size="10"></td>
<td>）</td></tr>
<tr><td>点Ｃ</td><td>（</td>
<td><input type="text" name="cx"
size="10"></td>
<td><input type="text" name="cy"
size="10"></td>
<td>）</td></tr>
<tr><td colspan="5"><input
type="button" value="面積を求める"
onClick="calc()"><br>
三角形ＡＢＣ＝<input type="text"
name="sur" size="10"></td></tr>
</table>
</form>
</body>
</html>
表計算等で使われる関数と同様に，Math.abs(s)を使うだけで簡単にそのようなWebページを作成することができます。 |
