Javascript: Arrays ATLS 3020 - Digital Media 2 Week 3 - Day 1 - - PowerPoint PPT Presentation

Javascript: Arrays

ATLS 3020 - Digital Media 2 Week 3 - Day 1

Review on Variables

var color = "red"; document.write("My favorite color is " + color); Javascript var color = "red"; document.write("My favorite color is " + color); color = "blue"; document.write("My favorite color is " + color); Javascript My favorite color is red Output My favorite color is red My favorite color is blue Output var color = "red"; color = "blue"; document.write("My favorite color is " + color); Javascript My favorite color is blue Output

Multiple ways to store data

Variables

var color = "red"; Javascript

Arrays

var colors = ["red", "blue", "green", "purple"]; Javascript

Exercise: Everyone create an array

Printing Arrays

Exercise: Print just the first color on the webpage

var colors = ["red", "blue", "green", "purple"]; Javascript var colors = ["red", "blue", "green", "purple"]; document.write(colors[0]); Javascript

Answer:

We access elements in the array by their index (position) Arrays start counting at the number 0. So the 1st element will have an index of 0.

colors[0]; Javascript

Printing Arrays

var colors = ["red", "blue", "green", "purple"]; document.write(colors[4]); Javascript

What will print with this code?

var colors = ["red", "blue", "green", "purple"]; var index = 1; document.write(colors[index]); Javascript undefined Output blue Output

Exercise

Create an array with 4 elements. Print all the values in the array. Switch the 1st and 4th elements in the array. Print the array again.

Removing Elements in Arrays

var colors = ["red","blue","green","purple"]; // colors = ["red","blue","green","purple"] colors.splice(0, 1); // colors = ["blue","green","purple"] Javascript

splice(index, count)

index = index (position) on the array count = how many elements to delete

We use the splice “method”.

• “Method” is a fancy word for

“function”

• A “function” is a mini program that

comes built-in into javascript. It does the work so we don’t have to.

Adding Elements in Arrays

var colors = ["red","blue","green","purple"]; // colors = ["red","blue","green","purple"] colors.push("yellow"); // colors = ["red","blue","green","purple","yellow"] Javascript

We can elements in 2 ways:

Method 1 (Preferred) We can use the “push” method. In parentheses we write the value (string or number) we want to add to the array. This adds the value to the end of the array.

var colors = ["red","blue","green","purple"]; // colors = ["red","blue","green","purple"] colors[4] = "yellow"; // colors = ["red","blue","green","purple","yellow"] Javascript

Method 2 (Shown in If we know the last position of the array, we class, but use sparingly) can directly add an element.

Selecting A Random Element

① Create a random number ② Multiply by the maximum value ③ Round the number

var colors = ["red","blue","green","purple"]; var random = Math.random(); random = random * 4; random = Math.floor(random); Javascript var colors = ["red","blue","green","purple"]; var random = Math.floor(Math.random() * 4); document.write(colors[random]); Javascript

How do we print a random element of the array?

Lab 3

Create an array that represents a deck of cards. Print the “deck”. Select the first “card”. Add the card to a second deck. Print the value of the card. Remove the card from the deck. Repeat 5 times. Print the first deck. Print the second deck.