JavaScript 制御構造のソースを表示新しいページはコチラ

[[JAVA Script#リファレンス]]に戻る。
== コメント ==
命令文の中に記述するコメントの記載方法はC++言語と同じです。
*//
:行頭および命令文中に上記のキーワードがあった場合、その行のそれ以降の文字はコメントとして扱われます。
*/*～*/
:/*以降は次に*/のキーワードが登場するまですべてコメントとして扱われます。

サンプル
<syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 制御構造 コメント</TITLE>
<SCRIPT Language="JavaScript">
<!--
//	alert("コメント1");
/*
	alert("コメント2");
*/
-->
</SCRIPT>
</HEAD>
<BODY>
JavaScript 制御構造 コメント
</BODY>
</HTML>
</syntaxhighlight>
[[Media:JavaScript SeigyoKozo Comment.html|実行結果サンプル]]


実行結果サンプルは処理するというよりは、コメント化されていて、何もJAVAスクリプトの動作がないということを確認するだけのつまらないものです。


== 条件分岐 ==
これもC++言語に酷似しています。
=== if(条件)～else if(条件)～else～ ===
*if(条件)
:これが条件分岐の基本です。例えば
*if(i > 2) alert("条件成立");
:のようにifによる条件判定の結果、処理する内容が1命令なら、{}を利用することなく、条件成立時の処理をifの後ろに続けて書くことができます。例えば、条件判定の結果、処理する内容が2命令以上なら{}の範囲を条件成立時の処理内容として定義できます。
*if(i > 2) {alert("条件成立");alert("条件成立後処理２");
:と、こんな具合だ。実際には一行に書かずにプログラムをインデントして記述するのが通常だ。

:基本を発展させていくと、条件非成立時の処理をelseの後ろに記述できます。例えば
*if(i > 2) alert("条件成立"); else alert("条件非成立");
:とこんな具合だ。これも実際には改行を適宜挿入し、インデントして記述する。処理内容が複数あれば、{}を使うのは同様。
*if(i > 2) alert("2より大きい");else if(i < 0) alert("0より小さい"); else alert("条件非成立");
:else　ifにより最初ifの条件には当てはまらないが、else ifの条件に当てはまる場合の処理のような記述ができる。

サンプル
<syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 制御構造 if</TITLE>
<SCRIPT Language="JavaScript">
<!--
var i = 4;
//条件成立後処理が1命令の場合({}不要)
if(i > 2) alert("条件成立コメント1");

//条件成立後処理が2命令の場合({}利用)
if(i > 2){
	alert("条件成立コメント2-1");
	alert("条件成立コメント2-2");
}
i = 0
//条件非成立時処理のelseを使ったサンプル
if(i > 2){
	alert("条件成立コメント3-1");//※a.1命令でも{}で処理範囲を指定してもよい。
}
else{
	alert("条件非成立コメント3-1");
}
i = -1
//条件非成立時処理のelseを使ったサンプル
if(i > 2){
	alert("条件成立コメント4-1");
}
else if(i < 0){
	alert("条件非成立後の条件2成立時コメント4-1");
}
else{
	alert("条件非成立コメント4-1");
}

-->
</SCRIPT>
</HEAD>
<BODY>
JavaScript 制御構造 if(本文が表示されるまでに何度かダイアログが表示されます。)
</BODY>
</HTML>
</syntaxhighlight>
[[Media:JavaScript SeigyoKozo if.html|実行結果サンプル]]

実行の結果、ダイアログが表示されて、「条件成立コメント1」→「条件成立コメント2-1」→「条件成立コメント2-2」→「条件非成立コメント3-1」→「条件非成立後の条件2成立時コメント4-1」という具合に一連のダイアログ表示処理がされてからbody部の記述が始まり、本文が表示されるような動作になります。もし、訪問しただけで、こんなにダイアログが表示されるJavaScriptが動作するような、こんなサイトがあったらうざくてしょうがないっすね。


=== switch(判定変数)case 条件値:～default ===
*switch(a){ case 1: alert("a = 1 です。");break; default: alert("a = 1 以外です。");}
っていう感じで、使います。switch(判定変数)のようにして判定変数部分に条件評価される変数を固定して分岐する場合に使います。if文ばっかりで攻めるのも良いですが、判定変数を固定する分岐の場合には潔くswitchを使いましょう。意外とコードを入力する労力の低減やコードの見易さが良くなるといった効果を得られるものです。case 1:のようにするとaが1だったら、それ以降を処理するという分岐になります。違ったらもちろん次のcase *: の条件判定指示がある部分までスキップします。ただし、上記例文のようにcase 1:の処理が終わっても次の判定とかはやらないで、全部を処理し始めるので、処理を終わらせたいところではbreak; のようなswitch構造から抜け出す命令を記述しないとだめです。またif文のelse句に相当するものとしてdefault: という具合にして条件判定をしないで、すべてを受け入れる記述で、どのcaseにもあてはまらなかった場合の全てのパターンを受け入れる指定ができて、まるでif文のelse句のような働きとして、どれにもあてはまらないときの処理が記述できます。


長くなりましたが、switch文による分岐命令の説明はそんなところです。break;とかdefault:とか覚えなきゃいけないし、if文より数段ややこしくてヤダ？そう思う人もいるかもしれません。でも、これは身に着けておいたほうが良いと思いますよ。あらゆるプログラミング言語でこのswitchのような構造を取り入れようとする動きがあるくらいに普通に使われる制御構造です。


サンプル

<syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 制御構造 switch</TITLE>
<SCRIPT Language="JavaScript">
<!--
var i = 4;
//条件成立後処理が1命令のswitch文を使うほどでもない例
switch(i){
    case 4: alert("i = 4 です。");
}

//break文を使っていないswitch構文の動作
switch(i){
    case 4: alert("i = 4 です。");
    case 5: alert("i = 4 か i = 5 です。");//break文がないのでi = 4のときも処理される命令です。
}

//break文を使ったswitch構文の動作 case:5 の時の処理はi=5に限定される。
switch(i){
    case 4: alert("i = 4 です。");
           break;
    case 5: alert("i = 5 です。");
}
//break文を使ったswitch構文の動作 case:5 の時の処理はi=5に限定される。
i = 5;
switch(i){
    case 4: alert("i = 4 です。");
            break;
    case 5: alert("i = 5 です。");
}
i = 0;
//default文を使ったswitch構文の動作 caseに当てはまらなかった時の処理
switch(i){
    case 4: alert("i = 4 です。");
            break;
    case 5: alert("i = 5 です。");
            break;
    default:
            alert("i は4,5ではありません。");
}
-->
</SCRIPT>
</HEAD>
<BODY>
JavaScript 制御構造 switch(本文が表示されるまでに何度かダイアログが表示されます。)
</BODY>
</HTML></syntaxhighlight>
[[Media:JavaScript SeigyoKozo switch.html|実行結果サンプル]]

実行結果では、制御構文どおりに動作して、ダイアログが表示されます。このサンプルなかなかウザい。次から少し面白味のあるものに変えようと思います。とりあえず、動作としては、(1.[i = 4 です。])→(2.[i = 4 です。]→[i = 4 か i = 5 です。])→(3.[i = 4 です。])→(4.[i = 5 です。])→(5.[i は4,5ではありません。])と、こういう具合で、5つのswitch構文を処理します。

== 繰り返し ==
これもC++とよく似ていますが、VBAやVBと同じように、for構文でオブジェクトの要素全体を最初から最後までひとつづつ変数に代入しながら処理を繰り返す in を 使った表現ができるというのはC++言語にはない記述方法ではないでしょうか？

=== for(初期化;条件;条件値変化量処理)～ ===
*for(var i = 0;i < 5;i++){ document.write("i = " + i +"<nowiki><br /></nowiki>"); }
:のようにfor()内に初期化;繰り返し条件;繰り返しに必要な変数変化量を記述し、繰り返し条件が成立している間、for構文に続く処理を繰り返します。if文と同じように1命令なら{}は省略できますが、2命令以上をまとめて繰り返しの処理にしたい場合は全体を{}で囲います。繰り返し処理はプログラムをする上で人間が最も楽をすることのできる処理です。何度も何度も同じような処理をするのが嫌だからコンピュータにやってもらうのです。この制御構文を学ぶことがプログラムをすることの喜びを感じれる部分だと思います。楽しいだろぉ？プログラム。

サンプル
<syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 制御構造 for(初期化;条件;条件値変化量処理)</TITLE>
</HEAD>
<BODY>
JavaScript 制御構造 for(初期化;条件;条件値変化量処理)<br />
<SCRIPT Language="JavaScript">
<!--
//5回繰り返し処理
for(var i = 0;i < 5;i++){
    document.write("i = " + i + "<br />");
}
-->
</SCRIPT>
</BODY>
</HTML>
</syntaxhighlight>
[[Media:JavaScript SeigyoKozo for1.html|実行結果サンプル]]

=== for(変数 in 配列要素オブジェクト)～ ===
*for(i in window){ document.write("要素:" + i + " = 値:" + window[i] + <nowiki>"<br /></nowiki>"); }
:という具合にfor(変数 in オブジェクト)の形式のfor文を記述することで、オブジェクトの要素全体をひとつづつ変数に代入しながら要素が最後になるまで繰り返すという素晴らしい命令です。なんだかわからないオブジェクトも、このような命令で列挙することで、オブジェクトが現状どういった要素や値を保持しているのかがまるわかりになるという意味でも開発者にとっては勉強にもなる命令です。


サンプル

<syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript for(変数 in 配列要素オブジェクト)</TITLE>
</HEAD>
<BODY>
JavaScript for(変数 in 配列要素オブジェクト)<br />
<SCRIPT Language="JavaScript">
<!--
var i = 0;
var n = 0;
//documentオブジェクトの要素および値の全列挙処理
document.write("■documentオブジェクト<br />");
for(i in document){
    n++;
    document.write(n + "要素:" + i + " = 値:" + document[i] + "<br />");
}
//windowオブジェクトの要素および値の全列挙処理
n = 0;
document.write("■windowオブジェクト<br />");
for(i in window){
    n++;
    if(i == "external"){
        document.write(n + "要素:" + i + "<br />");
    }
    else{
        document.write(n + "要素:" + i + " = 値:" + window[i] + "<br />");
    }
}
-->
</SCRIPT>
</BODY>
</HTML>
</syntaxhighlight>
[[Media:JavaScript SeigyoKozo for2.html|実行結果サンプル]]


実行結果は、一瞬、訳が分からない要素がびっしりでてきますが、これから勉強していけば、オブジェクトの全ての要素の意味を知っていくことになるということです。window.externalの内容window[external]を表示しようとするIEでは、途中でスクリプトが止まってしまうので、少しプログラムを小細工しました。window.externalって何？って思いますが、今は気にしない！こんだけも覚えることがあると思うとゾクゾクしませんか？しかも、中にはさらにオブジェクトの中にオブジェクトがぶら下がっていて、まだまだ展開できる要素もありそうだということです。まずは基本的なオブジェクトとなるwindowとdocumentについて列挙してみました。おそろしい数の要素が出てきました。まだ勉強を始めたばかりの人は、まだ、その要素が何を意味するのかとか気にしなくていいと思います。気になる人はググるとどこかで説明してくれているSiteにたどり着けるはずです。こうやって理解をすすめていく地道さからすべての道は開けるのです。教えてくれているSiteが見つかればの話ですが。もし教えてくれている人がいないとしたら図書館にいったり、ブラウザやJavaScriptを開発している米国のSiteで英訳しながら読み進めたりしながら理解していくことも要求されます。頑張ろう！頑張ろう！ちなみにブラウザによってオブジェクトにぶら下がっている要素の数は違います。いろんなブラウザからアクセスしてみると、ブラウザごとにJavaScriptで参照できる要素が異なるということを理解できるし、理解が深まるかもしれません。


ちなみに自分は、気になることを探してはググる派です。わからないことはわからないまま。勘でプログラミング！こいつ…。

=== 初期化 while(条件)～条件値変化量処理～ ===
*var i = 0;var Money = 0; while(i < 31){ Money = Money + 1500; i++; }
:といった具合に31日まで毎日1500円もらったらいくら貯まる？といった感じの問題の場合、変数iが31になるまで繰り返すという処理をする場合に思いつく構文です。？になるまで繰り返すぞ！という発想である場合に使うと都合がよいです。もちろん、ほかの繰り返し制御構造文を使っても同じように組めるようになっていますので、while制御構造に拘(こだわ)る必要はありません。この構文で絶対に忘れてはいけないのは、判定するべき条件の値が変化する処理を繰り返し処理内で必ず記述する必要があるということです。忘れると無限ループの元になります。繰り返し処理というのはコンピュータにがっつり仕事を任せることができる処理ですが、終わりを教えなければ、ものすごいスピードで仕事をやり過ぎて、コンピュータのリソースをフルに使うという恐ろしい事態を招きます。無限に仕事をする無限ループはコンピュータは平気でこなします。人間なら無限に仕事を任せられたら、途中で勝手に嫌になるものですが、コンピュータは放っておくといつまでも仕事をします。とにかくコンピュータって凄いんです。それが魅力だよね。


サンプル

<syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 初期化 while(条件)～条件値変化量処理～</TITLE>
</HEAD>
<BODY>
JavaScript 初期化 while(条件)～条件値変化量処理～<br />
<SCRIPT Language="JavaScript">
<!--
var i = 0;
var Money = 0;
while(i < 31){
    Money = Money + 1500;
    document.write(i + "日目:" + Money + "円<br />");
    i++;
}
-->
</SCRIPT>
</BODY>
</HTML>
</syntaxhighlight>
[[Media:JavaScript SeigyoKozo while.html|実行結果サンプル]]


実行結果を見ると31日経過すると、なかなかいい金額まで貯まることがわかります。一日1500円使えるって贅沢三昧って感じですね。だから一日1500円節約するだけでも、相当偉いと思います。お金は大事だね～♪。スロットとかで1000円札をサンドに入れている暇あったら、プログラムでも組んで、そのありがたさを知ったり、プログラムの知識を身に着けて未来の創造力や自分自身の人生を変えるほどの力や企業に貢献できる力に変換して賃金やお金に変えたほうがマシですかね。昔はどっぷりやってたし、今でもスロットで遊んだりすることもある管理人に言われたくないですね♪

=== 初期化 do～条件値変化量処理～while(条件); ===
*var i = -1; do{ document.write("i = " + i + "<nowiki><br /></nowiki>"); i--;}while(i >= 0);
:do whileはあまり実用性のない繰り返し構文ですが、まれに、なにがあっても一度は処理したい内容を繰り返し処理に含むときに使われるものです。上記の例では、出力処理を必ず一回は処理したいという意味で使っています。変数iの値は-1なので、後ろに記述している条件判定は偽で非成立ですので、通常のwhileなら何もせずに繰り返し処理部がスキップされますが、どんな値が変数iが設定されていたとしても出力はしたいといった場合に使います。例えばDBに繰り返し記録する処理やそういった場合にも使えます。繰り返しを制御する変数によっては繰り返し処理の重要な処理が飛ばされて困る場合がまれにあったり、よくよくみてみれば、繰り返し処理をする前に繰り返しと同じ処理を書いている冗長(無駄)なプログラムになっているときがあります。そんなときに使うものです。あまり使いどころがないのは確かですが、こういうのもあるってのは覚えていたほうが良いですね。結構複雑な繰り返し処理の前に同じ処理を無駄に記述したりするパターンもありえます。そうならないためにも覚えておくものです。


サンプル

<syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript 初期化 do～条件値変化量処理～while(条件);</TITLE>
</HEAD>
<BODY>
JavaScript 初期化 do～条件値変化量処理～while(条件);<br />
<SCRIPT Language="JavaScript">
<!--
document.write("■初期値-1日<br />");
var i = -1;
var Money = 0;
do{
    document.write("残り" + i + "日:" + Money + "円<br />");
    Money = Money + 1500;
    i--;
}while(i >= 0);

document.write("■初期値10日<br />");
var i = 10;
var Money = 0;
do{
    document.write("残り" + i + "日:" + Money + "円<br />");
    Money = Money + 1500;
    i--;
}while(i >= 0);
-->
</SCRIPT>
</BODY>
</HTML>
</syntaxhighlight>
[[Media:JavaScript SeigyoKozo dowhile.html|実行結果サンプル]]


サンプルの実行結果はそれなりですが、あまりうまい使い方とはいえませんね。何があっても一度は処理しないとまずいっていう状況の良い例が思いつかず不甲斐ないです。

== ループ制御 ==
JAVAは、強制オブジェクト指向プログラムの形をとっていますが、JAVA Scriptはそんなことはありません。互換性も完全ではありません。ブラウザが変われば動きは変わります。また、このようなループ制御文を使えばスパゲッティプログラムと呼ばれる構造を生み出すこともできる代物です。こういった制御構文は使わないほうがいいとされながらも準備されているのが常なのかもしれません。ただし、以下の構文も普通に使う分には問題ないと思うのですが、オプションとして用意されているジャンプ先ラベル付与ができるという点が気になります。

=== continue ===
for構文などの繰り返し処理でcontinue;キーワードが記述されていると、繰り返し処理がまだ記述以降にあったとしても、for文の先頭に戻ります。強制頭出しみたいな感じです。さらに、continue (任意のラベル文字列);のような記述をすると(ラベル):のように記述があるところに次の命令処理場所が移動します。ラベルの記述は具体的には以下のようになります。

:var n = 0;
:'''head''':
:document.write("処理やり直し");
:for(var i = 0;i < 10;i++){
::if(i > 5){
:::n++;
:::if(n < 2) continue '''head''';
::}
:}

=== break ===

== 変数 ==
=== var 生成 ===

=== const 定数 ===

=== オブジェクト 生成 ===

=== delete 消滅 ===

=== this ===

=== with 省略表記 ===

== 関数 ==
=== function 関数 ===


[[JAVA Script#リファレンス]]に戻る。