JavaScript 制御構造 新しいページはコチラ
提供: yonewiki
(→関数) |
(→function 関数) |
||
| 49行: | 49行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| 91行: | 91行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
| − | </ | + | </syntaxhighlight2> |
[[Media:JavaScript SeigyoKozo if.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo if.html|実行結果サンプル]] | ||
実行の結果、ダイアログが表示されて、「条件成立コメント1」→「条件成立コメント2-1」→「条件成立コメント2-2」→「条件非成立コメント3-1」→「条件非成立後の条件2成立時コメント4-1」という具合に一連のダイアログ表示処理がされてからbody部の記述が始まり、本文が表示されるような動作になります。もし、訪問しただけで、こんなにダイアログが表示されるJavaScriptが動作するような、こんなサイトがあったらうざくてしょうがないっすね。 | 実行の結果、ダイアログが表示されて、「条件成立コメント1」→「条件成立コメント2-1」→「条件成立コメント2-2」→「条件非成立コメント3-1」→「条件非成立後の条件2成立時コメント4-1」という具合に一連のダイアログ表示処理がされてからbody部の記述が始まり、本文が表示されるような動作になります。もし、訪問しただけで、こんなにダイアログが表示されるJavaScriptが動作するような、こんなサイトがあったらうざくてしょうがないっすね。 | ||
| − | |||
=== switch(判定変数)case 条件値:～default === | === switch(判定変数)case 条件値:～default === | ||
| 107行: | 106行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| 154行: | 153行: | ||
JavaScript 制御構造 switch(本文が表示されるまでに何度かダイアログが表示されます。) | JavaScript 制御構造 switch(本文が表示されるまでに何度かダイアログが表示されます。) | ||
</BODY> | </BODY> | ||
| − | </HTML></ | + | </HTML></syntaxhighlight2> |
[[Media:JavaScript SeigyoKozo switch.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo switch.html|実行結果サンプル]] | ||
| 167行: | 166行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| 184行: | 183行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
| − | </ | + | </syntaxhighlight2> |
[[Media:JavaScript SeigyoKozo for1.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo for1.html|実行結果サンプル]] | ||
| 194行: | 193行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| 227行: | 226行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
| − | </ | + | </syntaxhighlight2> |
[[Media:JavaScript SeigyoKozo for2.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo for2.html|実行結果サンプル]] | ||
| 243行: | 242行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| 263行: | 262行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
| − | </ | + | </syntaxhighlight2> |
[[Media:JavaScript SeigyoKozo while.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo while.html|実行結果サンプル]] | ||
| 276行: | 275行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| 306行: | 305行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
| − | </ | + | </syntaxhighlight2> |
[[Media:JavaScript SeigyoKozo dowhile.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo dowhile.html|実行結果サンプル]] | ||
| 334行: | 333行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| 390行: | 389行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
| − | </ | + | </syntaxhighlight2> |
[[Media:JavaScript SeigyoKozo continue.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo continue.html|実行結果サンプル]] | ||
| 398行: | 397行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| 434行: | 433行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
| − | </ | + | </syntaxhighlight2> |
[[Media:JavaScript SeigyoKozo break.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo break.html|実行結果サンプル]] | ||
| 469行: | 468行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| 498行: | 497行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
| − | </ | + | </syntaxhighlight2> |
[[Media:JavaScript SeigyoKozo var.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo var.html|実行結果サンプル]] | ||
| 509行: | 508行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| 535行: | 534行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
| − | </ | + | </syntaxhighlight2> |
[[Media:JavaScript SeigyoKozo const.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo const.html|実行結果サンプル]] | ||
| 549行: | 548行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| 575行: | 574行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
| − | </ | + | </syntaxhighlight2> |
[[Media:JavaScript SeigyoKozo object.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo object.html|実行結果サンプル]] | ||
| 607行: | 606行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| 642行: | 641行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
| − | </ | + | </syntaxhighlight2> |
[[Media:JavaScript SeigyoKozo delete.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo delete.html|実行結果サンプル]] | ||
| 657行: | 656行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| 695行: | 694行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
| − | </ | + | </syntaxhighlight2> |
[[Media:JavaScript SeigyoKozo this.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo this.html|実行結果サンプル]] | ||
| 721行: | 720行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| 772行: | 771行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
| − | </ | + | </syntaxhighlight2> |
[[Media:JavaScript SeigyoKozo with.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo with.html|実行結果サンプル]] | ||
| 802行: | 801行: | ||
サンプル | サンプル | ||
| − | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
| + | <HTML> | ||
| + | <HEAD> | ||
| + | <TITLE>JavaScript function</TITLE> | ||
| + | </HEAD> | ||
| + | <BODY> | ||
| + | JavaScript function<br /> | ||
| + | <SCRIPT Language="JavaScript"> | ||
| + | <!-- | ||
| + | var Num =10000; | ||
| + | function funcName1(){ | ||
| + | with(document){ | ||
| + | write("■直接呼出し用関数funcName1 window.Num 値表示処理<br />"); | ||
| + | write("window.Num = " + window.Num + "<br />"); | ||
| + | } | ||
| + | } | ||
| + | function objNewCreate(){ | ||
| + | with(document){ | ||
| + | write("■自作関数obNewCreate this.Num 初期値<br />"); | ||
| + | write("this.Num = " + this.Num + "<br />"); | ||
| + | } | ||
| + | this.Num = 5000; | ||
| + | with(document){ | ||
| + | write("■自作関数obNewCreate this.Num = 5000 代入後<br />"); | ||
| + | write("this.Num = " + this.Num + "<br />"); | ||
| + | } | ||
| + | } | ||
| − | </ | + | function funcName2(nValue1, nValue2, nValue3){ |
| + | with(document){ | ||
| + | write("■引数あり関数funcName2 引数値表示処理<br />"); | ||
| + | write("nValue1 = " + nValue1 + ", nValue2 = " + nValue2 + ", nValue3 = " + nValue3 + "<br />"); | ||
| + | write("引数の総数funcName2.arity = " + funcName2.arity + "<br />"); | ||
| + | write("引数の総数funcName2.arguments.length = " + funcName2.arguments.length + "<br />"); | ||
| + | for(var n in funcName2.arguments){ | ||
| + | write("引数の総数funcName2.arguments[" + n + "] = " + funcName2.arguments[n] + "<br />"); | ||
| + | } | ||
| + | } | ||
| + | return nValue1 * nValue2 * nValue3; | ||
| + | } | ||
| + | function objFuncName1(nValue1,nValue2,nValue3){ | ||
| + | this.arg3 = nValue3; | ||
| + | objFuncName3.apply(this, arguments); | ||
| + | with(document){ | ||
| + | write("■objFuncName1呼び出し<br />"); | ||
| + | write("objFuncName1.constructor = " + objFuncName1.constructor + "<br />"); | ||
| + | write("objFuncName1.caller = " + objFuncName1.caller + "<br />"); | ||
| + | } | ||
| + | } | ||
| + | function objFuncName2(nValue1,nValue2,nValue3){ | ||
| + | this.arg3 = nValue3; | ||
| + | objFuncName3.call(this, nValue1, nValue2); | ||
| + | with(document){ | ||
| + | write("■objFuncName2呼び出し<br />"); | ||
| + | write("objFuncName2.constructor = " + objFuncName2.constructor + "<br />"); | ||
| + | write("objFuncName2.caller = " + objFuncName2.caller + "<br />"); | ||
| + | } | ||
| + | } | ||
| + | function objFuncName3(nValue1,nValue2){ | ||
| + | this.arg1 = nValue1; | ||
| + | this.arg2 = nValue2; | ||
| + | with(document){ | ||
| + | write("■objFuncName3呼び出し<br />"); | ||
| + | write("objFuncName3.constructor = " + objFuncName3.constructor + "<br />"); | ||
| + | write("objFuncName3.caller = " + objFuncName3.caller + "<br />"); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | with(document){ | ||
| + | write("<br />"); | ||
| + | write("◎Create1オブジェクト生成 new<br />"); | ||
| + | } | ||
| + | |||
| + | objNewCreate1 = new objNewCreate(); | ||
| + | |||
| + | with(document){ | ||
| + | |||
| + | write("<br />"); | ||
| + | write("■オブジェクトにぶら下げた変数プロパティの出力<br />"); | ||
| + | write("objNewCreate1.Num = " + objNewCreate1.Num + "<br />"); | ||
| + | |||
| + | write("<br />"); | ||
| + | write("■トップレベルからの関数呼び出し オブジェクト生成無し。<br />"); | ||
| + | write("Num = " + Num + "<br />"); | ||
| + | } | ||
| + | |||
| + | objDirectCreate1 = new function(){ | ||
| + | this.Num = 1048; | ||
| + | this.Num2Power10 = 1024; | ||
| + | with(document){ | ||
| + | write("■同時生成関数定義呼び出し<br />"); | ||
| + | write("this.Num = " + this.Num + ", this.Num2Power10 = " + this.Num2Power10 + "<br />"); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | with(document){ | ||
| + | write("<br />"); | ||
| + | write("■同時生成関数定義呼び出し時生成オブジェクト<br />"); | ||
| + | write("objDirectCreate1.Num = " + objDirectCreate1.Num + "<br />"); | ||
| + | write("objDirectCreate1.Num2Power10 = " + objDirectCreate1.Num2Power10 + "<br />"); | ||
| + | } | ||
| + | |||
| + | |||
| + | var nValue1 = funcName2(1024, 65535, 1024); | ||
| + | with(document){ | ||
| + | write("<br />"); | ||
| + | write("■引数付き関数呼び出し結果<br />"); | ||
| + | write("nValue1 = " + nValue1 + "<br />"); | ||
| + | } | ||
| + | |||
| + | with(document){ | ||
| + | write("<br />"); | ||
| + | write("■apply結果<br />"); | ||
| + | } | ||
| + | var objFunc1 = new objFuncName1(1024, 65535, 1024); | ||
| + | with(document){ | ||
| + | write("<br />"); | ||
| + | write("■生成したオブジェクトのプロパティ値表示<br />"); | ||
| + | write("objFunc1.arg1 = " + objFunc1.arg1 + ", objFunc1.arg2 = " + objFunc1.arg2 + ", objFunc1.arg3 = " + objFunc1.arg3 + "<br />"); | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | with(document){ | ||
| + | write("<br />"); | ||
| + | write("■call結果<br />"); | ||
| + | } | ||
| + | var objFunc2 = new objFuncName2(1024, 65535, 1024); | ||
| + | with(document){ | ||
| + | write("<br />"); | ||
| + | write("■生成したオブジェクトのプロパティ値表示<br />"); | ||
| + | write("objFunc2.arg1 = " + objFunc2.arg1 + ", objFunc2.arg2 = " + objFunc2.arg2 + ", objFunc2.arg3 = " + objFunc2.arg3 + "<br />"); | ||
| + | } | ||
| + | --> | ||
| + | </SCRIPT> | ||
| + | </BODY> | ||
| + | </HTML> | ||
| + | </syntaxhighlight2> | ||
[[Media:JavaScript SeigyoKozo function.html|実行結果サンプル]] | [[Media:JavaScript SeigyoKozo function.html|実行結果サンプル]] | ||
| + | |||
| + | 非常に長いサンプルになってしまいましたが、ひとつづつ処理の内容を追っていくと、関数が呼び出されたり、オブジェクトが生成されたときに関数が実行されたりすることがわかると思います。このように、処理順番が関数によって、関数内にジャンプするということがわかります。プログラム的には、関数を何度も繰り返し使うことで効率化されていることになりますが、一回しか使わない関数は、ただただ、処理順序があっちにいったりするだけで、人間にはややこしく感じるものですが、将来、関数かした部分がそのまま使えるということもありえますので、一度しか使わない関数でも、単純な機能でも繰り返し使えるかもしれない構造というのを見据えて関数化するというのが、有望なプログラマになっていく人の頭脳です。将来、いかに楽をするかを考えるのです。今は面倒でも、将来は効率アップ！という気概がないと発展していきません。 | ||
| + | |||
| + | |||
| + | 処理順序があっちいったりこっちいったりとなる関数ですが、以前に紹介したbreak、やcontinueでラベルを利用して特殊な処理順序にするよりはよっぽどマシです。関数の記述して居場所を人間が探さないといけないですが、関数が一定の機能を提供しているとしたら、プログラムとしては問題ないと思います。関数化やオブジェクトとしての関数化をよく考えて関数だらけのプログラムにするのは、意外とプログラムスキルがあがっていく要因になります。最初はコーディング量がおおくなる傾向になりますが、再利用可能な関数というのは財産になります。もし、再利用しないとしても、将来、再利用可能な関数を作るという癖そのものは、プログラマとしての知的な財産になると言えます。 | ||
| + | |||
| + | |||
| + | 自分磨きのためにも関数化を常に心がけましょう。C++言語やJAVAでいうところのクラス化という、さらに高度な再利用可能な部品の作成技法を身に着ける礎になるのです。大事だよ。え、このサンプルの説明？それは、違う記事で細かく説明します。今は関数による処理の流れだけ理解しておけば制御構造としての関数を理解したことになるので、それで大丈夫です。処理順序さえわかれば、あとはググったりすることで細かい機能は調べられます。だから理解できたも同然です。 | ||
[[JAVA Script#リファレンス]]に戻る。 | [[JAVA Script#リファレンス]]に戻る。 | ||
