Monday, August 11, 2008

making choices


Inclement whether prevents my attendance in person, but I'm with you in (e)spirit.

Today we're looking at conditional statements in JavaScript (if/then/else). These are described in the handout, page 14. Unfortunately that's not quite the whole story - you really need to know a bit about multiple if statements (and their clever cousin, the switch statement). See the web cheat sheet for a fine explanation/demonstration.

If you're keen to become a real JavaScript geek you might also want to know about the 'conditional operator' described about half way down this page by the Washington center for environmental visualisation(?).

Fully read up?

Try these interesting exercises (in groups, or as a hard old loner)...

  1. Open http://bathurst-tafe.nsw.edu.au/~pshanksjavascript/conditionals-exercises/conditionals1.html in your favourite editor.
    In this exercise, you'll write a function called guessAge() that, oddly enough, lets the user guess your age. The user's guess is in document.ageForm.ageGuess.value. The guessAge() function should pop up an alert box telling the user whether or not s/he guessed correctly.

  2. Open http://bathurst-tafe.nsw.edu.au/~pshanksjavascript/conditionals-exercises/conditionals2.html in your favourite editor. You can copy your completed conditionals1.html to conditionals2.html if you'd like to edit your existing work rather than starting from scratch.
    In this exercise, you'll modify your age guesser from exercise #1 to provide some additional feedback to the user. The guessAge() function's alert box should let the user know if s/he guessed correctly, if you're younger than the guess, or if you're older than the guess.

  3. Open http://bathurst-tafe.nsw.edu.au/~pshanksjavascript/conditionals-exercises/conditionals3.html in your favourite editor.
    Everyone knows that flowers need water to grow. This HTML page has a watering can and a flower. This particular flower needs to be watered three times before it can grow. When the user clicks on the watering can, it should change to the image shower.jpg. After one second, the watering can should stop watering the flower. (We provide this code for you; read the comments in the program carefully.) The third time the user waters the flower, the flower should bloom. (There's an image of a bloomed flower in flower.jpg.)


Image: '"It is our choices. . . that+show+what+we+are,++far+more+than+our+abilities."'
www.flickr.com/photos/12596956@N06/2699207704

No comments: