كيفية فصل جافا سكريبت في صفحة الويب الخاصة بك

عندما تكتب JavaScript للمرة الأولى ، فإن أسهل طريقة لإعداده هي تضمين كود JavaScript مباشرة في صفحة الويب بحيث يكون كل شيء في مكان واحد أثناء اختباره حتى تعمل حق. وبالمثل ، إذا كنت تقوم بإدخال برنامج نصي مكتوب مسبقًا في موقع الويب الخاص بك ، فقد تخبرك الإرشادات بتضمين أجزاء أو كل البرنامج النصي في صفحة الويب نفسها.

هذا مناسب لإعداد الصفحة وجعلها تعمل بشكل صحيح في المقام الأول ولكن بمجرد أن تعمل صفحتك بالطريقة التي تريدها ، ستتمكن من قم بتحسين الصفحة عن طريق استخراج JavaScript في ملف خارجي حتى لا يتم تشويش محتوى صفحتك في HTML بعناصر غير محتوى مثل جافا سكريبت.

إذا قمت فقط بنسخ واستخدام جافا سكريبتس المكتوبة من قبل أشخاص آخرين ، فقد تكون إرشاداتهم حول كيفية إضافة البرنامج النصي الخاص بهم إلى صفحتك قد أدت إلى وجود قسم كبير أو أكثر من الأقسام جافا سكريبت مضمن بالفعل في صفحة الويب الخاصة بك ولا تعلمك تعليماتهم كيف يمكنك نقل هذا الرمز من صفحتك إلى ملف منفصل ولا يزال لديك جافا سكريبت عمل. لا تقلق ، لأنه بغض النظر عن كود JavaScript الذي تستخدمه في صفحتك ، يمكنك نقل JavaScript بسهولة خارج صفحتك وإعدادها كملف منفصل (أو ملفات إذا كان لديك أكثر من قطعة واحدة من JavaScript مضمن في الصفحة). عملية القيام بذلك هي نفسها دائمًا ويتم توضيحها بشكل أفضل مع مثال.

دعونا نلقي نظرة على كيفية ظهور جزء من جافا سكريبت عندما يكون مضمنًا في صفحتك. سيكون رمز JavaScript الفعلي مختلفًا عن ذلك الموضح في الأمثلة التالية ولكن العملية هي نفسها في كل حالة.

يجب أن يبدو JavaScript مضمنًا كأنه أحد الأمثلة الثلاثة المذكورة أعلاه. بطبيعة الحال ، سيكون رمز JavaScript الفعلي مختلفًا عن ذلك الموضح ولكن قد يتم تضمين JavaScript في الصفحة باستخدام إحدى الطرق الثلاث المذكورة أعلاه. في بعض الحالات ، قد يستخدم الرمز الخاص بك قديمًا لغة = "جافا سكريبت" بدلا من اكتب = "نص / جافا سكريبت" في هذه الحالة ، قد ترغب في تحديث التعليمات البرمجية الخاصة بك لتبدأ مع استبدال سمة اللغة بالنوع الأول.

قبل أن تتمكن من استخراج JavaScript في ملفها الخاص ، تحتاج أولاً إلى تحديد الشفرة المراد استخراجها. في الأمثلة الثلاثة المذكورة أعلاه ، هناك سطرين من شفرة JavaScript الفعلية المراد استخراجهما. من المحتمل أن يحتوي البرنامج النصي الخاص بك على المزيد من الأسطر ولكن يمكن تحديده بسهولة لأنه سيحتل نفس المكان داخل صفحتك مثل سطري JavaScript لقد أبرزنا في الأمثلة الثلاثة المذكورة أعلاه (الأمثلة الثلاثة تحتوي على نفس سطرين جافا سكريبت ، إنها فقط الحاوية من حولها التي هي قليلا مختلف).

