أساسيات JavaScript: دليل شامل للمبتدئين

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

دليل شامل لفهم أساسيات JavaScript: من النشأة الى أنواع البيانات

نشأة JavaScript

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

استخدامات JavaScript

لم تعد JavaScript مقتصرة على إنشاء التأثيرات التفاعلية في صفحات الويب. اليوم، تُستخدم في مجموعة واسعة من التطبيقات مثل:

• برمجة الروبوتات.
• كتابة سكربتات الألعاب باستخدام Unity.
• إنشاء أدوات تحرير النصوص البرمجية.

إن إمكانيات JavaScript لا حدود لها، فهي الآن جزء أساسي في تطوير تطبيقات الويب، الجوال، وحتى برامج سطح المكتب.

ما الذي ستتعلمه؟

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

نظرة على تاريخ JavaScript

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

لنبدأ رحلتنا مع JavaScript!

تاريخ JavaScript

في عام 1995، وخلال فترة زمنية قصيرة لا تتجاوز عشرة أيام، قام بريندان آيك بابتكار JavaScript أثناء عمله مع شركة Netscape لتطوير متصفحها الشهير آنذاك، Netscape Navigator، الذي كان واحدًا من أوائل متصفحات الإنترنت. اليوم، نستخدم متصفحات أكثر حداثة مثل Google Chrome وMozilla Firefox وApple Safari وMicrosoft Edge لتصفح الإنترنت.

كيف كانت مواقع الويب قبل JavaScript؟

قبل ظهور JavaScript، كانت المواقع تعتمد بشكل كامل على HTML وCSS، مع استخدام بعض الإضافات مثل Java Applets أو Plugins لإضافة وظائف تفاعلية. ولكن هذا النهج كان معقدًا وغير عملي، مما دفع إلى ابتكار JavaScript كحل أبسط وأكثر كفاءة.

JavaScript ليست Java

من المهم توضيح أن JavaScript ليست لها علاقة بلغة Java، على الرغم من التشابه في الاسم. في البداية، كانت JavaScript تُعرف باسم LiveScript، ولكن تم تغيير الاسم إلى JavaScript كاستراتيجية تسويقية للاستفادة من الشعبية الكبيرة التي كانت تحظى بها لغة Java في ذلك الوقت.

تطور JavaScript إلى معيار رسمي

مع تزايد شعبية JavaScript، ظهرت إصدارات مختلفة منها، مما أدى إلى الحاجة إلى توحيد المعايير. لذلك، تم تقديم JavaScript إلى منظمة ECMA International لتطوير معيار رسمي للغة، والذي يُعرف باسم ECMAScript.

إصدارات ECMAScript

الإصدارات المبكرة من المعيار مثل ES5 وES6 حملت أرقامًا توضيحية، لكن مع مرور الوقت، تم الانتقال إلى استخدام أرقام تعتمد على السنوات لتسهيل دورة الإصدار. على سبيل المثال، لدينا الآن إصدارات مثل ES2016 وES2017 وما بعدها.

مكانة JavaScript اليوم

على الرغم من تعقيد تاريخ الاسم، أصبحت JavaScript واحدة من أكثر لغات البرمجة شعبية في العالم، وهي تعتبر الآن إحدى الركائز الثلاثة لتطوير واجهات الويب الأمامية (Front-End)، إلى جانب HTML وCSS.

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

التعرف على وحدة التحكم في JavaScript (JavaScript Console)

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

كيفية الوصول إلى وحدة التحكم؟

إذا كنت تستخدم Google Chrome، فإليك الخطوات:

1. افتح أدوات المطور:

• انقر بزر الفأرة الأيمن في أي مكان على الصفحة، ثم اختر Inspect (فحص).
• أو استخدم اختصارات لوحة المفاتيح:
  
  • على نظام Mac: اضغط على Command + Option + J.
  • على نظام Windows: اضغط على Ctrl + Shift + J.

2. فتح وحدة التحكم:
   بعد فتح أدوات المطور، انقر على علامة التبويب Console للوصول إلى وحدة التحكم.

Console Log Firefox

إذا كنت تستخدم متصفحًا آخر غير Chrome، يمكنك البحث عن الطريقة فى الإنترنت، ثم عد إلى وحدة التحكم لتكمل.

كتابة أول كود في وحدة التحكم

الآن، مع فتح وحدة التحكم، لنكتب أول سطر من كود JavaScript:

