calendar

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< September 2018 >>

categories

archives

profile

商品の紹介について

このブログではアフェリエイトを利用して管理人おすすめの紹介をしておりますが、実際の取引はお客様とリンク先商品提供者との間で行われ、当ブログ並びに管理人は一切の責任を負いかねますのでご了承ください。お取引に関して生じる問い合わせは、お取引先までご連絡ください。

JavaScript・文字の書き換え、絵の置き換え・・・DOMって言うんだって

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

    今回は基本的なものを理解したいと思います。
     文字列を置き換えるには、次の様な処理をします。
           置き換えたい文字列を探し、変数にする
           
      ↓
           
    その変数に新しい文字列を入れる

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

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

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

     右の図はHTML文書で、タグを使ったツリー状になっています。
     この中に探し出して処理したい部分があるわけですが、それをScript言語では「要素」と言い、これも「オブジェクト」です。又、「document」の上位には、ブラウザを表す「window」と言う「オブジェクト」があります。



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

    js32DOM説明

     さらに難しいコトバを使うと、このように「オブジェクト」を探し出し、加工・処理する仕組みは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 = ”かきくけこ”);
     
    では、目標となる(書き換え前の)文字列を「書き替え前の文字列」とし、「文字列を変えました」と書き変えてみます。
     下が、実際のプログラムです。
    js33サンプル

    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

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

     ここでは、メソッドとして「getElementById」を使いましたが、他にも「getElementsByTagName」(タグの種類で要素を選択、複数)、「getElementsByName」(name属性で付けた名前で選択、複数)などがあります。
     また、プロパティとして「innerHTML」を使いましたが、これは、要素内のHTMLの文字列にアクセスする機能を持ちます。



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

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

     下のプログラムでは、目標となる(置き換え前の)写真はカメラC3(0c3)で、マミヤ35の写真(0mamiya35)に置き換えています。
    js34サンプル

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

     この辺は、深堀りすればキリが無いけど頭が付いていかない。ここまで!
     
     
    次回は、ボタンいじくって画面を変えてみませう。

    なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→。

     


    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック