プログラムの制御構造
通常、プログラムは記述したとおりに、上から順に実行されます。ですが、条件判断構造やループ構造を利用することによって、プログラムの流れを制御することができます。
プログラミングをするときには「ブロック」の概念が重要になります。ブロックは、変数やプロパティ、処理などの有効範囲を明確にします。もっとも一般的なブロックは、イベントハンドラです。ブロックは宣言部と実行部の2つで構成されますが、宣言部は省略可能です。
function disp1(){ //ブロックの始まり
//宣言部
var msg = "Hello!"
//実行部
document.write(msg);
} //ブロックの終わり
JavaScriptでは、{ } で囲まれた部分を命令といい、1つのブロックを構成します。ブロックを構成する処理が1文だけの場合は、{ } を記述する必要はありません。if文のように、true,elseと処理が分岐する場合は、ここのブロックを { } で明確に分ける必要があります。
ブロックを構成する処理が2文以上の場合は、必ず { } で囲まなければなりません。
条件分岐(if)
「もし～ならば、・・・を実行する」という条件つき命令は、プログラムの流れを制御するときによく利用されます。
JavaScript には条件つき命令が１つあります：
if..else
if～elseは、式を評価し、真ならif以降の命令を、偽りならelse以降の命令を実行します。なお、else以降は省略することができます。ifに続く命令が1文のときには、{ }を省略することができます。
構文
if ( 論理式 ) {
命令１
}
else {
命令２
}
変数 VAL の値が A の時だけ出力するには次のようになります。
if ( VAL == 'A' ) {
document.write("Aです");
}
条件式は複数あってもかまいません。複数の条件を並べたいときは、論理演算子の && もしくは || を使います。
# VAL が A、 もしくはB のとき、命令文を実行
if ( VAL == 'A' || VAL == 'B' ){
....
}
# VAL1が A 、VAL2が B のとき、命令文を実行
if ( VAL1 == 'A' && VAL2 == 'B' ){
....
}
else 文で例外処理をする
if 文では、条件式が TRUE のときに命令文を実行しましたが、条件式が FALSE だった場合は、else 文で例外処理を行うことができます。
if ( meg == "○" ){
document.write("不正解です");
} else {
document.write("正解です");
}
if 文で複数の条件分岐を処理する
if 文は複数の条件分岐にも使えます。if の条件式が FALSE であった場合、さらにほかの条件式をためしたいときは、else if 文を使います。どの条件式も FALSE だった場合は、else 文を使って例外処理を行うことができます。else はどの条件式も FALSE だったときのみ実行されます。
if ( meg == "○" ){
document.write("不正解です");
} else if ( msg == '×' ) {
document.write("正解です");
} else {
document.write("正解：答えは??");
}
switch
switch 文は、式の値に一致するラベルをブロック内に探して制御を移します。
if～else if より直感的に使える構文です。
switch ( 式 ) { }
式の値と一致する case で指定した値を探します。一致したcase文があった場合、そのブロックを実行します。
どのcaseにも一致しなかった場合は、default 文のブロックを実行します。この default 文は省略してもかまいません。
次の例では、X の値が 1 なら ONE を、2 か 3 なら TOW or THREE を、それ以外なら OTHER を表示します。
switch ( X ) {
case 1:
alert("ONE");
break;
case 2:
case 3:
alert("TOW or THREE");
break;
default:
alert("OTHER");
break;
}
それぞれのcase文の最後の行にある break ラベルは、現在のブロックから脱出します。
ループ命令
ループが、命令のセットです。指定された条件が満たされるまで、それがくり返して実行します。
JavaScript はforとwhileの２つのループ構造をサポートします。
それに加えて、繰り返し文から脱出するbreak文が用意されています。
for
forループは指定された条件がfalse（偽）になるまで繰り返し処理を行います。
(式1) (式2) (式3)
for (初期化式; 条件文; 増加文) {
繰り返し処理
}
for文の記述方法です。通常は<式1>に初期化、<式2>に条件式、<式3>に次のループへ進む前の評価式を記述します。<式2>には論理式しかおくことができません。forに続く命令が1文のときには、{}を省略することができます。
for文の処理は次のような順番で行われます。
for 文の流れ
- (式1)の初期値の設定を行います。これは一度のみ行われます。
- 次に(式2)の条件判断を行い、true（真）の場合はループ内の命令を実行します。false（偽）の場合はループ外へ抜けます。
- ブロック内の命令を実行します。
- (式3)にあるループ変数の増減処理を行います。
- ２に戻ります。
簡単な例をあげます。
var n = 0
for (var i = 0; i <9; i++){ n +="i" } document.write(n);
上の式だと i は 8 までインクリメントされ、最終的に n は 36になります。
次はちょっと高度なサンプルです。ここで作成したhowMany関数は、スクロールするリストの中から選択されたオプションの数を数えます。
<SCRIPT>
function howMany(selectObject) {
var numberSelected=0
for (i=0; i < selectObject.options.length; i++) {
if (selectObject.options[i].selected==true)
numberSelected++
}
return numberSelected
}
</SCRIPT>
<FORM NAME="selectForm">
<P><B>音楽ジャンルをいくつか選択してください。
選択したら下のボタンをクリックしてみましょう。</B><br>
<br>
<SELECT NAME="musicTypes" MULTIPLE>
<OPTION SELECTED> R&B
<OPTION> Jazz
<OPTION> Blues
<OPTION> New Age
<OPTION> Classical
<OPTION> Opera
</SELECT>
<P>
<INPUT TYPE="button" VALUE="いくつ選択したでしょうか?"
onClick="alert ('選択した数: ' +
howMany(document.selectForm.musicTypes))">
</FORM>
while
whileは<式>がtrue（真）の間だけ、以降のブロックを繰り返し実行します。whileに続く命令が1文のときには、{}を省略することができます。
while( 式 ){
繰り返し処理
}
次のwhile文のサンプルはnが最大3になるまでループが繰り返されます。
n = 0
x = 0
while( n < 3 ) {
n ++
x += n
}
"+="は右の式に左の式を加算してから、左の式に代入します。
1回目の処理 n = 1, x = 1
2回目の処理 n = 2, x = 3
3回目の処理 n = 3, x = 6
ループの間条件が決してfalseにならない場合、命令が永遠に実行されます。
while (true) {
alert("Hello, world")
}
こうならないように気をつけましょう。
while do
do-while 構文は条件が真の間、do-until 構文は偽の間、ブロックを実行します。判定はブロックを実行した後になるので、ブロック内の命令文は少なくとも1回は実行されます。
構文
do ブロック while 条件
do ブロック until 条件
次の例文では、while の条件が TRUE の間、doブロック内の処理を続けます。
i = 0;
do {
i++;
document.write(i);
} while ( i < 10 );
break
breakはwhile～forループ内から脱出するために使用します。JavaScriptはループ内でbreakを見つけると、ループ内の実行文を中止し、ただちにループ外の最初の実行文へ移行します。breakはwhileまたはforループ中以外では使えません。
次のbreak文には、 i が３(i == 3)に等しいとき、いったんループを終わらせ、３ *
ｘを返すbreak文が処理されます。
function testBreak(x) {
var i = 0
while (i<6){
if (i="=" 3) break i++ }
return i*x
}
continue
continueは、whileまたはforループ内で使用されます。continueはそれ以降に続くブロック内の命令をスキップし、先頭ループへ戻ります。breakと同じようにwhileまたはforループ中以外では使えません。
次のサンプルをじっくりと見てみましょう。
conticue命令は、break命令とは対照的に強制的にループの先頭に処理を移す命令です。ただしwhileループとforループでは若干の違いがあります。その違いを以下に示します。
- whileループの場合条件判断の処理に戻ります。
- forループの場合、ループ値の増減処理に戻ります。
オブジェクト操作命令
for～in
オブジェクトのすべてのプロパティとメソッド（または配列のすべての要素）を参照したい場合に使います。変数にはオブジェクトの要素の名前が一つずつ代入されて、命令が実行されます。forに続く命令が1文の時には、{ }を省略することができます。
for (変数 in オブジェクト) { 命令 }
windowオブジェクトのすべての要素の名前と内容を表示します。
for (var i in window) document.write(i + ";" + window[i] + "<BR>");
出力結果は以下のようになります。
new演算子
new演算子はオブジェクトのインスタンスを作成します。
オブジェクト名 = new オブジェクト型 ( param1 [,param2] ...[,paramN] )
オブジェクト名は新しいオブジェクトのインスタンスです。
オブジェクト型はオブジェクトの型です。オブジェクトの型を定義する関数が不可欠です。
paramはオブジェクトのプロパティの値です。これらのプロパティは、 オブジェクト型関数のために定義されるパラメーターです。
function car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
次のような記述でmycarオブジェクトを作ることができます。
mycar = new car("Eagle", "Talon TSi", 1993);
この命令は mycar を作り、そのプロパティに指定された値を割り当てます。
newを上記のように呼び出せば、いくつでもcarオブジェクトを作ることができます。例えば、
car1 = new car("Eagle", "Talon TSi", 1993, rand);
car2 = new car("Nissan", "300ZX", 1992, ken);
というようにです。
この関数はpersonオブジェクトを作成しています。
function person(name, elected, attached) {
this.name = name
this.elected = elected
this.attached = attached
}
新しいpersonオブジェクトをインスタンス化します。personオブジェクトの name,elected,attached に名前と当選回数、所属名を代入していきます。
Suge = new person("菅直人", 5, "さきがけ")
Hatoyama = new person("鳩山由紀夫", 3, "無所属")
サンプル1で作成したcarオブジェクトを次のように変更します。
function car(make, model, year,owner) {
this.make = make;
this.model = model;
this.year = year;
this.owner = owner;
//carオブジェクトにownerを追加しました
}
carオブジェクトをインスタンス化します。ここにはちょっとした面白い仕掛けがあります。person関数で割り当てたプロパティ値を、car関数のownerプロパティに渡しています。このようにプロパティをプロパティに渡すときは、ダブルクォーテーション(")はいりません。逆にダブルクォーテーションで囲ってしまうと、文字列になるので注意しましょう。
car1 = new car("Eagle", "Talon TSi", 1993, Suge);
car2 = new car("Nissan", "300ZX", 1992, hatoyama);
全体のソースは次のようになります。
<script>
function person(name, elected, attached) {
this.name = name
this.elected = elected
this.attached = attached
}
Suge = new person("菅直人", 5, "さきがけ")
Hatoyama = new person("鳩山由紀夫", 3, "無所属")
function car(make, model, year, owner) {
this.make = make;
this.model = model;
this.year = year;
this.owner = owner;
//carオブジェクトにownerを追加しました
}
car1 = new car("Eagle", "Talon TSi", 1993, Suge);
car2 = new car("Nissan", "300ZX", 1992, Hatoyama);
document.write(car1.owner.name);
document.write("<br>");
document.write(car2.owner.name);
</script>
car1 のowner名は次のように呼び出します。
car2.owner.name
car1のオーナー名と当選回数と所属、車種を呼び出すには次のように記述します。
document.write("名前："+
car1.owner.name);
document.write(" 当選回数：" + car1.owner.elected);
document.write(" 所属：" + car1.owner.attached);
document.write(" 車種：" + car1.name);
結果は下記のようになります。
this
thisはクラス内でのみ用いることができる変数です。thisはメソッドの属するクラス、またはインスタンス自信を示します。
サンプル：thisはオブジェクトのプロパティ値を呼び出すことができます。
ここでは、テキストフォームで指定されている18と99の引数と、入力された値を受け取っています。
function validate(obj, lowval, hival)
{
if ((obj.value <lowval) || (obj.value> hival)){
alert("値を超えてるよ!");
}
else{
alert(obj.value+"これがthisで呼び出した値です");
}
}
//if文でobj.valueが18と99の間の数字かどうかを調べています。
テキストフォームを作成します。引数 this でテキストフォームのすべてのプロパティと、任意の値(18,99)をvaildate関数に渡しています。
<B>18から99の間の数字を入力してください：</B> <INPUT TYPE = "text" NAME = "age" SIZE = 3 onChange="validate(this, 18, 99)">
- 18から99の間の数字を入力してください：
テキストフォームに数字を入力したらウインドウ内の適当なところをクリックしてみましょう。
---○←たとえばここをクリックしてみて
return
returnはメソッド中で用い、メソッドから戻るときに使います。値を返さないメソッドの場合、returnの式は不要です。
return 式
下記の関数は引数 x と y を乗算して返します。
unction pow(x,y){
return x * y;
}
with
オブジェクトのプロパティやメソッドを、頻繁に参照する部分で使用します。with命令は、オブジェクトの名前を記述しなくても、オブジェクトの要素にアクセスすることのできるブロックを作ります。
with(オブジェクト){
命令
}
次の式は、Mathオブジェクトのminとmaxを、オブジェクト名なしで参照しています。
<script language="JavaScript">
var
a = 5, b = 10;
with (Math) {
littler = min(a,b);
bugger = max(a,b);
document.write("a = " + a + ", b = " + b);
}
</script>
出力結果は、
というようになります。
コメント
コメントは実行されず、無視されます。JavaScriptはJavaと同じコメント形式を採用しています。
- //～行末まで：行末までがコメントになります。
- /*～*/：で終わる複数行。囲まれている部分全てがコメントになります。
- /**～*/：クラスの宣言の前で使用するコメント。クラスの解説を記述する。
以下の２つは両方ともコメント文です。
// コメント１です /* -----コメント２です コメント２の続きです-----*/
