Website Development I

Course Info Class Notes Resources Student Websites

Class No. 14:

JavaScript Control Structures

Today’s Goal

To program decision-making in JavaScript.


Class Resources

Web Programming book reading for THIS class

Web Programming book reading for NEXT class

Sample Program

Additional Reading


Preambles

Questions from our last class or the readings or work between classes?


Reviewing Variables from Last Class


source: Connolly & Hoar, Fundamentals of Web Development, fig. 8.5, p. 360


Reviewing Expression Evaluation from Last Class

Basic Concepts

Built-In Operator Precedence


source: Dean, Web Programming, p. 386, fig. 9.16


Making Dynamic Decisions

JavaScript Control Structures

Boolean expressions

Making decisions using if statements

Making decisions using switch statements

  switch ( n ) {
    case 1 :        // start here if n == 1
        // first code block goes here
        break ;     // stop here
    case 2 :        // start here if n == 2
        // second code block goes here
        break ;     // stop here

    case 3, 4, 5 :  // start here if n == 3 or 4 or 5
        // third code block goes here
        break ;     // stop here
    default :       // start here if no other case matches (this clause is optional)
        // fourth code block goes here
        break ;     // optional, but good practice
  }

Documenting code with // or /*...*/


Repeating Code Using a for Loop


source: Connolly & Hoar, Fundamentals of Web Development, fig. 8.11, p. 373

k++ is the same as k = k + 1

for ( var k = 0 ; k < 5 ; k++ ) {
  document.writeln( k + " " ) ;  // output: 0 1 2 3 4
}


Today’s Exercise

Preamble:  I don’t expect you to finish this exercise today.  Our next class will explore additional techniques that you can use to enhance this exercise, so we will continue working on it in that class.

Goal:  To create a dynamic table.

Procedure:

  1. Let’s start fresh with a brand new page for this exercise.  You should still use the HTML5 template that we’ve been using throughout this course, but this will give us a fresh start.
  2. We now want to generate page content dynamically.  A good first application involves creating a multiplication or other arithmetic table like the one in the resources for this class
    JavaScript Multiplication Table (Heines)
  3. Start by first writing a program that uses a simple program that prints the numbers from 0 to 9.  Your program might simply output:
    0 1 2 3 4 5 6 7 8 9
  4. Next, enhance your program to print 10 times those numbers on the next line.
    0 10 20 30 40 50 60 70 80 90
  5. Now put the basic <table> and </table> tags in standard HTML.
  6. Next, use a for loop to output 0-9 a single line of the desired table.  These numbers will be the first numbers to be multiplied.
    01234 56789
  7. Figure out how to add a blank first column so that when we have a column for the second number to be multiplied.
      01234 56789
  8. Use a second, embedded for loop to print the subsequent lines and the results of the multiplication.
      01234 56789
    0 00000 00000
    1 01234 56789
    2 02468 1012141618
  9. If you have time, use CSS to improve the formatting or your table.
       01234 56789
    0 00000 00000
    1 01234 56789
    2 02468 1012141618
  10. Be sure to view your page in the browser through the web server using an address in the format: 
    http://cssdweb.edu/username/filename.html


 


This is Class No. 14.  It was last modified on Saturday, October 21, 2023 at 4:38 PM.  Copyright © 2010-2024 by Jesse M. Heines.  All rights reserved, but may be freely copied or excerpted for educational purposes with credit to the author.