উইন্ডোইং সিস্টেম

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 প্রোটোটাইপ সিনট্যাক্স দিয়ে এবং বাকি কাজগুলো ক্লাস সিনট্যাক্স দিয়ে সমাধান করার চেষ্টা করুন।

1. উইন্ডোর মাপ সংরক্ষণের জন্য Size ডিফাইন করুন

Size নামের একটি ক্লাস (কনস্ট্রাক্টর ফাংশন) ডিফাইন করুন। এতে width ও height নামের দুটি ফিল্ড থাকবে, যেগুলো উইন্ডোর বর্তমান মাপ সংরক্ষণ করে। কনস্ট্রাক্টর ফাংশনটি এই ফিল্ডগুলোর প্রাথমিক মান গ্রহণ করবে। width প্রথম প্যারামিটার হিসেবে এবং height দ্বিতীয় প্যারামিটার হিসেবে দেওয়া হয়। ডিফল্ট width ও height যথাক্রমে 80 এবং 60 হবে।

এর পাশাপাশি, একটি resize(newWidth, newHeight) মেথড ডিফাইন করুন, যা প্যারামিটার হিসেবে নতুন width ও height নেয় এবং নতুন আকারটি প্রতিফলিত করতে ফিল্ডগুলো পরিবর্তন করে।

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.

পার্শ্ব নোট: ব্রাউজার এনভায়রনমেন্টে থাকা বিল্ট-ইন Window ক্লাস থেকে এই ক্লাসটিকে আলাদা করতে Window-এর বদলে ProgramWindow নামটি ব্যবহার করা হয়েছে।

4. উইন্ডো রিসাইজ করার একটি মেথড যোগ করুন

ProgramWindow ক্লাসে একটি resize মেথড থাকা উচিত। এটি ইনপুট হিসেবে Size টাইপের একটি প্যারামিটার নেবে এবং উইন্ডোটিকে নির্দিষ্ট আকারে রিসাইজ করার চেষ্টা করবে।

তবে নতুন আকার নির্দিষ্ট কিছু সীমা ছাড়িয়ে যেতে পারবে না।

• অনুমোদিত সর্বনিম্ন height বা width হলো 1। 1-এর কম height বা width চাওয়া হলে সেটি 1-এ ক্লিপ করা হবে।
• সর্বোচ্চ height ও width নির্ভর করে উইন্ডোর বর্তমান অবস্থানের উপর; উইন্ডোর প্রান্ত স্ক্রিনের প্রান্ত ছাড়িয়ে যেতে পারবে না। এই সীমার চেয়ে বড় মানগুলো তাদের সর্বোচ্চ সম্ভাব্য আকারে ক্লিপ করা হবে। যেমন, উইন্ডোর অবস্থান 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-এর মতোই, নতুন অবস্থানও নির্দিষ্ট কিছু সীমা ছাড়িয়ে যেতে পারবে না।

• x ও y উভয়ের জন্যই সবচেয়ে ছোট অবস্থান হলো 0।
• যেকোনো দিকে সর্বোচ্চ অবস্থান নির্ভর করে উইন্ডোর বর্তমান আকারের উপর। প্রান্ত স্ক্রিনের প্রান্ত ছাড়িয়ে যেতে পারবে না। এই সীমার চেয়ে বড় মানগুলো তাদের সর্বোচ্চ সম্ভাব্য আকারে ক্লিপ করা হবে। যেমন, উইন্ডোর আকার 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 ইনস্ট্যান্সটি পাস করা হয়েছিল সেটিই রিটার্ন করবে।

উইন্ডোটির width হবে 400, height হবে 300, এবং এটি x = 100, y = 150 অবস্থানে থাকবে।

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

// Similar for the other fields.