أول شيء سندرسه هو العناصر الأساسية للكود.
البيانات هي بنيات بناء الجملة والأوامر التي تنفذ الإجراءات.
لقد رأينا بالفعل عبارة alert('Hello, world!')
والتي تظهر الرسالة "مرحبًا بالعالم!".
يمكننا الحصول على العديد من العبارات في الكود الخاص بنا كما نريد. يمكن فصل العبارات بفاصلة منقوطة.
على سبيل المثال، قمنا هنا بتقسيم "Hello World" إلى تنبيهين:
تنبيه('مرحبا'); تنبيه("العالم");
عادة، تتم كتابة البيانات في أسطر منفصلة لجعل التعليمات البرمجية أكثر قابلية للقراءة:
تنبيه('مرحبا'); تنبيه("العالم");
قد يتم حذف الفاصلة المنقوطة في معظم الحالات عند وجود فاصل أسطر.
وهذا من شأنه أن يعمل أيضا:
تنبيه ("مرحبًا") تنبيه ("العالم")
هنا، يفسر JavaScript فاصل الأسطر على أنه فاصلة منقوطة "ضمنية". وهذا ما يسمى الإدراج التلقائي للفاصلة المنقوطة.
في معظم الحالات، يشير السطر الجديد إلى فاصلة منقوطة. لكن "في معظم الحالات" لا تعني "دائماً"!
هناك حالات لا يعني فيها السطر الجديد فاصلة منقوطة. على سبيل المثال:
تنبيه (3+ 1 + 2)؛
يخرج الكود 6
لأن JavaScript لا يقوم بإدراج الفواصل المنقوطة هنا. من الواضح بديهيًا أنه إذا كان السطر ينتهي بعلامة الجمع "+"
، فهو "تعبير غير مكتمل"، لذا فإن الفاصلة المنقوطة ستكون غير صحيحة. وفي هذه الحالة، يعمل هذا على النحو المنشود.
ولكن هناك حالات "تفشل" فيها JavaScript في افتراض الفاصلة المنقوطة حيث تكون هناك حاجة إليها بالفعل.
من الصعب جدًا العثور على الأخطاء التي تحدث في مثل هذه الحالات وإصلاحها.
مثال على الخطأ
إذا كنت ترغب في رؤية مثال ملموس لمثل هذا الخطأ، فراجع هذا الرمز:
تنبيه("مرحبا"); [1، 2].forEach(alert);
لا داعي للتفكير في معنى الأقواس []
و forEach
حتى الآن. سندرسهم لاحقا. في الوقت الحالي، تذكر فقط نتيجة تشغيل الكود: فهي تظهر Hello
، ثم 1
، ثم 2
.
الآن دعونا نزيل الفاصلة المنقوطة بعد alert
:
تنبيه ("مرحبًا") [1، 2].forEach(alert);
الفرق مقارنة بالكود أعلاه هو حرف واحد فقط: اختفت الفاصلة المنقوطة في نهاية السطر الأول.
إذا قمنا بتشغيل هذا الرمز، فسيتم عرض Hello
الأول فقط (وهناك خطأ، قد تحتاج إلى فتح وحدة التحكم لرؤيته). لم تعد هناك أرقام بعد الآن.
وذلك لأن JavaScript لا تفترض وجود فاصلة منقوطة قبل الأقواس المربعة [...]
. لذلك، يتم التعامل مع الكود الموجود في المثال الأخير على أنه عبارة واحدة.
وإليك كيف يرى المحرك ذلك:
تنبيه("مرحبا")[1, 2].forEach(alert);
يبدو غريبا، أليس كذلك؟ مثل هذا الدمج في هذه الحالة هو مجرد خطأ. نحتاج إلى وضع فاصلة منقوطة بعد alert
حتى يعمل الكود بشكل صحيح.
يمكن أن يحدث هذا في مواقف أخرى أيضًا.
نوصي بوضع الفواصل المنقوطة بين البيانات حتى لو كانت مفصولة بأسطر جديدة. يتم اعتماد هذه القاعدة على نطاق واسع من قبل المجتمع. دعونا نلاحظ مرة أخرى أنه من الممكن ترك الفواصل المنقوطة في معظم الأوقات. لكن استخدامها أكثر أمانًا - خاصة بالنسبة للمبتدئين.
مع مرور الوقت، تصبح البرامج أكثر وأكثر تعقيدا. يصبح من الضروري إضافة تعليقات تصف ما يفعله الكود ولماذا.
يمكن وضع التعليقات في أي مكان من البرنامج النصي. إنها لا تؤثر على تنفيذها لأن المحرك يتجاهلها ببساطة.
تبدأ التعليقات المكونة من سطر واحد بخطين مائلين للأمام //
.
وبقية السطر تعليق. وقد يشغل سطراً كاملاً خاصاً به أو يتبع بياناً.
مثل هنا:
// يحتل هذا التعليق سطرًا خاصًا به تنبيه('مرحبا'); تنبيه("العالم"); // هذا التعليق يتبع البيان
تبدأ التعليقات متعددة الأسطر بشرطة مائلة للأمام وعلامة النجمة /*
وتنتهي بعلامة النجمة وشرطة مائلة للأمام */
.
مثله:
/* مثال برسالتين. هذا تعليق متعدد الأسطر. */ تنبيه('مرحبا'); تنبيه("العالم");
يتم تجاهل محتوى التعليقات، لذلك إذا وضعنا الكود داخل /* … */
، فلن يتم تنفيذه.
في بعض الأحيان قد يكون من المفيد تعطيل جزء من التعليمات البرمجية مؤقتًا:
/* التعليق على الكود تنبيه('مرحبا'); */ تنبيه("العالم");
استخدم مفاتيح الاختصار!
في معظم المحررين، يمكن التعليق على سطر من التعليمات البرمجية عن طريق الضغط على مفتاح التشغيل السريع Ctrl + / لتعليق من سطر واحد وعلى شيء مثل Ctrl + Shift + / - للتعليقات متعددة الأسطر (حدد جزءًا من التعليمات البرمجية واضغط على مفتاح التشغيل السريع). بالنسبة لنظام التشغيل Mac، جرب Cmd بدلاً من Ctrl و Option بدلاً من Shift .
التعليقات المتداخلة غير مدعومة!
قد لا يكون هناك /*...*/
داخل /*...*/
آخر.
سوف يموت هذا الرمز مع وجود خطأ:
/* /* تعليق متداخل؟!؟ */ */ تنبيه("العالم");
من فضلك، لا تتردد في التعليق على الكود الخاص بك.
تعمل التعليقات على زيادة حجم التعليمات البرمجية الإجمالي، لكن هذه ليست مشكلة على الإطلاق. هناك العديد من الأدوات التي تعمل على تقليل التعليمات البرمجية قبل النشر إلى خادم الإنتاج. يقومون بإزالة التعليقات، لذلك لا تظهر في البرامج النصية العاملة. ولذلك فإن التعليقات ليس لها آثار سلبية على الإنتاج على الإطلاق.
لاحقًا في البرنامج التعليمي، سيكون هناك فصل خاص بجودة الكود يشرح أيضًا كيفية كتابة تعليقات أفضل.