DHTML の「動作」コンポーネントを理解する

Microsoft の IE 5.0 ブラウザがリリースされる前、Web プログラミングで直面した最大の課題は、コードの再利用と複数ページの共有を実現するコンポーネントを簡単に作成できないことでした。この問題は、DHTML (動的 HEML) Web ページ プログラマーを常に悩ませてきました。複数のページで繰り返される機能や同様の機能に対応するために、HTML、CSS、JAVASCRIPT コードを書き換え続けることしかできません。 IE 5.0 ブラウザのリリース以降、この状況は改善され、特定の機能を実装するコードをコンポーネントにカプセル化できる新しい命令結合方式が導入され、複数のページでのコードの再利用が実現され、Web プログラミングが容易になりました。まったく新しい世界に入りましょう。この新しいテクノロジーは、これから説明する DHTML の「動作」です。

「動作」は、ページ上の特定の機能やアクションをカプセル化する、シンプルで使いやすいコンポーネントです。 WEBページ内の要素に「動作」を付けると、要素本来の動作が変更されます。したがって、Web ページのプログラマーは、一般的な DHTML 命令を開発し、「動作」を使用して元のオブジェクトの一部の属性を変更して、オブジェクトの機能を強化すると同時に、ページの HTML コードを簡素化できます。さらに、「ビヘイビア」の作成と使用も非常に簡単で便利で、必要な知識は使い慣れた CSS スタイル シート、HTML 命令、および JavaSCRIPT スクリプト言語のみです。それについてある程度の知識があり、実際のプログラミング経験がある限り、「ビヘイビア」の使用を学習して習得することに問題はありません。フォント効果を変更する「ビヘイビア」コンポーネントを例に、「ビヘイビア」の書き​​方と使い方を説明し、「ビヘイビア」がページ編集にもたらす利点と利便性を体験します。

まず、font_efftce.htc という名前の新しいテキスト ファイルを作成します。「動作」コンポーネントを構成するファイルはすべて .htc 拡張子を持ちます。このファイルの内容は、この「動作」の説明です。作成および使用する手順は次のとおりです。

(1) まず、この「動作」にいくつかのイベント応答を追加します。 ステートメントの記述形式は次のとおりです。

< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >

< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >

< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2 yellow()" / >

< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue ()" / >

"EVENT" は必要なイベント名に対応します。ここでは、onmouseover、onmouseout、onmousedown、onmouseup です。もちろん、特定のニーズに合わせて他のイベント名を追加することもできます。 「ONEVENT」は、個々のイベント ハンドル、つまりイベントがトリガーされたときに呼び出される関数の名前に対応します。 glowit() 関数は、フォントの周囲に赤い輝きを作成します。 noglow() 関数は、フォントのグロー効果を削除します。 Font2 yellow() 関数は、フォントの色を黄色に変更します。 Font2blue() 関数は、フォントの色を青に変更します。 4 つのイベントすべての定義は似ています。

(2) 次に、この「動作」に「メソッド」定義をさらに 2 つ追加します。内容は次のとおりです。

< PUBLIC:METHOD NAME="move_down" / >

< PUBLIC:METHOD NAME="move_right" / >

「NAME」パラメータは、指定された「メソッド」名に対応します。 move_down と move_right は、それぞれ下と右に移動する「方法」に対応する関数名です。メソッド名の後に「( )」を付けないでください。つまり、「move_down()」のように記述することは、「メソッド」定義の構文では許可されていません。

(3) 次のステップでは、JAVASCRIPT スクリプト ステートメントを使用して、使い慣れた DHTML 環境で「イベント ハンドル」と「メソッド」に対応する関数コンテンツを記述し、目的の効果を実現します。具体的な内容については、以下のソースプログラムを参照してください。 「要素」パラメータは、この「動作」が関連付けられているオブジェクトを参照します。これは、「動作」が常にページ上の要素に関連付けられ、この要素を通じて機能するためです。他のステートメントはすべて DHTML プログラミングの内容なので、これ以上は説明しません。質問がある場合は、IE ブラウザ用の Microsoft の MSDN 開発ドキュメントを参照してください。このドキュメントには、詳細な DHTML プログラミング リファレンス コンテンツ、プロパティとメソッドの使用手順、および多数の記事とサンプル プログラムが含まれています。 Microsoft の MSDN ドキュメントに頻繁にアクセスすることは、特に初心者にとって良い学習習慣です。URL はhttp://msdn.microsoft.com/ie/です。

完全な「動作」ドキュメント「font_effect.htc」の内容は次のとおりです。

////////////////////////////// 「behavior」ドキュメントの開始 // ///////////////////////////////////

//「behavior」に 4 つのマウス イベントを追加"

< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >

< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2 yellow ()" / >

< PUBLIC :ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >

//「動作」の 2 つのメソッドを定義

< PUBLIC:METHOD NAME="move_down" / >

< PUBLIC:METHOD NAME=" move_right" / >

< SCRIPT LANGUAGE="JScript" >

//フォントの色を格納する変数を定義

var font_color;

//テキストを下に移動するメソッドを定義

function move_down()

{

element.style.posTop+=2;

}

//テキストを右に移動するメソッドを定義

function move_right()

{

element.style.posLeft +=6

}

//マウスの呼び出し関数を定義 onmouseup イベント

function font2blue(){

if (event.srcElement == element)

{

=

'blue';

}

}

//マウスの呼び出し関数を定義 onmousedown イベント

関数 font2 yellow(){

if (event.srcElement == element)

{

element.style.color=' yellow'

;

//マウスの呼び出し関数を定義します onmouseover イベント

関数 glowit()

{

if (event.srcElement == element)

{

font_color=style.color

=

'white';

(色 = 赤、強度 = 2)";

}

}

//マウスの呼び出し関数を定義 onmouseout イベント

関数 noglow()

{

if (event.srcElement == element)

{

element.style.filter

=""

}

}

< /SCRIPT >

/ // ////////////////「行動」文書の終わり ////////////////////////// ///////

(4) ページ上で「behavior」を使用する方法

ページ上で「behavior」コンポーネントを使用する場合、新しい知識を学ぶ必要はありません。必要な知識はCSSスタイルシートとHTMLの設定のみです。以下の記述を参照してください。

< STYLE >

.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}

< /STYLE >

これは、私たちが作成したスタイルとは異なることがわかります。テーブル設定はまったく同じです。上記のステートメントはスタイル名「myfilter」を定義しています。その比較的新しい内容は「behavior:url(font_effect.htc);」です。「behavior」は新しい「behavior」属性の名前です。スタイルシートで「動作」がどのように設定されるか。この例では、「動作」ドキュメントがページ ファイルと同じディレクトリにあることを示します。「動作」ドキュメントが別のディレクトリに配置されている場合は、「動作」ドキュメントを追加します。このパラメータの前に「behavior」を追加すると、Behavior ドキュメントが正しく配置されるようになります。この「スタイル」の残りのコンテンツは通常のスタイル属性設定であり、必要に応じて増減できますが、この例では「グロー」フィルター効果を使用しているため、少なくとも 1 つの幅属性が設定されています。を設定する必要があります。上記のスタイル仕様により、フォント変更効果を伴う「動作」を伴う「myfilter」という名前のスタイルが得られます。ページコンポーネントの「動作」でこのスタイルを使用したい場合も、コンポーネントの属性設定領域に「スタイル名」を配置するだけで非常に簡単です。次のステートメントを参照してください。

動作によって生成されるテキスト効果< br >