Introduction to Programming the WWW I CMSC 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 browserthe Date object 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.htmllisting6.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.htmllisting6.2.html

6 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.htmllisting6.4.html More information about JavaScript Date Object  Check

7 Date Mathematics JavaScript’s Math object is a built-in calculator  Math methods summary: 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 parseInt() parseFloat() Date mathematics allows you to create countdown pages to important events  See JS Chap. 6 pp

8 Topics Today Working with Dates and Times Cookies Understanding Events

9 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

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.cookie=“username=clara; expires=Mon, 18-Aug-03 00:00:00 GMT; path=/aw; domain=stevenestrella.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 Dortch’s cookie code is widely used on the Internet and has been placed in the public domain  Source Code: mylibrary.jsmylibrary.js Several key functions defined  SetCookie()  GetCookie()  GetCookieVal()  DeleteCookie()

14 Example 1: First Cookie A simple program to store visitor’s name and favorite color information in cookies Example Web page: listing7.2.htmllisting7.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.htmllisting7.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) 1970’s, 1980’s: 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 Listing6-1.html W3C example  Listing6-2.html Listing6-2.html (open in NN)

23 More on W3C Event Model Use.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 function showxy(evt){ if (window.event){ evt = window.event; } if (evt){ var pos = evt.clientX + ", " + evt.clientY; window.status=pos; } Example: Listing6-4.htmlListing6-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.htmlListing6-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.htmlListing6-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.htmlListing6-7.html