function Rectangle(width, height, x, y){
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.widthString = '\''+width+'px'+'\'';
this.heightString = '\''+height+'px'+'\'';
this.area = function() {
console.log("area: " + this.width * this.height);
};
this.newWidth = function (width){
this.width = width;
};
this.newHeight = function (height){
this.height = height;
};
this.translate = function(x,y){
this.x = x;
this.y = y;
};
this.logValues = function(){
console.log('width: ' + this.width + '\n' + 'height: ' + this.height + '\n'
- 'top: ' + this.x + '\n' + 'left: ' + this.y); };
this.scale = function(scale){
this.width *= scale;
this.height *= scale;
};
this.render = function(width, height, x, y, color){
let rectangle = document.createElement('DIV');
document.body.appendChild(rectangle);
rectangle.className = 'rectangle';
rectangle.style.background = color;
rectangle.style.width = width;
rectangle.style.height = height;
rectangle.style.position = 'absolute'
rectangle.style.top = x;
rectangle.style.left =y;
// rectangle.style.display = 'block';
// rectangle.style.visibility= 'visible'
// let text = document.createTextNode("Hi");
// rectangle.appendChild(text);
};
};
let rectangleOne = new Rectangle(100, 100, 0, 0);
rectangleOne.render('100px', '100px', '0px','0px','green' )
console.log(rectangleOne.widthString, rectangleOne.heightString);
let rectangleTwo = new Rectangle(200, 300, 10, 10);
rectangleTwo.render('100px','100px','100px','100px','blue' )
rectangleTwo.scale(2);
is there a way for me to set the height, width, x, y, values in my this.render method to use the values in my function Rectangle(width, height, x ,y)??
Top comments (7)
Yes, in fact you can. Allow me to explain. 😉
P.S. Add the #help tag to your post so more people can see it. 😉
Thank you so much! But since I'm new to this (3 weeks in to my first ever JavaScript course) I have some follow-up questions.
1: why is the rectangle function a separate function?
2: what is prototype and why use it?
3: why use const?
For questions #1 and #2, I recommend watching this video to understand what prototypal inheritance is in JavaScript. However, I must mention that this isn't a particularly "beginner-friendly" topic. But if you're curious enough, no one's going to stop you, my friend. Learning is great!
For question #3: I used
const
becauseconst
prevents me from changing the variable. It's "constant". If I try to reassign the variable, it's going to spit out an error—which is a good thing! Most of the time, we never reassign our variables. So to make sure that I don't unexpectedly change the value of some variable, I useconst
as a way to "prevent bugs".Also, feel free to ask me any more questions you might have! 😉
But in my initial code I had methods to change both size and location. Is it possible to to still have those methods if I use let instead of const? (It was part of the exercise to have those methods)
Ah, yes. Now we have reached the intricacies of JavaScript. When we assign a value to
const
, what we're really doing is we're just assigning a reference, not the actual value itself. I discuss the implication of this language feature in an old post of mine. 😉 How timely, isn't it?"Same Reference" vs. "Same Value"
Some Dood ・ Nov 5 '18 ・ 5 min read
As for adding methods for setting the size and location, we can simply add the usual setters and getters. We can do this because
const
stores references, not values.I can see some of the logic in this, ( we haven't
t touched on the subject of 'set & get' yet or prototyping but i will try to learn it in the coming week or two. thanks so much for taking the time to educate me :D
No problem at all! All I ask is for you to pay this forward in the future. As developers, we gotta look out for each other. 😉