As you sit at your computer screen using the graphic interface of a Web browser, your computer may have many processes going on. In addition to keeping track of your input by keypress or mouse movements, your computer may be sending or receiving data over a network and running other programs.

Fortunately as a programmer, you don't have to worry about these details because the operating system simplifies everything by means of a concept called event oriented programming . The operating system interprets the hardware actions of moving a mouse or pressing a key as events that are passed to your program. For example, if your program has executed the following statements:

print "Enter the first number:"
input (number1)

the operating system hands your program events that contain the characters that are typed on the keyboard, and your program interprets these events according to the input statement rules.

Moving a mouse around generates a huge number of events; every time the mouse pointer points to a new screen location, it may be significant to the program that controls that part of the screen. You have probably seen this in action on Web pages where a slight movement of the mouse causes an image to change.

The following are some examples of mouse events your program might receive. In every case, the event contains information on exactly where it happened.

• Mouse has entered your working area
• Mouse has moved with no button pressed
• Mouse has moved with a button pressed
• Mouse has left your working area

A Familiar Example of a Mouse Event

Imagine you're browsing a Web page. You move your mouse over an image and it changes. What happened is the Web browser got a mouse event and called a function written in a scripting language. In addition to controlling the way a Web page looks, the conventions of HTML (Hypertext Markup Language) allow for attaching a JavaScript function to the page so that it can respond to events.

If you haven't worked much with HTML, don't worry about the following examples. HTML is secondary to the discussion about events. Lesson 5 includes a bit of an introduction to HTML and other markup languages.

You can define properties for certain HTML tags, such as the tags that include images in a page, to provide instructions to the browser on what to do when the mouse is moved over or away from that image.

Here you have a basic HTML tag for adding an image to a page. It states that the image is to be taken from a particular file.

<img src="picture.jpg">

You can add extra information to this tag, giving the image a name and attaching calls to functions written in JavaScript, resulting in something similar to the following:

<img src="picture.jpg" name="SwapImage"
onMouseOver="functionA(SwapImage)"
onMouseOut="functionB(SwapImage)">

You provide a name for this image ( SwapImage ), and then give a function call for two events , onMouseOver and onMouseOut. The first event occurs when your mouse pointer moves into the image area; the second occurs when you move the mouse out again. When the event occurs, the corresponding function is called.