Transcript lec13

Introduction to Programming
the WWW I
CMSC 10100-01
Summer 2003
Lecture 13
Reminder
• Final project presentation this Friday
• Each of you given 10 minutes to describe your
project
 1min: Topic of your project
 1min: Structure of your project
 4min: What you implemented to achieve the
requirements? etc.
 3min: Reflections: what did I learn? What are the
possible improvements if given more time? etc.
2
Topics Today
• Working with Dates and Times
• Cookies
• Understanding Events
3
The Date Object
• JavaScript contains a set of core objects,
including the Date object, that exist
independently of any host environment
such as a Web browser
• To use the Date object, you first create an
instance of it and then apply a method to
obtain date and time information
4
Date Examples
• A simple clock
 Using the toLocaleString() method of the Date
object
 Example Web page: listing6.1.html
• A better clock
 Obtaining the current hour, minute, and seconds and
then concatenating them to create a new format
 setInterval() vs. setTimeout()
 Example Web page: listing6.2.html
5
Date Examples (cont’d)
• Creating dynamic Greetings
 Vary the information displayed according to the time
or date
 Making Web pages more user-friendly
 Example Web page: listing6.4.html
• More information about JavaScript Date Object
 Check http://www.w3schools.com/js/js_datetime.asp
6
Date Mathematics
• JavaScript’s Math object is a built-in calculator
 Math methods summary:
http://tech.irt.org/articles/js069/#11
• To perform math operations on information
•
obtained from text fields, you first convert the
values to numbers using the top-level
parseInt() or parseFloat() function
Date mathematics allows you to create
countdown pages to important events
 See JS Chap. 6 pp. 98-101
7
Topics Today
• Working with Dates and Times
• Cookies
• Understanding Events
8
What are Cookies?
• Cookies are small pieces of information
stored on the visitor’s hard drive
• Cookies are used to maintain state
• Cookies are mostly harmless, but valid
privacy concerns exist about the use of
cookies in conjunction with invasive
marketing techniques
• You can create as many as 20 cookies per
domain
9
Creating Cookies
• Cookies are set when a JavaScript statement
•
•
•
in a Web page assigns content to the cookie
property of the document object.
Content must include the name and value
information
Usually, content includes information about
the domain and directory location of the page
Example code:
 document.cookie=“username=clara;
expires=Mon, 18-Aug-03 00:00:00 GMT;
path=/aw; domain=stevenestrella.com;”
10
Retrieving A Cookie
• When a Web page attempts to retrieve
a cookie, the location of the Web page
is compared to the domain and directory
of the page that created the cookie. If
the two locations do not match, the
cookie cannot be retrieved
11
Deleting Cookies
• You can set an expiration date for your
cookies. The form of the expiration date
is always GMT
• You can eliminate a cookie by setting its
expiration date to a date in the past
12
Public Domain Cookie Code
• Bill Dortch’s cookie code is widely used on the
Internet and has been placed in the public
domain
 Source Code: mylibrary.js
• Several key functions defined




SetCookie()
GetCookie()
GetCookieVal()
DeleteCookie()
13
Example 1: First Cookie
• A simple program to store visitor’s name
and favorite color information in cookies
• Example Web page: listing7.2.html
14
Example 2: Storing
Preferences
• One popular use of cookies is to store
visitor preferences, such as background
color and login information
• When a Web page retrieves information
from a cookie, the page can act on that
information by changing the page
appearance to suit the expressed
preferences of the visitor
• Example Web page: listing7.3.html
15
Topics Today
• Working with Dates and Times
• Cookies
• Understanding Events
16
Event Topics
•
•
•
•
•
•
•
Learn the history of Web browser event models
Discover the nature of events on the Web
Explore event propagation and bubbling
Discover mouse events and position
Use visibility techniques to create hypertext
Create drag-and-drop applications
Use keyboard events in Web page development
17
History of GUI programming
• Formerly, type in commands from
•
•
•
•
keyboard (eg, DOS)
1970’s, 1980’s: Xerox research on GUI
1984: Macintosh operating system
~1990: Windows
XWindows/UNIX
18
History of Web Browser
Events
• Limited support for events in early
browsers
 onclick
• Expanded events in version 4.0 browsers
• Disparate event models (NN4 vs. IE4)
• New W3C event model
19
Events on the Web
• Browser creates events in response to user
•
•
•
•
•
•
action
Event object begins life when user acts
Event object ends life when scripts stop
processing it
One event at a time
Netscape and W3C static Event object
IE4+ window.event
Every event has a target
20
Events and Event Handlers
• Events are objects that contain information
about what happened
• Event handlers are functions that are
members of an element that respond to
particular events
21
Propagation and Bubbling
• IE4 example
 Listing6-1.html
• W3C example
 Listing6-2.html
• (open in NN)
22
More on W3C Event Model
• Use <element>.addEventListener()
to add an event listener and specify
whether the event should be handled on
the way down or up
/* on the way down */
document.addEventListener(“click”,foo,true);
/* on the way up */
document.addEventListener(“click”,bar,false);
• Not widely employed
23
Tracking MouseMove Events
and Mouse Position
<body onMouseMove =showxy(event);”>
function showxy(evt){
if (window.event){ evt = window.event; }
if (evt){
var pos = evt.clientX + ", " +
evt.clientY;
window.status=pos;
}
}
• Example: Listing6-4.html
24
Hypertext with Mouse Events
• Title tag for single line tool tips
• Hypertext for multi-line content
• Add event handlers to links
• onmouseover="doHT(event,'vitry','visible')
•
;”
onmouseout="doHT(event,'vitry',’hidden');”
• First parameter passes event
• Second parameter passes ID
• Third parameter passes visibility
• Example: Listing6-5.html
25
Drag-and-Drop Applications
•
•
•
•
•
•
•
•
•
•
Place drag-and-drop code in library
Place utility functions in library
Add event handlers to div
onmousedown="setDrag(event,this);"
onmouseup="checkdroploc('1','0');”
Drag begins on mousedown
Drag ends on mouseup
Script checks new position of div
Simplified version
Example: Listing6-6.html
26
Keyboard Events
•
•
•
•
•
•
•
Triggered by key down, key up
Keyboard is fasted input device
onload="init();”
document.onkeyup = getKeyEvent;
Obtains keyCode
Check for letters, numbers, or space bar
Swap text node value to show key typed
• Example: Listing6-7.html
27