The event handler starts the same with the HTML attribute onClick="... Then the variable for saving the initial background colour must be declared: var currentBack; with a semicolon terminating the statement. Then comes the colour changes, each with semicolons at the end of the statement. Next the initial colour is restored with document.bgColor = curentBack. A semicolon is needed after this too. The last statement is the alert message to window, as before. Putting it all together gives:

    Note to implementer: the statement below must be on one line.

    <INPUT type=button value="Click to order" onClick="var currentBack; 
    currentBack = document.bgColor; document.bgColor = 'blue'; 
    document.bgColor = 'coral'; document.bgColor = 'blue';
    window.alert('Purchase confirmed. Thank you')">
      

Note that if you were to try this on a fast PCs you might find that the flashing is not noticeable.

The HTML/JavaScript code is given below.

    <FORM<
    <INPUT type=button value="Click to order" onClick="window.alert('Purchase confirmed. Thank you'); this.value = '[purchase confirmed]'"<
    </FORM<
      

The JavaScript works as before: when the user clicks on the button a dialogue box is displayed. Then the label is changed using the assignment this.value = '[purchase confirmed]' (which is, of course, preceded by a semicolon).

But, what will happen if the user were to click on the newly labelled button? Exactly the same thing would happen. The handling of the previous onClick event has not been remembered — events are not remembered, they continuously happen — and so the behaviour of this little system remains the same. Later we will see how an event can, in effect, be remembered and that memory used to affect behaviour.

The first part of the tag and the text that immediately precedes the closing </A> tag are standard HTML and together set up a link to Apple.co.uk with the specific URL. What follows the value for the HREF attribute, the URL, is an attribute that specifies in JavaScript what reaction there is to be to an event that is expected to happen with this HTML tag. The expected event is that the user will place the mouse pointer over the anchor; this is denoted by the attribute onMouseOver. The value of the attribute (i.e. what follows the = symbol) is the JavaScript to 'handle' the event. The JavaScript simply changes the status area of the browser's border. So, the combination of the onMouseOver attribute corresponding to the mouse-over event, and the JavaScript to change the window status means that when the mouse pointer is placed on this link, the message string is displayed in the browser's status bar.

The JavaScript code is given below.

    <SCRIPT>var origBgCol</SCRIPT>

    <A HREF = "http://www.most-expensive-sellers.com" 
      onMouseOver="origBgCol=document.bgColor; 
      document.bgColor = 'coral';return false"
      onMouseOut="document.bgColor=origBgCol"<
    Come to our cheap on-line store<A>
      

The most important aspect of this code is the use of the origBgCol variable to remember the original background colour. The assignment takes place as part of handling mouse-over event, while the variable is declared outside the event handler. Alternatively, the assignment can also be done outside the event handler, thus:

    <SCRIPT>
    var origBgCol
    origBgCol=document.bgColor
    </SCRIPT>

    <A HREF = "http://www.most-expensive-sellers.com" 
      onMouseOver="document.bgColor = 'coral';return false"
      onMouseOut="document.bgColor=origBgCol">
    Come to our cheap on-line store</A>
      

For the rollover style of interaction you need to swap the button image with the highlighted image when the mouse-over event is triggered, and swap it back when the mouse-out event takes place.

To refer to the image object whose image is to be swapped you need to use the this keyword.

Your code might look something like the one below. Note how this is used to denote the image object within whose tag the JavaScript appears.

    <IMG VSPACE=2 SRC="prod-cat-button.gif" 
      onMouseOver="this.src='prod-cat-button-sel.gif'" 
      onMouseOut="this.src='prod-cat-button.gif'" 
      ALT="Check out the full Catalogue with details of 
        special orders.">

    <BR>

    <IMG VSPACE=2 SRC="order-status-button.gif" 
      onMouseOver="this.src='order-status-button-sel.gif'" 
      onMouseOut="this.src='order-status-button.gif'" 
      ALT="If you have placed an order that has not been 
        delivered, look here for info.">

    <BR>

    <IMG VSPACE=2 SRC="message-button.gif" 
      onMouseOver="this.src='message-button-sel.gif'" 
      onMouseOut="this.src='message-button.gif'" 
      ALT="Submit a form requesting sales information or
       for someone to call you.">

    <BR>

    <IMG VSPACE=2 SRC="online-shop-button.gif" 
      onMouseOver="this.src='online-shop-button-sel.gif'" 
      onMouseOut="this.src='online-shop-button.gif'" 
      ALT="Registered customers can browse products and 
        prices and place orders online.">

    <BR>

    <IMG VSPACE=2 SRC="retailers-button.gif" 
      onMouseOver="this.src='retailers-button-sel.gif'" 
      onMouseOut="this.src='retailers-button.gif'" 
      ALT="Find out about shops near you where you can 
        examine and buy our products.">

    <BR>

    <IMG VSPACE=2 SRC="contacts-button.gif" 
      onMouseOver="this.src='contacts-button-sel.gif'" 
      onMouseOut="this.src='contacts-button.gif'" 
      ALT="Names, postal addresses, telephone and fax 
        numbers for you to contact all our departments.">

    <BR>
      

