Java Script Arrays

Java Script Arrays
An array is a special variable, which can hold more than one value at a
time.
If you have a list of items (a list of car names, for example), storing the
cars in single variables could look like this:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
However, what if you want to loop through the cars and find a specific
one? And what if you had not 3 cars, but 300?
Java Script Arrays
The solution is an array!
An array can hold many values under a single name, and you can
access the values by referring to an index number.
Java Script Arrays
JavaScript arrays are used to store multiple values in a single variable.
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
Java Script Arrays
Using the JavaScript Keyword new
The following example also creates an Array, and assigns values to it:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
JavaScript Array Methods
Converting Arrays to Strings
The JavaScript method toString() converts an array to a string of (comma separated)
array values.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>toString()</h2>
<p>The toString() method returns an array as a comma separated string:</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>
The join() method also joins all array elements into a string.
It behaves just like toString(), but in addition you can specify the
separator:
<!DOCTYPE html>
<html>
<body>
<h2>join()</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>
</body>
</html>
Popping and Pushing
When you work with arrays, it is easy to remove elements and add
new elements.
This is what popping and pushing is:
Popping items out of an array, or pushing items into an array.
The pop() method removes the last element from an array:
It returns the value that was "popped out":
<html>
<body>
<h2>pop()</h2>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.pop();
</script>
</body>
</html>
The push() method adds a new element to an array (at the end):
The push() method returns the new array length:
<!DOCTYPE html>
<html>
<body>
<h2>push()</h2>
<button onclick="myFunction()">Try it</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction() {
document.getElementById("demo2").innerHTML = fruits.push("Kiwi");
document.getElementById("demo1").innerHTML = fruits;}
</script>
</body>
</html>
Shifting is equivalent to popping, working on the first element instead
of the last.
The shift() method removes the first array element and "shifts" all
other elements to a lower index. <!DOCTYPE html>
<html>
The shift() method returns the string that <body>

<h2>shift()</h2>
<p id="demo1"></p>
was "shifted out": <p id="demo2"></p>

<p id="demo3"></p>
<script>
document.getElementById("demo2").innerHTML = fruits.shift();
</script>
</body>
</html>
The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:
The unshift() method returns the new array length.
<!DOCTYPE html>
<html> Note: The unshift() method
<body> does not work properly in
<h2>unshift()</h2> Internet Explorer 8 and
<p id="demo1"></p>
earlier, the values will be
<p id="demo2"></p>
inserted, but the return
<p id="demo3"></p>
<script>
value will be <undefined
document.getElementById("demo2").innerHTML = fruits.unshift("Lemon");
</script>
</body>
</html>
Changing Elements in Arrays
Array elements are accessed using their index number:
<html>
<body>
<p>Array elements are accessed using their index number:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
fruits[0] = "Kiwi";
</script>
</body>
</html>
Changing Elements in Arrays
The length property provides an easy way to append a new element
to an array:
<html>
<body>
<p>The length property provides an easy way to append new elements to an array without using the push() method.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = fruits;
fruits[fruits.length] = "Kiwi";
}
</script>
</body>
</html>
Deleting Elements
Since JavaScript arrays are objects, elements can be deleted by using
the JavaScript operator delete
<!DOCTYPE html>
<html>
<body>
<p>Deleting elements leaves undefined holes in an array.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];
</script>
</body>
</html>
Splicing an Array
The splice() method can be used to add new items to an array:
The first parameter (2) defines the position where new elements
should be added (spliced in).
The second parameter (0) defines how many elements should be
removed.
The rest of the parameters ("Lemon" , "Kiwi") define the new
elements to be added.
The splice() method returns an array with the deleted items:
Splicing an Array
<!DOCTYPE html>
<html>
<body>
<h2>splice()</h2>
<p>The splice() method adds new elements to an array, and returns an array with
the deleted elements (if any).</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
document.getElementById("demo1").innerHTML = "Original Array:<br> " + fruits;
var removed = fruits.splice(2, 2, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
document.getElementById("demo3").innerHTML = "Removed Items:<br> " +
removed;
}
</script>
</body>
</html>
Using splice() to Remove Elements
With clever parameter setting, you can use splice() to remove
elements without leaving "holes" in the array:
<!DOCTYPE html>
<html>
<body>
<h2>splice()</h2>
<p>The splice() methods can be used to remove array elements.</p>
<p id="demo"></p>
<script>
fruits.splice(0, 1);
}
</script>
</body>
</html>
Merging (Concatenating) Arrays
The concat() method creates a new array by merging (concatenating) existing arrays:
The concat() method does not change the existing arrays. It always returns a new array.
The concat() method can take any number of array arguments:
The concat() method can also take strings as arguments:
<html>
<body>
<h2>concat()</h2>
<p>The concat() method is used to merge (concatenate) arrays:</p>
<p id="demo"></p>
<script>
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
Slicing an Array
The slice() method slices out a piece of an array into a new array.
The slice() method creates a new array. It does not remove any
elements from the source array.
The slice() method can take two arguments like slice(1, 3).
If the end argument is omitted, like in the first examples, the slice()
method slices out the rest of the array.
Slicing an Array
<!DOCTYPE html>
<html>
<body>
<h2>slice()</h2>
<p>This example slices out a part of an array starting from array element 2 ("Lemon"):</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);
var citrus1 = fruits.slice(1,4);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus +"<br><br>"+ citrus1;
</script>
</body>
</html>
Arrays in practice
Now that you have learned about creating , accessing and using array
elements lets broaden our vision and make a small guess game.
We will create 6 dynamic buttons and give them id and store them in
an array
Then our javascript will randomly choose the array element using
random function and user will try to guess by clicking the button
Arrays in practise (Example)
On Clicking correct button
On Clicking wrong button

