DHTMLへの初心者ガイド

コアポイント

• Dynamic HTML（DHTML）は、独立したプログラミング言語ではなく、HTML、JavaScript、CSSを組み合わせてWebページを組み合わせています。
• DHTMLの主な機能は、ページをリロードせずにWebページの外観とコンテンツを動的に変更することです。これは、第4世代ブラウザーの組み込み機能に依存しています。
• DHTMLの実装は、ブラウザからブラウザまで大きく異なります。NetScapeNavigator4は<layer></layer>タグを使用します。 <div><code><table> クロスブラウザー互換性を実現するには、DHTMLはブラウザに従って異なるスクリプトテクノロジーを使用する必要があります。これは、効率的なスクリプティングにおけるオブジェクト検出などのブラウザ検出テクノロジーの重要性を強調しています。 <li> AjaxやjQueryなどの新しいテクノロジーの無限の出現にもかかわらず、DHTMLは依然として関連性があり、インタラクティブなダイナミックWebコンテンツを作成するための基本的なスキルです。 </li> <li> </li>自称ウェブマスターとして、私は最新のWebテクノロジーに追いつくために最善を尽くします。私は現在、DHTML、つまり動的HTMLを学んでいます。このテクノロジーとそれが最終的にインターネットにどのように革命を起こすかについて多くのことを聞いた後、私はソファから立ち上がってそれを学び始めなければならないと思ったか、自分を「ウェブサイト管理者」と呼ぶ資格がなくなったと思いました。あなたが私のようなDHTMLについて何も知らないなら、このチュートリアルはあなたにぴったりです。学習プロセスをお楽しみください。ご質問がある場合は、お気軽にメールでお問い合わせください。 <p>これは良い質問であり、私はまっすぐな答えを見つけるのに苦労していることを認めています。 JavaScript News Groupの投稿が次の返信でこの質問に答えようとしているのを見たことを覚えています。 </p> <p>「DHTMLは、HTMLとJavaScriptの組み合わせです。とらえどころのない答えを探して、検索エンジンで何百もの検索結果を検索しましたが、まだ見つかりませんでした。だから、私はそれが何であれ、最初にDHTMLを学び、それが何であるかを理解するだろうと思った！私がDHTMLプログラマーになったので、私はあなたに素敵なDHTML定義を提供する準備ができていると思います：</p> <p><q> "DHTMLは、Webページをよりダイナミックにするブラウザの第4世代のいくつかの組み込みブラウザー機能の組み合わせです。本当に学ぶ必要があるのは、DHTML自体ではなく、DHTMLを使用するために必要な構文です。何よりも前に、ダイナミックドライブにすばやくアクセスして、この言語が何ができるかを確認することをお勧めします。 </q>私が言ったように、DHTMLは、一緒にあなたのWebページを動的にする機能のコレクションです。 DHTMLの作成者が「ダイナミック」と言うときに何を意味するかを定義することが今では重要だと思います。 「ダイナミック」とは、ドキュメントが読み込まれた後、ブラウザがWebページの外観とスタイルを変更する機能として定義されます。 JavaScriptを学んでいたときに、JavaScriptの</p> <p>メソッドを使用してWebページを動的に作成できることを覚えています。たとえば、<code>document.write()

  document.write("This is text created on the fly!")

  「悪くない」と自分に言ったことを覚えています。しかし、作成したいコンテンツが動的であるだけでなく、オンデマンドで生成される場合はどうでしょうか？私はその時点でまだ素朴で、上記のコードを関数でネストし、フォームボタンを介して呼び出すことでこれを実行しようとしました。

  ボタンを押すのは失望です。私のWebページ全体が一掃され、関数によって生成されたテキストのみが残りました。

  それは過去です。これで、DHTMLの導入により、ブラウザが他のすべてを消去せずにいつでもWebページ上のコンテンツをいつでも変更できます。これがDHTMLのすべてです。ドキュメントが読み込まれた後でも、ブラウザが外観とスタイルを変更する機能。

  私はすでにあなたを興奮させているので、私は公平だと思います、私はその上にいくつかの冷たい水を注ぐべきです。 DHTMLテクノロジーは現在開発中であり、NS 4とIE 4は、この素晴らしいテクノロジーの実装が大きく異なります。現在、DHTMLコードを作成し、両方のブラウザーで適切に機能することを期待することはできません。さらに、これらの2つのブラウザは、IE 4のDHTMLの異なる段階にあります。私は宣伝を広めるのを手伝いたくないので、私はここに行きます。

  これは、あなたの視点に応じて、良いことや悪いことです。 NS 4のDHTMLは非常に単純で、基本的に1つの単語レイヤーに沸騰できます。私は自分自身に驚いたが、それは本当だった - NS 4は、そのDHTMLの魔法を再生するために

  と呼ばれる新しいタグに完全に依存しています。この新しいタグは、ウェブページ上のどこにでも配置できる（他に何もない）、移動することができ、内部コンテンツをオンデマンドで更新できるため、動的です。

  <layer></layer> 基本的な構文

  タグの基本的な構文は単純ではありません（HTMLのタグは複雑であるように見えます！）：

  レイヤー内のテキスト<layer></layer> <layer></layer>

  <layer>层内文本</layer>

  タグはコンテンツタグです。つまり、コンテンツを追加できます（

  など）。上記のコードをページに挿入しようとしてください...レイヤー内のテキストが浮かんで、他のテキストと重複していることに気付くでしょう。レイヤーがページの残りの部分の上にある紙のようなものであり、ドキュメントストリームのスペースを占有しないと想像してください。 <layer></layer><table> <h5 id="レイヤー属性">レイヤー属性</h5> <p>単一層は退屈で、役に立たないことは言うまでもありません。幸いなことに、より多くの機能があります。レイヤーはプロパティをサポートし、XおよびY座標系を使用してそれを見つけることができ、その背景を提供し、それをクリップし（レイヤーの特定の領域を表示する）、非表示などを可能にします。以下に最も重要なレイヤープロパティをリストしました：</p> <table> <thead> <tr> <th>层属性</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>id 层的名称，用于在脚本中标识它 left 层相对于x坐标的位置 top 层相对于y坐标的位置 width 层的宽度，以px或%为单位 height 层的高度，以px或%为单位 bgColor 层的背景颜色 background 层的背景图像 src 层中包含的外部HTML文档

  さまざまな属性を自由に混ぜて一致させることができます。

  ここをクリックして、上記のプロパティの一部を使用してサンプルレイヤーを表示します

  left属性とtop属性を指定しなかったことに注意してください。指定しない場合、レイヤーは定義する場所に配置されます。

  スクリプトレイヤー

  これは、レイヤーに関する最も重要なことの1つです - それらをスクリプト化する方法。結局のところ、レイヤーをアクティブにするのはスクリプトです。レイヤーにアクセスするには、次の構文を使用する必要があります。

  document.layername

  レイヤーへのアクセスは最初のステップにすぎません。レイヤーにアクセスしたら、レイヤーの特性の1つを操作して動的効果を生成し続けることができます。
  ここをクリックして、レイヤーの背景色が赤と青の間に切り替わる例を表示します。
  プロパティのすべての層は読みやすく、書き込み可能ですので、必ず各プロパティを試してください！
  DHTMLのIE 4の実装の学習を開始したとき、NS対応バージョンよりもはるかに複雑であることに気付きました。 IEのDHTMLは、タグに依存するのではなく、一般的なHTMLタグ（

  や

  など）によって生成される新しいオブジェクトと属性に依存します。より強力ですが、マスターすることも難しいです。 ie 4スタイルオブジェクト

  IE 4のHTML要素は、要素の外観と感触を動的に操作するための「動的な」オブジェクトであるスタイルオブジェクトをサポートするようになりました。

  タグと同様に、要素に「ID」属性を割り当てることもできます。これは、スクリプト中に識別するために使用できます。たとえば、

  <layer></layer>

  スクリプトでは、「adiv」スタイルのオブジェクトにアクセスするために必要な構文は次のとおりです。

  adiv.style <p><code>adiv.style

  スタイルオブジェクトには多くのプロパティが含まれています。これらのプロパティを操作することにより、要素の外観を動的に変更できます。ここで、これらのプロパティのいくつかを示します：

  スタイルオブジェクトの重要なプロパティ

  backgroundcolor<ol>要素の背景色<li> <code>backgroundColor backgroundimage要素の背景画像

  backgroundImage color

  要素の色

  color 位置

  要素の位置タイプ。許容可能な値は「絶対」および「相対」

  です position pixelwidth

  element width

  pixelWidth pixelheight

  要素の高さ

  pixelHeight pixelleft

  x座標

  に対する要素の位置 pixelLeft pixeltop

  y座標

  に対する要素の位置 pixelTop

  上記の属性は、サポートされているすべての属性のサブセットのみを表しますが、それらは最も一般的に使用される属性です。任意のスタイル属性を操作するための基本的な構文は同じです。後で表示します。これらのプロパティにアクセスすることにより、ほとんどのHTML要素の外観とスタイルを変更できます（netscapeの <layer></layer>タグではなく！）。

  <layer></layer> ここをクリックして、簡単なデモンストレーションを表示

  テキストの色をどのように変更したかに注意してください：

  shomext.style.color = 'red'

  sometext.style.color = 'red'最初に要素のIDを使用してアクセスし、次にスタイルオブジェクトを介して、最後にスタイルの色属性を介して、必要に応じてテキストの色を簡単に変更することができました。

  すべてのスタイル属性は読み取りされ、同様の方法でアクセスされます。

  ここをクリックして、マウスがその上に浮かんでいるときに画像を展開し、マウスが移動したときに元のサイズに復元する別の例を表示します。

  はい、私はそれが世界で最も実用的な例ではないことを知っていますが、DHTMLがどのように機能するかを非常によく示しています。画像は、ドキュメントをリロードせずに必要に応じてサイズを変更します。これはJavaScriptが単独ではできないことです。

  NS 4およびIE 4のDHTMLの構文と機能的な違いに怖がっていない場合は、ページでコンテンツを動的に作成したり、必要に応じて変更を加える方法を学ぶことができます。

  NS 4

  の動的コンテンツ NS 4にあるものを変更する

  - あなたはそれを推測しました - layer <h5 id="タグ-すべてのレイヤーは-NSブラウザによってページの残りの部分とは異なるエンティティと見なされ-独自のドキュメントオブジェクトがあります-ドキュメントでサポートされている他のオブジェクトが含まれています-これを理解することは非常に重要です-レイヤーに別のドキュメントオブジェクトが含まれているという事実により-NSで動的コンテンツを作成できるようになります-最初に基本的なレイヤーを作成し-その中にあるものを変更する方法を示します">タグ。すべてのレイヤーは、NSブラウザによってページの残りの部分とは異なるエンティティと見なされ、独自のドキュメントオブジェクトがあります（ドキュメントでサポートされている他のオブジェクトが含まれています）。これを理解することは非常に重要です。レイヤーに別のドキュメントオブジェクトが含まれているという事実により、NSで動的コンテンツを作成できるようになります。最初に基本的なレイヤーを作成し、その中にあるものを変更する方法を示します：</h5> <p> <code> <code>layer

  <layer height="30" id="alayer" width="100%"></layer>上記のレイヤーのドキュメントオブジェクトにアクセスする準備はできていますか？必要な構文は次のとおりです

  document.alayer.document <p></p> <p>したがって、この情報を使用して、3秒ごとにレイヤーのコンテンツを変更するスクリプトを書くことができました。 <code>document.alayer.document

  ここをクリックして、Netscapeでこれを行う方法の例をご覧ください。

  テキストが生成され、ドキュメントをリロードせずに動的に消去されます！

  IE 4

  の動的コンテンツ IE 4では、動的コンテンツは、

  および

  タグに存在するinnerHTMLと呼ばれる特別な属性を介して実装されます。このプロパティを新しいHTML値に設定するだけで、内部のコンテンツが<span></span>または

  の内部がすぐに新しい値に更新されます！ IE 4ユーザーの動的コンテンツを作成するために上記の例を変更してこれを行う方法を説明します。IEの例を表示するには、ここをクリックしてください。 <span></span>

  同じ結果は実装ではまったく異なります！

  アニメーションを使用したい場合は、DHTMLを使用すると、Webページ全体がキャンバスになることを喜んで知っています。画面上で自由に飛ぶことができるコンテンツを作成できます。 netscapeでは、これは

  タグのプロパティと

  プロパティを操作することによって行われます。 IE 4では、スタイルオブジェクトのプロパティを変更することで同じことが行われます。 <layer></layer>left top ns 4pixelLeftで要素を移動します レッスン2でリコールすると、レイヤーはドキュメントの左上隅に比べてオフセットを制御するpixelTopおよびプロパティをサポートします。まあ、単純な数学操作と数行のスクリプトを使用することにより、これらのプロパティを動的に更新して、レイヤーが移動するようにします！次の例では、ボタンが押されたときに水平に移動するように、レイヤーの

  プロパティを変更します。

  ここをクリックして例を表示します。

  leftご覧のとおり、私がしているのは、「スペース」のプロパティに常に追加して、レイヤーを最初の位置に戻したいときにプロパティを元の値に戻すことだけです。 top left IE 4

  の要素を移動します ちなみに

  nsとIEがDHTMLの1つの実装に同意する日は、2つのバージョンの記述を停止できる日です（欲求不満を発散するだけです）。 IE 4の要素を移動するには、基本的に最初にその要素を位置付けられた位置に包む必要があります。

  または

  のプロパティを変更します。複雑に聞こえますが、実際には非常に簡単です。 left

  ここをクリックして例を表示します。

  私が最初にやったことは、「宇宙船」と呼ばれる外部

  を相対位置に設定することです。これは、要素を動かすために必要です（「絶対」値に設定することもできます）。次に、そのスタイルオブジェクトの

  属性を操作することにより、要素が移動します。 <span></span>

  「リアル」クロスブラウザーDHTMLが利用可能（つまり、NSとIEが正気に戻った場合）が利用可能になる前に、クロスブラウザーDHTMLは、基本的に、ユーザーが設計されたコードを使用して使用しているブラウザをスニッフィングするために選択したさまざまなスクリプトテクニックを使用することを意味します。このレッスンでは、まず「クロスブラウザー」レイヤーを作成する方法を説明し、次に最近学んだスクリプトテクニックを表示し、ブラウザのタイプを簡単に嗅ぎ分けることができます。 <span></span>

  「クロスブラウザー」レイヤーを作成

  わかりました、nsの理解<layer></layer>タグがあります。移動画像などの単純なDHTMLエフェクトを作成する場合は、通常、2つのタグを使用する必要があります - ns 4のa<span></span>タグと、IE 4にはa <div>または<code>layerタグが必要です。あまりきれいではありませんよね？さて、私は最近、NSの点では少しバグがあるものの、タグを使用して「クロスブラウザー」レイヤーを作成する方法が実際にあることを学びました。どうやら、ns 4は、divがレイヤーと同じと絶対に配置されていると扱います。さらに遅滞なく、クロスブラウザーレイヤーの例を次に示します：spandiv ns 4は、上記の div<code>divをレイヤーとまったく同じように扱います。他のレイヤーと同様に、それにアクセスするには、最初にドキュメントオブジェクトを通過し、次にレイヤーのIDを実行する必要があります。 document.crosslayer <p><code>document.crosslayer

  IE 4では、 div <p>：<code>divのIDを使用するだけです。

  crosslayer <p><code>crosslayer

  NSでは、この方法でレイヤーを指定することで、クロスブラウザーの互換性の点で便利ですが、1つの大きな欠点があることがわかりました。このようなレイヤーは、常に通常のレイヤーのように実行されるとは限らず、ブラウザをクラッシュすることもあります。予期せぬ状況に備えてください！

  ブラウザスニッフィング - オブジェクト検出

  最近まで、ユーザーのブラウザタイプを決定したいときはいつでも、ほとんどのJavaScriptプログラマーが行うように navigator<p>オブジェクトを使用しました。以下は、このオブジェクトを使用してns 4およびすなわち4：<code>navigatorを嗅ぐことを説明しています。

  var ns4 =（navigator.appname == "netscape" && navigator.appversion＆gt; = 4）<q> <code> var ie4 =（navigator.appname == "Microsoft Internet Explorer" && Navigator.Appversion＆gt; = 4）var ns4 = (navigator.appName == "Netscape" && navigator.appVersion >= 4)私は個人的に navigator<code>var ie4 = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion >= 4)オブジェクトを使用するのが嫌いです - 使用するには複雑すぎます（上記の混乱を参照してください！）。わかりました、私はあなたに話す良いニュースがあります。実際には、オブジェクト検出と呼ばれるさまざまなブラウザを嗅ぐより速い方法があります。

  このアイデアは、JavaScriptの仕組みに基づいています。ブラウザが特定のオブジェクトをサポートしていない場合、JavaScriptは参照するときに null <p>を返します。この事実を理解すると、ユーザーのブラウザを決定するために<code> <code>ステートメントでオブジェクト参照（<code> navigator <code>navigatorオブジェクトの代わりに）を使用できます。

  例を挙げましょう。 NS 3およびIE 4は、 document.images<code>nullオブジェクトをサポートしていることを知っています。これらのブラウザを嗅ぎたい場合は、これを行います。 ifnavigator if（document.images）alert（ "ns 3またはie 4を使用している"）画像をサポートしている場合、<code>>オブジェクト（NS 3およびIE 4サポートのみ）をサポートする場合、警告メッセージが発行されます」。

  オブジェクト検出は、ユーザーのブラウザタイプを決定する間接的な方法と考えてください。オブジェクトの検出は、ユーザーのブラウザ名とバージョン（ navigator<code>document.imagesオブジェクトを介して）の直接的な決定ではなく、より一般的で面倒なブラウザスニッフィングテクノロジーです。

  では、オブジェクト検出を使用してNS 4とIE 4をスニッフするにはどうすればよいですか？さて、NS 4のみが document.layers<q>オブジェクトをサポートしています。IE4のみが<code> document.all<code>if (document.images) alert("You are using NS 3 or IE 4 ")をサポートしています。この知識を使用して、ユーザーがNS 4、つまり4、またはその両方を使用しているかどうかを簡単に判断できます。

  if（document.layers）alert（ "ns 4"）<p> <code> if（document.all）alert（ "ie 4"）<code>images

  if（document.layers || document.all）alert（ "ns 4またはie 4のいずれかを使用しています）<code>navigator

  document.layersdocument.all

  ブラウザスニッフィングのために、厄介な navigator <p>オブジェクトに戻る必要がなくなりました！ <q><h5 id="dhtmlリソース">dhtmlリソース</h5> <p>明らかに、このチュートリアルはDHTMLの紹介にすぎません。 DHTML学習の旅を継続するための優れたリソースをいくつか紹介します：</p> <ul> <li>ダイナミックドライブDHTMLの例</li> <li> msdnのdhtmlガイド</li> </ul> <h2 id="動的html-dhtml-faq">動的html（dhtml）faq</h2> <h3 id="HTMLとDHTMLの違いは何ですか">HTMLとDHTMLの違いは何ですか？ </h3> <p>HTML（HyperText Markup Language）は、Webページを作成するために使用される標準のマークアップ言語です。それは静的です。つまり、ロードされても変わらないことを意味します。一方、DHTML（動的HTML）はスタンドアロン言語ではなく、HTMLの拡張です。 HTML、JavaScript、CSSを組み合わせて、インタラクティブで動的なWebコンテンツを作成します。これは、DHTMLを使用すると、Webページがページをリロードせずに変更を加え、ユーザーと対話できることを意味します。 </p> <h3 id="DHTMLはユーザーの相互作用をどのように強化しますか">DHTMLはユーザーの相互作用をどのように強化しますか？ </h3> <p>DHTMLページをリロードせずにWebページがユーザー入力に反応できるようにすることにより、ユーザーの相互作用を強化します。これは、JavaScriptとCSSを使用して達成されます。たとえば、DHTMLを使用して、ドロップダウンメニュー、アニメーション、その他のインタラクティブ機能を作成できます。これにより、ユーザーエクスペリエンスがより魅力的で効率的になります。 </p> <h3 id="他のプログラミング言語でDHTMLを使用できますか">他のプログラミング言語でDHTMLを使用できますか？ </h3> <p>はい、DHTMLは他のプログラミング言語で使用できます。 DHTML自体はHTML、CSS、およびJavaScriptの組み合わせですが、PHPやASP.NETなどの言語と相互作用することもできます。これにより、より複雑で動的なWebアプリケーションを作成できます。 </p> <h3 id="DHTMLは今日でも関連していますか">DHTMLは今日でも関連していますか？ </h3> <p>AjaxやjQueryなどの新しいテクノロジーは人気が高まっていますが、DHTMLは依然として関連性があり、広く使用されています。これはWeb開発の基本的な部分であり、DHTMLを理解することで、より高度なWebテクノロジーを学ぶための強固な基盤を提供できます。 </p> <h3 id="DHTMLの一般的な用途は何ですか"> DHTMLの一般的な用途は何ですか？ </h3> <p>DHTMLは、インタラクティブなWebコンテンツを作成するためによく使用されます。これには、ドロップダウンメニュー、フォーム検証、アニメーション、画像スクロールなどが含まれます。また、サイトまたはアプリケーションが1つのHTMLページにロードされる単一ページアプリケーションを作成するためにも使用できます。 </p> <h3 id="DHTMLはWebサイトのパフォーマンスをどのように改善しますか">DHTMLはWebサイトのパフォーマンスをどのように改善しますか？ </h3> <p>DHTMLは、Webページがページをリロードせずにユーザー入力に反応できるようにすることにより、Webサイトのパフォーマンスを大幅に改善できます。これにより、サーバーの負荷が削減され、ユーザーエクスペリエンスがよりスムーズかつ高速になります。 </p> <h3 id="DHTMLのコンポーネントは何ですか">DHTMLのコンポーネントは何ですか？ </h3> <p> DHTMLは、HTML、CSS、JavaScript、およびDocumentオブジェクトモデル（DOM）の4つの主要なコンポーネントで構成されています。 HTMLはページの構造を提供し、CSSはプレゼンテーションを制御し、JavaScriptはインタラクティブ性を有効にし、DOMはページ要素の操作を許可します。 </p> <h3 id="DHTMLはDocument-Object-Model-DOM-でどのように機能しますか">DHTMLはDocument Object Model（DOM）でどのように機能しますか？ </h3> <p>ドキュメントオブジェクトモデル（DOM）は、DHTMLの重要な部分です。 JavaScriptを使用して操作できるWebページの構造化された表現を提供します。これにより、ユーザー入力に基づいてページを動的に変更できます。 </p> <h3 id="DHTMLは学ぶのが難しいですか"> DHTMLは学ぶのが難しいですか？ </h3> <p> DHTMLの学習の難しさは、以前の知識とWeb開発の経験によって異なります。すでにHTML、CSS、およびJavaScriptに精通している場合、DHTMLの学習はこれらのスキルの自然な拡張になります。ただし、Web開発に精通していない場合は、これらの概念を習得するのに時間がかかる場合があります。 </p> <h3 id="DHTMLの詳細はどこで知ることができますか"> DHTMLの詳細はどこで知ることができますか？ </h3> <p>インターネット上でDHTMLを学習するために利用可能な多くのリソースがあります。 Geeksforgeeks、Javatpoint、TutorialSpointなどのWebサイトは、包括的なガイドとチュートリアルを提供します。さらに、YouTubeなどのプラットフォームで多くのビデオチュートリアルを見つけることができます。 </p></q></p>