سیستم پنجره‌بندی

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 خود، کارهای ۱ و ۲ را با نحوه‌ی نگارش prototype و کارهای باقی‌مانده را با نحوه‌ی نگارش class حل کنید.

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 است.

موقعیت (۰، ۰) گوشه‌ی بالا-چپ صفحه است؛ هرچه به سمت راست بروید مقادیر 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 برابر ۸۰۰ و height برابر ۶۰۰ نگه می‌دارد
• 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 را به عنوان ورودی می‌پذیرد و تلاش می‌کند اندازه‌ی پنجره را به اندازه‌ی مشخص‌شده تغییر دهد.

با این حال، اندازه‌ی جدید نمی‌تواند از محدوده‌های مشخصی فراتر برود.

• کمترین ارتفاع یا عرض مجاز ۱ است. ارتفاع یا عرض درخواستی کمتر از ۱ به ۱ محدود می‌شود.
• بیشترین ارتفاع و عرض به موقعیت فعلی پنجره بستگی دارد؛ لبه‌های پنجره نمی‌توانند از لبه‌های صفحه فراتر بروند. مقادیری که بزرگ‌تر از این محدوده‌ها باشند، به بزرگ‌ترین اندازه‌ای که می‌توانند بگیرند محدود می‌شوند. مثلاً اگر موقعیت پنجره در x = ۴۰۰ و y = ۳۰۰ باشد و تغییر اندازه‌ای به height = ۴۰۰ و width = ۳۰۰ درخواست شود، پنجره به height = ۳۰۰ و width = ۳۰۰ تغییر اندازه می‌یابد، چون صفحه در جهت 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، موقعیت جدید هم نمی‌تواند از محدوده‌های مشخصی فراتر برود.

• کمترین موقعیت برای هر دو x و y برابر ۰ است.
• بیشترین موقعیت در هر جهت به اندازه‌ی فعلی پنجره بستگی دارد. لبه‌ها نمی‌توانند از لبه‌های صفحه فراتر بروند. مقادیری که بزرگ‌تر از این محدوده‌ها باشند، به بزرگ‌ترین اندازه‌ای که می‌توانند بگیرند محدود می‌شوند. مثلاً اگر اندازه‌ی پنجره در x = ۲۵۰ و y = ۱۰۰ باشد و جابه‌جایی به x = ۶۰۰ و y = ۲۰۰ درخواست شود، پنجره به x = ۵۵۰ و y = ۲۰۰ منتقل می‌شود، چون صفحه در جهت 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 را که به آن داده شده، پس از اعمال تغییرات برگرداند.

پنجره باید عرض ۴۰۰ و ارتفاع ۳۰۰ بگیرد و در x = ۱۰۰ و y = ۱۵۰ قرار بگیرد.

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

// Similar for the other fields.