Classes

classes.markdown

Classes

A Pen by Alan Moore on CodePen.

License.

index.html

<div id="test">Stuff
</div>

script.js

class Shape {
  constructor(x_in, y_in) {
    this.name = "Shape";
    this.x = x_in;
    this.y = y_in;
  }
  
  print() {
    console.log(this.name + " is at x = " + this.x + " y = " + this.y);
  }
}

class Rectangle extends Shape {
  
  constructor(x, y, width, height) {
    super(x, y);
    this.name = "Rectangle";
    this.width = width;
    this.height = height;
  }
  
  print() {
    super.print();
    console.log(this.name + " has width = " + this.width + " height = " + this.height);
  }
}

class Square extends Rectangle {
  constructor(x, y, sideLength) {
    super(x,y, sideLength, sideLength);
    this.name = "Square";
  }
}

// var myShape = new Shape(1, 1);
var myShape2 = new Rectangle(1, 1, 100, 100);
// myShape.print();
myShape2.print(); 
var someObj = new Square(2, 2, 50);

myShapes = [myShape2, someObj];
for( var index = 0; index < myShapes.length; index++) {
  var shape = myShapes[index];
  shape.print(); 
}

var myElement = $("#test");
console.log(myElement);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>