JavaScript: DOMを活用しよう

クリックでオーバーレイを加える

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像をクリックしたとき、動的に要素をつくってHTMLドキュメントに加えます。
講師:
08:24

字幕

このレッスンでは画像をクリックしたとき動的に要素を作ってHTML ドキュメントに加えてみたいと思います。現在練習用の HTML ドキュメントのトップページなんですが今回の作業はこの「 ARTISTS 」というページで行いたいと思います。このページには写真がこの様にサムネールがありまして、これをクリックすると処理が行われるというその仕組みだけを作ってあります。では「表示」で「開発/管理」デベロッパーツールを表示しましょう。少し横にスクロールして見えるようにします。画像をクリックするとこのコンソールの所をご注意頂きたいですが「 IMG がクリックされました 」と表示されます。関係ない所をクリックすると何も出てきませんし、この間のスキマの所でも表しません。画像をクリックしたときだけこのメッセージが出てくるというこになっています。ですから今はメッセージなんですけれどもここでいっさいに要素を作ってドキュメントに加えるというJavaScript コードを加えていきたいと思います。HTML ドキュメントを Dreamweaver で開きました。コードを操作しますのでコードビューにして全体をもっと広げましょう。 このスクリプトが先程の仕組みです。簡単に確認しますがまずはこの写真グループのあるところそのノードを取っています。これは ul の要素なんですけれどもそれに対して addEventListener でクリックしたら「 function 」が実行されるようにという風になっています。けれども、それですと ul 要素の中、li 要素つまり先程の画像のスキマの部分でも反応してしまうのでそうならないようにクリックしたものをまずオブジェクトを取ります target というプロパティ。その tagName というので要素のタグが分かります。それが IMG だったときに初めてメッセージを出す処理をするという風になっています。ここはもう消してしまいましょう。上の「 console.dir 」もコメントアウトされてますが消してしまいます。この中に要素を動的に作るという処理を加えていきます。「 overlay 」としましょう。変数名ですね。そして「 document.CreateElement 」ですね。そして作るのは div 要素にします。overlay にはこれをコピーもってきますけどid 属性を加えていきましょう。 名前はまんま overlayとしてきます。その方が分かり易いですからね。さらにこれでまだメモリ上に要素を出来ただけですから実際にドキュメントに加えましょう。ということなので「 document.body 」です。ボディに「 appendChild 」で加えることにします。加えるのはもちろん overlay ですね。では保存をして確認してみたいと思います。「ファイル」を「保存」です。Chrome でリロードします。そして画像をクリックしてみようと思うですがもちろんあの overlay の div 要素幅はなければ高さもない、透明ですから見えません。この上のエレメントの所を確認しましょう。body があって、 div 要素があって、今はスクリプトを書いた script 要素があってbody を閉じてます。ここに注目して下さい。画像をクリックすると div 要素が透明ですけど、見えませんけど入りました。もう一度やってみましょうか。リロードして、画像をクリックすると確かにオーバーレイという div 要素が入っています。これを見えるようにしましょう。Dreamweaver に戻りましたのでまずは位置決めからしていきましょうね。 appendChild の後に overlay ですね。そして「 style 」と。これを何度か使うのでコピーをしておきます。コピーをして、まず最初は「 position 」これを「 absolute 」とします。そしてペーストをして次に色を付けましょうね。「 backgroundColor 」です。「 rgba 」で設定をします。色は黒。そして半透明、 0.7 の比率、 70% ですね、の半透明にします。それから幅を与えなくてはいけませんね、幅と高さです。ペーストします。「 width 」これをウィンドウに合わせます。「 innerWidth 」ウィンドウの表示されている所の領域です。そしてこれは CSS スタイルというのはCSS の設定となりですのでちゃんと単位をつけなければいけません。pixel ということです。またペーストをしまして今度は高さですね。「 height 」同様に「 window.innerHeight 」単位を付けます。保存をしましょう。Chrome を再びリロードして画像をクリックします。確かに div 要素が入っているんですがどこにあるかというと下の方ですね。ここにあります。 そうじゃなくて表示している場所にしたいわけですから左端とそれから上端ですね。left と top をちゃんと調整してあげる必要があります。オーバーレイの左端と上端ですね。その位置決めをしたいと思います。また先程のコピーが残っているでしょう。「 style.left 」ですね。表示されているウィンドウの左端というのはですね。「 window. pageXOffset 」これは左側です。表示されている左端の座標になります。ここももちろん単位も必要ですね。そしてまたペーストして同様に今度は top ですね。「 window. pageYOffset 」が垂直位置というになります。pixel で。いったん保存をしましょう。Chrome をリロードします。そしてクリックすると要素が入ると同時にちゃんとウィンドウの大きさに位置が合っていますね。このウィンドウの大きさに立っていますからデベロッパーツールを閉じるとこちらにはオーバーレイ来ていません。左端も同様ですね。上端もというこどて。表示されている領域ぴってりにサイズを合わせてオーバーレイの div 要素が設定されたということです。このレッスンでは画像をクリックした時動的にdiv 要素を作ってHTML ドキュメントに加えました。 使ったメソッドというとまず CreateElementで要素を作ります。そして appendChild で要素をドキュメントに加える。後はスタイルのプロパティを使って CSSと同じ要領で大きさや位置、カラーなどを定めたということです。

JavaScript: DOMを活用しよう

DOM(Document Object Model)はHTMLの中の要素とそのツリー構造を扱うための仕組みです。このコースではJavaScriptの基礎を学んだ方を対象に、DOMの基本的な操作方法について解説します。具体的にはDOMの要素やノードの調べ方、要素の属性の変更、ノードの追加方法などについて説明し、実際にインタラクティブに対応するページを作ります。

3時間24分 (33 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年03月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。