目次へ戻ります
イヌでもわかるJavaScript講座

関数の作り方
スクリプトを何回も処理させる場合は、関数化するのが最適です。
難易度：★★☆☆☆☆☆☆☆☆
【実行例】

ただいまの時刻は、 です
くどいですが、ただいまの時刻は、 です
【リスト】 
<script language="JavaScript">
<!--
function myFunc(){
   myTbl     = new Array("日","月","火","水","木","金","土");
   myD       = new Date();

   myYear    = myD.getYear();
   myYear4   = (myYear < 2000) ? myYear+1900 : myYear;
   myMonth   = myD.getMonth() + 1;
   myDate    = myD.getDate();
   myDay     = myD.getDay();
   myHours   = myD.getHours();
   myMinutes = myD.getMinutes();
   mySeconds = myD.getSeconds();

   myMess1   = myYear4 + "年" + myMonth + "月" + myDate + "日";
   myMess2   = myTbl[myDay] + "曜日";
   myMess3   = myHours + "時" + myMinutes + "分" + mySeconds + "秒";
   myMess    = myMess1 + " " + myMess2 + " " + myMess3;
   document.write( myMess );
}
// -->
</script>



ただいまの時刻は、
<script language="JavaScript"><!--
myFunc();
// --></script>です<br>
くどいですが、ただいまの時刻は、
<script language="JavaScript"><!--
myFunc();
// --></script>です<br>
サンプルだけのＨＴＭＬは こちらへ
【説明】

Step２ や Step３ のスクリプトは、１度、処理をして結果を出せば、もう、用済みになります。
しかし、何回もそのスクリプトを処理させたい場合が、これからのステップで度々でてきます。

再び、同じスクリプトを処理させたい場合は、スクリプトを関数化すると解決します。

今回のサンプルは Step３ で説明した日付を表示するスクリプトです。このスクリプトを関数化して２回、日付を表示してみました。つまりページ内に２箇所日付を表示させます。

これまでのステップで、括弧 ( ) が付いた変数らしきものがありましたよね。getYear( ) とか…。
それが、『 関数 』 です。かっこよく言えば、『 メソッド 』 といいます。

括弧 ( ) の付いていない 『 変数 』、例えば、Step.2 で出てきた、navigator.appName の appName は、かっこよく言えば、『 プロパティ 』 といいます。navigator は、appName の親分であり、 『 オブジェクト 』 といいます。

全部が全部、そうでは無いのですが、とりあえず、そんな呼び名です。

このステップでは、自作関数をつくってみます。

関数名を myFunc( ) という名前にして、メインはそれを呼ぶだけのスクリプトになっています。
<script language="JavaScript"><!--
myFunc( ) ;
// --></script>

getYear( ) は、『年』を取得してくれましたが、myFunc( ) は、現在時刻を表示してくれるという関数を自分で作ったわけです。



関数定義は、
<script language="JavaScript">
<!--
function 関数名()
{
　　・
　　・
}
// -->
</script>

と、function 関数名(){ ・・・・ } の括弧 { } の中に処理するスクリプトを入れ込みます。

関数名も変数同様、半角英数字で定義します。

ここで、定義したスクリプトは、あくまでも関数定義ですので、ここでは実行されません。
サンプルのように myFunc(); と呼んであげて、はじめて実行されます。
<script language="JavaScript"><!--
myFunc( ) ;
// --></script>



もちろん、同じ関数名を２つ以上定義することは出来ません。
<SCRIPT language="JavaScript"><!--
function myFunc(){
  document.write("こんにちは");
}
function myFunc(){
  document.write("こんばんは");
}
// --></SCRIPT>
・
・
<script language="JavaScript"><!--
myFunc( ) ;
// --></script>
これでは、どっちの myFunc() を実行すれば良いかわかりませんよね。変数も同じことです。当講座の各ステップのサンプルは同じ関数名や変数名を使っていますので、安易に１つのページに複数のステップのサンプルを貼り付ければ当然「エラー」が発生しますのでご注意ください。



また、この関数を定義したスクリプトは、一般には <HEAD> タグ内に埋め込みます。

しかし、当講座は、<BODY> タグの直後に埋め込んでいます。

当講座は、Windows に標準装備されている HTML エディタ 『 FrontPage Express 』 で作られています。このエディタが、<HEAD> タグにスクリプトを埋め込んでも、ファイルを保存、もしくは、読み込んだ時点で、<BODY>タグの中に、お引越しさせてしまうのです。

要するに、市販のエディタを買う金がないのだ〜。わはは〜。
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>JavaScript </title>
</head>
<body>
<script language="JavaScript">
<!--
function myFunc(){
   myTbl     = new Array("日","月","火","水","木","金","土");
   myD       = new Date();

   myYear    = myD.getYear();
   myYear4   = (myYear < 2000) ? myYear+1900 : myYear;
   myMonth   = myD.getMonth() + 1;
   myDate    = myD.getDate();
   myDay     = myD.getDay();
   myHours   = myD.getHours();
   myMinutes = myD.getMinutes();
   mySeconds = myD.getSeconds();

   myMess1   = myYear4 + "年" + myMonth + "月" + myDate + "日";
   myMess2   = myTbl[myDay] + "曜日";
   myMess3   = myHours + "時" + myMinutes + "分" + mySeconds + "秒";
   myMess    = myMess1 + " " + myMess2 + " " + myMess3;
   document.write( myMess );
}
// -->
</script>
　・
　・
ただいまの時刻は、
<script language="JavaScript"><!--
myFunc();
// --></script>です<br>
くどいですが、ただいまの時刻は、
<script language="JavaScript"><!--
myFunc();
// --></script>です
　・
　・
</body>
</html>

目次へ戻ります