Web Design/Getting to know JavaScript events

Web Design → Getting to know JavaScript events

This page is part of the Web Design project.

OK: Sorry this isn't formatted yet or presented nicely - but it's late and I want to get away from the computer! Feel free to update it!

We're going to start our JavaScript experience by getting to know our browser window a bit better... before you know it, you'll be able to describe what:

window.alert('Hey there');

is all about, you'll be able to describe a few events that your web browser allows you to use, and you'll be able to make those annoying popup ads happen!

Getting Started

If you haven't already, it would be a good idea to follow through the excellent intro tutorial Intro to programming (including Part 2) either before starting this activity, or after the activity to help bring some of the ideas together.

You may also want to print out the Javascript Cheat Sheet - but don't be overwhelmed by the amount of info that's been squashed onto this one sheet... grab your highlighter and highlight the following bits to start with:

Under 'Window' (at the bottom left of the page), highlight 'alert' and 'open'
the entire "Event Handlers" section.

Now simply:

choose an HTML file that you've been working on lately,
take a copy of it (and it's stylesheet if it has one),
and open the HTML file up in your favourite editor.

You're ready to go!

Your first Javascript

Pick a paragraph of your choice and modify the opening tag so it looks like this:

  <p onclick="window.alert('Hi there');">

Leave the rest of your paragraph (the text and the closing tag) as is. View your page and click on that paragraph. Simple?

You may put the above javascript statement on other attributes of the <p> (paragraph) tag. Try putting the same statement on "onkeydown" or for that matter "onmousedown". So your paragraph html will look like.

  <p onmousedown="window.alert('Hi there');">

Now the trigger will occur when the mouse button is pressed down. Just continue experimenting.

For your information you may put the same effect on any object (button, hyperlink) on the page. Here goes another (though slightly complicated) example (from working application code) for you to understand.

<a href="Javascript:onClick=clearstuff()"><img src="../../images/resetstuff.jpg" border="0"></a>

Firstly we have the html tag for link <a href... that provides a link over the image resetstuff.jpg, it programs the browser to call the js method clearstuff() when the image is clicked.

This is a simple way of creating you custom buttons.

Now here you can have the same action by not using the <a href> tag. Try finding out how (Hint look at the properties of img tag).

A good way is to use a html editor. It will show the available attributes on a tag automatically in a drop down as you type. It's an easier way to code. For learning though you may still prefer to use a text editor.

(Re)-read over how-to-build-website's explanation of this window.alert statement before going any further... and if you're in class, make sure you talk about what exactly is going on!

Activities

Modify your code so that it says 'Hi [yourname]' (using your own name) and test it!
Use your cheat sheet to see if you can add some similar code to another paragraph, but this time modify the code so that you don't need to click on the paragraph, but can simply roll the mouse over it.
Have a go at modifying your page so that when it first loads, it pops a message saying "Welcome to my site!"
Lastly, using your cheat sheet, see if you can modify your page so that when you click on a certain paragraph, it closes your window!

Opening a new browser window

Your first challenge is to see if you can modify your page so that when you click on a paragraph, it will open a new browser window!

Activities

Once you've got that working, try the following:

Modify your code so that a popup window displays as soon as your page is loaded (Hint: you'll need to use the 'onload' event on your body element).
See if you can find out a bit more about the window.open method so that you can set the size of your window and make sure it looks like a real ad by getting rid of all the guff (menus, address bar etc). Hint: You'll need to do a bit of research to find out more, try using google!
Modify your code so that when your page loads, three small windows open up at different points on the screen, all without toolbars etc.

Now you know how to create annoying popup ads!