説明
Step.2 や Step.3 のスクリプトは、一回処理をすれば、もう用済みになります。
しかし、何回もそのスクリプトを処理させたい場合が、これからのステップで度々でてきます。
再び、同じスクリプトを処理させたい場合は、スクリプトを関数化すると解決します。
今回のサンプルは Step.3 で説明した日付を表示するスクリプトです。このスクリプトを関数化して２回、日付を表示してみました。つまりページ内に２箇所日付を表示させます。
これまでのステップで、括弧()が付いた変数らしきものがありましたよね。getFullYear() とか…。
それが、『 関数 』 です。かっこよく言えば、『 メソッド 』 といいます。
括弧 () の付いていないものが『 変数 』。例えば、Step.2 で出てきた、navigator.appName の appName は、かっこよく言えば、『 プロパティ 』 といいます。
navigator は、appName の親分であり、 『 オブジェクト 』 といいます。
オブジェクトは、appName とか、getFullYear( ) のような、変数(プロパティ) や 関数(メソッド) の部品をたくさん持っています。
全部が全部、そうでは無いのですが、とりあえず、そんな呼び名です。
● 変数(プロパティ)とは
-
変数とは、数値や文字を収納する「箱」と思ってください。変数名とは、箱につけられた名前ということです。変数は 数値や文字を収納するだけで、これといった特技はありません。
document.write( myHensu );
と、箱の名前(myHensu) を指定すれば、その箱の中身(数値や文字) が、表示されたり、
myTotal = myPrice + 300;
であれば、箱名(myPrice) の中身の数値を使って計算して、その結果を 箱(myTotal) に収納するといった感じです。
● 関数(メソッド)とは
-
関数とは、プログラムが収納された「箱」と思ってください。もう、プログラムでいっぱいで これ以上は収納できない箱です。この箱を覗くと、中に詰まったプログラムが動きます。プログラムが動くだけの関数もあれば、プログラムが動いて結果を返す関数もあります。
document.write() という関数は、
document.write( myHensu );
とすれば、その指定した変数の中身をページ上に表示するといったプログラムが writeという箱の中に入っているわけです。
myD.getFullYear() という関数は、システムの日時から年を取り出してきて、その年を返してくるといったプログラムが getFullYearという箱に入っています。結果(値)を返してくる関数は、変数と同じようなイメージで考えて結構です。
document.write( myD.getFullYear() );
であれば、年が表示されます。年が myD.getFullYear() に入っているというイメージです。
ただ、入っている値を使うだけで、myD.getFullYear() = 2013 のようにセットができないという感じです。
● オブジェクトとは
-
オブジェクトとは、倉庫か工場、もしくは、「大きな箱」と思ってください。倉庫の中には いろんな 部品 を揃えています。このときの部品とは、変数や、関数です。
document.write() であれば、document がオブジェクトです。document 倉庫の中にある、 write() という部品を使うというイメージです。
document と write() の間のピリオドは、「の」と訳してください。
document.write() は、documentオブジェクトのwriteメソッド という感じです。
変数も関数も、JavaScript が用意しているものもあれば、自分で作ることもできます。当講座では JavaScript が用意しているものなのか、自分で作ったものなのかを わかりやすくするために、自分でつくった変数や関数は、頭に「my」を付けています。
● 関数の定義
このステップで、自作関数をつくってみます。
関数名を myFunc( ) という名前にして、メインはそれを呼ぶだけのスクリプトになっています。
<script type="text/javascript"><!--
myFunc( ) ;
// --></script>
↓
getFullYear() は 『年』を取得して返してくれましたが、myFunc() は、現在時刻を表示してくれるという関数を自分で作ったわけです。
関数定義は、
<script type="text/javascript"><!--
function 関数名()
{
}
// --></script>
と、function 関数名(){ ・・・・ } の括弧 { } の中に処理するスクリプトを入れ込みます。
<script type="text/javascript"><!--
function myFunc(){
-
myTbl = new Array("日","月","火","水","木","金","土");
myD = new Date();
myYear = myD.getFullYear();
myMonth = myD.getMonth() + 1;
myDate = myD.getDate();
myDay = myD.getDay();
myHours = myD.getHours();
myMinutes = myD.getMinutes();
mySeconds = myD.getSeconds();
myMess1 = myYear + "年" + myMonth + "月" + myDate + "日";
myMess2 = myTbl[myDay] + "曜日";
myMess3 = myHours + "時" + myMinutes + "分" + mySeconds + "秒";
myMess = myMess1 + " " + myMess2 + " " + myMess3;
document.write( myMess );
}
// --></script>
この function で記述したスクリプトは、あくまでも 関数定義 ですので、ここでは実行されません。
サンプルのように
myFunc(); と呼んであげて、はじめて実行されます。
<script type="text/javascript"><!--
myFunc();
// --></script>
もちろん、同じ関数名を２つ以上定義することは出来ません。
<script type="text/javascript"><!--
function myFunc(){
}
function myFunc(){
}
// --></script>
・
・
<script type="text/javascript"><!--
myFunc();
// --></script>
これでは、どっちの myFunc() を実行すれば良いかわかりませんよね。変数も同じことです。当講座の各ステップのサンプルは同じ関数名や変数名を使い回しているので、安易に１つのページに複数のステップのサンプルを貼り付ければ当然「エラー」が発生するか、動きがおかしくなりますので 自分なりに名前を変更しつつ、お使いください。。
また、関数を定義したスクリプトは、<HEAD> ~ </HEAD> タグ内に埋め込むのが一般ですが、<BODY> ~ </BODY> タグ内に書いても動きます。
その際は、関数定義の記述が「先」、呼ぶのは その「後」に記述しないと、「そんな関数ないよエラー」が出てしまいます。
値を返す関数
今回のサンプルの関数は、「日時を表示する」という機能の関数をつくりましたが、それを「日時を返す」という関数にするには、以下のようになります。
<script type="text/javascript"><!--
function myFunc(){
-
myTbl = new Array("日","月","火","水","木","金","土");
myD = new Date();
myYear = myD.getFullYear();
myMonth = myD.getMonth() + 1;
myDate = myD.getDate();
myDay = myD.getDay();
myHours = myD.getHours();
myMinutes = myD.getMinutes();
mySeconds = myD.getSeconds();
myMess1 = myYear + "年" + myMonth + "月" + myDate + "日";
myMess2 = myTbl[myDay] + "曜日";
myMess3 = myHours + "時" + myMinutes + "分" + mySeconds + "秒";
myMess = myMess1 + " " + myMess2 + " " + myMess3;
return myMess ;
}
// --></script>
ただいまの時刻は、
<script type="text/javascript"><!--
document.write( myFunc() );
// --></script>
です
から
返す に変更しただけです。
document.write( myMess
);
return myMess;
処理が終わった最後に return で 返す値を指定してあげます。
これで、自作 myFunc() 関数は、日時の文字列を返す関数へと生まれ変わりました。
返すだけで、表示する機能はなくしましたので、表示する際は、
document.write( myFunc() ); で表示します。
もちろん、
myDate = myFunc();
のように、変数にセットもできるようになりました。
余談
当講座の関数定義のサンプルは、<BODY> ~ </BODY> タグ内に記述するイメージで書いています。
当講座の、Step.1 ~ Step.99 までは 1998年 ~ 2002年に書いたものです。OSも Windows 95 ~ Windows 98 の時代であり、当時の Windows標準搭載のHTML エディタ 『FrontPage Express』が、<HEAD> ~ </HEAD> タグにスクリプトを埋め込んでも、ファイルを保存、もしくは、読み込んだ時点で、<BODY> ~ </BODY> タグの中に、お引越しさせてしまうのでした。
要するに、市販のエディタを買う金がなかったのでした〜。わはは〜。
そして、HTMLエディタは捨てて、メモ帳で修正している今日この頃です(2013年現在)。いまだ、お金がないのでした〜。ぐはは〜。