Animations

API

Arrays

Async

Basics

Challenges

Classes

Console

Dates

Debugging

DOM Elements

DOM Methods

DOM Navigation

DOM Properties

Event Listeners

Flow Control

Forms

Functions

Global Functions

JSON

Keywords

Libraries (3rd party)

Math

Modules

Objects

Snippets

String

Types

Widgets

Window Object

JavaScript - Basics

Classes are covered in a lot more detail in the TypeScript section. That said, ECMAScript / JavaScript 6 now supports Classes. Study the code below which is plain vanilla js.

Remember, like TypeScript, Classes can have many functions within them but the do not use the function keyword. 


class Person
{
    constructor(fullName)
    {
        this.FullName = fullName;
    }

    Greeting()
    {
        document.getElementById("demo1").innerHTML = `Hello ${this.FullName}.`;
    }
}

class Student extends Person
{
    constructor(fullName, level)
    {
        // if you have a class which extends another class (abstract),
        // and your derived class has a constructor, then you must use
        // the super function keyword.
        super(fullName);
        this.Level = level;
    }

    Greeting()
    {
        document.getElementById("demo2").innerHTML = `Hello ${this.FullName} from ${this.Level}.`;
    }
}

let person1 = new Person("Max");
let person2 = new Student("Ricky Bobby", "1st Level");

person1.Greeting();
person2.Greeting();