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('You clicked the button')">
</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 "watches"
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 "You clicked the button" but if I had printed "The button shouldn't be clicked"...the
apostrophe in "shouldn'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 the BASIC computer language.
There are two kinds of functions: Functions which were pre-defined by
the developers of JavaScript (which I will 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>
alert("This is an alert")
</script>
and the document.write function, which has the form:
<script>
document.write("Words in this quote are printed by document.write")
</script>
JavaScript *functions* are introduced with an opening script 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>
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>
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 and /script tags. Whenever you use an input tag that contains an event handler, precede and follow it with form tags.
1. THE COMMENT TAG
A one line comment tag in JavaScript is begun with double slash marks (//). Nothing on that line is read by the browser after the double slash marks. A multi-line comment is introduced with /* and concluded with */
2. PASSING VALUES IN A FUNCTION CALL AND IF-ELSE TESTS
Earlier, we looked at a function whose variables were defined at the same time the function was created. Now we are going to learn about how to pass values to a function after it has been created. Consider the following program:
<html>
<head>
<script>
function guessnumber(guess) {
if (guess.value > 5) document.write(guess.value + " is too high.")
else if (guess.value < 5) document.write(guess.value + " is too low.")
else document.write("Yes. The number is 5.");
}
</script>
/* The function you saw earlier had its values already defined within the function. Now you will see that you can pass values to a function after the function has been defined. Notice the word "guess" in the parenthesis after the function name. This is the place (destination) to which the value is passed when the function is called by the event-handler in the second input tag in the body below. There are two tests in the function. The first is the "if" test which checks to see if the value which was passed to the function is greater than 5. The second is the "else if" test which checks to see if the value passed is less than 5. If neither of these conditions is true, there is no need to test again since there is only one possiblity left: the value is 5. The first two document.write statements write the number guessed and, following the plus sign, the words " is too high" or " is too low". Notice that there is a leading blank space within the quotes so that the words in the quote will be separated from the number which is printed immediately before these words. */
</head>
<body>
<form>
I am thinking of a number between 1 and 10. Try to guess it here:
<input type="text" name="guess" size="1" value="">
/* An input box is provided which is sized to accept one number. It is named "guess" and starts out with a null value (i.e., nothing is printed in the box when it first appears on the monitor). The name of the box and its value (once a number is entered in it) will be used as an address by the event-handler below to pass the value (i.e., the number entered) to the function. Thus, this box is like a variable whose value is passed to the function. */
<input type="button" value="Guess" onClick="guessnumber(guess)">
/* The "onClick" calls the guessnumber function defined in the head section of this document and sends it the value (i.e., the number) which was typed into the INPUT box named "guess". The name of the box (i.e., "guess") serves as the address for the object from which we want to get the value to be sent to the function. The function name serves as the address of the object to which we want to send the value. In this document we have used only one form, but if more than one form is used in a document the forms can be given individual names so that each will have its own address within the document. */
</form>
</body>
</html>