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

Kayce Basques

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

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

نظرة عامة

Console هي REPL اختصارًا لـ "القراءة" و"التقييم" و"الطباعة" و"التكرار". حيث يقرأ JavaScript الذي تكتبه، ويقيّم الرمز الخاص بك، ويطبع نتيجة تعبيرك، ثم يعود مرة أخرى إلى الخطوة الأولى.

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

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

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

   

   الشكل 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 جديدة لست على دراية بها. وتُعد وحدة التحكم مكانًا مثاليًا لهذه الأنواع من التجارب.

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 للحصول على برنامج تعليمي تفاعلي.

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

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

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

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