• جرّب كتابة اسمك مباشرةً.
  لكنك ستواجه خطأ إذا لم تكتبه بالطريقة الصحيحة. لماذا؟
  في JavaScript، يجب تمثيل النصوص كـ "سلاسل نصية" (Strings) عن طريق وضعها بين علامتي اقتباس، مثل:

  "Mahmoud"

Console Log String

إنشاء نافذة تنبيه (Alert)

دعنا نجرب شيئًا أكثر إثارة!
اكتب الكود التالي في وحدة التحكم لإنشاء نافذة تنبيه تعرض رسالة:

alert("Hello Mahmoud, how are you?");

عند تنفيذه، ستظهر رسالة منبثقة في المتصفح تقول: "Hello Mahmoud, how are you?"

Console Alert

اختبار الأكواد الصغيرة في وحدة التحكم

تُعد وحدة التحكم مكانًا رائعًا لاختبار الأكواد الصغيرة أو الشفرات التي لست متأكدًا من عملها. لكن ماذا عن الأكواد الأطول؟ هنا يأتى دور محرر الأكواد البرمجية.

لماذا استخدام محرر أكواد؟

كتابة الأكواد مباشرةً في وحدة التحكم يمكن أن تكون مزعجة عند التعامل مع برامج أكبر، مثل:

• إذا أردت كتابة أكثر من رسالة تنبيه (Alert)، ستحتاج إلى استخدام Shift + Return لكل سطر جديد بدلًا من مفتاح Return العادي.

لذلك، من الأفضل كتابة الكود في محرر أكواد مثل VS Code أو Atom أو Sublime Text، ثم نسخه ولصقه في وحدة التحكم لاختباره.

استخدام console.log

بدلًا من استخدام alert لكل شيء، يمكنك استخدام:

console.log("Hello Mahmoud");

Console Log

سيعرض هذا النص في وحدة التحكم بدلاً من إزعاج المستخدم برسائل تنبيه متكررة.

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

تجربة JavaScript في المتصفح

العمل مباشرة في المتصفح
يمكنك تجربة أفكارك البرمجية واختبارها مباشرة في المتصفح باستخدام أدوات المطور (Developer Tools). إذا كنت معتادًا على استخدام HTML أو CSS، فقد تكون قد استخدمت أدوات المطور لتجربة تغييرات في الأنماط (Styles). الآن يمكنك استخدام نفس الأدوات لتجربة أكواد JavaScript بطريقة سهلة وآمنة.

لماذا تُعد أدوات المطور بيئة رائعة؟

أدوات المطور تُعتبر بمثابة "بيئة مهيئة لأختبار الأكواد" (Sandbox) لتجربة الأكواد. بمعنى آخر، هي مساحة يمكنك أن تعبث فيها بالكود دون أي عواقب طويلة المدى. يمكنك استخدامها للقيام بالآتي:

1. تصحيح الأخطاء (Debugging):

• إذا واجهت مشاكل في الكود، يمكنك استخدام أدوات المطور لتحديد الأخطاء وإصلاحها.

2. اختبار الأكواد الجديدة:

• جرب قطعة كود جديدة تعلمتها للتو لترى كيف تعمل.

عرض الأخطاء والتحذيرات

إذا قمت بفتح أي موقع يستخدم JavaScript، يمكنك رؤية الأخطاء أو التحذيرات في وحدة التحكم (Console). تعرض وحدة التحكم ما يلي:

console.error('This is error');
console.warn('This is a warning');

1. الأخطاء:

• عندما يكون هناك خلل في الكود.

2. التحذيرات:

• إشعارات عن أمور قد لا تؤثر حاليًا على الموقع، لكنها تستحق الانتباه.

3. الإخراج الناتج عن console.log:

• أي نصوص أو بيانات تمت طباعتها باستخدام هذه الطريقة.

Console Error and Warning

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

كيف تستفيد من وحدة التحكم؟

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

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

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

مقدمة في أنواع البيانات

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

البيانات هي ما يساعدنا على فهم العالم من حولنا، والتعرف على الاتجاهات، وتكوين افتراضات مدروسة، واتخاذ قرارات مستنيرة في المستقبل.

في البرمجة، البيانات وأنواع البيانات تشكل الأساس لأي لغة برمجة، لأنها تساعدنا في تنظيم المعلومات وتحديد كيفية عمل برامجنا.

عندما تفتح صفحتك على فيسبوك، ماذا ترى؟

• اسمك
• تاريخ آخر منشور لك
• قائمة بالتحديثات التي شاركتها
• عدد الإعجابات والتعليقات على منشوراتك
  كل هذه المعلومات تم جمعها ومعالجتها لتظهر بشكل منظم لزوار صفحتك.

