To create an html page to explain the use of various predefined functions in an array & Date object in JavaScript.

 

Shift Method

shift method remove first element of the array and shift other element to lower index

var fruit = ["Apple", "Mengo", "Cherry", "Banana", "Orange"];
fruit.shift();
document.getElementById("demo").innerHTML = fruit;

document.getElementById("demo").innerHTML = fruit[0];

in this method shift method remove first element and store in to a

var a = fruit.shift();
document.getElementById("demo").innerHTML = fruit;

document.getElementById("demo").innerHTML = a;

Unshift Method

unshift method add element in starting of the array

fruit.unshift("Strawberry");
document.getElementById("demo").innerHTML = fruit;

var a = fruit.unshift("Strawberry");
document.getElementById("demo").innerHTML = a;

Spliec Method

spliec add/remove element of the array

fruit.splice(3, 0, "Dragon fruit", "Lemon");
document.getElementById("demo").innerHTML = fruit;

it's starting removing and adding element form index 3 

fruit.splice(3, 1, "Dragon fruit", "Lemon");
document.getElementById("demo").innerHTML = fruit;

it's starting remove element form index 0 

fruit.splice(0, 2);
document.getElementById("demo").innerHTML = fruit;

Concat Method

concat method is marging array

var arr1 = ["a", "b", "c"];
var arr2 = ["x", "y", "z"];
var arr3 = arr1.concat(arr2);
document.getElementById("pid").innerHTML = arr3;

var arr4 = arr1.concat(arr2, arr3);
document.getElementById("pid").innerHTML = arr4;

Slice Method

slice method is print element form start index and end index 

var fruit = ["Apple", "Mengo", "Cherry", "Banana", "Orange"];
var arr = fruit.slice(1, 3);
document.getElementById("demo").innerHTML = arr;

it's shows pop message in which print element

window.alert(fruit.slice(1, 3));

document.getElementById("demo").innerHTML = fruit.slice(1, 3);

document.write(fruit.slice(1, 3));

if you print element from the end of the array

window.alert(fruit.slice(-2));

IndexOf Method

it's return index of mengo and start searching to left side

var fruit = ["Apple", "Mengo", "Cherry", "Banana", "Mengo", "Orange"];
window.alert(fruit.indexOf("Mengo", 0));

it's return index of mengo and start searching to right side

window.alert(fruit.lastIndexOf("Mengo"));

it's return boolean value true/false when item is found in array other wise is return false

window.alert(fruit.includes("Cherry"));

var a = [11, 21, 31, 41, 51];
document.getElementById("demo").innerHTML = a.slice(0, 3);

Creat an Array

var fruit = ["Apple", "Mengo", "Cherry"];

var fruit = new Array("apple", "Cherry");

Change an Array Element

fruit[1] = "Banana";

Print on element of the Array

document.getElementById("demo").innerHTML = fruit[1];

Print entier Array

document.getElementById("demo").innerHTML = fruit;

Length Properties

Display last element of array using length properties

var fruit = ["Apple", "Mengo", "Cherry"];
var last = fruit[fruit.length - 1];
document.getElementById("demo").innerHTML = last;

Sort the array in assending order

var fruit = ["Apple", "Mengo", "Cherry"];
fruit.sort();
document.getElementById("demo").innerHTML = fruit;

 sort the array in descending order

var fruit = ["Apple", "Mengo", "Cherry"];
fruit.reverse();
document.getElementById("demo").innerHTML = fruit;

Array as Object

var student = {
name: "jay",
age: 19,
branch: "cse",
collage: "parul"
}
document.getElementById("student").innerHTML = student["name"];

Loop through array elements and display them

var fruit = ["Apple", "Mengo", "Cherry"];
let i;
var ans = "";
for (i = 0; i < fruit.length; i++) {
ans += fruit[i] + " ";
}

Two way to display array element on webpage

document.write(ans);
document.getElementById("demo").innerHTML = ans;

Loop through array elements and display them as a list item like this

1 Apple 
2 Banana
3 cherry

if you show list item as ordered list then use ol instead of ul

var fruit = ["Apple", "Mengo", "Cherry"];
let i;
var ans = "<ul>";
for (i = 0; i < fruit.length; i++) {
ans += "<li>" + fruit[i] + " </li>";
}
ans += "</ul>";
document.write(ans);

if Object is there then use for in loop       

 for(variable in Object){}       

 if Array is there then use for of loop

var fruit = ["Apple", "Mengo", "Cherry"];
var ans = "<ul>";
var item;
for (item of fruit) {
ans += "<li>" + item + " </li>";
}
ans += "</ul>";
document.write(ans);

Push and Pop Operation

var fruit = ["Apple", "Mengo", "Cherry"];

element is push to end of the Array

var a = fruit.push("Orange");
document.getElementById("demo").innerHTML = fruit;

element is pop to end of the Array

var a = fruit.pop("Orange");
document.getElementById("demo").innerHTML = fruit;

decrese length when perfoming pop operation

var len = fruit.length;
document.getElementById("demo").innerHTML = len;

when pop operation is perfomed then value of a is last element of the array

document.getElementById("demo").innerHTML = a;

All Method in One Code

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practical-11</title>

</head>

