विंडोइंग सिस्टम

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 होने चाहिए, जो विंडो के वर्तमान आयाम संग्रहीत करते हैं। कंस्ट्रक्टर फंक्शन को इन फील्ड के लिए शुरुआती वैल्यू लेनी चाहिए। चौड़ाई पहले पैरामीटर के रूप में दी जाती है और ऊँचाई दूसरे के रूप में। डिफॉल्ट चौड़ाई और ऊँचाई क्रमशः 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.

एक छोटी बात: क्लास को ब्राउज़र वातावरण में मौजूद बिल्ट-इन Window क्लास से अलग बताने के लिए Window की जगह ProgramWindow नाम रखा गया है।

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 की तरह ही नई स्थिति भी कुछ सीमाओं से आगे नहीं जा सकती।

• 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 इंस्टेंस लौटाना चाहिए जो इसे दिया गया था।

विंडो की चौड़ाई 400 और ऊँचाई 300 होनी चाहिए और उसकी स्थिति x = 100, y = 150 होनी चाहिए।

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

// Similar for the other fields.