HTML and CSS Reference
In-Depth Information
The HTML
<form>
tag contains an input tag with three attributes:
type
,
value
, and
onClick
. The input type is a
“button”
; it has a value of
“Wake me”
, and a JavaScript event
handler called
onClick.
The
onClick
event handler is assigned a function called
“wake-
UpCall()”
. When the user clicks the button labeled
Wake me
, a
click
event occurs, the
onClick
event handler is triggered, and the
wakeUpCall()
function will be executed, as
demonstrated in Example 13.1 and shown in Figure 13.1.
EXAMPLE
13.1
<html>
<head>
<title>Wake up call</title>
1
<script type="text/javascript">
2
function wakeUpCall(){
//
Function is defined here
3
setTimeout('alert("Time to get up!")',5000);
}
4
</script>
5
</head>
<body bgcolor="lightblue">
6
<form>
7
<input type="button"
8
value="Wake me"
9
onClick="wakeUpCall()">
</form>
</body>
</html>
EXPLANATION
1
The start of the JavaScript program.
2
The
wakeUpCall()
function is defined in the JavaScript program, between the
<script></script>
tags. When the user clicks the form button, the function assigned
to the event handler is called; that is,
wakeUpCall()
is called. The function itself is
defined in a JavaScript program, even though it is called from outside the program.
3
The timer is set for 5,000 milliseconds. The alert dialog box will pop up on the
screen 5 seconds after the user clicks the button.
4
End of the JavaScript program.
5
End of the HTML
<head>
tag.
6
This is the start of an HTML
<form>
tag.
7
The type of form uses a
“button”
input type.
8
The value is shown in the button as the text,
“Wake me”
.
9
The
onClick
event is assigned the name of a function. When the user clicks the
button, the
onClick
event handler,
wakeUpCall()
, will be called.
