Monitor

Lesson 15: JavaScript Logic and Arrays

 

Links

Your home page

Creating Websites home

Beginnings
   Introduction to the Web
   Introducing HTML
   Marking up text
   Setting Up
   FTP and FileZilla
   Links and anchors
   Getting some style

Intermediate topics
   Style sheets
   Testing and debugging
   Lists
   Images and maps
   Audio and video
   Intro to JavaScript
   The DOM and scripting
   Logic and Arrays
   Functions and document.write
   Forms and INPUT
   Other controls
   Misc. topics
   Cookies
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends

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:

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

 

 Lesson navigation 

 

 

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