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,

eg,

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.