1. Introduce concept of objects. Objects have characteristics and behavior (properties and methods). For example the characteristics of a "car object" might be its color, year, make. Behavior associated with a "car object" might be "drive", "park", "brake".

We will work mainly with two objects: window and document.
window refers to the entire browser window; document to the part in which the document is displayed.

Lab 8 introduces properties and methods of window and document.

  1. Static write to a window, called a window object - no interaction

window.document.write("This is just a statement");

This statement can be interpreted as saying that the programmer wants to write a string, "This is just a statement", as in a document (also called an object in javascript), to the window. Inside javascript:

<SCRIPT LANGUAGE = "JavaScript">

<!-- Conceal from non-Javascript Browsers

window.document.write("This is just a statement");

//-->

</SCRIPT>

methods always carry out some action or change some property of an object.

  1. The keyword window for the window object can be assumed - rewrite above as:

document.write("This is just a statement");

Can change the color of parts of the document using another method. For example, change the color of the background

document.bgColor = color;

What colors can we use? The standard colors are white, yellow, orange, pink, magenta, red, green, cyan, blue, lightGray, darkGray, gray and black. So setting color to any of the strings above would produce a new background color.

  1. The confirm() method - programmer can ask the user a question. The user must then click either the OK button or the Cancel button. This is an interactive method, since to continue on the webpage the user must respond.

confirm("Do you like javascript?");

Now the user will click either an OK button or a Cancel button. What happens to their response? The programmer must store it in a variable:

var reply = confirm("Do you like javascript?");

If the user clicks OK, reply is set to true. If the user clicks Cancel, the reply is set to false. The programmer can use this data to write something to the webpage:

document.write("Your answer was" + reply );

Note how a string, "Your ..." was combined with the response from the confirm button.

  1. More on the prompt() method. The prompt() method also asks a question, but this time the user is asked for a text response and provided with some buttons. The examples we considered last time were of the form:
  2. color = prompt("Choose a color (red, yellow, blue):")

document.bgColor = color;

and two buttons appeared in the window, OK and Cancel. There is an alternative version of prompt() which allows the programmer to give a default response:

var major = prompt("What is your major?", "CIS");

Now, the user will see the text box with the string "CIS" already present. There will be three buttons, OK, Clear and Cancel. Clear will remove the default response from the text box. The user can then type their own major and either click OK or Cancel. When OK is clicked, the string in the text box is retuned to major. If Cancel is clicked, a null value is returned to major.

  1. Events and event handlers - as defined last time, an event is a user action. An event handler is javascript code which responds to the user action.
  2. Mouse events - the user moves the mouse
  3. 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

< A HREF > < /A >

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:

  • 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.
  1. 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:
  2. <A HREF="#"
  3. onMouseOver="document.bgColor='red'; return true"
  4. onMouseOut ="document.bgColor='white'; return true"
  5. Watch me!

</A>

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

  1. button events - the user clicks a displayed button. An event handler can carry out actions based upon the status of the button object.

Go over HW#3

1

cis10_8