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