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= "onmouseover" ONEVENT="glowit()" / >
< 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)
{
element.style.color=
'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」という名前のスタイルが得られます。ページコンポーネントの「動作」でこのスタイルを使用したい場合も、コンポーネントの属性設定領域に「スタイル名」を配置するだけで非常に簡単です。次のステートメントを参照してください。
<span id="myspan" class='myfilter' >動作によって生成されるテキスト効果</span>< br >
<span class='myfilter
' >マウス ポインタの後に光る</span>
上記のステートメント Content, class='myfilter' は、私たちがよく知っているスタイル設定です。最初の「span」タグの属性にも「id」タグが定義されていますが、これは「behavior」内の「method」の呼び出しを示すために設定されています。この設定の後、「span」コンポーネントのコンテンツは、「behavior」コンポーネントの所定の効果を表示できます。
1. マウス ポインタがテキスト コンテンツ上に移動すると、テキストの周囲に赤い光る効果が生成され、テキストが白に変わります。
2. マウスボタンを押すと、文字の色が黄色に変わります。
3． マウス ボタンを離すと、テキストの色が青色に戻ります。
4. マウス ポインタがテキスト領域の外に移動すると、赤色のグロー効果が削除され、テキストは元の外観に戻ります。
また、「behavior」を定義する際に「move_down」と「move_right」という2つの「メソッド」を設定します。これら 2 つの「メソッド」を呼び出すために、2 つのボタンが定義されています:
< button onclick="myspan.move_right();" >テキストの最初の行を右に移動します</button >< br >
< button onclick="myspan.move_down ();" >テキストの最初の行を下に移動します</button>
ボタンの onclick イベントを使用して、これら 2 つの「メソッド」を呼び出します。以前に定義した「id」タグがコンポーネントのオブジェクト名として使用されます。「」を使用します。 myspan.move_down」を使用して「メソッド」を呼び出し、このオブジェクトを操作します。対応するボタンを押すと、最初の行のテキストが下または右に移動することがわかります。説明のためにテキストの最初の行だけが使用されていますが、実際には、対応する設定を行えば他のオブジェクトも移動できます。ページ ソース ドキュメントの完全な内容は次のとおりです。
< html >
< HEAD >
< TITLE > 動作効果のデモンストレーション < /TITLE >
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight :bold; width=180;left:0;}
< /STYLE >
< /HEAD >
< BODY >
< span id="myspan" class='myfilter' >動作によって生成されるテキスト効果</ /span >< br >
< span class=' myfilter' >マウス ポインタの後に光ります< /span >< br >
< span class='myfilter' >同時にテキストが白になります< /span >< br >
< span class='myfilter ' >マウスを押すとテキストが黄色になります </ /span >< br >
< span class='myfilter' >マウスを離すとテキストが青になります</ /span >< br >
< span class='myfilter' >マウスを離すとテキストは元の状態に戻ります</span >< br >
< button onclick="myspan.move_right();" >テキストの最初の行を右に移動します</ /button >< br >
< button onclick="myspan.move_down();" >テキストの最初の行を下に移動します</ /button >
</ /BODY >
</ /html >
上記の簡単な説明から、簡単に結合できることがわかります。 1 つの「動作」で複数のテキスト変更効果を同時に実現し、ページ コンポーネントに関連する簡単な「スタイル」設定を通じて任意に変更することができ、「動作」コンポーネントの利点と強力な機能が反映されます。 「動作」コンポーネントは、ページ内だけでなく、同じサイト上のすべてのページで再利用できます。想像してみてください。上記の効果を実現するために「動作」を使用しない場合、ページ内で事前に決定された一連の関数を呼び出して同じ機能を実行することはできますが、テキスト効果を使用するページ内の各要素には 4 つのマウス イベントが存在することになります。同じ効果を複数のページで使用する場合、呼び出される関数も各ページで繰り返し設定する必要があります。比べてみると、どちらが優れていてどちらが劣っているかは明らかです。したがって、「動作」コンポーネントを使用すると、シンプルで効率的、多用途で保守が容易なページを作成できます。この記事の例は、読者が「動作」プログラミングを一般的に理解し、これに基づいて必要な「動作」コンポーネントを作成できるように、「動作」コンポーネントの作成と使用のプロセスを説明することのみを目的としています。または、個人的なニーズを満たすために直接引用することもできます。これは、「コンポーネントの共有」の概念が「動作」開発者の本来の目的でもあるためです。最後に、この記事が「他の人にインスピレーションを与える」という目的を果たし、読者が DHTML Web プログラミングの素晴らしい世界に入ることができることを願っています。