Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。
第23回はPart II: Learning Front-End Devから、13項のLearn DOM, BOM, & jQueryを紹介します。
DOM、BOM、jQueryについて学ぶの説明です。
DOM、BOM、jQueryについて学ぶ
DOM
Document Object Model(DOM)は、クロスプラットフォームかつ言語依存の無い、HTML、XHTML、XMLドキュメントのオブジェクトを表現し相互作用させる為の規約です。ドキュメント上にあるすべてのノードは、DOMツリーというツリー構造状に編成されます。DOMツリー内のオブジェクトはアドレス指定され、オブジェクトが持つメソッドを使用して操作することができます。DOMのパブリックインターフェイスは、Application Programming Interface(API)で指定されます。
参照元:英語版Wikipedia
BOM
ブラウザオブジェクトモデル(BOM)は、Webブラウザから公開されるすべてのオブジェクトを参照するブラウザ固有の規則です。ドキュメントオブジェクトモデルとは異なり、実装の標準もなく、厳密な定義もされていないため、ブラウザベンダーは自由にBOMを自由に実装できます。
参照元:英語版Wikipedia
jQuery
jQueryは、HTMLのクライアントサイドスクリプトを単純化するために設計された、クロスプラットフォームのJavaScriptライブラリです。jQueryは、現在使用されているJavaScriptライブラリの中で最も人気があり、Web上でトラフィックの多い上位1000万サイト中65%にインストールされています。jQueryは、MITライセンスの下で許可された無料のオープンソースソフトウェアです。
参照元:英語版Wikipedia
学習方法
理想的ですが最も難しいのは、JavaScriptを最初に学習し、次にDOMを、次にjQueryを学習することです。
しかし、効率的な方法があります。ほとんどのフロントエンドの開発者は、jQueryを最初に学ぶことによってJavaScriptとDOMについて学びます。
どのような方法をとったとしても、JavaScript、DOM、およびjQueryがブラックボックスにならないようにしてください。
jQueryを学ぶ
前述の通り、jQueryを学びながらDOMやBOMに触れていきましょう。CodeacademyのCodecademy.com jQueryなどを利用して、以下の様な基本を抑えましょう。
項目 | 内容 |
---|---|
ファンクション | jQueryでのセレクタ、変数、ファンクションの使い方 |
ダイナミックHTML | 動的にHTML要素を操作したり、CSSのクラスやプロパティを操作する |
イベント | マウスやキーボードの操作に対応したイベントハンドラの使い方 |
エフェクト | アニメーションやイベントハンドラを応用してインタラクティブな要素を作る |
Reference from : Codecademy.com jQuery [インタラクティブ]
jQueryを使用する際の一番基本的な状態は、ドキュメントが正常に読み込まれてからスクリプトを実行するということです。これをコードにすると以下になります。
$(document).ready(function(){
//write your code!
});
これは、ドキュメント$(document)
が、読み込み完了したら.ready()
実行することfunction(){}
という意味です。
さてjQueryでは、セレクタによって色々なHTML要素を変化させることができます。
例:$('div').hidden()
この時セレクタで指定したHTML要素はDOMの一部の為、DOMツリーを意識できていれば柔軟に要素を指定、変化させることが出来ます。
<html>
<head>
</head>
<body>
<ol>
<li id="first"></li>
<li id="second"></li>
<li id="third"></li>
</ol>
</body>
</html>
上記のような場合、DOMツリー内で<li>
要素は次のような階層に位置するということが出来ます。
<html>
<body>
<ol>
<li>
<li>
<li>
であれば、id="third"
とIDタグが付いている3番目の<li>
要素をセレクタで指定する方法は、$('#third')
以外に$('li:last-child')
とすることも可能です。
以下はjQueryを使用して動的にリストを追加削除するプログラムです。テキストボックスに文字を入力して増えるボタンでリストの最終行に追加します。消えるボタンはリストの最終行を削除します。
See the Pen jQuery test by mojage (@mojage) on CodePen.
その他の学習リソース
- jQuery Enlightenment
- The Document Object Model [読み物]
(ドキュメントオブジェクトモデル) - HTML/JS: Making Webpages Interactive [視聴]
(HTML/JS:Webページをインタラクティブにする) - HTML/JS: Making Webpages Interactive with jQuery [視聴]
(HTML/JS:WebページをjQueryを使用してインタラクティブにする) - jQuery Enlightenment [読み物]
(開眼 jQuery) - jQueryとDOM要素 [読み物][日本語]
書籍
Web制作の現場で使う jQueryデザイン入門 [読み物][日本語][$]
jQueryクックブック [読み物][日本語][$]
マスタリング
Douglas Crockford: An Inconvenient API - The Theory of the DOM(Douglas Crockford:不便なAPI - DOMの理論)
- DOM Enlightenment [読み物][$] オンラインで読むなら無料です
(開眼 DOM) - 誰もが知っておくべきjQueryのTips [読み物][日本語]
- Advanced JS Fundamentals to jQuery & Pure DOM Scripting [視聴][$]
(jQueryとPure DOMスクリプティングの高度なJSの基礎) - Fixing Common jQuery Bugs [視聴][$]
(一般的なjQueryのバグを修正する) - jQuery-Free JavaScript [視聴][$]
(jQuery - フリーなJavaScript) - jQuery Tips and Tricks [視聴][$]
(jQueryのヒントとテクニック)
書籍
AdvancED DOM Scripting: Dynamic Web Design Techniques [読み物][$]
(高度なDOMスクリプティング:ダイナミックWebデザインテクニック)
リファレンス/ドキュメント
英語のリファレンス/ドキュメント
- jQuery Docs
- Events
- DOM Browser Support
- DOM Events Browser Support
- HTML Interfaces Browser Support
- MDN Browser Object Model
- MDN Document Object Model
- MDN Event reference
- MSDN Document Object Model (DOM)
日本語のリファレンス/ドキュメント
- MDN DOM リファレンス [日本語]
- MDN windows [日本語]
- MDN イベントリファレンス [日本語]
標準仕様
- Document Object Model (DOM) Level 3 Events Specification
- Document Object Model (DOM) Technical Reports
- DOM Living Standard
- W3C DOM4
0 件のコメント:
コメントを投稿