Exercise: Introduction to Arrays

Arrays are one of the most commonly used methods for storing and accessing data. In this lesson we will learn how to extract data from arrays and use it to populate a web page.

  1. Download the lesson folder here. Unzip it and you should see two folders named js and roster. Drag the entire folder into your exercise folder.
  2. Open the roster folder and take a look. You should see 19 images (yes 19!) of some of the 2021 national champion Georgia Bulldogs. 
  3. Use your editor to open the roster.js file inside of the js folder. You should see two arrays: rosterNames and rosterPix. One lists names, the other lists image names. Let’s put those arrays to work!
  4. Create a new html file and save it into the folder as (what else?) roster.html. At the very bottom, just after </html>, connect roster.js. <script src=”js/roster.js”></script>
  5. For our first act, we are going to inject content from those arrays into a div tag. In order to do that, we need a div tag, so let’s add a new one with an id of “alsoran” just after the <body> tag.  <body> <ol id=”alsoRan”></div> </body>
  6. We will be working with both roster.js and roster.html simultaneously, so split your editor windows vertically and open roster.js on the right side.
  7. Create a variable named output and connect it to the alsoRan div tag with querySelector as shown below. let output = document.querySelector(‘#alsoRan’)
  8. Now use the innerHtml method to add Brock Bowers to #alsoRan as shown here. output.innerHTML = rosterNames[0] If everything is set up correctly, you should be able to preview candidates.html and summon Brock. FYI: you could have skipped the previous step of defining the variable named output by simply using the statement: document.querySelector(‘#alsoRan’).innerHTML.  Although this method would work, it’s not recommended because it’s pretty clunky and other coders might make fun of you :-).
  9. Now that we have added the first candidate in the array, it is easy to add any of the others. For example, change rosterNames[0] to rosterNames[1] and Channing Tindall will take the place of Brock Bowers. Or you could use the array.length property to insert the last player: output.innerHTML = rosterNames[rosterNames.length -1]
    The reason we subtracted one from rosterNames.length is because arrays are indexed starting at zero. There are 19 players but there is no rosterNames[19] player.
  10. Now that you know how to call the last player, Warren Brinson, use the same method to call Stetson Bennett.

Putting images to work

We have images and an array that lists those images but how do we get those images to appear? The answer is simple: concatenation. When you concatenate you essentially ‘stick’ variables to text and/or additional variables. It’s quite easy to do once you understand the process.

  1. Comment out the line that loads candidate names and add a new one below it that loads in the name of Brock Bowers’s picture. When you test it, the letters brock.jpg should appear. output.innerHTML = rosterPix[0]
  2. brock.jpg is not very useful without the appropriate image tags so let’s add them with concatenation, using this as your guide: output.innerHTML = “<img src =” + rosterPix[0] + “>”
  3. Did it work? Nope!  But why not? Might it have something to do with those images being inside of the roster folder?  Yes. To remedy that problem simply add roster/ after the = sign as in: output.innerHTML = “<img src = roster/” + rosterPix[0] + “>”

Now add the player’s name as well. output.innerHTML = rosterNames[0] +  “<img src = roster/” + rosterPix[0] + “>”

The Kitchen Sink!

Now that we know how to painstakingly add one name and image at a time to our div tag, it’s time to learn how to get all 19 of them to appear in a coherent fashion. For that task we are going to use a for loop. At this point, you may or may not be familiar with for loops, but they are a commonly used method to iterate through a set of data. In this case we will use a for loop to add each candidate’s name and picture to our div tag, as well as the additional html needed to make them appear, well, however we want them to appear!

As you can see, a for loop begins with the word ‘for’ followed by the structure of the loop. In this case our loop begins by creating a new variable named i with a value of 0.

  1. As you can see, a for loop begins with the word ‘for’ followed by the structure of the loop. In this case our loop begins by creating a new variable named i with a value of 0. for (var i = 0; i < rosterNames.length; i++) {}
  2. The next part, i < rosterNames.length, instructs the loop to continue to operate as long as i is less than the length of the rosterNames array.
  3. The last part, i++, increments the value of i by 1 each time that it loops.
    Hopefully, that explanation made sense!  Now it’s time to use the screen capture as a model to build your own loop. Ie. copy it!
  4. The secret sauce that we need for the output of our loop is output.innerHTML +=  rosterNames[i] + “<img src=roster/” + rosterPix[i] +
  5. As you can see we have changed  output.innerHTML = to   output.innerHTML+ =. The purpose of the + sign is to cumulatively add content to the div tag each time the loop iterates. Without the + sign, the = sign would simply replace that content each time that it iterates.
  6. We have also replaced the 0 in rosterNames[0] rosterPix[0] with the variable i. Each time the loop iterates, i increases by 1, which means that it will place each candidate’s name and picture into the div tag. So check it out.  Did it work? Ok, time for another step.
  7. Your job now is to create an ordered list of the players as in <ol> <li>. Hint. Among other things, you will need to change <div id=”alsoRan”> to
    <ol id=”alsoRan”> Good luck!
  8. Time to take things one step further. Try setting up your Javascript and CSS so that div tags around each candidate’s image and name, and images appear side by side rather than one after the other vertically.