مدخل إلى دراسة جافاسكريبت للمبتدئين

 مدخل إلى دراسة جافاسكريبت للمبتدئين



مدخل إلى دراسة جافاسكريبت للمبتدئين
 مدخل إلى دراسة جافاسكريبت للمبتدئين

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

1. ما هي جافاسكريبت؟

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

تعتبر جافاسكريبت جزءًا من المثلث التقني لتطوير الويب:

  1. HTML (لغة ترميز النص التشعبي): تستخدم لتحديد محتوى صفحات الويب وهيكلها.
  2. CSS (أوراق الأنماط المتتالية): تستخدم لتحديد عرض وتصميم صفحات الويب (كيف تبدو).
  3. JavaScript (جافاسكريبت): تستخدم لتحديد سلوك صفحات الويب (كيف تتصرف وتتفاعل).

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

2. بناء البرامج الأساسي: العبارات والتعليقات والكتل

أي برنامج جافاسكريبت يتكون من عبارات (Statements). العبارة هي تعليمات للكمبيوتر لأداء مهمة معينة.

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

مثال على عبارة:

let caught = 5 * 5; // هذه عبارة تحدد ربطًا (متغيرًا)

هذه العبارة تُنشئ ربطًا يُسمى caught وتُستخدم لحفظ الرقم الناتج عن ضرب 5 في 5. بعد تعريف الربط، يمكن استخدام اسمه كتعبير، وتكون قيمة هذا التعبير هي القيمة التي يحملها الربط حاليًا.

التعليقات (Comments): التعليقات هي أجزاء من النص داخل البرنامج يتم تجاهلها تمامًا بواسطة الكمبيوتر. تُستخدم التعليقات لوصف الغرض من الكود، أو شرح الأجزاء المعقدة، أو تدوين الملاحظات للمبرمجين الآخرين (أو لنفسك في المستقبل).

