To view the output results for each of these javascript, see the console log.
I followed this tutorial, these are my notes.
2ZphE5HcQPQ
Javascript Classes - Basic
class Rectangle {
constructor(_width, _height, _color) {
this.width = _width;
this.height = _height;
this.color = _color;
}
getArea() {
return this.width * this.height
}
printDescription() {
console.log(`Rectangle is ${this.width} x ${this.width} with color ${this.color} `);;
}
}
let myRectangle1 = new Rectangle(5, 3, "blue");
let myRectangle2 = new Rectangle(18, 5, "red");
console.log(myRectangle1.getArea(25)); //25
myRectangle1.printDescription(); //Rectangle is 5 x 5 with color blue
Javascript Classes - Getters and Setters
class Square {
constructor(_width) {
this.width = _width;
this.height = _width;
this.numOfRequestsForArea = 0;
}
// property name - getter
get area() {
// this is a function
this.numOfRequestsForArea ++;
return this.width * this.height;
}
set area(area) {
// this is a function
this.width = Math.sqrt(area);
this.height = this.width;
}
}
// using a getter
let square1 = new Square(25); // OUTPUT: 625 | 25 * 25 = 625
console.log(square1.area); // OUTPUT: 25
console.log(square1.area); // OUTPUT: 25
console.log(square1.area); // OUTPUT: 25
console.log(square1.numOfRequestsForArea); // OUTPUT: 3
// using a setter
square1.area = 25;
console.log(square1.width); // OUTPUT: 5
console.log(square1.height); // OUTPUT: 5
Javascript Classes - Static Methods
// static methods
class Square {
constructor(_width) {
this.width = _width;
this.height = _width;
this.numOfRequestsForArea = 0;
}
// property name - getter
static equals(a, b) {
return a.width * a.height === b.width * b.height;
}
static isValidDimension(width, height){
return width === height
}
}
// send the same arguments to true, different to false
let square1 = new Square(8); //
let square2 = new Square(9); //
console.log(square1); //OUTPUT: Object {width: 8, height: 8}
console.log(Square.equals(square1, square2)); // OUTPUT: false
console.log(Square.isValidDimension(6, 6)); // OUTPUT: true
console.log(Square.isValidDimension(6, 7)); // OUTPUT: false
Javascript Classes - Inheritance and Extends
// inheritance and extends
// parent class
class Person {
constructor(_name, _age) {
this.name = _name;
this.age = _age;
}
describe() {
console.log(`I am ${this.name} and I am ${this.age} years old.`);
}
}
// child class exends Person Class (inherets)
class Programmer extends Person {
constructor(_name, _age, _yearsofExpirience) {
// call the parent constructor
super(_name, _age);
// Custom Behaviour
this.yearsofExpirience = _yearsofExpirience;
}
code() {
console.log(`${this.name} is coding.`);
}
}
let person1 = new Person("Jeff", 45); //OUTPUT: Object { name: "Jeff", age: 45 }
let programmer1 = new Programmer('Dom', 56, 12) //OUTPUT: Object { name: "Dom", age: 56, yearsofExpirience: 12 }
console.log(person1);
console.log(programmer1);
// person1.code(); // Uncaught TypeError: person1.code is not a function
programmer1.code(); //OUTPUT: Dom is coding.
programmer1.describe(); //OUTPUT: I am Dom and I am 56 years old.
const programmers = [
new Programmer("Dom", 56, 12),
new Programmer("Jeff", 24, 4)
]
developSoftware(programmers); // Dom is coding | Jeff is coding.
function developSoftware(programmers) {
for (let programmer of programmers) {
programmer.code();
}
}
Javascript Classes - Polymorphism
// Polymmorphism - overide a parent method from a child class
class Animal {
constructor(name) {
this.name = name;
}
makeSound() {
console.log(`Generic Animal Sound!!`);
}
}
class Dog extends Animal{
constructor(name) {
super(name)
}
makeSound(){
// Call the parent class method:
super.makeSound(); // console log: Generic Animal Sound!!
console.log('Woof!! Woof!!');
}
}
const a1 = new Animal("Dom");
a1.makeSound(); //OUTPUT: Generic Animal Sound!!
const a2 = new Dog("Jeff");
// checks the method makeSound() exists in the child class (Dog) first, if it does not, it will check the parent class
a2.makeSound(); //OUTPUT: Woof!! Woof!!
Javascript Classes - Classes in Practice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Classes in Practice </title>
</head>
<body>
<h1>Classes: HTML List Binding</h1>
<u id="myList">
<!-- To be filled by Javascript -->
</u>
<p>instructions: look in console</p>
<p>to add items to the list, send this command in the log:</p>
console:
<pre>listBinding.add('edwin')
listBinding.add('edwin2')
listBinding.add('edwin3')
listBinding.remove(1)
</pre>
<script>
class ListBinding {
constructor(element) {
this.listElement = element;
this.textList = [];
}
// makes <li>text</li>
static createListItem(text) {
const li = document.createElement('li');
li.textContent = text;
return li;
}
update() {
// remove all exisitng <li> elements.tags
while (this.listElement.firstChild) {
this.listElement.removeChild(this.listElement.firstChild)
}
// ADD to list
for (const text of this.textList) {
this.listElement.appendChild(ListBinding.createListItem(text))
}
}
add(text) {
this.textList.push(text);
this.update();
}
remove(index) {
// remove a list item from the textList array at the index with count 1
this.textList.splice(index, 1);
this.update();
}
}
const myList = document.getElementById("myList");
const listBinding = new ListBinding(myList);
</script>
</body>
</html>