مقدمة:نوع البيانات “Object” في جافا سكريبت:
JavaScript هي لغة برمجة قوية تستخدم على نطاق واسع في تطوير تطبيقات الويب وتطبيقات الجانب الخادم والعديد من التطبيقات الأخرى. أحد أهم ميزات JavaScript هو دعمها للعديد من أنواع البيانات المختلفة، ومن بين هذه الأنواع يأتي نوع البيانات “Object” والذي يعتبر من الأساسيات في جافا سكريبت.
يتيح نوع البيانات “Object” في JavaScript إمكانية تمثيل البيانات بشكل هيكلي وتنظيمها في شكل كائنات. وتتكون الكائنات من مجموعة من الخصائص والطرق التي تمثل السلوك والمعلومات المتعلقة بالكائن.
تتضمن هذه المقدمة دراسة مفصلة لكيفية إنشاء واستخدام الكائنات في جافا سكريبت، بما في ذلك الطرق المختلفة لإنشاء الكائنات باستخدام Literal Notation و Constructor Function. سنغطي أيضًا كيفية إضافة وتعديل وحذف الخصائص في الكائنات، بالإضافة إلى استخدام الطرق (methods) لتنفيذ السلوك داخل الكائن.
مع فهمك الجيد لنوع البيانات “Object”، ستكون قادرًا على تطبيق هذه المفاهيم في تطوير تطبيقات JavaScript المتقدمة وإنشاء بنيات برمجية قوية ومنظمة.
نوع البيانات “JavaScript Object” هو أحد أنواع البيانات الأساسية في لغة البرمجة جافا سكريبت. يستخدم الكائنات (Objects) في جافا سكريبت لتمثيل البيانات بطريقة تنظيمية وتنظيمها في هياكل تسمى الكائنات.
يتكون الكائن من مجموعة من الخصائص (properties) والقيم المرتبطة بها. يمكن أن تكون قيم الخصائص أي نوع من أنواع البيانات في جافا سكريبت، بما في ذلك الأرقام، والسلاسل النصية، وحتى قيم الكائنات الأخرى.
على سبيل المثال، يمكن أن يكون لديك كائنًا يمثل معلومات شخص، حيث تكون الخصائص مثل “الاسم” و”العمر” و”البريد الإلكتروني” وقيمها تحتوي على بيانات محددة. يمكن الوصول إلى هذه الخصائص وتعديل قيمها باستخدام الجافا سكريبت.
هذا المفهوم مهم جدًا في جافا سكريبت لأن الكائنات تسهل تنظيم وإدارة البيانات بشكل فعال ويتيح للمطورين تنظيم الشيفرة بشكل منطقي ومنظم.
لإنشاء كائن في جافا سكريبت، يمكن اتباع الخطوات التالية:
تعريف المتغير: ابدأ بتعريف متغير باستخدام الكلمة الرئيسية var أو let أو const تليه اسم المتغير.
إنشاء الكائن: استخدم القوسين المنحنيين {} لإنشاء الكائن.
تعريف الخصائص: داخل القوسين المنحنيين، قم بتعريف الخصائص بواسطة الاسم الذي تريد استخدامه لكل خاصية، متبوعًا برمز الـ : ثم قيمة الخاصية.
تعديل الخصائص (اختياري): يمكنك تعديل قيم الخصائص بعد إنشائها بالوصول إليها مباشرة وتعديلها.
استخدام الكائن: يمكنك الآن استخدام الكائن في الشيفرة عن طريق الوصول إلى خصائصه واستخدامها كما تحتاج.
قد يبدو ذلك مثل هذا في الشيفرة:
مثال:
// 1. تعريف المتغير وإنشاء الكائن var person = {}; // 2. تعريف الخصائص person.name = "John"; person.age = 30; person.email = "john@example.com"; // 3. تعديل الخصائص (اختياري) person.age = 31; // 4. استخدام الكائن console.log(person.name); // يطبع: John console.log(person.age); // يطبع: 31 console.log(person.email); // يطبع: john@example.com
هذه هي الخطوات الأساسية لإنشاء كائن في جافا سكريبت.
هاكم مثالا شاملا على كيفية استخدام كائن JavaScript في صفحة ويب. في هذا المثال، سنقوم بإنشاء كائن يمثل معلومات شخص ونعرضها في صفحة HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Object Example</title> <style> body { font-family: Arial, sans-serif; } </style> </head> <body> <h1>معلومات الشخص</h1> <div id="personInfo"></div> <script> // 1. تعريف المتغير وإنشاء الكائن var person = {}; // 2. تعريف الخصائص person.name = "أحمد"; person.age = 25; person.email = "ahmed@example.com"; // 3. استخدام الكائن لعرض المعلومات في الصفحة var personInfoDiv = document.getElementById("personInfo"); personInfoDiv.innerHTML = "<p><strong>الاسم:</strong> " + person.name + "</p>" + "<p><strong>العمر:</strong> " + person.age + "</p>" + "<p><strong>البريد الإلكتروني:</strong> " + person.email + "</p>"; </script> </body> </html>
في هذا المثال:
نقوم بتعريف كائن person وتعريف خصائصه مثل الاسم والعمر والبريد الإلكتروني.
ثم نقوم بتحديد عنصر div في صفحة HTML حيث سنقوم بعرض معلومات الشخص.
نستخدم خصائص الكائن لتعبئة محتوى العنصر div باستخدام خصائص الشخص.
عند تشغيل هذا الملف HTML، سترى معلومات الشخص المعرفة تلقائيًا تظهر في الصفحة.
:Methods to create JavaScript object
هناك عدة طرق لإنشاء كائنات JavaScript، وفيما يلي سأشرح بإيجاز ثلاثة منها:
يتم إنشاء الكائن مباشرةً باستخدام القوسين المنحنيين {}.
يتم تحديد الخصائص وقيمها داخل هذه القوسين، حيث يتم فصل كل خصائص عن الأخرى بفاصلة.
مثال:
var person = { name: "John", age: 30, email: "john@example.com" };
يتم استخدام دوال لإنشاء الكائنات، حيث تقوم الدالة بتهيئة الكائن وتعيين الخصائص له. عند استخدام الدالة باستخدام new، يتم إنشاء كائن جديد.
مثال:
function Person(name, age, email) { this.name = name; this.age = age; this.email = email; } var person1 = new Person("John", 30, "john@example.com");
تنشئ هذه الطريقة كائنًا جديدًا، حيث يتم تحديد الكائن الأصلي (النموذج) كمعامل للوظيفة. يمكن تمرير الخصائص الإضافية كمعلمات للوظيفة.
مثال:
var personPrototype = { greeting: function() { return "Hello, my name is " + this.name; } }; var person = Object.create(personPrototype); person.name = "John"; person.age = 30; person.email = "john@example.com";
في هذه الطرق، يمكنك اختيار الأنسب لاحتياجاتك وتفضيلاتك في البرمجة.
مثال شامل على كيفية استخدام الطريقة Literal Notation (التعبير الحرفي) لإنشاء كائن JavaScript وعرضه في صفحة ويب:
<!DOCTYPE html> <html lang="en" dir=rtl> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Literal Notation Example</title> <style> body { font-family: Arial, sans-serif; } </style> </head> <body> <h1>معلومات الشخص</h1> <div id="personInfo"></div> <script> // 1. إنشاء الكائن باستخدام الطريقة Literal Notation var person = { name: "أحمد", age: 25, email: "ahmed@example.com" }; // 2. عرض معلومات الشخص في الصفحة var personInfoDiv = document.getElementById("personInfo"); personInfoDiv.innerHTML = "<p><strong>الاسم:</strong> " + person.name + "</p>" + "<p><strong>العمر:</strong> " + person.age + "</p>" + "<p><strong>البريد الإلكتروني:</strong> " + person.email + "</p>"; </script> </body> </html>
في هذا المثال:
نقوم بإنشاء كائن person باستخدام الطريقة Literal Notation، حيث نحدد الخصائص مباشرة داخل القوسين المنحنيين {}.
بعد ذلك، نقوم بعرض معلومات الشخص في صفحة HTML عن طريق تعبئة عنصر div بالمعلومات التي تم تحديدها في الكائن.
مثال شامل على كيفية استخدام دالة البناء (Constructor Function) في صفحة ويب:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Constructor Function Example</title> <style> body { font-family: Arial, sans-serif; } </style> </head> <body> <h1>معلومات الشخص</h1> <div id="personInfo"></div> <script> // 1. تعريف دالة البناء (Constructor Function) function Person(name, age, email) { this.name = name; this.age = age; this.email = email; this.greeting = function() { return "Hello, my name is " + this.name; }; } // 2. إنشاء كائن باستخدام الدالة Person var person = new Person("أحمد", 25, "ahmed@example.com"); // 3. عرض معلومات الشخص في الصفحة var personInfoDiv = document.getElementById("personInfo"); personInfoDiv.innerHTML = "<p><strong>الاسم:</strong> " + person.name + "</p>" + "<p><strong>العمر:</strong> " + person.age + "</p>" + "<p><strong>البريد الإلكتروني:</strong> " + person.email + "</p>" + "<p><strong>التحية:</strong> " + person.greeting() + "</p>"; </script> </body> </html>
في هذا المثال:
نقوم بتعريف دالة البناء Person التي تأخذ معلمات لتحديد خصائص الشخص مثل الاسم والعمر والبريد الإلكتروني. هذه الدالة تقوم بتعيين القيم الممررة إليها كقيم لخصائص الكائن.
بعد ذلك، نقوم بإنشاء كائن جديد باستخدام الدالة Person باستخدام new.
ثم نقوم بعرض معلومات الشخص في صفحة HTML عن طريق تعبئة عنصر div بالمعلومات التي تم تحديدها في الكائن، بما في ذلك استدعاء دالة greeting() التي تم تعريفها كجزء من الكائن.
مثال شامل على كيفية استخدام طريقة Object.create() لإنشاء كائن JavaScript في صفحة ويب:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Object.create() Method Example</title> <style> body { font-family: Arial, sans-serif; } </style> </head> <body> <h1>معلومات الشخص</h1> <div id="personInfo"></div> <script> // 1. تعريف الكائن النموذج (Prototype Object) var personPrototype = { greeting: function() { return "Hello, my name is " + this.name; } }; // 2. إنشاء كائن باستخدام طريقة Object.create() var person = Object.create(personPrototype); person.name = "أحمد"; person.age = 25; person.email = "ahmed@example.com"; // 3. عرض معلومات الشخص في الصفحة var personInfoDiv = document.getElementById("personInfo"); personInfoDiv.innerHTML = "<p><strong>الاسم:</strong> " + person.name + "</p>" + "<p><strong>العمر:</strong> " + person.age + "</p>" + "<p><strong>البريد الإلكتروني:</strong> " + person.email + "</p>" + "<p><strong>التحية:</strong> " + person.greeting() + "</p>"; </script> </body> </html>
في هذا المثال:
نقوم بتعريف كائن النموذج (Prototype Object) personPrototype الذي يحتوي على خاصية greeting() لتحية الشخص. هذا الكائن يعتبر النموذج الأصلي للكائنات التي سننشئها.
ثم نقوم بإنشاء كائن جديد باستخدام طريقة Object.create()، حيث نحدد personPrototype كمعامل للوظيفة. ثم نضيف خصائص إضافية لهذا الكائن مثل الاسم والعمر والبريد الإلكتروني.
بعد ذلك، نقوم بعرض معلومات الشخص في صفحة HTML عن طريق تعبئة عنصر div بالمعلومات التي تم تحديدها في الكائن، بما في ذلك استدعاء دالة greeting() التي تم تعريفها في النموذج.
إضافة وتعديل خاصية في كائن JavaScript يمكن القيام بها بطرق مختلفة. إليك كيفية القيام بذلك:
يمكنك إضافة خاصية جديدة إلى كائن JavaScript باستخدام العمليات التالية:
var person = {}; person.name = "John";
var person = {}; person["age"] = 30;
يمكنك تعديل قيمة خاصية موجودة في كائن JavaScript ببساطة عن طريق تعيين قيمة جديدة لها:
var person = { name: "John", age: 30 }; person.age = 31;
var person = { name: "John", age: 30 }; person["age"] = 31;
عند استخدام القوسين، يمكنك استخدام تعبيرات ديناميكية لتحديد اسم الخاصية.
باستخدام أي من الطرق المذكورة أعلاه، يمكنك بسهولة إضافة خصائص جديدة إلى كائن JavaScript أو تعديل الخصائص الموجودة بالفعل وتحديث قيمها.
مثال شامل على كيفية إضافة وتعديل خاصية في كائن JavaScript مع الشرح:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Adding and Modifying Properties in JavaScript Object</title> <style> body { font-family: Arial, sans-serif; } </style> </head> <body> <h1>Adding and Modifying Properties in JavaScript Object</h1> <div id="personInfo"></div> <script> // إنشاء كائن فارغ var person = {}; // إضافة خصائص إلى الكائن person.name = "John"; person.age = 30; // عرض معلومات الشخص قبل التعديل var beforeModification = document.createElement("p"); beforeModification.textContent = "معلومات الشخص قبل التعديل: الاسم - " + person.name + "، العمر - " + person.age; document.getElementById("personInfo").appendChild(beforeModification); // تعديل خصائص الكائن person.name = "Ahmed"; person.age = 31; // عرض معلومات الشخص بعد التعديل var afterModification = document.createElement("p"); afterModification.textContent = "معلومات الشخص بعد التعديل: الاسم - " + person.name + "، العمر - " + person.age; document.getElementById("personInfo").appendChild(afterModification); </script> </body> </html>
في هذا المثال:
نبدأ بإنشاء كائن فارغ.
ثم نضيف خصائص إلى هذا الكائن باستخدام العمليات person.name = “John”; و person.age = 30;.
بعد ذلك، نقوم بعرض معلومات الشخص قبل التعديل عن طريق إنشاء عنصر فقري في HTML وتعبئته بالبيانات.
بعد ذلك، نقوم بتعديل الخصائص باستخدام العمليات person.name = “Ahmed”; و person.age = 31;.
أخيرًا، نقوم بعرض معلومات الشخص بعد التعديل بنفس الطريقة التي تم بها عرض المعلومات قبل التعديل، لكن هذه المرة نقوم بتحديث القيم.
How to delete a property from an object ?
لحذف خاصية من كائن JavaScript، يمكنك استخدام العبارة delete مع اسم الخاصية التي تريد حذفها. إليك كيفية القيام بذلك:
var person = { name: "John", age: 30, email: "john@example.com" }; // حذف خاصية من الكائن delete person.age;
في هذا المثال، سيتم حذف خاصية age من كائن person. بعد تنفيذ العبارة delete person.age;، لن يكون لدى الكائن الخاصية age بعد ذلك.
يجب أن تلاحظ أن استخدام delete ليس بشكل دائم، وقد يؤدي إلى تحرير الموارد الرامية التي تشغلها الخاصية المحذوفة. في معظم الحالات، يتم استخدام delete لحذف خاصيات محددة في كائنات JavaScript الدائمة في الذاكرة.
في جافا سكريبت، يمكن أن تحتوي الكائنات (Objects) على خصائص (properties) وطرق (methods).
الطرق في الكائنات هي وظائف (functions) مرتبطة بالكائن. يمكن استخدام الطرق لتنفيذ إجراءات معينة على الكائن أو لتنفيذ عمليات محددة تتعلق بالكائن.
لإضافة طريقة إلى كائن في جافا سكريبت، يمكنك تعريف وظيفة داخل الكائن بنفس الطريقة التي تعرف بها الخصائص. على سبيل المثال:
var person = { name: "John", age: 30, sayHello: function() { return "Hello, my name is " + this.name + " and I am " + this.age + " years old."; } };
في هذا المثال، تم إضافة طريقة sayHello() إلى كائن person. هذه الطريقة تُعرف باستخدام وظيفة تقوم بإرجاع رسالة ترحيب تحتوي على اسم الشخص وعمره.
ثم يمكن استدعاء هذه الطريقة باستخدام اسم الكائن متبوعًا بالنقطة واسم الطريقة:
console.log(person.sayHello()); // سيطبع: "Hello, my name is John and I am 30 years old."
بهذه الطريقة، يمكن للطرق في الكائنات القيام بالمزيد من الوظائف والعمليات المخصصة للكائنات، مما يتيح لك كتابة شيفرة أكثر تنظيمًا وإدارة لتطبيقاتك في جافا سكريبت.
مثال شامل على كيفية إضافة واستخدام طريقة في كائن JavaScript مع الشرح:
في هذا المثال، سنقوم بإنشاء كائن يمثل شخصًا وسنضيف طريقة إلى هذا الكائن لحساب سن الشخص بناءً على تاريخ ميلاده.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Object Method Example</title> <style> body { font-family: Arial, sans-serif; } </style> </head> <body> <h1>Object Method Example</h1> <div id="personInfo"></div> <script> // تعريف كائن الشخص var person = { name: "John", birthYear: 1990, calculateAge: function() { // حساب العمر باستخدام تاريخ الميلاد var currentYear = new Date().getFullYear(); var age = currentYear - this.birthYear; return age; } }; // استخدام الطريقة لحساب العمر var personAge = person.calculateAge(); // عرض معلومات الشخص وعمره في الصفحة var personInfoDiv = document.getElementById("personInfo"); personInfoDiv.innerHTML = "<p><strong>Name:</strong> " + person.name + "</p>" + "<p><strong>Birth Year:</strong> " + person.birthYear + "</p>" + "<p><strong>Age:</strong> " + personAge + "</p>"; </script> </body> </html>
في هذا المثال:
نقوم بتعريف كائن الشخص person ونضيف خصائصه مثل الاسم وسنة الميلاد.
ثم نقوم بإضافة طريقة calculateAge() إلى الكائن. هذه الطريقة تستخدم تاريخ الميلاد الموجود في الكائن لحساب عمر الشخص باستخدام التاريخ الحالي.
بعد ذلك، نستخدم الطريقة calculateAge() لحساب عمر الشخص.
أخيرًا، نقوم بعرض معلومات الشخص بما في ذلك العمر الحسابي في الصفحة.
في هذا التطبيق الشامل، سنقوم بإنشاء نظام بسيط لإدارة قائمة المهام (To-Do List) باستخدام HTML، CSS، و JavaScript. سيتضمن التطبيق إضافة مهمة جديدة، عرض قائمة المهام، وحذف مهمة.
الشرح:
قمنا بإنشاء عنصر input لإدخال المهام الجديدة وزر button لإضافتها.
استخدمنا عنصر ul لعرض قائمة المهام. سنقوم بتحديث هذا العنصر ديناميكيًا باستخدام جافا سكريبت.
نربط الجزء الخاص بالسكريبت بالأحداث في HTML، حيث سنستدعي الدالة addTask() عند النقر على الزر “Add Task”.
جافا سكريبت:
// جافا سكريبت لإضافة وعرض المهام function addTask() { var taskInput = document.getElementById("taskInput"); var taskList = document.getElementById("taskList"); var taskText = taskInput.value; if (taskText.trim() !== "") { var li = document.createElement("li"); li.textContent = taskText; var deleteButton = document.createElement("button"); deleteButton.textContent = "Delete"; deleteButton.onclick = function() { taskList.removeChild(li); }; li.appendChild(deleteButton); taskList.appendChild(li); taskInput.value = ""; } else { alert("Please enter a task."); } }
الشرح:
في الدالة addTask()، نقوم بالحصول على قيمة المهمة المدخلة من العنصر input.
ثم نقوم بإنشاء عنصر li لعرض المهمة ضمن قائمة ul، ونضيفها إلى القائمة.
بعد ذلك، ننشئ زر “Delete” لكل مهمة، وعند النقر عليه، سيتم حذف المهمة من القائمة.
إذا تم ترك حقل المهمة فارغًا، سيتم عرض رسالة تنبيه للمستخدم.
بهذا، يكون لدينا تطبيق بسيط وشامل لإدارة قائمة المهام باستخدام HTML، CSS، و JavaScript.
اختبار بسسط على الدرس عن :javascript data type object
كويز بسيط حول نوع البيانات “Object” في جافا سكريبت:
JavaScript Data Type: Object Quiz
أ) Object
ب) String
ج) Number
د) Boolean
أ) var person = (name: “John”, age: 30);
ب) var person = {name: “John”, age: 30};
ج) var person = new Object(“John”, 30);
د) var person = Object.create(“John”, 30);
أ) addProperty()
ب) assignProperty()
ج) setProperty()
د) الجميع خاطئة
أ) removeProperty()
ب) deleteProperty()
ج) discardProperty()
د) clearProperty()
أ) editProperty()
ب) modifyProperty()
ج) changeProperty()
د) الجميع خاطئة
الجواب الصحيح: أ) Object.
في جافا سكريبت، يُمثل نوع البيانات “Object” الكائنات، وهو واحد من أهم أنواع البيانات في اللغة.
الجواب الصحيح: ب) var person = {name: “John”, age: 30};.
الطريقة الأساسية لتعريف كائن في جافا سكريبت باستخدام Literal Notation هي بوضع الخصائص وقيمها داخل قوسي الأقواس {}.
الجواب الصحيح: د) الجميع خاطئة.
يتم إضافة خاصية جديدة إلى كائن JavaScript باستخدام النقطة (.) أو القوسين المربعين ([]).
الجواب الصحيح: ب) deleteProperty().
يستخدم الدالة delete لحذف خاصية من كائن JavaScript.
الجواب الصحيح: د) الجميع خاطئة.
لتعديل قيمة خاصية موجودة في كائن JavaScript، يمكنك ببساطة تعيين قيمة جديدة لهذه الخاصية.
هذا هو الكويز حول نوع البيانات “Object” في جافا سكريبت، والإجابات الصحيحة موضحة بالإجابات المشار إليها بالأحرف الأبجدية.
أ) object.property
ب) object[property]
ج) object->property
د) object::property
أ) object.clone()
ب) object.copy()
ج) Object.clone(object)
د) Object.assign({}, object)
أ) لا فرق بينهما
ب) يستخدم Literal Notation القوسين المنحنيين {}، بينما يستخدم Constructor Function الكلمة الرئيسية new
ج) يستخدم Constructor Function القوسين المنحنيين {}، بينما يستخدم Literal Notation الكلمة الرئيسية new
د) لا يمكن استخدام Constructor Function لإنشاء كائنات
أ) hasProperty()
ب) containsProperty()
ج) hasOwnProperty()
د) checkProperty()
أ) typeof
ب) checkType()
ج) getType()
د) typeOf()
أ) Object
ب) var person = {name: “John”, age: 30};
د) الجميع خاطئة
ب) deleteProperty()
د) الجميع خاطئة
أ) object.property
د) Object.assign({}, object)
ب) يستخدم Literal Notation القوسين المنحنيين {}، بينما يستخدم Constructor Function الكلمة الرئيسية new
ج) hasOwnProperty()
أ) typeof