أساسيات JavaScript. الجزء 2 دورة JavaScript من المبتدئين إلى المتقدمين

هذا هو الجزء الثاني من سلسلة منشورات مدونة JavaScript التي ستأخذك من المبتدئين إلى المتقدمين. بنهاية هذه السلسلة ، ستعرف جميع الأساسيات التي تحتاج إلى معرفتها لبدء الترميز في JavaScript. بدون مزيد من اللغط ، لنبدأ بالدرس الثاني.

أساسيات JavaScript - جدول المحتويات:

1. أساسيات JavaScript
2. تنفيذ سطر بسطر
3. طريقتان لإنهاء التعليمات
4. تعليقات

في منشور المدونة هذا ، سنواصل العمل من حيث تركنا من أول مشاركة مدونة. في هذه المرحلة ، يجب أن يكون لديك متصفح Google Chrome مفتوحًا وأن تفتح وحدة تحكم JavaScript بشكل أكثر تحديدًا. إذا قمت بإغلاقها لسبب ما ، فسيكون هذا هو الوقت المناسب لفتحها احتياطيًا. لنبدأ في تعلم أساسيات JavaScrip

إذا كنت تستخدم جهاز Mac ، فإن اختصار لوحة المفاتيح لفتح وحدة التحكم هو الضغط على "option + command + J" ، بعد فتح Chrome. إذا كنت تستخدم جهاز Windows ، فيمكنك استخدام اختصار لوحة المفاتيح "Control + Shift + J" ، لفتح وحدة تحكم JavaScript ، بمجرد فتح Chrome. أو يمكنك أيضًا الانتقال إلى القائمة في الجزء العلوي والانتقال إلى عرض -> المطور -> وحدة تحكم JavaScript.

أساسيات JavaScript

JavaScript ، مثل جميع لغات البرمجة الأخرى ، هي لغة تستخدمها للتواصل مع أجهزة الكمبيوتر. مثل اللغة الطبيعية لديها قواعد نحوية وكلمات معروفة لتشكيل جمل مناسبة ، فإن لغات البرمجة لها أيضًا قواعد معينة يجب عليك اتباعها للتواصل بشكل فعال مع الكمبيوتر.

على سبيل المثال ، تعني كلمات معينة أشياء معينة لمحرك JavaScript الذي يقوم بتشغيل الكود الخاص بنا ، مثل الكلمة الرئيسية "التنبيه" التي استخدمناها في البرنامج التعليمي السابق لها معنى لعرض تنبيه للمستخدم بالكلمات المحددة التي يضعونها داخل الأقواس بعد . في حالتنا ، كتبنا "مرحبًا ، أيها العالم!" لذلك تلقينا تنبيهًا يقول "مرحبًا ، أيها العالم!".

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

تنفيذ سطر بسطر

عندما يتعلق الأمر بأساسيات JavaScript ، فإن أول شيء يجب أن تعرفه هو أن الكود الذي تكتبه سيتم تنفيذه سطرًا بسطر ، من أعلى إلى أسفل. يشار إلى هذا النمط من تنفيذ التعليمات البرمجية أيضًا باسم JavaScript كونها "لغة برمجة مفسرة".

على العكس من ذلك ، فإن بعض لغات البرمجة هي "لغات برمجة مترجمة". بعض الأمثلة على اللغات المترجمة ستكون: C و C ++ و C # و Swift و Java وما إلى ذلك. الاختلاف الرئيسي هو أنه مع لغات البرمجة المترجمة ، سيتم "تجميع" كل التعليمات البرمجية التي تكتبها وسيتم تنفيذها في جزء واحد بواسطة الكمبيوتر. لهذا السبب أيضًا قد يكون من الصعب البدء في تعلم لغة برمجة مترجمة لأنه قد يكون من الصعب تحديد المكان الذي ارتكبت فيه خطأ في برنامجك.

بعض الأمثلة على لغات البرمجة المفسرة هي JavaScript و Python و Bash و Matlab. مع لغات البرمجة المفسرة لديك فائدة متأصلة في رؤية السطر الذي ارتكبت فيه الخطأ ، على سبيل المثال نسيان الفاصلة المنقوطة أو عدم مطابقة الأقواس في التعليمات البرمجية الخاصة بك. قد يؤدي وجود هذه الخاصية إلى إحداث اختلاف كبير في بعض التطبيقات ، ولكن عندما نحاول تحميل موقع ويب باتصال إنترنت بطيء ، تفضل أن يتم تنفيذ كل سطر من JavaScript بأسرع ما يمكن.

طريقتان لإنهاء التعليمات

يعد برنامج الكمبيوتر في نهاية اليوم مجموعة من الإرشادات لجهاز الكمبيوتر. ولكن أين ينتهي أحد البرامج وأين تبدأ التعليمات التالية؟ هناك طرق مختلفة لهذه المشكلة. يستخدم JavaScript شيئين رئيسيين ، الفاصلة المنقوطة والأقواس.

اعتمادًا على نوع التعليمات التي نكتبها ، سنستخدم عمومًا إما واحدًا لإنهاء أو حزمة مجموعة من التعليمات. سنستخدم نوعًا مختلفًا من الأقواس للوظائف وأنواع البيانات المختلفة. على سبيل المثال ، في التنبيه ("مرحبًا ، أيها العالم") ؛ الكود الذي نفذناه سابقًا ، الأقواس التي تحيط بكتابة عالم hello تخبر الكمبيوتر بما يجب أن يقوله التنبيه ، والفاصلة المنقوطة في نهاية التعليمات تخبر الكمبيوتر أنه ، هذه التعليمات تنتهي هنا ، يمكنك الانتقال إلى التعليمة التالية. هذا مشابه جدًا لكيفية استخدامنا للنقطة "." لإنهاء الجمل باللغة الإنجليزية.

