script.htm
JavaScript ( ジャバ スクリプト )
JavaScript は Netscape ( ネットスケープ )社により開発され、
Web ( ウェブ ) ブラウザ表示用言語の HTML ( エッチティーエムエル ) 内に
直接記述することが可能なプログラム言語である。
JavaScript はプログラムとしての機能はあまり豊富ではないが、
使用法は比較的簡便である。
JavaScriptプログラム は、テキストエディタ等を用いて HTMLソースファイル中に
「直接入力」 モードで記す。
作成したHTMLファイル名の拡張子は、.html または .htm として保存する。
例えば ex1.htm など。
この保存したHTMLファイルを マウスでダブルクリックするなどして開くと
計算結果が表示される。
JavaScript では、アルファベットの大文字と小文字が区別されるので注意すること。
JavaScript の各プログラム文の終わりには 必ずセミコロン 「；」 を付す。
なお 文字入力モード ( 全角，半角，直接入力 などの区別 ) に注意を払うこと。
コンピュータでは空白も文字の一種とみなされ、全角と半角の空白は全く異なる。
以下のプログラム記述の各行において // から後の文は説明であって、記述する必要はない。
[例１] 二つの数 20.5 と -3.8 の 和を計算して、結果を表示する。
<html> // HTMLファイルの開始タグ.（HTMLファイル全体の最初の行で必ず一つ必要.）
<body> // HTMLファイル本文の開始タグ.（HTMLファイル本文記述領域の最初の行で必ず一つ必要.）
<script language = "JavaScript"> // JavaScriptの開始タグ.（JavaScript記述領域の最初の行で必ず一つ必要.）
x = 20.5; // x に実数値 20.5 を代入.
y = -3.8; // y に実数値 -3.8 を代入.
wa = x+y; // x と y の和を計算し、wa に代入.
document.write(wa); // 計算結果 wa の値を画面に表示.
</script> // JavaScriptの終了タグ.（JavaScript記述領域の最後の行で必ず一つ必要.）
<br> // HTML文の記述領域において、改行を指定.（改行しないときは不必要.）
</body> // HTMLファイル本文の終了タグ.（HTMLファイル本文領域の最後の行で必ず一つ必要.）
</html> // HTMLファイルの終了タグ.（HTMLファイル全体の最後の行で必ず一つ必要.）
（例１の出力結果）
--------------------
--------------------
（注） 例１において、左辺にある x，y，wa を変数という。
この変数名は概ね任意に付けられるが、次の規則には従わなければならない。
(1) 直接入力のアルファベットや数字並びにアンダースコア 「 _ 」 を用いることができる。
(2) 変数名の先頭文字には数字を使用することができない。
(3) JavaScript のコマンド (制御命令) として既に使用されている文字列すなわち
予約語は用いることができない。
ただし変数名の一部に予約語を含んでいても支障はない。
例えば for や if は認められないが、xfor1 や ifx5 ならば使用できる。
（注） HTML における改行指定のコマンドは <br> である。
改行指定をしない限り、一行中に続けて出力表示される。
（注） 例１において、右辺の定まった値 20.5 や -3.8 のことを定数という。
（注） 一般にプログラム文では、イコール記号 「 = 」 は数学上の等しいという意味ではなく、
右辺値を左辺の変数（メモリー素子の記憶領域）に格納するという意味である。
[例２] 直接入力の文字列 ABCDEFGHIJKLMNOPQRSTUVWXYZ と 0123456789 を表示する。
<html>
<body>
<script language = "JavaScript">
x = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" ; // 変数 x に文字列 ABCDEFGHIJKLMNOPQRSTUVWXYZ を代入.
y = "0123456789" ; // 変数 y に文字列 0123456789 を代入.
document.write(x); // x の値を画面に表示.
document.write("<br>"); // 改行タグ <br> の出力.
document.write(y); // y の値を画面に表示.
</script>
</body>
</html>
（例２の出力結果）
---------------------------------------------
---------------------------------------------
（注） 変数には数値の他に文字または文字列を代入することが出来る。
例２において示されているように、変数に文字列を代入するときは、
必ず 「 ”」 を文字列の始めと終わりに付す。
（注） 改行指定をしない限り、一行中に続けて出力表示される。
改行指定のコマンドは <br> である。
（注） 例２において示されているように document.write の ( )中で、
「 ”」 と 「 ”」 の間に記した任意の文字列は、そのまま画面へ出力
されるが、改行タグのようなコマンド（制御命令）の文字列については
表示されずに実行される。
[例３] 二つの数 20.5 と -3.8 の 四則計算をして、それら結果を表示する。
<html>
<body>
<script language = "JavaScript">
x = 20.5;
y = -3.8;
wa = x+y; // x と y の和を計算し、wa に代入.
sa = x-y; // x と y の差を計算し、sa に代入.
seki = x*y; // x と y 積を計算し、seki に代入.
syo = x/y; // x と y の商を計算し、syo に代入.
document.write(x); // x の値を画面に表示.
document.write("<br>");
document.write(y); // y の値を画面に表示.
document.write("<br>");
document.write("上記の四則計算結果"); // 文字列「上記の四則計算結果」を画面に表示.
document.write("<br>");
document.write(wa); // 計算結果 wa の値を画面に表示.
document.write("<br>");
document.write(sa); // 計算結果 sa の値を画面に表示.
document.write("<br>");
document.write(seki); // 計算結果 seki の値を画面に表示.
document.write("<br>");
document.write(syo); // 計算結果 syo の値を画面に表示.
</script>
<br>
</body>
</html>
（例３の出力結果）
--------------------
--------------------
繰り返し操作を制御する for文 を用いたプログラム記述方法について概説する。
( 繰り返し操作のことをループという。)
for 文の基本構造は for ( ) { } の形をしており、( )中に初期値や増加分などの
繰り返し条件を指定し、{ }中に繰り返し実行を必要とするプログラム文を記述する。
[例３] 二次関数 y = x * x について、独立変数 x を一定間隔で増加させ、
それに応じた従属変数 y の値を繰り返し計算して表示する。
<html>
<body>
<script language = "JavaScript">
for (x=-10.0; x<=10.0; x=x+1.0)
{ // x=-10.0 から始めて、x の値が 10.0 になるまで x を +1.0 しながら{ }中のプログラムを繰り返すforループの開始.
y = x*x; // x の 2乗を計算し、y に代入.
document.write(x, " : ", y, "<br>"); // x の値並びにコロン「 : 」と y の値を表示して改行.
} // x の値が 10.0 になるとforループ領域から抜けて繰り返し実行は終了.
</script>
</body>
</html>
（例３の出力結果）
-----------------------------
-----------------------------
（注） 例３において示されているように、document．write の ( )中に
複数個の画面出力対象がある場合は、必ずカンマ 「，」 で区切ること。
例えば document．write(x, " ： ", y, "<br>") については、
4個の対象 「x の値」， 「 ： 」， 「y の値」， 「<br>」 が、同時に出力
されている。
（注） 例３の for ( x = -10.0; x <= 10.0; x = x+1.0 ) において
x <= 10.0 を x < 10.0 に変えると x = 10.0 が除外されるので、
+1 の間隔での繰り返し実行は x = 9.0 に達すると終了する。
[例４] 1 から 100 までの整数をすべて加えた 1+2+3+4+ ‥ ‥ +100 の値 を表示する。
<html>
<body>
<script language = "JavaScript">
document.write("1 から 100 までの整数の和は", "<br>"); // 文字列「1 から 100 までの整数の和は」を表示して改行.
x=0; // 最初に、変数 x を零に初期化する.
for (n=1; n<=100; n=n+1)
{ // n=1 から始めて、n の値が 100 になるまで n を +1 しながら{ }中のプログラムを繰り返すforループの開始.
x=x+n; // 変数 x の値に n を加えた数値を x に格納.
} // n の値が 100 になるとforループ領域から抜けて繰り返し実行は終了.
document.write(x); // forループ領域から抜けた時点での変数 x の値を表示.
</script>
</body>
</html>
（例４の出力結果）
------------------------------
-----------------------------
[例５] 1 から 10 までの整数のすべて積 1*2*3*4* ‥ ‥ *10 の値 を表示する。
<html>
<body>
<script language = "JavaScript">
document.write("1 から 10 までの整数の積は", "<br>");
x=1;
for (n=1; n<=10; n=n+1)
{
x=x*n;
}
document.write(x);
</script>
</body>
</html>
（例５の出力結果）
-----------------------------
-----------------------------
[例６] 実数について x ＝ Σ n=1100 (1/n) ＝ 1 + (1/2) + (1/3) + (1/4) + ‥ ‥ + (1/100) の値を表示する。
<html>
<body>
<script language = "JavaScript">
x=0.0;
for (n=1.0; n<=100.0; n=n+1.0)
{
x=x+(1.0/n);
}
document.write(x);
</script>
</body>
</html>
（例６の出力結果）
------------------------
------------------------
条件判断を行うプログラム if 文の記述方法について概説する。
if 文の基本構造は if ( ) { } else { } の形をしており、if ( ) 中に条件式を指定し、
その直後の { } 中には条件式が真のときに行う操作プログラム (if ブロック) を記述する。
else の後の { } 中は条件式が偽になったときの処理プログラム (else ブロック) を記述する。
[例７] 二次方程式 a*x*x + b*x + c = 0.0 の実数の解を求めて表示する。
ただし実数の解がないときは 「この係数では実数の解がありません。」 という文字列を表示する。
<html>
<body>
<script language = "JavaScript">
a = 2.0;
b = 7.0;
c = -15.0;
D = b*b - 4.0*a*c; // 判別式 D の定義.
document.write("a = ", a, "<br>" );
document.write("b = ", b, "<br>" );
document.write("c = ", c, "<br>" );
document.write("のとき", "<br>" );
if ( D >= 0.0 ) // 条件式 D >= 0.0 が真のときifブロック内のプログラムを実行.
{ // ifブロックの開始.
x1 = ( -b + Math.sqrt(D) )/(2.0*a); // 解 x1 を求める.
x2 = ( -b - Math.sqrt(D) )/(2.0*a); // 解 x2 を求める.
document.write("x1 = ", x1, "<br>" );
document.write("x2 = ", x2, "<br>" );
document.write("<br>" );
} // ifブロックの終了.
else // 条件式 D >= 0.0 が偽になったときelseブロック内のプログラムを実行.
{ // elseブロックの開始.
document.write("この係数では実数の解がありません。", "<br>" ); // 条件式が偽になったときの処理.
} // elseブロックの終了.
// 係数 a, b, c の値を変えて、再度同様の計算を実行する。
a = 2.0;
b = 3.0;
c = 9.0;
D = b*b - 4.0*a*c;
document.write("a = ", a, "<br>" );
document.write("b = ", b, "<br>" );
document.write("c = ", c, "<br>" );
document.write("のとき", "<br>" );
if ( D >= 0.0 )
{
x1 = ( -b + Math.sqrt(D) )/(2.0*a);
x2 = ( -b - Math.sqrt(D) )/(2.0*a);
document.write("x1 = ", x1, "<br>" );
document.write("x2 = ", x2, "<br>" );
}
else
{
document.write("この係数では実数の解がありません。", "<br>" );
}
</script>
</body>
</html>
（例７の出力結果）
----------------------------------------------
--------------------------------------------
（注） if 文において、条件式が偽になったときの処理が必要ないときは、else { } の部分は
省略してもよい。この場合は条件式が真のときのみを実行して終了する。
（注） if ( ) 中に記せる条件式には、上例において示した D >= 0.0 以外に下記のような
式がある。
D > 0.0 ( D は零より大きい。)
D < 0.0 ( D は零より小さい。)
D <= 0.0 ( D は零と等しいか零より小さい。)
D == 0.0 ( D は零と等しい。)
D != 0.0 ( D は零に等しくない。)
（注） if ( ) 中に記す条件式が二つになる場合は、以下のように記す。
( D > -50.0 ) && ( D < 80.0 )
D は -50.0 より大きく かつ D は 80.0 より小さい。
( D < -50.0 ) || ( D > 80.0 )
D は -50.0 より小さいか または D は 80.0 より大きい。
ここで記号 && は論理における 「かつ」 、記号 || は 「または」 を意味する。
ネスト (入れ子) 構造のプログラムの記述方法について概説する。
ネスト (入れ子)とは、for文の中にさらに for文が入って多重ループになっている場合や
if 文の中にさらに if 文が入っているようなプログラム構造のことをいう。
[例８] 二次関数 y = a * x * x について、独立変数 x を一定間隔で変化させて
y の値を計算し、さらに係数 a についても一定間隔で変化させ y を求めて
表示する。
<html>
<body>
<script language = "JavaScript">
document.write("a", " ： ","x"," ： ","y" ,"<br>" ); // 第一行に文字列 a：x：y を表示して改行.
for (a=1.0; a<=3.0; a=a+1.0) // a=1.0 から 3.0 まで +1.0 間隔で変化させるforループ.
{
for (x=0.0; x<=5.0; x=x+1.0) // x=0.0 から 5.0 まで +1.0 間隔で変化させるforループ.
{
y=a*x*x; // 二次関数 y の計算
document.write(a," ： ",x, " ： ",y, "<br>" ); // a, x, y の値や全角空白並びに「：」をそれぞれ表示して改行.
} // x=0.0 から 5.0 までのforループの終了.
} // a=1.0 から 3.0 までのforループの終了.
</script>
</body>
</html>
（例８の出力結果）
----------------------------------------------
--------------------------------------------
（注） 例８で示されているように、内側の for文のループから先に実行される。
すなわち 最初は係数 a=1 一定でもって変数 x が零から 5 まで +1 されながら変化し、
次に a が +1 されて a=2 一定でもって x が零から 5 まで +1 されながら変化する。
[例９] 二次方程式 a*x*x + b*x + c = 0 の解について、係数 a, b, c を
それぞれ一定間隔で変化させ、解 x1 と x2 を求めて表示する。
このとき実数解が無いときは 「実数解は無し」 という文字列を表示する。
<html>
<body>
<script language = "JavaScript">
document.write("a", " ： ","b"," ： ","c" ," ： ","x1"," ： ","x2","<br>" ); // 第一行に文字列 a：b：c：x1：x2 を表示して改行.
for (a=1.0; a<=3.0; a=a+1.0) // a=1.0 から 3.0 まで +1.0 間隔で変化させるforループ.
{
for (b=0.0; b<=3.0; b=b+1.0) // b=0.0 から 3.0 まで +1.0 間隔で変化させるforループ.
{
for (c=0.0; c<=3.0; c=c+1.0) // c=0.0 から 3.0 まで +1.0 間隔で変化させるforループ.
{
D=Math.sqrt(b*b-4.0*a*c); // 判別式の計算
if (D >= 0.0)
{ // if ブロックの開始.
x1=(-b+D)/(2.0*a); // 解 x1 を求める.
x2=(-b-D)/(2.0*a); // 解 x2 を求める.
document.write(a," ： ",b, " ： ",c, " ： ",x1, " ： ",x2, "<br>" ); // 係数値や解並びに「：」を表示して改行.
} // if ブロックの終了.
else
{ // else ブロックの開始.
document.write(a," ： ",b, " ： ",c, " ： ","実数解は無し", "<br>" ); // 係数値や「：」並びに「実数解は無し」を表示して改行.
} // else ブロックの終了.
} // c=0.0 から 3.0 までのforループの終了.
} // b=0.0 から 3.0 までのforループの終了.
} // a=1.0 から 3.0 までのforループの終了.
</script>
</body>
</html>
（例９の出力結果）
----------------------------------------------------------
----------------------------------------------------------
[例１０] 二次方程式 a*x*x + b*x + c = 0 の解について、係数 a, b, c を
それぞれ一定間隔で変化させ、実数解のみを求めて表示する。
<html>
<body>
<script language = "JavaScript">
document.write("a", " ： ","b"," ： ","c" ," ： ","x1"," ： ","x2","<br>" );
for (a=1.0; a<=3.0; a=a+1.0)
{
for (b=0.0; b<=3.0; b=b+1.0)
{
for (c=0.0; c<=3.0; c=c+1.0)
{
D=Math.sqrt(b*b-4.0*a*c);
if (D >= 0.0)
{ // if ブロックの開始.
x1=(-b+D)/(2.0*a);
x2=(-b-D)/(2.0*a);
document.write(a," ： ",b, " ： ",c, " ： ",x1, " ： ",x2, "<br>" );
} // if ブロックの終了. ( この後の else ブロックは必要ない.)
}
}
}
</script>
</body>
</html>
（例１０の出力結果）
----------------------------------------------------------
----------------------------------------------------------
グラフィカルなユーザーインターフェイス（GUI）を用いるプログラムについて概説する。
ボタンやテキストエリアなどのインターフェイスが配置されたグラフィカルなページのことを
フォームと呼び、ユーザーがこれらフォームを操作することをイベントと呼ぶ。
具体的には、ユーザーがボタンをクリックするなどの操作はイベントの一つである。
[例１１] ユーザーがボタンをクリックすることによりページの背景色を変更する。
<html>
<body>
<script language = "JavaScript"> // JavaScriptの開始タグ.
function backdisp(col) // 背景色を表示するイベント処理関数.
{
document.bgColor=col; // 背景色を表示.
}
</script> // JavaScriptの終了タグ.
背景色を、ボタンのクリックで指定して下さい。<br>
<form> // フォームの開始タグ.
<input type="button" value="青" onClick="backdisp('#0000FF')"> // 青の表示ボタンを作成.
<input type="button" value="緑" onClick="backdisp('#00FF00')"> // 緑の表示ボタンを作成.
<input type="button" value="赤" onClick="backdisp('#FF0000')"> // 赤の表示ボタンを作成.
<input type="button" value="灰" onClick="backdisp('#C0C0C0')"> // 灰色の表示ボタンを作成.
<input type="button" value="白（既定値）" onClick="backdisp('#FFFFFF')"> // 白の表示ボタンを作成.
</form> // フォームの終了タグ.
</body>
</html>
（例１１の出力結果）
-------------------------------------------
背景色を、ボタンのクリックで指定して下さい。
-------------------------------------------
（注） 例１１において示されているように、背景色を指定するカラーコードは16進数6桁で記す。
FFFFFF ： 白
000000 ： 黒
0000FF ： 青
00FF00 ： 緑
FF0000 ： 赤
C0C0C0 ： 灰
FFFF00 ： 黄
FF00FF ： 紫
一般に、先頭から2桁は赤の量、中の2桁は緑の量、後方の2桁は青の量を、それぞれ16進数で記す。
| 10進数 | 2進数 | 16進数 |
| 0 | 0 | 0 |
| 1 | 1 | 1 |
| 2 | 10 | 2 |
| 3 | 11 | 3 |
| 4 | 100 | 4 |
| 5 | 101 | 5 |
| 6 | 110 | 6 |
| 7 | 111 | 7 |
| 8 | 1000 | 8 |
| 9 | 1001 | 9 |
| 10 | 1010 | A |
| 11 | 1011 | B |
| 12 | 1100 | C |
| 13 | 1101 | D |
| 14 | 1110 | E |
| 15 | 1111 | F |
| 16 | 10000 | 10 |
[例１２] テキストエリア中に数値を入れ、ボタンのクリックで四則計算の結果を表示する。
<html>
<body>
<script language = "JavaScript"> // JavaScript開始タグ.
function wa(f1) // 和の計算を行うイベント処理関数.
{
f1.z1.value = eval(f1.x1.value) + eval(f1.y1.value); // 和の計算.
}
function sa(f2) // 差の計算を行うイベント処理関数.
{
f2.z2.value = eval(f2.x2.value) - eval(f2.y2.value); // 差の計算.
}
function seki(f3) // 積の計算を行うイベント処理関数.
{
f3.z3.value = eval(f3.x3.value) * eval(f3.y3.value); // 積の計算.
}
function syo(f4) // 商の計算を行うイベント処理関数.
{
f4.z4.value = eval(f4.x4.value) / eval(f4.y4.value); // 商の計算.
}
</script> // JavaScript終了タグ.
左辺のテキストエリア中に数値を入れ、右側のボタンをクリックして下さい。<br>
計算結果は、右辺に表示されます。<br>
<form> // フォームの開始タグ.
<input type="text" size=10 name="x1"> + <input type="text" size=10 name="y1"> = <input type="text" size=10 name="z1"> // 和のテキストエリアの作成.
<input type="button" value="和" onClick="wa(this.form)"> // 和の表示ボタンを作成.
<br> // 改行タグ.
<input type="text" size=10 name="x2"> - <input type="text" size=10 name="y2"> = <input type="text" size=10 name="z2"> // 差のテキストエリアの作成.
<input type="button" value="差" onClick="sa(this.form)"> // 差の表示ボタンを作成.
<br> // 改行タグ.
<input type="text" size=10 name="x3"> * <input type="text" size=10 name="y3"> = <input type="text" size=10 name="z3"> // 積のテキストエリアの作成.
<input type="button" value="積" onClick="seki(this.form)"> // 積の表示ボタンを作成.
<br> // 改行タグ.
<input type="text" size=10 name="x4"> / <input type="text" size=10 name="y4"> = <input type="text" size=10 name="z4"> // 商のテキストエリアの作成.
<input type="button" value="商" onClick="syo(this.form)"> // 商の表示ボタンを作成.
<br> // 改行タグ.
</form> // フォームの終了タグ.
</body>
</html>
（例１２の出力結果）
------------------------------------------------------------------
左辺のテキストエリア中に数値を入れ、右側のボタンをクリックして下さい。
計算結果は、右辺に表示されます。
------------------------------------------------------------------
（注） 例１２において、 wa(this.form)， sa(this.form)， seki(this.form)， syo(this.form) は
それぞれ 和，差，積，商 のイベント処理関数を呼び出している。