٤.١ الكائنات

المشكلة

التمرين 1: تريد معلّمة إنشاء دورة JavaScript. أنشئ متغيرًا يحمل عنوان الدورة.

var courseTitle = "JavaScript Course";

التمرين 2: ارجع إلى التمرين 1؛ أنشأت القسم الأول بعنوان "JavaScript Basics". خزّن العنوان في متغير.

var courseTitle = "JavaScript Course";
var firstSectionTitle = "JavaScript Basics";

التمرين 3: ارجع إلى التمرين 2؛ يتضمّن القسم الأول 12 درسًا. خزّن العدد في متغير.

var courseTitle = "JavaScript Course";

var firstSectionTitle = "JavaScript Basics";
var firstSectionLessonsNo = 12;

التمرين 4: ارجع إلى التمرين 3؛ أضافت وصفًا للقسم الأول: "Learn the basics of JavaScript in such a simple and easy way". خزّنه في متغير.

var courseTitle = "JavaScript Course";

var firstSectionTitle = "JavaScript Basics";
var firstSectionDescription = "Learn the basics of JavaScript in such a simple and easy way";
var firstSectionLessonsNo = 12;

التمرين 5: ارجع إلى التمرين 4؛ أضافت قسمًا بعنوان "JavaScript Functions" ووصف "Introduction to JavaScript functions and closures"، وفيه 5 دروس. خزّن هذه البيانات في متغيرات.

var courseTitle = "JavaScript Course";

var firstSectionTitle = "JavaScript Basics";
var firstSectionDescription = "Learn the basics of JavaScript in such a simple and easy way.";
var firstSectionLessonsNo = 12;

var secondSectionTitle = "JavaScript Functions";
var secondSectionDescription = "Introduction to JavaScript functions and closures.";
var secondSectionLessonsNo = 5;

التمرين 6: ارجع إلى التمرين 5؛ أضافت قسمًا بعنوان "JavaScript Arrays" ووصف "Learn about JavaScript arrays and array helpers."، وفيه 8 دروس. خزّن هذه البيانات في متغيرات.

var courseTitle = "JavaScript Course";

var firstSectionTitle = "JavaScript Basics";
var firstSectionDescription = "Learn the basics of JavaScript in such a simple and easy way.";
var firstSectionLessonsNo = 12;

var secondSectionTitle = "JavaScript Functions";
var secondSectionDescription = "Introduction to JavaScript functions and closures.";
var secondSectionLessonsNo = 5;

var thirdSectionTitle = "JavaScript Arrays";
var thirdSectionDescription = "Learn about JavaScript arrays and array helpers.";
var thirdSectionLessonsNo = 8;

ألا ترى تكرارًا كثيرًا في التمرين 6 ؟

التمرين 7: استخدم مفهوم الدوال و مصفوفة لتجنّب التكرار في التمرين 6 .

function createASection(title, description, lessonsNo){
  return [title, description, lessonsNo];
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );

console.log(section1);
console.log(section2);
console.log(section3);

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

