You are on page 1of 31

JavaScript (js) is a light-weight object-oriented programming language which is used by

several websites for scripting the webpages. It is an interpreted, full-fledged programming


language that enables dynamic interactivity on websites when applied to an HTML
document. It was introduced in the year 1995 for adding programs to the webpages in the
Netscape Navigator browser(Brendan Eich).

Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:

Client-side validation,
Dynamic drop-down menus,
Displaying date and time,
Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box
and prompt dialog box),
Displaying clocks etc.

Alphbates A-Z or a-z


digits 0-9
symbols

~ tilde ` backquote
! exclamation @ ampersat,at
# hash $ dollar
% percent ^ caret
& and * asterisk
() paranthesis - hyphen
_ underscroll + plus
= equal {} curely braces
[] square brackets <> angular brackets
: colon ; semicolon
" double quotes ' single quote
, camma . fullstop
? question mark / forward slash
\ back slash

Reserved words: The programming language reserved words that should not be used as
identifiers is called reserved words or keywords.
Ex: abstract,arguments,await,boolean,break...

Identifier: It is a name given to a variable,constant,function....

constant: A constant is one whose value never changes

Ex: const PI = 3.142;


Literals

* JavaScript Literals are constant values that can be assigned to the variables that are called
literals or constants.
* JavaScript Literals are syntactic representations for different types of data like numeric,
string, Boolean, array, etc.

integer : 10,20,30,-34,....
float : 8.5,11.6,-9.5.....
string : "brillant","APPLE","Ongole".....
array : var fruits = ["Apple", "Orange", "Mango", "Banana"];
boolean : true,false

variable: A variable is a name given to a memory location where some value will be stored.

Using var var age=45;

Using let let age=45

Using const const PI=3.142

Using nothing age=45

Data Types: Represents the type of value to be stored in a variable.

JavaScript has 8 Datatypes

1. String x="HELLO"
2. Number x=3;
3. Bigint x=2n
4. Boolean x=true,y=false
5. Undefined x;
6. Null x=null;
7. Symbol x=Symbol('a')

8. Object

Object Data Type

1. An object user={ name : "ABC", age : 22 };


2. An array month=[ "Jan", "Feb", "Mar" ];
3. A date x=new Date();
Operator: An operator is a special symbol which performs a specific operation between the
two operands.

Arithmetical Operators

Operator Description

+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016)
/ Division(Quotient)
% Modulus (Division Remainder)
++ Increment
-- Decrement

Assigment Operators

Operator Example Same As


= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y

Example

x=5

x+=1 x=x+1
5+=1 x=5+1
x=6 x=6

Comparison Operators

Operator Description

== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to

Ternary operator

Operator Description

? ternary operator

Other operators

Operator Description

typeof Returns the type of a variable


instanceof Returns true if an object is an instance of an
object type

Bitwise Operators: Bit operators work on 32 bits numbers. Any numeric operand in the
operation is converted into a 32 bit number. The result is converted back to a JavaScript
number.

Operator Description Example


Result Decimal
& AND 5&1
0101 & 0001 0001 1
| OR 5|1
0101 | 0001 0101 5
~ NOT ~5
~0101 1010 10
^ XOR 5^1
0101 ^ 0001 0100 4
<< left shift 5 << 1 0101 << 1
1010 10
>> right shift 5 >> 1 0101 >> 1
0010 2
>>> unsigned right shift 5 >>> 1 0101 >>> 1
0010 2

String operators
+
+=

Function : A JavaScript function is a block of code designed to perform a particular task.

Console Programming

Console object: In JavaScript, a console is an object which provides access to the browser
debugging console. We can open a console in a web browser by using Ctrl + Shift + I for
windows and Command + Option + K for Mac.

console.log() Method: The console.log() is a function in JavaScript that is used to print any
kind of variables defined before in it or to just print any message that needs to be displayed to
the user.

Syntax: console.log("");
Ex: console.log("State Bank of India")

Syntax:console.log(variable)
Ex: x=5
console.log(x)

Syntax:console.log("text",variable)
Ex: x=5
console.log("value of x=",x)

The console.error() method in HTML is used to display an error message on the console. The
console.error() method is used for testing purposes. The error message is sent as a parameter
to the console.error() method.

Syntax: console.error( message )

The console.warn() method is used to write a warning message in the console. So open the
console to display the output (warning message).

Syntax:

console.warn( message )
The console.clear() method in HTML is used to clear the console and writes some message
“Console was cleared” on the console whenever it is executed. This method does not require
any parameter.

Syntax:

console.clear()

The console.time() method in HTML is used to start a timer in the console view. The
console.time() method can be used for calculating the time of programs for various testing
purposes. The label is sent as a parameter to the console.time() method.

Syntax:

console.time( label )

The console.timeEnd() method in HTML is used to end a timer started by the console.time()
method. This can be used to calculate the time of certain operations for testing purposes.

Syntax:

console.timeEnd( label )

The console.table() method in HTML is used for writing data in tabular form in the console
view. The table data is sent as a parameter to the console.table() method which must be an
object or an array containing the data to be filled in the table.

Syntax:

console.table( tabledata, tablecolumns );

The console.count() method in HTML is used to write the number of times the
console.count() method is called. The console.count() method can be added to a label that
will be included in the console view. The label is an optional parameter sent to the
console.count() method.

Syntax:

console.count( label )

The console.group() method in HTML is used to create a group of messages in the console. It
indicates the start of a message group and all the messages written after calling the
console.group() method will write inside the message group. The label is sent as an optional
parameter to the console.group() method.

Syntax:

console.group( label )

The console.groupEnd() method in HTML is used to indicate the end of a group of messages
in the console which has been created using the console.group() method. This method does
not accept any parameter.

Syntax:

console.groupEnd()

https://www.programiz.com/javascript/online-compiler/

//program to print a statement


console.log("Welcome to javascript")

//program to print a statement


console.log("Welcome to javascript")
console.log("nipuna technologies")
console.log("vijaywada")

//program to store a value in a variable and print it


age=45
console.log("Age=",age)

//program to store a value in a variable and print it


let age=45
console.log("Age=",age)

//program to store a value in a variable and print it


var age=45
console.log("Age=",age)

//program to store a value in a variable and print it


const age=45
console.log("Age=",age)

a=5;b=3
console.log("values before swap a=",a," ","b=",b)
c=a
a=b
b=c
console.log("values after swap a=",a," ","b=",b)

a=5;b=3
console.log("values before swap a=",a," ","b=",b)
a=a+b
b=a-b
a=a-b
console.log("values after swap a=",a," ","b=",b)

a=5;b=3
console.log("values before swap a=",a," ","b=",b)
a=a*b
b=a/b
a=a/b
console.log("values after swap a=",a," ","b=",b)

a=5;b=3
console.log("values before swap a=",a," ","b=",b)
a=a^b
b=a^b
a=a^b
console.log("values after swap a=",a," ","b=",b)

a=5;b=3
console.log("Addition=",(a+b))
console.log("subtraction=",(a-b))
console.log("multiplication=",(a*b))
console.log("division=",(a/b))
console.log("Modulus=",(a%b))
console.log("Exponentation=",(a**b))
ecode="E101"
eno=101
ename="Anil"
esal=4555.85
egrade='a'
console.log("Ecode=",ecode)
console.log("Eno=",eno)
console.log("Ename=",ename)
console.log("Esal=",esal)
console.log("Egrade=",egrade)

age=prompt("Enter Your age in number..:")


console.log("Age=",age)
console.log("Typee",typeof(age))

Enter Your age in number..:45


Age= 45
Typee string (x)

-----------------------------------------------------------------------------------
age=parseInt(prompt("Enter Your age in number..:"))
console.log("Age=",age)
console.log("Typee",typeof(age))

Enter Your age in number..:4


Age= 4
Typee number
--------------------------------------------------------------------------------
a=parseInt(prompt("Enter a..;"))
b=parseInt(prompt("Enter b..:"))
c=a+b
console.log("Addition=",c)
c=a-b
console.log("Subtration=",c)
c=a*b
console.log("Multiplication=",c)
c=a/b
console.log("Division=",c)
c=a%b
console.log("Modulus=",c)
c=a**b
console.log("Exponentiation=",c)
---------------------------------------------------------------------------------------
l=parseInt(prompt("Enter Length..:"))
b=parseInt(prompt("Enter Breadth..:"))
a=l*b
console.log("Area of Rectangle=",a)
----------------------------------------------------------------------------------------

r=parseInt(prompt("Enter Radius...:"))
ci=2*Math.PI*r
console.log("Circumference of Circle=",ci)
a=Math.PI*r*r
console.log("Area of Circle=",a)
-----------------------------------------------------------------------------------------
p=parseInt(prompt("Enter Principal..:"))
t=parseInt(prompt("Enter Time..:"))
r=parseInt(prompt("Enter Rate of Interest..:"))
si=p*t*r/100
console.log("Simple Interest=",si)
c=p*Math.pow(1+r/100,t)
console.log("compound Interest=",c)
-----------------------------------------------------------------------------------------
//celsius to fahrenheit

ci=parseInt(prompt("Enter Temperature in Celsius..:"))


f=(ci*9/5)+32
console.log("Fahrenheit",f)
----------------------------------------------------------------------------------------
//Fahrenheit to Celsius

f=parseInt(prompt("Enter Temperature in Celsius..:"))


ci=(f-32)*5/9
console.log("Celsius",ci)

-----------------------------------------------------------------------------------------

//if
a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
if(a>b)
{
console.log("a is big")
}

//if else
a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
if(a>b)
{
console.log("a is big")
}
else
{
console.log("b is big")
}

a:20 a:10 a:20


b:10 b:20 b:20
a is big b is big b is big(x)

//else if
a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
if(a>b)
{
console.log("a is big")
}
else if(a<b)
{
console.log("b is big")
}

a:20 a:10 a:20


b:10 b:20 b:20
a is big b is big

//else if
a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
if(a>b)
{
console.log("a is big")
}
else if(a<b)
{
console.log("b is big")
}
else if(a==b)
{
console.log("both are equal")
}
//else if
a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
if(a>b)
{
console.log("a is big")
}
else if(a<b)
{
console.log("b is big")
}
else
{
console.log("both are equal")
}

//nested if
x=parseInt(prompt("Enter value for x..:"))
if(x>=0)
if(x==0)
{
console.log("zero")
}
else
{
console.log("positive")
}
else
{
console.log("negative")
}

//conditional operator or ternary operator

a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
t=a>b?a:b
console.log(t," is big")

a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
c=parseInt(prompt("Enter c..:"))
d=parseInt(prompt("Enter d..:"))
e=parseInt(prompt("Enter e..:"))

x=a
if(b>x) x=b
if(c>x) x=c
if(d>x) x=d
if(e>x) x=e
console.log(x,"is big")

a=parseInt(prompt("Enter a..:"))
b=parseInt(prompt("Enter b..:"))
c=parseInt(prompt("Enter c..:"))
if(a>b && a>c)
{
console.log("a is big")
}
else if(b>c)
{
console.log("b is big")
}
else
{
console.log("c is big")
}

year=parseInt(prompt("Enter Year..:"))

if(year%400==0 && year%100!=0 || year%4==0)


{
console.log("leap year")
}
else
{
console.log("not a leap year")
}

age=parseInt(prompt("Enter age..:"))

if(age>=65)
{
console.log("Senior Citizen")
console.log("Eligible To Vote")
}
else if(age<65 && age>=18)
{
console.log("Major Citizen")
console.log("Eligible To Vote")
}
else
{
console.log("Minor Citizen")
console.log("Not Eligible To Vote")
}

x=parseInt(prompt("Enter a..:"))

if(x%2==0)
{
console.log("Even Number")
}
else
{
console.log("Odd Number")
}

Loops:
Loops are used to execute a statement repeatedly until the given condition is satisfied.

//program without loop

console.log("Nipuna Technologies")
console.log("Nipuna Technologies")
console.log("Nipuna Technologies")
console.log("Nipuna Technologies")
console.log("Nipuna Technologies")

while loop: In a while loop the condition is evaluated at the beginning of the loop that is
statements will
be executed only when the expression at while is true.
while(expression)
{
statement;
}

i=1
do
{
console.log(i)
i=i+1
}while(i<=10)

i=1
for(i=1;i<=10;i++)
{
console.log(i)
}

i=1
for(i=1;i<=10;i++)
{
if(i>5)
break
console.log(i)
}

i=1
for(i=1;i<=10;i++)
{
if(i%2==0)
continue
console.log(i)
}

i=7
switch(i)
{
case 1:
console.log("good")
break

case 2:
console.log("better")
break

case 3:
console.log("best")
break

default:
console.log("invalid")
}

Arrays

x=[10,20,30,40,50]
console.log(x[0])

x=[10,20,30,40,50]
for(i=0;i<5;i++)
console.log(x[i])

x=[10,20,30,40,50]
for(i=4;i>=0;i--)
console.log(x[i])

s=0
x=[10,20,30,40,50]
for(i=0;i<5;i++)
{
console.log(x[i])
s=s+x[i]
}
av=s/5
console.log("Sum=",s)
console.log("Average=",av)

x=[10,20,30,40,50]
max=x[0]
min=x[0]
for(i=0;i<5;i++)
{
console.log(x[i])
if(x[i]>max)
max=x[i]
else if(x[i]<min)
min=x[i]
}
console.log("Max=",max)
console.log("Min=",min)

x=new Array(10,20,30,40,50)
console.log(x[0])
x=new Array(10,20,30,40,50)
for(i=0;i<5;i++)
{
console.log(x[i])
}

x=new Array(10,20,30,40,50)
max=x[0]
min=x[0]
for(i=0;i<5;i++)
{
console.log(x[i])
if(x[i]>max)
max=x[i]
else if(x[i]<min)
min=x[i]
}
console.log("Max=",max)
console.log("Min=",min)

x=[101,"Madhu",88999.76,'b',1]
for(i=0;i<5;i++)
console.log(x[i])

x=new Array(10,"anil",455.54,'a',3400)
for(i=0;i<5;i++)
{
console.log(x[i])
}

https://anim.ide.sk/basic_algorithms.php

Array methods

length
pop()
push()
shift()
unshift()
join()
delete()
concat()
flat()
splice()
slice()
toString()

Push — adds an element to the end of the current array.

Pop — removes the last element from an array and returns the removed element itself.

Shift — removes the first element from an array and returns that removed element.

Sort — sorts the elements of an array in ascending order and returns this array

Fill — adds or replaces all the elements of an array from a start index to an end index with a
provided value.

Find — returns the value of the first element in the provided array that satisfies the provided
testing function.

FindIndex — returns the index of the first element in the array that satisfies the provided
testing function.

IndexOf — returns the first index at which a given element can be found in the array.

Some — returns boolean value whenever at least one element in the array passes the provided
testing callback function.

Every — returns true if every element in this array satisfies the testing function.

Includes — returns boolean if a provided element is present at least once in the array. The
difference from some method —is that here
the element/value itself is passed as an argument, instead of callback function.

Map — returns a new array. It goes each element one by one and modifies them by calling a
provided function.

Filter — returns a new array that will contain only those elements, for which the provided
filtering function returns true.

Join — creates and returns a new string by concatenating all of the elements in an array, but
these elements will be separated by the indicated separator.

Concat — combines two arrays and returns a third one, as a final result.
Flat — if an array contains nested ones, it will move all of them on the higher level, that will
result just one new array. It’s also possible to specify the needed depth of nesting.

Slice — with the provided indexes, it takes a specified section of an original array and creates
a new one with only these elements. Staring index — is included, but end one — is not.

const numbers = [2, 4, 6, 8, 10];


const removedElements = numbers.splice(1, 2); // Removes elements at index 1 and 2

console.log(removedElements); // Output: [4, 6]


console.log(numbers); // Output: [2, 8, 10]

x=["pen","pencil","book","eraser","scale","bag","book","desk","chair","table"]
console.log(x)

x.push("Inkpen")
console.log(x)

x.pop()
console.log(x)

x.shift()
console.log(x)

x.sort()
console.log(x)

x.fill("nipuna")
console.log(x)

console.log(x.includes("desk"))

console.log(x.indexOf("eraser"))

x.reverse()
console.log(x)

x=["pen","pencil","book","eraser","scale","bag","book","desk","chair","table"]
y=["apple","mango","grapes","orange"]
z=x.concat(y)
console.log(z)

const numbers = [2, 4, 6, 8, 10];


const numString = numbers.join('-');

console.log(numString); // Output: "2-4-6-8-10"

x=["pen","pencil","book","eraser","scale","bag","book","desk","chair","table"]
console.log(x.at(2))

x=["pen","pencil","book","eraser","scale","bag","book","desk","chair","table"]
console.log(x.slice(1,3))

const numbers = [2, 4, 6, 8, 10];


const firstEvenIndex = numbers.findIndex(number => number % 2 === 0);

console.log(firstEvenIndex); // Output: 0

const numbers = [2, 4, 6, 8, 10];


const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4, 6, 8, 10]

const numbers = [2, 4, 6, 8, 10];


const squareNumbers = numbers.map(number => number ** 2);

console.log(squareNumbers);

const numbers = [2, 4, 6, 8, 10];


const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum); // Output: 30

const numbers = [2, 4, 6, 8, 10];


const hasEven = numbers.some(number => number % 2 === 0);
const allEven = numbers.every(number => number % 2 === 0);

console.log(hasEven); // Output: true


console.log(allEven); // Output: true

const numbers = [2, 4, 6, 8, 10];


const keysIterator = numbers.keys();
const valuesIterator = numbers.values();
const entriesIterator = numbers.entries();
console.log([...keysIterator]); // Output: [0, 1, 2, 3, 4]
console.log([...valuesIterator]); // Output: [2, 4, 6, 8, 10]
console.log([...entriesIterator]); // Output: [ [0, 2], [1, 4], [2, 6], [3, 8], [4, 10] ]

const iterable = 'hello';


const charArray = Array.from(iterable);

console.log(charArray); // Output: [ 'h', 'e', 'l', 'l', 'o' ]

const numbers = [2, 4, 6, 8, 10];


const firstElement = numbers.shift();
numbers.unshift(0);

console.log(firstElement); // Output: 2
console.log(numbers); // Output: [0, 4, 6, 8, 10]

const nestedArray = [1, [2, 3], [4, [5]]];


const flattenedArray = nestedArray.flat();
const doubledFlattened = nestedArray.flatMap(num => [num, num * 2]);

console.log(flattenedArray); // Output: [1, 2, 3, 4, [5]]


console.log(doubledFlattened); // Output: [1, 2, 2, 3, 4, 8, [5, NaN]]\

const numbers = [2, 4, 6, 8, 10];


const arrayAsString = numbers.toString();

console.log(arrayAsString); // Output: "2,4,6,8,10"

const numbers = [2, 4, 6, 8, 10, 3, 6];


const firstIndex = numbers.indexOf(3);
const lastIndex = numbers.lastIndexOf(3);

console.log(firstIndex); // Output: 5
console.log(lastIndex); // Output: 5

const numbers = [2, 4, 6, 8, 10];


const subArray = numbers.slice(1, 3); // Creates a new array from index 1 to 2

console.log(subArray); // Output: [4, 6]


Functions

//program without a function

console.log("Apple")
console.log("Mango")
console.log("Grapes")
console.log("Orange"
console.log("Banana")
console.log("Apple")
console.log("Mango")
console.log("Grapes")
console.log("Orange"
console.log("Banana")
console.log("Apple")
console.log("Mango")
console.log("Grapes")
console.log("Orange"
console.log("Banana")

//program with function


function frlist()
{
console.log("Apple")
console.log("Mango")
console.log("Grapes")
console.log("Orange")
console.log("Banana")
}
frlist()
console.log("------------------------")
frlist()
console.log("------------------------")
frlist()

Note: Once created a function can be used any number of times we require,this reduces the
length of the
program.

Types of Functions

1. Function without arguments without return type


2. Function with arugments without return type
3. Function without arguments with return type
4. Function with arguments with return type
//function without arguments without return type
function mysum()
{
a=5
b=3
c=a+b
console.log("sum=",c)
}
mysum()

//function with arguments without return type


function mysum(x,y)
{
a=x
b=y
c=a+b
console.log("sum=",c)
}
mysum(20,10)

//function without arguments with return type


function mysum()
{
a=5
b=3
c=a+b
return c
}
console.log("Sum=",mysum())

//function with arguments with return type


function mysum(x,y)
{
a=x
b=y
c=x+y
return c
}
console.log("Sum=",mysum(20,10))

Math Object
console.log(Math.abs(-100))
console.log(Math.abs(-100.45))
console.log(Math.tan(40))
console.log(Math.sin(60))
console.log(Math.cos(80))
console.log(Math.round(456456.3455))
console.log(Math.floor(456455.345345345))
console.log(Math.ceil(456455.345345345))
console.log(Math.PI)
console.log(Math.E)
console.log(Math.sqrt(4))
console.log(Math.pow(2,4))

String Object
str1="brilliant"
str2="ONGOLE"
str3="state bank of india"
str4=" ongole "
console.log("character at="+str1.charAt(1))
console.log("upper case="+str1.toUpperCase())
console.log("lower case="+str2.toLowerCase())
console.log("trim="+str4.trim())
console.log("substring="+str3.substring(0,5))
console.log("startswith="+str3.startsWith("bri"))
console.log("replace="+str3.replace('a','x'))

Date Object

d=Date()
console.log("Date=",d)

Object Oriented Programming Using JavaScript

class Bird //class


{
fly() //function
{
console.log("They fly to fulfill natural activities");
}
}
Parrot=new Bird() //object Parrot instantiated from the class Bird
Parrot.fly()

class Bird
{
fly()
{
console.log("They fly to fulfill natural activities");
}
}
Parrot=new Bird()
Parrot.fly()
console.log("----------------------------------")
Pigeon=new Bird()
Pigeon.fly()
-------------------------------------------------------------------------------------------------
class Bird
{
fly()
{
console.log("They fly to fulfill natural activities");
}
buildnest()
{
console.log("They build nest to live");
}
Parrot=new Bird()
Parrot.fly()
Parrot.buildnest()
console.log("----------------------------------")
Pigeon=new Bird()
Pigeon.fly()
Pigeon.buildnest()
----------------------------------------------------------------------------------------------------
class Bird
{
fly()
{
console.log("They fly to fulfill natural activities");
}
}
Parrot=new Bird()
Parrot.age=5
Parrot.wings=2
Parrot.weight=3.4
Parrot.color="GREEN"
console.log("Age of Parrot=",Parrot.age)
console.log("Age of Parrot=",Parrot.wings)
console.log("Age of Parrot=",Parrot.weight)
console.log("Age of Parrot=",Parrot.color)
Parrot.fly()

class Bird
{
fly()
{
console.log("They fly to fulfill natural activities");
}
}
Parrot=new Bird()
Parrot.age=5
Parrot.wings=2
Parrot.weight=3.4
Parrot.color="GREEN"
console.log("Age of Parrot=",Parrot.age)
console.log("Age of Parrot=",Parrot.wings)
console.log("Age of Parrot=",Parrot.weight)
console.log("Age of Parrot=",Parrot.color)
Parrot.fly()
console.log("-------------------------------")
Pigeon=new Bird()
Pigeon.age=7
Pigeon.wings=2
Pigeon.weight=4.5
Pigeon.color="GREY"
console.log("Age of Pigeon=",Pigeon.age)
console.log("Age of Pigeon=",Pigeon.wings)
console.log("Age of Pigeon=",Pigeon.weight)
console.log("Age of Pigeon=",Pigeon.color)
Pigeon.fly()

//constructor

class MyCalci
{
constructor(a,b)
{
this.a=a
this.b=b
}
dispvals()
{
console.log("value of a=",this.a)
console.log("value of b=",this.b)
}
}
MC=new MyCalci(20,10)
MC.dispvals()

class MyCalci
{
constructor(a,b)
{
this.a=a
this.b=b
}
dispvals()
{
console.log("value of a=",this.a)
console.log("value of b=",this.b)
}
mysum()
{
return this.a+this.b
}
}
MC=new MyCalci(20,10)
MC.dispvals()
console.log("Sum=",MC.mysum())

class MyCalci
{
constructor(a,b)
{
this.a=a
this.b=b
}
dispvals()
{
console.log("value of a=",this.a)
console.log("value of b=",this.b)
}
mysum()
{
return this.a+this.b
}
}
MC=new MyCalci(20,10)
MC.dispvals()
console.log("Sum=",MC.mysum())
console.log("----------------------------")
MC1=new MyCalci(100,150)
MC1.dispvals()
console.log("Sum=",MC1.mysum())

Inheritance:
Deriving a new class from the already existing class is called
inheritance. Where the already existing class is called base class or parent class or super class
and the newly created class is called child class
or derived class.

//single inheritance
class A
{
funca()
{
console.log("Function of class A")
}
}
class B extends A
{
funcb()
{
console.log("Function of class B")
}
}

objB=new B()
objB.funca()
objB.funcb()

//multi level inheritance


class A
{
funca()
{
console.log("Function of class A")
}
}
class B extends A
{
funcb()
{
console.log("Function of class B")
}
}
class C extends B
{
funcc()
{
console.log("Function of class C")
}
}
objB=new B()
objB.funca()
objB.funcb()
console.log("-----------------------------")
objC=new C()
objC.funca()
objC.funcb()
objC.funcc()

//hierarchical inheritance

class A
{
funca()
{
console.log("Function of class A")
}
}
class B extends A
{
funcb()
{
console.log("Function of class B")
}
}
class C extends A
{
funcc()
{
console.log("Function of class C")
}
}

class D extends A
{
funcd()
{
console.log("Function of class D")
}
}
objB=new B()
objB.funca()
objB.funcb()
console.log("-----------------------------")
objC=new C()
objC.funca()
objC.funcc()
console.log("-----------------------------")
objD=new D()
objD.funca()
objD.funcd()

https://www.javascripttutorial.net/javascript-dom/

Document Object Model in JavaScript

The Document Object Model (DOM) is an application programming interface (API) for
manipulating HTML documents. The HTML DOM is a standard object model
and programming interface for HTML. It defines:

 The HTML elements as objects


 The properties of all HTML elements
 The methods to access all HTML elements
 The events for all HTML elements

 In other words: The HTML DOM is a standard for how to get, change, add, or
delete HTML elements.
Selecting elements

getElementById() – select an element by id.

getElementsByName() – select elements by name.

getElementsByTagName() – select elements by a tag name.

getElementsByClassName() – select elements by one or more class names.

querySelector() – select elements by CSS selectors.

innerHTML – get and set the HTML content of an element.

You might also like