نظام النوافذ

function Car() {
  // ...
}

const myCar = new Car();
const yourCar = new Car();

function Car(color, weight) {
  this.color = color;
  this.weight = weight;
  this.engineRunning = false;
}

const myCar = new Car('red', '2mt');
myCar.color;
// => 'red'
myCar.engineRunning;
// => false

function Car() {
  this.engineRunning = false;
  // ...
}

Car.prototype.startEngine = function () {
  this.engineRunning = true;
};

Car.prototype.addGas = function (litre) {
  // ...
};

const myCar = new Car();
myCar.startEngine();
myCar.engineRunning;
// => true

function Car() {
  // ...
}

Car.prototype.startEngine = function () {
  // ...
};

class Car {
  constructor(color, weight) {
    this.color = color;
    this.weight = weight;
    this.engineRunning = false;
  }

  startEngine() {
    this.engineRunning = true;
  }

  addGas(litre) {
    // ...
  }
}

const myCar = new Car();
myCar.startEngine();
myCar.engineRunning;
// => true

class Car {
  constructor() {
    this._mileage = 0;
  }

  get mileage() {
    return this._mileage;
  }

  set mileage(value) {
    throw new Error(`Mileage cannot be manipulated, ${value} is ignored.`);
    // Just an example, usually you would not provide a setter in this case.
  }
}

const myCar = new Car();
myCar.mileage;
// => 0
myCar.mileage = 100;
// => Error: Mileage cannot be manipulated, 100 is ignored.

التعليمات

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

                  <--------------------- screenSize.width --------------------->

       ^          ┌────────────────────────────────────────────────────────────┐
       |          │                                                            │
       |          │         position.x, _                                      │
       |          │         position.y   \                                     │
       |          │                       \<----- size.width ----->            │
       |          │                 ^      *──────────────────────┐            │
       |          │                 |      │        title         │            │
       |          │                 |      ├──────────────────────┤            │
screenSize.height │                 |      │                      │            │
       |          │            size.height │                      │            │
       |          │                 |      │       contents       │            │
       |          │                 |      │                      │            │
       |          │                 |      │                      │            │
       |          │                 v      └──────────────────────┘            │
       |          │                                                            │
       |          │                                                            │
       v          └────────────────────────────────────────────────────────────┘

📣 لممارسة مجموعة مهاراتك الواسعة في JavaScript، حاول حل المهمتين 1 و2 باستخدام صيغة prototype والمهام المتبقية باستخدام صيغة الصنف.

1. عرّف Size لتخزين أبعاد النافذة

عرّف صنفًا (دالة بانية) باسم Size. يجب أن يحتوي على حقلين width وheight يخزّنان الأبعاد الحالية للنافذة. يجب أن تقبل دالة البناء قيمًا ابتدائية لهذين الحقلين. يُمرَّر العرض بوصفه المعامل الأول، والارتفاع بوصفه الثاني. القيمة الافتراضية للعرض والارتفاع هي 80 و60 على التوالي.

بالإضافة إلى ذلك، عرّف طريقة resize(newWidth, newHeight) تأخذ عرضًا وارتفاعًا جديدين بوصفهما معاملين وتغيّر الحقلين ليعكسا الحجم الجديد.

const size = new Size(1080, 764);
size.width;
// => 1080
size.height;
// => 764

size.resize(1920, 1080);
size.width;
// => 1920
size.height;
// => 1080

2. عرّف Position لتخزين موضع النافذة

عرّف صنفًا (دالة بانية) باسم Position بحقلين، x وy، يخزّنان الموضع الأفقي والعمودي الحالي على التوالي للزاوية العلوية اليسرى للنافذة. يجب أن تقبل دالة البناء قيمًا ابتدائية لهذين الحقلين. تُمرَّر قيمة x بوصفها المعامل الأول، وقيمة y بوصفها الثاني. القيمة الافتراضية هي 0 لكلا الحقلين.

الموضع (0، 0) هو الزاوية العلوية اليسرى للشاشة، حيث تكبر قيم x كلما تحركت إلى اليمين وتكبر قيم y كلما تحركت إلى الأسفل.

كذلك عرّف طريقة move(newX, newY) تأخذ معاملين جديدين x وy وتغيّر الخصائص لتعكس الموضع الجديد.

