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 Javascript Output var color = "red"; My favorite color is red document.write("My favorite color is " + color); Javascript Output var color = "red"; My favorite color is red document.write("My favorite color is " + color); My favorite color is blue color = "blue"; document.write("My favorite color is " + color); Javascript Output var color = "red"; My favorite color is blue color = "blue"; document.write("My favorite color is " + color);

Multiple ways to store data Variables Arrays Javascript Javascript var color = "red"; var colors = ["red", "blue", "green", "purple"]; Exercise : Everyone create an array

Printing Arrays Javascript var colors = ["red", "blue", "green", "purple"]; Exercise : Print just the first color on the webpage Javascript Answer: var colors = ["red", "blue", "green", "purple"]; document.write(colors[0]); We access elements in the array by their index (position) Javascript Arrays start counting at the number 0. So the 1st element colors[0]; will have an index of 0.

Printing Arrays What will print with this code? Javascript Output var colors = ["red", "blue", "green", "purple"]; undefined document.write(colors[4]); Javascript Output var colors = ["red", "blue", "green", "purple"]; blue var index = 1; document.write(colors[index]);

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 We use the splice “method”. splice(index, count) - “Method” is a fancy word for index = index (position) on the array count = how many elements to delete “function” - A “function” is a mini program that comes built-in into javascript. It does the work so we don’t have to. Javascript var colors = ["red","blue","green","purple"]; // colors = ["red","blue","green","purple"] colors.splice(0, 1); // colors = ["blue","green","purple"]

Adding Elements in Arrays 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. Javascript var colors = ["red","blue","green","purple"]; // colors = ["red","blue","green","purple"] colors.push("yellow"); // colors = ["red","blue","green","purple","yellow"] Method 2 (Shown in If we know the last position of the array, we class, but use sparingly) can directly add an element. Javascript var colors = ["red","blue","green","purple"]; // colors = ["red","blue","green","purple"] colors[4] = "yellow"; // colors = ["red","blue","green","purple","yellow"]

Selecting A Random Element How do we print a random element of the array? Javascript Create a random number ① var colors = ["red","blue","green","purple"]; Multiply by the maximum value var random = Math.random(); ② random = random * 4; Round the number ③ random = Math.floor(random); Javascript var colors = ["red","blue","green","purple"]; var random = Math.floor(Math.random() * 4); document.write(colors[random]);

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.