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

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

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

نظرة عامة

وحدة التحكم هي REPL، وهي اختصار لـ "قراءة" و"تقييم" و"طباعة" و"تكرار". يقرأ 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 جديدة لا تعرفها. تُعد وحدة التحكم مكانًا مثاليًا لهذه الأنواع من التجارب.

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