Introduction to Programming the WWW I

1
Introduction to Programming the WWW I

• CMSC 10100-01
• Summer 2003
• Lecture 13

2
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.

3
Topics Today

• Working with Dates and Times
• Cookies
• Understanding Events

4
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

5
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

6
Date Examples (contd)

• 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

7
Date Mathematics

• JavaScripts 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

8
Topics Today

• Working with Dates and Times
• Cookies
• Understanding Events

9
What are Cookies?

• Cookies are small pieces of information stored on
  the visitors 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

10
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.cookieusernameclara expiresMon,
  18-Aug-03 000000 GMT path/aw
  domainstevenestrella.com

11
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

12
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

13
Public Domain Cookie Code

• Bill Dortchs 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()

14
Example 1 First Cookie

• A simple program to store visitors name and
  favorite color information in cookies
• Example Web page listing7.2.html

15
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

16
Topics Today

• Working with Dates and Times
• Cookies
• Understanding Events

17
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

18
History of GUI programming

• Formerly, type in commands from keyboard (eg,
  DOS)
• 1970s, 1980s Xerox research on GUI
• 1984 Macintosh operating system
• 1990 Windows
• XWindows/UNIX

19
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

20
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

21
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

22
Propagation and Bubbling

• IE4 example
• Listing6-1.html
• W3C example
• Listing6-2.html
• (open in NN)

23
More on W3C Event Model

• Use ltelementgt.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

24
Tracking MouseMove Events and Mouse Position

• ltbody onMouseMove showxy(event)gt
• function showxy(evt)
• if (window.event) evt window.event
• if (evt)
• var pos evt.clientX ", "
• evt.clientY
• window.statuspos
• Example Listing6-4.html

25
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

26
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

27
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