Transcript Tutorial 2B - Using Events

WDMD 170
Internet Languages
eLesson:
Variables, Functions and Events
(NON-Audio version)
© Dr. David C. Gibbs
2003-04
WDMD 170 – UW Stevens Point
1
Tutorial 2
Variables, Functions, and Events
Section B – Using Events
WDMD 170 – UW Stevens Point
2
Tutorial 2B Topics
• Section B – Using Events
–
–
–
–
–
–
About events
About HTML tags and events
How to use event handlers
About links
How to use link events
How to create an image map
WDMD 170 – UW Stevens Point
3
Events
• Understanding Events
– Events are actions that occur usually as a result of
something the user does.
– Quick examples:
• clicking a button is an event
• changing a text field
• moving the mouse over a hyperlink.
– Event handlers, such as onChange and onClick, to
make your script react to events.
• specific JavaScript code in response to a given situation
WDMD 170 – UW Stevens Point
4
Understanding Events
• Events
– Two basic types
• User-generated events
– e.g., mouse-click
• System-generated events
– e.g., load event  triggered by web browser when
HTML document finishes loading
– e.g., unload event  when the document is unloaded
from the browser
WDMD 170 – UW Stevens Point
5
WDMD 170 – UW Stevens Point
6
Input Events
In a given web page, there are a LOT of
events going on!
Check out this example of input events.
As a programmer, you need to learn how to
handle the events associated with your
task.
WDMD 170 – UW Stevens Point
7
HTML Tags and Events
• HTML elements allow user to trigger
events
– <input> tag
• Creates input fields that interact with users
• Syntax: <input type=“input-type”>
• Type attribute determines the type of input field
– <input type=“text”> creates a text field
• Name attribute assigns a unique name to the
element that JavaScript can use to reference it
WDMD 170 – UW Stevens Point
8
<input> tag
• Used to gather information on a web form.
• Must be embedded between <form>…</form> tags
• Here is a more complete example:
<input type="text"
value="default text"
name="txtInput"
onBlur="alert(this.value);" />
many types possible
the initial value
a unique name
an event handler
• NOTE: this should all be on one line! (Separately
displayed here for clarity.)
WDMD 170 – UW Stevens Point
9
eTask 1: <input type=“text”>
Copy this code into the body section of an HTML document.
<form name="myForm">
<input type="text" value="default text"
name="txtInput" onBlur="alert(this.value);" />
</form>
Save this file as “inputTypeText.htm”.
(NOTE: the input tag should all be on one line)
Click inside the text box; type something in – like “JavaScript
RULES!”.
Click outside the text box. Anywhere will do – you are trying to trigger
the Blur event.
WDMD 170 – UW Stevens Point
10
WDMD 170 – UW Stevens Point
11
WDMD 170 – UW Stevens Point
12
Event Handlers
• Code that executes in response to a specific
event
• SYNTAX:
– <HTMLtag eventHandler=“JavaScript-code”>
• Event handler naming convention
– Event name with a prefix of “on”
– e.g., onClick
– <input type=“button” onClick=“alert(‘You clicked the
button!’)” />
WDMD 170 – UW Stevens Point
13
eTask 2: <input type=“button”>
Copy this code into the body section of an HTML document.
<form name="myForm">
<input type="button" value="Click Me" name="btnInput"
onClick="alert('You clicked the button!');" />
</form>
(NOTE: the input tag should all be on one line)
Save this file as “inputTypeButton.htm”. View the page.
Click the button. What is the event? What is the name of the “event
handler?”
WDMD 170 – UW Stevens Point
14
List of Events and Event Handlers
• Events are things like click, focus, blur, change,
mouseout, mouseover, load, unload…
• Event handlers are named “onEvent”, such as
onClick, onFocus, onBlur, onChange, etc.
• The JavaScript Guide (jshtm.zip file) has a nice
summary of events and their corresponding
event handlers.
WDMD 170 – UW Stevens Point
15
Wait a minute!
Q: What’s this “alert” thing?
A: a JavaScript method (function)
that displays a dialog box with a
message and an OK button.
Let’s practice reading a “reference”
guide. Here’s the JSHTM spiel
on alert.
Read their description and use the
back-button to return.
WDMD 170 – UW Stevens Point
16
Wait another minute!
Q: What’s this “prompt” thing?
A: This time let’s go straight to the guide for a
description of prompt.
Once again, read their description and use the backbutton to return.
WDMD 170 – UW Stevens Point
17
And… as long as we’re in the mode of
looking up JS methods…
Q: How about “confirm”?
Once again, read their
description and use
the back-button to
return.
Each of these methods
will be used in future
programming.
WDMD 170 – UW Stevens Point
18
Methods (or functions):
alert, prompt, confirm
REVIEW: There are two types of functions: those that
do something; those that return something.
Does alert() return anything?
Does prompt() return anything?
Does confirm() return anything?
ANSWERS: No, yes, yes.
Notice how that difference plays out in the next eTask.
WDMD 170 – UW Stevens Point
19
eTask 3
Refer to the instructions on pages 86-8
(Gosselin).
• Create the file GreetVisitor.htm and save it in
your Tutorial02 folder.
• Preview the .htm file.
• In step 16, simply click on the browser’s
Home Page icon to force the unload event to
occur.
WDMD 170 – UW Stevens Point
20
Link tags <a>
• Links
– Used to open files or navigate to other
documents on the web
– Text or image used to represent a link in an
HTML document is called an anchor
– Use anchor tag <a> to process a URL
WDMD 170 – UW Stevens Point
21
Review of link tags <a>
• Links
– Two types of URL
• Absolute
– Refers to the specific location of the document
» http://www.site.com/index.html
» C:\webpages\homepage.html
• Relative
– Refers to location of document according to the location
of currently loaded document
» /subdirectory/otherpage.html
» Increases portability of web site
WDMD 170 – UW Stevens Point
22
Using Link Events
• Links Events
– Primary event is the click event
• For default operation, no event handler is required
– Overriding the default click event
• Add onClick event handler that executes custom
code
• Event handler must return true or false
• Can use built-in confirm() method to generate
Boolean value
WDMD 170 – UW Stevens Point
23
WDMD 170 – UW Stevens Point
24
Other Events associated with Links
• MouseOver event
– Occurs when the mouse moves over a link
• MouseOut event
– Occurs when the mouse moves off a link
• Can be used to change the text that
appears in the browser’s status bar
– Use JavaScript status property
WDMD 170 – UW Stevens Point
25
onClick, onMouseOver, onMouseOut
events
<A HREF = "GreenPage.html"
onClick = "return confirmPageChange();"
onMouseOver = "status ='This link opens the
green page'; return true;"
onMouseOut = "status ='You did not open the
green page!!'; return false;">
Click here to open the green page</A>
WDMD 170 – UW Stevens Point
26
eTask 4
Refer to the instructions on pages 93-4 (Gosselin).
• Create the files RedPage.htm and GreenPage.htm as
described.
• Open either one.
WDMD 170 – UW Stevens Point
27
Using Events in an Image Map
• Creating an Image Map
– An image divided into regions
• Each region associated with URL via the <a> tag
• Use <img>, <map>, and <area> tags to create an
image map
• Areas are divided using pixel coordinates of image
– Picture elements
WDMD 170 – UW Stevens Point
28
WDMD 170 – UW Stevens Point
29
Type of Image Maps
• Two basic types
– Client-side
• Part of an HTML document
– Server-side
• Code resides on a web server
WDMD 170 – UW Stevens Point
30
Creating an Image Map in an HTML
Document
1. Place image in document using <img> tag
– Use usemap attribute to reference image map
by name
<img src="sports.gif" usemap="#sports_map">
2. Define image map using <map> tag
– Use name attribute to give map a name
<map name="sports_map">
WDMD 170 – UW Stevens Point
31
Creating an Image Map in an HTML
Document (2)
3. Define image map regions using <area>
tag
–
Use shape attribute to specify shape of region
•
rect, circle, poly
<area href=“baseball.html” shape=“rect” coords=“0,0,150,125”
onMouseOver=“status=‘Baseball Web Page’;return true;”
onMouseOut=“status=‘’;return true;”>
WDMD 170 – UW Stevens Point
32
WDMD 170 – UW Stevens Point
33
WDMD 170 – UW Stevens Point
34
eTask 5
Refer to the instructions on
pages 99-102 (Gosselin).
• Create and save the image
map file ShowCountry.htm
• This one is tough! You’ll
probably develop a question
to post in your eReview
discussion group.
WDMD 170 – UW Stevens Point
35
Assignment
• Exercise #1 page 105 (Gosselin, Tutorial
02B)
• Complete the exercise and attach the file in a
post to your eReview discussion group.
• Describe any difficulties you might have had
in completing the problem.
• Please do not copy it to your web page until
one week later.
WDMD 170 – UW Stevens Point
36
Assignment
• Exercise #5 page 106 (Gosselin, Tutorial
02B)
• Complete the exercise and attach the file in a
post to your eReview discussion group.
• Describe any difficulties you might have had
in completing the problem.
• Please do not copy it to your web page until
one week later.
WDMD 170 – UW Stevens Point
37
End of eLesson
• Jump to the Beginning of this eLesson
• WDMD 170 Course Schedule
• D2L Courseware Site
WDMD 170 – UW Stevens Point
38