JavaScriptのabc

JavaScriptのabc
５．書き換え、置き換え

●　DOMって言うんだって

ようやくたどり着きました、文字の書き換え、絵の置き換え。

今回は基本的なものを理解したいと思います。

文字列を置き換えるには、次の様な処理をします。

置き換えたい文字列を探し、変数にする

　　↓

その変数に新しい文字列を入れる

これをどの様な記述で行わせるか・・・その前に知識の整理を。

Script要素がオブジェクトから成り立っている事は、「１１．「Dateオブジェクト」使いこなしてカレンダー作り（その１）」で学びました。その時「オブジェクト」の一例として「document」を使いました。

今回は、この「オブジェクト」を探し出し、入れ替える事がテーマです。さて、「オブジェクト」には、「document」の他にどのようなものがあるのでしょうか。

上の図はHTML文書で、タグを使ったツリー状になっています。

この中に探し出して処理したい部分があるわけですが、それをScript言語では「要素」と言い、これも「オブジェクト」です。又、「document」の上位には、ブラウザを表す「window」と言う「オブジェクト」があります。

すなわち、Scriptから見たWebページは下の様な階層構造になっています。

さらに難しいコトバを使うと、このように、「オブジェクト」を探し出し、加工・処理する仕組みはDOM(Document Objekt Model)と呼ばれるそうです。

では、実際にプログラム作って、理解を深めます。

まず探し出すべき目標の要素ですが、判りやすいのはIDを付ける方法です。ある文字列を目標にする場合、HTMLのタグにIDを付けます。例えば、「あいうえお」と言う文字列にID「xx」を付ける記述、下の通りです。これはHTML上でリンクをかける時にとる手法でもあります。

<p id = ”xx”>あいうえお</p>

そして、JavaScript上で、ID「xx」を探し出し、それを「a」と言う変数にする記述は、下の様になります。

var a = document.getElementById(”xx”);

次に、例えば「かきくけこ」と書き替えたい場合、JavaScript上で、変数「a」のHTML上での内容を「かきくけこ」とします。これは、「innerHTMLプロパティ」を使い、次の様な記述です。

a.innerHTML = ”かきくけこ”);

では、目標となる（書き換え前の）文字列を「書き替え前の文字列」とし、「文字列を変えました」と書き変えてみます。

下が、実際のプログラムです。

下のボタンをクリックして、動きを見て下さい。

切り替えが早すぎるので、セキュリティ対策でスクリプトがブロックしてありこれを手動で解除していくケースの方が動きが良く判ります。

ここでは、メソッドとして「getElementById」を使いましたが、他にも「getElementsByTagName」（タグの種類で要素を選択、複数）、「getElementsByName」（name属性で付けた名前で選択、複数）などがあります。

また、プロパティとして「innerHTML」を使いましたが、これは、要素内のHTMLの文字列にアクセスする機能を持ちます。

同じ考え方で、絵を差し替えてみましょう。

HTML上で目標とする<img>タグにIDを付け、JavaScript上で「getElementById」を使って変数に直します。ここからが文字列の場合と違います。文字列の場合は、「innerHTML」を使って文字列を書き替えましたが、絵を置き換える場合は「src」を使いパスを変更します。

下のプログラムでは、目標となる（置き換え前の）写真はカメラC3（0c3）で、マミヤ３５の写真（0mamiya35）に置き換えています。

下のボタンをクリックして、動きを見て下さい。

これも絵の入れ替えが早すぎるので、セキュリティ対策でスクリプトがブロックしてありこれを手動で解除していくケースの方が動きが良く判ります。

この辺は、深堀りすればキリが無いけど頭が付いていかない。ここまで！

次回は、ボタンいじくって画面を変えてみませう。

●　イベントで文字・画像の置き換え

今回は、楽しいホームページなんかに使われている「マウス乗っけたら絵が変わる」ってのに挑戦！！

かなり実用に近づきます。

今回学ぶ「マウス乗っけた時」、「クリックした時」「ページを読み込んだ時」などは「イベント」と呼ばれます。そして、「イベント」が起こった時に所定のプログラムを実行させるものを「イベントハンドラ」と呼びます。

「イベントハンドラ」は、「on～」と記述される「属性」です。

以下に良く用いられるイベントハンドラ」と「イベント」を示します。

イベントハンドラ・・・イベント

onLoad・・・・・・・・・・読み込みが完了

onClick ・・・・・・・・・クリックされた

onMouseOver ・・・・マウスが乗った

onMouseOut・・・・・マウスが離れた

他にもたくさんの「イベントハンドラ」が有りますが、それらは、遭遇した時にマスターしましょう。

まず、「１４．文字の書き換え、絵の置き換え・・・DOMって言うんだって」で作った文字列書き換えのプログラムを手直しして、onLoad、onClick、onMouseOver、onMouseOutを使いイベントごとに違う動くをするようにします。

onLoadで、ダイヤログを出す

onClickをカウントして文字列に表示する

onMouseOverをカウントして文字列に表示する

onMouseOutをカウントして文字列に表示する

プログラムの概要は以下の通りです。

♥HTMLタグbdyを<body onLoad=”act0()”>として、onLoad時に処理をする関数act0()を指定する
♥HTMLタグpを<p id=”xx” onMouseOver=”acta();
” onClick=”actb();” onMouseOut=”actc();”> として、各イベント時に処理をする関数を指定する。
♥head部分でJavaScriptの関数act0()、acta()、actb()、actc()を定義する。

関数acta()、actb()、actc()の内容は、「１４．文字の書き換え、絵の置き換え・・・DOMって言うんだって」のbodyの中のJavaScript記述をほとんど流用できます。

下が、実際のプログラムです。