Today’s Goals:

• Learn JavaScript’s setTimeOut method
• Create a “haunted” webpage with a hidden screaming ghost!

 Today’s featured website:

• http://heeeeeeeey.com/– Don’t forget to right click and select view source to check out the code. How many long does it take, in seconds, for the websites to switch between each other (you can find this answer in the code)? Who sings this song?

 JavaScript setTimeOut Method

• The setTimeOut method calls a function after a certain amount of time (in milliseconds). Let’s look at some examples.
• The last example was a clock- let’s look at the JavaScript date object and various methods that can be used to display time.

 Haunted webpage tutorial

• You are following this tutorial with some modifications. Follow the steps below carefully! Some code will be different.
  1. Open Notepad++ and start a new webpage (opening and closing html, head, title, and body tags). Save it as ghost.html
  2. Below the opening body tag add an opening div tag with a class of “ghost container” and then add a closing div tag.
  3. Inside the div tags, before the closing div tag, you’re going to add an image. The class will be ghost and the source will be http://www.thinkful.com/learn/static/guides/halloween-programming-tutorial/ghost_pic.png. It will look like what you see here but your src (source) will be different and you’re not using an alt tag.
  4. Add opening and closing style tags in your section. Add the CSS from here in between those tags. Also add to your style sheet body, an opening curly bracket, background-color: black; and a closing curly bracket to add a black background color to your webpage.
  5. Now, add some opening and closing script tags right before your closing body tag and add the JavaScript code from here in between the tags. Here is the link for your sound file http://www.thinkful.com/learn/static/guides/halloween-programming-tutorial/file.wav
  6. Preview your page in the browser. Hopefully you have a screaming ghost!
• Change it up! Change the amount of time it takes for the ghost to appear to something else (change 5000 to another number). Try also changing the amount of time it takes for it to disappear to something else (change 6000; this number should be bigger than whatever number you have for it to appear).
• Change the ghost image to something else- simply find another image, get its link, and change it from the above link.
• Try changing the ghost’s visibility. Maybe have it start out appearing on the page and then have it disappear and come back again. Change its visibility in the style sheet from hidden to visible and in the JavaScript switch up visible and hidden by changing one for the other.
• Add another sound by downloading a sound effect from this free library. Just download it, save it in the same place as your webpage, and change the source file in your JavaScript from ‘…/file.wav’ to the name of your new sound file.
• Some questions:
  1. Why did we put the ghost image in the HTML? What is keeping the image from being seen until we want it to?
  2. What is the getElementsByClassName JavaScript method similar to (something you’ve learned before in this class)? Why are we using it here?
  3. Why is there a z-index set to a high number for our ghost image?