Resources

• //INIT: Using objects


• //PROCESS: String addition
• //PROCESS: Timeout and intervals
• //PROCESS: Functions: Definition, trigger, or reference?


• //OUTPUT: Animating other CSS properties

Saving your work

Use Save as... to save the empty template as " 3.05H-TheSkyAtNight-LastName.html " in your Computer Programming 12 directory.

The assignment

Use functions to animate objects around the screen.
Like the opening credits of my favourite astronomy show, The sky at night .

For example

The sky at night

Evaluation

• ___/10 INIT: including
  1. create an empty object
  2. use the value of an object's property to create different animation behaviours
  3. pass an object to a function as a parameter/argument
  4. use an object with multiple properties inside an animation
• ___/10 PROCESS: including
  1. create a function that accepts an object as an argument/parameter
  2. set a delay using setTimeout() or setInterval
  3. use an anonymous function inside setTimeout() or setInterval
  4. use string addition
  5. processes all eight planets
• ___/10 OUTPUT: including ANY FIVE of
  1. change the src of an element
  2. display information using .innerHTML
  3. animate using a custom duration
  4. position an object using % instead of px
  5. animate a change in the width of an element
  6. animate a fade in or fade out of an element
• ___/10 STYLE: including
  1. honour all previous //STYLE sections
  2. use descriptive variable names
  3. break up functions into separate ones for input, processing, and output
  4. uses descriptive comments to identify and describe each function,
     for example: //PROCESS: this function accepts distanceUp and animates the image up that number of pixels
  5. add spaces between mathematical operators,
     for example: var exampleVar = 3 + 4, not var exampleVar=3+4.