قبل إصدار متصفح Microsoft IE 5.0، كان التحدي الأكبر الذي واجه برمجة الويب هو عدم إمكانية إنشاء المكونات بسهولة لتحقيق إعادة استخدام التعليمات البرمجية ومشاركة الصفحات المتعددة. لطالما أزعجت هذه المشكلة مبرمجي صفحات الويب DHTML (HEML الديناميكية). يمكنهم فقط الاستمرار في إعادة كتابة أكواد HTML وCSS وJAVASCRIPT لتلبية الوظائف المتكررة أو المشابهة على صفحات متعددة. منذ إصدار متصفح IE 5.0، تم تحسين هذا الوضع، فقد قدم لنا طريقة جديدة لتجميع التعليمات، والتي يمكنها تغليف التعليمات البرمجية التي تنفذ وظائف محددة في مكون، وبالتالي تحقيق إعادة استخدام التعليمات البرمجية على صفحات متعددة وجعل برمجة الويب أسهل. أدخل عالما جديدا تماما. هذه التقنية الجديدة هي "السلوكيات" في DHTML التي سنتحدث عنها.
"السلوك" هو مكون بسيط وسهل الاستخدام يتضمن وظائف أو إجراءات محددة على الصفحة. عندما يتم إرفاق "سلوك" بعنصر في صفحة ويب، سيتم تغيير السلوك الأصلي للعنصر. لذلك، يمكن لمبرمجي صفحات الويب تطوير تعليمات 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 = "font2yellow ()" / >
< PUBLIC: ATTACH EVENT = "onmouseup" ONEVENT = "font2blue ()" / >
"EVENT" يتوافق مع أسماء الأحداث المطلوبة، وهي هنا: onmouseover، onmouseout، onmousedown، onmouseup. بالطبع، يمكنك إضافة أسماء أحداث أخرى لتلبية احتياجاتك الخاصة. يتوافق "ONEVENT" مع مؤشر الحدث الفردي، أي اسم الوظيفة التي يتم استدعاؤها عند تشغيل الحدث. تقوم الدالة توهج () بإنشاء توهج أحمر حول الخط. تعمل الدالة noglow() على إزالة تأثير التوهج للخط. تقوم الدالة Font2yellow() بتغيير لون الخط إلى اللون الأصفر. تقوم الدالة Font2blue() بتغيير لون الخط إلى اللون الأزرق. تعريفات جميع الأحداث الأربعة متشابهة.
(2) بعد ذلك، أضف تعريفين آخرين "للطريقة" إلى هذا "السلوك"، وتكون المحتويات كما يلي.
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
تتوافق المعلمة "NAME" مع اسم "الطريقة" المحدد. إن move_down وmove_right هما أسماء الوظائف المقابلة لـ "طرق" التحرك لأسفل ولليمين على التوالي. لاحظ أنه لا تضع قوسين "()" بعد اسم الطريقة، أي لا تكتبه مثل "move_down()". هذا غير مسموح به في صيغة تعريف "الطريقة".
(3) الخطوة التالية هي استخدام عبارات البرنامج النصي JAVASCRIPT لكتابة محتوى الوظيفة المطابق لـ "مقبض الحدث" و"الطريقة" في بيئة DHTML المألوفة لتحقيق التأثير المطلوب. يرجى الرجوع إلى البرنامج المصدر أدناه للحصول على محتوى محدد. تشير معلمة "العنصر" إلى الكائن الذي يرتبط به هذا "السلوك"، لأن "السلوك" يرتبط دائمًا بعنصر في الصفحة ويعمل من خلال هذا العنصر. البيانات الأخرى كلها محتوى برمجة DHTML، لذلك لن أقول المزيد عنها. إذا كانت لديك أية أسئلة، فيمكنك الرجوع إلى وثائق تطوير MSDN الخاصة بشركة Microsoft لمتصفح IE، والتي تحتوي على محتوى مرجعي تفصيلي لبرمجة DHTML، وتعليمات حول استخدام الخصائص والأساليب، وتحتوي على عدد كبير من المقالات وأمثلة البرامج. تعد زيارة وثائق MSDN الخاصة بـ Microsoft عادةً جيدة للتعلم، خاصة للمبتدئين. ويمكنك الحصول على أي إجابة تقريبًا تبحث عنها، وعنوان URL الخاص بها هو: http://msdn.microsoft.com/ie/ .
محتوى مستند "السلوك" الكامل "font_effect.htc" هو كما يلي:
///////////////////////////// " يبدأ مستند "السلوك" // ////////////////////////////
// أضف أربعة أحداث للماوس إلى "السلوك" "
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow ()" / >
< PUBLIC :ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
//حدد طريقتين لـ "السلوك"
< 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
function Font2yellow(){
if (event.srcElement == element)
{
element.style.color='yellow'
}
}
// تحديد وظيفة استدعاء حدث الماوس onmouseover
function glowit()
{
if (event.srcElement == element)
{
font_color=style.color
element.style.color=
'white';
(اللون = أحمر، القوة = 2)"؛
}
}
// تحديد وظيفة استدعاء حدث الماوس onmouseout
function noglow()
{
if (event.srcElement==
element)
{
element.style.filter="";
element.style.color=font_color;
}
< /SCRIPT >
/ // //////////////// نهاية وثيقة "السلوك" ////////////////////////// ////// /
(4) كيفية استخدام "السلوك" على الصفحة
لا يتطلب استخدام مكون "السلوك" في الصفحة تعلم معرفة جديدة. المعرفة المطلوبة ليست أكثر من إعدادات أوراق أنماط 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" الجديدة، وهي كيف يتم إعداد "السلوك" في ورقة الأنماط. المحتوى الموجود بين قوسين هو اسم ملف مستند "السلوك"، في هذا المثال، يشير إلى أن مستند "السلوك" موجود في نفس الدليل مثل ملف الصفحة. إذا تم وضع مستند "السلوك" في دليل آخر، فقم بإضافة "السلوك" أمام هذه المعلمة أسماء المسارات المقابلة للتأكد من إمكانية تحديد موقع مستند السلوك بشكل صحيح. بقية المحتوى في هذا "النمط" هو مجرد إعدادات سمات النمط العادية، والتي يمكن زيادتها أو تقليلها وفقًا لاحتياجاتك، ولكن في هذا المثال، بسبب استخدام تأثير مرشح "التوهج"، سمة عرض واحدة على الأقل يجب تعيين. من خلال مواصفات النمط المذكورة أعلاه، لدينا نمط يسمى: "myfilter"، والذي يأتي مع "سلوك" مع تأثير تغيير الخط. إذا كنت تريد استخدام هذا النمط مع "السلوك" على أحد مكونات الصفحة، فهو أيضًا بسيط جدًا. ما عليك سوى وضع "اسم النمط" في منطقة إعداد السمات الخاصة بالمكون، راجع البيان التالي.
تأثير النص الناتج عن السلوك< br >
يتوهج بعد مؤشر الماوس
لا يوجد شيء جديد في محتوى البيان أعلاه، class='myfilter' هو إعداد النمط الذي نعرفه. يتم تعريف علامة "id" أيضًا في سمة علامة "span" الأولى، كما سترى لاحقًا، تم تعيينها لتوضيح استدعاء "الطريقة" ضمن "السلوك". بعد هذا الإعداد، يمكن للمحتوى الموجود في مكون "الامتداد" عرض التأثير المحدد مسبقًا في مكون "السلوك":
1. عندما يتحرك مؤشر الماوس فوق محتوى النص، يتم إنتاج تأثير توهج أحمر حول النص، ويتحول النص إلى اللون الأبيض.
2. عند الضغط على زر الماوس، يتغير لون النص إلى اللون الأصفر.
3. عند رفع زر الماوس، يتغير لون النص مرة أخرى إلى اللون الأزرق.
4. عندما يتحرك مؤشر الماوس خارج منطقة النص، تتم إزالة تأثير التوهج الأحمر ويعود النص إلى مظهره الأصلي.
بالإضافة إلى ذلك، قمنا بتعيين "طريقتين" عند تعريف "السلوك"، "move_down" و"move_right". لاستدعاء هاتين "الطريقتين"، يتم تحديد زرين:
< Button onclick="myspan.move_right();" >حرك السطر الأول من النص إلى اليمين< br >
< Button onclick="myspan.move_down ();" >حرك السطر الأول من النص لأسفل
استخدم حدث onclick للزر لاستدعاء هاتين "الطريقتين". يتم استخدام علامة "id" المحددة مسبقًا كاسم كائن للمكون، استخدم " myspan.move_down" لاستدعاء "طرق" لمعالجة هذا الكائن. ويمكن ملاحظة أنه بعد الضغط على الزر المقابل، سيتحرك النص الموجود في السطر الأول إلى الأسفل أو إلى اليمين. على الرغم من أنه يتم استخدام السطر الأول فقط من النص للتوضيح، إلا أنه في الواقع، يمكنك أيضًا نقل كائنات أخرى طالما قمت بإجراء الإعدادات المقابلة. المحتوى الكامل لمستند مصدر الصفحة هو كما يلي:
< html >
< HEAD >
< TITLE > Behavior Effect Demonstration < /TITLE >
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight :bold width=180;left:0;}
< /STYLE >
< BODY >
تأثير النص الناتج عن السلوك< /span >< br >
يضيء بعد مؤشر الماوس< /span >< br >
في نفس الوقت يتحول النص إلى اللون الأبيض< br >
يتحول النص إلى اللون الأصفر بعد الضغط على الفأرة < br >
يتحول النص إلى اللون الأزرق بعد رفع الفأرة< br >
يعود النص إلى حالته الأصلية بعد تحريك الماوس بعيدًا< br >
< Button onclick="myspan.move_right();" >حرك السطر الأول من النص إلى اليمين< br >
< Button onclick="myspan.move_down();" >حرك السطر الأول من النص لأسفل
من خلال المقدمة الموجزة أعلاه، يمكننا أن نرى أنه يمكننا الجمع بسهولة تأثيرات متعددة لتغيير النص في "سلوك" واحد في نفس الوقت، وتغييره بشكل تعسفي من خلال إعدادات "النمط" البسيطة، المتعلقة بمكونات الصفحة، مما يعكس المزايا والوظائف القوية لمكونات "السلوك". يمكن إعادة استخدام مكون "السلوك" ليس فقط داخل الصفحة، ولكن أيضًا لجميع الصفحات الموجودة على نفس الموقع. فقط تخيل، إذا لم تستخدم "السلوك" لتحقيق التأثيرات المذكورة أعلاه، على الرغم من أنه يمكنك استدعاء مجموعة من الوظائف المحددة مسبقًا في الصفحة لإكمال نفس الوظيفة، فإن كل عنصر في الصفحة يستخدم تأثيرات النص سيكون له أربعة أحداث ماوس مرفق إذا تم استخدام نفس التأثير في صفحات متعددة، فيجب أيضًا تعيين الوظيفة المطلوبة بشكل متكرر في كل صفحة. بالمقارنة، من الواضح أيهما أفضل وأيهما أسوأ. لذلك، باستخدام مكونات "السلوك"، يمكنك إنشاء صفحات بسيطة وفعالة ومتعددة الاستخدامات وسهلة الصيانة. الأمثلة الواردة في هذه المقالة هي فقط لتوضيح عملية كتابة واستخدام مكونات "السلوك"، حتى يتمكن القراء من الحصول على فهم عام لبرمجة "السلوك"، وبناء على ذلك، يمكنهم إنشاء مكونات "السلوك" التي يحتاجون إليها، أو اقتباسها مباشرة لتلبية احتياجاتهم الشخصية من المكونات "السلوكية"، لأن مفهوم "مشاركة المكونات" هو أيضًا الهدف الأصلي للمطورين "السلوكيين". أخيرًا، آمل أن يخدم هذا المقال غرض "إلهام الآخرين" وتمكين القراء من الدخول إلى عالم برمجة الويب DHTML الرائع.