OOPS - Class and Object ~ ProgramTechie

JavaScript OOPs

Object Oriented Programming Structure

v Class

v Object

v Inheritance

v Abstraction

v Encapsulation

v Polymorphism

v Prototype

v Constructor

v Static Method

Inheritance – one object acquires properties and behavior of parent class

Encapsulation – Data binding

Polymorphism – Multitask

Abstraction – Data hiding

Class and Object & Constructor

Class:

Collection of object.

Syntax

class classname{

statement;

}

Object:

Collection of data.

Program

<!DOCTYPE html>

<head>

<title>Document</title>

<h2 style="background-color: rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia, 'Times New Roman', Times, serif;">Class</h2>

<h5 style="color: rgb(231, 15, 166);">Output</h5>

</head>

<body>

class Employee

{

constructor(id,name,salary)

{

this.id=id;

this.name=name;

this.salary=salary;

}

detail()

{

document.writeln(this.id+" "+this.name+" "+this.salary+"<br>")

}

var a=new Employee(101,"Roshan",10000);

var b=new Employee(102,"Daisy",20000);

a.detail();

b.detail();

</script>

</body>

</html>

Output

Class Declarations Hoisting

<!DOCTYPE html>

<head>

<title>Document</title>

<h2 style="background-color: rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia, 'Times New Roman', Times, serif;">Class</h2>

<h5 style="color: rgb(231, 15, 166);">Output</h5>

</head>

<body>

//Here, we are invoking the class before declaring it.

var e1=new Employee(101,"Martin Roy");

var e2=new Employee(102,"Duke William");

e1.detail(); //calling method

e2.detail();

//Declaring class

class Employee

{

//Initializing an object

constructor(id,name)

{

this.id=id;

this.name=name;

}

detail()

{

document.writeln(this.id+" "+this.name+"<br>")

}

b.detail();

</script>

</body>

</html>

Output

Unnamed Class

<!DOCTYPE html>

<head>

<title>Document</title>

<h2 style="background-color: rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia, 'Times New Roman', Times, serif;">Class</h2>

<h5 style="color: rgb(231, 15, 166);">Output</h5>

</head>

<body>

var emp = class {

constructor(id, name) {

this.id = id;

this.name = name;

}

};

document.writeln(emp.name);

</script>

</body>

</html>

Output

Redeclaring class

<!DOCTYPE html>

<head>

<title>Document</title>

<h2 style="background-color: rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia, 'Times New Roman', Times, serif;">Class</h2>

<h5 style="color: rgb(231, 15, 166);">Output</h5>

</head>

<body>

var emp=class

{

//Initializing an object

constructor(id,name)

{

this.id=id;

this.name=name;

}

//Declaring method

detail()

{

document.writeln(this.id+" "+this.name+"<br>")

}

//passing object to a variable

var e1=new emp(1,"kavin");

var e2=new emp(2,"gubenthiran");

e1.detail(); //calling method

e2.detail();

//Re-declaring class

var emp=class

{

//Initializing an object

constructor(id,name)

{

this.id=id;

this.name=name;

}

detail()

{

document.writeln(this.id+" "+this.name+"<br>")

}

//passing object to a variable

var e1=new emp(3,"Daisy");

var e2=new emp(4,"John");

e1.detail(); //calling method

e2.detail();

</script>

</body>

</html>

Output

OBJECTS

Aggregation - the capability to store one object inside another object.

Object Properties

objectName.objectProperty = propertyValue;

User-Defined Objects

The new Operator

var employee = new Object();

var books = new Array("C", "C++", "Java");

var day = new Date("August 15, 1947");

The Object() Constructor

A constructor is a function that creates and initializes an object. JavaScript provides a special constructor function called Object() to build the object.

<!DOCTYPE html>

<head>

<title>Document</title>

<h2 style="background-color: rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia, 'Times New Roman', Times, serif;">Object</h2>

<h5 style="color: rgb(231, 15, 166);">Output</h5>

</head>

<body>

var book = new Object(); // Create the object

book.subject = "C Language"; // Assign properties to the object

book.author = "Dennis Ritchie";

document.write(book.subject,"<br>",book.author);

</script>

</body>

</html>

Output

<!DOCTYPE html>

<head>

<title>Document</title>

function test()

{

var myobj={'apple':250,'orange':80,'grapes':90,'guava':70};

console.log(myobj);

console.log(myobj.guava);

console.log(myobj['guava']);

console.log(Object.keys(myobj));

var keys=Object.keys(myobj);

for(x in keys)

{

console.log(keys[x],myobj[keys[x]]);

}

</script>

</head>

<body>

<button onclick="test()">Objects</button>

</body>

</html>

Output

Defining Methods for an Object

<!DOCTYPE html>

<head>

<title>Document</title>

<h2 style="background-color: rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia, 'Times New Roman', Times, serif;">Object</h2>

<h5 style="color: rgb(231, 15, 166);">Output</h5>

function addPrice(amount){

this.price = amount;

}

function book(title, author){

this.title = title;

this.author = author;

this.addPrice = addPrice; // Assign that method as property.

}

</script>

</head>

<body>

var myBook = new book("Python", "Guido van Rossum");

myBook.addPrice(100);

document.write("Book title is : " + myBook.title + "<br>");

document.write("Book author is : " + myBook.author + "<br>");

document.write("Book price is : " + myBook.price + "<br>");

</script>

</body>

</html>

Output

The ‘with’ Keyword

The ‘with’ keyword is used as a kind of shorthand for referencing an object's properties or methods.

Syntax

with (object){

properties used without the object name and dot

}

<!DOCTYPE html>

<head>

<title>Document</title>

<h2 style="background-color: rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia, 'Times New Roman', Times, serif;">Object</h2>

<h5 style="color: rgb(231, 15, 166);">Output</h5>

function addPrice(amount){

with(this){

price = amount;

}

function book(title, author){

this.title = title;

this.author = author;

this.price = 0;

this.addPrice = addPrice; // Assign that method as property.

}

</script>

</head>

<body>

var myBook = new book("Java", "James Gosling");

myBook.addPrice(100);

document.write("Book title is : " + myBook.title + "<br>");

document.write("Book author is : " + myBook.author + "<br>");

document.write("Book price is : " + myBook.price + "<br>");

</script>

</body>

</html>

Output

<!DOCTYPE html>

<head>

<title>Document</title>

<h2 style="background-color: rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia, 'Times New Roman', Times, serif;">Object</h2>

<h5 style="color: rgb(231, 15, 166);">Output</h5>

</head>

<body>

function employee(id,name,salary){

this.id=id;

this.name=name;

this.salary=salary;

this.changeSalary=changeSalary;

function changeSalary(otherSalary){

this.salary=otherSalary;

}

e=new employee(1,"Jothika",20000);

document.write(e.id+" "+e.name+" "+e.salary);

e.changeSalary(40000);

document.write("<br>"+e.id+" "+e.name+" "+e.salary);

</script>

</body>

</html>

Output

Object passing into function

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#mybox

{

width:25vw;

height: 10vh;

line-height: 10vh;

text-align: center;

font-size: 2em;

background-color: red;

}

</style>

var total=0;

function shop(objnum)

{

var price=[10,20,40];

var s1=document.getElementById("snack"+objnum).checked;

if(s1)

total+=price[objnum-1];

else

total-=price[objnum-1];

document.getElementById("mybox").innerHTML=total;

}

</script>

</head>

<body>

<h2>Products</h2>

<div>

<input type="checkbox" id="snack1" onclick="shop(1)" >Samosa Rs.10

<input type="checkbox" id="snack2" onclick="shop(2)">Biscuits Rs.20

<input type="checkbox" id="snack3" onclick="shop(3)">Juice Rs.40

</div>

</div>

</body>

</html>

Output

Prototype Object

Syntax:

ClassName.prototype.methodName

<!DOCTYPE html>

<head>

<title>Document</title>

<h2 style="background-color: rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia, 'Times New Roman', Times, serif;">Prototype Object</h2>

<h5 style="color: rgb(231, 15, 166);">Output</h5>

</head>

<body>

function Employee(firstName,lastName)

{

this.firstName=firstName;

this.lastName=lastName;

}

Employee.prototype.fullName=function()

{

return this.firstName+" "+this.lastName;

}

var employee1=new Employee("kavin","dass");

var employee2=new Employee("suba", "krish");

document.writeln(employee1.fullName()+"<br>");

console.log(employee1.fullName());

document.writeln(employee2.fullName());

console.log(employee2.fullName());

</script>

</body>

</html>

Output

JavaScript static Method

Rule:

The static keyword is used to declare a static method.
The static method can be of any name.
A class can contain more than one static method.
If we declare more than one static method with a similar name, the JavaScript always invokes the last one.
The static method can be used to create utility functions.

<!DOCTYPE html>

<head>

<title>Document</title>

<h2 style="background-color: rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia, 'Times New Roman', Times, serif;">Static Method</h2>

<h5 style="color: rgb(231, 15, 166);">Output</h5>

</head>

<body>

class Test

{

static display1()

{

return "static method is invoked"

}

static display2()

{

return "static method is invoked again"

}

document.writeln(Test.display1()+"<br>");

document.writeln(Test.display2());

</script>

</body>

</html>

Output

ProgramTechie

Welcome to ProgramTechie

Learn Programming languages

Thursday, July 20, 2023

OOPS - Class and Object

Class Declarations Hoisting

Output

Unnamed Class

Syntax:

0 comments:

Post a Comment

Programming language

Categories

Pages