JavaScript Array

Ad Code

JavaScript Array

RK Tutorials September 28, 2023

 


JavaScript Array:
An array is an object that can be store a collection of items or elements and used to store the multiple values in one variable. It can be int, char, float ..etc. in type.
An array can be declared in two types either in Array literal or Array constructor.

Array literal

Here we declared values separated by a comma and enclosed in square brackets.

Syntax

var array-name =[element 0, element1, element 2, ......element N];
Example:
var arr1 = ["C", "Java", "PHP","Python"];
var arr2 = [1, 2, 3, 4];


Example of Array literal

//Array literal
<html>
<script>
var i;
var arr = [1, 2, 3, 4,5];
for(i=0;i<5;i++)
{
    document.write(arr[i]+"&nbsp;");
}
</script>
</html>


Output
1 2 3 4 5

Array constructor

In array constructor we can use the 'new' keyword to initialize an array.

Syntax


var array_name = new Array();
var array_name = new Array(element1, element2,...... elementN);
Example:
var skillpunit = new Array(1, 2, 3, 4);



Example of Array constructor


//Array constructor
<html>
<script>
var i;
var arr= new Array(5);
for(i=0;i<5;i++)
{
    arr[i]=parseInt(prompt("Enter Elements"));
}
for(i=0;i<5;i++)
{
    document.write(arr[i]+"&nbsp;");
}
</script>
</html>


JavaScript Array push(), pop() Methods:

JavaScript Array push()

Push method is used to push one or more values into an array.

Syntax

array.push(element1[, ...[, elementN]])

Example

<html>  
<script>   
    var arrayList = ["HTML", " CSS", "JAVASCRIPT"];   
    document.write("<b> Array: </b>" + arrayList + "<br>");  
    
    function pushFunction() {   
      //add new element in array        
      arrayList.push(" PHP", " MYSQL");   
      //return the array with new values  
      document.getElementById("result").innerHTML = "<b> Array after 

adding new elements: </b> </br>" + arrayList;  
    }   
</script>   
  
<body>  
<h3> Click the button to add three more elements to the array </h3>  
<button onclick="pushFunction()"> Push Elements </button>  
<h4 id="result">  
</body>     
</html>


Ouput

Array: HTML, CSS,JAVASCRIPT
Click the button to add three more elements to the array

Array after adding new elements:
HTML, CSS,JAVASCRIPT, PHP, MYSQL

Example 2: Take input from user

<html>  
<center>  
<h3 style="color:green"> push() method </h3>  
<script>   
    var seriesList = ["HTML", " CSS", "JAVASCRIPT"];   
    document.write("<b>Array: </b> <br>" + seriesList + "<br>");  
    
    function addObject() {   
    var movie = document.getElementById("mv").value;  
      //add new elementin list array        
      seriesList.push(movie);   
      document.getElementById("result").innerHTML = "<b> Array after 

adding new elements:</b> <br>" + seriesList;  
    }   
</script>   
  
<body>  
<p> Enter Valu and click the button to add it to the array </p>  
<b> Enter Value: </b>   
<input type="text" id="mv">   
<button type=submit onclick="addObject()"> Add Elements </button>  
<h4 id="result"> </h4>  
</body>     
</center>  
</html>


JavaScript Array pop()

Pop method is used to remove the last element of an array, and returns that element.

Example

<html>
<body>

<p>Click the button to remove the last element from the array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var arr = ["HTML", " CSS", "JAVASCRIPT"," PHP"," MySql"];
document.getElementById("demo").innerHTML = arr;

function myFunction() {
  arr.pop();
  document.getElementById("demo").innerHTML = arr;
}
</script>

</body>
</html>



Create a Simple Slideshow using JavaScript Array

Slideshows are common and essential part on sites that have lots of images that need to be displayed for our visitors.

Example

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Slideshow</title>
</head>

<body>
<div>
 <img id="myimage" />
</div>

<script>
    var imgArray = [
        'images/image1.jpg',  //Image URL
        'images/image2.jpg',
        'images/image3.jpg'],
        c = 0;               //Counter
        imgDuration = 5000;

    function slideShow() {
        document.getElementById('myimage').src = imgArray[c];
        c++;
        if (c == imgArray.length) { c = 0; }
        setTimeout("slideShow()", imgDuration);
    }
    slideShow();
</script>

</body>
</html>


In above example the only HTML code needed is <div> containing one <img /> (image) element. Here there is not any CSS code but you would like to add additional styles to the div element and/or image element, you could do so.
Under script the first few lines are used to set up our variables.

var imgArray = [
        'images/image1.jpg',
        'images/image2.jpg',
        'images/image3.jpg'],
        curIndex = 0;
        imgDuration = 5000;


imgArray is an array used to keep all of the image source information. The c variable is used to keep track of the current image being displayed in our show. imgDuration is used to set the amount of time (in milliseconds) the image will be displayed before displaying the next image.

function slideShow() {
        document.getElementById('image1').src = imgArray[curIndex];
        curIndex++;
        if (curIndex == imgArray.length) { curIndex = 0; }
        setTimeout("slideShow()", imgDuration);
    }


In Function called slideShow() the first line is used to assign the image element a new image source. As the c variable changes, the image element will display a different image. After the image source is assigned, the c variable is incremented by one. Once the c variable equals to the total number of images in our array, the variable is assigned a value of '0' so that the first image is displayed once again. The last line in the function creates a sort of 'loop' for our function.




RK Tutorials

Posted by RK Tutorials

Post a Comment

0 Comments

Ad Code