Develop JavaScript to implement Array functionalities
LABORATORY OBJECTIVE:
1. To be able to understand the concept of array.
2. To be able to develop JavaScript programs using Array.
3. To be able to use array methods in programs.
JavaScript Arrays
- An array is a special variable, which can hold more than one value at a time.
- JavaScript arrays are used to store multiple values in a single variable.
Declaring an array
- There are 2 ways to construct an array in JavaScript
1) By array literal
2) By using an Array constructor (using new keyword)
1) By array literal
- This is the easiest way to create a JavaScript Array.
- Syntax:
var array_name = [item1, item2, …];- Example:
var fruits = ["Apple", "Orange", "Plum"];2) By using an Array constructor (using new keyword)
- You can also create an array using Array constructor with new keyword
- This declaration has five parts:
1) var keyword
2) Array name
3) Assignment operator
4) new operator
5) Array ( ) constructor - Syntax:
var array_name = new Array();- Example:
var books = new Array();
books[0] = "C";
books[1] = "C++";
books[2] = "JavaScript";
books[3] = "PHP";ORvar books = new Array("C", "C++", "JavaScript", "PHP");
JavaScript Array Methods
- The Array object has many properties and methods which help developers to handle arrays easily and efficiently.
- You can get the value of a property by specifying arrayname.property and the output of a method by specifying arrayname.method().
- The following are methods of the JavaScript Array:
1. length property → Returns the number of elements in an array.
2. prototype property → Used to add new properties and methods of object.
3. reverse() method → Returns the reverse order of items in an array.
4. sort() method → Returns the sort array.
5. pop() method → Remove the last item of an array.
6. shift() method → Remove the first item of an array.
7. push() method → Adds an array element to array at last.
8. unshift() method → Adds an array element to array at beginning.
SAMPLE PROGRAMS
- Develop a JS program to demonstrate Arrays and its methods.
<html>
<head>
<title>Arrays!!!</title>
<script type="text/javascript">
var languages = new Array("C", "C++", "HTML", "Java", "VB");
Array.prototype.displayItems=function(){
for (i=0;i<this.length;i++){
document.write(this[i] + "<br />");
}
}
document.write("Programming lanugages array<br />");
languages.displayItems();
document.write("<br />The number of items in languages array is " + languages.length + "<br />");
document.write("<br />The SORTED languages array<br />");
languages.sort();
languages.displayItems();
document.write("<br />The REVERSED languages array<br />");
languages.reverse();
languages.displayItems();
document.write("<br />The languages array after REMOVING the LAST item<br />");
languages.pop();
languages.displayItems();
document.write("<br />THE languages array after PUSH<br />");
languages.push("JavaScript");
languages.displayItems();
document.write("<br />The languages array after SHIFT<br />");
languages.shift();
languages.displayItems();
</script>
</head>
<body>
</body>
</html>
2. Develop a JavaScript program to display the sum and product of array elements.
<html>
<head>
<title>Display sum and product of array elements</title>
</head>
<body>
<script type="text/javascript">
var arr = [13, 56, 7, 23, 1, 7, 8];
var sum=0, product = 1; for(var i=0; i<arr.length; i++) {
sum += arr[i];
product *= arr[i];
}
document.write("Array elements are " + arr + "<br />");
document.write("<h3>Sum : " + sum + "</h3>");
document.write("<h3>Product : " + product + "</h3>");
</script>
</body>
</html>
3. Develop a program to find minimum and maximum element in array.
<html>
<head>
<title>Display minimum and maximum element in Array</title>
</head>
<body>
<p id="result"></p>
<script>
var arr = [54, 21, 74, 31, 12];
var max = arr[0];
var min = arr[0]; document.write("Array elements given are: " + arr + "<br/>");
for(var i=1; i<arr.length; i++) {
if(arr[i] > max)
max = arr[i];
if(arr[i] < min)
min = arr[i];
}
document.write("<h3>Minimum element is " + min + "</h3>");
document.write("<h3>Maximum element is " + max + "</h3>");
</script>
</body>
</html>
Thank you for your support
You can try out my apps available on Google Play Store