وعندما تنظر إلى حسابك البنكي، ترى:

• رصيد الحساب
• تفاصيل كل معاملة
• اسم الشركة التي قمت بالشراء منها
  كل هذه البيانات يتم تنظيمها وتقديمها لك بشكل مرتب.

لماذا تعتبر أنواع البيانات مهمة؟
من المهم أن تكون على دراية بأنواع البيانات التي تستخدمها، وأن تعرف متى يكون من الأفضل استخدام كل نوع. في هذه الدرس، ستتعلم كيفية تعريف والتعامل مع أنواع البيانات الأولية في JavaScript مثل:

• الأرقام
• السلاسل النصية (Strings)
• القيم المنطقية (Booleans)
• القيمة غير المعرفة (Undefined)

var booleanValue = true;
var numericalValue = 354;
var stringValue = "This is a String";
var stringObject = new String("This is a String Object");
var undefifindValue;
console.log(typeof booleanValue) // displays "boolean"
console.log(typeof numericalValue) // displays "number"
console.log(typeof stringValue) // displays "string"
console.log(typeof stringObject) // displays "object" 
console.log(typeof undefindValue) // displays "undefind" 

Javascript DataTypes

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

التعليقات في جافاسكربت

في البرمجة، التعليقات هي وسيلة لكتابة نصوص داخل الكود بهدف توضيح ما يفعله الكود أو لتوفير تلميحات للمطورين الآخرين أو حتى لنفسك عند مراجعة الكود في وقت لاحق.

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

في جافاسكربت، هناك نوعان من التعليقات:

1. تعليق سطر واحد: يتم كتابته بعد علامتي مائلين مزدوجتين (//).
2. تعليقات متعددة الأسطر: يتم كتابتها بين علامتي مائل ونجمة (/* */).

// One Line Comment
/* 
   Multi Line Comments
   ...etc
*/

أهمية التعليقات

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

// This Comment Explain The Code Below
let word = "hello"; // Variable

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

for (let i = 0; i < arr.length; i++) {
  // Do Thing Here
}

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

/* 
   This function make a string reversed 
   like "Mahmoud" will be reversed to "duomham"
*/

function reverseWord(word) {
  let reversed = "";
  for (let i = word.length - 1; i >= 0; i--) {
    reversed += word[i];
  }
  return reversed;
}

console.log(reverseWord('Mahmoud'));

ReverseWord Function

استخدام التعليقات في التمارين

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

السلاسل النصية (Strings) في جافاسكربت

لقد استخدمت السلاسل النصية من قبل، ربما دون أن تعلم ذلك. على سبيل المثال، عندما تكتب رسالة داخل دالة console.log()، فإن هذه الرسالة هي في الواقع سلسلة نصية في جافاسكربت. على سبيل المثال:

console.log("Hello, world!");

في هذا المثال، "Hello, world!" هي سلسلة نصية. السلاسل النصية يمكن أن تحتوي على أحرف فردية مثل الحرف "h"، أو حتى أرقام مثل السلسلة النصية "123".

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

على سبيل المثال، إذا حاولت تمرير سلسلة إلى console.log دون استخدام العلامات، سيعود لك خطأ:

console.log(hello);

Javascript ReferenceError

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

إذا قمت بإضافة العلامات بشكل صحيح، فسيتم طباعة السلسلة النصية في وحدة التحكم (console) بنجاح:

console.log("hello");

Console Log a String

الآن السلسلة ستظهر بشكل صحيح في وحدة التحكم.

المتغيرات في جافاسكربت

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

قد تكون قد سمعت عن المتغيرات من قبل، ربما في صفوف الرياضيات. على سبيل المثال، إذا كان لديك متغير يُسمى x وتم تعيين قيمته إلى 5، ثم لدينا التعبير x + 1. بما أن x يحتوي على القيمة 5، يمكننا استبدال x بالقيمة 5 ليصبح التعبير كالتالي: 5 + 1، وهو يساوي 6.

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

لتعريف متغير في جافاسكربت، نستخدم الكلمة المفتاحية let أو var، تليها اسم المتغير وعامل التعيين =، ثم القيمة التي تريد تخزينها داخل المتغير.

على سبيل المثال، لنأخذ القط الخاص بي Kitty. يمكننا إنشاء متغير يُسمى name ونخزن فيه قيمة "Kitty" (اسم القط). ولتخزين عمرها، يمكننا إنشاء متغير آخر يُسمى age ونعطيه القيمة 3، حيث أن كيتي تبلغ من العمر 4 سنوات.

إليك المثال التالي:

let name = "Kitty"; // تخزين اسم القط
let age = 4;      // تخزين عمر القط

وبمرور الوقت، عندما تحتفل كيتي بعيد ميلادها القادم، يمكنني استخدام المتغير age لزيادة عمرها بمقدار واحد، وبالتالي يصبح عمرها 5 سنوات بعد التحديث.

age = age + 1; // زيادة عمر كيتي سنة واحدة

وبذلك، المتغير age سيحتوي الآن على القيمة 5، مما يعني أن عمر كيتي أصبح 5 سنوات.

مؤشر السلسلة (String Index) في جافاسكربت

في جافاسكربت، السلاسل النصية هي عبارة عن مجموعة من الأحرف (characters)، وكل حرف في السلسلة لديه مؤشر (index) خاص به. يبدأ العد من 0، أي أن أول حرف في السلسلة يكون في الموقع (المؤشر) 0، الثاني في الموقع 1، وهكذا.

مثال على ذلك:

let greeting = "Hello";
console.log(greeting[0]); // سيطبع "H" لأن "H" هو الحرف الأول في السلسلة.
console.log(greeting[1]); // سيطبع "e" لأن "e" هو الحرف الثاني في السلسلة.

إذا أردت الوصول إلى حرف معين في السلسلة، يمكنك استخدام الترتيب (index). على سبيل المثال، للوصول إلى الحرف الثالث في السلسلة "Hello"، نكتب:

let thirdCharacter = greeting[2]; // الحرف في المؤشر 2 هو "l"
console.log(thirdCharacter); // سيطبع "l"

الهروب في السلاسل النصية (Escaping Strings)

أحيانًا قد تحتاج إلى تضمين أحرف خاصة في السلسلة النصية، مثل علامات الاقتباس (" أو ') أو علامة العودة إلى السطر (\n). في هذه الحالات، نستخدم الهروب (escaping)، وهو يعني إضافة علامة backslash (\) قبل الحرف الخاص لتوضيح أنه جزء من السلسلة وليس له وظيفة خاصة.

إليك بعض الأمثلة:

1. استخدام علامات الاقتباس داخل السلسلة:

let quote = "قال محمود: \"الجافاسكربت ممتعة!\"";
console.log(quote);  // سيطبع: قال محمود: "الجافاسكربت ممتعة!"

2. استخدام علامات الاقتباس المفردة داخل السلسلة:

let quote = 'قال محمود: \'الجافاسكربت ممتعة!\'';
console.log(quote);  // سيطبع: قال محمود: 'الجافاسكربت ممتعة!'

3. إضافة سطر جديد في السلسلة:

let message = "أهلاً بك في دورة الجافاسكربت!\nنتمنى لك التوفيق.";
console.log(message);
// سيطبع:
// أهلاً بك في دورة الجافاسكربت!
// نتمنى لك التوفيق.

4. استخدام السلاش العكسي (backslash) في السلسلة:

let filePath = "C:\\Users\\Mahmoud\\Documents";
console.log(filePath);  // سيطبع: C:\Users\Mahmoud\Documents

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

قيمة البوليان (Booleans) في جافاسكربت

في جافاسكربت، البوليان (Booleans) هو نوع من البيانات يستخدم فقط القيمتين: true (صحيح) و false (خطأ). يمكن استخدامه لتمثيل الحالات التي تعتمد على منطق نعم/لا، تشغيل/إيقاف، صحيح/خطأ، أو 1/0، وهذه القيم تمثل أساس المنطق البرمجي.

كيف يعمل البوليان؟

عند مقارنة البيانات (مثل الأرقام أو السلاسل النصية)، سيكون الناتج دائمًا قيمة بوليانية: إما true أو false. هذا يسمح لك باتخاذ قرارات منطقية بناءً على تلك المقارنات.

أمثلة على المقارنات باستخدام البوليان:

1. مقارنة الأرقام:

let x = 5;
let y = 10;
console.log(x > y); // سيطبع false لأن 5 ليست أكبر من 10
console.log(x < y); // سيطبع true لأن 5 أصغر من 10

2. مقارنة السلاسل النصية:

let str1 = "apple";
let str2 = "orange";
console.log(str1 === str2); // سيطبع false لأن "apple" لا تساوي "orange"
console.log(str1 === "apple"); // سيطبع true لأن "apple" تساوي "apple"

3. المقارنة باستخدام القيمة البوليانية مباشرة:

let isActive = true;
console.log(isActive);  // سيطبع true

مقارنة البيانات المختلفة:

عند المقارنة بين أنواع بيانات مختلفة، يمكن أن يحدث أن تكون المقارنة غير صحيحة أو تؤدي إلى تصرفات غير متوقعة. لذلك من المهم أن نعرف كيف يمكن مقارنة الأنواع المختلفة.

console.log(5 == "5");  // سيطبع true لأن المقارنة لا تفرق بين الأنواع
console.log(5 === "5"); // سيطبع false لأن المقارنة باستخدام === تتطلب أن تكون الأنواع متطابقة

استخدام البوليان في الجمل الشرطية:

يتم استخدام القيم البوليانية بشكل كبير في الجمل الشرطية (مثل if و else):

let isUserLoggedIn = true;

if (isUserLoggedIn) {
    console.log("Welcome, user!");  // سيطبع إذا كانت القيمة true
} else {
    console.log("Please log in.");  // سيطبع إذا كانت القيمة false
}

Null و Undefined و NaN في جافاسكربت

في جافاسكربت، هناك بعض القيم التي قد تكون مربكة في البداية لأنها تبدو مشابهة، ولكنها تحمل معاني مختلفة. من بين هذه القيم، نجد null و undefined و NaN.

null

• null هو نوع بيانات يمثل القيمة الفارغة أو العدم. عندما تقوم بتعيين قيمة null إلى متغير، فهذا يعني أنك تعمدت تعيين قيمة فارغة أو غير موجودة.
• على سبيل المثال:

let x = null;
console.log(x);  // سيطبع null

هنا، تم تعيين المتغير x إلى القيمة null، مما يعني أن المتغير لا يحمل قيمة صالحة أو موجودة.

undefined

• undefined هو نوع بيانات يعبر عن غياب القيمة، ولكن ليس القيم الفارغة. إذا قمت بإعلان متغير دون إعطائه قيمة، فإن هذا المتغير يحمل قيمة undefined.
• على سبيل المثال:

let y;
console.log(y);  // سيطبع undefined

في هذا المثال، المتغير y تم إعلانه ولكنه لم يحصل على أي قيمة، لذا تكون قيمته undefined.

الفرق بين null و undefined:

• null هو قيمة فارغة تم تعيينها يدويًا.
• undefined يشير إلى غياب القيمة، ويحدث عادة عندما يتم إعلان متغير دون تعيين قيمة له.

NaN

• NaN (Not a Number) هو نوع بيانات خاص يعني أن العملية الحسابية لم تُنتج عددًا صالحًا. يحدث هذا عادة عندما تحاول إجراء عملية على قيم غير قابلة للتحويل إلى أرقام.
• على سبيل المثال:

let result = "hello" * 2;
console.log(result);  // سيطبع NaN لأن "hello" لا يمكن ضربها في عدد

مقارنة القيم null و undefined و NaN:

• عند مقارنة null و undefined باستخدام ==:

console.log(null == undefined);  // سيطبع true

هذه المقارنة تُعتبر صحيحة لأن null و undefined هما قيمتان تشير إلى غياب القيمة بطريقة غير محددة ولكن هناك فرق بينهما عند المقارنة باستخدام ===:

console.log(null === undefined);  // سيطبع false

خاتمة

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

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

الأسئلة الشائعة

ما هي JavaScript ولماذا تُعتبر لغة مهمة في تطوير الويب؟

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

ما الفرق بين JavaScript وHTML وCSS؟

HTML تُستخدم لإنشاء هيكل الصفحة، CSS لتنسيقها، وJavaScript لإضافة التفاعلية مثل النقرات، الرسوم المتحركة، والتعامل مع البيانات.

كيف يمكنني البدء في تعلم JavaScript؟

ابدأ بفهم الأساسيات مثل المتغيرات، الجمل الشرطية، الحلقات، والدوال، ثم انتقل لتطبيقها في مشاريع بسيطة.

هل يمكن استخدام JavaScript لتطوير تطبيقات غير متعلقة بالويب؟

نعم، باستخدام بيئات مثل Node.js، يمكن استخدام JavaScript لتطوير تطبيقات سطح المكتب، الخوادم، وحتى تطبيقات الهاتف المحمول.

ما هي الأخطاء الشائعة التي يقع فيها المبتدئون عند تعلم JavaScript؟

من الأخطاء الشائعة: عدم فهم نطاق المتغيرات (Scope)، الخلط بين المساواة = و== و===، وعدم التعامل مع الأخطاء بشكل صحيح.

تعديل المقال