<SCRIPT>
var member
member = window.confirm('Please confirm you are a member of the shopping club')
if (member)
window.alert('Welcome to the Shopping Club')
else
window.alert('Sorry you cannot shop here unless you are a member of Shopping Club')
</SCRIPT>
      

The following JavaScript achieves the desired behaviour. Notice the form of the if ... else statement and how code blocks are used.

    <SCRIPT>

    var member

    member = window.confirm('Please confirm you are a member of the Italian food club')
    if (member) {
    //next are JavaScript document writes to include a table
    //of items and prices
    document.write('<TABLE BORDER=1>')
    document.write('<CAPTION><B>Quick Meals from Italy Delivered To Your Door</B></CAPTION>')
    document.write('<TR>')
    document.write('<TD>Pizza Margherita</TD><TD>21,000 Lire</TD>')
    document.write('</TR>')
    document.write('<TR>')
    document.write('<TD>Risotto Milanese</TD><TD>18,500 Lire</TD>')
    document.write('</TR>')
    document.write('<TR>')
    document.write('<TD>Tortellini con funghi</TD><TD>24,000 Lire</TD>')
    document.write('</TR>')
    document.write('</TABLE>')
    }
    else {
    window.alert('Sorry, please go back to the membership enrolment page')
    //next is JavaScript to go back to a membership form
    document.write('<A href="http://www.food-shopping.co.it/registration/register.htm">')
    document.write('Registration form</A>')
    }
    </SCRIPT>
      

  if (navigator.appName.substr(0,8) == 'Microsof')
  window.alert('This is a Microsoft browser')
  if (navigator.appName.substr(0,8) == 'Netscape')
  window.alert('This is a Netscape browser')
      

Clicking on Input Buttons

    <A HREF = "http://www.most-expensive-sellers.com" 
      onClick = "status='Enjoy your shopping!';return false">
    Come to our cheap on-line store</A>
      

Your code might look something like:

    <IMG SRC="right.gif" onMouseOver="window.alert('Warning: over image')" ALT="right image example">
      

Your code might look something like:

    <IMG SRC="left.gif" ALT="Left image" onMouseOver='window.status="This image contains the letters L e f t";' onMouseOut='window.status="now outside image";' >
      

Your code might look something like:

   <IMG SRC="left.gif" onMouseOver="this.src='right.gif'" onMouseOut="this.src='left.gif'" ALT="swapping image example">
      

The code is changed merely by adding a variable to remember that the originally labelled button was clicked and an if statement to test for this and avoid doing anything if the button has previously been clicked.

  <FORM>
  <SCRIPT>var stillToConfirm = true</SCRIPT>
  <INPUT type=button value="Click to order" 
    onClick="if (stillToConfirm){window.alert('Purchase confirmed. Thank you');
    this.value = '[purchase confirmed]';stillToConfirm = false}">
  </FORM>
      

An event is something whose occurrence you can capture by providing JavaScript code to handle it in the object where the event takes place. When you capture it, you can execute JavaScript to perform some action.

This statement is true. The event occurs whether there is a handler or not. If there is a handler the code is executed. A separate event occurs when the user releases the mouse button.

No, most events are not captured by JavaScript code. The browser will handle events in a default manner if no code is written. Indeed most events are simply ignored by the browser.

You return true when you do not want the browser to show the anchor's link URL in the window's status area.

The keyword is this.

You have to arrange that the graphics representing the normal button and the selected button replace each other as the mouse pointer is moved over the button (or anchor) and then away again. This means you have to update the src property of the image object to be assigned one graphic or another.

The browser object is referred to by the variable navigator.

This statement is false. There are many HTML tags that can have event handlers for the mouseOver event. <p>, <div>, and <h1> and a few other marks.

setTimeout is not an event. It is merely a function which will cause an event to happen. Other functions and actions can cause events to happen. For instance, if a function loads a new document into the current window, this will cause an onLoad event.

This statement is true. An HTML mark such as <a> represents an object. In fact, there is a very close relation between HTML marks and JavaScript objects