٤.٢ تدريبات إضافية¶

الوصول إلى الخصائص¶

التمرين 1: مثّل كتابًا بكائن JavaScript، وزنه 0.5 كغ وعدد صفحاته 500.

var book = {
  weight: 0.5,
  pages: 500
};

التمرين 2: ارجع إلى التمرين 1؛ ما وزن الكتاب؟

var book = {
  weight: 0.5,
  pages: 500
};

console.log(book["weight"]);

النتيجة هي: 0.5

التمرين 3: ارجع إلى التمرين 1؛ كم عدد صفحاته؟

var book = {
  weight: 0.5,
  pages: 500
};

console.log(book["pages"]);

النتيجة هي: 500

التمرين 4: افحص نتيجة الشيفرة التالية.

var book = {
  weight: 0.5,
  pages: 500
};

console.log(book.weight);
console.log(book.pages);

النتيجة كما يلي:

0.5
500

كيف نصل إلى خصائص الكائن؟

باستخدام الأقواس المربعة: object["property"].
باستخدام النقطة: object.property.

التمرين 5: مثّل فيديو يوتيوب بكائن له أزواج المفاتيح والقيم التالية:

المدة: 30 دقيقة
المقدّم: نورس علي
الفئة: تعليم
العنوان: إنشاء قالب WordPress
اللغة: العربية

var ytVideo = {
  length: "30min",
  host: "Nawras Ali",
  category: "Education",
  title: "Create a WordPress Theme",
  language: "Arabic"
};

console.log(ytVideo);

النتيجة هي: {length: "30min", host: "Nawras Ali", category: "Education", title: "Create a WordPress Theme", language: "Arabic"}

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

var ytVideo = {
  length: "30min",
  host: "Nawras Ali",
  category: "Education",
  title: "Create a WordPress Theme",
  language: "Arabic"
};

console.log(ytVideo["length"]);
console.log(ytVideo["host"]);
console.log(ytVideo["category"]);
console.log(ytVideo["title"]);
console.log(ytVideo["language"]);

النتيجة كما يلي:

30min
Nawras Ali
Education
Create a WordPress Theme
Arabic

التمرين 7: ارجع إلى التمرين 5؛ اعرضها باستخدام النقطة.

var ytVideo = {
  length: "30min",
  host: "Nawras Ali",
  category: "Education",
  title: "Create a WordPress Theme",
  language: "Arabic"
};

console.log(ytVideo.length);
console.log(ytVideo.host);
console.log(ytVideo.category);
console.log(ytVideo.title);
console.log(ytVideo.language);

النتيجة كما يلي:

30min
Nawras Ali
Education
Create a WordPress Theme
Arabic

التمرين 8: مثّل مستخدمًا بكائن JavaScript له الخصائص التالية:

الاسم الأول: Ali
اسم العائلة: Zaki
اسم المستخدم: AliZaki88
البريد الإلكتروني: alizaki@mail.com

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}

console.log(user);

النتيجة هي: {firstName: "Ali", lastName: "Zaki", username: "AliZaki88", email: "alizaki@mail.com"}

التمرين 9: ارجع إلى التمرين 8؛ اعرض قيم خصائص المستخدم باستخدام الأقواس المربعة.

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}

console.log(user["firstName"]);
console.log(user["lastName"]);
console.log(user["username"]);
console.log(user["email"]);

النتيجة كما يلي:

Ali
Zaki
AliZaki88
alizaki@mail.com

التمرين 10: ارجع إلى التمرين 8؛ اعرض قيم خصائص المستخدم باستخدام النقطة.

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}

console.log(user.firstName);
console.log(user.lastName);
console.log(user.username);
console.log(user.email);

النتيجة كما يلي:

Ali
Zaki
AliZaki88
alizaki@mail.com

إضافة خصائص جديدة¶

التمرين 11: أضف إلى كائن الكتاب الخاصية "dimensions" بالقيمة "16.256 x 3.785 x 24.181 cm". تلميح: استخدم book["newProperty"] = value. اعرض كائن الكتاب في وحدة التحكم.

var book = {
  weight: 0.5,
  pages: 500
};

book["dimensions"] = "16.256 x 3.785 x 24.181 cm";

console.log(book);

النتيجة هي: {weight: 0.5, pages: 500, dimensions: "16.256 x 3.785 x 24.181 cm"}

التمرين 12: ارجع إلى التمرين 11؛ أضف الخاصية "publisher" بالقيمة "LWN for publishing". استخدم book.newProperty = value. اعرض كائن الكتاب في وحدة التحكم.

var book = {
  weight: 0.5,
  pages: 500
};

book["dimensions"] = "16.256 x 3.785 x 24.181 cm";
book.publisher = "LWN for publishing";

console.log(book);

النتيجة هي: {weight: 0.5, pages: 500, dimensions: "16.256 x 3.785 x 24.181 cm", publisher: "LWN for publishing"}

كيف نضيف خاصية إلى كائن؟

