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

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

ناروتو

11-01-2025 02:30 صباحاً

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

CODE

{}

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

CODE

key: value

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

CODE

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

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

CODE

person

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

CODE

name

CODE

age

, و

CODE

city

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

CODE

) أو الأقواس (

CODE

[]

).
مثال:

CODE

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

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

CODE

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

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

CODE

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

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

CODE

delete

.
مثال:

CODE

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

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

CODE

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

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

CODE

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

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

CODE

greet

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

CODE

person

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

CODE

this

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

CODE

for...in

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

CODE

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

سيتم طباعة:

CODE

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

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

CODE

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

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

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

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

[ :: ملتقـــى شباب سبيـــس بــاور :: ]