This lesson will cover event-handlers, the document.write statement, the alert statement, and functions.
2. EVENT-HANDLERS:
Event-handlers are JavaScript responses to user actions. A bit of
JavaScript code
to handle a user action, such as a mouse click, is known as an
"event-handler." For instance, if
an alert is to be printed on the screen when a user clicks a button on
the screen, the event-handler might be coded like this:
<FORM>
<INPUT type="button" value="Click here" onClick="alert('Do not click so hard!')">
</FORM>
Try it for yourself:
There are several things to notice here: Put event-handlers inside
FORM tags. Since you are using an INPUT tag, you must
put it inside a FORM...but not a submit-able FORM. Therefore the FORM tag
will not be as complex as the ones we've worked with so far. Also, we will
not be validating JavaScript code.
The "OnClick" part of the INPUT is the actual event-handler. It "listens" (i.e., waits)
for when the button is clicked and then causes the alert, containing the
phrase in single quote marks, to appear.
It's easy to mistype the onClick part of the code, so be careful to get
all the proper characters in at the right places. You use double quotes
outside the "alert" phrase and single quotes inside the parenthesis that
contains the text of the alert. Do not use a single
quote (apostrophe) in the middle of the parenthesis or the click won't
work.
If you put a single quote in the middle of the parenthesis, JavaScript will
think that you are signaling for the end of the alert phrase to be printed...and will
think that additional words you type after that should not be there.
Notice that
I printed "Do not click so hard" rather than "Don't click so hard"...the
apostrophe in "don't" would make the code malfunction.
Also, do not allow the INPUT line to wrap into two lines. If it
does...even though it's a valid wrap and not a hard line break...the code
often won't work and the alert will not appear when the button is clicked. You
can bring a wrapped line back up to form all one line by going to the end
of the first line, hitting a space, and then simultaneously pressing ctrl
& d. This will bring the wrapped part of the line back up to the end of
the first line...even though you won't be able to see the right end of the
line because it will extend off the screen.
3. FUNCTIONS
Functions are a way to perform repetitive
operations. Functions are to JavaScript what subroutines are to BASIC.
There are two kinds of functions: Functions which were pre-defined by
the developers of JavaScript (which I shall call "built-in" functions) and
user-defined functions.
The two most-frequently used built-in functions are the alert function,
which has the form:
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
alert("This is an alert")
</SCRIPT>
and the document.write function, which has the form:
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
document.write("Words in this quote are printed by document.write")
</SCRIPT>
Notice that JavaScript *functions* are introduced with an opening SCRIPT TYPE and LANGUAGE tag. They conclude with a closing SCRIPT tag.
User-defined functions are defined in the HEAD section of the document and are called (i.e., activated) in the BODY section. Consider the following function which I will call "addemup":
<HEAD>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
function addemup() {
var number1= 100;
var number2= 500;
var total= number1 + number2;
alert("The total is " + total);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value="add the numbers?" onClick="addemup()">
</FORM>
</BODY>
Try it here:
Remember to *define* a function in the HEAD section before trying to call it in the BODY section of a document. The name of the function in the definition must be preceded by the word "function" and followed by an empty parenthesis. The definition itself is included within braces...{ }. Variable declarations and/or definitions are preceded by the keyword "var". Each expression in the definition ends with a semicolon.
You do not have to use an event-handler to call a function. You can call
it as soon as the program starts running by just listing the name of the
function in the BODY of the program. But, since you are not using an
event-handler, remember to precede it and follow it with SCRIPT tags.
Calling a function in this way would look like this:
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
addemup()
</SCRIPT>
The following rule of thumb may be helpful: Whenever you define or whenever you call a function, precede and follow the definition or the call with SCRIPT tags. Whenever you use an INPUT tag that contains an event handler, precede and follow it with FORM tags.