TASK #1
TASK:
Learn what Javascript is.
HINT:
You will need to watch the video
below to get a good grasp on what Javascript allows
a web page to do.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #2
TASK:
Create a Javascript file.
HINT:
You will need to create a JS file in Aptana(File -> New From Template -> Javascript -> Blank File)
. Remember that you need to save the file with a descriptive
name(ie. "cookie.js").
CHECK UP:
Watch the video below to check that you completed the task.
TASK #3
TASK:
Link the JS file to your web page.
HINT:
You will need to add a script tag
to the head
of your web page. In the script tag, you will need to specify the name
of the JS file that you want to run.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #4
TASK:
Run an alert
function in the JS file when the web page opens.
HINT:
You will need to add an onload
command in the body
tag that specifies
which function will run in the JS file. To tell if it worked, you will need to add a call to alert that will print a
"Hello World!"
message.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #5
TASK:
Run a JS
function when the picture of the cookie is clicked
.
HINT:
You will need to add a call to "onclick"
to the img
tag that contains
the picture of the cookie that specifies the name
of the function that will be executed. Be sure to add an alert
message to the function that says "You clicked on the cookie!"
.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #6
TASK:
Store the number
of clicks in a variable called "cookies"
.
HINT:
In the JS file, you will need to create a global
variable called "num_cookies"
and initialize it to 0
. Print out the contents of the variable in the start function
using an alert message to make sure you completed everything correctly.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #7
TASK:
Increment a variable called "cookie"
when the picture of the cookie is clicked
.
HINT:
You will need to increment
the "num_cookies" variable when the cookie is clicked
by adding 1 to the variable in the function "cookie_click"
, which is run when the cookie is clicked on.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #8
TASK:
Print out the contents
of the "cookie" variable in the div box that says "0".
HINT:
You will need to create a start
function. Then add a setInterval
function to the start function that runs a
function called update
10 times a second. In the update function, use
getElementByID
to change the text in the element to the contents of the
cookie variable.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #9
TASK:
Make the picture of the cookie shrink
when clicked.
HINT:
Create two pictures
of the cookie,
one that is slightly lower
than the other. Add an addEventListener
to the start
function that will run a function called shrink
when the left mouse button is
pressed
on top of the image of the cookie. The shrink function will get the
image of the cookie and change its src
to the picture of the cookie we just
created.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #10
TASK:
Make the picture of the cookie grow
when un-clicked.
HINT:
Create a second addEventListener
that is run in the start function that will execute a function called grow
when
the left mouse button is depressed
on top of the cookie. The grow function will
get the image of the cookie and change its src
to the original picture.
CHECK UP:
Watch the video below to check that you completed the task.