الفهرس



تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: تصحيح كود jQuery


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

تصحيح مع وظيفة ALERT ()


في أي وقت ، يمكنك استخدام وظيفة JavaScript alert() لعرض مربع رسالة تظهر فيه قيمة متغير JavaScript . هذه هي أبسط طريقة لاختبار قيمة المتغير في الموعد المحدد. على سبيل المثال ، ستخبرك العبارة التالية بقيمة المتغيرات x و y :

alert('x = ' + x + ', y = ' + y); 
... والتي يمكن أن تعطي الشكل التالي.
jQuery web
يتم عرض قيمة المتغيرات x و y في مربع رسالة
إذا لم يصل الكود الخاص بك مطلقًا إلى عبارة معينة ، فيمكنك استخدام الوظيفة alert() لمعرفة العبارة التي تم تنفيذها مؤخرًا:

alert(هنا : 01');
// واحد أو أكثر من التعليمات
alert(هنا : 02');
// واحد أو أكثر من التعليمات
alert(هنا : 03');
// واحد أو أكثر من التعليمات
etc. 
عن طريق نقل هذه التعليمات في التعليمات البرمجية الخاصة بك ، يمكنك معرفة أي التعليمات على خطأ بسرعة.

حاول وامسك TRY/CATCH


عندما تقوم بتطوير كود "حساس" بشكل خاص ، بمعنى أنك تشك في أصل الأخطاء ، يمكنك وضعها في بنية try … catch :

try
{
  // تعليمات حساسة
}
catch(err)
{
  // إدارة الأخطاء
} 
مثال صغير يوضح لك كيفية استخدام هذه التعليمات. في التعليمة البرمجية التالية ، alort() لا تعد الوظيفة جزءًا من لغة JavaScript وليست طريقة jQuery . منذ أن تم وضع البيان التجريبي تحت إشراف واحد try، catch سيتم تنفيذ التعليمات التالية للكلمة .

var message='';
try
{
  alort(' message');
}
catch(err)
{
  message='وقع خطأ ما.\n\n';
  message+='وصف : ' + err.message + '\n\n';
  message+=اضغط Ok لتتابع.';
  alert(message)
} 
في هذا المثال ، كما هو موضح في الشكل التالي ، يعرض مربع رسالة الخاصية err.message ، مع الإشارة إلى سبب الخطأ.
jQuery web
الكلمة الأساسية "alort" غير موجودة

التقاط كل الأخطاء


من خلال توسيع هذه التقنية ، من الممكن عرض مربع رسالة لكل من الأخطاء التي قد تحدث في التعليمات البرمجية. فيما يلي تعليمات الاستخدام:

function gestionErreurs(err)
{
  alert('Erreur : \n' + err);
  return true;
}
window.onerror = gestionErreurs; 
عند حدوث خطأ في كود JavaScript / jQuery ، يتم تنفيذ الوظيفة . gestionErreurs() ثم يتم عرض مربع رسالة يصف الخطأ.

تصحيح مع FIREBUG


Firebug هي أداة يجب أن تكون لدى جميع مطوري jQuery . كما يوحي اسمها ، تم تطويرها لمتصفح فايرفوكس. فيما يلي بعض إمكانياتها:
  • فحص وتحرير كود HTML و CSS ؛
  • مراقبة نشاط الشبكة ، لتحديد كتلة التعليمات البرمجية التي تتعاقب وقت تحميل الصفحة ؛
  • تصحيح الكود JavaScript / jQuery .
من الواضح أن هذا الاحتمال الثالث هو ما يهمك قبل كل شيء. اقرأ بسرعة وستعرف كيفية المتابعة.
من الواضح أن تثبيت Firefox أمر ضروري.
قم بتنزيل وتثبيت FIREBUG
اضغط على Altمفتاح لوحة المفاتيح وحرره لعرض نظام قائمة Firefox إذا لم يكن معروضًا بالفعل. انقر Tools، أشر ، Web Developer وانقر Get other tools . يتم عرض صفحة الوحدات النمطية لفايرفوكس ، كما في الشكل التالي.
jQuery web
أمام Firebug ، انقر فوق Add to Firefox . بعد لحظات ، يسأل مربع حوار لتأكيد رغبتك في تثبيت Firebug . انقر فوق Install now . بمجرد تثبيت وحدة Firebug ، تظهر أيقونة جديدة في الزاوية اليمنى العليا من نافذة Firefox ، كما هو موضح في الشكل التالي.
jQuery web
يتيح هذا الرمز (والقائمة المرتبطة) الوصول إلى Firebug وأوامره الرئيسية
استخدم وحدة التحكم
تعد وظيفة JavaScript alert() مفيدة للغاية ، ولكن لها عيوب في عرض مربع رسالة يجب على المستخدم إغلاقه لمتابعة تنفيذ التعليمات البرمجية. باستخدام وحدة التحكم في Firefox ، التي يمكن الوصول إليها عبر علامة التبويب Console Firebug ، ستتمكن من عرض البيانات كما هو الحال مع الوظيفة alert()، ولكن دون مقاطعة تنفيذ التعليمات البرمجية. لهذا ، سوف تستخدم وظيفة JavaScript log() .
في المثال التالي ، يتم استخدام الدالة log() لمعرفة القيم المختلفة المحسوبة في المتغير y :

for (x = (Math.PI)/2; x < (4*Math.PI); x = x+.2)
{
  y = (Math.abs(Math.sin(x)))/x;
  window.console.log('y = ' + y);
  …
} 
من خلال تحديد علامة التبويب Console في وحدة Firebug ، تحصل على المعلومات التي تريدها ، كما هو مبين في الشكل التالي.
jQuery web
تم عرض القيم المختلفة في وحدة التحكم
تعيين نقطة توقف
افتح صفحة الويب التي تريد تصحيحها في Firefox ، ثم انقر فوق أيقونة Firebug . يتم عرض جزء جديد في الجزء السفلي من النافذة. في هذا الجزء ستقوم بتصحيح التعليمات البرمجية الخاصة بك.
حدد علامة التبويب Script . إذا كانت هناك رسالة تشير إلى Script تعطيل اللوحة ، فانقر فوق السهم الموجود على يسار أيقونة Firebug واختر Activate all panels من القائمة. يظهر كود JavaScript على الجانب الأيسر من جزء Firebug . انقر فوق رقم سطر لتعيين نقطة توقف. يستمر التنفيذ حتى هذا الخط ، ثم يتوقف البرنامج مؤقتًا. تظهر المزيد من المعلومات على الجانب الأيمن من جزء Firebug . يتم عرض معلومات مختلفة ، والآن عليك معرفة ما إذا كان كل شيء صحيحًا.
قيمة المتغيرات والخصائص غير المدرجة
عندما تصل إلى نقطة توقف ، يمكنك توجيه متغير أو خاصية في التعليمات البرمجية لمعرفة قيمتها. افترض أنك قمت بتعيين نقطة توقف على العبارة باتباع الطريقة keydown() ، كما في الشكل التالي. لمعرفة أي رمز ASCII للمفتاح الذي تم الضغط عليه من قبل المستخدم ، قم فقط بتوجيه الخاصية e.which .
jQuery web
لمعرفة قيمة المتغير أو خاصية ما ، قم بتوجيهها في الكود
نقطة توقف مشروطة
عند وضع نقطة توقف في حلقة ، يتم تعليق تنفيذ البرنامج عند كل تكرار للحلقة. هذا السلوك هو في بعض الأحيان مرغوب فيه ، وأحيانا لا. على سبيل المثال ، إذا كنت ترغب في تعليق التنفيذ عند حدوث حالة معينة ، فإن أسهل طريقة هي تعيين نقطة توقف مشروطة. للقيام بذلك ، انقر بزر الماوس الأيمن على رقم السطر حيث سيتم تعليق التنفيذ وأدخل الشرط السابق.
في الشكل التالي ، سيتم تعليق التنفيذ إذا كان للمتغير posX له قيمة أقل من 100.
jQuery web
تعريف نقطة توقف مشروطة
بعض اختصارات لوحة المفاتيح لمعرفتها
لاستخدام تصحيح JavaScript / jQuery بشكل صحيح في Firebug ، انظر الجدول التالي الذي يعرض بعض اختصارات لوحة المفاتيح.
الاختصار وظيفة
F8 استمر
Maj + F8 تشغيل مرة أخرى إلى نقطة توقف
F10 خطوة خطوة
F11 خطوة بخطوة
Ctrl + L انتقل إلى السطر المحدد
تعمل هذه الاختصارات فقط في علامة التبويب Script Firebug .
للحصول على نظرة عامة على جميع اختصارات لوحة المفاتيح التي يمكن استخدامها في Firebug ، راجع الصفحة المخصصة لـ Firebug .
هذه الدورة كاملة الآن. أتمنى أن تكون قد أحببت ذلك. الآن ، الأمر متروك لك للقيام بالباقي من خلال تطوير مشاريعك.