Logic in JavaScript | Still Plugging Away

In this video, we add the idea of making decisions in JavaScript code as to which statements to run; we also introduce concepts and syntax for using arrays:

The 'if' statement
Condition tests
The <script> element
JavaScript arrays
Array methods: push, pop, shift, unshift
The 'for' statement

Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.

Lesson 15: Logic in JavaScript:
'if', arrays, and 'for'

Click here for the video transcript

Hands on exercise

This exercise is primarily focused on using the 'if' statement and working with an array of images.

First, create a new page, scripts2.html. (Remember, 'html_skel' is available.)

In the <head> element, add a <script> element with the following contents
*   declare a variable, A_bold with a value of false
*   declare a variable, 'i', initialized to 0 (zero)
*   create an array named 'pics' with three entries:
*      "boardroom1.jpg", "computer_room.jpg", "conf_a.jpg"

In the <body> element, include:
*   A <p> element with an onclick event that:
      Checks if A_bold is false, and if so:
    + set the font weight to be bold and
    + set A_bold to be true
         otherwise,
    + set the font weight to be normal and
    + set A_bold to be false
    The element content should tell the user:
      Click this text to swap between bold and normal.

*   Another <p> element with content:
      "Click the image below to see the next picture"

*   An <img> element with src=boardroom1.jpg
    and an onclick event that:
      Checks if "i" is less than 2, and if so:
      + add 1 to "i"
           otherwise,
      + set "i" to 0
      then assign "this.src" to be pics[i].

After you have both event handlers working, add a link to scripts2.html from your index.html page.

Supplemental materials

A cumulative summary of the contents of the course so far: Click here

Email us if you would like additional information. We would love to see your comments and recommendations for our site.

Our privacy policy: we use cookies to keep track of where you are on the site, but we do not leave cookies on your site; we do not track your visits; we do not disseminate any information about you because we do not gather any information about you.

Lesson 15: JavaScript Logic and Arrays