تعليقات

تعد إضافة التعليقات إلى الكود جزءًا أساسيًا من البرمجة. قد يكون من السهل فهم الكود الذي تكتبه أثناء كتابته ، ولكن اعتمادًا على مدى تعقيد الكود ، قد يكون لديك فكرة قليلة جدًا بعد ستة أشهر ، عندما تعود إلى الكود.

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

هناك طريقتان يمكنك من خلالهما إضافة التعليقات وهما JavaScipt. الأول هو إضافة تعليق بسيط "سطر واحد" بشرطتين مائلتين للأمام مثل هذا:

// this is a comment

بهذه الطريقة ، سيتم تجاهل كل ما تكتبه بعد الشرطتين المائلتين للأمام في السطر المحدد الذي تضع فيه الشرطتين المائلتين للأمام. يمكنك تكرار ذلك عدة مرات حتى تتم تغطية أسطر متعددة بتعليقات مثل هذا:

// this is a comment.
// this is another comment.
// you can keep commenting like this.

سبب آخر لاستخدامنا للتعليقات هو التعليق على جزء من التعليمات البرمجية لتجربة الكود. على سبيل المثال ، يمكنك كتابة نفس الوظيفة بطرق متعددة وقد ترغب في التعليق على إصدار واحد من نفس الرمز لمقارنة الأداء الفردي أو النتائج. دعونا نرى ذلك بمثال أيضًا.

انسخ والصق الكود التالي في وحدة تحكم JavaScript التي فتحتها في Chrome.

// greet user
alert("Hello, User!");
alert("Hi, User!");

إذا كنت تريد تدريبًا إضافيًا على كتابة الكود بالكامل بنفسك ، فيمكنك القيام بذلك أيضًا. شيء واحد يجب أن تعرفه عن كتابة أسطر متعددة من التعليمات البرمجية في وحدة التحكم هو أنه للوصول إلى السطر التالي دون تنفيذه ، يمكنك الضغط على "shift + enter" للقيام بذلك. بخلاف ذلك ، بعد كتابة سطر واحد من التعليمات البرمجية ، إذا ضغطت للتو ، فسيتم تشغيل هذا السطر من التعليمات البرمجية. في هذا المثال ، هذه ليست مشكلة كبيرة ومن الجيد بالفعل تنفيذها سطرًا بسطر أيضًا ، لأن لدينا مثالًا بسيطًا يمكن أن يعمل أيضًا بهذا النمط.

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

عندما نفذنا الكود مثل هذا ، فإننا ننفذ نفس الوظيفة مرتين. ولكن ماذا يجب أن تفعل إذا كنت تريد أن ترى تطبيقًا واحدًا فقط في كل مرة؟ حسنًا ، أنت تعرف بالضبط ما يجب فعله في هذه الحالة لأننا تحدثنا بالفعل عن ذلك. انطلق وقم بالتعليق على أحد الأسطر بعد لصق الكود أو كتابته بحيث يكون التنفيذ الثاني فقط لـ "Hi، User!" يتم إعدامه.

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

لاحظ أنه عند التعليق على سطر من التعليمات البرمجية ، فإنه يتحول إلى نفس لون السطر المعلق السابق. هذا الاختلاف في اللون هنا لا يحدث فرقًا في الكمبيوتر ، ولكنه ميزة مفيدة إلى حد ما بالنسبة لنا عندما نكتب رمزًا. بهذه الطريقة يكون الأمر أسهل بكثير إذا قمت بالتعليق عن طريق الخطأ على سطر من التعليمات البرمجية لأن الألوان ستجعله واضحًا.

هناك طريقة أخرى للتعليق على الكود وهي استخدام الشرطة المائلة للأمام وحرف النجمة. بهذه الطريقة يمكننا إنشاء تعليقات سطر واحد أو متعدد الأسطر في التعليمات البرمجية الخاصة بنا.

/* a single line comment */
/* the commenting starts when we put a forward slash and an asterisk
and the commented areas ends
when we close of the comment with an asterisk and the forward slash
like this */

أنت الآن تعرف أساسيات JavaScript. في البرنامج التعليمي التالي ، سنرى مفهومًا شائعًا للغاية في البرمجة يسمى "المتغيرات" جنبًا إلى جنب مع أنواع البيانات الأساسية في JavaScript.

المؤلف: روبرت ويتني

خبير JavaScript ومدرب يدرب أقسام تكنولوجيا المعلومات. هدفه الرئيسي هو رفع مستوى إنتاجية الفريق من خلال تعليم الآخرين كيفية التعاون الفعال أثناء البرمجة.

مشاهدة جميع المشاركات

دورة JavaScript من المبتدئين إلى المتقدمين في 10 منشورات مدونة:

1. كيف تبدأ الترميز في JavaScript؟
2. أساسيات JavaScript
3. المتغيرات وأنواع البيانات المختلفة في JavaScript
4. المقتطفات وهياكل التحكم
5. بينما الحلقات والحلقات
6. مجموعة جافا
7. وظائف JavaScript
8. كائنات جافا سكريبت
9. طرق JavaScript والمزيد
10. ملخص دورة JavaScript