JavaScript 制御構造 新しいページはコチラ
提供: yonewiki
(→オブジェクト 生成 new) |
(→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|実行結果サンプル]] | ||
602行: | 601行: | ||
=== delete 消滅 === | === delete 消滅 === | ||
+ | *delete a; | ||
+ | :上記のような指示によってaという変数あるいはオブジェクトを消滅させることができます。参照しようとしてもエラーとなります。再びオブジェクトの生成を定義したり、変数の生成を定義した場合はエラーになりません。 | ||
+ | |||
+ | |||
+ | サンプル | ||
+ | <syntaxhighlight2 lang="javascript" line start="1"> | ||
+ | <HTML> | ||
+ | <HEAD> | ||
+ | <TITLE>JavaScript delete 消滅</TITLE> | ||
+ | </HEAD> | ||
+ | <BODY> | ||
+ | JavaScript delete 消滅<br /> | ||
+ | <SCRIPT Language="JavaScript"> | ||
+ | <!-- | ||
+ | function objNewCreate(){ | ||
+ | this.Num = 5000; | ||
+ | } | ||
+ | objNewCreate1 = new objNewCreate(); | ||
+ | |||
+ | document.write("■オブジェクトにぶら下げた変数プロパティの出力<br />"); | ||
+ | document.write("objNewCreate1.Num = " + objNewCreate1.Num + "<br />"); | ||
+ | |||
+ | delete objNewCreate1; | ||
+ | |||
+ | //document.write("■オブジェクトにぶら下げた変数プロパティの出力 デリート宣言後<br />"); | ||
+ | //document.write("objNewCreate1.Num = " + objNewCreate1.Num + "<br />"); | ||
+ | |||
+ | var n = 1; | ||
+ | |||
+ | document.write("■var nの値の出力<br />"); | ||
+ | document.write("n = " + n + "<br />"); | ||
+ | |||
+ | delete n; | ||
+ | |||
+ | document.write("■var nの値の出力 デリート宣言後<br />"); | ||
+ | document.write("n = " + n + "<br />"); | ||
+ | --> | ||
+ | </SCRIPT> | ||
+ | </BODY> | ||
+ | </HTML> | ||
+ | </syntaxhighlight2> | ||
+ | [[Media:JavaScript SeigyoKozo delete.html|実行結果サンプル]] | ||
+ | |||
+ | 上記サンプルでは、19行目20行目の出力処理をコメント化していないため20行目で発生したエラー以降の処理が停止します。 | ||
+ | |||
+ | [[Media:JavaScript SeigyoKozo delete2.html|実行結果サンプル]] | ||
+ | |||
+ | 上記サンプルでは、30行目の不正な参照からエラーで処理されない予定だったのですが、変数に対するdeleteの効力はブラウザによって違ってきているのかもしれません。こういったブラウザごとの命令の動作の違いについては、かなり専門的にいろいろなブラウザでの動作を試す必要があります。もっと専門的に動作検証一覧表を作っている人や参考書、Siteあるいは文献はあるかもしれませんが、かならずしもすべてのブラウザを網羅しているものがすぐに見つかるとは限りません。自身がサポートしようとするブラウザでの動作検証を怠らないことが重要ですし、あらゆるブラウザの動作において、こういった動作の違いがあるかもしれないことを想定した安全なプログラミングが試されます。 | ||
=== this === | === this === | ||
+ | *this | ||
+ | :このキーワードは少し前のサンプルでも使ってしまったのですが、関数をオブジェクトとして利用する際、関数内で自分自身のオブジェクトに対する操作をする場合に使うキーワードです。と、簡単に言いましたが、関数が呼び出される方法によってthisが指し示すものがことなるということを示す具体的なサンプルを紹介します。 | ||
+ | |||
+ | |||
+ | サンプル | ||
+ | <syntaxhighlight2 lang="javascript" line start="1"> | ||
+ | <HTML> | ||
+ | <HEAD> | ||
+ | <TITLE>JavaScript this</TITLE> | ||
+ | </HEAD> | ||
+ | <BODY> | ||
+ | JavaScript this<br /> | ||
+ | <SCRIPT Language="JavaScript"> | ||
+ | <!-- | ||
+ | var Num =10000; | ||
+ | function objNewCreate(){ | ||
+ | document.write("■自作関数obNewCreate this.Num 初期値<br />"); | ||
+ | document.write("this.Num = " + this.Num + "<br />"); | ||
+ | this.Num = 5000; | ||
+ | document.write("■自作関数obNewCreate this.Num = 5000 代入後<br />"); | ||
+ | document.write("this.Num = " + this.Num + "<br />"); | ||
+ | } | ||
+ | document.write("<br />"); | ||
+ | document.write("◎Create1オブジェクト生成 new<br />"); | ||
+ | objNewCreate1 = new objNewCreate(); | ||
+ | document.write("<br />"); | ||
+ | |||
+ | document.write("■オブジェクトにぶら下げた変数プロパティの出力<br />"); | ||
+ | document.write("objNewCreate1.Num = " + objNewCreate1.Num + "<br />"); | ||
+ | document.write("■objNewCreate1オブジェクトはトップレベルのwindow = this オブジェクトの下に関連付けられている。<br />"); | ||
+ | document.write("this.objNewCreate1.Num = " + this.objNewCreate1.Num + "<br />"); | ||
+ | document.write("■objNewCreate1オブジェクトはトップレベルのwindow = this オブジェクトの下に関連付けられている。<br />"); | ||
+ | document.write("window.objNewCreate1.Num = " + window.objNewCreate1.Num + "<br />"); | ||
+ | |||
+ | document.write("<br />"); | ||
+ | document.write("■トップレベルからの関数呼び出し オブジェクト生成無し。<br />"); | ||
+ | document.write("Num = " + Num + "<br />"); | ||
+ | objNewCreate(); | ||
+ | document.write("Num = " + Num + "<br />"); | ||
+ | --> | ||
+ | </SCRIPT> | ||
+ | </BODY> | ||
+ | </HTML> | ||
+ | </syntaxhighlight2> | ||
+ | [[Media:JavaScript SeigyoKozo this.html|実行結果サンプル]] | ||
+ | |||
+ | 関数内のthisはオブジェクトの生成時は新しく生成したオブジェクトがthisの中身になっています。そして、生成したobjNewCreate1.Numの値を出力していますが、実はこのトップレベルに生成したオブジェクトもトップレベルのオブジェクトの下にぶら下がっていて、thisが省略されているのです。同じ階層の中での呼び出しでは省略ができるということです。そして、this=トップレベルといいましたが、実際はwindowというオブジェクトの下に新しく定義・生成したオブジェクトがぶら下がっています。 | ||
+ | |||
+ | |||
+ | ここまでの説明、なかなか複雑です。 | ||
+ | |||
+ | |||
+ | そして、サンプルの後半では定義した関数をオブジェクトとしてではなく、直接にトップレベルから呼び出し実行させると、そのときのthisはトップレベルであるwindowオブジェクトがthisに相当する内容として関数内ではthisをwindowとして扱います。そうすると、関数の一番最初のthisでは、プログラムの最初に定義したトップレベルにあるNumを指していることになります。これには初期値として10000という値が保持されていますので、最初は10000と出力されますが、関数内で5000と書き換えているので、this.Numはもちろん関数内で5000に変わります。そして、外部で定義した10000という値も5000に変更されていることが最後の出力によって確かめることができます。 | ||
+ | |||
+ | |||
+ | このようにthisというキーワードは自分自身を指すといいましたが、オブジェクトが生成されたときに呼び出されるときと、直接呼び出されるときとで保持している内容が違うということが理解しておくポイントになります。 | ||
+ | |||
+ | |||
+ | 通常は、このようにオブジェクト生成して使う方法と、直接呼び出すことを併用するようなプログラムの記述はしません。オブジェクトを生成して使うための関数は常にオブジェクトを生成して利用するようにします。直接呼び出したりするとthisの保持内容がいれかわるし、扱いにくくなります。 | ||
+ | |||
+ | |||
+ | なんとなくややこしい部分ですがサンプルプログラムの動作結果をよく見ながらサンプルを眺めれば、どういう順序で動作し、thisの役割の変化を理解していけると思います。頑張られたし。 | ||
=== with 省略表記 === | === with 省略表記 === | ||
+ | *with(document){ ... } | ||
+ | :と上記のようにすると{ ... }で囲われた部分でdocumentというオブジェクトの階層表記を省略することができます。上記のサンプルでは何度も何度もdocumentというキーワードが登場してしまっていて煩雑になっています。このコード記述労力を低減することができる構造文です。もちろんdocument以外の階層構造の表記についても、省略可能ですので、もっと長い階層名とかだと、何度も繰り返す必要がある場合は、少し楽かもしれません。VBAという言語でも似たような省略記法が実現できますので、VBAを知っている人には理解しやすいと思います。 | ||
+ | |||
+ | |||
+ | サンプル | ||
+ | <syntaxhighlight2 lang="javascript" line start="1"> | ||
+ | <HTML> | ||
+ | <HEAD> | ||
+ | <TITLE>JavaScript this</TITLE> | ||
+ | </HEAD> | ||
+ | <BODY> | ||
+ | JavaScript this<br /> | ||
+ | <SCRIPT Language="JavaScript"> | ||
+ | <!-- | ||
+ | var Num =10000; | ||
+ | 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 />"); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | with(document){ | ||
+ | write("<br />"); | ||
+ | write("◎Create1オブジェクト生成 new<br />"); | ||
+ | } | ||
+ | |||
+ | objNewCreate1 = new objNewCreate(); | ||
+ | |||
+ | with(document){ | ||
+ | write("<br />"); | ||
+ | |||
+ | write("■オブジェクトにぶら下げた変数プロパティの出力<br />"); | ||
+ | write("objNewCreate1.Num = " + objNewCreate1.Num + "<br />"); | ||
+ | write("■objNewCreate1オブジェクトはトップレベルのwindow = this オブジェクトの下に関連付けられている。<br />"); | ||
+ | write("this.objNewCreate1.Num = " + this.objNewCreate1.Num + "<br />"); | ||
+ | write("■objNewCreate1オブジェクトはトップレベルのwindow = this オブジェクトの下に関連付けられている。<br />"); | ||
+ | write("window.objNewCreate1.Num = " + window.objNewCreate1.Num + "<br />"); | ||
+ | |||
+ | write("<br />"); | ||
+ | write("■トップレベルからの関数呼び出し オブジェクト生成無し。<br />"); | ||
+ | write("Num = " + Num + "<br />"); | ||
+ | } | ||
+ | objNewCreate(); | ||
+ | with(document){ | ||
+ | write("Num = " + Num + "<br />"); | ||
+ | } | ||
+ | --> | ||
+ | </SCRIPT> | ||
+ | </BODY> | ||
+ | </HTML> | ||
+ | </syntaxhighlight2> | ||
+ | [[Media:JavaScript SeigyoKozo with.html|実行結果サンプル]] | ||
+ | |||
+ | これは、コードの記述量が減る場合もありますが、インデントが多くなります。なにが便利なのかは各自で見極めてほしいと思います。 | ||
== 関数 == | == 関数 == | ||
+ | 既に、ここまでの説明でfunctionというキーワードを使ってプログラムの機能を持たせて、サンプルプログラムを紹介してきましたが、あらためて関数について説明します。関数は、プログラムから呼び出されるもの、オブジェクトとして扱われ、別名オブジェクトが関数の機能を引き継ぐもの、そして、ここまで紹介しなかった生成方法として、newキーワードに続けて関数を記述するという生成と定義の同時記述についても可能です。更に、関数が引数というものを受け取ることについても説明していません。引数は関数の呼び出し元が、変数やオブジェクト名を関数名に続く()の中にカンマ区切りで記述して呼び出すと、関数はその値を受け取り、関数内部のプログラムで受け取った値を活用した処理を実行することができるというものです。そして、引数に対応して戻り値というものもあり、これは実行の結果、ひとつの変数やオブジェクト名の値を呼び出し元に返却するものです。関数のほかの機能としては、引数の数の管理や引数そのもののオブジェクトがあり、引数全体をまとめたオブジェクト名が用意されていること、呼び出し元関数の特定手段。そういった機能が提供されます。 | ||
+ | |||
+ | |||
+ | ここではややこしい関数の全てについて触れますが、シンプルに関数という仕組みがあることだけ理解しておけば、別の記事で関数事態について、より詳細に説明する記事を作る予定ですので、軽く読み流して、関数の全体像をぼんやり、分かった気になってもらえればそれでいいかと思います。この記事の名前は制御構造ですので、プログラムの流れとして、関数が呼び出されたりするということがあるので、処理の流れが関数によって変化するということを理解できたらそれで十分なわけです。 | ||
+ | |||
=== function 関数 === | === function 関数 === | ||
+ | *function funcName1(){ ... } | ||
+ | *function objFunc1(){ this.xxx = ***; ... } var objName0 = new objFunc1(); | ||
+ | *var objName1 = new function(){ this.xxx = ***; ... } | ||
+ | :といったような形式で関数定義できてはオブジェクトとしての別名にして利用もできます。3つめのは定義とオブジェクト生成が同時になっていて、関数には名前が付与されていない例です。 | ||
+ | *var objName2 = {property: 50; ... } | ||
+ | :関数を使わなくてもオブジェクトだけで、上記のように関数と同じような構造をもった命令の集まりを形成することもできます。objName2.Property = 50;のような要素を持たせることもできます。これはオブジェクト初期化子と呼ばれる手法で、関数でthis.xxx = ***;のようにしてオブジェクトのプロパティを持たせたのと同じようなことができるということです。これはオブジェクトと呼ばれるものの扱い方ですので、ここは関数について説明する部分ですから、このことについては後の項目で説明する機会を作れたらと思っています。 | ||
+ | |||
+ | :関数ってのは、一連の命令のカタマリだと思っていいと思います。そして、関数には呼び出されるときに引数と呼ばれるいくつかの値を命令のカタマリの中で使うために受け取ることができます。具体的には | ||
+ | *function funcName1(nValue,objData){ var n = nValue;... } | ||
+ | :のように()の中に受け取りたい引数をカンマ区切りで記述します。そして命令のカタマリの中で引数を利用するという感じです。呼び出すときもfuncName1(nValue_call,objData_call);のようにすることで、引数を与えることができます。関数の定義をした変数と違う変数名で引数を渡しても問題ありません。カンマで区切られた順番どおりに値はわたされ、定義された変数名として関数が作動します。関数には戻り値というものも設定できて | ||
+ | *function funcName1(){ var n = nValue;...; return 1;} | ||
+ | :と上記のように関数の命令群の最後にあるようなreturnというキーワードを使って呼び出し側に戻す値を設定できます。この場合、呼び出し側では、var retuenFunc = funcName1();のように呼び出せば、returnFuncという変数の内容に値の1が返却されます。この1を変数にすることで、動作結果によって様々な値を返すことができるようになります。 | ||
+ | |||
+ | |||
+ | :ここまで文章による説明だけで早足に関数全体を説明したので、わけがわからないと感じる人もいるかもしれません。あるいは説明はいいからサンプルを見れば理解できるという人もいるかもしれませんので、はやいとこサンプルを提示したいと思います。そして、その動作結果とをてらしあわせて更に補足の説明をすることによって理解を深められたらと思います。理解は深めなくてもいいんですけど、関数は定義されて、あとでプログラム中で呼び出されるという構造をもっているということを理解できれば十分かなと思います。 | ||
+ | |||
+ | |||
+ | サンプル | ||
+ | <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|実行結果サンプル]] | ||
+ | |||
+ | 非常に長いサンプルになってしまいましたが、ひとつづつ処理の内容を追っていくと、関数が呼び出されたり、オブジェクトが生成されたときに関数が実行されたりすることがわかると思います。このように、処理順番が関数によって、関数内にジャンプするということがわかります。プログラム的には、関数を何度も繰り返し使うことで効率化されていることになりますが、一回しか使わない関数は、ただただ、処理順序があっちにいったりするだけで、人間にはややこしく感じるものですが、将来、関数かした部分がそのまま使えるということもありえますので、一度しか使わない関数でも、単純な機能でも繰り返し使えるかもしれない構造というのを見据えて関数化するというのが、有望なプログラマになっていく人の頭脳です。将来、いかに楽をするかを考えるのです。今は面倒でも、将来は効率アップ!という気概がないと発展していきません。 | ||
+ | |||
+ | |||
+ | 処理順序があっちいったりこっちいったりとなる関数ですが、以前に紹介したbreak、やcontinueでラベルを利用して特殊な処理順序にするよりはよっぽどマシです。関数の記述して居場所を人間が探さないといけないですが、関数が一定の機能を提供しているとしたら、プログラムとしては問題ないと思います。関数化やオブジェクトとしての関数化をよく考えて関数だらけのプログラムにするのは、意外とプログラムスキルがあがっていく要因になります。最初はコーディング量がおおくなる傾向になりますが、再利用可能な関数というのは財産になります。もし、再利用しないとしても、将来、再利用可能な関数を作るという癖そのものは、プログラマとしての知的な財産になると言えます。 | ||
+ | |||
+ | 自分磨きのためにも関数化を常に心がけましょう。C++言語やJAVAでいうところのクラス化という、さらに高度な再利用可能な部品の作成技法を身に着ける礎になるのです。大事だよ。え、このサンプルの説明?それは、違う記事で細かく説明します。今は関数による処理の流れだけ理解しておけば制御構造としての関数を理解したことになるので、それで大丈夫です。処理順序さえわかれば、あとはググったりすることで細かい機能は調べられます。だから理解できたも同然です。 | ||
[[JAVA Script#リファレンス]]に戻る。 | [[JAVA Script#リファレンス]]に戻る。 |