Unit2 Array Notes

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 2 (ARRAY) MRS. S.S.
KADAM
--------------------------------------------------------------------------------------------------------------------------------------
UNIT:2 (14 Marks)
Array, Function and String
__________________________________________________
 Array:
 An Array is an object that can store a collection of items. Array is useful when
you need to store large amount of data.
 You can access the items in an array by referring to its index numbers and index
of the first element of an array is zero.
 An array in JavaScript can hold different elements. We can store numbers,
Strings, character and Boolean in a single value
2.1 Declaring an Array

There are two ways to declare an array
1.By array Literal
2.By creating instance an Array
1.By array Literal

Syntax:
var array_name=[value1,value2,value3…….,valueN];
<html>
<head>
<script language="javascript" type="text/javascript">
var arr1=["a","b","c"];
document.write(arr1);
</script>
</head>
<body>
</body>
</html>
Output:
a, b, c
1
CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 2 (ARRAY) MRS. S.S. KADAM
--------------------------------------------------------------------------------------------------------------------------------------
 Basic Array program [With Numeric values] :
<html>
<head>
var arr1=[1,2,4,12,45,10];
</script>
</head>
<body>
</body>
</html>
Output:
1,2,4,12,45,10
 Basic Array program [With Numeric values,character and String] :

<html>
<head>
var arr1=[1,”a”,4,”abcde”,45,10];
</script>
</head>
<body>
</body>
</html>
Output:
1,”a”,4,”abcde”,45,10
2
--------------------------------------------------------------------------------------------------------------------------------------
2. By Creating instance of Array:
 New keyword is used instance of array
Syntax:
Var array_name=new Array();
Program:Write a Javascript code to create an Array and print its length.

<html>
<head>
var arr1=new Array(3);
document.write("Lenght of Array :"+arr1.length);
</script>
</head>
<body>
</body>
</html>
3
--------------------------------------------------------------------------------------------------------------------------------------
2.1.2 Initializing an Array:
Initialization is the process of assigning values to an array. While initializing an array,
all elements should be placed in parenthesis and separated by commas.
Program: write a JavaScript code to create and initialize an element in Array.

<html>
<head>

var arr1=new Array("C","C++","Java","VB");
</script>
</head>
<body>
</body>
</html>
2.1.3 Defining an Array Elements:

Array contains a list of element, each element in the array is identified by its index.
The first element is an array stores at 0th position, second element at 1st position,
third element at 3rd position and so on.
4
--------------------------------------------------------------------------------------------------------------------------------------
Program:Write a Javascript code to create and print an element in Array.
<html>
<head>

arr1[0]="C";
arr1[1]="C++";
arr1[2]="Java";
arr1[3]="VB";
document.write("<br> Element of 0th Place: "+arr1[0]);
document.write("<br> Element of 1st Place: "+arr1[1]);
document.write("<br> Element of 2nd Place: "+arr1[2]);
document.write("<br> Element of 3rd Place: "+arr1[3]);
</script>
</head>
<body>
</body>
</html>
2.1.4 Looping an Array

In javascript, for loop iterate over each item in an array. Array are zero based,which means
the first item is referenced with an index of 0.Elements in an Array are access by a numeric
index,starting at zero and ending with the array length minus 1.
5
--------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>

arr1[0]="C";
arr1[1]="C++";
arr1[2]="Java";
arr1[3]="VB";
for(var a=0;a<arr1.length;a++)
{
document.write("<br>Element= "+arr1[a]);
}
</script>
</head>
<body>
</body>
</html>
2.1.5 Adding an Array Element

Following are two ways to add elements in an array:
1.By using push() method

2.By using unshift() method
1.By using push() method:

Push() method adds one or more elements at the end of array.
6
--------------------------------------------------------------------------------------------------------------------------------------
Syntax:
Array_name.push(element1,element2,……,elementN);
Program: Write a Javascript code to implement push method of Array.
<html>
<head>

arr1[0]="C";
arr1[1]="C++";
document.write("Original Array Length :"+arr1.length);
document.write("<br>Origional Array Element : "+arr1+"<br>");
arr1.push("Java");
arr1.push("VB","Python");
document.write("<br>Array length after adding new Element : "+arr1.length);
document.write("<br> Array after Adding element : "+arr1+"<br>");
</script>
</head>
<body>
</body>
</html>
2.By using unshift() method:

unshift() method adds one or more elements in the beginning of an array. It returns the
updated array with change in length.
Syntax:
Array_name.unshift(element1);
Array_name.unshift(element1,element2,……..,elementN);
7
--------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
arr1[0]="C";
arr1[1]="C++";
document.write("Original Array Length :"+arr1.length);
document.write("<br>Origional Array Element : "+arr1+"<br>");
arr1.unshift("Java");
document.write("<br>Array length after adding new Element :
"+arr1.length);
document.write("<br> Array after Adding element : "+arr1+"<br>");
</script>
</head>
<body>
</body>
</html>
2.1.6 Sorting an Array Element

Sort() method sorts the elements of an array in place and returns the sorted array. When
sort() without argument is called. It will sort elements in alphabetical order.
Syntax:
Array_name.sort();
8
--------------------------------------------------------------------------------------------------------------------------------------
Program:Write javascript code to print number array element by using sort
method
<html>
<head>
var arr1=[8,6,9,4,2];
document.write("Array element before sorting.....");
document.write(arr1+"<br>");
arr1.sort();
document.write("Array element after sorting.....");
</script>
</head>
<body>
</body>
</html>
9
--------------------------------------------------------------------------------------------------------------------------------------
Program:Write javascript code to print array element (string) by using sort
method
<html>
<head>
var arr1=["xyz","pqr","abc"];
document.write("Array element before sorting.....");
document.write(arr1+"<br>");
arr1.sort();
document.write("Array element after sorting.....");
</script>
</head>
<body>
</body>
</html>
10
--------------------------------------------------------------------------------------------------------------------------------------
Program: Write javascript code to print array element (all types) by using sort
method
<html>
<head>

var arr1=[9,"pqr","Abc",8,"abc",2,"PQR"];
document.write("Array element before sorting.....<br>");
document.write(arr1+"<br><br>");
arr1.sort();
document.write("Array element after sorting.....<br>");
</script>
</head>
<body>
</body>
</html>
11
--------------------------------------------------------------------------------------------------------------------------------------
 The sort() function is used to sort the array in place in a given order
according to the compare() function. The only argument to this function
that is used to sort the elements according to different attributes and in
the different order.
Syntax:
Array_name.sort(CompareFunction);
CompareFunction(a,b)<0 Then a comes before b in the answer

CompareFunction(a,b)>0 Then b comes before a in the answer
CompareFunction(a,b)=0 Then the order of a and b remain unchanged
Program: Write javascript code to sort array element in ascending order.

<html>
<head>
var arr1=new Array(9,23,34,8,10,2,45);
document.write("Array element before sorting:<br> "+arr1);
function compare(a,b)
{
return a-b;
}
arr1.sort(compare);
document.write("<br>Array element after sorting: <br>"+arr1);
</script>
</head>
<body>
</body>
</html>
Output:
12
--------------------------------------------------------------------------------------------------------------------------------------
Program: Write javascript code to sort array element in descending order.
<html>
<head>
var arr1=new Array(9,23,34,8,10,2,45);
function compare(a,b)
{
return b-a;
}
arr1.sort(compare);
document.write("<br>Array element after sorting: <br>"+arr1);
</script>
</head>
<body>
</body>
</html>
Output:
13
--------------------------------------------------------------------------------------------------------------------------------------
Reverse() Method:
Reverse() method is used to display sorted list in reverse manner i.e.in
descending order. It will return the reversed single value of the array.
Syntax: array.reverse();
Program:Write a javascript code to sort array elements in descending order by

using reverse order.
<html>
<head>
var arr1=new Array(9,2,3,8,1,7,5);
var a=arr1.sort();
a.reverse();
document.write("<br>Array element after sorting: <br>"+a);
</script>
</head>
<body>
</body>
</html>
Output:
14
--------------------------------------------------------------------------------------------------------------------------------------
2.1.7 Combining an Array Elements into strings:
In javascript an array can be combined into string using following two
function:
1.Join() method
2.Concat() method
1.Join() method:
This function joins all elements of an array into a string
Syntax:
Array.join(seperator);
Here,separator is alike /,_,* etc to separate to each element of the array. If
seperatoris not mentioned,it will display list with comma as separator.This
fuction returns a string after joining all elements together.
<html>
<head>
var arr1=new Array("C","C++","Java",);
var a=arr1.join();
document.write("<br>Array element after Joining: <br>"+a);

</script>
</head>
<body>
</body>
</html>
15
--------------------------------------------------------------------------------------------------------------------------------------
2.Concat() method:
This function is used to join two or more array together in JavaScript.
This function returns a new string which is combination of different string
passed to it as arguments.
Syntax:
String.concat(string1,string2,string3,……);
Program: Write a Javascript code to implement concat method of array.
<html>
<head>
var arr1=new Array("C","C++","Java",);
document.write("Array element before concat method:<br> "+arr1);
var a=arr1.concat("VB");
document.write("<br>Array element after concat method: <br>"+a);
var a1=arr1.concat("PHP",".NET");
document.write("<br>Array element after concat method: <br>"+a1);
</script>
</head>
<body>
</body>
</html>
Output:
16
--------------------------------------------------------------------------------------------------------------------------------------
2.1.8: Changing Elements of an array:
1.Shift()
2.Pop()
3. Unshift()
4.Push()
1.Shift()
This method is used to remove first element from an array and returns the
removed single value of an array.
Syntax:
Array.shift();
Program:Write a javascript code to implement shift method of array.
<html>
<head>
var arr1=new Array(1,2,3,4,5);
document.write("Array element before shift method: "+arr1);
var a=arr1.shift();
document.write("<br> Removed element after Shift method: "+a);
document.write("<br>Array Element after shift method: ",arr1);
</script>
</head>
<body>
</body>
</html>
Output:
17
--------------------------------------------------------------------------------------------------------------------------------------
2.Pop Method:
This method is used to remove last element and return the removed
element from an array.
Syntax:
Array.pop()
Program: Write a Javascript code to implement pop() method of array.
<html>
<head>

var arr1=new Array(1,2,3,4,5);
document.write("Array element before pop method: "+arr1);
var a=arr1.pop();
document.write("<br> Removed element after pop method: "+a);
document.write("<br>Array Element after pop method: ",arr1);
</script>
</head>
<body>
</body>
</html>
Output:
18
--------------------------------------------------------------------------------------------------------------------------------------
3.Splice method:
This method is used to add or remove the elements to or from the existing
array. It returns the removed elements from an array. This method also modifies
the original array.
Syntax:
Array.splice(start, delete, element1, element2, ….., elementn);
Start:It represents the index from where the method start to extract the
element.
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.
Program: Write a javascript code to add element in array using splice method
<html>
<head>

var arr1=new Array("C","C++","V","VB.NET");
document.write("Origional array: "+arr1);
arr1.splice(1,0,"C#");
document.write("<br>array after splice method : "+arr1);
</script>
</head>
<body>
</body>
</html>
Output:
19
--------------------------------------------------------------------------------------------------------------------------------------
Program: Write a javascript code to remove element in array using splice

method
<html>
<head>

var arr1=new Array("C","C++","V","VB.NET");
arr1.splice(3);
document.write("<br>array after splice method_Remove element : "+arr1);
</script>
</head>
<body>
</body>
</html>
Output:
20
--------------------------------------------------------------------------------------------------------------------------------------
In below example splice method start remove operation from 2 nd index position
till end.
<html>
<head>

var arr1=new Array("C","C++","V","VB.NET","Java");
arr1.splice(2);
document.write("<br>array after splice method_Remove element : "+arr1);
</script>
</head>
<body>
</body>
</html>
Output:
21
--------------------------------------------------------------------------------------------------------------------------------------
Program: Write a javascript code to add as well as remove elements in array
using splice method.
<html>
<head>

var arr1=new Array("C","C++","VB","Python","Java");
arr1.splice(2,1,"PHP","C#");
document.write("<br>array after splice method : "+arr1);
</script>
</head>
<body>
</body>
</html>
Ouput:
22
--------------------------------------------------------------------------------------------------------------------------------------
2.1.9 Objects as Associative Array:
Associative array are dynamic objects that the user redefines as needed. When you assign
values to keys in a variable of type array, the array is transformed into an object, and it loses
the attributes and methods of array. We can create it by assigning a literal to a variable.
Syntax:
var arrayname={key1:’value1’,key2:’value2’};
Example:
var a={“name”:”sampada”,”rollno”:30};
Program1:
<html>
<body>
var a={"name":"sampada","rollno":30,"class":"TYCM"};
document.write("<br>Name : "+a["name"]);
document.write("<br>Roll Number : "+a["rollno"]);
document.write("<br>Class : "+a["class"]);
</script>
</body>
</html>
Output:
23
--------------------------------------------------------------------------------------------------------------------------------------
We can create an associative array with the object reserved word, then assign key and values.
Program 2:
<html>
<body>

var student=new Object();
student["name"]="sampada";
student["rollnumber"]=30;
student["class"]="TYCM";
document.write("Name : "+student["name"]);
document.write("<br>Roll Number : "+student["rollnumber"]);
document.write("<br>Class : "+student["class"]);
</script>
</body>
</html>
Output:
24

Unit2 Array Notes

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit2 Array Notes

Uploaded by

Copyright:

Available Formats

CLIENT SIDE SCRIPTING LANGUAGE (CSS)-UNIT 2 (ARRAY) MRS. S.S.

2.1 Declaring an Array

1.By array Literal

 Basic Array program [With Numeric values,character and String] :

Program:Write a Javascript code to create an Array and print its length.

Program: write a JavaScript code to create and initialize an element in Array.

<script language="javascript" type="text/javascript">

2.1.3 Defining an Array Elements:

<script language="javascript" type="text/javascript">

var arr1=new Array(3);

2.1.4 Looping an Array

<script language="javascript" type="text/javascript">

var arr1=new Array(3);

2.1.5 Adding an Array Element

1.By using push() method

1.By using push() method:

Program: Write a Javascript code to implement push method of Array.

<script language="javascript" type="text/javascript">

2.By using unshift() method:

2.1.6 Sorting an Array Element

<script language="javascript" type="text/javascript">

CompareFunction(a,b)<0 Then a comes before b in the answer

Program: Write javascript code to sort array element in ascending order.

Program:Write a javascript code to sort array elements in descending order by

document.write("<br>Array element after Joining: <br>"+a);

Program: Write a Javascript code to implement concat method of array.

Program:Write a javascript code to implement shift method of array.

Program: Write a Javascript code to implement pop() method of array.

<script language="javascript" type="text/javascript">

<script language="javascript" type="text/javascript">

Program: Write a javascript code to remove element in array using splice

<script language="javascript" type="text/javascript">

<script language="javascript" type="text/javascript">

<script language="javascript" type="text/javascript">

<script language="javascript" type="text/javascript">

You might also like