Wednesday, August 27, 2008

loopy


This week saw us trying out some JavaScript looping

Read through a little intro and try out the exercises I've uploaded here:

http://bathurst-tafe.nsw.edu.au/~pshanks/javascript/loops-exercises/

Image: 'loopy'
http://www.flickr.com/photos/86176561@N00/273326027

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

Sunday, August 10, 2008

JavaSkipped


suddenly realised that I've been very remiss about posting relevant JavaScript links here. Time to make amends.

First up, we've been working from a document I found on the interweb: a JavaScript tutorial. Thanks to the wonders of modern science this plain web page is now available as an open office document (37k) or a microsoft word doc (180k).

So far we've worked through the following sections:
1. Introduction

2. Embedding JavaScript into your HTML document

3. Variables

3.1. What are Variables?

3.2. Values of Variables

3.3. Data Type Conversion

4. Literals

4.1. Integers

4.2. Floating-point literals

4.3. Boolean literals

4.4. String literals

4.5. Escaping characters

5. Arrays

6. Operators

6.1. Selected assignment operators

6.2. Comparison operators

6.3. Selected Arithmetic Operators

6.4. Logical Operators

7. Using JavaScript Objects

8. Functions

8.1. Defining a Function

8.2. Calling a Function


We also applied ourselves to the following exercises:

Variables: open document (33k), word (101k); and functions (grab the contents of http://bathurst-tafe.nsw.edu.au/~pshanks/javascript/function-exercises/ and fix the html pages: functions1.html through functions6.html).


Image: 'Zion and Tracy jumping'
www.flickr.com/photos/81859405@N00/260323975