第22回 「関数(4)」
前回は関数を使ったプログラムを作成し文字に色をつけました。関数にしておけば修正が最小限の手間で済むというのも勉強しました。（前々回は下記プログラム）
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
function printMsg(msgAry)
{
n = Math.floor(Math.random() * msgAry.length);
document.write("<font color='red'>");
document.write(msgAry[n],"<br>");
document.write("</font>");
}
msg = [ "こんにちは",
"いい天気",
"みたいですね",
"おしまい",
"やっぱり再開？" ];
printMsg(msg);
// --></script>
<hr>
■今日のことわざ<br>
<script language="JavaScript"><!--
kotowaza = [ "雨降って地固まる",
"人を見たら泥棒と思え",
"ただより高いものはない" ];
printMsg(kotowaza);
// --></script>
<hr>
</body>
</html>
前回のプログラムでは表示する文字の色は常に赤色に決められていて好きな色にすることができません。そこで今回は関数を少し手直しして好きな色で文字が表示できるようにしてみます。
好きな色を指定した場合、その色の名前（またはカラーコード）を関数に渡す必要があります。関数側では渡された色の名前を使って文字を表示する、という具合になります。色の名前を渡す場合は
printMsg(msg);
となっている引き数の部分に,で区切って色の名前を書きます。例えば赤色(red)にするならば以下のようになります。
printMsg(msg,"red");
この"red"の部分を関数側で受け取るには
function printMsg(msgAry)
となっているところに
function printMsg(msgAry,col)
のように受け取る変数の名前を,で区切って書きます。このように複数のデータをやりとりする場合は,で区切って書くことでいくつでも受け取る／渡すことができます。
渡された"red"の値は変数colに入ります。つまりcolの中身は"red"になります。文字の色を指定している部分に、この変数colの値を反映させれば指定された色で文字が表示できます。これは
document.write("<font color='red'>");
となっている部分に+記号を使って
document.write("<font color='"+col+"'>");
のように書きます。fontタグのcolor属性の指定値を変数colの値にします。実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
function printMsg(msgAry, col)
{
n = Math.floor(Math.random() * msgAry.length);
document.write("<font color='"+col+"'>");
document.write(msgAry[n],"<br>");
document.write("</font>");
}
msg = [ "こんにちは",
"いい天気",
"みたいですね",
"おしまい",
"やっぱり再開？" ];
printMsg(msg,"red");
// --></script>
<hr>
■今日のことわざ<br>
<script language="JavaScript"><!--
kotowaza = [ "雨降って地固まる",
"人を見たら泥棒と思え",
"ただより高いものはない" ];
printMsg(kotowaza,"blue");
// --></script>
<hr>
</body>
</html>
これで挨拶文は赤色で、ことわざは青色で表示されます。
ところで、もし色名（カラーコード）を渡すのを忘れてしまった、入力し忘れてしまった場合には期待通りに動作しません。次回は、この期待通り動作しない場合の処理（エラー処理）について説明します。