دورة برمجة JavaScript مجانا الدرس الخامس

 دورة برمجة JavaScript - الدرس الخامس: الكائنات (Objects)
في هذا الدرس، سنتعرف على مفهوم الكائنات في JavaScript وكيفية استخدامها لتخزين البيانات والخصائص بطريقة منظمّة.
1. ما هو الكائن (Object)؟
الكائن هو نوع من البيانات في JavaScript يُستخدم لتخزين مجموعات من القيم في شكل خصائص (Properties) تحتوي على قيم معينة. الكائنات تُستخدم بشكل شائع لتمثيل كيانات معقدة تحتوي على خصائص متعددة.
2. تعريف الكائن:
يمكنك تعريف كائن باستخدام الأقواس المعقوفة

{}

، وتحديد الخصائص داخل الكائن باستخدام الزوج المفتاح: القيمة (

key: value

).
الهيكل الأساسي للكائن هو:

let person = {
  name: "محمد",
  age: 30,
  city: "عمان"
};

في هذا المثال، تم تعريف كائن باسم

person

يحتوي على ثلاث خصائص:

name

,

age

, و

city

.
3. الوصول إلى خصائص الكائن:
يمكنك الوصول إلى خصائص الكائن باستخدام إما النقطة (

.

) أو الأقواس (

[]

).
مثال:

let person = {
  name: "محمد",
  age: 30,
  city: "عمان"
};
console.log(person.name);  // ستتم طباعة "محمد"
console.log(person["age"]);  // ستتم طباعة 30

4. تعديل خصائص الكائن:
يمكنك تعديل خصائص الكائن بسهولة باستخدام النقطة أو الأقواس.
مثال:

let person = {
  name: "محمد",
  age: 30,
  city: "عمان"
};
// تعديل القيمة
person.age = 35;
person["city"] = "دبي";
console.log(person.age);  // ستتم طباعة 35
console.log(person.city);  // ستتم طباعة "دبي"

5. إضافة خصائص جديدة:
يمكنك إضافة خصائص جديدة إلى الكائن بعد تعريفه باستخدام النقطة أو الأقواس.
مثال:

let person = {
  name: "محمد",
  age: 30
};
// إضافة خصائص جديدة
person.city = "عمان";
person["job"] = "مطور ويب";
console.log(person.city);  // ستتم طباعة "عمان"
console.log(person.job);  // ستتم طباعة "مطور ويب"

6. حذف خصائص الكائن:
يمكنك حذف خصائص الكائن باستخدام الكلمة المحجوزة

delete

.
مثال:

let person = {
  name: "محمد",
  age: 30,
  city: "عمان"
};
// حذف خاصية
delete person.city;
console.log(person.city);  // ستتم طباعة undefined

7. الكائنات داخل الكائنات:
يمكنك أيضاً تعريف كائنات داخل كائنات أخرى. هذا يسمح لك بتمثيل الهياكل المعقدة بشكل أفضل.
مثال:

let person = {
  name: "محمد",
  age: 30,
  address: {
    city: "عمان",
    street: "شارع الملك عبدالله"
  }
};
console.log(person.address.city);  // ستتم طباعة "عمان"

8. الدوال داخل الكائنات (Methods):
يمكنك إضافة دوال داخل الكائنات. تُعرف هذه الدوال بـ "الطرق" (Methods)، ويمكن استدعاؤها باستخدام النقطة.
مثال:

let person = {
  name: "محمد",
  age: 30,
  greet: function() {
    console.log("مرحبًا، اسمي " + this.name);
  }
};
person.greet();  // ستتم طباعة "مرحبًا، اسمي محمد"

في هذا المثال،

greet

هي دالة داخل الكائن

person

، وتستخدم الكلمة المحجوزة

this

للإشارة إلى الكائن نفسه.
9. استخدام الكائنات مع الحلقات:
يمكنك استخدام الحلقات للتعامل مع خصائص الكائنات. مثلًا، يمكنك استخدام

for...in

للمرور على جميع الخصائص في الكائن.
مثال:

let person = {
  name: "محمد",
  age: 30,
  city: "عمان"
};
for (let key in person) {
  console.log(key + ": " + person[key]);
}

سيتم طباعة:

name: محمد
age: 30
city: عمان

10. الكائنات في JavaScript الحديثة:
في JavaScript الحديثة، يمكنك استخدام "التدمير" (Destructuring) لاستخراج القيم من الكائنات بسهولة.
مثال:

let person = {
  name: "محمد",
  age: 30,
  city: "عمان"
};
let { name, age } = person;
console.log(name);  // ستتم طباعة "محمد"
console.log(age);   // ستتم طباعة 30

ملخص الدرس:
في هذا الدرس، تعلمنا كيفية:

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

الدرس المقبل سيركز على المصفوفات (Arrays) وكيفية استخدامها في JavaScript.