استخدام الأجسام في جافا سكريبت

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

 إنشاء جسم فارغ وإضافة خصائص إليه

بينما يمكن  إنشاء جسم فارغ وإضافة خصائص إليه كما يلي:

```javascript
var car = {};
car.name = 'BMW';
car.model = 'X 12';
car.name = 'Merceds';
```

في المثال أعلاه، بينما يمكن بإنشاء جسم فارغ ثم أضفنا خاصيتين `name` و `model` إليه. لاحظ أنه يمكن تعديل قيمة الخاصية كما فعلنا مع `car.name`.

 إنشاء جسم يحتوي على خصائص مبدئية

بينما يمكن أيضًا إنشاء جسم يحتوي على خصائص مبدئية مباشرة عند إنشائه:

```javascript
var skills = [
'HTML5',
'CSS3',
'Javascript'
];

var member = {
name: 'Basel',
age: 12,
nationality: 'Egypt',
skills
};
member.name = 'Ahmed';
```

 حذف خاصية من الجسم

لحذف خاصية من الجسم، نستخدم الكلمة المفتاحية `delete` كما يلي:

```javascript
delete member.name;
console.log(member);
```

 التعامل مع مصفوفة تحتوي على أجسام

هكذا يمكن أيضًا التعامل مع مصفوفة تحتوي على أجسام، حيث  سنقوم بإنشاء مصفوفة `members` تحتوي على عدة أجسام، ثم  نضيف جسمًا جديدًا إليها باستخدام `push`:

```javascript
var members = [
{
name: 'Mahmoud',
age: 12,
nationality: 'Egypt'
},
{
name: 'Nader',
age: 12,
nationality: 'Egypt'
},
{
name: 'Basel',
age: 12,
nationality: 'Egypt'
},
member,
{
name: 'Wael',
age: 12,
nationality: 'Egypt'
}
];
members.push({
name: 'Belal',
age: 12,
nationality: 'Egypt'
});
```

 عرض معلومات الأجسام باستخدام HTML

لنعرض معلومات الأجسام الموجودة في المصفوفة `members` باستخدام HTML، ثم يمكن استخدام كود جافا سكريبت لإنشاء قائمة غير مرتبة (ul) تحتوي على قائمة فرعية (li) لكل عضو:

```javascript
var html_members = '<ul>';

members.forEach(function (value) {
html_members += `<li>
<ul>
<li>` + value.name + `</li>
<li>` + value.age + `</li>
<li>` + value.nationality + `</li>`;

if (value.skills != undefined && value.skills.length > 0) {
html_members += '<li><ol>';
value.skills.forEach(function (skill) {
html_members += '<li> ' + skill + ' </li>';
});
html_members += '</ol></li>';
}

html_members += `
</ul>
</li>`;
});

html_members += '</ul>';

document.body.innerHTML += html_members;
```

 ملخص الأساليب المستخدمة

- إنشاء جسم فارغ وإضافة خصائص إليه:
```javascript
var car = {};
car.name = 'BMW';
car.model = 'X 12';
car.name = 'Merceds';
```

- إنشاء جسم يحتوي على خصائص مبدئية:
```javascript
var member = {
name: 'Basel',
age: 12,
nationality: 'Egypt',
skills
};
```

- حذف خاصية من الجسم:
```javascript
delete member.name;
```

- التعامل مع مصفوفة تحتوي على أجسام:
```javascript
var members = [ {name: 'Mahmoud', age: 12, nationality: 'Egypt'}, ... ];
members.push({ name: 'Belal', age: 12, nationality: 'Egypt' });
```

- عرض معلومات الأجسام باستخدام HTML:
```javascript
var html_members = '<ul>';
members.forEach(function (value) {
html_members += `<li> ... </li>`;
});
html_members += '</ul>';
document.body.innerHTML += html_members;
```

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