Exercise Monday

Goal: In the Arrays video, we learned:

  • Arrays can contain numbers, strings, variables, expressions and other arrays
  • Arrays have methods like pop(), reverse(), and push()
  • How to access an element from an array

Familiarize yourself with arrays by completing the exercises below. First, we'll practice creating and manipulating arrays in the JavaScript console, then we'll move on to implementing them into a small project using the HTML and jQuery concepts we learned last week.

Warm Up


  • What is a pointer? When might we see one when working with JavaScript arrays?
  • How can we use square bracket notation to isolate a single element in an array? What does this notation look like?
  • What is the difference between pop() and push()?
  • What types of objects can be placed into a JavaScript array?

Code


Array Practice in the Console

Play around with arrays of your own by completing each of the following in the JavaScript console:

  • Make an array of your siblings' names or your favorite movie characters' names.
  • Make an array of your parents' names.
  • Combine these two arrays using concat().
  • Add your pets' names using push().
  • Reverse the order of the array.
  • Access one of your parents' names using the square bracket notation.
  • Update the name of one of your parents using the index and square bracket notation (see cheat sheet in the JavaScript arrays lesson for an example).
  • Check out methods from the MDN (stick to the accessor and mutator methods sections). Try at least five of them.

Favorite Things Webpage

When you're comfortable using arrays in the console, move on to implementing them into a full project:

  • Build a page with a form containing input fields where users may enter several of their favorite things.
  • Then, write code that gathers each of these form input values and places them into one array.
  • After this is done, use your site to practice targeting and moving elements between arrays:
    • Use square bracket notation to access the second, first, and third elements of the original array of favorite things.
    • Then, use push() to add only these elements to a brand new array.
    • Finally, display this new array in your page's HTML as list items in a <ul> tag.