تعلم البرمجة باستخدام JavaScript


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


الصفحة السابقة
لماذا لا تعمل ؟!

عندما يحدث خطأ ما في مشروعك ، قد يكون من الصعب معرفة ما حدث. إليك بعض التقنيات التي آمل أن تساعدك في تصحيح الأمور!

اعرض في وحدة التحكم



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


const getWordCount = (stringToTest) => {

 

const wordArray = stringToTest.split('');



return wordArray.length;



}
 
لسبب ما ، ترجع هذه الوظيفة قيمًا غريبة. دعنا نستخدم شاشة وحدة التحكم لمعرفة ما يحدث:

const getWordCount = (stringToTest) => {

 

const wordArray = stringToTest.split('');



console.log("Word array in getWordCount: ");



console.log(wordArray);



return wordArray.length;



}
 
الآن في الاستدعاء التالي نحصل على النتيجة التالية على وحدة التحكم:

getWordCount('I am a fish');

 

/* تظهر وحدة التحكم:

 

"Word array in getWordCount:"

 

["I", " ", "a", "m", " ", "a", " ", "f", "i", "s", "h"]

 

*/
 
بدلاً من تقسيم السلسلة إلى كلمات ، فإنها تقسمها إلى أحرف! إن إلقاء نظرة فاحصة على الوظيفة يظهر خطأ في الاتصال    split  : يجب أن يكون    stringToTest.split('')   ، وليس    stringToTest.split('')  .

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

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

استخدم أدوات المطور

لكتابة JavaScript لمواقع الويب ، يمكنك استخدام أدوات المطور المضمنة في المتصفحات الأساسية الأربعة: Chrome و Firefox و Safari و Edge . يحتوي كل متصفح على نظام يسمح لك بإضافة نقاط التوقف خطوة بخطوة إلى التعليمات البرمجية الخاصة بك. عندما يصل المتصفح إلى نقطة توقف في التعليمات البرمجية الخاصة بك ، فإنه يوقف التنفيذ مؤقتًا ، مما يسمح لك بالمرور عبر سطر التنفيذ بعد سطر ، والتحقق من قيم المتغيرات في كل خطوة. يمكنك حتى تجاهل بعض أجزاء التعليمات البرمجية إذا كنت تريد أن ترى كيف يتفاعل تطبيقك معها.

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

عرض وحدة التحكم على ما يرام ، والمصححات أفضل ، ولكن عندما يفشل كل شيء آخر ، هناك حل نهائي واحد.

التصحيح باستخدام بطة بلاستيكية


JavaScript
يكون كل شيء سيئا ، تحدث إلى البطة!

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

على الرغم من أن هذا القسم مضحك بعض الشيء ، إلا أن التفكير في الكود الخاص بك ، بصوت عالٍ وبعبارات الشخص العادي ، يمكن أن يكون مفيدًا في تصحيح الأخطاء والعوملة!

التدرب على CONSOLE.LOG

JavaScript
من المهم معرفة كيفية استخدام Consoles.log وتحليل المتغيرات المختلفة بشكل صحيح. الهدف هو فهم الخطأ المنطقي الذي يسبب القلق.

انتقل إلى CodePen على هذا العنوان. يهدف الكود إلى تحويل السنوات إلى أشهر (في عام ، قبل 12 شهرًا). إذا أدخلنا 10 سنوات في حقل السنة وقمنا بالنقر فوق تحويل ، فسننتهي بجملة تخبرنا أنه في غضون 10 سنوات سيكون هناك 80 شهرًا ، وهذا خطأ لأن الإجابة الصحيحة هي 120 شهرًا.

يتم حساب الأشهر في السطر 25 ، ونريد أن نفهم الخطأ في الحساب.

مهمتك هنا هي جعل console.log في السطور 27 إلى 31 لتحليل المتغيرات المستخدمة لحساب السطر 25. بعد التحليل ، ستتمكن من فهم الخطأ وإجراء التصحيح اللازم.

الحل المقترح


في السطر 28 نضيف الكود التالي:


console.log('annee', annee);

console.log('params', params);
 
والذي سيعطي في وحدة التحكم ، إذا قمنا بمحاكاة تحويل للقيمة 10:

> annee 10

> params (20) [20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
 
نستنتج أن قيمة   annee  متسقة. فيما يتعلق   params  ، نلاحظ أنها مصفوفة ذات قيمة تتراوح من 20 إلى 1. في حساباتنا ، نريد استرداد قيمة المصفوفة التي تساوي 12. نجد هذه القيمة في الفهرس 8.

إذا استأنفنا حساب الأشهر:


const mois = annee * params[12];
 
نرى أننا حصلنا على الفهرس 12 من params وليس 8. لذا نستبدل السطر 25 بما يلي:

const mois = annee * params[8];
 
الآن تطبيقنا يعطي قيم متسقة.

اختتام التمرين


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

باختصار



في هذا الفصل ، تعلمت ثلاث تقنيات مختلفة لتصحيح الأخطاء:

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