Class Intro

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

Class Intro

JavaScript Class Syntax

The keyword class allows you to create a class.

You can add a method named constructor():

Syntax

class ClassName {

  constructor() { … }

}

Example

class Car {

  constructor(name, year) {

    this.name = name;

    this.year = year;

  }

}

The example above creates a class named “Car”.

The class has two initial properties: “name” and “year”.

A JavaScript class is not an object.

It is a template for JavaScript objects.

Using a Class

When you have a class, you can use the class to create objects

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Class</h2>

<p>How to use a JavaScript Class.</p>

<p id=”demo”></p>

<script>

class Car {

  constructor(name, year) {

    this.name = name;

    this.year = year;

  }

}

const myCar = new Car(“Ford”, 2014);

document.getElementById(“demo”).innerHTML =

myCar.name + ” ” + myCar.year;

</script>

</body>

</html>

Output

JavaScript Class

How to use a JavaScript Class.

The Constructor Method

The constructor method is a special method:

  • It must have the exact name “constructor”
  • When a new object is created, it automatically executes.
  • It initializes the object properties
  • If you do not define a constructor method is not defined, JavaScript will add an empty constructor method.

Class Methods

Class methods are created with the same syntax as object methods.

Add any number of methods.

Syntax

class ClassName {

  constructor() { … }

  method_1() { … }

  method_2() { … }

  method_3() { … }

}

Create a Class method named “age”, that returns the Car age:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Class Method</h2>

<p>How to define and use a Class method.</p>

<p id=”demo”></p>

<script>

class Car {

  constructor(name, year) {

    this.name = name;

    this.year = year;

  }

  age() {

    let date = new Date();

    return date.getFullYear() – this.year;

  }

}

let myCar = new Car(“Ford”, 2014);

document.getElementById(“demo”).innerHTML =

“My car is ” + myCar.age() + ” years old.”;

</script>

</body>

</html>

Output

JavaScript Class Method

How to define and use a Class method.

My car is 8 years old.

Send parameters to Class methods.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Class Method</h2>

<p>Pass a parameter into the “age()” method.</p>

<p id=”demo”></p>

<script>

class Car {

  constructor(name, year) {

    this.name = name;

    this.year = year;

  }

  age(x) {

    return x – this.year;

  }

}

let date = new Date();

let year = date.getFullYear();

let myCar = new Car(“Ford”, 2014);

document.getElementById(“demo”).innerHTML=

“My car is ” + myCar.age(year) + ” years old.”;

</script>

</body>

</html>

Output

JavaScript Class Method

Pass a parameter into the "age()" method.

My car is 8 years old.

“use strict”

The syntax in classes are written in “strict mode”.

An error will occur, if you do not follow the “strict mode” rules.

Example

In “strict mode” you will get an error if you use a variable without declaring it.

<html>

<body>

<h2>JavaScript Classes are written in “strict mode”</h2>

<p>In a JavaScript Class you cannot use variable without declaring it.</p>

<p id=”demo”></p>

<script>

class Car {

  constructor(name, year) {

    this.name = name;

    this.year = year;

  }

  age() {

   // date = new Date();  // This will not work

   let date = new Date(); // This will work

   return date.getFullYear() – this.year;

  }

}

myCar = new Car(“Ford”, 2014);

document.getElementById(“demo”).innerHTML =

“My car is ” + myCar.age() + ” years old.”;

</script>

</body>

</html>

Output

JavaScript Classes are written in "strict mode"

In a JavaScript Class you cannot use variable without declaring it.

My car is 8 years old.