第21回 「関数(3)」
前回は関数を使ったプログラムを作成しました。（前々回は下記プログラム）
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
function printMsg(msgAry)
{
n = Math.floor(Math.random() * msgAry.length);
document.write(msgAry[n],"<br>");
}
msg = [ "こんにちは",
"いい天気",
"みたいですね",
"おしまい",
"やっぱり再開？" ];
printMsg(msg);
// --></script>
<hr>
■今日のことわざ<br>
<script language="JavaScript"><!--
kotowaza = [ "雨降って地固まる",
"人を見たら泥棒と思え",
"ただより高いものはない" ];
printMsg(kotowaza);
// --></script>
<hr>
</body>
</html>
しかし、関数を使わないものに比べてプログラムは長くなってしまいました。関数を使わない方が短くてすむならば入力の手間も減りますし良いと思った人がいるはずです。もちろん、何がなんでも関数を使わなければならないわけではなく必要に応じて使い分ければ良いでしょう。では、関数を使わなくても良いのは、どんな場合でしょうか。だいたい以下のような場合になるでしょう。
・１度しか使わない（再利用しない）
・自分しか使わず変更もない（少ない）
逆に考えると関数化することにより
・再利用できる
・他人も使える
ということにもなります。再利用するにしても必要最小限の変更で済みます。
それでは前回のプログラムを変更して「表示するメッセージの文字を赤色にする」ようにします。
第６回で勉強したようにdocument.write()ではタグも書き出すことができるのでfontタグ*で色指定をすることにします。出力するメッセージ部分である
document.write(msgAry[n],"<br>");
の前に開始タグ
document.write("<font color='red'>");
後ろに終了タグ
document.write("</font>");
を書き出します。これで表示されるメッセージは赤色になります。実際のプログラムは以下のようになります。
<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>
関数を使えば最小限の変更ですみますが、もし関数を使っていなければ、文字を表示する部分それぞれに赤色にするための処理を入力しなければなりません。今回の場合は２箇所で済みますが、プログラムが大きく長くなってきた場合は、修正箇所を探すだけでも大変になります。
次回は、さらに関数を拡張して任意の色でメッセージを表示するようにしてみます。
*Netscape 4や古いブラウザ、W3Cに準拠していないブラウザをサポートしないのであればspanタグで<span style='color:red'>のように指定する方がよいでしょう。