1. أول ما عليك فعله لاستخراج JavaScript فعليًا في ملف منفصل هو فتح محرر نص عادي والوصول إلى محتوى صفحة الويب الخاصة بك. ستحتاج بعد ذلك إلى تحديد موقع جافا سكريبت المضمّن الذي سيُحاط بأحد صيغ الكود الموضحة في الأمثلة أعلاه.
2. بعد تحديد رمز JavaScript ، يلزمك تحديده ونسخه إلى الحافظة الخاصة بك. مع المثال أعلاه ، يتم تمييز الرمز الذي سيتم تحديده ، فلن تحتاج إلى تحديد علامات البرنامج النصي أو التعليقات الاختيارية التي قد تظهر حول رمز JavaScript الخاص بك.
3. افتح نسخة أخرى من محرر النص العادي (أو علامة تبويب أخرى إذا كان المحرر الخاص بك يدعم فتح أكثر من ملف في وقت واحد) وتجاوز محتوى JavaScript هناك.
4. حدد اسم ملف وصفي لاستخدامه في ملفك الجديد واحفظ المحتوى الجديد باستخدام اسم الملف هذا. باستخدام رمز المثال ، يكون الغرض من البرنامج النصي هو الخروج من الإطارات بحيث يمكن أن يكون الاسم المناسب framebreak.js.
5. لذا لدينا الآن JavaScript في ملف منفصل نعود إلى المحرر حيث لدينا محتوى الصفحة الأصلي لإجراء التغييرات هناك لربط النسخة الخارجية من البرنامج النصي.
6. كما لدينا الآن البرنامج النصي في ملف منفصل ، يمكننا إزالة كل شيء بين علامات البرنامج النصي في المحتوى الأصلي لدينا بحيث بطاقة شعار.
7. الخطوة الأخيرة هي إضافة سمة إضافية إلى علامة البرنامج النصي التي تحدد أين يمكن العثور على JavaScript الخارجي. نحن نفعل هذا باستخدام src = "اسم الملف" ينسب. باستخدام مثال البرنامج النصي الخاص بنا ، سنحدد src = "framebreak.js".
8. المضاعفات الوحيدة لذلك هي إذا قررنا تخزين JavaScripts الخارجية في مجلد منفصل عن صفحات الويب التي تستخدمها. إذا قمت بذلك ، فأنت بحاجة إلى إضافة المسار من مجلد صفحة الويب إلى مجلد JavaScript أمام اسم الملف. على سبيل المثال ، إذا تم تخزين JavaScripts في ملف شبيبة مجلد داخل المجلد الذي يحمل صفحات الويب لدينا سوف نحتاج src = "js / framebreak.js"

إذن كيف يبدو رمزنا بعد فصل JavaScript إلى ملف منفصل؟ في حالة مثال JavaScript الخاص بنا (على افتراض أن JavaScript و HTML موجودان في نفس المجلد) فإن HTML الخاص بنا في صفحة الويب يقرأ الآن:

لدينا أيضًا ملف منفصل يسمى framebreak.js يحتوي على:

إذا (top.location! = self.location) top.location = self.location؛

سيكون اسم الملف ومحتوى الملف مختلفين كثيرًا عن ذلك لأنك قد قمت باستخراجه أيا كان JavaScript مضمنًا في صفحة الويب الخاصة بك ومنح الملف اسمًا وصفيًا بناءً على ما نعم هو كذلك. ستكون العملية الفعلية لاستخراجها هي نفسها على الرغم من الخطوط التي تحتوي عليها.

ماذا عن هذين الخطين الآخرين في كل من المثالين الثاني والثالث؟ حسنًا ، الغرض من هذه السطور في المثال الثاني هو إخفاء JavaScript من Netscape 1 و Internet مستكشف 2 ، أي من أي شخص يستخدم أي أكثر ، وبالتالي ليست هناك حاجة حقا هذه الخطوط في الأول مكان. يؤدي وضع الشفرة في ملف خارجي إلى إخفاء الشفرة من المتصفحات التي لا تفهم علامة النص بشكل أكثر فعالية من إحاطةها بتعليق HTML على أي حال. يتم استخدام المثال الثالث لصفحات XHTML لإعلام المدققين بأنه يجب التعامل مع JavaScript كمحتوى للصفحة وليس للتحقق من صحته بتنسيق HTML (إذا كنت تستخدم نموذج HTML بدلاً من XHTML ، فإن المدقق يعرف هذا بالفعل وهكذا فإن هذه العلامات ليست كذلك بحاجة). مع وجود جافا سكريبت في ملف منفصل ، لم يعد هناك أي جافا سكريبت في الصفحة يتم تخطيها بواسطة المدققين ، وبالتالي لم تعد هناك حاجة إلى هذه الخطوط.

