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

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

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

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

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

この章では、HTML、CSS、JavaScriptの組み合わせなど、DHTML Webサイトを構(gòu)築するために必要な基本の簡(jiǎn)単な概要を簡(jiǎn)単に説明します。 DHTMLは単一のテクノロジーではありませんが、料理の蕓術(shù)のようなこれら3つのテクノロジーの巧妙な融合である最終結(jié)果は、単純な自家製料理や壯大な宴會(huì)です。

html basics

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

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

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

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

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

  javascript
を追加します

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

ツールの推奨事項(xiàng)

優(yōu)れたJavaScript開(kāi)発環(huán)境とコードエディターは、開(kāi)発効率を大幅に向上させることができます。 DebuggingにMozilla Firefoxを使用し、構(gòu)文の強(qiáng)調(diào)表示をサポートするコードエディターを使用することをお?jiǎng)幛幛筏蓼埂?

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

を文書化します

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

domツリーを通る

を移動(dòng)します

DOMツリーを通る移動(dòng)とは、ツリー內(nèi)の各ノードに順?lè)衰ⅴ互工工毳抓恁互工蛑袱筏蓼?。これは通常、再帰的に使用されます? document.getElementById()メソッドは、指定されたIDの要素を取得するために使用され、指定されたタイプのすべての要素を取得するためにdocument.getElementsByTagName()メソッドが使用されます。

操作DOM要素

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

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

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

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

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

イベント処理方法

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

イベントバブリングとデフォルトの動(dòng)作

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

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

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

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

関數(shù)を使用して

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

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

第4章：ブラウザ機(jī)能の検出

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

プロパティ検出

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

機(jī)能検出の例：スクロール可能な畫像

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

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

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

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

以上がDHTMLユートピア：JavaScript＆Domを使用した最新のWebデザインの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。