Introduction to Programming the WWW I CMSC Summer 2003 Lecture 12

2 Topics Today More JavaScript Code Libraries Working with Forms Working with Dates and Times Cookies

3 Reminder Final project presentation this Friday

4 More JavaScript Code Libraries Code library not only support code reuse, but can help with Web site maintenance  How? Separate the code from Web pages! Three more complicated code examples you might want to put into your code libraries

5 Code 1: Browser Detection Tool number 1 in your code library Detect browsers by feature support var theDOM1 = (document.getElementById) ? true : false; Detect browsers by name var UA = navigator.userAgent.toLowerCase(); Detect the platform in use var isMAC = (UA.indexOf('mac') >= 0) ? true : false; var isWIN = (UA.indexOf('win') >= 0) ? true : false; Example Web page:  listing4-2.html listing4-2.html

6 Code 2: Object Positioning Create a getObj() function Create a shiftTo() function Create functions to find x, y, and z Create a function to empty a node Example Web page:  listing4-3.html listing4-3.html

7 Code 3: Change Window Size A function to get the available width A function to get the available height A function to set the window size A function to maximize the window Example Web page:  listing4-4.html listing4-4.html

8 Topics Today More JavaScript Code Libraries Working with Forms (validation) Working with Dates and Times Cookies

9 Form Validation HTML forms contain fields, select menus, radio buttons, and check boxes Form validation procedures:  Check the data the visitor enters on the form  Reminds the visitor to enter missing data  Reformats the visitor’s data as needed

10 Text Fields: Bad or Missing Data The tag - single line of text The tag - multiple lines of text Always include name and value attributes The onSubmit event handler calls the validate() function The validate() function checks for bad or missing data If the function returns false then the form is not submitted Example: listing3.2.htmllisting3.2.html

11 Text Fields: Reformatting Data U.S. telephone numbers require specific format (555) A visitor types a phone number into a text field then types the tab key An onChange event handler calls the formatNumber() function The formatNumber() function finds the first ten numbers in the text field and adds the necessary parentheses and spaces The reformatted number is displayed in the field Example: listing3.3.htmllisting3.3.html

12 Validating Text Fields To validate a text field, you first determine whether a value has been entered. For example, to determine whether the visitor neglected to enter information into a required field, you may test the expression (!document.survey.visitor.value). If that expression is true then the visitor failed to enter required information into the visitor field.You can also check to make sure the information is in the correct format in terms of numbers and punctuation

13 Radio Buttons Radio buttons are used for questions like gender which have a limited number of possible responses The getRadioValue() function finds the value of the checked radio button The showRadioValue() function checks the desired radio button Place these functions in your code library

14 Validating Radio Buttons Browsers automatically store a set of radio buttons, all bearing the same name, in an array. For example, if you have two radio buttons called gender, the first one, gender[0], might have a value of male and the second one, gender[1], might have a value of female. You can use JavaScript expressions to see which button is checked and to find its value Example: listing3.4.htmllisting3.4.html

15 Check Boxes Check boxes for “check all that apply” questions. When form is submitted, names and values of checked boxes are sent Test for the checked property Often it is helpful to use sequential names for check boxes (q1, q2, q3).

16 Selection Menus tag creates a popup selection menu with options set in the tag Select and go navigation The getSelectValue() function finds the value of the selected option The showSelectValue() function changes to the display of a to a given value Store these functions in your code library

17 Validating Selection Menus A common technique for obtaining the value of a selected item in a SELECT menu is to store the SELECT object in a variable, find the number of the selected option (the selectedIndex property), and then find the value of the selected option Example: listing3.7.htmllisting3.7.html

18 Topics Today More JavaScript Code Libraries Working with Forms Working with Dates and Times Cookies

19 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

20 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  Example Web page: listing6.2.htmllisting6.2.html

21 Date Examples (cont’d) Creating dynamic Greetings  It is possible to vary the information displayed on your Web page according to the time or date  Example Web page: listing6.4.htmllisting6.4.html

22 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

23 Topics Today More JavaScript Code Libraries Working with Forms Working with Dates and Times Cookies

24 What are Cookies? Cookies are small pieces of information stored on the visitor’s hard drive 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

25 Creating Cookies Cookies are set when a JavaScript statement in a Web page assigns content to the cookie property of the document object. By default, the content includes information about the domain and directory location of the page that created it

26 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

27 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

28 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 Several key functions defined  SetCookie()  GetCookie()  GetCookieVal()  DeleteCookie()

29 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

30 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