Class definition

Must include a constructor to declare all the internal variables

By running the constructor function we create an INSTANCE of the CLASS

The CLASS is just a blueprint for making many OBJECTS of it type.  In this case, many Buttons.


SYNTAX NOTE:
"this" refers to the internal variables of the Object.  In this case every button has its own x and y variables.

So if we have many Buttons, how do we refer to the individual values of each button?  The internal methods (like draw, etc) we use this.x and this.y because the mthod is general 
and must work for ALL buttons.  You will only ever use "this." inside of a method (internal function) as it makes no sense out side.  It has to be part of an Object


EXAMPLE
class Button{
		constructor(a,b, t){
			this.x = a;
			this.y = b;
			this.text = t;
			this.width = 100;
			this.height = 50;
		}
		
		draw(){
			if(this.isMouse()) ctx.fillStyle = 'green'
			else ctx.fillStyle = 'red'
			
			ctx.fillRect(this.x, this.y, this.width, this.height);
			
			ctx.font = '10pt Verdana';
			ctx.fillStyle = 'black'
			ctx.fillText(this.text, this.x , this.y + 20);
		}
		
		isMouse(){
			return mx >= this.x && mx <= this.x + this.width && my >= this.y && my < this.y + this.height;
		}
	
	
		job(){
			alert("ALERT!!! I am " + this.text);
		}
	}
	
	
	USAGE
	
	To declare:
	
	var myButton = new Button(100,130);
	
	This creates a button located at 100, 130
	
	You can even make an array of buttons (super useful later)
	
	var buttons = [];
	
	buttons[0] = new Button(100,130);
	buttons[1] = new Button(300,130);
	
	
	To assign their individual job via polymorphism:
	
	buttons[1].job = function(){
		alert("Something different from the other buttons");
	}
	
	==============================================================
	
	To draw:
	
	In function paint()
	
		myButton.draw();
	
	
		OR 
		
		for(var i=0; i < buttons.length; i++) buttons[i].draw();
	
	
	==============================================================
	
	
	To make it 'click'
	
	
	in event listener 'click':
	
	
	if(myButton.isMouse()) {
		myButton.job();
	}
	
	Checks to see is the mouse is over the button at the time of the click event.  The button itself has the code to check the coordinates of the mouse.
	
	If the isMouse method (internal function of the Button class) returns TRUE, the we tell the button to run its "job" method