引数がある関数(function)

引数を説明する前に、これまでの関数(function)の復習です。
以下は、xyzのid名が付いているspan領域の文字色をredに変更するfunctionとその実行例です。 この関数名はsetXyzで「注目」のボタンで実行します。

IPは、インターネット層のプロトコルでず。
これで、IPアドレスの仕様や、IPパケットの送り方などが決められています。

このソースを以下に示しします。
<html lang="ja"><head>
<style type="text/css">
div.that { background-color: silver; padding: 20px;}
span.that { background-color: yellow; }
</style>
<script type="text/javascript"><!--
function setXyz(){
	var obj=document.getElementById("xyz");
	obj.style.color="red";
}
// --></script>
</head><body>
<div class="that">
<p>IPは、<span id="xyz" class="that">インターネット層</span>のプロトコルでず。<br>
これで、IPアドレスの仕様や、IPパケットの送り方などが決められています。
</p>
<input type="button" value="注目" onclick="setXyz()">
</div>
</body></html>

さて、ここで上記のsetXyzのfunctionは、xyzのid名の文字色を赤に変更する仕様でつくりましたが、 xyzのid名が付く所にしか使えません
ここで、変更対象をid名で指定して使えるfunctionにした方が、他でも使えて便利です。 そして、そう作ったsetRedの名前のfunction例を示します。

IPは、インターネット層のプロトコルでず。
これで、IPアドレスの仕様や、IPパケットの送り方などが決められています。

このソースを以下に示しします。
<html lang="ja"><head>
<style type="text/css">
div.that { background-color: silver; padding: 20px;}
span.that { background-color: yellow; }
</style>
<script type="text/javascript"><!--
function setRed(id){
	var obj=document.getElementById(id);
	obj.style.color="red";
}
// --></script>
</head><body>
<div class="that">
<p>IPは、<span id="xyz2" class="that">インターネット層</span>のプロトコルでず。<br>
これで、<span id="abc2">IPアドレスの仕様や、IPパケットの送り方</span>などが決められています。
</p>
<input type="button" value="注目" onclick="setRed('xyz2')">
<input type="button" value="注目2" onclick="setRed('abc2')">
</div>
</body></html>

上記ではそれぞれのボタンに 同じsetRed関数を使っています。 そして使う時に、変更対象の'xyz2'や'abc2'を () の中で指定して使っています。
このように、 () で指定する'xyz2'や'abc2'は 実引数と呼ばれます。



setRedを動かす時に、
実引数と
呼ばれるる与える情報で
動作する訳です。

そして、functionを作っている所のidが、 仮引数と呼ばれるローカル変数で、これに 実引数の与える情報を記憶して 関数の実行が始まります。
つまり、function を作る時、「あの情報」で実行するように作ることができ、
「あの情報」を記憶する変数が仮引数というわけでです。（上記例のid）

仮引数は、実引数の情報を記憶する変数で、 名前の付け方はローカル変数と同じです。
(仮引数や実引数をまとめて、単に引数と呼ぶこともあります。)
引数を、複数使う関数作って使うことも可能です。
例えば、あれと、これで実行させるような関数です。

以下の例のsetColorの名前の関数では、あのidの要素を、 このcolorの色へ変更しています。
ここで注意すべきは、引数の並べる順番です。関数を作る時に仮引数をコンマで区切って並べ、 それを使って関数を作りますが、使う場合も実引数を、仮引数の並べた順番に合わせてコンマで 区切って並べなければなりません。 

<html lang="ja"><head>
<style type="text/css">
div.that { background-color: silver; padding: 20px;}
span.that { background-color: yellow; }
</style>
<script type="text/javascript"><!--
function setColor(id, color){
	var obj=document.getElementById(id);
	obj.style.color=color;
}
// --></script>
</head><body>
<div class="that">
<p>IPは、<span id="xyz3" class="that">インターネット層</span>のプロトコルでず。<br>
これで、<span id="abc3">IPアドレスの仕様や、IPパケットの送り方</span>などが決められています。
</p>
<input type="button" value="注目" onclick="setColor('xyz3','red')">
<input type="button" value="注目2" onclick="setColor('abc3','blue')">
</div>
</body></html>
上記ソースを実行を以下に示しします。

IPは、インターネット層のプロトコルでず。
これで、IPアドレスの仕様や、IPパケットの送り方などが決められています。


以下で、引数が３つの例を示します。 ここでは、クリックごとに変更する２つ色を指定ができるfunctionの例です。

IPは、インターネット層のプロトコルでず。
これで、IPアドレスの仕様や、IPパケットの送り方などが決められています。

このソースを以下に示しします。
<html lang="ja"><head>
<style type="text/css">
div.that { background-color: silver; padding: 20px;}
span.that { background-color: yellow; }
</style>
<script type="text/javascript"><!--
function changeColor(id, color1, color2){
	var obj=document.getElementById(id);
	if(obj.style.color==color1){
		obj.style.color=color2;
	} else {
		obj.style.color=color1;
	}
	obj.style.fontWeight="bold";
}
// --></script>
</head><body>
<div class="that">
<p>IPは、<span id="xyz4" class="that">インターネット層</span>のプロトコルでず。<br>
これで、<span id="abc4">IPアドレスの仕様や、IPパケットの送り方</span>などが決められています。
</p>
<input type="button" value="注目" onclick="changeColor('xyz4','red','green')">
<input type="button" value="注目2" onclick="changeColor('abc4','blue','yellow')">
</div>
</body></html>

このページは、ボタンクリックなどの確認すべき操作を行わないと指示のページへのボタンが有効になりません。