第19回 「関数(1)」


 前回は以下のようなプログラムでランダムにメッセージを表示しましたが、よく見るとプログラムに似たような部分がありました。(下記プログラム)
 
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
msg = [ "こんにちは",
"いい天気",
"みたいですね",
"おしまい",
"やっぱり再開?" ];
n = Math.floor(Math.random() * msg.length);
document.write(msg[n],"<br>");
// --></script>
<hr>
■今日のことわざ<br>
<script language="JavaScript"><!--
kotowaza = [ "雨降って地固まる",
"人を見たら泥棒と思え",
"ただより高いものはない" ];
n = Math.floor(Math.random() * kotowaza.length);
document.write(kotowaza[n],"<br>");
// --></script>
<hr>
</body>
</html>

 このプログラムで似ている部分をまとめておくと入力ミスも少なくなり変更があった時に楽になります。似ている部分は「関数」にしてまとめておくようにします。
 関数は使う前にあらかじめ定義しておかないといけません。関数を定義するには以下の書式になります。
 
function 関数名(渡す値)
{
 処理内容
}

上記の書き方以外に

function 関数名(渡す値) {
 処理内容
}

 のように{をくっつけて書く人もいますが、どちらでも構いません。また「渡す値」は省略することができます。省略した場合は以下のようになります。
 
function 関数名()
{
 処理内容
}

 渡す値は1つだけでなく,(カンマ)で区切っていくつでも記述することができます。例えば3つ値を渡す場合は以下のようになります。
 
function 関数名(渡す値,渡す値,渡す値)
{
 処理内容
}

 渡す値の事は専門用語で「引数」と呼びます。関数名は先頭が英文字ではじまり2文字目以後は英数字とアンダーバー(下線)が利用できます。
 
 それでは、簡単な関数を使ったサンプルを作ってみます。関数は指定された文字を(document.write()で)表示するものです。
 実際のプログラムは以下のようになります。
 
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
function wrt(txt)
{
document.write(txt,"<br>");
}
wrt("いろいろな");
wrt("メッセージを表示できます");
// --></script>
</body>
</html>

 関数名はwrt、引数はtxtです。関数内では渡された引数をdocument.write()で書き出しています。関数を呼び出す側では
 
wrt(渡す文字列)

として関数を呼び出します。

もし、同じ文字しか表示しないのであれば引数は不要になります。例えば"関数は便利"と固定した文字を表示するのであれば以下のようになります。

<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
function wrt()
{
document.write("関数は便利<br>");
}
wrt();
wrt();
// --></script>
</body>
</html>

 引数は文字や数字だけでなく配列やオブジェクトなど何でも渡すことができます。
 
 次回はランダムにメッセージを表示するプログラムを関数を使ったものに書き換えてみましょう。




2002-2004 Copyright KaZuhiro FuRuhata (古籏一浩)