Javascript 3: User-Defined Functions; Responding to Events

JavaScript 3: User-Defined Functions; Responding to Events

User Defined Functions

We've already seen some predefined functions, eg. window.alert(), document.write(). A programmer can also define functions on his own.

function sayittwice(message)

{

document.write(message);

document.write("<br>");

document.write(message);

}

</script>

Put the function in the HEAD section so that it will be defined before it is encountered. In the BODY section, we can say:

food = prompt("What is your favorite food?");

sayittwice(food);

</script>

Another example:

function makebold(saying)

{

document.write("<B>”);

document.write(saying);

document.write("</B”);

document.write("<BR>”);

}

word = prompt("Enter a word or phrase");

makebold(word);

</script>

Reed's book has a nice example using OldMacDonald. - show

Responding to Events

An event is a user action. An event handler is javascript code which responds to the user action.

Mouse events - the user moves the mouse
onMouseOver event handler - the user moves the mouse over a particular part of the webpage. First the programmer has to define the part of the webpage to be monitored. This can be done by using the HTML

pair of tags. If the user has moved the mouse there, some property of the window can be changed.

<A HREF="#"

onMouseOver = "document.bgColor='red'; return true"

Watch me!

</A>

In this example, the background color of the page changes when the user moves the mouse over the link labeled "Watch me!" Several comments:

The # can be used in place of a URL. It means that when you click on the link, it will stay here and jump to another place. The reason you need the link altogether is to be able to "catch" the mouse moving over the words. You can't catch a mouse moving over plain text on the web page, but you can catch the even of the mouse moving over a link, or moving off a link. In this case, we want to do something when the mouse moves over the link, but we don't really want the link to make a jump to someplace else.
If the event happens (the user moves the mouse over the link), true is returned.
Two level of quotes are needed. Instead of using the same type of quotes twice, a second type of quote is used.

onMouseOut - the user moves the mouse away from the referenced place on the webpage. Some property of the webpage is changed when this occurs. In the above example, the page background color will stay red, after the user moves the mouse. If the programmer doesn't want this, the event handler onMouseOut can be used:

<A HREF="#"

onMouseOver="document.bgColor='red'; return true"

onMouseOut ="document.bgColor='white'; return true"

Watch me!

</A>

Now the color of the webpage will return to white after the user moves the mouse off the link.

button events - the user clicks a displayed button. An event handler can carry out actions based upon the status of the button object. First you have to place a button on the page by using an HTML FORM. This HTML will put a button on the page, but nothing will happen if you click on it:

<FORM>

</FORM>

Using the same form, we can add an action to be performed when the button is pressed by using the JavaScript onClick event handler:

<FORM>

</FORM>

Notice the nested quotes.

What happened to the <SCRIPT> and </SCRIPT> tags?

Many students find this very confusing:

The SCRIPT tags are needed to "set off" the JavaScript from the text of the Web page - basically to tell the browser that what appears between these tags is not text to be displayed on the page, but rather JavaScript instructions. When JavaScript instructions are embedded within HTML tags (such as the onMouseOver within the <A> tag or onClick with an <INPUT> tag, the browser already "knows" that this is not text and there is no need for a <SCRIPT> tag.

Mention Exam date – 2 lectures / Syllabus / Calendar – review instead of lab – come with questions/topics to review. Lab will be the following week.

cis10_10