Array(3) [ "JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12 ]
Array(3) [ "JavaScript Functions", "Introduction to JavaScript functions and closures.", 5 ]
Array(3) [ "JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 ]

التمرين 8: ارجع إلى التمرين 7؛ ما عنوان القسم الأول؟

function createASection(title, description, lessonsNo){
  return [title, description, lessonsNo];
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );

console.log(section1[0]);

النتيجة هي: أساسيات JavaScript

التمرين 9: ارجع إلى التمرين 7؛ ما وصف القسم الثاني؟

function createASection(title, description, lessonsNo){
  return [title, description, lessonsNo];
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );

console.log(section2[1]);

النتيجة هي: Introduction to JavaScript functions and closures.

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

---

كائنك الأول

التمرين 10: اقرأ الشيفرة التالية وافهم النتيجة.

var section1 = {
  title: "JavaScript Basics",
  description: "Learn the basics of JavaScript in such a simple and easy way.",
  lessonsNo: 12
};

console.log(section1["title"]);
console.log(section1["description"]);
console.log(section1["lessonsNo"]);

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

JavaScript Basics
Learn the basics of JavaScript in such a simple and easy way.
12

القسم كيان له خصائص هي title, description، و lessonsNo. لكل خاصية مفتاح وقيمة. تمثيل القسم في التمرين 10 يُسمّى كائنًا.

التمرين 11: أعد تنفيذ التمرين 10 للقسم الثاني.

var section2 = {
  title: "JavaScript Functions",
  description: "Introduction to JavaScript functions and closures.",
  lessonsNo: 5
};

console.log(section2["title"]);
console.log(section2["description"]);
console.log(section2["lessonsNo"]);

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

JavaScript Functions
Introduction to JavaScript functions and closures.
5

التمرين 12: أعد تنفيذ التمرين 10 للقسم الثالث.

var section3 = {
  title: "JavaScript Arrays",
  description: "Learn about JavaScript arrays and array helpers.",
  lessonsNo: 8
};

console.log(section3["title"]);
console.log(section3["description"]);
console.log(section3["lessonsNo"]);

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

JavaScript Arrays
Learn about JavaScript arrays and array helpers.
8

الكائنات

الكائن كيان له خصائص، ولكل خاصية مفتاح وقيمة.

يمكن إنشاء كائن باستخدام قوسين معقوفين {}

---

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

التمرين 13: أعد تنفيذ التمرين 7 باستخدام المفهوم الذي تعلّمناه في التمارين 10–12.

function createASection(title, description, lessonsNo){
  var newSection = {
    title : title,
    description : description,
    lessonsNo : lessonsNo
  }
  return newSection;
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );

console.log(section1);
console.log(section2);
console.log(section3);

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

Object { title: "JavaScript Basics", description: "Learn the basics of JavaScript in such a simple and easy way.", lessonsNo: 12 }
Object { title: "JavaScript Functions", description: "Introduction to JavaScript functions and closures.", lessonsNo: 5 }
Object { title: "JavaScript Arrays", description: "Learn about JavaScript arrays and array helpers.", lessonsNo: 8 }

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

createASection تشبه مصنعًا للأقسام. كلما احتجنا قسمًا جديدًا نستدعي createASection ؟

التمرين 14: ارجع إلى التمرين 13؛ ما عنوان القسم الأول؟

function createASection(title, description, lessonsNo){
  var newSection = {
    title : title,
    description : description,
    lessonsNo : lessonsNo
  }
  return newSection;
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );

console.log(section1["title"]);

النتيجة هي: أساسيات JavaScript

التمرين 15: ارجع إلى التمرين 13؛ ما وصف القسم الثاني؟

function createASection(title, description, lessonsNo){
  var newSection = {
    title : title,
    description : description,
    lessonsNo : lessonsNo
  }
  return newSection;
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );


console.log(section2["description"]);

النتيجة هي: Introduction to JavaScript functions and closures.

التمرين 16: ارجع إلى التمرين 13؛ ما عدد دروس القسم الثالث؟

function createASection(title, description, lessonsNo){
  var newSection = {
    title : title,
    description : description,
    lessonsNo : lessonsNo
  }
  return newSection;
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );


console.log(section3["lessonsNo"]);

النتيجة هي: 8

التمرين 17: تريد المعلّمة ربط كل قسم بدورته؛ فالأقسام الثلاثة تتبع "JavaScript Course". أضف ذلك إلى الدالة المنشأة في التمرين 13، مع جعل "JavaScript Course" القيمة الافتراضية للدورة.

function createASection(title, description, lessonsNo, course="JavaScript Course"){
  var newSection = {
    title : title,
    description : description,
    lessonsNo : lessonsNo,
    course:  course
  }
  return newSection;
}

var section1 = createASection("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.", 12);
var section2 = createASection("JavaScript Functions", "Introduction to JavaScript functions and closures.", 5);
var section3 = createASection("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.", 8 );

console.log(section1["course"]);
console.log(section2["course"]);
console.log(section3["course"]);

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

JavaScript Course
JavaScript Course
JavaScript Course

التمرين 18: مثّل دورة بكائن JavaScript له خاصيتا العنوان والوصف.

var course = {
  title: 'Course title here',
  description: 'Course description goes here'
};

console.log(course);

النتيجة هي: Object { title: "Course title here", description: "Course description goes here" }

التمرين 19: ارجع إلى التمرين 18؛ ما عنوان الدورة؟

var course = {
  title: 'Course title here',
  description: 'Course description goes here'
};

console.log(course["title"]);

النتيجة هي: Course title here

التمرين 20: ارجع إلى التمرين 18؛ ما وصف الدورة؟

var course = {
  title: 'Course title here',
  description: 'Course description goes here'
};

console.log(course["description"]);

النتيجة هي: Course description goes here

التمرين 21: أنشئ دالة مصنعية تُنشئ كائنات دورات عند الطلب.

function createACourse(title, description){
  var course = {
    title: title,
    description: description
  };

  return course;
}

var course1 = createACourse("JavaScript Course", "Learn JavaScript in such an easy and simple way.");

var course2 = createACourse("WordPress Course", "Learn how to develop WordPress themes and plugins");

console.log(course1);
console.log(course2);

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

Object { title: "JavaScript Course", description: "Learn JavaScript in such an easy and simple way." }
Object { title: "WordPress Course", description: "Learn how to develop WordPress themes and plugins" }

التمرين 22: مثّل درسًا بكائن له خاصيتا العنوان ومستوى الصعوبة.

var lesson = {
  title: "Lesson title is here",
  difficultyLevel: "Easy"
};

console.log(lesson);

النتيجة هي: Object { title: "Lesson title is here", difficultyLevel: "Easy" }

التمرين 23: ارجع إلى التمرين 22؛ ما عنوان الدرس؟

var lesson = {
  title: "Lesson title is here",
  difficultyLevel: "Easy"
};

console.log(lesson["title"]);

النتيجة هي: Lesson title is here

التمرين 24: ارجع إلى التمرين 22؛ ما مستوى صعوبة الدرس؟

var lesson = {
  title: "Lesson title is here",
  difficultyLevel: "Easy"
};

console.log(lesson["difficultyLevel"]);

النتيجة هي: Easy

التمرين 25: أنشئ دالة مصنعية تُنشئ كائنات دروس عند الطلب.

function createALesson(title, difficultyLevel){
  var lesson = {
    title: title,
    difficultyLevel: difficultyLevel
  };

  return lesson;
}

var lesson1 = createALesson("Array Helpers", "Normal");

var lesson2 = createALesson("Objects", "Easy");

console.log(lesson1);
console.log(lesson2);

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

Object { title: "Array Helpers", difficultyLevel: "Normal" }
Object { title: "Objects", difficultyLevel: "Easy" }