HTML/Javascript Basics (Part 6) — Moderate Concepts – Arrays

Javascript Moderate Concepts — part 06 — Arrays

Intro to automation/portable javascripting

If you have read this far, and read all of the previous sections  up until this point,  you should be fairly well-versed in at least the basics of some of the things Javascript can do.

You should already understand  functions in their most basic form, as well as how to directly reference an element on a web page with Javascript.

Here’s an example of what I’m talking about:

<!--  our color changing element -->
<span id="colorChangingElement">Here's the Text that will turn blue when we call makeBlue()</span>

<br>

<!-- button to trigger the color change operation -->
<button onClick="javascript:makeBlue()">Change Text to Blue</button>

<!--  Javascript code  where the actual color changing operation is defined -->
<script type="text/javascript">

     function makeBlue() {

          /* lets set a variable  to represent the element with id  "colorChangingElement" */
           var  elementToChange = document.getElementById('colorChangingElement');

           elementToChange.style.color = "blue";   /* change it to blue */
     }

</script>

None of this should be a surprise to you, if it is, you’re going to only get more confused by reading anything beyond this point.

So, since we have established what you should know, we can start learning how we can use the same concepts in a more complicated way to do more amazing things with Javascript.

Obviously,  changing the text color of a little sentence  upon clicking a button probably doesn’t seem that amazing or useful.  The truth is, it’s not. But, if we perhaps  added a little bit of complexity to the whole scenario,  for example  if we didn’t just change a single  sentence blue, but instead changed a variety of different elements on the page blue instead,  now we are halfway to creating a website that allows visitors to select their own color theme at the click of a button.

So,  to get started we will need a web page with a bunch of elements — in order to cut back on the overall confusion I’ve  decided to make it as simple as possible, with a little bit more advanced CSS and HTML for learning and for looks.

I want to create a basic page with a bunch of little boxes on the left, and a big box in the middle.

First we setup the DIV containers:  Don’t worry too much about what all of this means for now,  the important thing is that the DIV elements below are one possible way to create  our  big box in the middle with the little boxes on the side.

And of course, we setup the CSS as well

<style>

#flexcanvas{
  width: 100%;
  height: 600px !important;
}
.rowParent, .columnParent{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.columnParent{
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flexChild{
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}




#LeftBox1{
 -webkit-box-flex: 0;
 -webkit-flex: 0 0 auto;
 -ms-flex: 0 0 auto;
 flex: 0 0 auto; height: 20%;
}


#LeftSection{
 -webkit-box-flex: 0;
 -webkit-flex: 0 0 auto;
 -ms-flex: 0 0 auto;
 flex: 0 0 auto; width: 20%;
}

</style>

Okay — So, now that we have everything setup , if we put it all into a single file we get a web page that looks like this:

So,  now what we’re going to do is set up a similar  Javascript function  just like the one at the beginning of this part  where clicking on a button will change the text blue. 

The only difference is that this time,  when we click the button, we’re going to change the text for three of the four boxes blue, and the change the fourth box green. 

Whats so amazing about that, you ask?  Well. We’re not going to just  use the same cut-and-dry method as earlier for the changing of the colors, instead we are going to setup an array containing the boxes we want to change, and then create a simple loop to change them all.

<br>

<button onClick="javascript:makeColorsChange()">Change Colors!</button>

<br><br>

<script type="text/javascript"> 
function makeColorsChange() {

    /* create an array  with multiple values -- in this case a list of IDs we want to change the colors of */
    var elementsIDs = [ "LeftBox1", "LeftBox2", "LeftBox3" ];
    
    for (var i=0; i<elementsIDs.length; i++) {     /* this is how you loop through each item in an array */

        
        var arrayItem = elementsIDs[i];    /*  this is set to LeftBox1 then LeftBox2 then LeftBox3 */
        var pageElement = document.getElementById(arrayItem);  /*  here we get the actual  page element matching the ID */
        pageElement.style.color = "blue";  /* and just as before  we set the color to blue */
    }
}
</script>

And thats it.  You can use arrays for any number of things, including a list of numbers, a list of strings,  or even a list of elements.  One of the most common uses for arrays is to create a list of objects, which we will cover in the next section.