DHTMLユートピア：JavaScript＆Domを使用した最新のWebデザイン

ダイナミックなWebページのロックを解除する魅力：DHTMLの世界に深く

この記事は、SitePointの新しい本「DHTML UTOPIA：JavaScript＆DOMを使用した最新のWebデザイン」から抜粋しています。著者のStuart Langridgeは、Web標準を使用し、コードとタグを分離して、魅力的で実用的でインタラクティブなDHTMLアプリケーションを構築します。

この本は、ドキュメントオブジェクトモデル（DOM）、リモートスクリプティング、AJAX、XML-RPC、XPATHテクノロジーなど、300ページ以上のDHTMLスキルをカバーして、独自のWebプロジェクトアプリケーションを作成するのに役立ちます。たとえば、標準に準拠した階層ナビゲーションメニューを作成します。

次の抜粋は、DHTMLのコアテクノロジーとアプリケーションをすばやく理解する必要があります。詳細については、本のページにアクセスするか、完全なカタログをご覧ください。 PDFバージョンをダウンロードすることもできます。それでは、第1章に行きましょう。

第1章：DHTMLテクノロジーの概要

この章では、HTML、CSS、JavaScriptの組み合わせなど、DHTML Webサイトを構築するために必要な基本の簡単な概要を簡単に説明します。 DHTMLは単一のテクノロジーではありませんが、料理の芸術のようなこれら3つのテクノロジーの巧妙な融合である最終結果は、単純な自家製料理や壮大な宴会です。

html basics

ウェブサイトはHTMLで書かれています。成功したDHTML強化Webサイトを構築するには、HTMLが2つの条件を満たす必要があります。

feffactive html：HTML仕様のルールに従って、HTMLコードが標準に準拠していることを確認してください。これはDHTMLを構築するために重要です。これには、タグを正しくネストする、コンテナタグを閉じる、ドキュメントタイプの宣言（Doctype）の使用が含まれます。 W3Cバリエーターを使用して、HTMLの有効性を確認します。

• セマンティック化されたHTML：HTMLタグを使用して、外観ではなくドキュメント要素のプロパティを説明します。たとえば、 タグを使用してパラグラフを表し、

  タグを表すために
または
• タグを使用してテキストのフォーマットを制御するのではなく、参照を表すために参照を表します。セマンティックタグ付けにより、DHTMLテクノロジーを簡単に適用できます。

  <p></p> css<blockquote></blockquote>を追加します <br>カスケードスタイルシート（CSS）は、HTMLのレンダリング方法、つまりページ上の各要素の外観を定義するために使用されます。 CSSスタイルを通じて、DHTMLページはページの外観とコンテンツを独立して処理し、クリーンな分離を実現できます。 <font></font>

  javascript
を追加します

JavaScriptは、Webサイトに動的な動作を追加するために使用されるプログラミング言語です。 HTMLはページ構造を定義し、CSSはページの外観を定義し、JavaScriptはボタンのクリック、画像のドラッグ、マウスの移動などのユーザーインタラクション動作を定義します。 JavaScriptはDOMで動作し、アクションを異なるイベント（マウスオーバー、ドラッグ、クリック）に関連付けます。

ツールの推奨事項

優れたJavaScript開発環境とコードエディターは、開発効率を大幅に向上させることができます。 DebuggingにMozilla Firefoxを使用し、構文の強調表示をサポートするコードエディターを使用することをお勧めします。

第2章：オブジェクトモデル（dom）

を文書化します

domは、HTMLページを、ページ要素をツリー構造（DOMツリー）にマップするJavaScriptプログラムでアクセスできるオブジェクトのセットとして説明します。各要素は要素ノードになり、各テキストフラグメントはテキストノードになります。 DOMツリーの構造は、HTMLタグのネストレベルに対応しています。効果的で正しくネストされたHTMLは、適切なDOMツリーを構築するために不可欠です。

domツリーを通る

を移動します

DOMツリーを通る移動とは、ツリー内の各ノードに順番にアクセスするプロセスを指します。これは通常、再帰的に使用されます。 document.getElementById()メソッドは、指定されたIDの要素を取得するために使用され、指定されたタイプのすべての要素を取得するためにdocument.getElementsByTagName()メソッドが使用されます。

操作DOM要素

JavaScriptを使用して、DOM要素のプロパティ、テキストコンテンツ、スタイルのプロパティを変更できます。 appendChild()メソッドは、新しい子ノードを追加するために使用され、insertBefore()メソッドは、指定されたノードの前に新しい子ノードを挿入するために使用され、removeChild()メソッドは子ノードを削除するために使用され、cloneNode()メソッドはノードを複製するために使用されます。

dom操作例：拡張フォームとモジュラーイメージの切り替え

この章では、ユーザーが入力フィールドを動的に追加できる拡張可能なフォームと、HTMLコードを手動で変更せずにJavaScriptを介して画像スイッチング効果を自動的に検出および設定するモジュラーイメージスイッチングを提供します。

第3章：DOMイベントの処理

イベントは、マウスのクリック、フォームの変更など、要素で発生するアクションです。 DHTMLプログラミングのコアは、イベント処理、つまりイベントに応答するコードを作成することです。

イベント処理方法

最新のDOMイベント処理では、addEventListener()メソッド（およびIEのattachEventメソッド）を使用して、イベントリスナーを要素に添付します。イベントリスナー関数は、イベントオブジェクトをパラメーターとして受信します。これには、ターゲット要素、マウス座標など、イベントに関する詳細情報が含まれています。

イベントバブリングとデフォルトの動作

イベントバブルとは、ターゲット要素から祖先要素にイベントが上方に泡立つプロセスを指します。

メソッドは、イベントの泡立ちを防ぐことができます。

メソッドは、リンクジャンプの防止など、イベントのデフォルトの動作をブロックできます。 stopPropagation() preventDefault()クロスブラウザーイベント処理

異なるブラウザでコードが適切に機能するようにするには、

関数を使用して

メソッドとaddEvent()メソッドを均一に処理するなど、クロスブラウザー互換のイベント処理方法を使用する必要があります。 addEventListener() attachEvent()イベント処理の例：スマートリンクとテーブルの強調表示

この章では、2つの例を示します。スマートリンクは、テーブルの上にマウスがホバーするときに、新しいウィンドウでリンクを強調表示するかどうかを選択できます。

第4章：ブラウザ機能の検出

DHTMLの機能強化がこれらの機能をサポートしないブラウザに問題を引き起こさないようにするために、ブラウザ機能の検出が必要です。

プロパティ検出

機能検出とは、ブラウザタイプを識別することでサポートする機能を推測するのではなく、ブラウザが特定の機能をサポートするかどうかを直接チェックするメソッドを指します。 これには、DOMメソッドと属性が存在するかどうかを確認することが含まれます。

機能検出の例：スクロール可能な画像

この章では、機能検出を使用して、さまざまなブラウザーでコードが適切に機能し、マウス座標取得のブラウザの違いを処理することを確認するスクロール可能な画像例を提供します。

この本の残りの章では、DHTMLのより高度な手法とアプリケーションをさらに探求します。

（画像は元の形式と位置のままです）

画像リンクにアクセスできないため、画像を表示できません。画像リンクが有効であることを確認してください。

以上がDHTMLユートピア：JavaScript＆Domを使用した最新のWebデザインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。