In this session, you will learn to: Objectives In this session, you will learn to: Validate forms Work with Frames This session discusses the use of forms, frames, and images in JavaScript. Start the session by sharing the objectives of the session with the students.

A Web site may require users to enter data through forms. Validating Forms A Web site may require users to enter data through forms. This form data needs to be validated to ensure that the user inputs are verified before being sent to the server for processing. The following objects of JavaScript are used for working with Web forms: form object button object checkbox object text object textarea object radio object select object Ask the students about the various validation that they should make before submitting the form to the server. Build on the input given by the students by explaining them that JavaScript is used to validate the content of the form. Explain the various controls and the associated objects used for creating forms.

Validating Forms (Contd.) The form object acts as a container for several other objects that collect information from the user. A form object has the following properties: Name: Describes the name of the form. Action:Specifies the URL of the server, which processes the information submitted by the form. Method: Describes the format in which the data will be sent to the server. It can take either GET or POST as its value. Elements: Contains all the elements, such as text boxes, checkboxes in a form. Some of the event handlers associated with the form object are: onSubmit onReset A form contain several elements, such as button, radio buttons to collect the input from the students. The properties and methods associated with form object are used to access the form fields, attributes and controls associated with forms. Explain the various properties and methods associated with the form object.

Validating Forms (Contd.) The button object in JavaScript allows the user to submit a form when the user clicks the button. A button object has the following properties: Name: Specifies the name of the button object. Value: Specifies the label of the button object. Some of the event handlers associated with the button object are: onClick onMouseDown OnMouseUp Buttons within your form can be accessed and manipulated using the button object of JavaScript. Explain the various properties and methods associated with the button object.

Validating Forms (Contd.) The checkbox object is used for attributes that can take multiple values at the same time. The checkbox object in JavaScript consists of the following properties: Name: Specifies the name of the checkbox object. Value: Specifies the text associated with the checkbox object. Checked: Specifies whether or not the checkbox is selected. The checkbox object supports the onClick event handler. The onClick event handler is used to execute a set of statements when the user clicks a checkbox. Explain the various properties and even handler associated with the checkbox object.

Validating Forms (Contd.) The text object is used for accepting/displaying line text entry. The text object consists of the following properties: Name: Specifies the name of the text object. Value: Specifies the text displayed by the text object. The text object consists of the following methods: blur(): Removes focus from a text field. focus(): Sets focus on a text field. select(): Selects a text field. Some of the event handlers associated with the text object are: onFocus onChange onSelect For accepting input in the form of single line text, the text object is used. Discuss the various properties and event handlers associated with the text object.

Validating Forms (Contd.) The textarea object allows the user to create a field that can accept multiple lines of text. The textarea object has the following properties: Name: Specifies the name of the textarea object. Value: Specifies the text displayed by the textarea object. The textarea object has similar methods and event handlers as that of the text object. In case you need to accept input from the user consisting of multiple lines of text, you can use the textarea object. Ask the students the various places they can use a textarea object. Build on the input given to the students by telling them that they can use the textarea object while accepting suggestions or comments from the user.

Validating Forms (Contd.) The radio object allows the user to accept a single value from a set of alternatives. Each radio button field in the group should be given the same name. The radio object has the following properties: Name Value Checked DefaultChecked Index Length For selecting a particular option from a given list, you can use the radio button object. Explain the various properties associated with the radio button object.

Validating Forms (Contd.) The select object allows the user to select an option available in a popup menu. The select object has the following properties: Name Text defaultSelected Selectedindex Selected Value Tell the students that they can use the select object to select a particular option. Explain the various properties associated with the select object.

Validating Forms (Contd.) Form Validation: JavaScript allows client-side validation logic to be applied to a Web form. Client-side validation reduces the processing time of a script because the data does not have to be transferred to the server. The following properties and methods of form objects are used to validate the data entered in the form: element action submit() Ask the students to give examples of the type of validation they would like to perform on a given form. Build on the input provided by the students by telling them they can perform validations related to the content accepted by the user.

Demo: Developing Interactive Forms Problem Statement: Watch Perfect Inc. is an upcoming placement consultant firm in New York, USA. The company wants to provide a registration form on their Web site, where the candidates can login and provide their personal, educational, and professional details. The form should contain the following fields: Login Details User Name Password Re-enter Password Explain the various methods of navigator object to the students. 11

Demo: Developing Interactive Forms (Contd.) Personal Details First Name Last Name E-mail Gender Phone Number Preferred Job Location The user should be able to select multiple job locations. Professional Details Experience (in years) Job category Key Skills The user should be able to select multiple job categories. Educational Details Degree Held Specialization Explain the various methods of navigator object to the students. 12

Perform the necessary validations. Demo: Developing Interactive Forms (Contd.) The form should also contain buttons to submit or reset the values entered in the various fields. The following validations need to be performed: The login name, password, first name, last name, preferred job location, and degree held fields should not be left blank. The value entered in the password and re-enter password fields should be the same. The value entered in the experience field is between 1 and 20 years. The e-mail field must contain the @ symbol. Perform the necessary validations. Explain the various methods of navigator object to the students. 13

