Creating an Interactive JavaScript

Most scripts require some interaction from the user before they will perform an action. So there are two basic parts to make your code work. The first part detects what the user has done and sends the information to the script for execution. The second part is the script that performs an action.

The two parts have names. The part that detects the user interaction is the event. The part that performs the action is called the function.

Information - Setting Up the Event

There are many ways to set up a page so that an event can occur. The example below uses a <form> with a button. Forms are placed in the body of an HTML page, between the <body> tags.

The form below is a simple one that creates a button, called "button1". The event occurs when the button is clicked.

This button has an onclick which is called an event handler. When button1 is clicked (the onclick part), then something happens. In this case, what happens is that a script called openAlertBox is executed. That part of the script is discussed below. There are many different events and event handlers.

Information - Creating a Function

Now we need a function to perform the action that occurs after the button is clicked. Functions reside inside the <script> tags. Functions do not execute until an event (such as a button click) occurs. Examine the example below.

We know that this script is a function because it begins with the word "function". Following the word "function" is the function name, in this case, "openAlertBox". There may be many functions inside the script tags, so a unique name is needed. Remember that JavaScript is case sensitive. The function named "openAlertBox" is not the same as "openalertbox".

Note that the function name is followed by open and close parentheses. These hold arguments that are passed from the event to the function. Arguments hold data that the function may need to do its job. In this case, there are no arguments, so the parentheses are empty.

The end of the line that declares the function has an opening curly brace, {. There is also an ending curly brace that indicates the end of the function. Everything between curly braces is what the function does. You must use opening and closing braces or your script will not execute.

Exercise 2 - Putting the Function and the Event Handler an HTML Page

1. Use Notepad and type the script below exactly as you see it.
2. Save it on the desktop with a .HTM or .HTML ending.
3. Double click the file to open it in the browser.
4. If everything works, it should look like this.

<html>
<head>
<title>An Interactive JavaScript</title>
<script language="JavaScript">

function openAlertBox() {
alert("This is the alert box")
}

</script>
</head>
<body>
<h3>Click the button below.</h3>
<form method="post">
<p>
<input type="Button" name="button1" value="push1" onclick="openAlertBox()">
</p>
</form>
</body>
</html>