web development -2

sri999

t13.pptx

Home >Information Systems homework help >web development -2

HTML5, CSS3, and JavaScript

6th Edition

Programming for Web Forms

Tutorial 13

Carey

Objectives

Reference forms and form fields

Create calculated fields

Retrieve field values from selection lists and radio buttons

Format numeric and currency data

Append field names and data to URLs

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Objectives (continued)

Explore the syntax of regular expressions

Use a regular expression to extract data from the URL query string

Work with the validityState object

Create custom validation messages

Validate credit card numbers

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring the Forms Object

The knowledge of properties and methods of the form object and the elements it contains is essential to program the behavior and contents of a web form

Web forms and their elements are part of the hierarchy of objects within the web document

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring the Forms Object (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring the Forms Object (continued 2)

JavaScript organizes the forms into the following object collection:

document.forms[idref]

where idref is the index number or ID of the form

The form can be referenced using either the id or name attribute as follows:

document.forms.fname

where fname is either the form’s ID or name

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring the Forms Object (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Form Elements

A form’s input controls, selection lists, text area boxes, and field sets are organized into the following elements collection:

form.elements[idref]

where

form is the reference to the web form

idref is the index number or ID of the element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Form Elements (continued 1)

Element can also be referenced using its name or id attribute using the following expression:

form.elements.ename;

where ename is either the element’s ID or name

Example: Refer the orderDate field from the orderForm using the following object reference:

document.orderForm.elements.orderDate

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Form Elements (continued 2)

Reference a field using the value of the field name attribute using the following expression:

form.field

where field is the value of the field name

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Field Value

To set the value of an input control, use the following expression:

element.value = value;

where

element is a reference to a form element

value is the value to be stored in the element

Example: Store the text string “2018-03-10” in the orderDate field as follows:

document.orderForm.orderData.value = “2018-03-01”;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Field Value (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Field Value (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Navigating between Fields

A field can be selected automatically when the form opens so that it is ready for data entry

When a form field is selected either by clicking it or by moving it using keyboard buttons or arrows, it receives the focus of the browser

To program this action, you use the following focus() method:

element.focus();

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Navigating between Fields (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Selection Lists

Various properties and methods are associated with the selection list object

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Selection Lists (continued 1)

The value of a selection list is determined by the option that is selected by the user

The selection list options are organized into the following options object collection:

select.options[idref]

where select is the reference to the selection list object and idref is the index number or ID of the option

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Selection Lists (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Selection Lists (continued 3)

selectedIndex property returns the value of the selected option from a selection list

Example:

var orderForm = document.forms.orderForm;

var model = orderForm.elements.model;

var modelIndex = model.selectedIndex;

var modelValue = model.options[modelIndex].value;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Selection Lists (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Options Buttons and Check Boxes

Option or radio buttons are grouped by a common field name placed within the following array:

options[idref]

where

options is the common field name used by all the option buttons

idref is either the index number or ID of the option button

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Options Buttons and Check Boxes (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Options Buttons and Check Boxes (continued 2)

To retrieve the value of the checked option button without using a for loop, use the following CSS selector:

input[name=”protection”]:checked

Example: Determine the option button that has been checked by the user as follows:

var orderForm = document.forms.orderForm;

var protection = orderForm.elements.protection;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Options Buttons and Check Boxes (continued 3)

for (var i = 0; i < protection.length; i++) {

if (protection[i].checked === true){

var pCost = protection[i].value;

break;}}

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Check Boxes

Check box controls work the same way as option buttons in which the checked property indicates whether the box is checked

The value associated with a checked box is stored in the value property of the check box object

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Check Boxes (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Formatting Numeric Values

Numeric values are displayed by JavaScript to 16 decimal place accuracy

To control the number of digits displayed by the browser, use toFixed()method

The toFixed()method is limited to only defining the decimal place accuracy and it does not format numbers as currency or separate thousands with the comma symbol

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Formatting Numeric Values (continued 1)

To have more control over the numeric format, use the following method:

value.toLocaleString(locale, {options})

where locale is a comma-separated list of location and language codes and options is a comma-separated list of formatting options for numeric values

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Formatting Numeric Values (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Formatting Numeric Values (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying Form Events

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

JavaScript supports event handlers to respond to user actions within a form

Applying Form Events (continued 1)

Example: To rerun the calcOrder() function when the user changes the quantity of items to order, use the following event handler:

orderForm.elements.qty.onchange = calcOrder;

Use the onclick event handler for options buttons and check boxes

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying Form Events (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Hidden Fields

Hidden fields are used to store important data

The data stored in hidden fields is available only to programmers and removed from the user’s control

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Appending Form Data

To append form data to the URL, add method and action attributes to the form element as follows:

where url is the URL of the page to which the form data has to be appended

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Appending Form Data (continued 1)

General format of the URL

http://server/path/file?field1=value 1&field2=value2&field3=value3...

where

server and path are the server and path names for the web page

file is the filename of the web page

? character followed by query string contains field names and data values appended to the URL

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Examining the location Object

Location object stores the current location of the web document

Location object is referenced using the following expressions:

window.location

document.location

location

To load a new page in the current window, use

window.location = url

where url is the URL of the new page

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Examining the location Object (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Examining the location Object (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Text Strings

Text string objects are created implicitly

when storing any text string value within a variable or

by extracting a text string from a web form field or a location URL

Text string objects can be explicitly created using the following object constructor:

var stringVar = new String(text);

where stringVar is a variable that stores the text string and text is the text of the string

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Extracting Substrings from a Text String

To extract a character in a text string, use

string.charAt(i)

where string is the string object and i is the index value of the character

The charAt() method extracts only a single character

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Extracting Substrings from a Text String (continued)

To extract substrings, use string.slice(start [,end])

where start is the starting index value and end is the index value at which the slicing stops

To create an array of substrings, use strArray = string.split(str)

where strArray is the array to store the substrings and str is a delimiter that determines the break between substrings

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Searching within a Text String

To search for the occurrence of substrings within larger text strings, use

string.indexOf(str [,start])

where start indicates the index value where the search starts

The indexOf() method returns the index value of the first occurrence of the substring str

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing Regular Expressions

Regular expression: Text string that defines a character pattern

General form:

/pattern/

where pattern is the regular expression code that defines a character pattern

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Matching a Substring

The most basic regular expression is /chars/

where chars is the substring text

To specify the beginning or end of the regular expressions, mark the beginning and end of a text string with the ^ and $ characters, respectively

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting Regular Expression Flags

By default, pattern matching stops after the first match is discovered and flag is added to the end of a regular expression to override the default

To perform a global search and match all occurrences of a character pattern within the text string, use /pattern/g method

To make a regular expression insensitive to case, use /pattern/I method

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining Character Types and Character Classes

Regular expression can match substrings based on the general type of character

The four general types of characters

Alphabetical characters

Digits (numbers 0 to 9)

Word characters: Alphabetical characters, digits, or the underscore character ( _ )

White space characters (blank spaces, tabs, and new lines)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining Character Types and Character Classes (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining Character Types and Character Classes (continued 2)

In regular expression language, word refers to any string of symbols consisting solely of word characters

Example: The string “R2D2” is considered a single word but “R2D2&C3PO” is considered two words with the & symbol marking the boundary between the words

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining Character Types and Character Classes (continued 3)

Character class is used to limit the regular expression to a select group of characters

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Specifying Repeating Characters

To specify the exact number of times to repeat a character, append the character with {n} symbol

where n is the number of times to repeat the character

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Escape Sequences

Escape sequence is used by prefacing the character with the backslash character (\)

The backslash character indicates that the character that follows should be interpreted as a character and not a command

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Escape Sequences (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Specifying Alternate Patterns and Grouping

To define two patterns for the same text string, use the “|” character as follows:

pattern1|pattern2

where pattern1 and pattern2 are two distinct patterns

To group character symbols as a single unit, use the following syntax:

(pattern)

where pattern is a regular expression pattern

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Programming with Regular Expressions

Regular expression literal is used to directly enter the code of a regular expression in JavaScript

For example, the following command stores a regular expression in the regx variable:

var regx = /\d{5}-\d{4}/g;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Programming with Regular Expressions (continued)

A regular expression can be defined using new RegExp() object constructor as follows:

new RegExp(pattern, flags);

where pattern is the regular expression pattern and flags are any modifiers added to the pattern

One of the advantages of using an object constructor is the ability of storing regular expressions as variables

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Regular Expression Methods

Regular expressions have their own methods as they are another type of JavaScript object

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Replacing URI Encoded Characters

When the browser finds a character in a field name or value that is reserved for other purposes, it replaces the character with a character code known as URI encoded character

To decode the field value back into its original values, use

decodeURIComponent(string)

where string is a text string containing URI─ encoded characters

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Writing URL Data to a Web Form

To split the query string at each occurrence of the & or = character in the form data, use the split() method as follows:

var formFields formData.split(/&=/g);

where /&=/g is a regular expression that matches every “&” and “=“ character in the formData text string

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Validating Data with JavaScript

Constraint Validation API: Form validation properties and methods built into JavaScript

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring the ValidityState Object

ValidityState object: Stores the reason for validation fail of a data field

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Custom Validation Message

To display the same error message across all browsers, use the following method:

element.setCustomValidity(msg)

where msg is the custom message displayed by the browser when an element is invalid

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Responding to Invalid Data

To check the validity of form data as it’s being inserted, use an event handler or event listener for the input event

To catch invalid data before the form is submitted, add an event handler or event listener for the click event of the form’s submit button

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Responding to Invalid Data (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Validating Data with Pattern Matching

Text strings can be matched against a regular expression pattern by adding the following pattern attribute to the input element:

pattern = “regex”

where regex is the regular expression

Use the valueMissing property to test if the field has been left blank and patternMismatch property to test for the correct pattern

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Validating a Selection List

Use the selectedIndex property to determine the value of the index that is selected

If the index is 0, the browser will declare the field value as invalid

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Testing a Form Field Against a Regular Expression

Credit card CVC numbers are either 3-digit numbers or 4-digit numbers

The regular expressions for 4-digit CVC numbers and 3-digit CVC numbers are /^\d{4}$/ and /^\d{3}$/ respectively

Regular expression patterns can be tested using the test() method

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Testing for Legitimate Card Numbers

Luhn Algorithm/Mod10 Algorithm: Provides a quick validation check on unique identification numbers

Luhn Algorithm ensures that the sum of the digits in the number meet certain mathematical criteria

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Testing for Legitimate Card Numbers (continued 1)

The steps involved in Luhn Algorithm are as follows:

Start from the last digit and move to the left. Divide the alternating digits of the ID number into two groups

Add the digits in the first group

Double the digits in the second group and then add the sum of the doubled digits

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Testing for Legitimate Card Numbers (continued 2)

Calculate the total sum from the two groups

If the total sum is evenly divisible by 10, the ID number is considered legitimate, otherwise the ID number is illegitimate

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Testing for Legitimate Card Numbers (continued 3)

To sum the digits found within a text string, use

function sumDigits(numStr) {

var digitTotal = 0;

for (var i = 0; i < numStr.length; i++){digitTotal += parseInt(numStr.charAt(i));

}

return digitTotal;

}

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Testing for Legitimate Card Numbers (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Testing for Legitimate Card Numbers (continued 5)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition