Array Function and String
2.1 Array:
Array is a collection of similar type of elements which can be referred by Common name
Any element in an array is referred by an name followed by "[" followed by position of the followed
by]’
The particular position of element in an array is called arra index or subscript.
For example
Array Index
0 1 2 3 4
10 20 30 40 50
Array value
Fig. 2.1.1 Arrays
Normally the first element in an array is stored at 0th location, however we can start storing the
element from any position.
1.1 Declaring an Array
In JavaScript the array can be created using Array object.
Suppose, we want to create an array ot 10 elements then we can write,
Var ar=new Array(10);
Using new operator we can allocate the memory dynamically for the arrays.
In the brackets the size of an array is mentioned and the var ar denotes the name of the array. Thus by
the above sentence an array ar will be created in which we can store 10 elements at the most.
Sometimes the above statement can be written like this
var ar;
ar=new Array(100);
Initializing an Array
Initialization is the process of assigning a value when either a variable or array is declared. For
Example
int count=10//variable initialization
While initializing an array
1) Declare name of the array
2) Make use of the keyword new
2) Each value within an array as an 'array element' must be separated by comma.
For example-
var mylist = new Array (10,20,30.40,50)
21.3 Defining an Array Elements
The elements in the array are stored from index 0.
For example - elements in array 10,20,30,40,50 are stored as follows
Following is a simple JavaScript that illustrates the initialization of array by defining the array
elements.
<html>
<body>
<script type="text/javascript">
a=new Array(5);
for(i=0;i<5;i++)
{
Prepared by: [Link] Ligade Page 1
Array Function and String
a[i]=i;
[Link](a[i]+"<br>");
}
</script>
</body>
</html>
Output:
Another Way of Initialization
<html>
<body>
<script type="text/javascript">
b=new Array(10,20,30,40,50);
for(i=0;i<5;i++)
{
[Link](b[i]+"<br>");
}
</script>
</body>
</html>
Output:
<html>
<body>
Prepared by: [Link] Ligade Page 2
Array Function and String
<script type="text/javascript">
var c=[10,20,30,40,50];
for(i=0;i<5;i++)
{
[Link](c[i]+"<br>");
}
</script>
</body>
</html>
EX 2.2.1:
Write a javascript to define the array elements and to find the length of array
<html>
<body>
<script type = "text/javascript">
var arr = new Array( 10, 20, 30,40,50,60);
[Link]("<b>length of array is : " + [Link]);
</script>
</body>
</html>
Output:
2.1.4 Looping an array
Looping an array means visiting each element present in the array.
<html>
<body>
<script type="text/javascript">
city=new Array();
city[0]="sangola";
Prepared by: [Link] Ligade Page 3
Array Function and String
city[1]="sangli";
city[2]="satara";
city[3]="solapur";
city[4]="malshiras";
for(i=0;i<[Link];i++)
{
[Link](city[i]+"<br>");
}
</script>
</body>
</html>
2.1.5 Adding an array Element:
We can add the element at the end.
This increases the size of the array.
<html>
<body>
<script type="text/javascript">
a=new Array();
a[0]=10;
a[1]=20;
a[2]=30;
a[3]=40;
a[4]=50;
[Link]("<br> Below are the elements of the array");
for(i=0;i<[Link];i++)
{
[Link](a[i]+"<br>");
}
[Link]("<br> Here we adding the element in the array<br>");
a[[Link]]=60;
[Link]("<br> after addition of the element in the array<br>");
for(i=0;i<[Link];i++)
{
[Link](a[i]+"<br>");
}
Prepared by: [Link] Ligade Page 4
Array Function and String
</script>
</body>
</html>
2.1.6 Sorting an array element:
The elements can be sort using built in function sort()
Sorting is basically a process of arranging the elements in ascending order or increasing order.
<html>
<body>
<script type="text/javascript">
a=new Array();
a[0]=90;
a[1]=60;
a[2]=50;
a[3]=40;
a[4]=70;
[Link]("<br> Below are the elements of the array");
for(i=0;i<[Link];i++)
{
[Link](a[i]+"<br>");
}
[Link]("<br> Here we sorting element in the array<br>");
[Link]();
[Link]("<br> after sorting of the element in the array<br>");
for(i=0;i<[Link];i++)
{
[Link](a[i]+"<br>");
}
</script>
Prepared by: [Link] Ligade Page 5
Array Function and String
</body>
</html>
2.1.7 Combining array elements into string
In javascript it is possible to combine elements into string.
1)Join()
2)concat()
The concat method separates each value with comma.
The join() method also uses a comma to separate values,but you can specify a character other than a
comma to separate values.
<html>
<body>
<script type="text/javascript">
city=new Array();
city[0]="sangola";
city[1]="sangli";
city[2]="satara";
city[3]="solapur";
city[4]="malshiras";
for(i=0;i<[Link];i++)
{
[Link](city[i]+"<br>");
}
[Link]("<br> The Join() method<br>");
var str=[Link]('');
[Link](str);
[Link]("<br> The concat() method<br>");
var str1=[Link]('');
[Link](str1);
</script>
</body>
Prepared by: [Link] Ligade Page 6
Array Function and String
</html>
2.1.8 Changing Elements of an Array:
There are various methods that help in changing the elemennts of array
1)shift()
<html>
<body>
<script type="text/javascript">
a=new Array();
a[0]=10;
a[1]=20;
a[2]=30;
a[3]=40;
a[4]=50;
[Link]("<br> The Use Of shift() method<br>");
var num=[Link]();
[Link](num+"<br>");
[Link]("<br> The array elements<br>");
for(i=0;i<[Link];i++)
[Link](a[i]+"<br>");
</script>
</body>
</html>
Prepared by: [Link] Ligade Page 7
Array Function and String
2)Push()
<html>
<body>
<script type="text/javascript">
a=new Array();
a[0]=10;
a[1]=20;
a[2]=30;
a[3]=40;
a[4]=50;
[Link]("<br> The Use Of push() method<br>");
[Link](60);
[Link]("<br> The array elements<br>");
for(i=0;i<[Link];i++)
[Link](a[i]+"<br>");
</script>
</body>
</html>
Prepared by: [Link] Ligade Page 8
Array Function and String
3)pop()
<html>
<body>
<script type="text/javascript">
a=new Array();
a[0]=10;
a[1]=20;
a[2]=30;
a[3]=40;
a[4]=50;
[Link]("<br> The Use Of pop() method<br>");
var val=[Link]();
[Link]("<br>"+val)
[Link]("<br> The array elements<br>");
for(i=0;i<[Link];i++)
[Link](a[i]+"<br>");
</script>
</body>
</html>
4)reverse()
<html>
Prepared by: [Link] Ligade Page 9
Array Function and String
<body>
<script type="text/javascript">
a=new Array();
a[0]=10;
a[1]=20;
a[2]=30;
a[3]=40;
a[4]=50;
[Link]("<br> The Use Of reverse() method<br>");
[Link]();
[Link]("<br> The array elements<br>");
for(i=0;i<[Link];i++)
[Link](a[i]+"<br>");
</script>
</body>
</html>
2.1.9Objects as a Associative Array:
Associative array is a specialised array in which elements are stored in a (Key ,value)pair.
We can create associative array as
Var a={“one”:1,”two”:2};
<html>
<body>
<script type="text/javascript">
a=new Object();
a["One"]=1;
a["Two"]=2;
a["Three"]=3;
a["Four"]=4;
a["Five"]=5;
[Link]("<br> The elements of array<br>");
for(i in a)
[Link](i+"="+a[i]+"<br>");
Prepared by: [Link] Ligade Page 10
Array Function and String
</script>
</body>
</html>
2.2 Function:
We can write the function in the javascript for bringing the modularity in the script.
Separate functions can be created for each separate [Link] ultimately helps in finding the bug from
the program efficiently.
A JavaScript function is executed when "something" invokes it (calls it).
JavaScript Function Syntax
A JavaScript function is defined with the function keyword, followed by a name, followed by
parentheses ().
Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
Function parameters are listed inside the parentheses () in the function definition.
Function arguments are the values received by the function when it is invoked.
Inside the function, the arguments (the parameters) behave as local variables.
A Function is much the same as a Procedure or a Subroutine, in other programming languages.
function Invocation
The code inside the function will execute when "something" invokes (calls) the function:
Prepared by: [Link] Ligade Page 11
Array Function and String
When an event occurs (when a user clicks a button)
When it is invoked (called) from JavaScript code
Automatically (self invoked)
<!DOCTYPE html>
<html>
<head>
<title>function Demo</title>
<script type="text/javascript">
function my_fun()
[Link]("this statement is within the function");
</script>
</head>
<body>
<center>
<script type="text/javascript">
[Link]("this statement is before a function call");
[Link]("<br>");
my_fun();//call to the function
</script>
</center>
</body>
</html>
Prepared by: [Link] Ligade Page 12
Array Function and String
2.2.4 Scope variable and Argument:
Local Variables and Global Variables
Variables declared within a JavaScript function, become LOCAL to the function.
Local variables can only be accessed from within the function.
Variables defined inside a function cannot be accessed from anywhere outside the function,
because the variable is defined only in the scope of the function. However, a function can
access all variables and functions defined inside the scope in which it is defined.
In other words, a function defined in the global scope can access all variables defined in the
global scope. A function defined inside another function can also access all variables defined
in its parent function, and any other variables to which the parent function has access.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function A()
var a=100;//local variable
[Link]("id1").innerHTML="From function A():a="+a;
function B()
[Link]("id2").innerHTML="From function B():a="+a;
Prepared by: [Link] Ligade Page 13
Array Function and String
</script>
</head>
<body>
<p id="id1"></p>
<p id="id2"></p>
<script type="text/javascript">
A();
B();
</script>
</body>
</html>
Global Variable Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var a=100;//Global variable
function A()
[Link]("id1").innerHTML="From function A():a="+a;
Prepared by: [Link] Ligade Page 14
Array Function and String
function B()
[Link]("id2").innerHTML="From function B():a="+a;
</script>
</head>
<body>
<p id="id1"></p>
<p id="id2"></p>
<script type="text/javascript">
A();
B();
</script>
</body>
</html>
2.3Calling a Function:
Defining a function does not execute it. Defining it simply names the function and specifies
what to do when the function is called.
Calling the function actually performs the specified actions with the indicated parameters. For
example, if you define the function square, you could call it as follows:
square(5);
Example of Calling function with argument:
<!DOCTYPE html>
Prepared by: [Link] Ligade Page 15
Array Function and String
<html>
<head>
<script type="text/javascript">
function add(a,b)
{
c=a+b;
[Link]("addition="+c);
}
</script>
</head>
<body>
<h4>passing arguments to the function</h4>
<script type="text/javascript">
var x=10;
var y=20;
add(x,y);
</script>
</body>
</html>
Function without argument:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function add()
{
var a=10;
var b=20;
c=a+b;
[Link]("addition="+c);
}
</script>
</head>
<body>
<h4>function without passing arguments </h4>
<script type="text/javascript">
add();
</script>
</body>
</html>
Prepared by: [Link] Ligade Page 16
Array Function and String
2.3.3 Calling Function from HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function A()
{
alert("inside the function A");
}
</script>
</head>
<body onload="A()">
</script>
</body>
</html>
2.3.4 Function calling another function
We can call function from another function.
This is called nested functions.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function A()
{
B();//calling another function
}
function B()
{
alert("inside function B() via function A()");
}
Prepared by: [Link] Ligade Page 17
Array Function and String
</script>
</head>
<body onload="A()">
</scrit>
</body>
</html>
2.3.5Returning a value from function
When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to execute the code after
the invoking statement.
Functions often compute a return value. The return value is "returned" back to the "caller":
<!DOCTYPE html>
<html>
<head>
<title>Function Demo</title>
<script type="text/javascript">
function my_fun()
{
str="I am function returned value";
return str;
}
</script>
</head>
<center>
<script type="text/javascript">
[Link]("this statement is a before a function call");
[Link]("<br>");
my_fun();
[Link](str);
</script>
</center>
</body>
</html>
Prepared by: [Link] Ligade Page 18
Array Function and String
2.4 String
JavaScript strings are used for storing and manipulating text.
It is the collection of characters.
Example var str=’vikas’
Strings are useful for holding data that can be represented in text form. Some of the most-used
operations on strings are to check their length, to build and concatenate them using the + and += string
operators, checking for the existence or location of substrings with the indexOf() method, or extracting
substrings with the substring() method.
2.4.1 Manipulating a String:
Primitive values, like "Shivaji poly", cannot have properties or methods (because they are
not objects).
But with JavaScript, methods and properties are also available to primitive values, because
JavaScript treats primitive values as objects when executing methods and properties.
The length property returns the length of a string:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Properties</h2>
<p>The length property returns the length of a string:</p>
<p id="demo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
Prepared by: [Link] Ligade Page 19
Array Function and String
var sln = [Link];
[Link]("demo").innerHTML = sln;
</script>
</body>
</html>
The indexOf() method returns the index of (the position of) the first occurrence of a specified
text in a string
var str = "Please locate where 'locate' occurs!";
var pos = [Link]("locate");
Another String methods
Concat(str)
charAt(indexvalue)
substring(Begin,end)
toLowerCase()
toUpperCase()
valueOf()
2.4.2 Joining a string:
<!DOCTYPE html>
<html>
<script type="text/javascript">
var str="Shivaji Polytechnic College - Sangola";
var n=[Link]("College");
alert("The Word College is at index:"+n+"in the text:"+str);
</script>
</body>
Prepared by: [Link] Ligade Page 20
Array Function and String
</html>
<!DOCTYPE html>
<html>
<script type="text/javascript">
var Name="Shivaji Polytechnic College";
var list=[Link](' ');
alert("First Word:"+list[0]+"\nMiddle Word:"+list[1]+"\nLast Word:"+list[2]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script type="text/javascript">
var Name1="Shivaji Polytechnic College";
var Name2="Sangola";
var sub_str=[Link](8,23);
[Link]("<br/>The Word1:"+Name1);
[Link]("<br/>The Word2:"+sub_str);
[Link]("<br/>The Name2:"+Name2);
[Link]("<br/><b>coping the Word2 for Name2....</b>");
var Name3=Name2+" "+sub_str;
[Link]("<br/>The Name3:"+Name3);
</script>
</body>
Prepared by: [Link] Ligade Page 21
Array Function and String
</html>
<!DOCTYPE html>
<html>
<script type="text/javascript">
var str="100";
var a=parseInt(str);//converting string 100 to number 100
var b=200;
result=str+b;
[Link]("<br/>Adding 200 to '100'="+result);
result=a+b;
[Link]("<br/>Adding 200 to 100="+result);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script type="text/javascript">
var num=100;
var str=[Link]()
[Link]("<br/>the 100 value is converted to string"+str)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
Prepared by: [Link] Ligade Page 22
Array Function and String
<script type="text/javascript">
var str="WELCOME FRIENDS";
var newstr=[Link]();
[Link]("<br/>the "+str+"is converted to:"+newstr);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script type="text/javascript">
var str="welcome friends";
var newstr=[Link]();
[Link]("<br/>the "+str+"is converted to:"+newstr);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script type="text/javascript">
var ch='$';
var n=[Link]();
[Link]("<br/>The letter"+ch+" has a unicode as:"+n);
</script>
</body>
Prepared by: [Link] Ligade Page 23
Array Function and String
</html>
<!DOCTYPE html>
<html>
<script type="text/javascript">
var n=97;
var ch=[Link](n);
[Link]("<br/>The unicode"+n+"is for letter:"+ch);
</script>
</body>
</html>
Prepared by: [Link] Ligade Page 24
Array Function and String
Prepared by: [Link] Ligade Page 25
Array Function and String
Prepared by: [Link] Ligade Page 26