Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 12.

Introduction to Programming the WWW I

Introduction to Programming the WWW I

CMSC 10100-01

Summer 2003

Lecture 12

2

Topics TodayTopics Today

• More JavaScript Code Libraries

• Working with Forms

• Working with Dates and Times

• Cookies

3

ReminderReminder

• Final project presentation this Friday

4

More JavaScript Code Libraries

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 DetectionCode 1: Browser Detection

• Tool number 1 in your code library

• Detect browsers by feature supportvar theDOM1 = (document.getElementById) ? true : false;

• Detect browsers by namevar UA = navigator.userAgent.toLowerCase();

• Detect the platform in usevar isMAC = (UA.indexOf('mac') >= 0) ? true : false;var isWIN = (UA.indexOf('win') >= 0) ? true : false;

• Example Web page: listing4-2.html

6

Code 2: Object Positioning 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


7

Code 3: Change Window SizeCode 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


8



• Working with Forms (validation)


• Cookies

9

Form ValidationForm 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

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

11

Text Fields: Reformatting Data

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

12

Validating Text FieldsValidating 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 ButtonsRadio 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 ButtonsValidating 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


15

Check BoxesCheck 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 MenusSelection 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

17

Validating Selection MenusValidating 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


18





• Cookies

19

The Date ObjectThe 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

20

Date ExamplesDate 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


21

Date Examples (cont’d)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


22

Date MathematicsDate 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

23





• Cookies

24

What are Cookies?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 CookiesCreating 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 CookieRetrieving 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 CookiesDeleting 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 CodePublic 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 CookieExample 1: First Cookie

• A simple program to store visitor’s name and favorite color information in cookies

• Example Web page: listing7.2.html

30

Example 2: Storing Preferences

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

Date post:	26-Dec-2015
Category:	Documents
Upload:	lindsey-whitehead
View:	215 times
Download:	1 times

Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 12.

Documents