باستخدام الأقواس المربعة: object["newProperty"] = value.
باستخدام النقطة: object.newProperty = value.

التمرين 13: أضف إلى كائن الفيديو الخاصية "playlist" بالقيمة "WordPress Playlist".

var ytVideo = {
  length: "30min",
  host: "Nawras Ali",
  category: "Education",
  title: "Create a WordPress Theme",
  language: "Arabic"
};

ytVideo["playlist"] = "WordPress Playlist";
//you can also write:
//ytVideo.playlist = "WordPress Playlist";

console.log(ytVideo);

النتيجة هي: {length: "30min", host: "Nawras Ali", category: "Education", title: "Create a WordPress Theme", language: "Arabic", playlist: "WordPress Playlist"}

التمرين 14: أضف إلى كائن المستخدم الخاصية "isLoggedIn" بالقيمة true.

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}

user.isLoggedIn = true;
//you can also write:
//user["isLoggedIn"] = true;

console.log(user);

النتيجة هي: {firstName: "Ali", lastName: "Zaki", username: "AliZaki88", email: "alizaki@mail.com", isLoggedIn: true}

حذف الخصائص¶

التمرين 15: احذف الخاصية pages من كائن الكتاب التالي. تلميح: استخدم delete book["pages"]

var book = {
  weight: 0.5,
  pages: 500
};

delete book["pages"]

console.log(book);

النتيجة هي: {weight: 0.5}

التمرين 16: احذف الخاصية title من كائن الفيديو التالي. تلميح: استخدم delete ytVideo.title

var ytVideo = {
  length: "30min",
  host: "Nawras Ali",
  category: "Education",
  title: "Create a WordPress Theme",
  language: "Arabic"
};

delete ytVideo.title;

console.log(ytVideo);

النتيجة هي: {length: "30min", host: "Nawras Ali", category: "Education", language: "Arabic"}

كيف نحذف خصائص الكائن؟

delete object["property"].
delete object.property.

التمرين 17: احذف firstName و lastName من كائن المستخدم التالي.

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}

delete user["firstName"];
delete user.lastName;

console.log(user);

النتيجة هي: {username: "AliZaki88", email: "alizaki@mail.com"}

الدالة المصنعية (Factory Function)¶

التمرين 18: أنشئ دالة مصنعية لكائنات الكتب، اعتمادًا على الكائن التالي.

/*
var book = {
  weight: null,
  pages: null,
  dimensions: null,
  publisher: null
}
*/

function genBook(weight, pages, dimensions, publisher){

  var book = {
    weight: weight,
    pages: pages,
    dimensions: dimensions,
    publisher: publisher
  };
  return book;
}

var book1 = genBook("0.2kg", "200", "8 x 3 x 30 cm", "LWN for publishing");
var book2 = genBook("0.5kg", "600", "9 x 7 x 35 cm", "Knowledge Light");
var book3 = genBook("0.3kg", "150", "8 x 3 x 30 cm", "RamaKrishna for publishing");

console.log(book1);
console.log(book2);
console.log(book3);

النتيجة كما يلي:

{weight: "0.2kg", pages: "200", dimensions: "8 x 3 x 30 cm", publisher: "LWN for publishing"}
{weight: "0.5kg", pages: "600", dimensions: "9 x 7 x 35 cm", publisher: "Knowledge Light"}
{weight: "0.3kg", pages: "150", dimensions: "8 x 3 x 30 cm", publisher: "RamaKrishna for publishing"}

التمرين 19: أنشئ دالة مصنعية لكائنات المستخدمين، اعتمادًا على الكائن التالي.

/*
var user = {
  username: "AliZaki88",
  email: "alizaki@mail.com"
}
*/

function genUser(username, email){

  var user = {
    username: username,
    email: email
  };
  return user;
}

var user1 = genUser("trueWarrior99", "user1@mail.com");
var user2 = genUser("redFlower4", "user2@mail.com");

console.log(user1);
console.log(user2);

النتيجة كما يلي:

{username: "trueWarrior99", email: "user1@mail.com"}
script.js:21 {username: "redFlower4", email: "user2@mail.com"}

التمرين 20: أنشئ دالة مصنعية لكائنات الفيديو، اعتمادًا على الكائن التالي.

/*
var video = {
  length: null,
  host:  null,
  language: null"
};
*/

function genVideo(length, host, language){

  var video = {
    length: length,
    host:  host,
    language: language
  };

  return video;
}

var video1 = genVideo("20min", "LWN", "Arabic");
var video2 = genVideo("2h", "S.V. Channel", "Sanskrit");
var video3 = genVideo("10min", "Ted", "English");
var video4 = genVideo("30sec", "Unknown", "German");

console.log(video1);
console.log(video2);
console.log(video3);
console.log(video4);

النتيجة كما يلي:

{length: "20min", host: "LWN", language: "Arabic"}
{length: "2h", host: "S.V. Channel", language: "Sanskrit"}
{length: "10min", host: "Ted", language: "English"}
{length: "30sec", host: "Unknown", language: "German"}