上記画像のクリックで５の画像に変わります。
ボタンのクリックで８の画像に変わります。
<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 changeImg1(id, n){
var obj=document.getElementById(id);
obj.src="img/n0"+n+".gif";
}
// --></script>
</head><body>
<div class="that">
<img id="num" src="img/n01.gif"
onclick="changeImg1('num',5)"><br>
上記画像のクリックで５の画像に変わります。<br>
ボタンのクリックで８の画像に変わります。
<input type="button" value="変更"
onclick="changeImg1('num',8)">
</div>
</body></html>
上記では id名を引数にしていますが、 タグ要素のオブジェクト(obj)を引数にする 関数にすることでも可能です。その場合の関数定義例と呼び出し方を下記に示します。 （上記と全く同じ動作をします。）
<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 changeImg1(obj, n){
obj.src="img/n0"+n+".gif";
}
// --></script>
</head><body>
<div class="that">
<img id="num" src="img/n01.gif"
onclick="changeImg1(document.getElementById('num'),5)"><br>
上記画像のクリックで５の画像に変わります。<br>
ボタンのクリックで８の画像に変わります。
<input type="button" value="変更"
onclick="changeImg1(document.getElementById('num'),8)">
</div>
</body></html>
上記では、関数を呼び出すところで、
changeImg1(document.getElementById('num'),5)"
と、'num'のid名から その要素のオブジェクトを取得して、
changeImg1の引数として渡しています。
この部分は、グローバル変数 imgObj1 に予め記憶しておく手法を
使う方がより簡潔に書けてよいでしょう。その例を以下に示します。
<html lang="ja"><head>
<style type="text/css">
div.that { background-color: silver; padding: 20px;}
span.that { background-color: yellow; }
</style>
</head><body>
<div class="that">
<img id="num" src="img/n01.gif"
onclick="changeImg1(imgObj1,5)"><br>
<script type="text/javascript"><!--
var imgObj1 = document.getElementById('num');
function changeImg1(obj, n){
obj.src="img/n0"+n+".gif";
}
// --></script>
上記画像のクリックで５の画像に変わります。<br>
ボタンのクリックで８の画像に変わります。
<input type="button" value="変更"
onclick="changeImg1(imgObj1,8)">
</div>
</body></html>
上記では、scriptタグの範囲を、
numのid名が付いているimgタグの下へ移動しました。
そうしないと、
var imgObj1 = document.getElementById('num');
処理順番が'num'のid名の解析前に実行されるため、
imgObj1の設定に失敗してnullとなります。
さて、上記のimgタグ内のimgObj1の表現は、
この代わりに this という表現に
置き換えることができます。（imgタグは次のようになります。）
<img id="num" src="img/n01.gif" onclick="changeImg1( this ,5)"><br>
この this という表現は、
特別にこれ自身を
指し示すキーワードになっています。
これ自身とは、 this を
書いた位置のオブジェクトを意味します。
この例で言うと、それはimgのタグ要素です。
つまり、関数を呼び出す引数の表現に、それを書いたタグ要素のオブジェクトを指定する時、
単に、 this を指定できるということです。
オブジェクトを指定する場合に、
この this の指定だけで済む場合は、
オブジェクトを取得用にid名を付ける必要が無くなり簡単になります。
この理屈を実践する練習問題を以下に示します。