Demo: Developing Interactive Forms (Contd.) Solution: To solve the preceding problem, perform the following tasks: Create the interface of the Web form. Ensure that no field is left blank. Ensure that the value entered in the password and re-enter password fields are same. Ensure that the value in the experience field is entered between 1 and 20 years. Ensure that the e-mail field contains the @ symbol. Explain the various methods of navigator object to the students. 14

Working with Frames in JavaScript Frames allow the user to divide a Web page into one or more sub regions. Each sub region is a frame that has a name and a URL associated with it. This frame can be loaded independently of other frames. A frame can change its size dynamically according to the change in size of the visible client area. A frame can also allow or disallow the user to change its size manually. Ask the students about various scenarios where frames are used. Build on the input provided by the students by explaining them that frames divide the browser window into multiple panes. Each frame can contain a separate URL or the output of a script.

Working with Frames in JavaScript (Contd.) Referencing Frames: In JavaScript, the frames property of the window object is used to refer to different frames. The frames property of the window object is an array containing entries for all child frames in the parent frameset. The length property indicates the total number of frames in the frameset. The frame document always loads into the current window known as the parent window. The parent window can consist of other frames known as child frames. The parent and child frames are defined in a hierarchy that can go up to multiple levels. In JavaScript, the <FRAMESET> tag is used to create a frame document, which is the parent document. Explain the students that when a window contains multiple frames, each frame is represented in JavaScript by a frame object. The frame object is a child of the window object. These objects are created automatically by the browser and help users to control loading and accessing of frames. Using the <FRAMESET> tag, you can create frame objects. Thus, each frame created is a property of window object.

Working with Frames in JavaScript (Contd.) All the <FRAMES> tags defined under the <FRAMESET> tag are the child frames of the parent document. The following figure displays a two-generation hierarchy consisting of a parent frame and its child frames. Explain the students that the frames property of frame object denotes a collection or array of frames in a window and also in a frame set. Rather than referring to frames in a document by name, you can use the frames array. This array stores information about each of the frames in the document. The frames are indexed starting with zero and beginning with the first <frame> tag in the frameset document. For example, you could refer to the frames defined in the previous example using array references: parent.frames[0] is equivalent to the topleft frame. parent.frames[1] is equivalent to the topright frame. parent.frames[2] is equivalent to the bottomleft frame. parent.frames[3] is equivalent to the bottomright frame.

Working with Frames in JavaScript (Contd.) JavaScript supports the following three references to refer to frames in a two-generation hierarchy: Parent-to-Child Child-to-Parent Child-to-Child Explain the concept of parent child relationship to the students.

Working with Frames in JavaScript (Contd.) Referencing Windows: You can use JavaScript to open the Web page in a new window, known as the secondary window. The secondary window can be created as a result of a user event, such as button click. The following syntax is used to refer to the new window: newWindow = window.open("filename","windowName") In the preceding syntax: The window.open()method returns a new window. The variable newWindow is used to reference the newly created window. The file that is loaded into the new window is filename. The argument windowName is a string that specifies the name of the window to be used in the TARGET attribute of the <FORM> or <A> tags. Tell the students that by default a new document gets opened in the current browser window. However, you can use JavaScript to open documents in a new window. Explain the syntax used for referring to a new window.

Demo: Referencing Frames and Windows in a Web Page Problem Statement: Sandra is designing a Web site for StarMoon Technologies. The Web site should be divided into two frames. The left frame should contain the following hyperlinks on the homepage: Company Services Clients Careers Contact Us On loading the home page, a pop-up window specifying the company's mission statement should appear. In addition, the company name and logo should be displayed in the right frame. Explain the various methods of navigator object to the students. 20

Demo: Referencing Frames and Windows in a Web Page (Contd.) Sandra wants to ensure that when the user clicks a hyperlink in the left frame, the information corresponding to the selected link is displayed in the right frame following the company name and logo. In addition, the pop-up window also changes its text based on the selected hyperlink. Help Sandra to perform the preceding activity. Explain the various methods of navigator object to the students. 21

Demo: Referencing Frames and Windows in a Web Page (Contd.) Solution: To solve the preceding problem, perform the following tasks: Create the HTML page for index.html. Create the HTML page for linkspage.html. Create the HTML pages for various hyperlinks. Verify the solution. Explain the various methods of navigator object to the students. 22

In this session, you learned that: Summary In this session, you learned that: The form object acts as a container of several other objects. The following JavaScript objects are used to work with forms on a Web page: Form object Button object Checkbox object Text object Textarea object Radio object Select object JavaScript is used to apply client-side validation logic to a Web form. Frames allow the Web page developer to divide a Web page into one or more sub regions or windows. Read out the summary to the students.

Summary (Contd.) Each sub region is a frame that has a name and a URL associated with it. The frames property of the windows object is an array containing entries for all child frames in the parent frameset. The length property indicates the total number of frames in the frameset. The frame always loads into the current window known as the parent window. The parent and child frames are defined in a hierarchy that can go up to multiple levels. JavaScript allows the Web page developer to create new windows using the window.open()method. A secondary window can use the opener property of the window object to reference back to the main window. Read out the summary to the students.