JavaScript プログラミング
前へ 目次へ 次へ 

　３．関数の作成

　ボタンをクリックするとテキストボックスに現在日時を表示する処理を追加する。
　現在日時を取得するには次のようにする。

dd = new Date();  //*1 日付(Date)オブジェクトを作成する。
document.rei3b.day.value = dd.toLocaleString();  //*2 現在日時を設定

*1　新しくオブジェクトを作成するには、 new キーワードを使う。作成された日付オブジェクトは変数ddに格納する。
*2　日付オブジェクト(dd)のtoLocaleStringメソッド（命令）を使って現在日時を取得する。

　最終更新日のときと同じように、フォーム（name="rei3b"）、1行テキスト（size="25", type="text", name="day"）、ボタン（type="button", value="現在日時"）を追加する。さらに、ボタンにはイベントとアクションを設定する。イベントはOnClick、アクション(スクリプト)は上に示したプログラムである。

　少し凝ったことをしようとするとプログラムも長くなってくる。このまま、長く複雑になるプログラムをアクションとして入力するには不便である。
　そこで、上に示したプログラムを例に、関数にする方法を見る。

[[ jsrei4.html ]]

<HTML>
<HEAD>
<TITLE>関数なし</TITLE>
</HEAD>
<BODY>
<FORM name="rei3">
  <INPUT size="25" type="text" name="jikan">
  <INPUT type="button" value="最終更新日" onclick="document.rei3.jikan.value=document.lastModified;">
</FORM>
<FORM name="rei3b">
  <INPUT size="25" type="text" name="day">
  <INPUT type="button" value="現在日時" onclick="dd=new Date(); document.rei3b.day.value=dd.toLocaleString();">
</FORM>
</BODY>
</HTML>

　　　　↓

<HTML>
<HEAD>
<TITLE>関数あり</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
function koshin(){    //関数
        return document.lastModified;
}
function ima(){    //関数
        dd = new Date();
        return dd.toLocaleString();
}
//-->
</SCRIPT>
<FORM name="rei3">
  <INPUT size="25" type="text" name="jikan">
  <INPUT type="button" value="最終更新日" onclick="document.rei3.jikan.value = koshin();">
</FORM>
<FORM name="rei3b">
  <INPUT size="25" type="text" name="day">
  <INPUT type="button" value="日付" onclick="document.rei3b.day.value = ima();">
</FORM>
</BODY>
</HTML>

　関数は、function 関数名(引数)｛ 〜 ｝で表す。引数がない場合は省略できる。
　返却値はキーワードreturnを使って設定する。
　関数koshiは、return document.lastModified; でdocument.lastModifiedの値を返却している。この関数の呼び出しはアクション(OnClick)で行っている。document.rei3.jikan.value = koshin(); で関数koshiの返却値がdocument.rei3.jikan.value に格納される。

例　入力データの正負を判定する。

　フォームを1つ用意し、次の入力部品を配置（下図参照）する。フォームはname="rei5"とする。
　・1行テキスト　…　size="20" type="text" name="indata"
　・1行テキスト　…　size="20" type="text" name="kekka"
　・ボタン　…　type="button" value="正負判定" イベント:OnClick

[[ jsrei5.html ]]

<HTML>
<HEAD>
<TITLE>正負判定</TITLE>
</HEAD>
<BODY><SCRIPT language="JavaScript">
<!--
function hantei(dat){    //関数
    if(dat < 0)
        return "負です。";
    else
        return "正です。";
}
//-->
</SCRIPT>
<FORM name="rei5">
  <INPUT size="20" type="text" name="indata">
  <INPUT type="button" value="正負判定" onclick="document.rei5.kekka.value = hantei(document.rei5.indata.value);">
  <INPUT size="20" type="text" name="kekka">
</FORM>
</BODY>
</HTML>

　Onlickイベントのアクションは次の通りである。
　　　　document.rei5.kekka.value = hantei(document.rei5.indata.value);
　関数hanteiを呼び出し、結果を1行テキストkekkaに設定している。
　引数document.rei5.indata.valueの値は、関数hanteiの引数(変数)datに渡される。


前へ 目次へ 次へ 
 JavaScript プログラミング Copyright © 2003 Hiroshi Masuda 

 

 

inserted by FC2 system