梅ちゃん堂 > JavaScript 入門 > JavaScript の基礎 >
- メソッドとユーザー定義関数 -

JavaScript には、たった1行のメソッドだけで成り立つ簡単なプログラムもあれば、 何十行、何百行ものコマンドを使用した巨大プログラムまで様々あります。 しかし以下の基礎を押さえておけば、そのどちらにも対応できます。

1.メソッドとは

多くのプログラミング言語と同様、JavaScript には定義済み関数があり、これをメソッドと読んでいます。(注1) 今までに出てきた、

alert("Hello"); //ポップアップメッセージに "Hello" と表示する
document.write("Hello"); //ページ上に "Hello" と表示する
window.open('hello.html', 'Hello', 'width=200, height=200'); //hello.html を縦 200 ピクセル、横 200 ピクセルでポップアップする


などがそれです。あらかじめ機能が定義されているので、すぐに使用できますし、こうしたメソッドを取り込んで複雑なプログラムに仕上げることも出来ます。 JavaScript の関数は、メソッドであれユーザー定義関数であれ、必ず命令名の後に括弧を付け、括弧の中に引数(パラメーター)を渡します。 何も引数を渡さない関数の場合も必ず括弧を付ける決まりです。

data1.focus(); //data1 という名のオブジェクトにフォーカスを当てる

上の4例は、ただ或る処理を行うためのメソッドで関数の戻り値を返しません。 しかし関数の戻り値を返すメソッドもあります。

flag = isNaN(document.forms[0].elements[0].value);

これは、ウェブページ内の最初のフォームの最初のエレメントの値が数値なら真(true)を、数値でなければ偽(false)を返し、 変数 flag に代入するという処理です。もし document.forms[0].elements[0].value が数値だったら flag には "false" という値が入ります。

メソッドを使う上で注意しなければならないのは、メソッド名は case-sensitive だという点です。 わかりやすく言うと、大文字と小文字を決まり通りに書かなければなりません。例えば isNaN() は、ISNAN() や isnan() と書いてはいけません。

2.ユーザー定義関数

いくつかの命令から成り立つひとまとまりの処理を、ユーザー定義関数にまとめて使用することが出来ます。 ユーザー定義関数は、ページ内の <SCRIPT>〜</SCRIPT> 内もしくは外部ファイル(.js ファイル)で定義します。

function 関数名 (引数) {
  ここに処理内容を書く
}

次のサンプルは、前ページのサンプルを書き換えたもので、処理内容は全く同じです。

Sample 8
入力欄に数字を入れて下さい。

ソース

<SCRIPT type="text/javascript">
<!--
function add_data(item1, item2) {
  return eval(item1)+eval(item2);
}

function culculate(d1, d2) {
  with(document.test2) {
    if(isNaN(d1) || d1=="") {
      alert("「"+d1+"」は計算可能な数字ではありません。\n半角数字を入れて下さい。");
      data1.focus();
      data1.select();
      return;
    }
    if(isNaN(d2) || d2=="") {
      alert("「"+d2+"」は計算可能な数字ではありません。\n半角数字を入れて下さい。");
      data1.focus();
      data2.select();
      return;
    }
    data3.value=add_data(d1, d2);
  }
}
//-->
</SCRIPT>

<FORM name="test2">
<INPUT type="text" size=10 maxlength=10 style="ime-mode: disabled;" name="data1">

<INPUT type="text" size=10 maxlength=10 style="ime-mode: disabled;" name="data2">

<INPUT type="text" size=10 style="border:none;ime-mode: disabled;" name="data3"><BR>
<INPUT type="button" value="計算"onClick="culculate(data1.value, data2.value)">
</FORM>
  1. 「計算」ボタンをクリックすると culculate(d1, d2) 関数を呼び出し、引数 d1 に data1.value を、d2 に data2.value を渡します。
  2. culculate(d1, d2) 関数の側では必要な処理の後、引数 da, d2 を add_data(item1, item2) 関数に渡します。
  3. add_data(item1, item2) 関数の側では d1 が item1 に、d2 が item2 に代入され、処理結果(単純な足し算)を戻り値として返し(return)ます。
  4. 再び culculate(d1, d2) 関数に戻り、add_data(item1, item2) 関数の戻り値が data3.value に入ります。

ユーザー定義関数にも戻り値を返すものと、そうでないものがあることがわかります。 戻り値は「return 戻り値」という構文で返します。ところで culculate(d1, d2) 関数にも return が2個所使われていることに気づいたはずです。 そこには戻り値は付いていません。この場合の return は処理を終了して呼び出し元に戻るということを意味しています。 data1 や data2 の入力内容が数値でなかったり、何も入力されていない場合は計算できませんから、警告を発して入力欄にフォーカスを送り、 そこで処理をいったん終了するという意味です。

注1
ほとんどの場合、メソッドはオブジェクトの機能です。
前ページに戻る 前ページに戻る 次ページに進む
Copyright © 2003 梅ちゃん堂. All Rights Reserved