関数の定義と呼び出し

広告

では関数の定義の仕方から確認していきます。基本的な書式は次の通りです。 

function 関数名(引数1, 引数2, ...){
  実行される処理1;
  実行される処理2;
}

関数は「function」の後に関数名を指定します。関数名として付けることができる名前は変数の場合と同じく識別子を使って指定します。(詳しくは「変数名のつけ方(識別子)」を参照して下さい)。

変数名の後ろの「(」から「)」の中に引数を指定します。複数の引数がある場合にはカンマ(,)で区切って記述して下さい。引数が無い場合には省略可能です。

関数が呼び出された時に実行される処理を「{」から「}」のブロック内に記述します。

では引数が無い関数の例を記述してみます。 

function dispCopyright(){
  document.write("<p>Copyright (C) 2009 xxx        MySQL/PostgreSQLなどデータベースの学習なら-
Javaの学習-
ApacheとWordPressの解説-
PHPの学習-
officeの学習-
ajaxの学習-
rubyの学習-
webwordの学習-
perlの学習-
C言語の学習-
pythonの学習-. All Rights Reserved.  </p>");
}

この関数は呼び出されると常に同じ文字列を画面に表示します。

次に引数が1つある関数の例を記述してみます。 

function dispMsg(str){
  document.write("<p>" + str + "</p>");
}

この関数は呼び出されると引数と渡されてきた値を画面に表示します。

関数の呼び出し

定義された関数はスクリプト内から呼び出すことができます。関数を呼び出すには次の書式を使います。 

関数名(引数1, 引数2, ...);

関数を呼び出す時には関数名の後の「(」と「)」の間に引数を指定して呼び出します。引数が1つも無い場合でも「(」と「)」は省略できません。

また関数を呼び出すと値を返してくる場合があります。例えば計算を行うような関数を定義した場合、戻り値として計算結果などを返してきます。その場合は次のように記述することで関数から返された値を変数に対して代入出来ます。(戻り値についても次のページ以降で確認します)。 

変数 = 関数名(引数1, 引数2, ...);

では引数が無い関数の例を記述してみます。 

function dispCopyright(){
  document.write("<p>Copyright (C) 2009 xxx        MySQL/PostgreSQLなどデータベースの学習なら-
Javaの学習-
ApacheとWordPressの解説-
PHPの学習-
officeの学習-
ajaxの学習-
rubyの学習-
webwordの学習-
perlの学習-
C言語の学習-
pythonの学習-. All Rights Reserved.  </p>");
}

dispCopyright();

引数が無い関数を呼び出す場合は「関数名()」の形式で呼び出します。

次に引数が1つある関数の例を記述してみます。 

function dispMsg(str){
  document.write("<p>" + str + "</p>");
}

dispMsg("Hello");
dispMsg("bye");

引数がある関数を呼び出す場合は「関数名(引数)」の形式で呼び出します。

引数がある場合に関数がどのように処理されるのかは次のページで確認します。また戻り値がある場合の処理についても別のページで確認します。

関数がある場合のプログラムの処理の流れ

スクリプトは記述された順に上から下へ実行されていきますが、関数内に記述された処理は関数が呼び出されるまで実行されません。そして関数呼び出しが行われるといったん関数内の処理を実行した後で、関数呼び出しの次の行へ再度処理が移ります。

次の例を見てください。 

function dispMsg(str){
  document.write("<p>");
  document.write(str);
  document.write("</p>");
}

dispMsg("Hello");
document.write("<p>Good morning</p>");
dispMsg("bye");

スクリプトの先頭に関数が定義されていますが関数内の処理は関数が呼び出されるまでは実行されません。そこで次のように実行が行われます。 

1. dispMsg("Hello");
2. document.write("<p>Good morning</p>");
3. dispMsg("bye");

(1)と(3)では関数を呼び出しています。関数が呼び出されるといったん処理の流れは関数内に移ります。そして関数のブロック内に記述された処理が上から順に実行されていきます。よって先ほどのスクリプトは実際には次のように処理が行われていきます。 

1. document.write("<p>");
2. document.write("Hello");
3. document.write("</p>");

4. document.write("<p>Good morning</p>");

5. document.write("<p>");
6. document.write("bye");
7. document.write("</p>");

このように関数が含まれるスクリプトでは、処理の流れが関数内に移ったり戻ったりをしながら進んでいきます。

関数の記述位置

関数は先に定義しておいてから呼び出してもいいですし、呼び出し文が先に記述された後で定義されていても構いません。 

function aaa(){
  ...
}

aaa();
bbb();

function bbb(){
  ...
}

どちらでも構いませんが、あちこちに関数が分散されているのは可読性が悪くなりますのでスクリプトの先頭か最後に関数はまとめて定義しておくことをお勧めします。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script2_1.js">
</script>

</body>
</html>

function dispMsg(str){
  document.write("<p>");
  document.write(str);
  document.write("</p>");
}

dispMsg("Hello");
document.write("<p>Good morning</p>");
dispMsg("bye");

dispCopyright();

function dispCopyright(){
  document.write("<p>Copyright (C) 2009 xxx        MySQL/PostgreSQLなどデータベースの学習なら-
Javaの学習-
ApacheとWordPressの解説-
PHPの学習-
officeの学習-
ajaxの学習-
rubyの学習-
webwordの学習-
perlの学習-
C言語の学習-
pythonの学習-. All Rights Reserved.  </p>");
}

上記を実際にブラウザ見てみると次のように表示されます。

p2-1

( Written by Tatsuo Ikura )