Code
<script>
function myFunction()
var max_elements=5;
{
<html> var btnArray = new Array();
if(btnArray[random_selection].id== this.id)
<style> var i=0; {
.myBtn{ var random_selection=0; alert("You Guessed the right button");
background-color: pink; while(i<max_elements){ random_selection=randomInteger(0,max_elements-1);
width: 100px; var btn = document.createElement("BUTTON"); document.getElementById("label1").innerHTML=btnArray[random_selection].id;
height: 100px; btn.innerHTML = i; }
else
} btn.id = i;
{
</style> btn.classList.add('myBtn');
alert("You Guessed the Wrong button");
<body> btn.addEventListener("click", myFunction);
}
<label> ID of Random Button Choosed by JS: </label> document.body.appendChild(btn);
}
<label id="label1"> </label> btnArray.push(btn);
<br> i++; function randomInteger(min, max) {
} return Math.floor(Math.random() * (max - min + 1)) + min;
random_selection=randomInteger(0,max_elements-1); // will }
return the number between 0 and maximum elements-1
document.getElementById("label1").innerHTML=btnArray[rand </script>
om_selection].id;
</body>
There will be similar lab task in next lab so do practice arrays before
next lab
Happy Coding

Java Script Arrays

Uploaded by

Document Information

Original Description:

Original Title

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

Java Script Arrays

Uploaded by

Copyright:

Available Formats

Java Script Arrays

var fruits = ["Banana", "Orange", "Apple", "Mango"];

The shift() method returns the string that <body>

was "shifted out": <p id="demo2"></p>

<h2>JavaScript Array Methods</h2>

<p>Deleting elements leaves undefined holes in an array.</p>

On Clicking wrong button

.myBtn{ var random_selection=0; alert("You Guessed the right button");

background-color: pink; while(i<max_elements){ random_selection=randomInteger(0,max_elements-1);

width: 100px; var btn = document.createElement("BUTTON"); document.getElementById("label1").innerHTML=btnArray[random_selection].id;

height: 100px; btn.innerHTML = i; }

<br> i++; function randomInteger(min, max) {

} return Math.floor(Math.random() * (max - min + 1)) + min;

You might also like