第２章 HTML プログラミング
3.2 JavaScipt プログラミングの基本
JavaScript プログラムは、HTML とは異なり、動きのある処理を行うことができます。例えば、現在の時 間により処理内容を変えたり、画像の連続表示などを行うことができます。
以下に JavaScript 言語を使った基本的なプログラム事例を紹介します。
補足：
算術演算子、代入演算子、論理演算子、比較演算子、条件演算子及び文字列演算子などに関する構文は 全て PHP 言語と同じですので、詳細は PHP 言語の項を参照ください。
3.2.1 JavaScript の基本仕様 1） JavaScript で処理できるイベント
HTML でブラウザ画面上に描画されたものに対して、マウス等で何らかの操作を行った場合、その操作に 応じたイベントが発生します。JavaScript プログラムは、そのイベントの中の以下に示すイベントに対し て任意の処理を行うことができます。
JavaScript プログラムのどの部分を実行するかは、HTML タグの中で定義されます。
イベント処理名 意味 有効なタイプ
onAbort イメージロードの中断
onBlur フォーカスを失ったとき select,text,textarea
onClick クリック操作時 button,checkbox,radio,link, reset,submit
onChange 値が変化した時 select,text,textarea
onError エラー発生時
onFocus フォーカス時
onLoad ページロード時
onMouseOut マウスがオブジェクトから出た時 link onMouseOver マウスがオブジェクトに入った時 link
onSelect テキストが選択された時
onReset フォームがリセットされた時 form
onSubmit 送信ボタンクリック時 form
onUnload ページがアンロードされた時
補足：
HTML において、どのイベントが発生したときに、JavaScript プログラムのどの部分を実行するかは、以 下のような方法で定義します。
<INPUT TYPE="button" onClick="JSfunc1()">
⇒上記で定義されたボタンがクリックされた場合は、JSfunc１という名前で定義された関数 が実行されます。
<IMG src=image.jpg onMouseOver="JSfunc2()">
⇒上記の IMG タグで表示された画像上にカーソルが置かれた場合、JSfunc２という名前で定 義された関数が実行されます。
3.2.2 JavaScript の基本的な仕様
変数、関数などの名前は、英字かアンダーバーで始まる英数字で定義します。
大文字、小文字は区別されます。
￥で始まる文字列は特殊な意味を持ちます。
\b バックスペース \f フォームフィード \n 復帰/改行
\r 改行 \t タブ \\ ￥文字
\' ’文字 \" ”文字
3.2.3 変数定義
変数は宣言してもしなくとも構いません。また、宣言する場合は型の宣言を行う必要はありません。型 は、その変数に値が格納される時に自動的に決まります。（変数は、var xxxx;と定義します）
Function 構文の中で定義される変数はローカル変数として、Function 構文の外で定義される変数はグロ ーバル変数（どの関数でも参照できる）として定義されます。
javahensu.htm
<HTML>
<script language="JavaScript">
<!-- aaaa=100;
function test1(){
bbbb=200;
document.write(aaaa,"<BR>");
document.write(bbbb,"<BR>");
}
function test2(){
document.write(aaaa,"<BR>");
document.write(bbbb,"<BR>");
} //-->
</script>
<BODY>
<CENTER>
<IMG src=image1.jpg onClick=test1();>
<BR>
<IMG src=image1.jpg onClick=test2();>
</CENTER>
</BODY>
</HTML>
補足：
上記例文は、ブラウザのバージョンにより、"test2"関数がエラーとなる場合と、正常に動作する場合 があります。
3.2.4 配列定義
JavaScript で配列を使う場合は、以下のような定義をします。
var xxx=new Array(5);
⇒変数ｘｘｘが５つの配列形式で定義されます。この配列の参照は、xxx[0]～xxx[4]で行います。
以下は、配列に色識別子を登録しておき、ボタン操作で新しいウインドを開き、そのウインド上で背景色 を切り替えるプログラムの例です。
javahairetsu.htm
<HTML>
<SCRIPT LANGUAGE="JavaScript">
dt=new Array();
dt[0]="red"; dt[1]="green"; dt[2]="blue"; dt[3]="yellow";
dt[4]="pink"; dt[5]="black"; dt[6]="white"; dt[7]="#102030";
dt[8]="#504030"; dt[9]="#a0b0c0";
index=0;
function wnview(){
this.document.bgColor=dt[index];
this.document.frame1.indata.value=dt[index];
index++;
if (index>9){
index=0;
}
setTimeout("wnview();",2000);
}
function wnclose(){
this.window.close();
}
</SCRIPT>
<BODY>
<IMG src=test.jpg onClick=wnview();>
<IMG src=test.jpg onClick=wnclose();>
<FORM name="frame1">
<INPUT type="text" size="10" name="indata" value="red">
</FORM>
</BODY>
</HTML>
補足１：
背景色の切り替え用画像（start.jpg）と、処理の終了用画像（end.jpg）を 100x100 の大き さで作成し、登録後に実行してください。最初の画像をクリックすると背景色が切り替わり、2 番目の画像をクリックするとウインドが閉じられます。
補足２：
別ウインドで背景色の切り替えを行う場合は、以下の構文を使用します。
wnd=window.open(); /*ウインドを表示します */
wnd.document.bgColor=dt[index]; /*ウインドの背景色を切り替えます*/
wnd.window.close(); /*上記ウインドを閉じます */
3.2.5 関数定義
HTML プログラムに JavaScript で関数を定義する場合は、<head>と</Head>の間に定義します。
JavaScript プログラムの関数は、引数の受け渡しや値の返却が出来ます。
javakansu.htm
<HTML>
<HEAD>
<script language="JavaScript">
function goukei(a,b){
s=a+b;
return s;
}
</script>
</HEAD>
<BODY>
<script language="JavaScript">
document.write("合計＝",goukei(1,2));
</script>
</BODY>
</HTML>
補足：
結果として、”合計＝３”が表示されます。
3.2.6 演算子は、C 言語や PHP 言語と基本的に同じです。
演算子 種類 注意点
インクリメント/ディ クリメント演算
＋＋、ーー 変数の前に宣言した場合は、演算前にインク
リメント/ディクリメントが行われ、後ろに 定義された場合は、後で行われます。
算術演算 ＋，－，＊，／，％ ％は余りが結果となります。
文字連結 ＋ "Java"+"Script" ⇒ "JavaScript" と な り ま す。
比較演算（関係演算） ＜、＜＝、＝＝、＞、
！＝、＞＝
等号を”＝”とした場合は意味が違ってきま す。また、”！＝”は等しくない場合を意味 します。
ビット演算 ＜＜、＞＞、＞＞＞、
＆、＾、｜、～
＜＜は左算術シフト、＞＞は右算術シフト、
＞＞＞は右論理シフト、＆は AND、｜は OR、
＾は排他的 OR、｜はビット OR、～は否定
論理演算 ！、＆＆、｜｜ ！は否定、＆＆は AND、｜｜は OR
条件演算 ？： xxx=(a>b)?a:b;
xxx に a と b の大きい方の値が入ります。
代入演算 ＝、＋＝、＊＝、 "a+=1"は、"a=a+1"と同じです。
補足１：
＋＋やーー演算子を使用した場合、その演算子の指定場所により結果は異なります。
javaincrement.htm
<HTML>
<HEAD>
<script language="JavaScript">
counter=0;
in1=counter++;
in2=counter;
document.write("counter++の検証","<BR>");
document.write(in1,"<BR>");
document.write(in2,"<BR>","<HR>");
counter=0;
in1=++counter;
in2=counter;
document.write("++counter の検証","<BR>");
document.write(in1,"<BR>");
document.write(in2,"<BR>");
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
補足２：
等しいか否かをチェックする演算子を誤ると予想外の結果となります。（等しいか否かをチェックする演
算子は、"＝＝"です）
javaequal.htm
<HTML>
<HEAD>
<script language="JavaScript">
a=10;
document.write("<BR>変数 a の値は⇒",a);
if (a = 100){
document.write("<BR>変数 a の値は⇒",a,"⇒結果は True でした⇒",a);
}else{
document.write("<BR>変数 a の値は⇒",a,"⇒結果は False でした⇒",a);
}
a=10;
document.write("<BR><BR>変数 a の値は⇒",a);
if (a == 100){
document.write("<BR>変数 a の値は⇒",a,"⇒結果は True でした⇒",a);
}else{
document.write("<BR>変数 a の値は⇒",a,"⇒結果は False でした⇒",a);
}
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
3.2.7 基本構文は C 言語や PHP 言語を同じですが、CASE 構文などはありません
構文 基本構文 使用例
if 構文 if (条件式){
本文；
｝
else if (条件式) 本文；
else 本文；
if (a==1){
b="A";
}
else if (a==2) b="B";
else b="C"
a が１から"A"、a が２なら"B"、それ以 外であれば"Ｃ"がｂに入ります。
for 構文 for （式１；式２；式３）｛ b=0;
本文；
｝
for (a=1;a<11;a++){
b+=a;
}
ｂには５５が入ります。
while 構文 while（式）｛ 本文；
｝
a=1;
while(a=1){
b+=1;
}
永久ループします。
switch 構文 switch(変数){
case x:
本文１;
break;
case x:
本文２;
break;
default:
本文 x;
break;
}
a=1;
switch(a){
case 1:
alert("１が選択されました");
break;
case 2:
alert("2 が選択されました");
break;
}
break 構文 for 構文、或いは while 構文の中で使 用されるもので、for ループ或いは while ループから抜け出します。
while(a=1){
break;
}
何もしないで抜けます。
continue 構文 for 構文、或いは while 構文の中で使 用されるもので、continue 文以下の 処理をスキップして、次のループ処理 に入ります。
b=0;
for (a=1;a<11;a++){
continue;
b+=a;
}
b は更新されません。
with 構文 with （オブジェクト）｛
本文；
｝
with (document){
write("AAA");
}
document.write("AAA");と等価です。
function 構文 function 関数名 （引数）｛
return 式；
｝
function func1(arg0,arg1){
return arg0+arg1;
}
func1 の返却値として、２つの引く数の 合計が返ります。
コメント構文 //コメント
/* コメント */
PHP 構文に同じです。
補足：
"switch"構文において、個々の"case"構文に中に"break"構文を省略した場合に、"case"構文終了 時に、次の"case"構文のプログラムが実行されてしまいます。"break"が必要か否かは、プログラム 言語により異なりますので、周囲が必要です。
case.htm
<HTML>
<script language="JavaScript">
<!-- index=1;
switch(index){
case 1:
document.write("1⇒");
/*break;*/
case 2:
document.write("2⇒");
/*break;*/
default:
document.write("else⇒");
/*break;*/
}
document.write("終了");
//-->
</script>
<BODY>
</BODY>
</HTML>
＜練習課題＞
"case"構文が終了した時点で、"switch"構文が終了するように修正してください。