Question:

What is an array?

Answer:

An array is a collection of like objects, for example: Grades, lab scores, favorite web pages...

Question:

How do I declare an array?

Answer:

Old technique for declaring arrays:

    var grades = new Array();

    // array initialized with data
    var students = new Array("Brad", "Bob", "Linda", "Mary");
    var scores = new Array(100, 99, 98);
    

Current technique for declaring arrays:

    var grades = [];

    // array initialized with data
    var students = ["Brad", "Bob", "Linda", "Mary"];
    var scores = [100, 99, 98];
    

Question:

How do I work with arrays?

Answer:

Use the [] operator to access individual elements, one at a time, in an array. For example:

    // Assign values to grades array:
    grades[0] = 100;
    grades[1] = 99;

    // Assign "Marge" to the 4th array element (replacing "Mary"):
    students[3] = "Marge";
    
    // Assign the first student in the array to the variable currentStudent:
    var currentStudent = students[0];
    // currentStudent === "Brad"

    // Get the total of all scores:
    var totalPoints = scores[0] + scores[1] + scores[2];
    // totalPoints === 297
    

Note:

Always start counting from 0, so the first array element is [0], not [1],
and the last element in the students array is [3], not [4].

Question:

How do I know how many elements are in an array?

Answer:

Use the length property. For example:

    var arrSize = students.length;
    // arrSize === 4
    

Important:

The last element of an array is always 1 less than the array length!

    // The below code will not work:
    currentStudent = students[arrSize];
    // currentStudent === undefined

    // This code is OK:
    lastStudent = students[arrSize - 1];
    // lastStudent === "Marge"
    

Question:

Can I add to an array?

Answer:

Yes. For example:

    students[students.length] = "Michael";
    

Question:

What is the value of using an array?

Answer:

Arrays are a very powerful programming tool when combined with loops. Using a variable to access each element, and incrementing that variable for each iteration, you can cycle through the contents of an array of any size with just a few lines of code! For example:

    var idx = 0;
    ...
    currentStudent = students[idx];
    idx++;
    ...
    

Question:

What else can I do with arrays?

Answer:

There are many built-in methods for working with arrays. A reference can be found at:
w3Sschools - array object

Checkpoint

Questions 3.1

1. What is an array?
2. How do you declare an array - current method?
3. How do you access the 3rd element in an array?

Exercise 3.1

1. Declare 2 variables: total and arLen, and an array: grades
2. Assign 100 to the first element
3. Assign 98 to the second element
4. Assign 100 to the third element
5. Assign the sum of all grades to total
6. Assign the length of the grades array to arLen

web developer toolbox 3.1

Add a link to the JavaScript menu

• Open menu_js.html in your favorite editor
• (Create a new dt tag to) add a category: Arrays
• (Create a new a tag inside a new dd tag to) add a link: Arrays
• href should be: javascript/ar_arrays.html
• Place your new category and link above your existing Building Blocks category

Add a new JavaScript page

• In the javascript folder, open aaa_template.html in your favorite editor, and save-as: ar_arrays.html
• Below the comment "edit category name", change text from template to Arrays
• Below the comment "edit publish and update dates", change both dates to the current date

Update the new page

• Below the comment "edit company name, page title, and page description", change:
  • Company Name to: your name
  • Template to: Arrays
  • ...template to: Working with arrays
• Update the comments section:
  • <dt>Arrays</dt>
  • <dd>Use the [] operator to work with arrays</dd>
• Insert html inside the wxHtmlResults div:
  • <p id="p1"></p>
  • <p id="p2"></p>
  • <p id="p3"></p>
  • <p id="p4"></p>
  • <p id="p5"></p>

Add JavaScript below the line of asterisks following the text:
** BEGIN DEVELOPER JAVASCRIPT SECTION

• Complete the instructions for Exercise 3.1
• Assign the value of the 1st element of grades to the innerHTML of p1
• Assign the value of the 2nd element of grades to the innerHTML of p2
• Assign the value of the 3rd element of grades to the innerHTML of p3
• Assign the value of total to the innerHTML of p4
• Assign the value of arLen to the innerHTML of p5

Open menu_js.html in your browser and click on your new link

Click on the Run javascript button to test your code