Class Function And Event In JavaScript

In this article we will try to learn about class Function and Event In Javascript.

 

As we know all that the above is required in every signle page requirement to fill the data in input control, write the logic accoriding to business requirement and save in data base.

 

So here we will cover the following things,

• JavaScript Class
• JavaScript Class Inheritance
• JavaScript Static Methods
• JavaScript Function
• JavaScript Arrow Function
• Difference between Call() & Apply() function
• JavaScript Events
• Summary

JavaScript Class

 

When Javascript was first developed there there were no concept about classes, but ECMAScript2015, that is also known as ES6, introduced JavaScript Classes.

 

Definition: JavaScript classes are blueprints/templates for JavaScript Objects. We can create the object by using new keyword.

 

Eg,

class employee {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }
}

Here in this example we have created a class with name employee with 2 properties, name & age. We can create any number of properties.

 

Create object,

let emp1 = new employee("Kim", 20);
let emp2 = new employee("Sara", 21);

In this object creation we have created 2 objects. You can create any number of objects of the same class based on your business need.

 

Create Method

 

As we have seen that we can create object of any class, other than that we can create method as well.

 

Eg:

class employee {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }
   age() {
      let date = new Date();
      return 50 - this.age;
   }
}

Create paramter Method

 

We have created the above method without parameters, but we can also create with parameter method.

 

Eg,

class employee {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }
   age(x) {
      let date = new Date();
      return x - this.age;
   }
}

let emp1 = new employee("Kim", 20);
emp1.age =emp1.age(50);

Note

The code that we will write in class must be followed in "strict mode", otherwise we will get an error if you do not follow the "strict mode" rules.

 

JavaScript Class Inheritance

 

If we know any object oriented programming language then it's easy to understand about inheritance. It is used to create a class inheritance, and uses the extends keyword. The class which is created with a class inheritance (extend) will inherit all the methods and properties from another class.

 

Eg,

 

Let's create a class name "student" which we will use to inherit the methods-properties from the "teacher" class,

class student {
   constructor(name) {
      this.name = name;
   }
   present() {
      return 'My Name is: ' + this.name;
   }
}

class teacher extends student {
   constructor(name, std) {
      super(name);
      this.std = std;
   }
   show() {
      return this.present() + ', it is a ' + this.sts;
   }
}

Note

The super() method refers to the parent class (employee). The concept of inheritance is used for a code reusability point of view, which reuses the properties and methods of an existing class when you create a new class.

 

JavaScript Static Methods 

 

The concept of static method is the same as the OOPs concept.

class employee {
   constructor(name) {
      this.name = name;
   }
   static m1() {
      return "Hello employee";
   }
}

let emp = new employee("Sara");

document.getElementById("p1").innerHTML = employee.m1();

Note

p1 is the id like it: <p id="demo"></p>

 

JavaScript Function

 

Function is same as any method which in JavaScript functions are defined with the function keyword. The syntaxt of function would be like this,

 

function functionName(param) {

// ToDo code

}

 

eg,

function myFunction(a, b) {
   return a * b;
}

Here in this function it will return the multiple of a and b.

 

Note

A JavaScript function can also be defined using an expression. so that the function expression we can be stored in a variable:

 

eg,

 

var x = function (a, b) {return a * b};

var z = x(4, 3);

 

Self-Invoking Functions

 

A self-invoking function is invoked/called automatically, without being called. This is useful in case of page loading which initially is called if required. If function will need to execute automatically then the expression is followed by ().

 

eg,

<!DOCTYPE html>
<html>
   <body>

      <p>Invoked automatically</p>

      <p id="demo"></p>

      <script>
         (function () {
            document.getElementById("demo").innerHTML = "hi test function invoked automatically";
         })();
      </script>

   </body>
</html>

JavaScript Arrow Function

 

Arrow functions isn't a  new concept. It allows a short syntax for writing function expressions. You don't need the function keyword, the return keyword, and the curly brackets.

 

eg,

// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => x * y;

Note

Arrow functions are not supported in IE11 or earlier.

 

Function Parameters

 

In normal OOPs concept parameter is checked at the time of passing, but in JavaScript function does not perform any checking on parameter values (arguments). In JavaScript, programming language function definitions do not specify data types for parameters. In JavaScript programming language functions do not check how many arguments it's going to receive.

 

eg,

<!DOCTYPE html>
<html>
   <body>

      <p> function parameter.</p>
      <p id="demo"></p>

      <script>
         function myFunction(x, y) {
            if (y === undefined) {
            y = 4;
            }
            return x * y;
            }
         document.getElementById("demo").innerHTML = myFunction(4);
      </script>

   </body>
</html>

// output: 16

Default Parameters

 

ECMAScript 2015 or ES6 allows default parameter values in the function declaration,

 

function (x, y = 2) {

// todo code

}

 

Difference between Call() & Apply() function

 

The call() method takes arguments separately. The apply() method takes arguments as an array. The apply() method accepts arguments in an array,

 

eg,

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

   <script>
      var employee = {
         fullName: function(age, adrs) {
            return this.firstName + " " + this.lastName + "," + age + "," + adrs;
         }
      }
      var person1 = {
         firstName:"sara",
         lastName: "haya"
      }
      var x = person.fullName.apply(person1, [21, "dd"]);
      document.getElementById("demo").innerHTML = x;
   </script>

</body>
</html>

The call() method is a predefined JavaScript method.

 

eg,

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
   <script>
      var person = {
          fullName: function() {
              return this.firstName + " " + this.lastName;
          }
      }
      var person1 = {
          firstName: "John",
          lastName: "Doe"
      }
      var person2 = {
          firstName: "Mary",
          lastName: "Doe"
      }
      var x = person.fullName.call(person1);
      document.getElementById("demo").innerHTML = x;
   </script>
</body>
</html>

Note

The call() method can accept arguments,

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
   <script>
      var person = {
          fullName: function(city, country) {
              return this.firstName + " " + this.lastName + "," + city + "," + country;
          }
      }
   var person1 = {
          firstName: "John",
          lastName: "Doe"
      }
      var x = person.fullName.call(person1, "Oslo", "Norway");
      document.getElementById("demo").innerHTML = x;
   </script>
</body>
</html>

JavaScript Events

 

In JavaScript event can be something that happens on the browser, or something a user does on button click or any action perform. Events that can be a button click, input change, keyup, keydown etc... Which we can do on single quotes or double quotes like this,

 

<element event='some JavaScript'>

<element event="some JavaScript">

 

eg,

 

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

or

<button onclick="this.innerHTML = Date()">The time is?</button>

 

Note

As we know that javaScript code is often many lines long. 

<!DOCTYPE html>
<html>
<body>
<button onclick="displayDate()">The time is?</button>
   <script>
      function displayDate() {
         document.getElementById("demo").innerHTML = Date();
      }
   </script>
  <p id="demo"></p>
</body>
</html>

Common HTML Events

 

Here is a list of some common HTML events,

 

 

Summary

 

Congratulations on following the steps. I hope you liked this tutorial and please share it with others. Thanks for taking your valuable time to read the full article.