const point = new Position();
point.x;
// => 0
point.y;
// => 0

point.move(100, 200);
point.x;
// => 100
point.y;
// => 200

3. عرّف صنف ProgramWindow

عرّف صنف ProgramWindow بالحقول التالية:

• screenSize: يحمل قيمة ثابتة من النوع Size، حيث width هي 800 وheight هي 600
• size : يحمل قيمة من النوع Size، وقيمته الابتدائية هي القيمة الافتراضية لكائن Size
• position : يحمل قيمة من النوع Position، وقيمته الابتدائية هي القيمة الافتراضية لكائن Position

عند فتح النافذة (إنشائها)، تكون دائمًا بالحجم والموضع الافتراضيين في البداية.

const programWindow = new ProgramWindow();
programWindow.screenSize.width;
// => 800

// Similar for the other fields.

ملاحظة جانبية: استُخدم الاسم ProgramWindow بدلًا من Window للتمييز بين الصنف والصنف Window المدمج الموجود في بيئات المتصفح.

4. أضف طريقة لتغيير حجم النافذة

يجب أن يتضمن صنف ProgramWindow طريقة resize. يجب أن تقبل معاملًا من النوع Size كمدخل وتحاول تغيير حجم النافذة إلى الحجم المحدد.

غير أن الحجم الجديد لا يمكنه أن يتجاوز حدودًا معينة.

• الحد الأدنى المسموح به للارتفاع أو العرض هو 1. أي ارتفاع أو عرض مطلوب أقل من 1 سيُقصّ إلى 1.
• يعتمد الحد الأقصى للارتفاع والعرض على الموضع الحالي للنافذة، فلا يمكن لحواف النافذة أن تتجاوز حواف الشاشة. القيم الأكبر من هذه الحدود ستُقصّ إلى أكبر حجم يمكن أن تتخذه. على سبيل المثال، إذا كان موضع النافذة عند x = 400 وy = 300 وطُلب تغيير الحجم إلى height = 400 وwidth = 300، فسيُغيَّر حجم النافذة إلى height = 300 وwidth = 300 لأن الشاشة ليست كبيرة بما يكفي في اتجاه y لاستيعاب الطلب بالكامل.

const programWindow = new ProgramWindow();

const newSize = new Size(600, 400);
programWindow.resize(newSize);
programWindow.size.width;
// => 600
programWindow.size.height;
// => 400

5. أضف طريقة لتحريك النافذة

بالإضافة إلى وظيفة تغيير الحجم، يجب أن يتضمن صنف ProgramWindow أيضًا طريقة move. يجب أن تقبل معاملًا من النوع Position كمدخل. تشبه طريقة move الطريقة resize، غير أن هذه الطريقة تضبط موضع النافذة على القيمة المطلوبة بدلًا من الحجم.

وكما في resize، لا يمكن للموضع الجديد أن يتجاوز حدودًا معينة.

• أصغر موضع هو 0 لكلٍّ من x وy.
• يعتمد الموضع الأقصى في أي اتجاه على الحجم الحالي للنافذة. لا يمكن للحواف أن تتجاوز حواف الشاشة. القيم الأكبر من هذه الحدود ستُقصّ إلى أكبر حجم يمكن أن تتخذه. على سبيل المثال، إذا كان حجم النافذة عند x = 250 وy = 100 وطُلب نقلها إلى x = 600 وy = 200، فسيُنقل النافذة إلى x = 550 وy = 200 لأن الشاشة ليست كبيرة بما يكفي في اتجاه x لاستيعاب الطلب بالكامل.

const programWindow = new ProgramWindow();

const newPosition = new Position(50, 100);
programWindow.move(newPosition);
programWindow.position.x;
// => 50
programWindow.position.y;
// => 100

6. غيّر نافذة البرنامج

نفّذ دالة changeWindow تقبل كائن ProgramWindow كمدخل وتغيّر النافذة إلى الحجم والموضع المحددين. يجب أن تُرجع الدالة كائن ProgramWindow الذي مُرِّر إليها بعد تطبيق التغييرات.

يجب أن تحصل النافذة على عرض 400 وارتفاع 300 وأن توضع عند x = 100 وy = 150.

const programWindow = new ProgramWindow();
changeWindow(programWindow);
programWindow.size.width;
// => 400

// Similar for the other fields.