يوجد طريقتان لكتابة التعليقات في جافاسكريبت:

  • تعليق سطر واحد (Single-line comment): يبدأ بعلامتي شرطة مائلة مزدوجة (//)، ويستمر حتى نهاية السطر.
let accountBalance = calculateBalance(account); // هذا تعليق سطر واحد

  • تعليق متعدد الأسطر (Multi-line comment): يبدأ بعلامة شرطة مائلة ونجمة (/*)، وينتهي بعلامة نجمة وشرطة مائلة (*/). كل النص بين هاتين العلامتين يُعتبر تعليقًا، حتى لو امتد على عدة أسطر. 

/*
 * هذا تعليق متعدد الأسطر.
 * يمكن أن يمتد على عدة أسطر.
 */
var a = /* قيمة عشوائية */ 42; // يمكن أن يظهر في منتصف السطر أيضًا

الكتل (Blocks): الكتلة هي مجموعة من العبارات تُجمع معًا داخل أقواس معقوفة ({}). تُستخدم الكتل لتجميع الكود الذي يجب تنفيذه معًا، مثل داخل حلقات التكرار (loops) أو العبارات الشرطية (conditional statements) أو تعريفات الوظائف (function definitions). لا تحتاج الكتلة إلى فاصلة منقوطة لإنهاءها.

3. أنواع البيانات (Values & Types)

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

أنواع البيانات الأولية (Primitive Data Types): تُعد أنواع البيانات الأولية هي الأنواع الأساسية في جافاسكريبت وتُمرر بالقيمة (by value). هذا يعني أنه عند إنشاء متغير جديد من متغير موجود، يتم نسخ قيمة المتغير الموجود إلى المتغير الجديد.

  1. الأرقام (Numbers): قيم النوع الرقمي هي، كما هو متوقع، قيم عددية. في برنامج جافاسكريبت، تُكتب الأرقام مباشرة. تستخدم جافاسكريبت عددًا ثابتًا من البتات، وهو 64 بت، لتخزين قيمة رقم واحدة. هذا يحد من عدد الأرقام المختلفة التي يمكن تمثيلها. يمكن تمثيل حوالي 2^64 رقمًا مختلفًا، وهو ما يعادل حوالي 18 كوينتليون (18 مع 18 صفرًا بعدها).
ملاحظات حول الأرقام:

  • لا يوجد نوع منفصل للأعداد الصحيحة (integers): في جافاسكريبت، تُعامل الأعداد الصحيحة والأعداد الكسرية (floating-point numbers) بنفس الطريقة داخليًا كأرقام بفاصلة عائمة 64 بت. لذا، 1 و 1.0 هما نفس القيمة.

  • التمثيل:

    • الكسور العشرية (Fractional numbers): تُكتب باستخدام نقطة، مثل 9.81.

    • الترميز العلمي (Scientific notation): للأرقام الكبيرة جدًا أو الصغيرة جدًا، يمكنك استخدام الترميز العلمي بإضافة e (لـ exponent) متبوعًا بأس الرقم. على سبيل المثال، 2.998e8 تعني 2.998 × 10^8 = 299,800,000.

    • أرقام نظام العد الست عشري (Hexadecimal numbers): تبدأ بـ 0x أو 0X متبوعة بسلسلة من الأرقام السداسية العشرية (0-9 و a-f). مثال: 0xff (الذي يساوي 255 بالنظام العشري). بعض التطبيقات كانت تدعم الأرقام الثمانية (octal) التي تبدأ بـ 0 (مثال: 0377)، ولكن هذا غير مدعوم في الوضع الصارم لـ ECMAScript 5 ويجب تجنبه.

  • الدقة (Precision): الحسابات مع الأعداد الصحيحة الأقل من حوالي 9 كوادريليون (15 صفرًا) مضمونة دائمًا بأن تكون دقيقة. لسوء الحظ، الحسابات مع الأرقام الكسرية ليست دقيقة بشكل عام. مثلما لا يمكن التعبير عن π (باي) بدقة بعدد محدود من الأرقام العشرية، تفقد العديد من الأرقام بعض الدقة عندما تكون 64 بت فقط متاحة لتخزينها. يجب التعامل مع الأرقام العشرية الرقمية كتقريبات، وليس كقيم دقيقة.

  • القيم الخاصة (Special values):

    • Infinity (اللانهاية): تنتج من عمليات مثل القسمة على صفر (1 / 0).

    • NaN (Not-a-Number - ليس رقمًا): تعني "ليس رقمًا" على الرغم من أنها قيمة من النوع الرقمي. تحصل على هذه النتيجة عندما تحاول، على سبيل المثال، حساب 0 / 0 أو Infinity - Infinity أو أي عدد من العمليات الرقمية الأخرى التي لا تنتج نتيجة ذات معنى. NaN لا يساوي أي قيمة أخرى، بما في ذلك نفسه. لتحديد ما إذا كانت قيمة متغير x هي NaN، يجب عليك كتابة x != x.

  • Math Object: كائن Math المدمج يوفر العديد من الثوابت والوظائف الرياضية.

    • Math.PI: ثابت يمثل قيمة باي (π).

    • Math.random(): ينشئ رقمًا عشوائيًا بفاصلة عائمة بين 0 (شامل) و 1 (غير شامل). للحصول على عدد صحيح عشوائي بين 0 و 9 (على سبيل المثال)، يمكنك ضرب الرقم العشوائي في 10 واستخدام Math.floor() لتقريبه للأسفل. 

      console.log(Math.floor(Math.random() * 10)); // ينتج رقمًا من 0 إلى 9

    • Math.floor(number): يُقرّب الرقم للأسفل إلى أقرب عدد صحيح.

    • Math.ceil(number): يُقرّب الرقم للأعلى إلى أقرب عدد صحيح.

    • Math.round(number): يُقرّب الرقم إلى أقرب عدد صحيح.

    • Math.abs(number): يُرجع القيمة المطلقة لعدد، أي يجعل القيم السالبة موجبة ويترك القيم الموجبة كما هي.

    • Math.max(arg1, arg2, ...): يُحسب أكبر قيمة من بين جميع الوسائط المعطاة.

    • Math.min(arg1, arg2, ...): يُحسب أصغر قيمة من بين جميع الوسائط المعطاة.

    • Math.pow(x, y): يحسب x مرفوعًا للقوة y (x^y).

    • Math.sqrt(x): يحسب الجذر التربيعي لـ x.

  • Number Object Methods:

    • number.toFixed(digits): يُحوّل رقمًا إلى سلسلة نصية بعدد محدد من الأرقام بعد الفاصلة العشرية، ولا يستخدم الترميز الأسي. يُقرّب الرقم إذا لزم الأمر، أو يُضاف إليه الأصفار. 

      let x = 1.23456;
let newX = x.toFixed(2); // newX سيكون "1.23"
let roundedPi = Math.PI.toFixed(2); // "3.14"

    • number.toExponential(digits): يُحوّل رقمًا إلى سلسلة نصية باستخدام الترميز الأسي، مع رقم واحد قبل الفاصلة العشرية وعدد محدد من الأرقام بعدها. 

      let n = 12345.6789;
n.toExponential(1); // "1.2e+4"

    • number.toPrecision(precision): يُحوّل رقمًا إلى سلسلة نصية بعدد محدد من الأرقام الهامة (significant digits). 

      let n = 12345.6789;
n.toPrecision(5); // "12346"

    • number.toString(radix): يُحوّل رقمًا إلى سلسلة نصية في نظام العد المحدد (من 2 إلى 36). إذا أُسقط، يُستخدم نظام العد العشري (base 10). 

      let n = 17;
let binary_string = n.toString(2); // "10001"

  • BigInt: إذا كنت بحاجة إلى استخدام أرقام أكبر أو أصغر من أقصى وأدنى الأرقام التي يمكن أن يحملها نوع البيانات number (المدى الآمن للأعداد الصحيحة من -(2^53 - 1) إلى 2^53 - 1)، يمكنك استخدام نوع البيانات bigInt. يتم التعرف على نوع البيانات bigInt باللاحقة n. مثال:

    let kilometersToAndromedaGalaxy = 23651826000000000000n; // رقم كبير جدًا

  • السلاسل النصية (Strings): نوع البيانات الأساسي التالي هو السلسلة النصية. تُستخدم السلاسل النصية لتمثيل النص، وتُكتب بإحاطة محتواها بعلامات اقتباس. يمكن استخدام علامات اقتباس مزدوجة (") أو مفردة ('). مثال:

    "hello world"
'Hi'

    خصائص السلاسل النصية:

    • الطول (.length): يمكنك الحصول على طول السلسلة النصية باستخدام الخاصية .length. 

      let string = "abc";
console.log(string.length); // → 3

    • الوصول إلى الأحرف (Character access): يمكن الوصول إلى أحرف معينة في سلسلة نصية باستخدام الأقواس المربعة ([]) مع مؤشر (index) الحرف. تبدأ المؤشرات من الصفر (zero-based indexing). 

      console.log(string); // → b

    • دمج السلاسل النصية (Concatenation): لدمج سلسلتين نصيتين أو أكثر لإنشاء سلسلة واحدة، يمكنك استخدام عامل التشغيل +. 

      let firstName = "John";
let lastName = "Smith";
let fullName = firstName + " " + lastName; // "John Smith"

    • قوالب الحرفية (Template Literals): هي طريقة أحدث لإنشاء السلاسل النصية تسمح بتضمين التعبيرات والمتغيرات بسهولة باستخدام علامات الاقتباس الخلفية (backticks) `. 

      let customer = 'Joe Q. Developer';
let item = 'JavaScript All-in-One For Dummies';
let total = 39.99;
let thankYou = `${customer}, thank you for your order of ${item}. Your payment of ${total} was successful.`;
// قبل قوالب الحرفية، كان يتطلب هذا استخدام عامل الربط (+) وجعل العبارات مربكة وعرضة للأخطاء.

    • أساليب السلاسل النصية (String Methods):

      • string.toLowerCase(): يُرجع سلسلة نصية مع تحويل جميع الأحرف فيها إلى أحرف صغيرة.

      • string.toUpperCase(): يُرجع سلسلة نصية مع تحويل جميع الأحرف فيها إلى أحرف كبيرة.

      • string.replace(searchValue, replaceValue): يبحث عن قيمة معينة في السلسلة ويستبدلها بقيمة أخرى.

      • string.includes(searchString): تُحدد ما إذا كانت سلسلة نصية تحتوي على سلسلة نصية أخرى، وتُرجع true أو false.

      • string.indexOf(searchValue): تُرجع مؤشر (index) أول ظهور لقيمة محددة في السلسلة النصية، أو -1 إذا لم يتم العثور عليها.

      • string.slice(startIndex, endIndex): تستخرج جزءًا من السلسلة النصية (لا تعدّل السلسلة الأصلية).

  • القيم المنطقية (Booleans): تمثل القيمة المنطقية الحقيقة أو الزيف، التشغيل أو الإيقاف، نعم أو لا. يوجد قيمتان محتملتان فقط لهذا النوع: true و false. غالبًا ما تكون القيم المنطقية نتيجة للمقارنات. مثال:

    let x = 3 < 10; // x ستكون true
let y = 90 < 10; // y ستكون false

  • null: يمثل null الغياب المتعمد لأي قيمة كائنية. مثال:

    let value = null;

  • undefined: يمثل undefined قيمة متغير تم تعريفه ولكن لم يتم تعيين قيمة له بعد. مثال:

    let myVariable; // myVariable تكون undefined تلقائيًا

4. المتغيرات (Bindings)

فكر في المتغير على أنه نوع من السلة: يمكنك وضع عنصر في السلة، أو النظر داخل السلة، أو إفراغ محتويات السلة، أو حتى استبدال ما بداخل السلة بشيء آخر. على الرغم من أنك قد تُغيّر ما بداخل السلة، فإن السلة نفسها تظل كما هي. في جافاسكريبت، تُسمى المتغيرات أيضًا "ربطات" (bindings)، لأنها لا تحتوي على القيم، بل تمسك بها، مثل المخالب، ويمكن لربطين أن يشيروا إلى نفس القيمة. لا يمكن للبرنامج الوصول إلا إلى القيم التي لا يزال لديه مرجع لها.

تعريف المتغيرات: لتخزين البيانات في جافاسكريبت، يجب عليك أولاً تعريف متغير. تُستخدم الكلمة المفتاحية let لتعريف المتغيرات في جافاسكريبت الحديثة.

مثال على تعريف متغير وتعيين قيمة له:

let caught = 5 * 5; // يُعرف ربطًا اسمه "caught" ويُعيّن له القيمة 25

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

let ten = 10;
console.log(ten * ten); // → 100

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

let mood = "light";
console.log(mood); // → light
mood = "dark"; // يغير قيمة المتغير mood
console.log(mood); // → dark

const (الثوابت): تُستخدم الكلمة المفتاحية const لتعريف الثوابت. لا يمكن إعادة تعيين قيمة المتغيرات المعرفة بـ const بعد تعيينها الأولي. مثال:

const ACCESSORY_PRICE = 9.99; // قيمة ثابتة

إذا حاولت إعادة تعيين ACCESSORY_PRICE، فسيحدث خطأ.

تسمية المتغيرات (Naming Variables): اجعل أسماء المتغيرات سهلة القراءة. عند استخدام أكثر من كلمة في اسم متغير، إما أن تستخدم شرطة سفلية (_) بين الكلمات (مثال: image_path) أو تكبير الحرف الأول من كل كلمة بعد الأولى (camelCase) (مثال: imagePath).

نطاق المتغيرات (Variable Scope): يشير نطاق المتغير إلى الجزء من البرنامج حيث يمكن الوصول إلى هذا المتغير.

  • النطاق العام (Global Scope): المتغيرات المعرفة في النطاق العام تكون مرئية ومتاحة في أي مكان في البرنامج.

  • النطاق المحلي (Local/Block Scope): المتغيرات المعرفة داخل دالة أو كتلة (باستخدام let أو const) تكون متاحة فقط داخل تلك الدالة أو الكتلة. تُعرف هذه بـ "نطاق الكتلة" (block scope). المتغيرات المعرفة باستخدام var لا تلتزم بنطاق الكتلة؛ بدلاً من ذلك، فإنها إما أن يكون لها نطاق دالة (function scope) أو نطاق عام (global scope). لذا، من الأفضل استخدام let و const لضمان نطاق كتلة أو دالة محددة، مما يساعد على تجنب تضارب الأسماء والأخطاء. مثال على مشكلة النطاق مع var (لو كانت الكلمة المفتاحية var تُستخدم): 

    // (باستخدام var لأغراض التوضيح لمشكلة النطاق)
var fauxConstant = 123;
function badFunction() {
    var fauxConstant = 456; // هذا يُعرّف متغيرًا محليًا جديدًا
    console.log(fauxConstant); // يطبع 456
}
badFunction();
console.log(fauxConstant); // سيظل يطبع 123

    في هذا المثال، fauxConstant داخل badFunction() هو متغير محلي، ولا يؤثر على المتغير العام الذي يحمل نفس الاسم. هذا يُظهر أهمية "نطاق المتغيرات محليًا قدر الإمكان".

5. المعاملات/عوامل التشغيل (Operators)

المعاملات هي رموز تؤدي عمليات مع القيم والمتغيرات.

  • معاملات الحساب (Arithmetic Operators): تُستخدم هذه لأداء العمليات الرياضية.

    • +: الجمع (Addition).

    • -: الطرح (Subtraction).

    • *: الضرب (Multiplication).

    • /: القسمة (Division).

    • %: باقي القسمة (Remainder/Modulo). أولوية العمليات (Operator Precedence): الضرب والقسمة وباقي القسمة (*, /, %) لها أولوية أعلى من الجمع والطرح (+, -). لضمان أن تتم العمليات الحسابية بالترتيب الذي تريده، استخدم الأقواس () لتجميع العمليات. مثال: 

    4 + 5 * 10; // سيتم حساب 5 * 10 أولاً (50)، ثم 4 + 50 = 54
(4 + 5) * 10; // سيتم حساب (4 + 5) أولاً (9)، ثم 9 * 10 = 90

  • معاملات الإسناد المركبة (Compound Assignment Operators): تُستخدم هذه لتعديل قيمة متغير ثم إسناد النتيجة مرة أخرى إلى نفس المتغير.

    • +=: يضيف القيمة على اليمين إلى المتغير على اليسار. (مثال: score += 10 هي نفسها score = score + 10).

    • -=: يطرح القيمة على اليمين من المتغير على اليسار.

    • *=: يضرب المتغير على اليسار بالقيمة على اليمين.

    • /=: يقسم المتغير على اليسار بالقيمة على اليمين.

    • %=: يطبق باقي القسمة على المتغير على اليسار بالقيمة على اليمين.

    • ++: يزيد قيمة المتغير بمقدار 1. (مثال: num++ هي نفسها num = num + 1).

    • --: يقلل قيمة المتغير بمقدار 1.

  • معاملات المقارنة (Comparison Operators): تُستخدم لمقارنة قيمتين، وتُرجع نتيجة منطقية (true أو false).

    • ==: يساوي (Equal to). يُقارن قيمتين لمعرفة ما إذا كانتا متطابقتين. يمكن استخدامه لمقارنة الأرقام أو السلاسل النصية.

    • !=: لا يساوي (Not equal to). يُقارن قيمتين لمعرفة ما إذا كانتا غير متطابقتين.

    • ===: يساوي تمامًا (Strict equal to). يُقارن القيمتين وأيضًا نوع القيمة. يجب أن تتشارك القيمتان نفس النوع (سلسلة نصية، رقم، أو منطقية) لكي يكون الشرط صحيحًا. يُفضل العديد من المبرمجين هذا المعامل لأنه يضمن مقارنة أنواع متماثلة من المعلومات. مثال: 

      '2' == 2;   // → true (مقارنة ضعيفة، جافاسكريبت تحاول التحويل)
'2' === 2;  // → false (مقارنة صارمة، الأنواع مختلفة)

    • !==: لا يساوي تمامًا (Strict not equal to). يُقارن القيم والأنواع. مثال: 

      '2' != 2;   // → false
'2' !== 2;  // → true (الأنواع مختلفة)

    • >: أكبر من (Greater than).

    • <: أصغر من (Less than).

    • >=: أكبر من أو يساوي (Greater than or equal to).

    • <=: أصغر من أو يساوي (Less than or equal to).

  • معاملات المنطق (Logical Operators): تُستخدم لدمج الشروط أو قلب القيم المنطقية.

    • &&: و (AND). يُرجع true إذا كانت كلتا القيمتين صحيحتين. مثال: 

      if (a > 1 && a < 10) {
    // الكود هنا سيُنفذ فقط إذا كانت قيمة 'a' أكبر من 1 وأصغر من 10
}

    • ||: أو (OR). يُرجع true إذا كانت إحدى القيمتين (أو كلاهما) صحيحة.

    • !: لا (NOT). تُقلب القيمة المنطقية. إذا كانت القيمة true تصبح false، والعكس صحيح. مثال: 

      let x = false;
console.log(!x); // → true

6. تدفق التحكم (Control Flow)

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

  • العبارات الشرطية (Conditional Statements): تسمح هذه العبارات لبرنامجك باتخاذ قرارات بناءً على شروط معينة.

    • if و else: تُستخدم عبارة if لتنفيذ كتلة من الكود إذا كان شرط معين صحيحًا (true). يمكن إضافة عبارة else لتحديد كتلة كود بديلة يتم تنفيذها إذا كان الشرط خاطئًا (false). مثال: 

      let num = 15;
if (num < 10) {
    console.log("Small");
} else {
    console.log("Not small");
}
// → Not small

    • else if: يمكنك ربط عبارات if/else متعددة معًا لإنشاء مسارات اختيار متعددة. مثال: 

      let num = Number(prompt("Pick a number")); // يطلب من المستخدم إدخال رقم
if (num < 10) {
    console.log("Small");
} else if (num < 100) { // يُنفذ هذا إذا كان 'num' ليس أصغر من 10 ولكنه أصغر من 100
    console.log("Medium");
} else { // يُنفذ هذا إذا لم يتحقق أي من الشروط السابقة
    console.log("Large");
}

    • switch: تُستخدم عبارة switch عندما يكون لديك مسارات متعددة للاختيار بناءً على قيمة واحدة. غالبًا ما تكون أكثر أناقة وقابلية للقراءة من سلسلة طويلة من if/else if. مثال: 

      let day = new Date().getDay(); // يحصل على اليوم الحالي (0 للأحد، 1 للإثنين، وهكذا)
switch (day) {
    case 0: // إذا كان day يساوي 0
        console.log("Sunday");
        break; // يكسر من عبارة switch
    case 1: // إذا كان day يساوي 1
        console.log("Monday");
        break;
    default: // إذا لم تتطابق أي من الحالات
        console.log("Another day");
        break;
}

      الكلمة المفتاحية break مهمة هنا؛ بدونها، سيستمر الكود في التنفيذ عبر الحالات التالية (fall-through) حتى يجد break أو نهاية switch.

  • الحلقات (Loops): تسمح لك الحلقات بتكرار كتلة من الكود عدة مرات.

    • while Loop (حلقة طالما): تستمر حلقة while في تنفيذ كتلة الكود طالما أن الشرط المعطى لها صحيح (true). يُختبر الشرط قبل كل تنفيذ للكتلة. مثال:

      let count = 1;
while (count <= 10) {
    console.log(count);
    count += 1; // يزيد قيمة count بمقدار 1
}
// → 1 2 3 4 5 6 7 8 9 10

      ملاحظة: إذا نسيت تحديث المتغير المستخدم في الشرط (مثل count += 1)، فقد تصبح الحلقة لا نهائية (infinite loop)، مما قد يؤدي إلى تعليق صفحة الويب أو البرنامج.

    • do...while Loop (حلقة نفّذ طالما): تشبه حلقة do...while حلقة while، ولكنها تختلف في نقطة واحدة: حلقة do...while تنفذ جسمها مرة واحدة على الأقل دائمًا، وتبدأ في اختبار ما إذا كان يجب أن تتوقف فقط بعد هذا التنفيذ الأول. مثال:

      let guessNumber = 0;
let numberToGuess = 71;
let guess;
do {
    guess = Math.floor(Math.random() * 100); // توليد رقم عشوائي
    guessNumber++;
} while (guess != numberToGuess); // يتم اختبار الشرط بعد التنفيذ الأول
console.log(`I guessed it! It only took me ${guessNumber} guesses!`);

      هذه الحلقة ستُنفذ الكود داخل do مرة واحدة على الأقل قبل التحقق من الشرط guess != numberToGuess.

    • for Loop (حلقة من أجل): تُستخدم حلقة for بشكل شائع عندما تحتاج إلى تكرار سلسلة من الخطوات عددًا محددًا من المرات، وغالبًا ما تُستخدم للتكرار عبر عناصر المصفوفة. تتكون حلقة for من ثلاثة أجزاء داخل الأقواس، مفصولة بفاصلات منقوطة:

      1. التهيئة (Initialization): تُنفذ مرة واحدة فقط في بداية الحلقة (مثال: let i = 0;).

      2. الشرط (Condition): يُختبر قبل كل تكرار. إذا كان صحيحًا، تُنفذ كتلة الكود. إذا كان خاطئًا، تتوقف الحلقة.

      3. التحديث (Update): يُنفذ في نهاية كل تكرار بعد تنفيذ كتلة الكود (مثال: i++). مثال: 

      for (let i = 0; i < 10; i++) {
    console.log(i);
}
// → 0 1 2 3 4 5 6 7 8 9

      هذا المثال يُنشئ متغير i بقيمة 0، ثم يُنفذ الكتلة طالما i أصغر من 10، ويُزيد i بعد كل تكرار.

    • for/of Loop (حلقة من أجل/من): تُستخدم حلقة for/of للتكرار عبر العناصر في كائنات قابلة للتكرار مثل المصفوفات والسلاسل النصية. مثال:

      let phoneNumber = "555-757-1212";
for (let digit of phoneNumber) {
    if (digit === '-') continue; // تخطي الشرطات
    console.log(digit);
}
// → 5 5 5 7 5 7 1 2 1 2 (كل رقم في سطر جديد)

      تُقدم هذه الحلقة طريقة سهلة ومباشرة للتكرار عبر قيم المجموعة.

    • break و continue:

      1. break: تُستخدم لكسر (إنهاء) الحلقة أو عبارة switch بشكل فوري، وتنتقل إلى العبارة التي تلي الحلقة.

      2. continue: تُستخدم لتخطي التكرار الحالي للحلقة والانتقال إلى التكرار التالي.

7. الدوال/الوظائف (Functions)

الدوال هي كتل من الكود مصممة لأداء مهمة معينة، ويمكن استدعاؤها وإعادة استخدامها عدة مرات. إنها تساعد في تنظيم الكود وجعله أكثر قابلية للإدارة وإعادة الاستخدام.

تعريف الدالة (Defining a Function): تُعرف الدالة باستخدام الكلمة المفتاحية function متبوعة باسم الدالة، ثم قائمة بالمعاملات (parameters) داخل أقواس ()، وأخيرًا كتلة الكود التي تمثل جسم الدالة داخل أقواس معقوفة {}. مثال:

function greet(name) { // 'name' هو معامل
    console.log(`Hello, ${name}!`);
}

استدعاء الدالة (Calling a Function): لتنفيذ الكود داخل الدالة، يجب استدعاؤها باسمها متبوعًا بالأقواس التي تحتوي على القيم الفعلية (arguments) التي ستُمرر للمعاملات.

greet("Alice"); // 'Alice' هو وسيط
// → Hello, Alice!

المعاملات والوسائط (Parameters and Arguments):

  • المعاملات (Parameters): هي المتغيرات المدرجة في تعريف الدالة. تعمل كأماكن محددة للقيم التي ستُمرر إلى الدالة.

  • الوسائط (Arguments): هي القيم الفعلية التي تُمرر إلى الدالة عند استدعائها.

الوسائط الاختيارية ووسائط البقية (Optional Arguments and Rest Parameters): يمكن أن تقبل الدالة أي عدد من الوسائط. لاستقبال عدد غير محدد من الوسائط، يمكنك وضع ثلاث نقاط (...) قبل المعامل الأخير للدالة، مما يجمع جميع الوسائط المتبقية في مصفوفة. مثال:

function max(...numbers) { // '...numbers' هو معامل بقية
    let result = -Infinity;
    for (let number of numbers) {
        if (number > result) result = number;
    }
    return result;
}
console.log(max(4, 1, 9, -2)); // → 9

تُسمى الدوال التي يمكن أن تقبل أي عدد من الوسائط "دوال متغيرة السعة" (variadic functions) أو "دوال varargs".

القيمة المُعادة (Return Value): يمكن للدوال إرجاع قيمة باستخدام الكلمة المفتاحية return. عند تنفيذ عبارة return، تتوقف الدالة وتُرجع القيمة المحددة. مثال:

function add(a, b) {
    return a + b; // تُعيد مجموع a و b
}
let sum = add(5, 3); // sum ستكون 8

الدوال كقيم (Functions as Values): في جافاسكريبت، الدوال هي قيم عادية. هذا يعني أنه يمكن تخزينها في متغيرات، تمريرها كوسائط لدوال أخرى، أو إعادتها من دوال أخرى. مثال:

let square = function(x) { // دالة مخزنة في متغير
    return x * x;
};
console.log(square(5)); // → 25

تعبيرات الدوال (Function Expressions): عندما تُنشئ دالة كجزء من تعبير (مثل تعيينها لمتغير)، تُسمى تعبير دالة. يمكن أن تكون تعبيرات الدوال مجهولة (anonymous)، أي بدون اسم بعد الكلمة المفتاحية function.

دوال الأسهم (Arrow Functions): دوال الأسهم هي طريقة أكثر إيجازًا لكتابة تعبيرات الدوال، خاصةً الدوال المجهولة، وتم تقديمها في ECMAScript 6. مثال:

let multiply = (a, b) => a * b; // دالة سهمية بسيطة
console.log(multiply(12, 7)); // → 84

إذا كان جسم الدالة يتكون من عبارة واحدة فقط تُرجع قيمة، يمكنك حذف الأقواس المعقوفة والكلمة المفتاحية return.

setTimeout(() => console.log('done!'), 1000); // دالة سهمية تستدعي console.log بعد ثانية واحدة

لدوال الأسهم بعض القيود مقارنة بالدوال العادية (مثلاً، لا يمكن استخدام this الخاص بها).

الدوال ذات الترتيب الأعلى (Higher-Order Functions): الدوال ذات الترتيب الأعلى هي دوال تأخذ دوال أخرى كوسائط (تسمى دوال رد الاتصال - callbacks) أو تُرجع دالة. إنها مفهوم قوي يسمح بتجريد العمليات الشائعة. أمثلة على دوال الترتيب الأعلى المدمجة في جافاسكريبت:

  • Array.prototype.map(): تُنشئ مصفوفة جديدة عن طريق تطبيق دالة رد اتصال على كل عنصر في المصفوفة الأصلية.

  • Array.prototype.filter(): تُنشئ مصفوفة جديدة تحتوي على جميع العناصر التي تُرجع دالة رد الاتصال لها true.

  • Array.prototype.reduce(): تُطبق دالة رد اتصال على مُجمّع وكل عنصر في المصفوفة (من اليسار إلى اليمين) لتقليل المصفوفة إلى قيمة واحدة.

الاستدعاء الذاتي (Recursion): الاستدعاء الذاتي هو تقنية تقوم فيها الدالة باستدعاء نفسها لحل مشكلة ما. يجب أن يكون هناك حالة أساسية (base case) تتوقف عندها الدالة عن استدعاء نفسها لتجنب حلقة لا نهائية (infinite loop) و"تجاوز مكدس الاستدعاءات" (stack overflow). مثال على دالة عاملة (factorial) باستخدام الاستدعاء الذاتي:

function factorial(n) {
    if (n === 0) { // الحالة الأساسية: 0! = 1
        return 1;
    } else {
        return n * factorial(n - 1); // الدالة تستدعي نفسها
    }
}
console.log(factorial(4)); // → 24 (4 * 3 * 2 * 1)

النطاق والانغلاق (Scope and Closure): كل دالة تُنشئ نطاقها الخاص. وهذا يعني أن المتغيرات المعرفة داخل الدالة تكون محلية لتلك الدالة ولا يمكن الوصول إليها من الخارج. الإنغلاق (Closure): هي قدرة الدالة على "الانغلاق على" المتغيرات في نطاقها الأب حتى بعد انتهاء الدالة الأب. مثال على الإنغلاق:

function wrapValue(n) {
    let local = n;
    return () => local; // الدالة المُعادة 'تغلق على' المتغير 'local'
}
let wrap1 = wrapValue(1);
let wrap2 = wrapValue(2);
console.log(wrap1()); // → 1
console.log(wrap2()); // → 2

حتى بعد انتهاء wrapValue، لا تزال الدالة المُعادة تتذكر قيمة local التي تم إنشاؤها لها.

الدوال والآثار الجانبية (Functions and Side Effects): الدالة التي تحتوي على آثار جانبية (side effects) هي دالة تُغيّر شيئًا خارج نطاقها المحلي. هذا يمكن أن يشمل تعديل متغيرات عالمية، أو كتابة إلى الشاشة، أو تغيير بنية بيانات خارج الدالة. غالبًا ما يكون من المستحسن تجنب الآثار الجانبية غير المقصودة للحفاظ على الكود نظيفًا وسهل الفهم والاختبار. مثال على دالة ذات تأثير جانبي (تعديل متغير عالمي):

let total = 0;
function addTotal(value) {
    total += value; // هذا تأثير جانبي: يغير المتغير العالمي 'total'
}
addTotal(10);
console.log(total); // → 10

8. الكائنات والبيانات المهيكلة

بالإضافة إلى الأنواع الأولية، توفر جافاسكريبت أنواع بيانات أكثر تعقيدًا مثل الكائنات (Objects) والمصفوفات (Arrays).

  • الكائنات (Objects): الكائن في جافاسكريبت هو مجموعة من الخصائص. كل خاصية عبارة عن زوج من الاسم والقيمة. يمكن أن تكون أسماء الخصائص سلاسل نصية (تُكتب كحرفي سلسلة نصية) أو رموز (Symbols)، ويمكن أن تكون القيم أي نوع بيانات في جافاسكريبت، بما في ذلك الكائنات الأخرى أو الدوال. إنشاء الكائنات: غالبًا ما تُنشأ الكائنات باستخدام صيغة الكائن الحرفي ({}). مثال:

    let user = {
    name: "Ali",       // خاصية 'name' بقيمة "Ali"
    age: 30,           // خاصية 'age' بقيمة 30
    isAdmin: true      // خاصية 'isAdmin' بقيمة true
};

    الوصول إلى الخصائص: يمكنك الوصول إلى خصائص الكائن باستخدام تدوين النقطة (.) أو تدوين الأقواس المربعة ([]).

    console.log(user.name);    // → Ali
console.log(user["age"]);  // → 30

    القابلية للتغيير (Mutability): الكائنات في جافاسكريبت قابلة للتغيير (mutable). هذا يعني أنه يمكنك تغيير خصائص الكائن بعد إنشائه.

    user.age = 31; // تغيير قيمة الخاصية 'age'
user.city = "Cairo"; // إضافة خاصية جديدة

    الأساليب (Methods): الدوال المخزنة كخصائص لكائن تُسمى أساليب.

    let car = {
    brand: "Toyota",
    start: function() { // طريقة 'start'
        console.log("Engine started!");
    }
};
car.start(); // استدعاء الطريقة
// → Engine started!

  • المصفوفات (Arrays): المصفوفة هي قائمة مرتبة من القيم. تُستخدم لتخزين مجموعات من البيانات. إنشاء المصفوفات: تُنشأ المصفوفات غالبًا باستخدام صيغة المصفوفة الحرفية ([]). مثال:

    let numbers =;
let fruits = ["apple", "banana", "orange"];

    الوصول إلى العناصر: تُستخدم الأقواس المربعة ([]) مع مؤشر للوصول إلى عناصر المصفوفة. تبدأ المؤشرات من الصفر (zero-based indexing).

    console.log(numbers); // → 1 (أول عنصر)
console.log(fruits);  // → banana (العنصر الثاني)

    أساليب المصفوفات (Array Methods): توفر جافاسكريبت العديد من الأساليب المدمجة للعمل مع المصفوفات.

    • array.push(element): تُضيف عنصرًا واحدًا أو أكثر إلى نهاية المصفوفة وتُرجع الطول الجديد للمصفوفة.

    • array.pop(): تُزيل آخر عنصر من المصفوفة وتُعيده.

    • array.slice(startIndex, endIndex): تُرجع جزءًا (نسخة ضحلة) من المصفوفة في مصفوفة جديدة.

    • array.join(separator): يُدمج جميع عناصر المصفوفة في سلسلة نصية واحدة. يمكن تحديد فاصل بين العناصر.

    • array.forEach(callback): تُنفذ دالة رد اتصال مرة واحدة لكل عنصر في المصفوفة.

    • array.map(callback): تُنشئ مصفوفة جديدة تحتوي على نتائج استدعاء دالة رد اتصال مُعطاة على كل عنصر في المصفوفة الأصلية.

    • array.filter(callback): تُنشئ مصفوفة جديدة تحتوي على جميع العناصر التي تُرجع دالة رد الاتصال لها true.

    • array.reduce(callback, initialValue): تُطبق دالة رد الاتصال على مُجمّع وكل عنصر في المصفوفة (من اليسار إلى اليمين) لتقليل المصفوفة إلى قيمة واحدة.

9. مفاهيم متقدمة مختارة (نظرة سريعة)

  • البرمجة غير المتزامنة (Asynchronous Programming): في جافاسكريبت، بعض العمليات (مثل جلب البيانات من الخادم، أو قراءة الملفات) تستغرق وقتًا ولا يمكن أن تمنع تنفيذ بقية البرنامج. هنا تأتي أهمية البرمجة غير المتزامنة.

    • دوال رد الاتصال (Callbacks): هي دوال تُمرر كوسيط لدالة أخرى، وتُستدعى (تُنفذ) عندما تنتهي العملية غير المتزامنة. يمكن أن تؤدي كثرة الدوال المتداخلة إلى ما يُسمى "جحيم رد الاتصال" (callback hell) أو "مشكلة شجرة الكريسماس" (Christmas tree problem).

    • الوعود (Promises): هي كائنات تمثل الإنجاز النهائي (أو الفشل) لعملية غير متزامنة. إنها طريقة أفضل للتعامل مع العمليات غير المتزامنة وتجنب تداخل ردود الاتصال.

    • دوال async و await: هي ميزة حديثة في جافاسكريبت تُبسط العمل مع الوعود، مما يسمح لك بكتابة كود غير متزامن يبدو وكأنه كود متزامن.

  • نموذج كائن المستند (DOM - Document Object Model): DOM هو واجهة برمجة تطبيقات (API) للمستندات النصية والـ XML والـ HTML. يُنشئ متصفح الويب تمثيلاً شجريًا لهيكل صفحة HTML، حيث كل عنصر في HTML (مثل <div>, <p>, <a>) هو عقدة (node) في شجرة DOM. تسمح جافاسكريبت بالوصول إلى هذه العقد وتغييرها ديناميكيًا.

    • العقد (Nodes): كل جزء من وثيقة HTML هو عقدة. العناصر (Elements) لها الكود 1، والعقد النصية (Text nodes) لها الكود 3، والتعليقات (Comments) لها الكود 8.

    • خصائص DOM:

      • nodeType: تُحدد نوع العقدة.

      • childNodes: تُرجع قائمة بالعقد الفرعية للعقدة الحالية.

    • أساليب DOM:

      • document.createElement(tagName): تُنشئ عنصر HTML جديد.

      • parentElement.appendChild(childElement): تُضيف عقدة كطفل أخير لعقدة والد معينة.

      • element.remove(): تُزيل العنصر من DOM.

      • element.setAttribute(name, value): تُعين قيمة لسمة معينة لعنصر.

  • JSON (JavaScript Object Notation): JSON هو تنسيق بيانات خفيف الوزن ومستقل عن اللغة يُستخدم لتبادل البيانات بين الأنظمة. إنه سهل على البشر القراءة والكتابة، وسهل على الآلات التحليل والتوليد. يُشبه تنسيق JSON إلى حد كبير صيغة الكائن الحرفي في جافاسكريبت. مثال على بيانات JSON:

    {
  "name": "Mountain View",
  "cod": 200,
  "main": {
    "temp": 296.86,
    "pressure": 1013,
    "humidity": 37
  }
}

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

  • التعبيرات العادية (Regular Expressions - Regex): التعبيرات العادية هي أنماط تُستخدم لمطابقة مجموعات من الأحرف في السلاسل النصية. تُستخدم للبحث، والاستبدال، والتحقق من صحة الإدخالات.

    • معاملات التكرار (Repetition Operators): تُستخدم لتحديد عدد مرات تكرار النمط.

      • +: يُطابق تكرارًا واحدًا أو أكثر للنمط السابق.

      • *: يُطابق صفرًا أو أكثر من تكرارات النمط السابق.

      • ?: يُطابق صفرًا أو تكرارًا واحدًا للنمط السابق (يعني أن النمط اختياري).

      • {n}: يُطابق n تكرارًا بالضبط للنمط السابق.

      • {n,m}: يُطابق النمط السابق n على الأقل و m على الأكثر من التكرارات.

      • {n,}: يُطابق النمط السابق n أو أكثر من التكرارات.

    • المطابقة الجشعة مقابل غير الجشعة (Greedy vs. Nongreedy):

      • بشكل افتراضي، عوامل تكرار التعبير العادي (+, *, ?, {}) هي "جشعة" (greedy)، مما يعني أنها تُطابق أكبر قدر ممكن من النص.

      • لجعلها "غير جشعة" (nongreedy)، يمكنك وضع علامة استفهام ? بعد عامل التكرار (مثال: +?, *?, ??, { }?). هذا يجعلها تبدأ بمطابقة أقل قدر ممكن، وتُطابق المزيد فقط عندما لا يتناسب النمط المتبقي مع المطابقة الأصغر.

10. أدوات المطور (Developer Tools)

تُعد أدوات المطور المدمجة في متصفحات الويب (مثل Chrome's DevTools أو Firefox's Developer Tools) لا غنى عنها لتعلم جافاسكريبت وتصحيح الأخطاء. يمكنك استخدام وحدة التحكم (console) لتسجيل الرسائل، أو اختبار مقاطع الكود، أو فحص المتغيرات.

ملخص

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







Posted by at

ليست هناك تعليقات:

إرسال تعليق

مرحبًا بكم في مساحة الحوار!
نسعد بتعليقاتكم البنّاءة حول محتوى المقال.
يرجى الالتزام بأدب النقاش، وتجنّب وضع روابط إعلانية أو تعليقات خارجة عن الموضوع.
جميع التعليقات تخضع للمراجعة قبل النشر.
شكرًا لمشاركتكم معنا في بناء مجتمع معرفي متميز!