<body>
<div class="container">
<p id="demo"></p>
<p id="pid"></p>
</div>
<script>
// shift method remove first element of the array and shift other element to lower index
// var fruit = ["Apple", "Mengo", "Cherry", "Banana", "Orange"];
// fruit.shift();
// document.getElementById("demo").innerHTML = fruit;
// document.getElementById("demo").innerHTML = fruit[0];

// in this method shift method remove first element and store in to a
// var a = fruit.shift();
// document.getElementById("demo").innerHTML = fruit;
// document.getElementById("demo").innerHTML = a;

// unshift method add element in starting of the array
// fruit.unshift("Strawberry");
// document.getElementById("demo").innerHTML = fruit;

// var a = fruit.unshift("Strawberry");
// document.getElementById("demo").innerHTML = a;

// spliec add/remove element of the array
// fruit.splice(3, 0, "Dragon fruit", "Lemon");
// document.getElementById("demo").innerHTML = fruit;

// it's starting removing and adding element form index 3
// fruit.splice(3, 1, "Dragon fruit", "Lemon");
// document.getElementById("demo").innerHTML = fruit;

// it's starting remove element form index 0
// fruit.splice(0, 2);
// document.getElementById("demo").innerHTML = fruit;

// concat method is marging array
// var arr1 = ["a", "b", "c"];
// var arr2 = ["x", "y", "z"];
// var arr3 = arr1.concat(arr2);
// document.getElementById("pid").innerHTML = arr3;

// var arr4 = arr1.concat(arr2, arr3);
// document.getElementById("pid").innerHTML = arr4;

// slice method is print element form start index and end index
// var fruit = ["Apple", "Mengo", "Cherry", "Banana", "Orange"];
// var arr = fruit.slice(1, 3);
// document.getElementById("demo").innerHTML = arr;

// it's shows pop message in which print element
// window.alert(fruit.slice(1, 3));

// document.getElementById("demo").innerHTML = fruit.slice(1, 3);

// document.write(fruit.slice(1, 3));

// if you print element from the end of the array
// window.alert(fruit.slice(-2));

// var fruit = ["Apple", "Mengo", "Cherry", "Banana", "Mengo", "Orange"];
// it's return index of mengo and start searching to left side
// window.alert(fruit.indexOf("Mengo", 0));

// it's return index of mengo and start searching to right side
// window.alert(fruit.lastIndexOf("Mengo"));

// it's return boolean value true/false when item is found in array other wise is return false
// window.alert(fruit.includes("Cherry"));

// var a = [11, 21, 31, 41, 51];
// document.getElementById("demo").innerHTML = a.slice(0, 3);
// Creat an Array
// var fruit = ["Apple", "Mengo", "Cherry"];
// var fruit = new Array("apple", "Cherry");

// Change an Array Element
// fruit[1] = "Banana";

// Print on element of the Array
// document.getElementById("demo").innerHTML = fruit[1];

// Print entier Array
// document.getElementById("demo").innerHTML = fruit;

// Length Properties
// Display last element of array using length properties
// var fruit = ["Apple", "Mengo", "Cherry"];
// var last = fruit[fruit.length - 1];
// document.getElementById("demo").innerHTML = last;


// Sort the array in assending order
// var fruit = ["Apple", "Mengo", "Cherry"];
// fruit.sort();
// document.getElementById("demo").innerHTML = fruit;

// sort the array in descending order
// var fruit = ["Apple", "Mengo", "Cherry"];
// fruit.reverse();
// document.getElementById("demo").innerHTML = fruit;

// Array as Object
// var student = {
// name: "jay",
// age: 19,
// branch: "cse",
// collage: "parul"
// }
// document.getElementById("student").innerHTML = student["name"];

// Loop through array elements and display them
// var fruit = ["Apple", "Mengo", "Cherry"];
// let i;
// var ans = "";
// for (i = 0; i < fruit.length; i++) {
// ans += fruit[i] + " ";
// }

// Two way to display array element on webpage
// document.write(ans);
// document.getElementById("demo").innerHTML = ans;

// Loop through array elements and display them as a list item like this
// 1 Apple
// 2 Banana
// 3 Cherry

// if you show list item as ordered list then use ol instead of ul
// var fruit = ["Apple", "Mengo", "Cherry"];
// let i;
// var ans = "<ul>";
// for (i = 0; i < fruit.length; i++) {
// ans += "<li>" + fruit[i] + " </li>";
// }
// ans += "</ul>";
// document.write(ans);

// if Object is there then use for in loop
// for(variable in Object){}
// if Array is there then use for of loop
var fruit = ["Apple", "Mengo", "Cherry"];
var ans = "<ul>";
var item;
for (item of fruit) {
ans += "<li>" + item + " </li>";
}
ans += "</ul>";
document.write(ans);

// Push and Pop Operation
// var fruit = ["Apple", "Mengo", "Cherry"];

// element is push to end of the Array
// var a = fruit.push("Orange");
// document.getElementById("demo").innerHTML = fruit;

// element is pop to end of the Array
// var a = fruit.pop("Orange");
// document.getElementById("demo").innerHTML = fruit;

// decrese length when perfoming pop operation
// var len = fruit.length;
// document.getElementById("demo").innerHTML = len;
// when pop operation is perfomed then value of a is last element of the array
// document.getElementById("demo").innerHTML = a;
</script>
</body>

</html>

In This Program so many outputs is there so you can try to uncomment one method and check what is output and next uncomment second method.

I give you one output.