واحدة من أكثر الطرق المفيدة التي يمكن من خلالها استخدام جافا سكريبت لإضافة وظائف إلى صفحة الويب هي إجراء نوع من المعالجة استجابة لإجراء من قِبل زائرك. الإجراء الأكثر شيوعًا الذي تريد الرد عليه سيكون عندما ينقر الزائر على شيء ما. يسمى معالج الأحداث الذي يسمح لك بالرد على الزائرين بالنقر على شيء ما عند النقر.

عندما يفكر معظم الناس أولاً في إضافة معالج أحداث onclick إلى صفحة الويب الخاصة بهم ، فإنهم يفكرون على الفور في إضافته إلى بطاقة شعار. هذا يعطي قطعة من التعليمات البرمجية التي غالباً ما تبدو:

هذا ال خطأ طريقة لاستخدام onclick ما لم يكن لديك عنوان حقيقي ذو معنى في سمة href بحيث يتم نقل الأشخاص الذين ليس لديهم جافا سكريبت في مكان ما عند النقر على الرابط. يتجاهل الكثير من الأشخاص أيضًا "إرجاع خطأ" من هذا الرمز ، ثم يتساءلون لماذا يتم تحميل الجزء العلوي من الصفحة الحالية دائمًا بعد تشغيل البرنامج النصي (وهو ما يقوله href = "#" للصفحة أن تفعل ما لم يتم إرجاع false من جميع معالجات الأحداث. بالطبع ، إذا كان لديك شيء ذي معنى كوجهة الارتباط ، فقد ترغب في الذهاب إلى هناك بعد تشغيل رمز onclick ولن تحتاج بعد ذلك إلى "return false".

ما لا يدركه الكثير من الأشخاص هو أنه يمكن إضافة معالج الأحداث onclick إلى أي علامة HTML في صفحة الويب للتفاعل عندما ينقر زائرك على هذا المحتوى. لذلك ، إذا كنت تريد تشغيل شيء ما عندما ينقر الأشخاص على صورة ، فيمكنك استخدامها:

إذا كنت ترغب في تشغيل شيء ما عندما ينقر الأشخاص على بعض النصوص ، يمكنك استخدام:

بعض النصوص

بالطبع ، هذه لا تعطي فكرة مرئية تلقائية بأنه سيكون هناك استجابة إذا نقر الزائر عليها الطريقة التي يعمل بها الرابط ، لكن يمكنك إضافة فكرة مرئية بسهولة كافية عن طريق تصميم الصورة أو امتدادها بشكل مناسب.

الشيء الآخر الذي يجب ملاحظته حول هذه الطرق لإرفاق معالج حدث onclick هو أنها لا تتطلب "return false" لأنه لا يوجد إجراء افتراضي سيحدث عند النقر فوق العنصر الذي يجب أن يكون معاق.

تعد طرق ربط onclick هذه تحسينًا كبيرًا على الطريقة السيئة التي يستخدمها كثير من الناس ولكنها لا تزال بعيدة عن كونها أفضل طريقة لترميزها. تتمثل إحدى المشكلات في إضافة onclick باستخدام أي من الطرق المذكورة أعلاه في أنه ما زال يختلط JavaScript مع HTML الخاص بك. عند النقر يكون ليس سمة HTML ، إنها معالج أحداث JavaScript. على هذا النحو ، لفصل JavaScript عن HTML الخاص بنا لجعل الصفحة أسهل في الحفاظ عليها ، نحتاج إلى الحصول على مرجع onclick هذا من ملف HTML إلى ملف JavaScript منفصل حيث ينتمي.

أسهل طريقة للقيام بذلك هي استبدال onclick في HTML بـ هوية شخصية من شأنها أن تجعل من السهل إرفاق معالج الحدث إلى المكان المناسب في HTML. لذلك قد يحتوي HTML الخاص بنا الآن على أحد هذه العبارات:

 بعض النصوص

يمكننا بعد ذلك ترميز JavaScript في ملف JavaScript منفصل مرتبط إما في أسفل نص الصفحة أو التي هي في رأس الصفحة والتي يوجد بها رمز لدينا داخل وظيفة تسمى نفسها بعد انتهاء الصفحة من التحميل. يبدو جافا سكريبت الخاص بنا لإرفاق معالجات الأحداث كما يلي:

document.getElementById ('img1'). onclick = dosomething؛ document.getElementById ('sp1'). onclick = dosomething؛

شيء واحد لملاحظة. ستلاحظ أننا كتبنا دائمًا onclick بالكامل بأحرف صغيرة. عند ترميز العبارة في HTML الخاص بهم ، سترى بعض الأشخاص يكتبونها كـ onClick. هذا خطأ لأن أسماء معالجات أحداث JavaScript كلها صغيرة ولا يوجد معالج مثل onClick. يمكنك التخلص منه عندما تقوم بتضمين JavaScript داخل علامة HTML الخاصة بك مباشرةً لأن HTML ليس حساسًا لحالة الأحرف وسيعمل المتصفح على تعيينه على الاسم الصحيح لك. لا يمكنك التخلص من الأحرف الكبيرة غير الصحيحة في جافا سكريبت نفسها لأن JavaScript حساس لحالة الأحرف ولا يوجد شيء في JavaScript مثل onClick.

يعد هذا الرمز تحسينًا كبيرًا مقارنة بالإصدارات السابقة لأننا نربط الآن الحدث بالعنصر الصحيح في HTML الخاص بنا ولدينا JavaScript منفصل تمامًا عن HTML. يمكننا تحسين هذا على الرغم من ذلك.

المشكلة الوحيدة المتبقية هي أنه لا يمكننا إرفاق معالج حدث onclick واحد إلا بعنصر معين. إذا احتجنا في أي وقت إلى إرفاق معالج أحداث onclick مختلف لنفس العنصر ، فلن يتم إرفاق المعالجة المرفقة سابقًا بهذا العنصر. عندما تقوم بإضافة مجموعة متنوعة من البرامج النصية المختلفة إلى صفحة الويب الخاصة بك لأغراض مختلفة ، يكون هناك على الأقل احتمال أن اثنين أو أكثر منهم قد ترغب في توفير بعض المعالجة ليتم تنفيذها عندما يكون العنصر نفسه النقر على. الحل الفوضوي لهذه المشكلة هو تحديد مكان نشوء هذا الموقف والجمع بين المعالجة التي يجب استدعاؤها معًا لوظيفة تؤدي كل المعالجة.

في حين أن مثل هذه الاشتباكات تكون أقل شيوعًا مع onclick مقارنةً مع onload ، إلا أن الاضطرار إلى تحديد الاشتباكات مقدمًا والجمع بينها معًا ليس هو الحل الأمثل. إنه ليس حلاً على الإطلاق عندما تتغير المعالجة الفعلية التي يجب إرفاقها بالعنصر بمرور الوقت بحيث يكون هناك أحيانًا شيء ما يجب القيام به ، وأحيانًا آخر ، وأحيانًا كلاهما.

أفضل حل هو التوقف عن استخدام معالج الأحداث تمامًا وبدلاً من ذلك استخدام مستمع أحداث JavaScript (على طول مع attachEvent المقابلة ل Jscript - لأن هذا هو واحد من تلك الحالات حيث JavaScript و JScript اختلف). يمكننا القيام بذلك بسهولة أكبر عن طريق إنشاء وظيفة addEvent أولاً ستضيف إما مستمعًا للحدث أو مرفقًا اعتمادًا على أي منهما تدعمهما اللغة ؛

function addEvent (el، eType، fn، uC) {if (el.addEventListener) {el.addEventListener (eType، fn، uC)؛ العودة الحقيقية ؛ } else if (el.attachEvent) {return el.attachEvent ('on' + eType، fn)؛ } }

يمكننا الآن إرفاق المعالجة التي نريد حدوثها عند النقر فوق عنصرنا باستخدام:

addEvent (document.getElementById ('spn1') ، انقر فوق ، dosomething ، خطأ) ؛

باستخدام هذه الطريقة لإرفاق الكود المطلوب معالجته عند النقر فوق عنصر ما يعني أن إجراء مكالمة أخرى إضافية لإضافة وظيفة أخرى التشغيل عند النقر فوق عنصر معين لن يحل محل المعالجة السابقة بالمعالجة الجديدة ولكنه سيسمح بدلاً من ذلك لكلا الوظيفتين يركض. لا نحتاج إلى معرفة عند الاتصال بـ addEvent ما إذا كان لدينا بالفعل دالة متصلة بـ عنصر ليتم تشغيله عند النقر فوقه ، سيتم تشغيل الوظيفة الجديدة مع الوظائف التي كانت في السابق تعلق.

إذا احتجنا إلى القدرة على إزالة الوظائف من ما يتم تشغيله عند النقر فوق أحد العناصر ، فيمكننا إنشاء ملف وظيفة deleteEvent المقابلة التي تستدعي الوظيفة المناسبة لإزالة مستمع حدث أو مرفق حدث؟

العيب الوحيد لهذه الطريقة الأخيرة لإلحاق المعالجة هو أن المتصفحات القديمة حقًا لا تدعم هذه الطرق الجديدة نسبيًا لإلحاق معالجة الأحداث بصفحة الويب. يجب أن يكون هناك عدد قليل من الأشخاص الذين يستخدمون هذه المتصفحات القديمة الآن لتجاهلهم في ما J (ava) النص الذي نكتبه بصرف النظر عن كتابة الكود الخاص بنا بطريقة لا تسبب أخطاء كبيرة الرسائل. تتم كتابة الوظيفة أعلاه حتى لا تفعل شيئًا إذا لم يتم دعم أي من الطرق التي تستخدمها. معظم هذه المتصفحات القديمة حقا لا تدعم طريقة getElementById للإشارة إلى HTML بطريقة بسيطة للغاية if (! document.getElementById) بإرجاع false؛ في الجزء العلوي من أي من وظائفك التي تفعل مثل هذه المكالمات سيكون من المناسب أيضا. بالطبع ، كثير من الناس الذين يكتبون جافا سكريبت لا يأخذون في الاعتبار أولئك الذين لا يزالون يستخدمون المتصفحات القديمة و لذلك يجب أن يعتاد هؤلاء المستخدمون على رؤية أخطاء JavaScript على كل صفحة ويب يزورونها الآن تقريبًا.

أي من هذه الطرق المختلفة التي تستخدمها لإرفاق معالجة في صفحتك ليتم تشغيلها عندما ينقر الزوار على شيء ما؟ إذا كانت الطريقة التي تقوم بها بها أقرب إلى الأمثلة الموجودة في أعلى الصفحة من تلك الأمثلة الموجودة في أسفل الصفحة ، فربما تكون الوقت الذي فكرت في تحسين الطريقة التي تكتب بها عملية onclick الخاصة بك لاستخدام واحدة من أفضل الطرق المقدمة في الأسفل الصفحة.

عند النظر إلى رمز مستمع الأحداث عبر المستعرض ، ستلاحظ وجود معلمة رابعة أطلقنا عليها جامعة كاليفورنيا، والتي ليست واضحة من الوصف المسبق.

تحتوي المتصفحات على ترتيبين مختلفين يمكنهم من خلالها معالجة الأحداث عند تشغيل الحدث. يمكنهم العمل من الخارج إلى الداخل من

• uC = صحيح للمعالجة أثناء مرحلة الالتقاط
• uC = خطأ في المعالجة أثناء مرحلة الفقاعة.

لذلك ، حيث توجد عدة علامات أخرى ملفوفة حول العلامة التي تم تشغيل الحدث عليها في مرحلة الالتقاط ، تبدأ أولاً بالعلامة الخارجية وتتحرك فيها نحو الذي أثار الحدث وبعد ذلك بمجرد معالجة العلامة التي تمت معالجتها ، فإن مرحلة الفقاعة تعكس العملية وتعود للخارج مرة أخرى.

دائمًا ما يقوم Internet Explorer ومعالجات الأحداث التقليدية بمعالجة مرحلة الفقاعة وأبداً مرحلة الالتقاط ، لذا دائمًا ما يبدأون بالعلامة الأكثر تحديدًا والعمل بالخارج.

لذلك مع معالجات الأحداث:

XX