Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 12 Topics Today • • • • More JavaScript Code Libraries Working with Forms Working with Dates and Times Cookies 2 Reminder • Final project presentation this Friday 3 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 4 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 5 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 6 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 7 Topics Today • • • • More JavaScript Code Libraries Working with Forms (validation) Working with Dates and Times Cookies 8 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 9 Text Fields: Bad or Missing Data • • • • • • • The <input> tag - single line of text The <textarea> 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.html 10 Text Fields: Reformatting Data • U.S. telephone numbers require specific format • • • • • (555) 333-4444 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.html 11 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 12 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 13 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.html 14 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). 15 Selection Menus • <select> tag creates a popup selection menu with options set in the <option> tag • Select and go navigation • The getSelectValue() function finds the • value of the selected option The showSelectValue() function changes to the display of a <select> to a given value • Store these functions in your code library 16 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.html 17 Topics Today • • • • More JavaScript Code Libraries Working with Forms Working with Dates and Times Cookies 18 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 19 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 Example Web page: listing6.2.html 20 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.html 21 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 22 Topics Today • • • • More JavaScript Code Libraries Working with Forms Working with Dates and Times Cookies 23 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 24 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 25 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 26 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 27 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() 28 Example 1: First Cookie • A simple program to store visitor’s name and favorite color information in cookies • Example Web page: listing7.2.html 29 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 30