これまで、 . のドットを付けて操作する記述をたくさん使ってきました。
document.bmp2.src = "img/faceA2.gif";
これで、documentの中のimg2のname属性がついているimgタグのsrcを変更することで、
画像を変更しました。
document.body.style.color = "red";
これで、文字の色を赤に変更しました。また
document.style.backgroundColor = "blue";
これで、背景色を青に変更しました。(その他のスタイル変更も紹介)
location.href="n1001.htm";
この実行で、webページを、n1001.htm のページに変更しました。
document.title = "タイトルバー表示";
これで、documentでタイトルバー表示を変更しました。また
window.status = "ステータスバー表示";
これで、documentでステータスバーの表示を変更しました。
document.getElementById("A1").href = "ex/n4001.htm";
これで、documentでa1のidが付けられるタグを取得して、
そのリンク先を変更しました。
このように、locationや、documentや、window
の後に . をつけ、右側で
ある情報を表現する名前などを指定しています。
ここで、locationや、documentや、windowは、
オブジェクトと呼ばれます。
オブジェクトとは、情報や機能を持った 「まとまり」です。
オブジェクトが持っている情報は、上記の href や title や status や
style の名前で表現している部分で、プロパティと呼びます。
また機能は、getElementByIdのようにはカッコを付ける表現のもので、
メソッドと呼ばれる命令です。
そしてブジェクトは、変数で管理でき、その変数でプロパティやメソッドを指定できます。
以下でオブジェクト構造を、例とともに説明します。
オブジェクとは、locationや、documentや、windowのような名前で表現される以外に、
構造的に、他のオブジェクトで管理されるものがあります。
例えば、 <img src="画像ファイル" name="bmp2" > は、
Imageと呼ばれる種類のオブジェクトで、
documentで管理されます。
この時、document.bmp2.srcの
document.bmp2
の部分が、Imageのオブジェクトで、それはdocumentオブジェクトで管理されるこのbmp2という名前が
ついているタグを意味しています。
そして上記先頭のdocument.bmp2.src = "img/faceA2.gif";
は、
このImageのオブジェクトのsrcプロパティの変更で画像を
変更しているわけです。
これらオブジェクトは、変数で管理して、その変数でプロパティやメソッドを指定できます。
例えば <img src="画像ファイル" name="bmp2" id="image2"> のタグ要素が
ある場合、次のように実行させることができます。
var obj1;//変数を用意
obj1 = document.bmp2;//変数にImageオブジェクトを管理
obj1.src = "img/faceA2.gif";//変数で画像を変更
obj1.width = 200;//画像の幅を変更
obj1.style.height = "200px";//画像のスタイルを介して高さ変更
そして、画像に対する同じ処理を次のように行わせることもできます。
var obj2 = document.getElementById("image2");//変数にImageオブジェクトを管理
obj2.src = "img/faceA2.gif";//変数で画像を変更
obj2.width = 200;//画像の幅を変更
obj2.style.height = "200px";//画像のスタイルを介して高さ変更
この場合、変数obj1とobj2は、同じImageオブジェクトを管理している変数といえます。
実際、alert(obj1==obj2); で確認すると trueが表示されます。
これまでの内容で想像できたかもしれませんが、body内の全てのタグ要素は、オブジェクトになっています。
この構造は、DOM（Document Object Model）と呼ばれる取り決めによって、
同じような操作でオブジェクトを取得して アクセスできるように作られています。
（例えばidをつけたオブジェクトは、documentのgetElementByIdメソッドで取得できるなどの規則です。）
<a href="ex/n4001.htm" id="A1"> クリック </a> の例で示します。
これは、
Linkと呼ばれる種類のオブジェクトで、documentによって管理されます。
そして、document.getElementById("A1").href
のdocument.getElementById("A1")で、
このLinkオブジェクトを取得して 変数で管理し、そのオブジェクトのhrefプロパティで
リンク先を変更する例を示します。
var obj2;
obj2 = document.getElementById("A1");
obj2.href = "ex/n4001.htm";
obj2.style.backgroundColor = "yellow";
上記で、idをつけたオブジェクトの取得は、documentのgetElementByIdメソッドを使いました。
この使い方は、DOM（Document Object Model）と呼ばれる取り決めによって、
上記に示した img や a タグの要素以外でも、p span div form input h1 など任意のタグ要素に使えます。
そして、idをつけたinputタグであればformで囲まなくても
document.getElementById(id名)
で取得して使うことができます。
例えば<input type="text" id="txt1">で、
と表示できますが、
ここを で
"XYZ"へ変更するchange_txt1の名前の関数は、次ように書くことができます。
function change_txt1(){
var obj3;
obj3 = document.getElementById("txt1");
obj3.value="XYZ";
}
なお上記のfunctionの内容は、変数を使わない次の１行でも可能です。
document.getElementById("txt1").value="XYZ";
functionの中で、
divタグ要素のオブジェクトを記憶する変数を、xxxの名前で用意し、次に
a タグ要素のオブジェクトを記憶する変数を、xxxの名前で用意し、
それを使って簡潔なプログラムになるように変更してください。
なお、styleの変更する順番は 変えないでください。
なお、変数宣言（変数を用意して初期の設定をしている箇所）が
functionの外側に移動すると、HTMLの最初の表示で実行エラーになります。
確認してみましょう。このエラーの理由を、以下に説明します。
functionの外側にある命令は、
HTMLを表示する前に
ブラウザのHTMLの内容を解析しながら実行します。
そしてこの場合、id名を付けている箇所が、getElementByIdの実行記述より下のbodyにあります。
つまりこの場合、getElementByIdで得ようとしているタグ要素がまだ未解析なので
存在しないと判断されてしまいます。この場合は =の左にある変数に
オブジェクトがないというnullの情報が記憶されます。
その後で、変数.style.fontSize="xx-small";の表現が
ありますが、変数には、オブジェクトが管理されていないので ここでエラーが起きるのです。