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

Kayce Basques

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

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

نظرة عامة

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

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

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

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

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 لاستكشاف جميع الوظائف الملائمة.