JavaScript
Uploaded by
dhanushkuna333JavaScript
Uploaded by
dhanushkuna333Java Script
27/12/2021
Three-layer architecture:
Presentation layer Business/logic layer Persistence layer
HTML Java SQL
CSS 1. J2EE 1. My SQL
JS 2. Spring 2. Pl SQL
1. Angular JS 3. Hibernate 3. No SQL
2. React JS Python Mongo DB->JS
3. Metro JS 1. Flask
4. J query JS
Boot strap 1. Node JS
History of Java Script: -
The Brendan Eich is father of JS in the year of 1995 the first name java script is moca then live script from to java
script.
Java Script: -
Java script is an interpretive programing language interpretive mean line by line execution.
Java script is high level functional based programming language.
Java script is scripting language.
Relation between HTML/CSS/Java script: -
HTML CSS Java script
Framework of Java script: -
Angular JS: It is a framework which provide enhancement to any websites like VTU.in, ksrp.in, etc.
Small scale companies they are going to use React JS.
React JS: It is a java script framework it has a capacity to maintenance high traffic network like YouTube,
Instagram, Facebook, etc.
J-Query: The MNC company’s like google, WordPress, cap Gemini, Accenture are using J-query
Framework for security purpose.
28/12/2021
Printing statements: -
Document.write(); -> It is printing statement which is see the output in the client side & web browser.
Console.log (); -> It is a printing statement used to see the output in the console window, development & user
purpose.
1
Java Script
Keyword: ->keyword nothing but reserved word.
Ex: function, let, var, cont, for, if, constructor.
Variable: ->variable which is nothing but a container which holds the data.
Ex: x=100;
d.w(x);//100;
syntax
1. VarName=data;
2. Var varName=data;
3. Let varName=data;
4. Const (like a final keyword) varName=data;
E.g.
<script>
Y= “Jaikumar”;
Document.write(y);
</script>
Const b= “abc”;
Const b= “aaa”;
Document.write(b+ “</br>”);
Y= “jaikumar”;
Document.write(y+ “</br>”);
Var x=100;
Document.write(x+ “</br>”);
Let c=true;
Let c=false;
Document.write(c+ “</br>”);
Data types: - we have two type of data type.
1. Primitive data type.
It has five data types
Number, Boolean, undefined, null, string.
2. Non- Primitive data type.
It has three data types
Array, object, regular expression
Number: Number is a data type which has a capacity to store numeric able data.
e.g.
<script>
Let num=100;
Document.write(num+ “<br>”)
2
Java Script
Let num1=12.34;
Document.write(num1+ “<br>”)
Let num2=12334445554543;//BigInt
Document.write(num2+ “<br>”)
</script>
Boolean: It is a data type which is capable of giving two values they are true and false whenever have decision
having senior’s we make use of Boolean data types.
e.g.
<script>
Let num=true;
Document.write(num+ “<br>”)
</script>
Undefined: If a variable not defined with any data we are going to get undefined value which is default value or
container.
<script>
Let num;
Document.write (num+ “<br>”
</script>
Null: Null is nothing but an empty if we want to make an any container as an empty container we go for null data
type.
<script>
Let num =776;
Let num =null;
Document.write (num+ “<br>”)
</script>
String: String is nothing but collection of character or bunch of characters we can represent string in three ways
“double cotes”, ‘single cotes’, ` break tick `.
<script>
Var j= “jai”;
Var a= ‘pro’;
Var i= `776`;
Document.write(j+ “<br>”+a+ “<br>”+i+ “<br>”);
</script>
29/12/2021
eg:1
<!DOCTYPE html>
3
Java Script
<html lang="en">
<head>
<title>29-12-2021</title>
</head>
<body>
<script>
document.write("............rcb............"+"</br>");
document.write("abd"+"</br>");
document.write("virat"+"</br>");
document.write("maxi"+"</br>");
document.write("...........csk............."+"</br>");
document.write("msd"+"</br>");
document.write("raina"+"</br>");
document.write("jadeja"+"</br>");
document.write("............rcb............"+"</br>");
document.write("abd"+"</br>");
document.write("virat"+"</br>");
document.write("maxi"+"</br>");
document.write("...........csk............."+"</br>");
document.write("msd"+"</br>");
document.write("raina"+"</br>");
document.write("jadeja"+"</br>");
</script>
</body>
</html>
from the above example we note that in the copy pasting approach we are facing three major problems.
1.the code looks lengthier.
2.the code duplication is there.
3.if we do any modification in original code that is not going to be effected in pasted part.
overcome with all these 3 drawback we are introducing the concept called FUNCTION.
FUNCTION.
set of instruction to perform some specific task according to the user requirement.
SYNTAX: - function functionName ()
4
Java Script
//statement
eg:2
<!DOCTYPE html>
<html lang="en">
<head>
<title>29-12-2021</title>
</head>
<body>
<script>
function rcb() {
document.write("............rcb............"+"</br>");
document.write("abd"+"</br>");
document.write("virat"+"</br>");
document.write("maxi"+"</br>");
function csk() {
document.write("...........csk............."+"</br>");
document.write("msd"+"</br>");
document.write("raina"+"</br>");
document.write("jadeja"+"</br>");
rcb();//function call
csk();//function call
rcb();//function call
csk();//function call
</script>
</body>
</html>
eg3:
<!DOCTYPE html>
<html lang="en">
<head>
5
Java Script
<title>29-12-2021</title>
</head>
<body>
<script>
function Student() {
document.write("Student name is jaikumar"+"</br>");
document.write("Jai from Vijayanagara"+"</br>");
document.write("Jai per is 69.60"+"</br>");
Student();
Student();
Student();
Student();
</script>
</body>
</html>
from the above example we note that for each function call we are getting same output (HARD CODED VALUE).
to overcome this drawback, we are going for concept called parameterized function.
SYNTAX: function functionName(para1,para2,......paraN)
//statement
functionName(args1,args2,args3.......argsN)//function call
PARAMETER:
parameter is a container which holds the arguments.
ARGUMENT:
the data which is passed in the function is called ARGUMENT.
eg4:
<!DOCTYPE html>
<html lang="en">
<head>
<title>29-12-2021</title>
</head>
<body>
6
Java Script
<script>
function Student(name,place,per) {
document.write("Student name is "+name+"</br>");
document.write("from "+place+"</br>");
document.write("per is "+per+"</br>");
Student("Madhu","Harihara",96.99);
Student("Jaikumar","Vijayanagara",69.60);
Student("Praveena"+"Vijayapura",70.06);
Student("Kirana"+"Belgavi"+86.78);
</script>
</body>
</html>
31/12/2021
In parameterized function number of parameter and number of arguments need not to be
the same.
In parameterized function are not going to check any data type.
<!DOCTYPE html>
<html lang="en">
<head>
<title>31/12/2021</title>
</head>
<body>
<script>
student ("madhu",2654,99.99)//function call
function student(name,place,per) {
document.write("student name is "+name+"<br>")
document.write(name+" is from "+place+"<br>")
document.write(name+" per is "+per+"<br>")
}
</script>
</body>
</html>
We can call the function before function declaration as shown in the above example.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>31/12/2021</title>
</head>
<body>
<script>
function car(brand,price) {
document.write("car brand name is "+brand+"<br>");
7
Java Script
document.write("car price is "+price+"<br>")
}
car ("Audi",129999,"black",20000)//function call
</script>
</body>
</html>
Output:
Car
Output:
car brand Audi
car price 129999
<!DOCTYPE html>
<html lang="en">
<head>
<title>31/12/2021</title>
</head>
<body>
<script>
function disply() {
document.write(arguments[0]+"</br>");
document.write(arguments[1]+"</br>");
document.write(arguments[2]+"</br>");
document.write(arguments[3]+"</br>");
}
disply("jaikumar","tavadur thanda","e&c","stjit")
</script>
</body>
</html>
Output
jaikumar
tavadur thanda
e&c
stjit
from the above example we note that in the function call we are going to pass n numbers of arguments but we
are not going to store those arguments in the parameter but using the help of argument object which is an array
type container we are retrieving the data using index value.these arguments we call as extra data.
Return type function:
Syntax:
1. function functionName()
{
………….
Return data;
}
2. function functionName()
{
……………..
Return var;
8
Java Script
}
3. function functionName()
{
……………..
Return expression;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>31/12/2021</title>
</head>
<body>
<script>
function disply() {
return 100;
}
document.write(disply()+"<br>");//function call
var x=disply();//function call
</script>
</body>
</html>
Out put
100
<!DOCTYPE html>
<html lang="en">
<head>
<title>31/12/2021</title>
</head>
<body>
<script>
function disply() {
var name="alia"
return name;
}
document.write(disply()+"<br>");//function call
var x=disply();
document.write(x);
</script>
</body>
</html>
Output
alia
alia
<!DOCTYPE html>
<html lang="en">
<head>
<title>31/12/2021</title>
</head>
9
Java Script
<body>
<script>
function disply() {
return 10+20*30+10+20000+20*9;
}
document.write(disply()+"<br>");//function call
var x=disply();
document.write(x);
</script>
</body>
</html>
Output
The return type function capable of returning data, variable, expression, function.
The return type function has to be called inside documents.write() or console.log() i.e printing
statement.
If we want to see the output of return type function, we have store in one container and print
the data.
Write a JS program to find cube of a number?
<!DOCTYPE html>
<html lang="en">
<head>
<title>31/12/2021</title>
</head>
<body>
<script>
function disply(a) {
return a*a*a;
}
var x=disply(10);
document.write(x+"<br>")
var x=disply(9);
document.write(x+"<br>")
var x=disply(8);
document.write(x+"<br>")
</script>
</body>
</html>
1000
729
512
<!DOCTYPE html>
<html lang="en">
<head>
<title>31/12/2021</title>
</head>
<body>
<script>
function disply(phy,chem,math) {
return phy+chem+math;
}
var x=disply(100,35,69);
10
Java Script
document.write("total sum is "+x+"<br>")
var x1=disply(69,85,44);
document.write("total sum is "+x1+"<br>")
</script>
</body>
</html>
total sum is 204
total sum is 198
function 1 function 2
phy
i/p Per=(sum/300*100)
chem Total sum=phy+chem+meth
math
Output (print per)
Total Sum
03/01/2022
<!DOCTYPE html>
<html lang="en">
<head>
<title>03/01/2022</title>
</head>
<body>
<script>
function function1(phy,chem,math) {
return phy+chem+math;
}
var totalSum=function1(65,89,93);//function call
function2(totalSum)
function function2(sum) {
var per=(sum/300*100)
document.write(per)
}
</script>
</body>
</html>
82.33333333333334
Default parameterized Function: -
Syntax: - function functionName(para1, para2, para3…………paraN=value)
{
//statements
}
11
Java Script
E.g.1
<!DOCTYPE html>
<html lang="en">
<head>
<title>03/01/2022</title>
</head>
<body>
<script>
function disply(a=22,b=33,c=88,d=99) {
document.write(a+"</br>")
document.write(b+"</br>")
document.write(c+"</br>")
document.write(d+"</br>")
}
disply();
</script>
</body>
</html>
22
33
88
99
E.g.2
<!DOCTYPE html>
<html lang="en">
<head>
<title>03/01/2022</title>
</head>
<body>
<script>
function disply(a=22,b=33,c=88,d=99) {
document.write(a+"</br>")
document.write(b+"</br>")
document.write(c+"</br>")
document.write(d+"</br>")
}
disply(44,55,66,77);
</script>
</body>
</html>
44
55
66
77
E.g.3
<!DOCTYPE html>
<html lang="en">
<head>
<title>03/01/2022</title>
12
Java Script
</head>
<body>
<script>
function disply(a=10,b,c,d) {
document.write(a+"</br>")
document.write(b+"</br>")
document.write(c+"</br>")
document.write(d+"</br>")
}
disply(44,77,99,88);
disply(54,55,56)
disply(94,95)
disply(76)
</script>
</body>
</html>
44
77
99
88
54
55
56
undefined
94
95
undefined
undefined
76
undefined
undefined
undefined
E.g.4
<!DOCTYPE html>
<html lang="en">
<head>
<title>03/01/2022</title>
</head>
<body>
<script>
function disply(a,b,c,d=10) {
document.write(a+"</br>")
document.write(b+"</br>")
document.write(c+"</br>")
document.write(d+"</br>")
}
disply(44,77,99,88);
disply(54,55,56)
disply(94,95)
13
Java Script
disply(76)
</script>
</body>
</html>
44
77
99
88
54
55
56
10
94
95
undefined
10
76
undefined
undefined
10
Rest parameterized Function: -
Syntax: - function functionName(...para)
//statement
functionName(arg1, arg2, arg3………….);
E.g.1
<!DOCTYPE html>
<html lang="en">
<head>
<title>03/01/2022</title>
</head>
<body>
<script>
function disply(...para) {
document.write(para[0]+"</br>")//11
document.write(para[1]+"</br>")//22
document.write(para[2]+"</br>")//33
document.write(para[3]+"</br>")//44
document.write(para)//11,22,33,44,55,66,77,88,99
}
disply(11,22,33,44,55,66,77,88,99);
</script>
</body>
</html>
14
Java Script
11
22
33
44
11,22,33,44,55,66,77,88,99
The rest parameter is nothing but it is an infinite container.
In a rest parameter we are going to store the data in the form of array.
Three dot (… para) followed by one reference is an annotation of rest parameter.
From the above example in the function call we have passed n number of arguments
but we are not stored in the container rather we used rest parameter.
We can fetch the data from the rest parameter using index value.
E.g.2
<!DOCTYPE html>
<html lang="en">
<head>
<title>03/01/2022</title>
</head>
<body>
<script>
function disply(...para,a,b) {
document.write(a+"</br>")
document.write(b+"</br>")
document.write(para[0]+"</br>")
document.write(para[1]+"</br>")
document.write(para[2]+"</br>")
document.write(para[3]+"</br>")
document.write(para)
}
disply(66,77,88,99);
</script>
</body>
</html>
66
77
88
99
undefined
undefined
88,99
E.g.3
<!DOCTYPE html>
<html lang="en">
<head>
<title>03/01/2022</title>
</head>
15
Java Script
<body>
<script>
function disply(...para,a,b)//Uncaught SyntaxError: Rest parameter must be last
formal parameter
{
document.write(a+"</br>")
document.write(b+"</br>")
document.write(para[0]+"</br>")
document.write(para[1]+"</br>")
document.write(para[2]+"</br>")
document.write(para[3]+"</br>")
document.write(para)
}
disply(66,77,88,99);
</script>
</body>
</html>
// This code not going to execute, because the rest parameter is a last parameter but here .
04/01/2022
Scope:
The scope is basically defines visibility of a variable, we have two type of scope 1) global
variable 2) local variable.
1) Global variable
Variable which is declare with or without using bar keyword outside the function scope but
inside the script tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>04/01/2022</title>
</head>
<body>
<script>
x="jai";
var y="kumar";
document.write(x+"</br>")
document.write(y+"</br>")
function disply()
{
document.write("imnside the function "+x+"</br>")
document.write("imnside the function "+y+"</br>")
}
</script>
</body>
</html>
jai
kumar
The global variable can we access anywhere in the script tag.
16
Java Script
2) Local variable
A variable which is declare inside the function scope, Local variable can we access within the
function, outside the function call it not possible.
<!DOCTYPE html>
<html lang="en">
<head>
<title>04/01/2022</title>
</head>
<body>
<script>
function display() {
c="js";//globle variablee
var x=200;//local variable
document.write("inside the function "+x+"</br>")//200
document.write("inside the function "+c+"</br>")//js
}
display();
</script>
</body>
</html>
inside the function 200
inside the function js
Note: If we declare any variable without using var, let, const inside the function scope then
that act like a global variable.
Difference between var and let
<!DOCTYPE html>
<html lang="en">
<head>
<title>04/01/2022</title>
</head>
<body>
<script>
if (10<12)
{
var x=999;//globle (chance have a global)
let y=909;//local
document.write('inside the if block '+x+"</br>")//999
document.write(`inside the if block `+y+"</br>")//909
}
document.write("outside the if block "+x+"</br")//999
document.write(`outside the if block `+y+"</br>")//909
</script>
</body>
</html>
inside the if block 999
inside the if block 909
outside the if block 999
17
Java Script
Difference between == and ===
== is use to compare the data.
=== is use to compare the data and data type both.
<!DOCTYPE html>
<html lang="en">
<head>
<title>04/01/2022</title>
</head>
<body>
<script>
var x=999;
let y="999";
if (x==y){
document.write('it is data comparison is done'+"<br>")
}
else{
document.write("'it is data comparison is not done'"+"<br>")
}
if (x===y){
document.write("it is comparison of data and data type done"+"<br>")
}
else{
document.write("it is comparison between data and data type not
done"+"<br>")
}
</script>
</body>
</html>
it is data comparison is done
it is comparison between data and data type not done
06/01/2022
Function expression: -
Syntax: -
Var varName=function functionName( )
{
//statement
}
varName( ); //function call
assigning of function to a variable we call it as function expretion.
e.g.
<!DOCTYPE html>
<html lang="en">
<head>
18
Java Script
<title>06/01/2022</title>
</head>
<body>
<script>
var x=function display () {
document.write("Jaikumar P L")
}
x()
</script>
</body>
</html>
Jaikumar P L
<!DOCTYPE html>
<html lang="en">
<head>
<title>06/01/2022</title>
</head>
<body>
<script>
var x=function display (name) {
document.write("Hi my name is "+name+"<br>")
}
x("Jaikumar P L")
x("Madhu")
x("Kiran")
x("Rahul")
</script>
</body>
</html>
Hi my name is Jaikumar P L
Hi my name is Madhu
Hi my name is Kiran
Hi my name is Rahul
<!DOCTYPE html>
<html lang="en">
<head>
<title>06/01/2022</title>
</head>
<body>
<script>
var x=function display (place) {
return place
}
var y=x("Vijayanagara")
document.write(y)
</script>
</body>
</html>
Vijayanagara
19
Java Script
Unanimous function: -
Syntax: -
Var varName=function ( )
{
//statement
}
VarName ( );
e.g.
<!DOCTYPE html>
<html lang="en">
<head>
<title>06/01/2022</title>
</head>
<body>
<script>
var x=function (name) {
document.write("Hi my name is "+name+"<br>")
}
x("Jaikumar P L")
</script>
</body>
</html>
Hi my name is Jaikumar P L
Using back tick
<!DOCTYPE html>
<html lang="en">
<head>
<title>06/01/2022</title>
</head>
<body>
<script>
var x=function (name) {
document.write(`Hi my name is ${name}<br>`)
}
x("Jaikumar P L")
</script>
</body>
</html>
Hi my name is Jaikumar P L
Passing function as argument (call back function): -
<!DOCTYPE html>
<html lang="en">
<head>
<title>06/01/2022</title>
</head>
20
Java Script
<body>
<script>
var x=function (name) {
return name;
}
var y=x(function () //function call
{
return"Ishanth"
})
document.write (y())
</script>
</body>
</html>
Ishanth
Function returning another function: -
<!DOCTYPE html>
<html lang="en">
<head>
<title>06/01/2022</title>
</head>
<body>
<script>
var x=function () {
return function () {
return "Ujwal";
}
}
var y=x();
document.write (y())
</script>
</body>
</html>
Ujwal
Arrow function: -
Syntax:
Var varName=( )=>{//statement} ;
<!DOCTYPE html>
<html lang="en">
<head>
<title>06/01/2022</title>
</head>
<body>
<script>
var x=()=>{document.write("my name is jaikumar"+"<br>")}
x();//function call
var y=()=>document.write("my father name is shankar naik")
y();
</script>
</body>
21
Java Script
</html>
my name is jaikumar
my father name is shankar naik
When we have only one printing statement in arrow function we can neglect open and close
bracket see in above example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>06/01/2022</title>
</head>
<body>
<script>
var x= name=>document.write(name+"<br>")
x("Jaikumar");//function call
x("Shankar Naik")
</script>
</body>
</html>
Jaikumar
Shankar Naik
07/01/2022
Inner function
The function in side a another function is call it as inner function.
Syntax:
Function outer function( )
{
Function inner function ( )
{
//statement;
}
Inner function( ) //F.C
}
Outer function( );//F.C
e.g.
<!DOCTYPE html>
<html lang="en">
<head>
<title>07/01/2022</title>
</head>
<body>
22
Java Script
<script>
function outerfunction()
{
function innerfunction() {
document.write("I am a bad boy")
} innerfunction()
} outerfunction()
</script>
</body>
</html>
I am a bad boy
Calling inner function explicitly:
<!DOCTYPE html>
<html lang="en">
<head>
<title>07/01/2022</title>
</head>
<body>
<script>
function outerfunction()
{
function innerfunction() {
return "Jai Pro";
} return innerfunction()
} var c=outerfunction();
document.write(c)
</script>
</body>
</html>
Jai Pro
Closer:
Closer is basically outer function variable we can access inside an inner function but vis versa
is not possible.
The closer has three scope
1. Global scope (outside the function)
2. Outer function scope(inside the function)
3. Inner function
e.g.
<!DOCTYPE html>
<html lang="en">
<head>
<title>07/01/2022</title>
</head>
<body>
<script>
function outerfunction()
{
23
Java Script
var x=143;//outer function variable
document.write("outer function "+x+"<br>")
function innerfunction() {
var z=420;//inner function
document.write("inner function "+z+"<br>")
}innerfunction()
}outerfunction();
</script>
</body>
</html>
outer function 143
inner function 420
Generate random numbers:
Math.random function will be generating between number in between 0-1 which is a
floating value.
e.g.
<!DOCTYPE html>
<html lang="en">
<head>
<title>07/01/2022</title>
</head>
<body>
<script>
var result=Math.random();
console.log( result);
</script>
</body>
</html>
0.7853962967319141
<!DOCTYPE html>
<html lang="en">
<head>
<title>07/01/2022</title>
</head>
<body>
<script>
var result=Math.random)();
console.log( result);
var x=Math.random()*(9999-1000)+1000;
console.log(x);
var otp=Math.floor(x)
console.log(otp)
var round=math.random(x);
console.log(round)
</script>
</body>
</html>
6973
Math.floor is use to remove the decimal value
24
Java Script
Math.round is use to round off the data
11/01/2022
Object oriented java script
Class: class is a master copy, blueprint.
Syntax:
<script>
Class className{
//code
}
</scipt>
Object:
Object is a real world physical entity it has two things they are 1) state 2) behavior.
State:
Information, description of particular object is states, programmatically states is also call as
data member.
Behaviors:
Action perform by the object we call it as behavior, programmatically behavior is also call as
function.
Object creation:
Syntax:
Var(ref)=new className( );
e.g.
<!DOCTYPE html>
<html lang="en">
<head>
<title>11/01/2022</title>
</head>
<body>
<script>
class bike{
brand="jawa";
price=40000;
color="green";
}
var b1=new bike();
document.write(b1)//[object object]
console.log(b1)//bike
</script>
25
Java Script
</body>
</html>
1. bike
1. brand: "jawa"
2. color: "green"
3. price: 40000
4. [[Prototype]]: Object
Declaration of variable:
Declaring the variable without assigning any data
e.g. var x; , var color;,let brand;
Initialization:
declaring the variable and an assigning the value is called initialization.
Direct initialization:
it is nothing but declaring the variable and assigning the value data to the variable is
called direct initialization.
<!DOCTYPE html>
<html lang="en">
<head>
<title>11/01/2022</title>
</head>
<body>
<script>
class bike{
brand;
price;
color;
}
var b1=new bike();
b1.color="dark green"
b1.brand="hero"
b1.price=60000
document.write(b1.brand+"</br>")//[object object]
document.write(b1.price+"</br>")
document.write(b1.color+"</br>")
var b2=new bike()
b2.color="hot pink"
b2.brand="TVS"
b2.price=6500
document.write(b2.brand+"</br>")//[object object]
document.write(b2.price+"</br>")
document.write(b2.color+"</br>")
</script>
</body>
</html>
26
Java Script
hero
60000
dark green
TVS
6500
hot pink
12/01/2022
This keyword:
It is referring to current invoking object reference address.
E.g.
<!DOCTYPE html>
<html lang="en">
<head>
<title>12/01/2022</title>
</head>
<body>
<script>
class bike{
brand;
price;
color;
}
var b1=new bike();
console.log(b1)//bike
console.log(this)
</script>
</body>
</html>
1. brand: undefined
2. color: undefined
3. price: undefined
window object:
<!DOCTYPE html>
<html lang="en">
<head>
<title>12/01/2022</title>
</head>
<body>
<script>
class bike{
brand;
details=function()
{
console.log(this)//bike
}
}
var b1=new bike()
27
Java Script
console.log(b1)
b1.details()
</script>
</body>
</html>
1. bike {brand: undefined, details: ƒ}
1. brand: undefined
constructor:
it is a member of the class.
Syntax:
Constructor ( )
{
//statement
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>12/01/2022</title>
</head>
<body>
<script>
class student{
constructor()
{
document.write(" hi i am constructor"+"</br>")
}
}
var s1=new student()//constructor invocation
var s2=new student()//constructor invocation
var s3=new student()//constructor invocation
</script>
</body>
</html>
hi i am constructor
hi i am constructor
hi i am constructor
<!DOCTYPE html>
<html lang="en">
<head>
<title>12/01/2022</title>
</head>
<body>
<script>
class student{
id;
name;
28
Java Script
per;
constructor(i,n,p)
{
this.id=i;
this.name=n;
this.per=p;
document.write(this.id+" "+this.name+" "+this.per+"</br>")
}
}
var s1=new student(123,"madhu",90)//constructor invocation
var s2=new student(234,"jai",80)//constructor invocation
var s3=new student(345,"kiran",70)//constructor invocation
</script>
</body>
</html>
123 madhu 90
234 jai 80
345 kiran 70
Without data member
<!DOCTYPE html>
<html lang="en">
<head>
<title>12/01/2022</title>
</head>
<body>
<script>
class student{
constructor(i,n,p)
{
this.id=i;
this.name=n;
this.per=p;
document.write(this.id+" "+this.name+" "+this.per+"</br>")
}
}
var s1=new student(123,"madhu",90)//constructor invocation
var s2=new student(234,"jai",80)//constructor invocation
var s3=new student(345,"kiran",70)//constructor invocation
</script>
</body>
</html>
123 madhu 90
234 jai 80
345 kiran 70
Prompt:
Syntax:
Prompt(“text”, default value)
The prompt is use to take the input from the user.
29
Java Script
E.g.
<!DOCTYPE html>
<html lang="en">
<head>
<title>12/01/2022</title>
</head>
<body bgcolor="pink">
<script>
var x=prompt("enter the age")
document.write(x)
</script>
</body>
</html>
45
Alert:
Whenever we want to indicate the user about some message, warning we make use of alert
function.
<!DOCTYPE html>
<html lang="en">
<head>
<title>12/01/2022</title>
</head>
<body bgcolor="parrot green">
<script>
alert("you are not eligible for this one")
</script>
</body>
</html>
you are not eligible for this one
<!DOCTYPE html>
<html lang="en">
<head>
<title>12/01/2022</title>
</head>
<body bgcolor="parrot green">
<script>
confirm("you are not eligible for this one")
</script>
</body>
</html>
you are not eligible for this one
17/01/2022
JSON:
JSON format is used to store the data and retrieve the data from the database
Syntax:
30
Java Script
Const varName={ “key1”: “valus”,
“key2”: “valus”
:
:
“keyN”: “valus”
}
Spread:
<!DOCTYPE html>
<html lang="en">
<head>
<title>17/01/2022</title>
</head>
<body bgcolor="pink">
<script>
var x=[77,60,38,02,75]
b=[...x];
x[0]=99;
console.log(x)
console.log(b)
</script>
</body>
</html>
Array(5)0: 99 1: 60 2: 38 3: 2 4: 75 length: 5[[Prototype]]: Array(0)
Array(5)0: 77 1: 60 2: 38 3: 24: 75 length: 5[[Prototype]]: Array(0)
What is JavaScript?
JavaScript is a dynamic computer programming language.
It is lightweight and most commonly used as a part of web pages, whose implementations
allow client-side script to interact with the user and make dynamic pages.
It is an interpreted programming language with object-oriented capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript,
possibly because of the excitement being generated by Java. JavaScript made its first
appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of
the language has been embedded in Netscape, Internet Explorer, and other web browsers.
Advantages of JavaScript:
The merits of using JavaScript are:
31
Java Script
• Less server interaction: You can validate user input before sending the page off to the
server. This saves server traffic, which means less load on your server.
• Immediate feedback to the visitors: They don't have to wait for a page reload to see if
they have forgotten to enter something.
• Increased interactivity: You can create interfaces that react when the user hovers over
them with a mouse or activates them via the keyboard.
JAVASCRIPT – SYNTAX
JavaScript can be implemented using JavaScript statements that are placed within
the <script>... </script> HTML tags in a web page.
You can place the <script> tags, containing your JavaScript, anywhere within you
web page, but it is normally recommended that you should keep it within the <head>
tags.
The <script> tag alerts the browser program to start interpreting all the text between
these tags as a script. A simple syntax of your JavaScript will appear as follows.
<script ...>
JavaScript code
</script>
This function can be used to write text, HTML, or both. Take a look at the following
code.
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
document.write ("Hello World!")
//-->
32
Java Script
</script>
</body>
</html>
This code will produce the following result:
Hello World!
===========================================================================
==================================
Whitespace and Line Breaks:
JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs.
You can use spaces, tabs, and newlines freely in your program and you are free to
format and indent your programs in a neat and consistent way that makes the code
easy to read and understand.
Semicolons are Optional:
Simple statements in JavaScript are generally followed by a semicolon character, just
as they are in C, C++, and Java. JavaScript, however, allows you to omit this
semicolon if each of your statements are placed on a separate line. For example, the
following code could be written without semicolons.
Case Sensitivity
JavaScript is a case-sensitive language. This means that the language keywords,
variables, function names, and any other identifiers must always be typed with a
consistent capitalization of letters.
So the identifiers Time and TIME will convey different meanings in JavaScript.
NOTE: Care should be taken while writing variable and function names in JavaScript.
===========================================================================
=======================
Comments in JavaScript
JavaScript s.
upports both C-style and C++-style comments. Thus:
33
Java Script
Any text between a // and the end of a line is treated as a comment and is
ignored by JavaScript.
Any text between the characters /* and */ is treated as a comment. This may
span multiple lines
JavaScript also recognizes the HTML comment opening sequence <!--.
JavaScript treats this as a single-line comment, just as it does the // comment.
The HTML comment closing sequence --> is not recognized by JavaScript so it
should be written as //-->.
Example
The following example shows how to use comments in JavaScript.
<script language="javascript" type="text/javascript">
<!--
// This is a comment. It is similar to comments in C++
/*
* This is a multiline comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
</script>
===========================================================================
==================
JavaScript Datatypes
These are the type of values that can be represented and
manipulated in a programming language.
JavaScript allows you to work with three primitive data types:
Numbers, e.g., 123, 120.50 etc.
Strings of text, e.g. "This text string" etc.
Boolean, e.g. true or false.
34
Java Script
null :emty value
undefined:not defined
===========================================================================
==========================================
JavaScript Reserved Words
A list of all the reserved words in JavaScript are given in the following table. They
cannot be used as JavaScript variables, functions, methods, loop labels, or any object
names.
abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double
else
enum
export
extends
false
final
finally
35
Java Script
float
for
function
goto
if
implements
import
in
Instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super
switch
synchronized
this
throw
throws
transient
true
36
Java Script
try
typeof
var
void
volatile
while
with
===========================================================================
=============================================
operators:
==>java script operators are symbols which are used to assign values,compare
values,perform arithmatic operations.
==>variables are called operands
==>the operation is defined by operator
types of operators
1)Arithmatic operators
2)comparison operators
3)logical operators
4)Assignment Operators
5)Conditional operators
6)String operators
7)type operators
8)Bitwise Operators
Arithmatic operators:Arithmatic operatorsperform Arithmatic operation
eg: + (add)
37
Java Script
- (substraction)
* (multiply)
++ (increment)
--(decrement)
% (modulus)
/ (division)
<html>
<body>
<script type="text/javascript">
<!--
var a = 33;
var b = 10;
var c = "Test";
var linebreak = "<br />";
document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);
document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);
document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);
38
Java Script
document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);
document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);
a = a++;
document.write("a++ = ");
result = a++;
document.write(result);
document.write(linebreak);
b = b--;
document.write("b-- = ");
result = b--;
document.write(result);
document.write(linebreak);
//-->
</script>
</body>
</html>
39
Java Script
comparison operators: comparison and logical operators are used to test true or false.
comparison operators are used in logical statements to determine equality or
defference between variables or values
eg: == (equal to)
=== (equal to and equal type)
!= (not equal )
!== (not equal value or not equal type)
> (gearter than)
< (lesser than)
>= (gearter than and equal to )
<= (lesser than equal to )
The following code shows how to use comparison operators in JavaScript.
<html>
<body>
<script type="text/javascript">
<!--
var a = 10;
var b = 20;
var linebreak = "<br />";
document.write("(a == b) => ");
result = (a == b);
document.write(result);
document.write(linebreak);
document.write("(a < b) => ");
result = (a < b);
document.write(result);
document.write(linebreak);
40
Java Script
document.write("(a > b) => ");
result = (a > b);
document.write(result);
document.write(linebreak);
document.write("(a != b) => ");
result = (a != b);
document.write(result);
document.write(linebreak);
document.write("(a >= b) => ");
result = (a >= b);
document.write(result);
document.write(linebreak);
document.write("(a <= b) => ");
result = (a <= b);
document.write(result);
document.write(linebreak);
//-->
</script>
</body>
</html>
Output
(a == b) => false
(a < b) => true
(a > b) => false
(a != b) => true
41
Java Script
(a >= b) => false
(a <= b) => true
logical operators: logical operators are used to test true or false.
logical operators are used to determine the logic between variables and values.
eg: && (and)
|| (or)
! (not)
<html>
<body>
<script type="text/javascript">
<!--
var a = true;
var b = false;
var linebreak = "<br />";
document.write("(a && b) => ");
result = (a && b);
document.write(result);
document.write(linebreak);
document.write("(a || b) => ");
result = (a || b);
document.write(result);
42
Java Script
document.write(linebreak);
document.write("!(a && b) => ");
result = (!(a && b));
document.write(result);
document.write(linebreak);
//-->
</script>
</body>
</html>
output
(a && b) => false
(a || b) => true
!(a && b) => true
Assignment Operators:Assignment Operators assign values to javascript variables
eg:=
+=
-=
*=
/=
%=
<<=
>>=
>>>=
&=
43
Java Script
^=
|=
**=
<html>
<body>
<script type="text/javascript">
<!--
var a = 33;
var b = 10;
var linebreak = "<br />";
document.write("Value of a => (a = b) => ");
result = (a = b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a += b) => ");
result = (a += b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a -= b) => ");
result = (a -= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a *= b) => ");
result = (a *= b);
document.write(result);
44
Java Script
document.write(linebreak);
document.write("Value of a => (a /= b) => ");
result = (a /= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a %= b) => ");
result = (a %= b);
document.write(result);
document.write(linebreak);
//-->
</script>
</body>
</html>
Output
Value of a => (a = b) => 10
Value of a => (a += b) => 20
Value of a => (a -= b) => 10
Value of a => (a *= b) => 100
Value of a => (a /= b) => 10
Value of a => (a %= b) =>0
Conditional(Ternary) operators:javascript also contains Conditional operatorsthat assign a
value to a variable based on some condition
SYNTAX:- variableName = (condition)? value1:value2;
var entry=(age<18)? "not eligible": "elogible";
45
Java Script
<html>
<body>
<script type="text/javascript">
<!--
var a = 10;
var b = 20;
var linebreak = "<br />";
document.write ("((a > b) ? 100 : 200) => ");
result = (a > b) ? 100 : 200;
document.write(result);
document.write(linebreak);
document.write ("((a < b) ? 100 : 200) => ");
result = (a < b) ? 100 : 200;
document.write(result);
document.write(linebreak);
//-->
</script>
</body>
</html>
Output
((a > b) ? 100 : 200) => 200
((a < b) ? 100 : 200) => 100
String operators:the + operators can also be used to add (concatenate) String
eg : var text="dashwath";
var text1="kotian";
var result= test + " " + test1;
46
Java Script
<html>
<body>
<script type="text/javascript">
<!--
var a = 10;
var b = "String";
var linebreak = "<br />";
result = (typeof b == "string" ? "B is String" : "B is Numeric");
document.write("Result => ");
document.write(result);
document.write(linebreak);
result = (typeof a == "string" ? "A is String" : "A is Numeric");
document.write("Result => ");
document.write(result);
document.write(linebreak);
//-->
</script>
</body>
</html>
output
Result => B is String
Result => A is Numeric
type operators:Used to determine the type of data being stored in variable.
47
Java Script
eg: typeof (Return the type of variable )
instanceof (Return true if an object is an instance of an Object type)
Bitwise Operators:Bit operation works on 32 bit number . any numerics operand in the
operation is converted into a 32 bit number .
the result is converted back to a javascript number
eg: & (AND)
| (OR)
~ (NOT)
^ (XOR)
<html>
<body>
<script type="text/javascript">
<!--
var a = 2; // Bit presentation 10
var b = 3; // Bit presentation 11
var linebreak = "<br />";
document.write("(a & b) => ");
result = (a & b);
document.write(result);
document.write(linebreak);
document.write("(a | b) => ");
result = (a | b);
document.write(result);
document.write(linebreak);
document.write("(a ^ b) => ");
48
Java Script
result = (a ^ b);
document.write(result);
document.write(linebreak);
document.write("(~b) => ");
result = (~b);
document.write(result);
document.write(linebreak);
document.write("(a << b) => ");
result = (a << b);
document.write(result);
document.write(linebreak);
document.write("(a >> b) => ");
result = (a >> b);
document.write(result);
document.write(linebreak);
//-->
</script>
</body>
</html>
Output
(a & b) => 2
(a | b) => 3
(a ^ b) => 1
(~b) => -4
(a << b) => 16
(a >> b) => 0
49
Java Script
===========================================================================
=====================
function :the set of instruction which is used to perform some specific task.
syntax: function functionName ()
{
//statement
functionName(); // function call
eg1: <script>
function display()
{
document.write("welcome to js");
}
display(); // function call
</script>
eg2: <script>
function ipl_team()
{
document.write("rcb"+"</br>");
50
Java Script
document.write("csk"+"</br>");
document.write("kkr"+"</br>");
document.write("mi"+"</br>");
}
ipl_team(); //function call
</script>
===========================================================================
===========================
PARAMETERIZED FUNCTION
syntax: function functionName(para1,para2,......paraN)
{
//statement
}
functionName(args1,args2,.......argsN);
eg1: function Student(name,place,age)
{
document.write("name is "+name+"</br>");
document.write("name is "+place+"</br>");
document.write("name is "+age+"</br>");
}
Student("DASHWATH","MANGLORE",26);
Student("SHISHIRA","BANGLORE",36);
Student("NAGABISHEK","BANGLORE",26);
eg2: <script>
function car(brand,price,color)
{
51
Java Script
document.write("name is "+brand+"</br>");
document.write("price is "+price+"</br>");
document.write("color is "+color+"</br>");
}
car("audi",1200000,"black");
car("bmw",2000000,"red");
car("lambo",3000000,"white");
</script>
===========================================================================
=================
Return type Function
Syntax 1: function functionName()
{
return data;
}
Syntax 2: function functionName()
{
return variable;
}
Syntax 3: function functionName()
{
return Expression;
}
eg1:
<script>
function display() //syntax1
{
52
Java Script
return 123;
}
function display() //syntax2
{
var x="js"
return x;
}
function display() //syntax3
{
return 10*23+20;
}
</script>
==>return type function has to be stored in the variable to print the output or
==>we can write in the printing statemnets like documents.write() and console.log()
===========================================================================
====================================
default parameter function
syntax: function functionName(para1,para2,......paraN=value)
{
//statement
}
53
Java Script
eg1: <script>
function display(a=33 ,b=32,c=10 )
{
document.write(a+"</br>");
document.write(b+"</br>");
document.write(c+"</br>");
}
display();//function call
</script>
eg2: <script>
function display(a ,b,c=10 )
{
document.write(a+"</br>");
document.write(b+"</br>");
document.write(c+"</br>");
}
display();//function call
</script>
===========================================================================
================================
Rest parameter function
syntax:function functionName(...args)
{
//statement
}
eg1: <script>
function display(...args )
{
54
Java Script
document.write(args[0]+"</br>");
document.write(args[1]+"</br>");
document.write(args[2]+"</br>");
}
display(109,30,59);//function call
</script>
eg2:<script>
function display(a,...args )
{
document.write(a+"</br>")
document.write(args[0]+"</br>");
document.write(args[1]+"</br>");
document.write(args[2]+"</br>");
}
display("js,"java","html");//function call
===========================================================================
=================================
function Expression:
syntax:var varname=function functionName()
{
// statement
}
eg1:<script>
var v=function play()
{
document.write("play music")
}
55
Java Script
v();// function call
</script>
eg2 <script>
var v=function display(name)
{
document.write("name is "+name+"</br>")
}
v("ashwath");// function call
v("narayan");// function call
</script>
eg 3:
<script>
var v=function display(name)
{
return name
}
document.write(v("amruth"));
document.write( v("sudha"));
</script>
===========================================================================
======================
anonymous function:
anonymous function are those function which has no spcified function name
56
Java Script
syntax: function ()
{
//statemnet
}
eg 1: <script>
var t=function (name)
{
return name
}
document.write(t("mogli"));
document.write( t("dinga"));
</script>
eg2: <script>
var t=function ()
{
document.write("js");
}
t();// function call
</script>
eg3:we can also pass function as arguments.
<script>
var y=function (subject)
{
return subject
57
Java Script
var x= y(function()
{
return "java script"
});
document.write(x());//function call
</script>
eg4: function returning another function
<script>
var y=function ()
{
return function()
{
return "java script"
}
}
var result=y();
document.write(result());//function call
===========================================================================
====================================
Arrow function:
syntax: var varname= () => {
//statement
};
58
Java Script
eg1: <script>
var z=()=>{document.write("angular js")}
z();//function call
</script>
eg2: <script>
var z=(name)=>{document.write("name is "+name+"</br>")}
z("agasthya");//function call
</script>
eg3: <script>
var z=name=>document.write("name is "+name+"</br>");
z("nithya");//function call
==>we also write Arrow function as mentioned in the above eg if function contains only
one parameter and statement
eg4: var x=name => {return name};
document.write(x("yash"));//function call
eg5: var y=name => name;
document.write(x("pandith"));//function call
==>in above function the function is returing NAME. if the arrow function contains more
than
one parameter in such case we cnt elemenate ( ) brackets
==>if the function contains more than one statements then we cnt elemenate { }.
59
Java Script
===========================================================================
=====================================================
inner function :
function inside an another function is called we call inner function
syntax: function functionName1 ()
{
function functionNmae2 ( )
{
//statement
}
}
eg1: <script>
function outerfunction()
{
function innerfunction()
{
document.write("react js");
}
innerfunction(); // function call
}
outerfunction(); // function call
</script>
eg2: <script>
function outerfunction()
{
function innerfunction()
{
return "node js"
60
Java Script
}
innerfunction();
}
outerfunction();
</script>
==> only the outerfunction will be having authority to call innerfunction ,
if we want call innerfunction we have to call through outerfunction.
eg2: <script>
function outerfunction()
{
function innerfunction()
{
document.write("java script")
}
return innerfunction();
}
var x= outerfunction();
x();//function call
</script>
• This provides a great deal of utility in writing more
maintainable code. If a function relies on one or two
other functions that are not useful to any other part of
your code, you can nest those utility functions inside
the function that will be called from elsewhere. This
keeps the number of functions that are in the global
scope down, which is always a good thing.
• This is also a great counter to the lure of global
61
Java Script
variables. When writing complex code it is often
tempting to use global variables to share values
between multiple functions — which leads to code that
is hard to maintain. Nested functions can share
variables in their parent, so you can use that
mechanism to couple functions together when it
makes sense without polluting your global namespace
— 'local globals' if you like. This technique should be
used with caution, but it's a useful ability to have.
===========================================================================
===========================
closure:-
is a behaviour where the innerfunction can acces the outerfunction variables but vise
versa is not possible
==>every innerfunction will be having 3 scope
1)local scope
2)outer function scope
3) global scope
eg1:
<script>
function outerfunction()
{
var x=100;
function innerfunction()
{
var y=890;
document.write(y+"</br>");
document.write(x+"</br>");
}
innerfunction();
62
Java Script
}
outerfunction();
</script>
eg2: <script>
function outerfunction()
{
var x=100;
document.write(y)// error y is not defined at outerfunction
function innerfunction()
{
var y=890;
document.write(y+"</br>");
document.write(x+"</br>");
}
innerfunction();
}
outerfunction();
</script>
===========================================================================
===============
Simple User Interaction
• There are three built-in methods of doing simple
user interaction
– alert(msg) alerts the user that something has happened
eg1:alert("There's a monster on the wing!");
– confirm(msg) asks the user to confirm (or cancel)
something
63
Java Script
eg1:confirm("Are you sure you want to do that?");
– prompt(msg, default) asks the user to enter some text
eg1:prompt("Enter you name","Adam");
===========================================================================
===============
Class :
A Class is Logical entity or Blue print using which we can create multiple Object.
Step1 :create class and then create any numberof objects.
Multiple Objects created using same class is called as Similar Object or Identical Object.
Every Object work independently
i.e.., if one Object is modified or destroyed then it does not affect
another Object .
Object : Object is Real world Physical entity.
Anything which has Physical presence or Physical appearance can be considered as an Object
.
Object has States and Behavior .
States :
State of an object is nothing but the property / information or a data which describes
an Object.
The data member is nothing but a data holder , which holds / stores the data.
Example:
class Pen
{
color="green";
type="marker";
64
Java Script
}
===========================================================================
==================
Identifiers :
Identifiers is the one which is used to Identify out many class , We can Identify a class by it’s
Name , Hence class name is called Identifier .
Rules for Identifiers :
• Identifier cannot have Space .
• Identifiers cannot have special characters except $ and _ (under score ) .
• Identifiers must not be Java Keyword.
• Identifiers must not start with Numbers , but it can have numbers.
===========================================================================
===============
Object creation:
syntax: var container_name=new className();
ex: class Bike{
}
new Bike();
eg1: <script>
class Bike
{
}
document.write(new Bike());//[object Object]
console.log(new Bike());//Bike
</script>
65
Java Script
eg2: <script>
class car
{
}
var c1=new car();
console.log(c1)
</script>
Object Creation & direct Initialization
eg1: <script>
class car
{
brand="audi";
price=2000000;
color="black";
}
var c1=new car();
console.log(c1.brand);
console.log(c1.color);
console.log(c1.price);
</script>
eg2: <script>
class car
{
brand="audi";
price=2000000;
color="black";
66
Java Script
}
var c1=new car();
console.log(c1.brand);
console.log(c1.color);
console.log(c1.price)
var c2=new car();
console.log(c2.brand);
console.log(c2.color);
console.log(c2.price)
var c3=new car();
console.log(c3.brand);
console.log(c3.color);
console.log(c3.price)
</script>
==>drowback in direct Initialization we are geting hard coded values(same output)
declearation of states :
the proccess of writing a states without assign any value or data
Initialization of states:
the process of assigning values to the states.
direct Initialization:
the process of declear the states Initialization states then and there only
eg1: <script>
class car
{
67
Java Script
brand;
price;
color;
}
var c1=new car();
c1.price=300000;
c1.color="black";
c1.brand="audi";
console.log(c1.brand);
console.log(c1.color);
console.log(c1.price);
var c2=new car();
c1.price=200000;
c1.color="white";
c1.brand="bmw";
console.log(c2.brand);
console.log(c2.color);
console.log(c2.price);
var c3=new car();
c1.price=400000;
c1.color="red";
c1.brand="lambo";
console.log(c3.brand);
console.log(c3.color);
console.log(c3.price);
</script>
68
Java Script
===========================================================================
==============
this keyword :this keyword refer s to current calling object reference
eg1: <script>
class Bike{
}
var b1=new Bike();
console.log(b1)//Bike
function display() {
console.log(this)//Window
}
display()
eg2: <script>
class Bike{
details= function ()
{
console.log(this)
}
}
var b1=new Bike();
console.log(b1)//Bike
b1.details();//Bike
</script>
69
Java Script
EG3: <script>
class Bike{
brand;
price;
details= function ()
{
console.log(this.brand)
console.log(this.price)
}
}
var b1=new Bike();
b1.brand="yamaha";
b1.price=450000;
b1.details();//Bike
var b2=new Bike();
b2.brand="honda";
b2.price=50000;
b2.details();//Bike
</script>
===========================================================================
========================
CONSTRUCTOR:
constructor is a member of the class
use of constructor:
1) To create an object
70
Java Script
2)To Initialize states
syntax:constructor()
{
// statement
}
eg1: <script>
class book
{
constructor()
{
document.write("hi i am constructor"+"</br>")
}
}
var b=new book();
var b1=new book();
var b2=new book();
var b3=new book();
</script>
eg2: <script>
class book
{
brand;
price;
71
Java Script
constructor(b,p)
{
this.brand=b;
this.price=p;
document.write(this.brand+" "+this.price+"</br>")
}
}
var b=new book("classmate",50);
var b1=new book("paper gride",45);
var b2=new book("vidhya",35);
var b3=new book("mangala",20);
</script>
===========================================================================
=====================================
constructor function:
constructor function is the combination of function expression and constructor
eg1: var person = function (first, last, age, eye)
{
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.details=function()
{
document.write("first name is "+this.firstName+"</br>")
72
Java Script
document.write("last name is "+this.lastName+"</br>")
document.write("age is "+this.age+"</br>")
document.write("eye color is "+this.eyeColor+"</br>")
};
}
var myFather = new person ("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");
myFather.details();
myMother.details();
===========================================================================
=================================
ARRAY:
JavaScript array is an object that represents a collection of similar type of elements.
There are 3 ways to construct array in JavaScript
By array literal
By creating instance of Array directly (using new keyword)
By using an Array constructor (using new keyword)
The syntax of creating array using array literal is given below:
73
Java Script
var arrayname=[value1,value2.....valueN];
<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script>
The syntax of creating array directly is given below:
var arrayname=new Array();
Here, new keyword is used to create instance of array.
Let's see the example of creating array directly.
<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
74
Java Script
JavaScript array constructor (new keyword)
Here, you need to create instance of array by passing arguments in constructor
so that we don't have to provide value explicitly.
The example of creating object by array constructor is given below.
<script>
var emp=new Array("Jai","Vijay","Smith");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
JavaScript Array Methods
1)concat():
It returns a new array object that contains two or more merged arrays.
2)every():
It determines whether all the elements of an array are satisfying
the provided function conditions.
3)filter():
It returns the new array containing the elements that pass the provided
function conditions.
4)find():
It returns the value of the first element in the given array that satisfies
the specified condition.
5)pop():
75
Java Script
It removes and returns the last element of an array.
6)push():
It adds one or more elements to the end of an array.
7)reverse();
It reverses the elements of given array.
8)shift():
It removes and returns the first element of an array.
9)unshift():
It adds one or more elements in the beginning of the given array.
10)some():
It determines if any element of the array passes the test of
the implemented function.
11)slice():
It returns a new array containing the copy of the part of the given array.
12)sort():
It returns the element of the given array in a sorted order.
13)splice():
It add/remove elements to/from the given array.
76
You might also like
- Web Application Development: JavascriptNo ratings yetWeb Application Development: Javascript71 pages
- THE- ULTIMATE-GUIDE-TO-LEARNING-A-HIGH-INCOME-SKILLNo ratings yetTHE- ULTIMATE-GUIDE-TO-LEARNING-A-HIGH-INCOME-SKILL43 pages
- Complete JavaScript Tutorial (Beginner to Advanced)No ratings yetComplete JavaScript Tutorial (Beginner to Advanced)44 pages
- Complete A Z Javascript Notes 1682741974No ratings yetComplete A Z Javascript Notes 168274197485 pages
- Web Content Mining in Data Mining TechniquesNo ratings yetWeb Content Mining in Data Mining Techniques10 pages
- BE 5 IT GECBVN BharatVainsh Unit 5(JavaScript) WD 3151606 2023No ratings yetBE 5 IT GECBVN BharatVainsh Unit 5(JavaScript) WD 3151606 202398 pages
- 6 Client Side Scripting Using JavaScript(2)No ratings yet6 Client Side Scripting Using JavaScript(2)15 pages
- Chapter-2: Control Structures in Visual Basic 6.0No ratings yetChapter-2: Control Structures in Visual Basic 6.015 pages
- Summer Training Report Summer Training ReportNo ratings yetSummer Training Report Summer Training Report20 pages
- Java Script: Variables &scope, Data Types, Control Structures, Array MethodsNo ratings yetJava Script: Variables &scope, Data Types, Control Structures, Array Methods35 pages
- What Is Javascript?: Javascript Is Interpreted by The Browser. Js Code Is Typically Embedded Right in HTML PagesNo ratings yetWhat Is Javascript?: Javascript Is Interpreted by The Browser. Js Code Is Typically Embedded Right in HTML Pages21 pages
- Building Your First Android App: Create A Project With EclipseNo ratings yetBuilding Your First Android App: Create A Project With Eclipse4 pages