يوضّح لك هذا البرنامج التعليمي التفاعلي كيفية تشغيل JavaScript في أدوات مطوري البرامج في Chrome Console. راجِع مقالة بدء استخدام تسجيل الرسائل لمعرفة كيفية تسجيل الرسائل في "وحدة التحكّم". راجِع مقالة بدء الاستخدام مع تصحيح أخطاء JavaScript لمعرفة كيفية إيقاف رمز JavaScript مؤقتًا وتتبُّعه سطرًا واحدًا في كل مرة.
الشكل 1. وحدة التحكّم
نظرة عامة
وحدة التحكّم هي بيئة REPL، وهي اختصار لعبارة Read, Evaluate, Print, and Loop (القراءة والتقييم والطباعة والتكرار). تقرأ هذه البيئة رمز JavaScript الذي تكتبه فيها، وتقيِّم الرمز، وتطبع نتيجة التعبير، ثم تعود إلى الخطوة الأولى.
إعداد "أدوات مطوري البرامج"
تم تصميم هذا البرنامج التعليمي بحيث يمكنك فتح العرض التوضيحي وتجربة جميع مهام سير العمل بنفسك. عند اتّباع الخطوات بنفسك، من المرجّح أن تتذكر مهام سير العمل لاحقًا.
اضغط على Command+Option+J (في نظام التشغيل Mac) أو Control+Shift+J (في أنظمة التشغيل Windows وLinux وChromeOS) لفتح وحدة التحكّم، هنا في هذه الصفحة.
الشكل 2. هذا البرنامج التعليمي على اليمين و"أدوات مطوري البرامج" على اليسار
عرض رمز JavaScript أو نموذج العناصر في المستند (DOM) الخاص بالصفحة وتغييره
عند إنشاء صفحة أو تصحيح أخطائها، من المفيد غالبًا تشغيل عبارات في وحدة التحكّم لتغيير شكل الصفحة أو طريقة تشغيلها.
لاحظ النص في الزر أدناه.
اكتب
document.getElementById('hello').textContent = 'Hello, Console!'في وحدة التحكّم و ثم اضغط على مفتاح Enter لتقييم التعبير. لاحظ كيف يتغير النص داخل الزر.
الشكل 3. شكل "وحدة التحكّم" بعد تقييم التعبير أعلاه
يظهر النص
"Hello, Console!"أسفل الرمز الذي قيّمته. تذكَّر الخطوات الأربع لبيئة REPL: القراءة والتقييم والطباعة والتكرار. بعد تقييم الرمز، تطبع بيئة REPL نتيجة التعبير. لذلك، يجب أن تكون"Hello, Console!"هي نتيجة تقييمdocument.getElementById('hello').textContent = 'Hello, Console!'.
تشغيل رمز JavaScript عشوائي غير مرتبط بالصفحة
في بعض الأحيان، ما عليك سوى استخدام مساحة تجريبية للرموز البرمجية حيث يمكنك اختبار بعض الرموز أو تجربة ميزات JavaScript الجديدة التي لست على دراية بها. تُعد "وحدة التحكّم" مكانًا مثاليًا لهذه الأنواع من التجارب.
- اكتب
5 + 15في "وحدة التحكّم". ستظهر النتيجة20أسفل تعبيرك (إلا إذا استغرق تقييم تعبيرك وقتًا طويلاً جدًا). - اضغط على
Enterلتقييم التعبير. تطبع "وحدة التحكّم" نتيجة التعبير أسفل الرمز. يوضّح الشكل 4 أدناه كيف يجب أن تبدو "وحدة التحكّم" بعد تقييم هذا التعبير. اكتب الرمز التالي في وحدة التحكّم. حاوِل كتابته حرفًا بحرف بدلاً من نسخه ولصقه.
function add(a, b=20) { return a + b; }الآن، استدعِ الدالة التي حدّدتها للتو.
add(25);
الشكل 4. شكل "وحدة التحكّم" بعد تقييم التعبيرات أعلاه
يتم تقييم
add(25)إلى45لأنّه عند استدعاء الدالةaddبدون وسيطة ثانية،bيتم ضبط تلقائيًا على20.
لن تتمكّن من تشغيل أي رمز في جلسة "وحدة التحكّم" هذه إلى أن تعرض دالتك نتيجة. إذا استغرق ذلك وقتًا طويلاً جدًا، يمكنك استخدام إدارة المهام لإلغاء العملية الحسابية التي تستغرق وقتًا طويلاً، ولكن سيؤدي ذلك أيضًا إلى تعذُّر تحميل الصفحة الحالية وفقدان جميع البيانات التي أدخلتها.
الخطوات التالية
راجِع مقالة تشغيل JavaScript لاستكشاف المزيد من الميزات ذات الصلة بتشغيل JavaScript في "وحدة التحكّم".
تتيح لك "أدوات مطوري البرامج" إيقاف نص برمجي مؤقتًا في منتصف تنفيذه. أثناء الإيقاف المؤقت، يمكنك استخدام
وحدة التحكّم لعرض window الصفحة أو DOM وتغييرهما في تلك اللحظة. يؤدي ذلك إلى إنشاء سير عمل قوي لتصحيح الأخطاء. راجِع مقالة بدء استخدام تصحيح أخطاء JavaScript للحصول على برنامج تعليمي تفاعلي.
تتيح وحدة التحكّم أيضًا استخدام مجموعة من محدّدات التنسيق. راجِع مقالة تنسيق الرسائل وتطبيق الأنماط عليها في "وحدة التحكّم" لاستكشاف جميع طرق تنسيق رسائل "وحدة التحكّم" وتطبيق الأنماط عليها.
بالإضافة إلى ذلك، تتضمّن وحدة التحكّم أيضًا مجموعة من الدوال المريحة التي تسهّل التفاعل مع الصفحة. على سبيل المثال:
- بدلاً من كتابة
document.querySelector()لاختيار عنصر، يمكنك كتابة$(). هذا البناء مستوحى من jQuery، ولكنّه ليس jQuery فعليًا. إنّه مجرد اسم مستعار لـdocument.querySelector(). - يؤدي
debug(function)فعليًا إلى ضبط نقطة توقف في السطر الأول من هذه الدالة. - تعرض
keys(object)مصفوفة تحتوي على مفاتيح الكائن المحدّد.
راجِع مرجع واجهة برمجة تطبيقات أدوات "وحدة التحكّم" لاستكشاف جميع الدوال المريحة.