JavaScript Timers

Get the file:

  1. Open this file.
  2. Copy the contents into Notepad.
  3. Save your notepad as "timers_content.html" in your "javascript" folder.
  4. View the file in a Web browser.
  5. There are three main things to notice in the HTML: two span tags that hold content which we are going to change, and a button that will do something when we click it.

Create the External Script File

  1. In the <head> section of your HTML, add a script tag which references the JavaScript source file "timers_motion.js"
  2. Open a new instance of Notepad.
  3. Save your new notepad as "timers_content.js"
  4. Test that the link is correct by adding the line of code below into the JavaScript source file and testing the HTML page in the browser.
    5. test code for the javascript source file

Create a Countdown

  1. Remove your test alert. That thing is annoying.
  2. Goal: We want a countdown of 5 seconds that shows an explosion when it's over.
  3. This countdown should start when the page is done loading. So we need to use an onload event. Add the following attribute-value pair to the body tag in your HTML.
    4. code for the button onload event
  4. Notice that the onload event is a function call. It calls the function startCountdown, which we are about to define.
  5. Edit your JavaScript source file to include the following code.
    6. code for the countdown functionality
  6. This is a lot of code, so take it one line at a time to understand.
  7. The first two lines are handy variables we will need. Obviously one is the number of seconds we are counting down. The other will be clear very soon.
  8. The contents of the "startCountdown" function (which is run at the onload event) begins the timer and checks to see if a different number of seconds was specified in the function call.
  9. Notice the use of the built-in "setInterval" function. Use the W3Schools Web site to look up information about how to use the interval functions.
  10. The contents of the "countdown" function definition show the new countdown on the page, checks to see if the countdown is finished, and reduce the countdown.
  11. If the countdown is finished, it clears the interval and puts an image in the page instead of a number.
  12. This image doesn't exist yet. Let's go find a good one with Google Image Search. Remember to filter by labeled for reuse!

Create a Timed Response

  1. Goal: We want a response to occur after a random period of time from clicking the button on the page.
  2. This means our first line of code will be in the onclick event of the button, so make sure your HTML file is open in Notepad.
  3. Find the <input> tag which is the button. Add an onclick event using the attribute-value pair below:
    4. code for the button onclick event
  4. This code instructs the browser to run the function named "timedResponse" so let's go write that next. Add the code below to your JavaScript file.
    5. code for the timedResponse function
  5. The first line inside the function determines a random amount of time to wait up to five seconds.
  6. The next line is a message to be displayed after the wait time.
  7. The last line in the function uses the built-in function setTimeout actually makes the browser wait before adjusting the message on the page.
  8. Notice: the "setTimeout" function takes two parameters: the code to be run, and the time to wait.
  9. Find the setTimeout function at the W3Schools and verify that we are using it properly.
  10. Test the code in your browser.