画像タグに名前を付をつけると、それをJavaScriptで利用できます。
次は、画像タグ<img>に名前を付け、ボタンクリックで画像を変更する例です。
いまの気持ちは と の両方です。
それぞれのボタンをクリックして実験してください。
上記のようなhtmlは、次のような内容になります。
<html> <head> <title>test</title> <script language="javascript"> <!-- function left_Click1(){ document.a2.src = "img/faceB3.gif"; document.xyz.src = "img/faceA2.gif"; alert("変更しました"); } function right_Click9(){ document.a2.src = "img/faceA1.gif"; } // --> </script> </head> <body> <p> いまの気持ちは<img src="img/faceA0.gif" name="a2" > と <img src="img/faceA3.gif" name="xyz" >の両方です。<br> <input type="button" value="ボタン1" onClick="left_Click1()"> <input type="button" value="ボタン2" onClick="right_Click9()"> </p> </body> </html>
まず、画像タグ内の、 name="a2"
と name="xyz"
に注目してください。ここでそれぞれの画像タグに、a2とxyzの名前をつけています。
そして、JavaScriptで、例えばa2の名前がついたimgタグにアクセスする場合、
document.a2という表現でアクセスできる規則になっています。
そして、このタグが画像タグであれば、src属性でファイルのパスを記憶しています。
この記憶内容を変更する場合、『 . 』のドットでつなげて、
document.a2.src="画像ファイル名";と表現します。
ここで、=は代入演算子と呼ばれる指示で、
右にある"画像ファイル名"の文字列情報を、
左に書いたdocument.a2.srcへ記憶させる命令の表現です。
それが行われると同時に、ブラウザ上の画像が そのファイルの画像に変化します。
ここで、documentとはブラウザに配置されるすべてを管理しているもので、
オブジェクトと呼ばれるものです。
また、.は、左に記述しているもの「の中の」と
という意味で捉えるとよいでしょう。
つまり、
document.a2.src=ある値;は、
配置情報のすべてを管理しているdocumentの中の
名前がa2の画像の中のsrc属性を、ある値に変更する命令を書いたと
いう訳です。また、一つの命令は、;の記述で完結する規則になっています。
上記において、背景が黄色の範囲でプログラムを書いています。
この色の字は、必ず書かなければならないプログラムの範囲で示しています。
そして上記では、この中に関数(かんすう)と呼ばれる2つの命令を作っています。
一つは青文字の範囲でleft_Click1の名前をつけて作っています。
もう一つは青文字の範囲でright_Click9の名前をつけて作っています。
なお、実際にimgタグのsrc属性に記憶される内容は、絶対パスになっています。
それは、で確認できます。
このボタンのonclickでは、alert(document.xyz.src)を実行させ、
先頭例の右の画像のsrc属性を出しています。
このページは、ボタンクリックなどの確認すべき操作をすべて行わないと指示のページへのボタンが有効になりません。
javascript では、存在しない属性名を指定すると その参照情報は、『 undefined 』となります。
そして、この『 undefined 』のキーワードが利用できます。
上記であれば、alert( document.a2.src ) で、 "img/faceB3.gif"に対応する情報が得られますが、
間違えて、alert( document.a2.XYZ ) と実行すると、「 undefined 」が表示されます。
この時、alert( document.a2.XYZ == undefined) と実行すると 、「 true 」が表示されます。
なお、alert( document.XYZ.src ) の表現は、document.XYZ の undefined 情報を使って、.srcを利用しようとしているので、実行エラーとなり、
一般にスクリプトが停止します。
変数がundefinedかどうか判定する場合は、 if( typeof 変数 == 'undefined' ) { 〜 という表現がよいでしょう。