Java Script 入門講座
Uchidas | News | Family | Yasuo | Michiko | Miho | Yuuta | Ai | あそぼーど
入門編
■JavaScriptとは
JavaScriptは，エンドユーザーがインターネット上のアプリケーションを開発するためのスクリプトです．スクリプトとは，処理手順を文字（テキスト）で記述できる言語のことであり，コンパイルせずに直接実行することが可能です．
Javaという名前が付いていますが，Java言語とは別のものであり直接的な関係はありません．言語の表現などはJavaに似ていますが，Javaが本格的なオブジェクト指向のプログラミング言語であるのに対し，JavaScriptはオブジェクトを基礎にした簡略的な言語といえます．
したがって，Javaほど複雑でなく，作成も容易に行なえます．しかし，若干のプログラミングに関する知識は要求されます．
JavaScriptは汎用的な言語ではないため，できることには当然制約があり，HTML
の機能を強化・拡張するということが大きな働きといえます．
JavaScriptの主な特徴は次のとおりです．
@オブジェクトを基礎としているが，オブジェクト指向言語のクラスや継承などはない．ただし，クラス風の書き方は一部可能となっている．
A変数にはデータ型がなく宣言も必要ない．ただし，データそのものには型がある．
Bクライアント（つまりWWWブラウザ）側でインタープリタ方式により解釈して実行される．
C基本的には，グラフィックスは使えない．
Dコード（命令）は，<SCRIPT>タグを使ってHTML中に埋め込んで記述する．
現在のところ，ブラウザによって若干動作が異なる場合があります．今回紹介する内容は，JavaScript
1.0相当の仕様に対応させています．したがって，Windows95 版のNetscape Navigator
2.01I（日本語版）および3.0（日本語版），ならびにMicrosoft インターネットエクスプローラ
3.0（日本語版）で動作確認していますが，2.01 での動作を基本としています．
■＜例１＞簡単なJavaScript js1.html
JavaScriptは，HTML内に<SCRIPT>タグを使って記述します．様式は次のとおりです．
<SCRIPT LANGUAGE="JavaScript">
JavaScriptコード
</SCRIPT>
この内容を他のHTMLと同様に，HTMLのヘッダ部つまり<HEAD>と</HEAD>の間，または本文つまり<BODY>と</BODY>の間に記述します．なお，HTMLの記述では大文字と小文字が区別されませんでしたが，JavaScriptでは明確に区別されますので注意してください．
それでは，簡単な例を作ってみましょう．たとえば，「js1.html」という名前で次のようなファイルを作ります（リスト１）．
[リスト１]
<HTML>
<HEAD>
<TITLE>JavaScript example 1</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hello JavaScript");
</SCRIPT>
</BODY>
</HTML>
このファイルをブラウザで読み込むと，"Hello JavaScript"と表示されます．ただし，この程度の内容であれば，わざわざJavaScriptを使わなくても単なるHTML
で十分であることはいうまでもありません．
■JavaScriptの基礎
JavaScriptでは，次の識別子が特別の使用目的を定められた予約語として決められています．予約語は，変数名や関数名などには使えません．また，現在のところすべての予約語が使用できるわけではありません．たとえば，「switch」や「case」などは使えないようです．
[予約語]
abstract boolean break byte case catch char class const continue default
do double else extends false final finally float for function goto if implements
import in instanceof int interface long native new null package private
protected public return short static super switch synchronized this throw
throws transient true try var void while with
JavaScriptでは，次の2種類のコメントが使えます．
// これは行末までのコメントです
/* これは
複数行に渡るコメント
です */
JavaScriptのステートメント（命令文）は予約語とユーザー定義名などを組み合わせて記述します．ステートメントの終わりには必ずしも;（セミコロン）を書く必要はありませんが，1行に複数のステートメントを書く場合にはセミコロンで区切ります．
■＜例２＞非対応ブラウザへの配慮 js2.html
前述のブラウザであれば問題ありませんが，JavaScriptに対応していないブラウザで見るとJavaScriptのコードが表示されてしまうので，これを防ぐための記述を入れる場合があります（リスト２）．
HTMLとJavaScriptのコメントを組み合わせた「<!--」と「//-->」です．これにより，JavaScript非対応ブラウザではHTMLのコメントとして扱われます．この記述は書かなくてもJavaScript自体の動作には影響ありません．
このスクリプトをブラウザで読み込むと，JavaScriptの命令による出力とHTML
の記述による出力の両方が表示されます．
[リスト２]
<HTML>
<HEAD>
<TITLE>JavaScript example 2</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
/* これは
JavaScriptのコメントですので
ブラウザには表示されません． */
// これもコメントですのでブラウザには表示されません．
<!--
document.write("これは，JavaScriptで書きました．<P>")
//-->
</SCRIPT>
これは，HTMLで書きました．
</BODY>
</HTML>
■オブジェクト
JavaScriptはオブジェクトを基礎にしており，大きく分けてナビゲター・オブジェクト（Navigator，window）とその他のオブジェクト（string，Math，Date
）の2種類があります．Navigatorオブジェクトは，WWWブラウザのバージョン情報などを保持するオブジェクトです．windowオブジェクトは，ブラウザのウィンドウを示すオブジェクトであり，他のオブジェクトの最上位の階層に位置します．stringオブジェクトは文字列，Mathオブジェクトは数学定数や関数，Dateオブジェクトは日時のオブジェクトです．
JavaScriptでは，これらのオブジェクトを操作することによりさまざまな働きを行ないます．オブジェクトに対する処理方法には，2種類あります．プロパティとメソッドです．
■プロパティ
プロパティとは，オブジェクトの属性です．プロパティの値を参照するときの形式は次のとおりです．
オブジェクト．プロパティ
たとえば，「document.title」でドキュメントのタイトルすなわち<TITLE>タグで設定されている内容が取得できます．ただし，「document」自体はオブジェクトではなく，「document」プロパティです．つまり「window.document.title」のwindowオブジェクトが省略された書き方になっています．「window.document
」は，windowオブジェクトにdocumentプロパティを適用したもので，これによりdocument
オブジェクトが得られます．したがって，documentオブジェクトにtitleプロパティを適用することになります．
また，プロパティに値を設定することにより，オブジェクトを制御できます．このときの形式は次のとおりです．
オブジェクト．プロパティ = プロパティの値
たとえば，ウィンドウのステータス行にデフォルトで表示するメッセージとして「Hello」を設定するには，windowオブジェクトにdefaultStatusプロパティを適用して次のように記述します．
window.defaultStatus = "Hello"
■メソッド
一方，メソッドとはオブジェクトに対して行なえる操作のことです．
メソッドはオブジェクトに作用し，働きかけます．オブジェクトにメソッドを適用するときの形式は次のとおりです．
オブジェクト．メソッド
例２のスクリプトには，次のようなステートメントが含まれていました．
document.write("これは，JavaScriptで書きました．<P>")
この場合も，「document」はオブジェクトではなくプロパティです．前述の「document.title
」の場合と同様に，「document」の前に「window」というオブジェクトが省略されていると解釈できます．このため，documentオブジェクトに対して「write
」つまり「HTMLデータを書き出す」ことになります．したがって，「"これは，JavaScript
で書きました．<P>"」という内容がHTMLとして出力されますので，行末の<P>タグも作用します．
■データ型と定数と変数
JavaScriptで使えるデータ型は，数値，文字列，論理値，null値の4種類があります．
数値には整数と浮動小数点数があります．文字列は，ダブルクォーテーション（"）またはシングルクォーテーション（'）で囲まれた値です．論理値はtrue
（真）またはfalse（偽）のいずれかの値です．null（ヌル）値は何も入っていないことを示す特殊な値です．
変数は次の形式で宣言します．
var 変数名
データ型は指定できませんが，ある型のデータを入れるとそれに対応したデータを保持します．なお，変数は宣言せずに使うことも可能です．
たとえば，変数として「a」という名前の変数を宣言するには次のようにします．
var a
また，宣言と同時にデータを入れることもできます．
var s = 0
■＜例３＞計算 js3.html
それでは，簡単な計算を行なうスクリプトを作ってみましょう（リスト３）．ブラウザでこのファイルを表示させると，変数に設定した値を読み込んで四則演算を行ない，その結果を表示します．
たとえば，次のステートメントでは，文字列"a+b="が表示され，続いて「a
+ b 」の計算結果，さらに改行を行なう<BR>タグを出力します．
document.write("a+b=", a + b, "<BR>")
[リスト３]
<HTML>
<HEAD>
<TITLE>JavaScript example 3</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var a = 5;
var b = 3;
document.write("a+b=", a + b, "<BR>")
document.write("a-b=", a - b, "<BR>")
document.write("a*b=", a * b, "<BR>")
document.write("a+b=", a / b, "<BR>")
</SCRIPT>
</BODY>
</HTML>
■＜例４＞判断 js4.html
何らかの条件を判断し，その結果に応じて処理を選択して実行するには，if...else
ステートメントを使います．ifの後に書かれている条件が成り立てば条件以降の処理を実行し，そうでなければelse以降の処理を実行します．なお，elseについては省略する書き方もあります．
変数「year」に格納されている西暦年を読み込んで，閏年か平年かを判定してみます（リスト４）．閏年の判定は次のようにします．まず，4で割り切れる年を閏年とします．ただし，100で割り切れても400で割り切れない年は平年とします．したがって，1900年は平年であり，1996年は閏年です．また，2000年も閏年です．閏年には2月を29日にします．
「割り切れる」という判定は剰余演算子「%」を使います．「year % 4」とすると「year」の値を4で割った余りが求まりますので，これが「0」になれば割り切れたことになります．比較演算子「==」は等しいことを示し，「!=」は等しくないことを示します．また，論理演算子「&&」は論理積（〜かつ〜）を表し，論理演算子「||」は論理和（〜または〜）を表します．
[リスト４]
<HTML>
<HEAD>
<TITLE>JavaScript example 4</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var year = 1996;
document.write(year, "年は");
if((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0))
document.write("閏年");
else
document.write("平年");
document.write("です．");
</SCRIPT>
</BODY>
</HTML>
■＜例５＞繰り返し（for） js5.html
何らかの処理を繰り返して実行するには，forステートメントを使います．for
の後に書かれている繰り返し条件に従って，「{」と「}」で囲まれた範囲の内容が繰り返し実行されます．ただし，「{}」内が1文のときは，「{}」を省略できます．
繰り返し処理により1から10までの数値の合計を求めて表示してみます．
まず，合計を求める変数「s」に初期値として「0」を設定します．forステートメントを使い，変数「i」の値を1から10まで変化させながら，代入演算子変数「+=」により「s」に変数「i」の値を足し込んでいきます（リスト５）．
[リスト５]
<HTML>
<HEAD>
<TITLE>JavaScript example 5</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var s = 0;
for(i = 1; i <= 10; i++)
s += i;
document.write("1から10までの合計値=", s);
</SCRIPT>
</BODY>
</HTML>
■＜例６＞二重ループ js6.html
繰り返しの流れであるループの中にもう一つループが入っている構造を二重ループといいます．二重ループを使って九九表を作ってみました．
内側のループで変数「j」の値を1から9まで変化させ，さらに外側のループで変数「i」の値を1から9まで変化させて，合計9×9=81回の繰り返しを実行しています（リスト６）．
[リスト６]
<HTML>
<HEAD>
<TITLE>JavaScript example 6</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("九九表<P>");
document.write("<TABLE BORDER=1><TR ALIGN=RIGHT>");
for(i = 1; i <= 9; i++){
for(j = 1; j <= 9; j++)
document.write("<TD>", i * j, "</TD>");
document.write("</TR><TR ALIGN=RIGHT>");
}
document.write("</TABLE>");
</SCRIPT>
</BODY>
</HTML>
■＜例７＞ 関数 js7.html
JavaScriptでは関数が使えます．関数とは，あるまとまった仕事を記述しておき，必要に応じて呼び出せるプログラムのことです．関数の定義は，一般に<HEAD>
部で行ないます．関数の定義書式は次のとおりです．
function 関数名(仮引数){
関数の内容
}
関数呼び出しの書式は次のとおりです．
関数名(実引数)
2つの数値を引数として渡すと，その和を返す関数を作ってみます．関数に値を与えて返すには，rerurnステートメントを用います．次のスクリプトでは「return
x + y」の「x + y」で計算された値が，呼び出し側の「add(5, 3)」の値として返されます（リスト７）．
[リスト７]
<HTML>
<HEAD>
<TITLE>JavaScript example 7</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function add(x, y){
return x + y;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("5+3=", add(5, 3))
</SCRIPT>
</BODY>
</HTML>
■＜例８＞ 繰り返し（while） js8.html
繰り返し処理には，whileステートメントを使う方法もあります．whileの後に書かれた条件に従って，「{」と「}」で囲まれた範囲の内容が繰り返し実行されます．
与えられた2つの数値の最大公約数を求めて表示してみます．
このスクリプトでは，最大公約数を求めるのに「ユークリッドの互除法」という方法を用いています．「r
= x % y」という命令は，xをyで割った余りを求めてrに格納します．また，「while(y
!= 0)」という命令は，yが0でない間繰り返すことを示しています（リスト８）．
[リスト８]
<HTML>
<HEAD>
<TITLE>JavaScript example 8</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function gcm(x, y){
while(y != 0){
r = x % y;
x = y;
y = r;
}
return x;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var a = 36;
var b = 24;
document.write(a, "と", b, "の最大公約数は", gcm(a,
b), "です");
</SCRIPT>
</BODY>
</HTML>
■＜例９＞繰り返し（for...in） js9.html
forステートメントの繰り返しと異なり，オブジェクトの各要素に対して同じ処理を繰り返し実行するものです．書式は次のとおりです．
for (変数 in オブジェクト){
ステートメント
}
Navigatorオブジェクトのプロパティを参照するとブラウザの情報が得られます．「for(var
p in navigator)」でnavigatorオブジェクトの全ての要素が順番に変数「p」に代入されて繰り返されます（リスト９）．
[リスト９]
<HTML>
<HEAD>
<TITLE>JavaScript example 9</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
for(var p in navigator)
document.write(p + ": " + navigator[p] + "<BR>");
</SCRIPT>
</BODY>
</HTML>
■＜例１０＞Navigatorオブジェクトのプロパティ js10.html
ただし，上の処理はエクスプローラ 3.0ではうまく動作しないようです．同じ結果を得るには，各プロパティの値を個別に参照する方法を用いてください（リスト１０）．
[リスト１０]
<HTML>
<HEAD>
<TITLE>JavaScript example 10</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("appName: " + navigator.appName + "<BR>");
document.write("appVersion: " + navigator.appVersion + "<BR>");
document.write("appCodeName: " + navigator.appCodeName + "<BR>");
document.write("userAgent: " + navigator.userAgent + "<BR>");
</SCRIPT>
</BODY>
</HTML>
■配列
配列は，配列の名前とインデックス（要素番号，添字）を用いて参照することのできるデータの集まりです．
単独の変数を一戸建ての住宅とすれば，配列は室番号で指定できるアパートなどの集合住宅に例えることができます．
配列名[インデックス] たとえば，「data」という名前の配列の「i」番目の要素であれば次のように指定します． data[i]
したがって，添字「i」の値が「3」のときは「data[3]」で参照することができます．
JavaScriptで配列を作成するには，まず，関数でオブジェクトの型を定義します．関数の名前として，たとえば「MakeArray」と名付けるものとします．
function MakeArray(n) {
this.length = n;
}
ここで，「this.length = n」の「this」は現在のオブジェクトを参照するためのキーワードです．したがって，現在のオブジェクトに「lengthプロパティ」を適用し，引数で渡された「n」の値を代入することになります．
次に，new演算子を用いて，実際の配列を作成します．配列名を「data」として宣言するには次のようにします．
var data = new MakeArray(3)
「MakeArray」の後ろの括弧の中の値「3」が関数の引数として渡されます．new演算子は，ユーザ定義のオブジェクト型の新しいインスタンスを生成します．インスタンスとは，オブジェクトの実体を意味します．これにより，「data」という名前の実際のオブジェクト（配列）が作成されることになります． この場合，data[0]，data[1]，data[2]，data[3]という4つの要素を持つ配列ができあがります．
■＜例１１＞配列の作成 js11.html
それでは，簡単な例を作ってみましょう． 前述の配列において，その各要素に，0，1，2，3という数値を入れるには次のようにします．
for(i = 1; i <= 3; i++)
data[i] = i;
その後，配列の各要素を読み出して表示してみます（リスト１）．
このスクリプトをブラウザで読み込むと，配列「data」の各要素の内容が表示されます．
[リスト１]
<HTML>
<HEAD>
<TITLE>JavaScript example 11</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function MakeArray(n){
this.length = n;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var data = new MakeArray(3);
for(i = 0; i <= 3; i++)
data[i] = i;
for(i = 0; i <= 3; i++)
document.write("data[", i, "] = ", data[i], "<BR>");
</SCRIPT>
</BODY>
</HTML>
■＜例１２＞配列の初期化 js12.html
JavaScriptでは，16進数値も扱うことができます．16進数は，頭に0xを付けて表します．たとえば，10進数の15，16，255は，16進数でそれぞれ0xf，0x10，
0xffとなります． さて，配列の各要素にあらかじめ初期値を設定しておくことができます（リスト２）． thisキーワードの後ろに大括弧（[]）で要素番号を指定して，配列の各要素を指定します．0x0から0xfまでの16進数値を配列に格納し，ブラウザでその内容を表示させたところ，0から15までの10進数として表示されました． なお，この例の関数「Hex()」では引数を渡さないため，引数が省略された書き方になっています．
[リスト２]
<HTML>
<HEAD>
<TITLE>JavaScript example 12</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function Hex(){
for(i = 0x0; i <= 0xf; i++)
this[i] = i;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var hex = new Hex();
for(i = 0x0; i <= 0xf; i++)
document.write(hex[i], "<BR>");
</SCRIPT>
</BODY>
</HTML>
■＜例１３＞16進文字列の表示 js13.html
前の例で分かるように，内部的には16進数が使えるのですが，表示ができません．
そこで，16進数を文字列として表示してみることにします（リスト３）．
ただし，ここでは10進数の0〜255すなわち16進数の0x00〜0xffの値に限定して扱うことにします．もちろん，関数の内容を変えればそれ以外も対応可能です．
まず，関数「HexChr」において，16進文字を表す"0"，"1"，"2"，…，"A"，"B"，…，"F"，の文字を配列の要素として初期設定します．このとき，文字は二重引用符（"）で囲みます．
つぎに，10進数を16進文字列に変換する「DEC2HEC」という関数を定義します．これは引数「dec」の内容として10進数を受け取ると，関数の値として16進文字列を返すものです．
16進数の上位桁の値を求めるのですが，「dec / 16」だけでは，整数ではなく実数で求まる場合も出てきます．そこで，数学定数や関数の組み込みオブジェクトであるMathオブジェクトにfloorメソッドを適用して整数化します．floorメソッドは指定した数より小さい最大整数を求めますので，この場合は小数点以下を切り捨てる働きをします．
「dec % 16」は，「dec」の値を16で割った余りを求めます．これにより16進数の下位桁の値が求まりますので，これを配列の要素番号として指定し，配列「Hex」の要素を呼び出せば，対応する16進文字が得られます．そして，文字列を連結するための「+」演算子により上位桁の文字列に結合します．
こうして出来上がった16進文字列を，戻り値の設定を行なうreturnキーワードを用いて関数の値として返します．
したがって，呼び出し側では「DEC2HEC(dec)」の値として，16進文字列が得られることになります．
[リスト３]
<HTML>
<HEAD>
<TITLE>JavaScript example 13</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function HexChr(){
this[0] = "0";
this[1] = "1";
this[2] = "2";
this[3] = "3";
this[4] = "4";
this[5] = "5";
this[6] = "6";
this[7] = "7";
this[8] = "8";
this[9] = "9";
this[10] = "A";
this[11] = "B";
this[12] = "C";
this[13] = "D";
this[14] = "E";
this[15] = "F";
}
function DEC2HEX(dec){
var Hex = new HexChr();
hexStr = Hex[Math.floor(dec / 16)] + Hex[dec % 16];
return hexStr;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var dec = 160;
document.write(dec, " = #", DEC2HEX(dec), "<BR>");
</SCRIPT>
</BODY>
</HTML>
■＜例１４＞文字列の操作 js14.html
文字列オブジェクトは，stringオブジェクトと呼ばれます．ただし，「string」という名前のオブジェクトがあるわけではなく，文字列自身がオブジェクトです．
文字列オブジェクトには，オブジェクトの長さを取得するlengthプロパティがあります． たとえば，次のようにすると文字列"12345"の長さである「5」が取得できます（リスト４）．
"12345".length
また，文字列オブジェクトには，substringというメソッドがあります．substringメソッドは，文字列から部分文字列を取り出す働きをします．書式は次のとおりです．
文字列オブジェクト.substring(位置番号A, 位置番号B)
位置番号A：取得の開始位置の番号
位置番号B：取得の終了位置に1を加えた番号
つまり，文字列オブジェクトに対し，「位置番号A」から「位置番号B - １」までの文字列が取得できます．ただし，位置番号の値は0から始まります．
たとえば，次の例で取得できる文字列は，"BC"となります． str
= "ABCDE" str.substing(1,3)
[リスト４]
<HTML>
<HEAD>
<TITLE>JavaScript example 14</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("12345".length, "<P>");
str = "ABCDE";
document.write("<P>", str.substring(1, 3));
</SCRIPT>
</BODY>
</HTML>
■＜例１５＞文字列の配列への格納 js15.html
文字列を1文字ずつ分解し，配列の各要素に入れる処理を行なってみます．
この処理は前述のsubstingメソッドを使ってもできますが，ここではcharAtメソッドを使うことにします．charAtメソッドは，文字列中の文字位置を指定して，その文字を読み出す働きがあります．
これを使えば，＜例１３＞のHexChr関数を書き換えて簡単にすることができます（リスト５）．
[リスト５]
function HexChr(){
var hexStr = "0123456789ABCDEF";
for(i = 0; i<= hexStr.length; i++){
this[i] = hexStr.charAt(i);
}
}
■＜例１６＞時刻により異なるメッセージの表示 js16.html
Dateオブジェクトは，日付と時間に関するオブジェクトです．Dateオブジェクトを生成するには以下のような方法があります．
@ Dateオブジェクト名 = new Date()
A Dateオブジェクト名 = new Date("month day, year hours:minutes:seconds")
B Dateオブジェクト名 = new Date(year, month, day)
C Dateオブジェクト名 = new Date(year, month, day, hours, minutes, seconds)
@では現在の日時を表すオブジェクトが生成できます．それ以外は，指定した日時のオブジェクトとなります．
ここで注意することは，JavaScript内部では月の値は1〜12でなく，0〜11で表されるということです．
Dateオブジェクトではいろいろなメソッドが使えますが，getHoursメソッドで「時（0〜23）」，getMinutesメソッドで「分（0〜59）」が取得できます．
たとえば，現在の日時のオブジェクトを「now」という変数に入れた後，その中の「時」を取り出して変数「hour」に入れるには次のようにします．
var now = new Date()
var hour = now.getHours()
それでは，時刻により異なるメッセージを表示するスクリプトを作ってみます（リスト６）．現在時刻が，午前5時〜9時であれば「おはようございます．」，午前10時〜午後5時であれば「こんにちは．」，それ以外のときは「こんばんは．」と表示します．
[リスト６]
<HTML>
<HEAD>
<TITLE>JavaScript example 16</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
if ((hour >= 5) && (hour <= 9))
msg = "おはようございます．" ;
else
if ((hour >= 10) && (hour <= 17))
msg = "こんにちは．";
else
msg = "こんばんは．";
document.write(msg + "<P>" + "ただいま" + hour + "時" + min + "分です．" );
</SCRIPT>
</BODY>
</HTML>
■＜例１７＞ある月の日数を求める js17.html
ある月が何日あるかを求めてみます（リスト７）．
それを行なうには，月の大小や閏年を考慮しなければならず結構面倒です．
ところで，DateオブジェクトにはgetTimeというメソッドがあり，これを用いると日数計算などが行なえます．getTimeメソッドは，1970年の元旦からの経過時間がミリ秒（1/1000秒）単位で取得できます．
そこで，ある月の日数（ミリ秒）を求めるには次のように考えます．
（ある月の日数） = （翌月の1日の値） - （その月の1日の値）
したがって，これを日数に直すには，1000×60×60×24で割らなければなりません．
また，前述のように月の値は「1」を引いて指定する必要があります．
[リスト７] <HTML> <HEAD> <TITLE>JavaScript example 17</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var year = 1997; var month = 2; var thisMonth = new Date(year, month - 1, 1); var nextMonth = new Date(year, month, 1); days = (nextMonth.getTime() - thisMonth.getTime()) / (1000 * 60 * 60 * 24); document.write(year + "年" + month + "月は，" + days + "日あります．" ); </SCRIPT> </BODY> </HTML>
■＜例１８＞フォーム js18.html
Formオブジェクトは，テキスト入力やチェックボックスなどのフォーム要素を含む領域に対応するオブジェクトです．
フォームや各要素は，フォーム名や要素名により参照できます．フォーム名や要素名は，HTMLタグの「NAME属性」で指定した名前です．
たとえば，HTMLでフォーム名「haiku」とテキスト入力の要素名「phrase1」を指定したとします．
<FORM NAME="haiku">
<INPUT TYPE="text" NAME="phrase1">
</FORM>
このとき，テキスト入力（オブジェクト）の値は，valueプロパティを用いれば次のように指定できます．
haiku.phrase1.value
3つのテキスト入力を使用して，俳句を表示するスクリプトを作ってみました（リスト８）．
[リスト８] <HTML> <HEAD> <TITLE>JavaScript example 18</TITLE> </HEAD> <BODY> <FORM NAME="haiku"> 今日の一句 <INPUT TYPE="text" SIZE="10" NAME="phrase1"> <INPUT TYPE="text" SIZE="14" NAME="phrase2"> <INPUT TYPE="text" SIZE="10" NAME="phrase3"> </FORM> <SCRIPT LANGUAGE="JavaScript"> document.haiku.phrase1.value = "古池や"; document.haiku.phrase2.value = "蛙飛び込む"; document.haiku.phrase3.value = "水の音"; </SCRIPT> </BODY> </HTML>
■＜例１９＞フォーム（別法） js19.html
なお，フォームの扱いには，forms配列およびelements配列として指定する方法もあります（リスト９）．
[リスト９] <HTML> <HEAD> <TITLE>JavaScript example 19</TITLE> </HEAD> <BODY> <FORM> 今日の一句 <INPUT TYPE="text" SIZE="10"> <INPUT TYPE="text" SIZE="14"> <INPUT TYPE="text" SIZE="10"> </FORM> <SCRIPT LANGUAGE="JavaScript"> document.forms[0].elements[0].value = "古池や"; document.forms[0].elements[1].value = "蛙飛び込む"; document.forms[0].elements[2].value = "水の音"; </SCRIPT> </BODY> </HTML>
■＜例２０＞時刻表示 js20.html
定期的にある処理を行ないたいという場合には，タイムアウトの設定を行なうsetTimeoutメソッドを使います．setTimeoutメソッドは，設定した時間（ミリ秒）後に，指定した式（処理）を実行します．
タイムアウトID = setTimeout('式', 設定時間)
「タイムアウトID」はタイムアウトの設定をクリアするときに使用するもので，それ以外では省略できます．
たとえば，0.5秒（500ミリ秒）後に「dsptime()」という関数を実行するには次のようにします．
setTimeout('dsptime()', 500)
この処理を繰り返し行ないたい場合には，関数「dsptime()」の中に自分自身を呼び出すsetTimeoutメソッドを埋め込みます．
現在の時刻をリアルタイム表示するには，定期的に現在時刻を取得し，それを適当な形式で表示します（リスト１０．ここでは，取得した日時をローカル文字列へ変換するtoLocalStringメソッドを利用することにします．ローカル文字列とは，Windows95であれば「地域の」で設定されている日時の表記形式のことです．
[リスト１０]
<HTML>
<HEAD>
<TITLE>JavaScript example 20</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function dsptime(){
var time = new Date();
document.clock.now.value = time.toLocaleString();
setTimeout('dsptime()', 500)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="clock">
現在時刻
<INPUT TYPE="text" SIZE="20" NAME="now">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
dsptime();
</SCRIPT>
</BODY>
</HTML>
■＜例２１＞タイプライター表示 js21.html
タイムアウトの処理を使って，タイプライターあるいはキーボードでリアルタイムに文字を打鍵しているような雰囲気で文字列を表示してみましょう（リスト１１）．
substringメソッドで取り出す文字数を定期的に増加させることにより、リアルタイムに文字を打鍵しているように見せかけます。
[リスト１１]
<HTML>
<HEAD>
<TITLE>JavaScript example 21</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var str = "Welcome to My Home Page!";
var speed = 300;
var i = 0;
function msgDisp(){
if(i++ < str.length){
document.type.writer.value = str.substring(0, i);
}
else{
document.type.writer.value = "";
i = 0;
}
setTimeout('msgDisp()', speed);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="type">
タイプライター
<INPUT TYPE="text" SIZE="30" NAME="writer">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
msgDisp();
</SCRIPT>
</BODY>
</HTML>
■＜例２２＞ステータス・バー表示 js22.html
メッセージをスクロールさせながらステータス・バーに表示してみます（リスト１２）．
次の手順により、文字が右から左へスクロールしているように見せかけます。
@ 文字列の1文字目（文字列1）とそれ以降の文字列（文字列2）とに分けて取り出す
A 文字列2の後ろに文字列1を連結して文字列を作り、それを表示する
B @とAを繰り返す
space(n)という関数は，指定した個数分の空白文字列を返すためのものです．
ステータス・バーにメッセージを表示するには，windowオブジェクトにstatusプロパティを適用します．
window.status = "メッセージ" なお，メッセージとして日本語を表示したい場合には，substringメソッドで取り出す文字を半角2文字分とするため，次のように変更します．この場合，文字化けを防ぐためにメッセージ中のスペースは全角スペースを使用してください．
str = str.substring(2, str.length) + str.substring(0, 2);
ところで，前述の方法のようにsetTimeoutメソッドで自分自身を含む関数を指定すると，無限に処理を繰り返すことになり，不都合が生じる場合があります．
そこで，適当な回数だけ実行したら，タイムアウトの設定をクリアすることにします．そのためには，タイムアウトIDを引数として，clearTimeoutメソッドを使用します．
[リスト１２]
<HTML>
<HEAD>
<TITLE>JavaScript example 22</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function space(n){
var spc = "";
for(i = 1; i <= n; i++)
spc = spc + " ";
return spc;
}
var msg = "Welcome to My Home Page!";
var str = space(130) + msg + space(msg.length);
var repeat = 5 * str.length - msg.length;
var speed = 50;
function msgDisp(){
str = str.substring(1, str.length) + str.substring(0, 1);
window.status = str;
if(repeat-- <= 0){
clearTimeout(timeoutID);
window.status = "";
}
else{
timeoutID = setTimeout('msgDisp()', speed);
}
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
msgDisp();
</SCRIPT>
</HTML>
■イベント処理
「イベント」とは，マウスによるクリックやキー入力などの動作（事象）のことです．たとえば，ボタンをクリックすると「click」というイベントが発生します．このイベントの発生に対応して行なう処理を「イベント処理」と呼びます．イベント処理を用いると，ユーザーとの対話的な処理が可能になります．
実際に処理操作を行なうスクリプト（プログラム）のことを，イベントの操作者という意味で「イベント・ハンドラー」といいます．
多くの場合イベント・ハンドラーとして関数を割り当てて使用します．たとえば，ボタンがクリックされたとき発生するイベントに対応した「onClick」イベント・ハンドラーとして割り当てた「func()」という名前の関数を実行するには，HTMLタグを用いて次のように記述します．
<INPUT TYPE="button" onClick="func()">
■応答メッセージ＜例２３＞ js23.html
ホームぺージ上でよく見かけるボタンに「足跡ボタン」とか「来たよボタン」などと名付けられたボタンがあります．これは訪問通知のためのボタンで，訪問者がそのボタンを押すとメールが送信されるという働きをします．ただし，IE3.0では直接メールが送信されるのではなくメール・ソフトが起動します．
この訪問通知ボタン自体は，JavaScriptでなく単なるHTMLで記述することができます．しかし，ボタンが押されたことによりお礼の応答メッセージを返すといった対話的な処理を行なう場合にはJavaScriptが必要になります．
訪問通知ボタンのクリックに対応する「onClick」イベント・ハンドラーで「thanks()」という関数を実行し，それによりお礼のメッセージを表示してみましょう（リスト１）．
メッセージの表示には，警告のダイアログボックスを表示するための「alert」メソッドを利用します．「alert」メソッドの書式は次のとおりです．
alert("メッセージ")
[リスト１]
<HTML>
<HEAD>
<TITLE>JavaScript example 23</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function thanks(){
alert("訪問いただきありがとうございます。");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="mailto:yasuo@uchidas.com">
<INPUT TYPE="submit" NAME="I visited to your homepage." VALUE="訪問通知ボタン" onClick="thanks()">
</FORM>
</BODY>
</HTML>
■フォーム要素の値の取得＜例２４＞ js24.html
前例と同様に，通常のアンケート・フォームに加えてアンケート結果に対する応答メッセージを表示してみます（リスト２）．このとき，入力された内容に応じてメッセージの内容を切り替えるものとします．そのためには，フォーム要素の値を取得する必要があります．
たとえば，ホームページの評価を「おもしろい」，「普通」，「いまいち」という3つのラジオ・ボタンの値により受け取るものとします．それぞれのラジオ・ボタンの値としては，それぞれ「1」，「2」，「3」を設定するものと仮定します． 各ラジオ・ボタンに設定された値により応答を切り替えるには，次のような手順で処理を行ないます．
まず，各ボタンの「click」イベントの発生に対応して「res(this)」という関数を実行しその中で一旦ラジオ・ボタンの値を変数に入れて覚え込ませておきます．このres関数の引数「this」は「thisポインタ」と呼ばれ現在のオブジェクトを参照するために使います．今の場合，「radio」ボタンを参照するための情報を関数に渡すことになります．
したがって，関数側から呼出し元の「radio」ボタンの値を取得するには，引数の名前（たとえばbutton）と「value」プロパティを使って次のように書きます．
button.value
次にフォームが送信されたときのハンドラーにより変数の内容に応じた処理を行ないます．
つまり，「onSubmit」ハンドラーにより呼出された「thanks()」関数の中で「radio」ボタンの値を判断し，それに対応するメッセージを「alert」メソッドを用いて表示します．
なお，「alert」メソッド中の「\n」は，復帰・改行を表す特殊な文字です．
[リスト２]
<HTML>
<HEAD>
<TITLE>JavaScript example 24</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var index;
function res(button){
index = button.value
}
function thanks(){
if(index == "1")
msg = "ほめていただいてありがとう。";
if(index == "2")
msg = "またきてくださいね。";
if(index == "3")
msg = "もっとおもしろくなるようがんばります。";
alert("アンケートにご協力いただきありがとうございます。\n\n" + msg);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="mailto:yasuo@uchidas.com" onSubmit="thanks()">
アンケートにご協力をお願いします．
<P>
性別：
<INPUT TYPE="radio" NAME="sex" VALUE="1">男
<INPUT TYPE="radio" NAME="sex" VALUE="2">女
<P>
年齢：
<SELECT NAME="age">
<OPTION>20才未満
<OPTION>20代
<OPTION>30代
<OPTION>40代
<OPTION>50代以上
</SELECT>
<P>
このホームページは
<INPUT TYPE="radio" NAME="estimate" VALUE="1" onClick="res(this)">おもしろい
<INPUT TYPE="radio" NAME="estimate" VALUE="2" onClick="res(this)">普通
<INPUT TYPE="radio" NAME="estimate" VALUE="3" onClick="res(this)">いまいち
<P>
コメント：<BR>
<TEXTAREA NAME="comment" ROWS=5 COLS=50></TEXTAREA>
<P>
<INPUT TYPE="submit" VALUE="送信">
<INPUT TYPE="reset" VALUE="取消し">
</FORM>
</BODY>
</HTML>
■カラー・エディタ＜例２５＞ js25.html
イベント処理を用いてホームぺージ作成時に利用できるカラーのRGB値を確認するスクリプトを作ってみました（リスト３）．
[+]または[-]のボタンがクリックされるとRGBの値を1ずつ増減し，[++]または[--]のボタンがクリックされると15ずつ増減します．そして，その値を背景色の値として設定します．そのためには，「document」オブジェクトに「bgColor」プロパティを適用し，RGB値を16進文字列で指定します．
また，テキスト・ボックス中のRGB値を更新します．このとき，フォームの名前を「Edit」，3つのテキスト・ボックスの名前を「red」，「green」，「bl
ue」と名付け，それぞれのテキスト・ボックスの内容を参照するようにしています．
このカラー・エディタを使えば，自由に色とRGB値との対応関係を調べることができます．
[リスト３]
<HTML>
<HEAD>
<TITLE>JavaScript example 25</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function HexChr(){
var hexStr = "0123456789ABCDEF";
for(i = 0; i<= 15; i++){
this[i] = hexStr.substring(i, i+1);
}
}
function DEC2HEX(dec){
var hexStr = "";
var Hex = new HexChr();
hexStr = hexStr + Hex[dec % 16];
hexStr = Hex[Math.floor(dec / 16)] + hexStr;
return hexStr;
}
var red = 0xff;
var green = 0xff;
var blue = 0xff;
function redEdit(r){
if((red + r >= 0) && (red + r <= 255)){
red = red + r;
document.bgColor = DEC2HEX(red) + DEC2HEX(green) +DEC2HEX(blue);
}
document.Edit.red.value = DEC2HEX(red);
}
function greenEdit(g){
if((green + g >= 0) && (green + g <= 255)){
green = green + g;
document.bgColor = DEC2HEX(red) + DEC2HEX(green) +DEC2HEX(blue);
}
document.Edit.green.value = DEC2HEX(green);
}
function blueEdit(b){
if((blue + b >= 0) && (blue + b <= 255)){
blue = blue + b;
document.bgColor = DEC2HEX(red) + DEC2HEX(green) +DEC2HEX(blue);
}
document.Edit.blue.value = DEC2HEX(blue);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff">
カラー・エディタ
<FORM NAME="Edit">
R
<INPUT TYPE="button" VALUE="--" onClick="redEdit(-0xf)">
<INPUT TYPE="button" VALUE=" - " onClick="redEdit(-0x1)">
#<INPUT TYPE="text" SIZE="2" VALUE="FF" NAME="red">
<INPUT TYPE="button" VALUE=" + " onClick="redEdit(0x1)">
<INPUT TYPE="button" VALUE="++" onClick="redEdit(0xf)">
<P>
G
<INPUT TYPE="button" VALUE="--" onClick="greenEdit(-0xf)">
<INPUT TYPE="button" VALUE=" - " onClick="greenEdit(-0x1)">
#<INPUT TYPE="text" SIZE="2" VALUE="FF" NAME="green">
<INPUT TYPE="button" VALUE=" + " onClick="greenEdit(0x1)">
<INPUT TYPE="button" VALUE="++" onClick="greenEdit(0xf)">
<P>
B
<INPUT TYPE="button" VALUE="--" onClick="blueEdit(-0xf)">
<INPUT TYPE="button" VALUE=" - " onClick="blueEdit(-0x1)">
#<INPUT TYPE="text" SIZE="2" VALUE="FF" NAME="blue">
<INPUT TYPE="button" VALUE=" + " onClick="blueEdit(0x1)">
<INPUT TYPE="button" VALUE="++" onClick="blueEdit(0xf)">
</FORM>
</BODY>
</HTML>
■URLへのショートカット＜例２６＞ js26.html
あらかじめ指定しておいたホームページへジャンプする「ショートカット（近道）」ツールを作ってみます（リスト４）．URLへのリンクはHTMLで簡単に記述できますが，ここではフォームの選択メニューを使って行なうことにします．
他のURLへのジャンプは現在表示されているページのURL情報を変更することで可能になります．
そのためには，現在のドキュメントのURL情報を持つ「location」オブジェクトにURLを設定します．書式は次のとおりです．
location = URL
そこで，選択メニューの値としてURLを設定しておき，「onChange」ハンドラーでイベント処理関数を起動します．関数側で選択メニューの値を取得するには選択メニューの配列を示す「options」配列と選択メニューの選択されているインデックス番号を取得する「selectedIndex」プロパティおよび「value」プロパティを組み合わせて，次の書式で指定します．
選択メニュー.options[選択メニュー.selectedIndex].value
なお，フォームの指定の中で選択メニューの値を「this」ポインタを用いて「jump」という関数に渡すようにしています．
[リスト４]
<HTML>
<HEAD>
<TITLE>JavaScript example 26</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function jump(url){
location = url.options[url.selectedIndex].value;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
ショートカット
<SELECT onChange="jump(this)">
<OPTION VALUE="http://www.uchidas.com/">HomePage1
<OPTION VALUE="http://www.uchidas.com/news/">HomePage2
<OPTION VALUE="http://www.uchidas.com/miho/">HomePage3
<OPTION VALUE="http://www.uchidas.com/yuuta/">HomePage4
<OPTION VALUE="http://www.uchidas.com/ai/">HomePage5
</SELECT>
</FORM>
</BODY>
</HTML>
■ホームページ・リモコン＜例２７＞ js27.html
テレビのリモコンでチャンネルを切り替えるの同じように，リモコン風のツールでホームページを切り替えようというスクリプトです（リスト５)．
リモコンを模したウィンドウ内のアンカーテキストをクリックすると，別のウィンドウ内のホームページを切り替えて表示することができます．指定したページが表示されると，リモコンは新しいウィンドウで隠れますが，タスク・バーのアイコンをクリックすれば再表示されます．
まず，「window」オブジェクトに「open」メソッドを適用して新しいウィンドウをオープンします．「open」メソッドの書式は次のとおりです．
[新しいウィンドウへの参照 = ] window.open("URL", "ウィンドウ名",
["ウィンドウの形状"]
続いて「clear」メソッドでドキュメントをクリアーしておきます．
後は新しいウィンドウ内に記述するHTMLの内容を「write」メソッドで書き出していきます．
このとき，HTMLの「TARGET」オプションを指定することによりリモコンのウィンドウではなく元のウィンドウ内でページを切り替えます．そのために，元のドキュメント内のフォームに名前を付けておきます．ただし，IE3.0では若干異なった動作となります．
[リスト５]
<HTML>
<HEAD>
<TITLE>JavaScript example 27</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var newWin = window.open("","", "WIDTH=140,HEIGHT=180,SCROLLBARS=0,RESIZABLE=0");
newWin.document.clear();
newWin.document.write('<HTML><HEAD><TITLE>ホームページ・リモコン</TITLE></HEAD>');
newWin.document.write("<BODY><CENTER>");
newWin.document.write("<FORM NAME=form>")
newWin.document.write("ホームページ<BR>リモコン")
newWin.document.write("<P>")
newWin.document.write("<TABLE BORDER>")
newWin.document.write("<TR>")
newWin.document.write('<TD><A HREF="http://www.uchidas.com/" TARGET=main>HomePage1</A></TD>')
newWin.document.write("</TR>")
newWin.document.write("<TR>")
newWin.document.write('<TD><A HREF="http://www.uchidas.com/news/" TARGET=main>HomePage2</A></TD>')
newWin.document.write("</TR>")
newWin.document.write("<TR>")
newWin.document.write('<TD><A HREF="http://www.uchidas.com/miho/" TARGET=main>HomePage3</A></TD>')
newWin.document.write("</TR>")
newWin.document.write("<TR>")
newWin.document.write('<TD><A HREF="http://www.uchidas.com/yuuta/" TARGET=main>HomePage4</A></TD>')
newWin.document.write("</TR>")
newWin.document.write("<TR>")
newWin.document.write('<TD><A HREF="http://www.uchidas.com/ai/" TARGET=main>HomePage5</A></TD>')
newWin.document.write("</TR>")
newWin.document.write("</TABLE>")
newWin.document.write('<P></FORM></CENTER></BODY></HTML>')
newWin.document.close();
</SCRIPT>
</HEAD>
<BODY>
<FORM TARGET="main">
</FORM>
</BODY>
</HTML>
■万年カレンダー＜例２８＞ js28.html
さて，今までのイベント処理やウィンドウの操作などの知識を使って，万年カレンダーを作ってみましょう（リスト６）．
まず，現在の年と月を調べてフォームのテキスト・ボックスにデフォルトの値として設定します．次にフォームのテキスト・ボックスの内容を読み込みます．その内容は文字列データですので「eval」関数により数値に変換します．カレンダーを表示する新規ウィンドウをオープンしてカレンダーの内容を書き込んでいきます．
「カレンダーの表示」ボタンを押すと「onClick」ハンドラーが動作し，「this.form」によりフォーム配列を引数として渡すことにより，関数側でテキスト・ボックスの内容を読み込んでいます．
2000年の2月を表示してみると，2000年は閏年ですので2月は閏月になります．
[リスト６]
<HTML>
<HEAD>
<TITLE>JavaScript example 28</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function MakeArray(n){
this.length = n;
}
function calendar(form){
var tyear = eval(form.editbox1.value)
var tmonth = eval(form.editbox2.value)
var thisMonth = new Date(tyear, tmonth - 1, 1);
var nextMonth = new Date(tyear, tmonth, 1);
var wd = thisMonth.getDay();
var maxd = (nextMonth.getTime() - thisMonth.getTime()) / (1000 * 60 * 60 * 24);
var wday = new MakeArray(7);
wday[1] = "Sun"; wday[2] = "Mon"; wday[3] = "Tue"; wday[4] = "Wed";
wday[5] = "Thu"; wday[6] = "Fri"; wday[7] = "Sat";
var newwin = window.open("","","WIDTH=300,HEIGHT=200");
newwin.document.clear();
newwin.document.write("<HTML><HEAD><TITLE>Calendar</TITLE></HEAD><BODY>");
newwin.document.write("<CENTER>", tyear, "年", tmonth,"月のカレンダー<P>");
newwin.document.write("<TABLE BORDER=1><TR>");
for(c = 1; c <= 7; c++)
newwin.document.write("<TH>", wday[c], "</TH>");
newwin.document.write("</TR><TR ALIGN=RIGHT>");
d = 0;
for(i=0;i<42;i++){
if(d >= maxd) break;
if((i < wd) || (d > maxd)) {
newwin.document.write("<TD></TD>");
}
else{
d++;
newwin.document.write("<TD>", d, "</TD>");
}
if((i % 7) == 6)
newwin.document.write("</TR><TR ALIGN=RIGHT>");
}
newwin.document.write("</TABLE></CENTER></BODY></HTML>");
newwin.document.close();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form">
<INPUT TYPE="TEXT" SIZE="5" NAME="editbox1">年
<INPUT TYPE="TEXT" SIZE="3" NAME="editbox2">月
<P>
<INPUT TYPE="button" VALUE="カレンダーの表示" onClick="calendar(this.form)">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
var today = new Date();
document.form.editbox1.value = today.getYear() + 1900;
document.form.editbox2.value = today.getMonth() + 1;
</SCRIPT>
</BODY>
</HTML>
■乱数＜例２９＞ js29.html
「Math」オブジェクトには乱数を発生させるための「random」メソッドがありますが，残念ながらUNIXしかサポートされていません．実は，「よい乱数」を生成するのはたいへん難しい問題です．この例は，次に示す文献の中で紹介されているアルゴリズムにより乱数を生成するものです（リスト７）．
●参考文献
アルゴリズム 第３巻＝グラフ・数理・トピックス，Ｒ．セジウィック著，野下浩平・星守・佐藤創・田口東共訳，近代科学社
乱数の種（初期値）の値としては，「getSeconds」メソッドで得た現在時刻の秒の値を設定しました．また，整数除算の計算には「Math」オブジェクトの「floor」メソッドを用いています．ここで定義した「random」関数に引数として「r」という値を与えると0からr-1まで間の整数乱数が得られます． 0から9までの乱数を200個表示してみました．
[リスト７]
<HTML>
<HEAD>
<TITLE>JavaScript example 29</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var date = new Date();
var next= date.getSeconds();
function mult(p, q) {
var p1 = 0;
var p0 = 0;
var q1 = 0;
var q0 = 0;
p1 = Math.floor(p / 10000);
p0 = p % 10000;
q1 = Math.floor(q / 10000);
q0 = q % 10000;
return (((p0 * q1 + p1 * q0) % 10000) * 10000 + p0 * q0) % 100000000;
}
function random(r) {
next = (mult(next, 31415821) + 1) % 100000000;
return Math.floor((Math.floor(next / 10000) * r ) / 10000);
}
for(i = 1; i <= 200; i++){
document.write(random(10) + " ");
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
■数当てゲーム＜例３０＞ js30.html
前述の乱数を利用して，1桁の数値の数当てゲームを作ってみます（リスト８）．
あらかじめ発生させた乱数値と入力された値とを比べて等しければ「当たり！」というメッセージを表示します．当たらなかったときは，「もっと大きい」または「もっと小さい」というヒントのメッセージを表示します．
数値の入力には，入力のダイアログ・ボックスを表示する「promt」メソッドを用います．書式は次のとおりです．
promt("メッセージ" [,初期値])
[リスト８]
<HTML>
<HEAD>
<TITLE>JavaScript example 29</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var date = new Date();
next= date.getSeconds();
function mult(p, q) {
var p1 = 0;
var p0 = 0;
var q1 = 0;
var q0 = 0;
p1 = Math.floor(p / 10000);
p0 = p % 10000;
q1 = Math.floor(q / 10000);
q0 = q % 10000;
return (((p0 * q1 + p1 * q0) % 10000) * 10000 + p0 * q0) % 100000000;
}
function random(r) {
next = (mult(next, 31415821) + 1) % 100000000;
return Math.floor((Math.floor(next / 10000) * r ) / 10000);
}
for(i = 1; i <= 200; i++){
document.write(random(10) + " ");
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
応用編
■カラー・マップ＜例３１＞ js31.html
前回紹介したカラー・エディタを使えば自分好みの色を作れましたが今度は手っ取り早く色の16進値を知ることのできるカラー・マップを作ってみました（リスト１）．
該当する色の値をドラッグしてコピーすれば、簡単にHTMLに埋め込んで利用できます。
3重ループの繰り返しにより、R(赤)、G(緑)、B(青)の値をそれぞれ0x00〜0xffまで変化させます。変化の値として1を設定すると実行に恐ろしく時間がかかりますので、30つまり16進数の0x1eずつ変化させました。
画面表示では16進を示す「#」記号は付加していませんが、付加することも簡単にできます。
[リスト１]
<HTML>
<HEAD>
<TITLE>JavaScript example 31</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function HexChr(){
var hexStr = "0123456789ABCDEF";
for(i = 0; i<= 15; i++){
this[i] = hexStr.substring(i, i+1);
}
}
function DEC2HEX(dec){
var hexStr = "";
var Hex = new HexChr();
hexStr = hexStr + Hex[dec % 16];
hexStr = Hex[Math.floor(dec / 16)] + hexStr;
return hexStr;
}
var r = 0x0;
var g = 0x0;
var b = 0x0;
function COLOR(){
for(r = 0x00; r <= 0xff; r += 0x1e){
for(g = 0x00; g <= 0xff; g += 0x1e){
for(b = 0x00; b <= 0xff; b += 0x1e){
document.write("<FONT COLOR=" + DEC2HEX(r) + DEC2HEX(g) + DEC2HEX(b) + "> " +
DEC2HEX(r) + DEC2HEX(g) + DEC2HEX(b) + "</FONT>");
}
}
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff">
<SCRIPT LANGUAGE="JavaScript">
COLOR();
</SCRIPT>
</BODY>
</HTML>
■ボタン・クリックでURLへジャンプ＜例３２＞ js32.html
ボタンをクリックすると、あらかじめ設定されたURLへジャンプするスクリプトです（リスト２）。
リストを見ても「Script」タグが見つかりませんが、立派（？）にJavaScriptが使われています。それは、次の部分です。
onClick='location = "http://www.uchidas.com/"'
この場合、ボタンのOnClickイベント・ハンドラーの処理として、locationオブジェクトにURLを設定しています。locationオブジェクトにURLを設定するということは現在のURLを変更することですので、結果としてそのURLへジャンプすることになります。
いままで、イベント処理には関数を割り当てて使用するという例を多く紹介してきましたが必ずしも関数は必要ではありません。
この例のように、イベント・ハンドラーの処理としてはいろいろなJavaScriptの式を書くことができます。このとき、式の中に"（2重引用符）を含む場合は、'（1重引用符）で全体を囲むことに注意してください。
[リスト２] <HTML> <HEAD> <TITLE>JavaScript example 32</TITLE> </HEAD> <BODY> <FORM NAME="form"> <INPUT TYPE="button" VALUE="Jump" onClick='location = "http://www.uchidas.com/"'> </FORM> </BODY> </HTML>
■摂氏と華氏＜例３３＞ js33.html
日本では温度の単位として摂氏（℃）が使われますが、華氏（°F）を使う国もあります。
そこで、摂氏と華氏の値を変換するスクリプトを作ってみました(リスト３)。
変換には次の公式を利用します。
℃=(5/9)(°F-32)
「摂氏から華氏への変換」と「華氏から摂氏への変換」の処理を行なう2つの関数を用意しました。
変換元のデータをテキスト・ボックスに入力後「convert to」というボタンをクリックすると関数が呼出され計算を行ない変換結果を表示します。
テキスト・ボックスにデータが入力されていないときは処理を行なわずに関数を抜け出しますまた、evalという関数を用いてテキスト・ボックス内の文字列を数値に変換しています。
このスクリプトでは、整数データのみを扱うこととしました。そのため、計算結果に0.5を加えた（または0.5を引いた）後切り捨てるという方法により小数点以下を四捨五入するというテクニックを使っています。
切り捨て処理には、2つのメソッドを使い分けていますすなわち、データが正のときはfloorメソッド、負のときはceilメソッドで、それぞれ整数化します。
なお、この例では計算結果を整数化しているため、華氏20度と摂氏-7度の場合のように誤差が生じる場合がありますので注意してください。
[リスト３]
<HTML>
<HEAD>
<TITLE>JavaScript example 33</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function ftoc(){
if(document.form.fahrbox1.value != ""){
var celsius = 5 / 9 * (eval(document.form.fahrbox1.value) - 32);
if(celsius >= 0)
celsius = Math.floor(celsius += 0.5);
else
celsius = Math.ceil(celsius -= 0.5);
document.form.celsiusbox1.value = celsius;
}
}
function ctof(){
if(document.form.celsiusbox2.value != ""){
var fahr = 9 / 5 * eval(document.form.celsiusbox2.value) + 32;
if(fahr >= 0)
fahr = Math.floor(fahr += 0.5);
else
fahr = Math.ceil(fahr -= 0.5);
document.form.fahrbox2.value = fahr;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form">
fahr<INPUT TYPE="text" SIZE="5" NAME="fahrbox1">
<INPUT TYPE="button" VALUE="convert to" onClick="ftoc()">
celsius<INPUT TYPE="text"SIZE="5" NAME="celsiusbox1">
<P>
celsius<INPUT TYPE="text" SIZE="5" NAME="celsiusbox2">
<INPUT TYPE="button" VALUE="convert to" onClick="ctof()">
fahr<INPUT TYPE="text"SIZE="5" NAME="fahrbox2">
</FORM>
</BODY>
</HTML>
■世界時計＜例３４＞ js34.html
インターネットでは世界中の人々と時差を意識せずに情報交換できますしかし、場合によっては相手の現地時間を知りたいこともあります。
そこで、GMT（グリニッジ標準時）を基本にして、現地時間に切り替えて表示できる世界時計を作ってみました（リスト４）。
基本的な処理方法は、toGMTStringというメソッドを使うことによりGMTを求め時差を加減して表示するというものです。
時差の計算は選択メニューの項目の番号である「selectedIndex」を利用して次のように行ないます。
document.clock.timezone.selectedIndex - 11
ところで、日本には夏時間という制度はありませんが標準時間（Standard time）と夏時間（Daylight
time）の切り替えをラジオ・ボタンで行なうこともできます。
このスクリプトでは、選択メニューのonChangeイベント、2つのラジオ・ボタンのonClickイベントという計3つのイベントから時間表示の関数dsptime()を呼出すようにしています。
なお、次の処理は、GMT時間文字列の最後に付いている"GMT"という文字列を削除して表示しないようにするためのものです。
time.substring(0, time.length - 3)
[リスト４]
<HTML>
<HEAD>
<TITLE>JavaScript example 34</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var DT = 0;
function dsptime(){
var gmt = new Date();
var local = new Date();
var offset = document.clock.timezone.selectedIndex - 11;
local.setTime(gmt.getTime() + (offset + DT) * 60 * 60 * 1000);
time = local.toGMTString();
document.clock.now.value = time.substring(0, time.length - 3);
setTimeout("dsptime()", 500)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="clock">
World Clock<BR>
<INPUT TYPE="text" SIZE="25" NAME="now">
<SELECT NAME="timezone" onChange="dsptime()">
<OPTION>GMT-11
<OPTION>GMT-10
<OPTION>GMT-09
<OPTION>GMT-08 (PST)
<OPTION>GMT-07 (MST)
<OPTION>GMT-06 (CST)
<OPTION>GMT-05 (EST)
<OPTION>GMT-04
<OPTION>GMT-03
<OPTION>GMT-02
<OPTION>GMT-01
<OPTION>GMT+00 (GMT)
<OPTION>GMT+01
<OPTION>GMT+02
<OPTION>GMT+03
<OPTION>GMT+04
<OPTION>GMT+05
<OPTION>GMT+06
<OPTION>GMT+07
<OPTION>GMT+08
<OPTION>GMT+09 (JST)
<OPTION>GMT+10
<OPTION>GMT+11
<OPTION>GMT+12
</SELECT>
<P>
<INPUT TYPE="radio" NAME="DL" checked onClick="DT = 0">Standard Time
<INPUT TYPE="radio" NAME="DL" onClick="DT = 1">Daylight Time
</FORM>
<SCRIPT LANGUAGE="JavaScript">
dsptime();
</SCRIPT>
</BODY>
</HTML>
■世界時計の呼出し＜例３５＞ js35.html
世界時計を別ウィンドウ上で表示するスクリプトを作ってみましょう（リスト５）．
[リスト５]
<HTML>
<HEAD>
<TITLE>JavaScript example 35</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="World Clock" onClick='window.open("js34.html","","WIDTH=350,HEIGHT=80")'>
</FORM>
</BODY>
</HTML>
■ランダム・リンカー（URL版）＜例３６＞ js36.html
ランダム・リンカーとは、あらかじめ用意してあるリンク先URL一覧の中からランダムに抽出しそこへリンクする働きを行なうものです（リスト６）。
この例では、リンク先はドキュメント内のリンクの一覧であるリンク配列を利用し配列内の要素番号は乱数で発生させます「document.links.length」でリンク配列の大きさが取得できますのでこれを最大値とした乱数で要素番号を設定します。
リンク配列の各要素は次の書式で指定します。
document.liｎks[要素番号]
したがって、これをURLとして指定すれば、ランダムにリンクしたことになります。
[リスト６]
<HTML>
<HEAD>
<TITLE>JavaScript example 36</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var date = new Date();
next= date.getSeconds();
function mult(p, q) {
var p1 = 0;
var p0 = 0;
var q1 = 0;
var q0 = 0;
p1 = Math.floor(p / 10000);
p0 = p % 10000;
q1 = Math.floor(q / 10000);
q0 = q % 10000;
return (((p0 * q1 + p1 * q0) % 10000) * 10000 + p0 * q0) % 100000000;
}
function random(r) {
next = (mult(next, 31415821) + 1) % 100000000;
return Math.floor((Math.floor(next / 10000) * r ) / 10000);
}
function URL4URL(){
window.open(document.links[random(document.links.length)],"")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Uchida's Random Linker" onClick="URL4URL()";
</FORM>
<P>
<A HREF="http://www.uchidas.com/index_j.html"></A>
<A HREF="http://www.uchidas.com/news/news_j.html"></A>
<A HREF="http://www.uchidas.com/yasuo/yasuo_j.html"></A>
<A HREF="http://www.uchidas.com/michiko/michiko_j.html"></A>
<A HREF="http://www.uchidas.com/miho/miho_j.html"></A>
<A HREF="http://www.uchidas.com/yuuta/yuuta_j.html"></A>
<A HREF="http://www.uchidas.com/ai/ai_j.html"></A>
</BODY>
</HTML>
■ランダム・リンカー（IPアドレス版）＜例３７＞ js37.html
今度のランダム・リンカーは、前のものと大きく考え方を変えています（リスト７〜９）。
インターネットに接続されているホスト・コンピュータを、あるルールに従って階層的に分けたときの単位をドメインといいます。また、その名前をドメイン名といいます。
ところで、URLを思い出してみてください。次のような決まりになっています。
scheme://host.domain [:port]/path/filename
スキーム://ホスト名.(ドメイン名)[接続ポート番号]/ディレクトリ名/ファイル名
scheme（分類）は、WWWサーバー上のファイルであれば「http」となります。従って、例えば「http://www.mydomain.co.jp/~mydir/index.html」などとなるわけです。このうちドメイン名「mydomain.co.jp」は「組織名.組織種別.国別コード」を表しています。
一方、ホスト・コンピュータには名前とは別に、そのアドレスを示すためにIPアドレスというアドレスが割り当てられています。これは32ビットの数字を組み合わせたもので、例えば米国のDigiwebという会社のサーバーであれば「206.161.225.3」という具合です。したがって、「http://206.161.225.3」でもアクセスできます。
さて、筆者のホームページは仮想ウェブ・サーバーというサービスを利用しているため、次のような固有のIPアドレスを持っています。
IPアドレス：205.177.227.7 そこで、このIPアドレスの上位は固定したままで、最下位の8ビットのアドレスのみを乱数で発生させることにより、IPアドレス上のお隣りさんへランダムにリンクしてみることにします。ただし、この方法では固有のIPアドレスを有するサイトにしかリンクできませんし、またそのIPアドレスが使われていない場合にはホームページも表示されません。
なお、この例ではフレーム機能を用いており、「My Neighborhood」というボタンが押されるごとに別のフレームにリンク先が表示できるようにしてあります。
[リスト７]
<HTML>
<HEAD>
<TITLE>JavaScript example 37</TITLE>
</HEAD>
<FRAMESET ROWS="10%,90%">
<FRAME SRC="js37a.html" NAME="frame1">
<FRAME SRC="js37b.html" NAME="frame2">
</FRAMESET>
</HTML>
[リスト８]
<HTML>
<HEAD>
<TITLE>JavaScript example 37a</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var date = new Date();
next= date.getSeconds();
function mult(p, q) {
var p1 = 0;
var p0 = 0;
var q1 = 0;
var q0 = 0;
p1 = Math.floor(p / 10000);
p0 = p % 10000;
q1 = Math.floor(q / 10000);
q0 = q % 10000;
return (((p0 * q1 + p1 * q0) % 10000) * 10000 + p0 * q0) % 100000000;
}
function random(r) {
next = (mult(next, 31415821) + 1) % 100000000;
return Math.floor((Math.floor(next / 10000) * r ) / 10000);
}
var url = "";
function IPmaker(){
url = "http://205.177.227." + random(256) + "/";
parent.frame2.location = url;
document.form.textbox.value = url;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form">
<INPUT TYPE="button" VALUE="My Neighborhood" onClick="IPmaker()">
URL<INPUT TYPE="text" SIZE="25" NAME="textbox">
</FORM>
</BODY>
</HTML>
[リスト９]
<HTML>
<HEAD>
<TITLE>JavaScript example 37b</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
■掲示板の書き込み確認画面＜例３８＞ js38.html
筆者が利用しているCGIを使った掲示板システムは、書き込み時の確認画面がデータ送信後に表示されるというシステムになっています。もちろんCGIを変更すれば送信前に確認したり修正できるようにすることもできます。
しかし、JavaScriptを使えばサーバー側に負担をかけることもなく、比較的簡単に確認処理を行なうことができます。
そこで、送信前に確認画面を表示し、必要に応じて書き込み内容を修正できるスクリプトを作成しました（リスト１０）。
「確認画面」ボタンを押すと、書き込み内容が別ウィンドウに表示されますので、内容を確認します。「OK」ボタンをクリックすると確認画面のウィンドウが閉じます。
自分自身のウィンドウを閉じるには、次のように記述します。
self.close()
[リスト１０]
<html>
<head>
<title>JavaScript example 38</title>
</head>
<!-- Copyright (C) 1996 Yasuo Uchida, Mitsuru Tomita -->
<SCRIPT LANGUAGE="JavaScript">
<!--
function confirmCleanUp() {
mW=window.open("","winnew","toolbar=no,directories=no,menubar=no,resizable=yes,width=600,height=300");
mW.document.open();
mW.document.write("<head><title>「あそぼーど」への書き込み確認</title></head>" );
mW.document.write("<body>");
mW.document.write("お名前: " + document.form1.realname.value + "<p>");
mW.document.write("メールアドレス: " + document.form1.username.value + "<p>");
mW.document.write("ホームページ: " + document.form1.url.value + "<p>");
mW.document.write("お住まい: " + document.form1.city.value + "<p>");
mW.document.write("メッセージ: " + "<p>" + document.form1.comments.value + "<p>");
mW.document.write("<hr><P><P><center>");
mW.document.write("<FORM>");
mW.document.write("<INPUT TYPE=button VALUE=' OK ' onClick='self.close()'>");
mW.document.write("</FORM></center>");
mW.document.write(" </body> ");
mW.document.close();
}
//-->
</SCRIPT>
</HEAD>
<body bgcolor="#d0ffd0">
<center><h1>「あそぼーど」への書き込み</h1></center>
<BR>
少なくとも、名前（ペンネーム可）とメッセージは書き込んでください。<p>
入力内容を確認するには、「確認画面」ボタンをクリックしてください。確認画面でメッセージの内容が表示されない場合には、入力のメッセージ・エリア内を一度クリックすれば表示されるようになります。
内容確認後「書き込む」ボタンをクリックすると送信されます。
<hr>
<form name="form1" method=POST action="asoboard.cgi">
お名前:<input type=text name=realname size=30>（例 内田保雄 or UFO）<br>
メールアドレス: <input type=text name=username size=40>（例 yasuo@uchidas.com）<br>
ホームページ（省略可）: <input type=text value=http:// Japan name=url size=50>（例 http://www.uchidas.com/）<br>
お住まい（都道府県）: <input type=text name=city size=15>（例 兵庫県）
<p>
メッセージ:<br>
<textarea name=comments COLS=80 ROWS=6></textarea><p>
<input type="button" value=確認画面 onClick="confirmCleanUp()">
<input type=reset value=クリアーする> <input type="submit" value="書き込む">
</form>
<hr>
<ul>
<li><a href="asoboard.html">「あそぼーど」へ戻る</a><br>
</ul>
</body>
</html>
■神経衰弱ゲーム＜例３９＞ js39.html
最後に神経衰弱ゲームを紹介しましょう（リスト１１）。
4×4内のパネルをクリックすると数字が表示され、2つ開いたパネル内の数字が同じ時は開いたままになります。違っていた場合は、両方のパネルが閉じます。そしてまた繰り返し、全部のパネルが開けば終わりというものです。
テーブルを使って4×4のテキスト・ボックスを表示し、パネルに見せかけます。表示する数字は乱数で発生します。この例のポイントは、テキスト・ボックスをクリックした時に発生するonFocusイベント・ハンドラーを利用しているという点です。
[リスト１１]
<html>
<head>
<title>Shinkei-suijyaku Ver1.1</title>
<!-- Copyright (c) 1996 Yasuo Uchida, Mitsuru Tomita. All Rights reserved.
Author : Yasuo Uchida, Mitsuru Tomita
-->
<script LANGUAGE="JavaScript">
<!--
// programmed by Yasuo Uchida
var next = 1;
function mult(p, q) {
var p1 = 0;
var p0 = 0;
var q1 = 0;
var q0 = 0;
p1 = Math.round(p / 10000);
p0 = p % 10000;
q1 = Math.round(q / 10000);
q0 = q % 10000;
return (((p0 * q1 + p1 * q0) % 10000) * 10000 + p0 * q0) % 100000000;
}
function random() {
next =(mult(next, 31415821) + 1) % 100000000;
return next % 16;
}
function dim() {
this[0] = 5;
this[1] = 1;
this[2] = 2;
this[3] = 6;
this[4] = 8;
this[5] = 3;
this[6] = 7;
this[7] = 4;
this[8] = 5;
this[9] = 4;
this[10] = 6;
this[11] = 1;
this[12] = 7;
this[13] = 2;
this[14] = 8;
this[15] = 3;
}
var data = new dim();
var cell = new dim();
function init() {
var i = 0;
var j = 0;
var date = new Date();
next= date.getSeconds();
for (i=0;i<=15;i++)
cell[i] = 0;
for(j=0;j<=15;j++) {
i = random();
while(cell[i] != 0)
i = random();
cell[i] = data[j];
}
for (i=0;i<=15;i++)
document.forms[0].elements[i].value = "";
}
var flag = 0;
var mae = 0;
var ato = 0;
function main(input) {
var ichi = 0;
ichi = input.name;
if (cell[ichi] >= 0) {
if (flag == 0) {
if (cell[ato] != cell[mae]) {
document.forms[0].elements[ato].value = "";
document.forms[0].elements[mae].value = "";
}
document.forms[0].elements[ichi].value = cell[ichi];
mae = ichi;
flag = 1;
}
else {
if (ichi != mae) {
document.forms[0].elements[ichi].value = cell[ichi];
ato = ichi;
flag = 0;
if (cell[ato] == cell[mae]) {
cell[ato] = -1;
cell[mae] = -1;
}
}
}
}
}
//-->
</script>
</head>
<body>
<h2>神経衰弱（しんけいすいじゃく）ゲーム</h2>
Shinkei-suijyaku Ver1.1<br><br>
<STRONG>☆あそびかた☆</STRONG><br><br>
1. [Start]ボタンをおしてください。<br>
2. パネルを２つおして、すうじをあわせます。<br>
3. パネルがぜんぶひらいたらおわりです。<br>
4. もういちどあそぶには、[Start]ボタンをおします。<br>
<br><br>
<form>
<table BORDER="1" cellpadding=0 cellspacing=5>
<tr>
<td><input type="text" name="0" value="" size=2 onFocus="main(this)"></td>
<td><input type="text" name="1" value="" size=2 onFocus="main(this)"></td>
<td><input type="text" name="2" value="" size=2 onFocus="main(this)"></td>
<td><input type="text" name="3" value="" size=2 onFocus="main(this)"></td>
</tr>
<tr>
<td><input type="text" name="4" value="" size=2 onFocus="main(this)"></td>
<td><input type="text" name="5" value="" size=2 onFocus="main(this)"></td>
<td><input type="text" name="6" value="" size=2 onFocus="main(this)"></td>
<td><input type="text" name="7" value="" size=2 onFocus="main(this)"></td>
</tr>
<tr>
<td><input type="text" name="8" value="" size=2 onFocus="main(this)"></td>
<td><input type="text" name="9" value="" size=2 onFocus="main(this)"></td>
<td><input type="text" name="10" value="" size=2 onFocus="main(this)"></td>
<td><input type="text" name="11" value="" size=2 onFocus="main(this)"></td>
</tr>
<tr>
<td><input type="text" name="12" value="" size=2 onFocus="main(this)"></td>
<td><input type="text" name="13" value="" size=2 onFocus="main(this)"></td>
<td><input type="text" name="14" value="" size=2 onFocus="main(this)"></td>
<td><input type="text" name="15" value="" size=2 onFocus="main(this)"></td>
</tr>
</table>
<BR>
<input type="button" name="button1" value="Start" onClick="init()">
</form>
</body>
</html>
■参考文献
| ご注意 本スクリプトの利用・改変・配布等は自由です。 著作権は、内田保雄(Yasuo Uchida)に帰属します。 本スクリプトは学習用のサンプルとして作成したものであり、運用上生じた直接あるいは間接的な損害については一切補償いたしかねますので、利用者個人の責任で運用くださるようお願いします。 |
(since Jan 18, 1997)
ご意見・ご感想をお寄せください。
E-mail yasuo@uchidas.com
Copyright (c) 1997 Yasuo Uchida