警告が表示された場合は、「ブロックされているコンテンツを許可」をクリックすると、各例題の出力結果が閲覧できます。
JavaScript (ジャバ スクリプト)
JavaScript (ジャバ スクリプト) はNetscape (ネットスケープ) 社により開発され、
Web (ウェブ) ブラウザ表示用言語のHTML (エッチティーエムエル) 内に直接記述することが
可能なプログラム言語である。
JavaScriptはプログラムとしての機能はあまり豊富ではないが、使用法は比較的簡便である。
JavaScriptプログラムは、テキストエディタ等を用いて
HTMLソースファイル中に「直接入力」モードで記す。
作成したHTMLファイル名の拡張子は、.html または .htm として保存する。
例えば ex1.htm など。
この保存したHTMLファイルをマウスでダブルクリックするなどして開くと計算結果が表示される。
JavaScriptでは、アルファベットの大文字と小文字が区別されるので注意すること。
JavaScriptの各プログラム文の終わりには 必ずセミコロン「 ; 」を付す。
なお 文字入力モード (全角，半角，直接入力) などの区別には特に注意を払うこと。
コンピュータでは空白も文字の一種とみなされ、全角と半角の空白は全く異なるので区別して入力する。
［注］
HTML (エッチティーエムエル) は Hyper Text Markup Language の略語であって、
インターネットで使用されるWebブラウザ表示用ファイルを作成するためのテキスト編集等に
限定された極めて簡便な言語である。
HTMLファイルは、開始タグと呼ばれる記号 <html> に始まり、
終了タグ </html> で終わる。
HTML は、このような各種のタグを用いたコマンド (制御命令) 群により
書式制御を行うプログラム言語である。
JavaScript ソースファイルの記述例
以下のプログラム記述の各行において「 // 」以後は説明文であって、記入する必要はない。
また コマンド (制御命令) を表す文字を太字で記してあるが、実際の記述では、すべて標準の文字形で記す。
[例 1] 二つの整数 591 と -365 の 和を求めて表示する。
<html> // HTMLファイルの開始タグ (HTMLファイル全体の最初の行で必ず一つ必要)
<body> // HTMLファイル本文の開始タグ
<script language="JavaScript"> // JavaScriptの開始タグ (JavaScript記述領域の最初の行で必ず一つ必要)
i = 591 ; // i に整数値 591 を代入
j = -365 ; // j に整数値 -365 を代入
k = i+j ; // i と j の和を計算し、k に代入
document.write(k) ; // 計算結果 k の値を表示
</script> // JavaScriptの終了タグ (JavaScript記述領域の最後の行で必ず一つ必要)
</body> // HTMLファイル本文の終了タグ
</html> // HTMLファイルの終了タグ (HTMLファイル全体の最後の行で必ず一つ必要)
(例 1 の出力結果)
-----------------
-----------------
例 1 において、左辺にある i，j，k を「変数」という。
この変数名は概ね任意に付けられるが、次の規則には従わなければならない。
(1) 直接入力のアルファベットや数字並びにアンダースコア「 _ 」を用いることができる。
(2) 変数名の先頭文字には数字を使用することができない。
(3) JavaScript のコマンド (制御命令) として既に使用されている文字列すなわち「予約語」は
用いることができない。
ただし 変数名の一部に予約語を含んでいても支障はない。
例えば for や if は認められないが、xfor1 や ifx5 ならば変数名として使用できる。
右辺の定まった値 591 や -365 のことを「定数」という。
一般にプログラム文では、イコール記号「 = 」は数学上の等しいという意味ではなく、
右辺値を左辺の変数 (メモリー素子の記憶領域) に格納するという意味である。
[例 2] 直接入力の文字列 ABCDEFGHIJKLMNOPQRSTUVWXYZ と 0123456789 を表示する。
<html>
<body>
<script language="JavaScript">
s1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" ; // 変数 s1 に文字列 ABCDEFGHIJKLMNOPQRSTUVWXYZ を代入
s2 = "0123456789" ; // 変数 s2 に文字列 0123456789 を代入
document.write(s1) ; // s1 の値を表示
document.write("<br>") ; // 改行タグ <br> の出力
document.write(s2) ; // s2 の値を表示
</script>
<br> // 改行タグ (改行しないときは不必要)
</body>
</html>
(例 2 の出力結果)
----------------------------------
----------------------------------
変数には数値の他に文字または文字列を代入することが出来る。
変数に文字列を代入するときは、必ず「 " 」を文字列の始めと終わりに付す。
改行指定をしない限り、一行中に続けて出力表示される。
HTMLにおいて、改行指定のコマンドは <br> である。
document.write の ( )中で、「 " 」と「 " 」の間に記した任意の
文字列は、そのまま画面へ出力される。
ただし コマンド (制御命令) の文字列については表示されずに実行される。
[例 3] 二つの実数 5000.0 と 0.2 の 和，差，積，商 をそれぞれ求めて表示する。
<html>
<body>
<script language="JavaScript">
x = 5000.0 ;
y = 0.2 ;
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(wa , "<br>") ; // wa の値を表示して改行
document.write(sa , "<br>") ; // sa の値を表示して改行
document.write(seki , "<br>") ; // seki の値を表示して改行
document.write(syo , "<br>") ; // syo の値を表示して改行
</script>
</body>
</html>
(例 3 の出力結果)
------------------------
------------------------
document.write の ( )中に複数個の画面出力対象がある場合は、必ずカンマ「 , 」で区切ること。
なお document.write の ( )中で、「 " 」と「 " 」の間に
記した任意の文字列は、そのまま画面へ出力される。
ただし コマンドの文字列については表示されずに実行される。
[例 4] 二つの実数 3.0e2 と 2.0e-1 の 和，差，積，商 を それぞれ求めて表示する。
このとき計算式も表示する。
ただし 3.0e2 は 3.0×102 を意味する。
また 2.0e-1 は 2.0×10-1 を意味する。
<html>
<body>
<script language="JavaScript">
x = 3.0e2 ;
y = 2.0e-1 ;
wa = x+y ;
sa = x-y ;
seki = x*y ;
syo = x/y ;
document.write("x+y= ", wa , "<br>") ;
document.write("x-y= ", sa , "<br>") ;
document.write("x*y= ", seki , "<br>") ;
document.write("x/y= ", syo , "<br>") ;
</script>
</body>
</html>
(例 4 の出力結果)
------------------------
------------------------
document.write の ( )中に複数個の画面出力対象がある場合は、
必ずカンマ「 , 」で区切ること。
なお document.write の ( )中で、「"」と「 "」の間に
記した任意の文字列は、そのまま画面へ出力される。
ただし コマンドの文字については表示されずに実行される。
[例 5] 二つの整数 1000000000000000 (16桁) と
999999999999999 (15桁) の 和，差，積，商 を求めて表示する。
このとき計算式も表示する。
<html>
<body>
<script language="JavaScript">
m = 1000000000000000 ;
n = 999999999999999 ;
wa = m+n ;
sa = m-n ;
seki = m*n ;
syo = n/m ;
document.write("m+n= ", wa , "<br>") ;
document.write("m-n= ", sa , "<br>") ;
document.write("m*n= ", seki , "<br>") ;
document.write("n/m= ", syo , "<br>") ;
</script>
</body>
</html>
(例 5 の出力結果)
--------------------------
--------------------------
他のプログラム言語 (Ｃ言語やJava等) においては、実数と整数は厳格に区別され、
予め「型宣言」をしてから用いられる。
実数の数字は小数点を付して表記し、小数点を付さない数字は整数とみなされる。
例えば 実数型は 1500.0 または 1.5e3 など．整数型は 1500 など。
しかし JavaScript においては、実数型 と 整数型 は自動的に判別される。
JavaScriptでは、変数の「型」の区別は他の言語 (Ｃ言語やJava等) に比較すると厳格ではない。
[例 6] 二つの実数 5.00000000000009e20 と 5.00000000000008e20 の 和，差，積，商 を求めて表示する。
このとき計算式も表示する。
<html>
<body>
<script language="JavaScript">
x = 5.00000000000009e20 ;
y = 5.00000000000008e20 ;
wa = x+y ;
sa = x-y ;
seki = x*y ;
syo = x/y ;
document.write("x+y= ", wa , "<br>") ;
document.write("x-y= ", sa , "<br>") ;
document.write("x*y= ", seki , "<br>") ;
document.write("x/y= ", syo , "<br>") ;
</script>
</body>
</html>
(例 6 の出力結果)
-----------------------
----------------------
例 6 の差の計算 x-y において、実数型の計算では大きな数同士を互いに差し引くと、
桁落ちが生じて計算結果の精度が低下するので注意を要する。
なお 整数型では、桁落ちは生じない。
[例 7] 各種の数学関数の値をそれぞれ求めて表示する。
<html>
<body>
<script language="JavaScript">
x = 2.0 ; // x に実数値 2.0 を代入
y1 = Math.sqrt(x) ; // x の平方根を計算して y1 に代入
y2 = Math.pow(x, 4) ; // x の4乗を計算して y2 に代入
y3 = Math.pow(x, 2.0/3.0) ; // x の 2/3乗を計算して y3 に代入
y4 = Math.exp(x) ; // x の 指数を計算して y4 に代入
y5 = Math.log(x) ; // x の 自然対数を計算して y5 に代入
y6 = Math.sin(x) ; // x の 正弦を計算して y6 に代入
y7 = Math.cos(x) ; // x の 余弦を計算して y7 に代入
y8 = Math.tan(x) ; // x の 正接を計算して y8 に代入
document.write("x = ", x , "<br>" ) ;
document.write("x の平方根 = ", y1 , "<br>" ) ;
document.write("x の 4乗 = ", y2 , "<br>" ) ;
document.write("x の 2/3乗 = ", y3 , "<br>" ) ;
document.write("x の指数 exp(x) = ", y4 , "<br>" ) ;
document.write("x の自然対数 log(x) = ", y5 , "<br>" ) ;
document.write("x の正弦 sin(x) = ", y6 , "<br>" ) ;
document.write("x の余弦 cos(x) = ", y7 , "<br>" ) ;
document.write("x の正接 tan(x) = ", y8 , "<br>" ) ;
</script>
</body>
</html>
(例 7 の出力結果)
----------------------------------------
----------------------------------------
JavaScript においては、数学関数のことを Math オブジェクトという。
繰り返し操作を制御する for文 を用いたプログラム例を以下に示す。
繰り返し操作のことを「ループ」という。
[例 8] 二次関数 y = x * x について、独立変数 x を一定間隔で増加させ、
それに応じた従属変数 y の値を繰り返し計算して表示する。
<html>
<body>
<script language="JavaScript">
for( x=-5.0; x<=5.0; x=x+1.0 )
{ // forループの開始
y = x*x ; // x の 2乗を計算し、y に代入
document.write(x ," ", y , "<br>") ; // x の値と全角空白ならびに y の値を表示して改行
} // forループの終了
</script>
</body>
</html>
(例 8 の出力結果)
------------------------
------------------------
for( x=-5.0; x<=5.0; x=x+1.0 ) { } は、
x=-5.0 から始めて、x の値が 5.0 になるまで x を +1.0 しながら
{ }中のプログラムを繰り返す「forループ」のプログラム文である。
x の値が 5.0 になると forループ領域から抜けて繰り返し実行は終了する。
例 8 の for ( x=-5.0; x<=5.0; x=x+1.0 ) において、
x<=5.0 を x<5.0 に変えると
x = 5.0 が除外されるので、+1 の間隔での繰り返し実行は x = 4.0 に達すると終了する。
[例 9] 1 から 100 までの整数をすべて加えた 1+2+3+4+ ‥ ‥ +100 の値 を求めて表示する。
<html>
<body>
<script language="JavaScript">
m=0 ; // 最初に、変数 m を零に初期化
for(n=1; n<=100; n=n+1)
{ // forループの開始
m=m+n ; // 変数 m の値に n を加えた数値を m に代入
} // forループの終了
document.write(m) ; // forループ領域から抜けた時点での変数 m の値を表示
</script>
</body>
</html>
(例 9 の出力結果)
------------------
------------------
for(n=1; n<=100; n=n+1) { } は、
n=1 から始めて、n の値が 100 になるまで n を +1 しながら
{ }中のプログラムを繰り返す forループのプログラム文である。
n の値が 100 になると forループ領域から抜けて繰り返し実行は終了する。
このとき、forループ領域から抜けた時点での変数 m の値は 1+2+3+4+ ‥ ‥ +100 となっている。
[例 10] 1 から 10 までの整数のすべて積 1*2*3*4* ‥ ‥ *10 の値 を求めて表示する。
<html>
<body>
<script language="JavaScript">
m=1 ; // 最初に、変数 m を 1 に初期化
for(n=1; n<=10; n=n+1)
{
m=m*n ; // 変数 m の値に n をかけた数値を m に代入
}
document.write(m) ; // forループ領域から抜けた時点での変数 m の値を表示
</script>
</body>
</html>
(例 10 の出力結果)
------------------
------------------
for(n=1; n<=10; n=n+1) { } は、
n=1 から始めて、n の値が 10 になるまで n を +1 しながら
{ }中のプログラムを繰り返す forループのプログラム文である。
n の値が 10 になると forループ領域から抜けて繰り返し実行は終了する。
このとき、forループ領域から抜けた時点での変数 m の値は 1*2*3*4* ‥ ‥ *10 となっている。
JavaScript において、条件判断を行うプログラム if 文の例を以下に記す。
[例 11] 二次方程式 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 の定義
if ( D >= 0.0 )
{ // 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>" ) ;
} // ifブロックの終了
else
{ // elseブロックの開始
document.write("実数解なし", "<br>" ) ; // 条件式が偽になったときの処理
} // elseブロックの終了
</script>
</body>
</html>
(例 11 の出力結果)
--------------------
--------------------
例 11 の if ( D >= 0.0 ) { } else { } において、
条件式 D >= 0.0 が真のとき「if ブロック」内のプログラムを実行する。
ただし条件式 D >= 0.0 が偽になったときは、「elseブロック」内のプログラムを実行する。
if 文の基本構造は if ( ) { } else { } の形をしており、if ( ) 中に
条件式を指定し、その直後の { }中には条件式が真のときに
行う操作プログラム (if ブロック) を記述する。
else の後の { } 中は条件式が偽になったときの
処理プログラム (else ブロック) を記述する。
if 文において、条件式が偽になったときの処理が必要ないときは、
else { } の部分は省略してもよい。
すなわち else { } を省略した場合は、条件式が真のときのみを実行して終了する。
if ( )中に記せる条件式には、下記のような式がある。
D > 0.0 ( D は零より大きい。)
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 より大きい。)
ここで記号 && は論理における「かつ」、記号 || は「または」を意味する。
JavaScript において、ネスト (入れ子) 構造のプログラム例を以下に記す。
ネスト (入れ子) とは、for文の中にさらに for文が入って多重ループになっている場合や
if 文の中にさらに if 文が入っているようなプログラム構造のことをいう。
[例 12] 二次関数 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 まで変化させるforループの開始
for(x=0.0; x<=5.0; x=x+1.0 )
{ // x=0.0 から 5.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>
(例 12 の出力結果)
----------------------
----------------------
例 12 で示されているように、内側の for文のループから先に実行される。
すなわち 最初は係数 a=1 一定でもって変数 x が零から 5 まで +1 されながら変化し、
次に a が +1 されて a=2 一定でもって x が零から 5 まで +1 されながら変化する。
[例 13] 二次方程式 a*x*x + b*x + c = 0.0 の解について、
係数 a, b, c をそれぞれ一定間隔で変化させ、解 x1 と x2 を求める。
このとき実数解が無いときは「実数解なし」という文字列を表示する。
<html>
<body>
<script language="JavaScript">
document.write("a", " ","b"," ","c" ," ","x1"," ","x2","<br>" ) ;
for(a=1.0; a<=3.0; a=a+1.0)
{ // a=1.0 から 3.0 まで変化させる forループの開始
for(b=0.0; b<=3.0; b=b+1.0 )
{ // b=0.0 から 3.0 まで変化させるforループの開始
for(c=0.0; c<=3.0; c=c+1.0)
{ // c=0.0 から 3.0 まで変化させるforループの開始
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
{ // 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>
(例 13 の出力結果)
------------------------------------------------
------------------------------------------------
JavaScript において、多数のデータをまとめて操作出来る「配列」を用いたプログラム例を以下に記す。
[例 14] 整数データの集まり X が (35， 80， 52， 90， 74 ) 、 Y が
(40， 23，60， 71， 50) として与えられているとき、
X と Y の対応する各要素を加えた値を求めて表示する。
<html>
<body>
<script language="JavaScript">
var X=new Array(5) ; // 配列 X の宣言 ただし ( )中の数字は配列要素の個数
var Y=new Array(5) ; // 配列 Y の宣言
var Z=new Array(5) ; // 配列 Z の宣言
X[0]=35 ; // 配列要素 X[0] に 35 を代入
X[1]=80 ; // 配列要素 X[1] に 80 を代入
X[2]=52 ; // 配列要素 X[2] に 52 を代入
X[3]=90 ; // 配列要素 X[3] に 90 を代入
X[4]=74 ; // 配列要素 X[4] に 74 を代入
Y[0]=40 ; // 配列要素 Y[0] に 40 を代入
Y[1]=23 ; // 配列要素 Y[1] に 23 を代入
Y[2]=60 ; // 配列要素 Y[2] に 60 を代入
Y[3]=71 ; // 配列要素 Y[3] に 71 を代入
Y[4]=50 ; // 配列要素 Y[4] に 50 を代入
document.write("n", " ", "X[n] + Y[n]", "<br>" ) ; // 文字列 n と X[n]+Y[n] 間に空白を挿入して表示
for(n=0; n<=4; n=n+1)
{ // 配列要素の[ ]中の番号を n=0 から始めて、n=4 まで繰り返す forループの開始
Z[n]=X[n]+Y[n] ; // X[n]+Y[n] の値を Z[n] に代入
document.write(n, " " , Z[n] , "<br>" ) ; // n と Z[n] の値の間に空白を挿入して表示
} // forループの終了
</script>
</body>
</html>
(例 14 の出力結果)
------------------------
------------------------
例 14 において、[ ]中の数字は配列要素を区別する番号，すなわち添え字に該当する。
[例 15] ユーザーがボタンをクリックすることによりページの背景色を変更する。
<html>
<body>
<script language="JavaScript">
function backdisp(col) // 背景色を表示するイベント処理関数
{
document.bgColor=col ; // 背景色を表示
}
</script>
背景色を、ボタンのクリックで指定して下さい。<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>
(例 15 の出力結果)
--------------------------------------
背景色を、ボタンのクリックで指定して下さい。
--------------------------------------
Ｃ言語 と Ｃ++ へ進む
情報技術 へ戻る
トップページ へ戻る