تشغيل JavaScript في وحدة التحكّم

Kayce Basques

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

الشكل 1: وحدة التحكّم

نظرة عامة

وحدة التحكّم هي REPL، وهي اختصار لـ Read (قراءة) وEvaluate (تقييم) وPrint (طباعة) وLoop (حلقة). يقرأ هذا البرنامج الترميز JavaScript الذي تكتبه فيه، ويُقيّم الرمز البرمجي، ويطبع نتيجة التعبير، ثم يعود إلى الخطوة الأولى.

إعداد أدوات مطوري البرامج

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

1. اضغط على Command+Option+J (نظام التشغيل Mac) أو Control+Shift+J (نظام التشغيل Windows أو Linux أو ChromeOS) لفتح وحدة التحكّم هنا في هذه الصفحة.

   

   الشكل 2: هذا الدليل التعليمي على اليسار، وأدوات مطوّري البرامج على اليمين.

عرض JavaScript أو DOM للصفحة وتغييرهما

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

1. لاحظ النص الموجود في الزر أدناه.

   مرحبًا بالجميع

2. اكتب document.getElementById('hello').textContent = 'Hello, Console!' في وحدة التحكّم ثم اضغط على مفتاح Enter لتقييم التعبير. لاحظ كيف يتغير النص داخل الزر.

   

   الشكل 3 شكل وحدة التحكّم بعد تقييم التعبير أعلاه

   سيظهر لك الرمز "Hello, Console!" أسفل الرمز الذي قيّمته. تذكَّر الخطوات الأربع لواجهة REPL: القراءة، والتقييم، والطباعة، والحلقة. بعد تقييم التعليمة البرمجية، تطبع REPL نتيجة التعبير. وبالتالي، يجب أن تكون السمة "Hello, Console!" ناتجة عن تقييم document.getElementById('hello').textContent = 'Hello, Console!'.

تشغيل رمز JavaScript عشوائي غير مرتبط بالصفحة

في بعض الأحيان، تحتاج إلى مساحة اختبار رموز حيث يمكنك اختبار بعض الرموز أو تجربة ميزات JavaScript جديدة لا تعرفها. وتعدّ "وحدة تحكّم Google" المكان المثالي لإجراء هذه الأنواع من التجارب.

1. اكتب 5 + 15 في وحدة التحكّم. ستظهر النتيجة 20 أسفل تعبيرك (ما لم يستغرق تعبيرك وقتًا طويلاً جدًا للتقييم).
2. اضغط على Enter لتقييم التعبير. تطبع وحدة التحكم نتيجة التعبير أسفل التعليمة البرمجية. يوضّح الشكل 4 أدناه كيف يجب أن تبدو وحدة التحكّم بعد تقييم هذا التعبير.

3. اكتب الرمز التالي في وحدة التحكّم. حاوِل كتابته حرفًا تلو الآخر بدلاً من نسخه ولصقه.

   function add(a, b=20) {
     return a + b;
   }
   

   راجِع تحديد القيم التلقائية لوسيطات الدوال إذا لم تكن تعرف بنية b=20.

4. الآن، استدِع الدالة التي حدّدتها للتو.

   add(25);
   

   

   الشكل 4 شكل وحدة التحكّم بعد تقييم التعبيرات أعلاه

   يتم تقييم add(25) على أنّه 45 لأنّه عند استدعاء الدالة add بدون وسيطة ثانية، b التلقائية هي 20.

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

الخطوات التالية

اطّلِع على تشغيل JavaScript لاستكشاف المزيد من الميزات المتعلّقة بتشغيل JavaScript في وحدة التحكّم.

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

تتيح Console أيضًا مجموعة من محدّدات التنسيق. يمكنك الاطّلاع على تنسيق الرسائل ونمطها في وحدة التحكّم للتعرّف على جميع طرق تنسيق رسائل وحدة التحكّم ونمطها.

بالإضافة إلى ذلك، تتضمّن وحدة التحكّم أيضًا مجموعة من الوظائف الملائمة التي تسهّل التفاعل مع الصفحة. على سبيل المثال:

• بدلاً من كتابة document.querySelector() لاختيار عنصر، يمكنك كتابة $(). استُوحيت هذه البنية من jQuery، ولكنها ليست jQuery في الواقع. إنه مجرد عنوان بديل ل document.querySelector().
• debug(function) تُحدِّد بشكلٍ فعّال نقطة توقُّف في السطر الأول من تلك الدالة.
• تعرِض keys(object) صفيفًا يحتوي على مفاتيح العنصر المحدّد.

يُرجى الاطّلاع على مرجع واجهة برمجة التطبيقات لـ Console Utilities لاستكشاف جميع الوظائف الملائمة.