JavaScript Primers #23

By Joe Burns

Use these to jump around or read it all


The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment


The Concept

Before we go on to a new topic, let's look at one more example of IF. It's important to feel very comfortable with this branching technique which lets you create more creative and more interactive programs.


The Script

<HTML>
<BODY>
<SCRIPT type="text/javascript">
   var0="An Apple A Day"
   var1="A Stitch in Time"
   var2="Bird in the Hand"
  now=new Date()
  num=(now.getSeconds() )%3

  document.write("Random Number: " 
    + num + "<br>")

  if (num == 0)
    {cliche=var0}
  if (num == 1)
    {cliche=var1}
  if (num == 2)
     {cliche=var2}
  document.write(cliche)
</SCRIPT>
<p>....as I always say.

</BODY>
</HTML>


The Script's Effect

My Home Page

...as I always say.

(Press Reload several times to see different random numbers and quotes.)


Deconstructing the Script

  • Let's start with the function this time around, huh?
    var0="Apple a Day";
    var1="A Stitch in Time";
    var2="Bird in the Hand";
     now=new Date()
     num=(now.getSeconds() )%3
     document.write("Random Number: "
       + num + "<br>")
    

    The document.write statement above should all be on one line.

  • You should be able to pretty much pick this one apart yourself. It's little more than the last two primers rolled into one script.

    We've created three variables, each assigned a value of a cliche. These variables are text or strings and thus are surrounded by quotes. Now that we have them...

  • Next the program gets a random number from the clock. The %3 denotes that a 0, 1, or 2 will be chosen. Notice that we DO NOT have the var num=num+1 in this one. It's not needed because we denoted our three variables starting with 0. If we started with 1, then we would need to.

    Does that make sense? We weren't trying to throw you a curve ball, we just wanted you to understand that you can use 0 if you want to. You don't always have to set the numbers to only pick one through whatever.

  • Finally, a document.write() statement is employed so that the number chosen will show up on the page.
  • Now let's look at the second section of the JavaScript:
    if (num == 0)
           {cliche=var0}
    if (num == 1)
           {cliche=var1}
    if (num == 2)
           {cliche=var2}
    document.write(cliche)
    

  • Remember that conditions in IF statements require == not just a single equal sign.

  • If the IF statement is True, a statement will be executed. Notice that this statement is surrounded with {brackets}. Of course, we know one of the statements will be true. We've set the script to only pick 0 through 2. It's going to choose one of them.
  • Please notice the If conditions are surrounded by (parentheses). The results are then surrounded by these fancy {brackets}.
  • Finally a document.write(cliche) will write out whichever saying was assigned to cliche!

What You Have Learned


Your Assignment

   

Modify this JavaScript program to display a random picture. Right click on pic1.gif, pic2.gif, and pic3.gif, above, to save them to your work area. Under the picture, the page should display "...describes my mood today."

Here's a possible answer to this assignment
(this will open a new window)


The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date