0% found this document useful (0 votes)
11 views

JS PPT

Uploaded by

samplenewstate04
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
11 views

JS PPT

Uploaded by

samplenewstate04
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

JavaScript Objects

JavaScript Objects
A javaScript object is an entity having state and behavior (properties and method). For example: car, pen, bike, chair, glass,
keyboard, monitor etc.
JavaScript is an object-based language. Everything is an object in JavaScript.
JavaScript is template based not class based. Here, we don't create class to get the object. But, we direct create objects.
There are 3 ways to create objects.
1.By object literal
2.By creating instance of Object directly (using new keyword)
3.By using an object constructor (using new keyword)

1) JavaScript Object by object literal


The syntax of creating object using object literal is given below:
object={property1:value1,property2:value2.....propertyN:valueN}

Example:-
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script
2) By creating instance of Object 3) By using an Object constructor
The syntax of creating object directly is given below: <script>
var objectname=new Object(); function emp(id,name,salary)
{
Example :- this.id=id;
<script> this.name=name;
this.salary=salary;
var emp=new Object(); }
emp.id=101;
emp.name="Ravi Malik"; e=new emp(103,"Vimal Jaiswal",30000);
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary); document.write(e.id+" "+e.name+" "+e.salary);
</script>
</script >
Defining method in JavaScript Object

<script>
function emp(id,name,salary)
{
this.id=id;
this.name=name;
this.salary=salary;

this.changeSalary=changeSalary;
function changeSalary(otherSalary)
{
this.salary=otherSalary;
}
}
e=new emp(103,"Sonoo Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
e.changeSalary(45000);
document.write("<br>"+e.id+" "+e.name+" "+e.salary);
</script>
JavaScript Object Methods

S.No Methods Description

This method is used to copy enumerable and own properties from a source object to a target
1 Object.assign()
object

2 Object.create() This method is used to create a new object with the specified prototype object and properties.
JavaScript Array
JavaScript array is an object that represents a collection of similar type of elements.
There are 3 ways to construct array in JavaScript
1.By array literal
2.By creating instance of Array directly (using new keyword)
3.By using an Array constructor (using new keyword)

1) JavaScript array literal


The syntax of creating array using array literal is given below:
1.var arrayname=[value1,value2.....valueN];

Example

<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++)
{
document.write(emp[i] + "<br/>");
}
</script>
JavaScript Array
2) JavaScript Array directly (new keyword)
The syntax of creating array directly is given below:
1.var array_name=new Array();
Here, new keyword is used to create instance of array.
Let's see the example of creating array directly.

Example:-
<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>
JavaScript Array
3) 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.

Example:-
<script>
var emp=new Array("Jai","Vijay","Smita");
for (i=0;i<emp.length;i++)
{
document.write(emp[i] + "<br>");
}
</script>
JavaScript Array Methods
Methods Description
concat() It returns a new array object that contains two or more merged arrays.
fill() It fills elements into an array with static values.
indexOf() It searches the specified element in the given array and returns the index of the first match.
isArray() It tests if the passed value is an array.
join() It joins the elements of an array as a string.
lastIndexOf() It searches the specified element in the given array and returns the index of the last match.
pop() It removes and returns the last element of an array.
push() It adds one or more elements to the end of an array.
reverse() It reverses the elements of given array.
shift() It removes and returns the first element of an array.
slice() It returns a new array containing the copy of the part of the given array.
sort() It returns the element of the given array in a sorted order.
splice() It add/remove elements to/from the given array.
toString() It converts the elements of a specified array into string form, without affecting the original array.
unshift() It adds one or more elements in the beginning of the given array.
JavaScript Array
1) concat()
The JavaScript array concat() method combines two or more arrays and returns a new string. This method doesn't make any change in the
original array.

Syntax
The concat() method is represented by the following syntax:
array.concat(arr1,arr2,....,arrn)
Parameter
arr1,arr2,....,arrn - It represent the arrays to be combined.
Return
A new array object that represents a joined array.

Example 1
<script> Example 2
var arr1=["C","C++","Python"]; <script>
var arr2=["Java","JavaScript","Android"]; var arr=["C","C++","Python"];
var result=arr1.concat(arr2); var result= arr.concat("Java","JavaScript","Android");
document.writeln(result); document.writeln(result);
</script> </script>
JavaScript Array
2) fill()
The JavaScript array fill() method fills the elements of the given array with the specified static values. This method modifies the
original array. It returns undefined, if no element satisfies the condition.
Syntax
The fill() method is represented by the following syntax:
arr.fill(value[, start[, end]])
Parameter
value - The static value to be filled.
start - It is optional. It represents the index from where the value starts filling. By default, it is 0.
end - It is optional. It represents the index where the value stops filling. By default, it is length-1.
Return-The modified array.
Example 1:- Example 2:-
<script> <script>
var arr=["AngularJS","Node.js","JQuery"]; var arr=["AngularJS","Node.js","JQuery"];
var result=arr.fill("Bootstrap"); var result=arr.fill("Bootstrap",0,2);
document.writeln(arr); document.writeln(arr);
</script> </script>
JavaScript Array
3) indexOf()
The JavaScript array indexOf() method is used to search the position of a particular element in a given array. This method is case-sensitive.
The index position of first element in an array is always start with zero. If an element is not present in an array, it returns -1.
Syntax
array.indexOf(element,index)
Parameter
element - It represent the element to be searched.
index - It represent the index position from where search starts. It is optional.
Return-An index of a particular element.
<script> <script>
var arr=["C","C++","Python","C++","Java"]; var arr=["C","C++","Python","C++","Java"];
var result= arr.indexOf("C++"); var result= arr.indexOf("C++",2);
document.writeln(result); document.writeln(result);
</script> </script>
JavaScript Array
4) isArray()
The isArray() method is used to test whether the value passed is an array. If it finds the passed value is an array, it returns
True. Otherwise, it returns False.
Syntax
Array.isArray(obj_value);
Parameter
obj_value: It is the value of the object which is passed for determining whether it is an array or not.
Return
It returns either false or true, depending on the test.
<httml> <html>
<head> <h5> JavaScript Array Methods </h5> </head> <head> <h5> JavaScript Array Methods </h5> </head>
<body> <body>
<script> <script>
var arr=new Array(1,2,34,4,5); document.write(Array.isArray(1,2,3,4)); //Testing the passed values. It
document.write(Array.isArray(arr)); //It will return true. will return false
</script> </script>
</body> </body>
</html> </html>
JavaScript Array
5) join()
The JavaScript array join() method combines all the elements of an array into a string and return a new string. We can use
any type of separators to separate given array elements.
Syntax
array.join(separator)
Parameter
Separator() - It is optional. It represent the separator used between array elements.
Return
A new string contains the array values with specified separator.
<script> <script>
var arr=["AngularJs","Node.js","JQuery"] var arr=["AngularJs","Node.js","JQuery"]
var result=arr.join() var result=arr.join('-')
document.write(result); document.write(result);
</script> </script>
JavaScript Array
6) lastIndexOf()
The JavaScript array lastIndexOf() method is used to search the position of a particular element in a given array. It behaves similar to
indexOf() method with a difference that it start searching an element from the last position of an array.
The lastIndexOf() method is case-sensitive. The index position of first character in a string is always start with zero. If an element is not
present in a string, it returns -1.
Syntax
array.lastIndexOf(element,index)
Parameter
element - It represent the element to be searched.
Return
An index of a particular element.

<script> <script>
var arr=["C","C++","Python","C++","Java"]; var arr=["C","C++","Python","C++","Java"];
var result= arr.lastIndexOf("C++"); var result= arr.lastIndexOf("C++",2);
document.writeln(result); document.writeln(result);
</script> </script>
JavaScript Array
7) pop()
The JavaScript array pop() method removes the last element from the given array and return that element. This method
changes the length of the original array.
Syntax
array.pop()
Return
The last element of given array.
<script> <script>
var arr=["AngularJS","Node.js","JQuery"]; var arr=["AngulaJS","Node.js","JQuery"];
document.writeln("Orginal array: "+arr+"<br>"); var len=arr.length;
document.writeln("Extracted element: "+arr.pop()+"<br>");
document.writeln("Remaining elements: "+ arr); for(var x=1;x<=len;x++)
</script> {
document.writeln("Extracted element: "+arr.pop()+"<br>");
}
</script>
JavaScript Array
8) push()
The JavaScript array push() method adds one or more elements to the end of the given array. This method changes the length
of the original array.
Syntax
array.push(element1,element2....elementn)
Parameter
element1,element2....elementn - The elements to be added.
Return
The original array with added elements.
Example Example

<script> <script>
var arr=["AngularJS","Node.js"]; var arr=["AngularJS","Node.js"];
arr.push("JQuery"); document.writeln("Length before invoking push(): "+arr.length+"<br>");
document.writeln(arr); arr.push("JQuery","Bootstrap");
</script> document.writeln("Length after invoking push(): "+arr.length+"<br>");
document.writeln("Update array: "+arr);
</script>
JavaScript Array
9) reverse()
The JavaScript array reverse() method changes the sequence of elements of the given array and returns the reverse
sequence. In other words, the arrays last element becomes first and the first element becomes the last. This method also
made the changes in the original array.
Syntax
array.reverse()
Return
The original array elements in reverse order.
Example

<script>
var arr=["AngulaJS","Node.js","JQuery"];
var rev=arr.reverse();
document.writeln(rev);
</script>
JavaScript Array
10) shift()
The JavaScript array shift() method removes the first element of the given array and returns that element. This method
changes the length of the original array.
Syntax
array. shift()
Return
The first element of an array.

Example
<script>
var arr=["AngularJS","Node.js","JQuery"];
var result=arr.shift();
document.writeln(result);
</script>
JavaScript Array
11) slice()
The JavaScript array slice() method extracts the part of the given array and returns it. This method doesn't change the original
array.
Syntax
array.slice(start,end)
Parameter
start - It is optional. It represents the index from where the method starts to extract the elements.
end - It is optional. It represents the index at where the method stops extracting elements.
Example1 Example2
<script> <script>
var arr=["AngularJS","Node.js","JQuery","Bootstrap"] var arr=["AngularJS","Node.js","JQuery","Bootstrap"]
var result=arr.slice(1,2); var result=arr.slice(0,3);
document.writeln(result); document.writeln(result);
</script> </script
JavaScript Array
12) unshift()
The JavaScript array unshift() method adds one or more elements in the beginning of the given array and returns the
updated array. This method changes the length of the original array.
Syntax
array. unshift(element1,element2,....,elementn)
Parameter
element1,element2,....,elementn - The elements to be added.
Return
The original array with added elements.

<script> <script>
var arr=["AngularJS","Node.js"]; var arr=["AngularJS","Node.js"];
var result=arr.unshift("JQuery"); document.writeln("Length before invoking unshift(): "+arr.lengt
document.writeln(arr); h+"<br>");
</script> arr.unshift("JQuery","Bootstrap");
document.writeln("Length after invoking unshift(): "+arr.length
+"<br>");
document.writeln("Updated array: "+arr);
</script>
JavaScript Array
13) splice()
The JavaScript array splice() method is used to add/remove the elements to/from the existing array. It returns the removed
elements from an array. The splice() method also modifies the original array.
Syntax
array.splice(start,delete,element1,element2,?,elementn)
Parameter
start - It represents the index from where the method start to extract the elements.
delete - It is optional. It represents the number of elements to be removed.
element1,element2,...,elementn - It is optional. It represent the elements to be inserted.
Return
A new array containing the removed elements.
<script> <script>
var arr=["Monday","Tuesday","Thursday","Friday"]; var arr=["Monday","Tuesday","Saturday","Sunday","Thursday"
var result=arr.splice(2,0,"Wednesday") ,"Friday"];
document.writeln(arr); var result=arr.splice(2,2,"Wednesday")
</script> document.writeln("Updated array: "+arr+"<br>");
document.writeln("Removed element: "+result);
</script>
JavaScript Array

14) sort()
The JavaScript array sort() method is used to arrange the array elements in some order. By default, sort() method follows
the ascending order.
Syntax
array.sort(compareFunction)
Parameter
compareFunction - It is optional. It represents a function that provides an alternative sort order.
Return
An array of sorted elements
<script> <script>
var arr=["AngularJS","Node.js","JQuery","Bootstrap"] var arr=[2,4,1,8,5];
var result=arr.sort(); var result=arr.sort();
document.writeln(result); document.writeln(result);
</script> </script>
JavaScript String

The JavaScript string is an object that represents a sequence of characters.


There are 2 ways to create string in JavaScript
1.By string literal
2.By string object (using new keyword)
1) By string literal
The string literal is created using double quotes. The syntax of creating string using string literal is given below:
1.var stringname="string value";

<script>
var str="This is string literal";
document.write(str);
</script>

2) By string object (using new keyword)


The syntax of creating string object using new keyword is given below:
1.var stringname=new String("string literal");
Here, new keyword is used to create instance of string.
Let's see the example of creating string in JavaScript by new keyword.
<script>
var stringname=new String("hello javascript string");
document.write(stringname);
</script>
JavaScript String Methods
Methods Description
charAt() It provides the char value present at the specified index.
concat() It provides a combination of two or more strings.
indexOf() It provides the position of a char value present in the given string.
It provides the position of a char value present in the given string by searching a character from the last
lastIndexOf()
position.
replace() It replaces a given string with the specified replacement.
substr() It is used to fetch the part of the given string on the basis of the specified starting position and length.
substring() It is used to fetch the part of the given string on the basis of the specified index.
slice() It is used to fetch the part of the given string. It allows us to assign positive as well negative index.
toLowerCase() It converts the given string into lowercase letter.
toUpperCase() It converts the given string into uppercase letter.
toString() It provides a string representing the particular object.
split() It splits a string into substring array, then returns that newly created array.
trim() It trims the white space from the left and right side of the string.
JavaScript String

1) charAt()
The JavaScript string charAt() method is used to find out a char value present at the specified index in a string.
The index number starts from 0 and goes to n-1, where n is the length of the string. The index value can't be a negative,
greater than or equal to the length of the string.
Syntax
String.charAt(index)
Parameter
index - It represent the position of a character.
Returns
A char value
<script> <script>
var str="Javascript"; var str="Javascript";
document.writeln(str.charAt(4)); document.writeln(str.charAt());//print first character
</script> </script>
JavaScript String
2) charCodeAt()
The JavaScript string charCodeAt() method is used to find out the Unicode value of a character at the specific index in a
string.
The index number starts from 0 and goes to n-1, where n is the length of the string. It returns NaN if the given index number
is either a negative number or it is greater than or equal to the length of the string.
Syntax
string.charCodeAt(index)
Parameter
index - It represent the position of a character.
Return
A Unicode value
<script> <script>
var x="Javascript"; var x="Javascript";
document.writeln(x.charCodeAt(3)); document.writeln(x.charCodeAt());//It will return Unicode value of 'J'
</script> </script>
JavaScript String
3) concat()
The JavaScript string concat() method combines two or more strings and returns a new string. This method doesn't make any
change in the original string.
Syntax
string.concat(str1,str2,...,strn)
Parameter
str1,str2,...,strn - It represent the strings to be combined.
Return
Combination of strings.

<script> <script> <script>


var x="Java"; var x="Java"; var x="Java";
var y=“Script"; var y=“Script"; var y=“Script";
document.writeln(x.concat(y)); var z=" Programming"; var z=" Programming";
</script> document.writeln(x.concat(y,z)); document.writeln(x.concat(y+" "+z));
</script> </script>
JavaScript String
4) indexOf()
The JavaScript string indexOf() method is used to search the position of a particular character or string in a sequence of given
char values. This method is case-sensitive.
The index position of first character in a string is always starts with zero. If an element is not present in a string, it returns -1.
Syntax
These are the following methods used to search the position of an element.
Parameters
ch - It represent the single character to search like 'a'.
index - It represent the index position from where search starts.
str - It represent the string to search like "Java".
Return
Index of a particular character.

Method Description
indexOf(ch) It returns the index position of char value passed with method.
It start searching the element from the provided index value and then returns the index position of
indexOf(ch,index)
specified char value.
indexOf(str) It returns the index position of first character of string passed with method.
It start searching the element from the provided index value and then returns the index position of
indexOf(str,index)
JavaScript String
JavaScript String
JavaScript String
JavaScript String
JavaScript String
JavaScript String
JavaScript String
JavaScript Math Methods
Methods Description
abs() It returns the absolute value of the given number.
cbrt() It returns the cube root of the given number.
ceil() It returns a smallest integer value, greater than or equal to the given number.
exp() It returns the exponential form of the given number.
floor() It returns largest integer value, lower than or equal to the given number.
max() It returns maximum value of the given numbers.
min() It returns minimum value of the given numbers.
pow() It returns value of base to the power of exponent.
random() It returns random number between 0 (inclusive) and 1 (exclusive).
round() It returns closest integer value of the given number.
sign() It returns the sign of the given number
sqrt() It returns the square root of the given number

You might also like