1. Scott Marino MSMIS Summer Session 1 - 2001 Web Site Design and Authoring Session 9 Scott Marino

2. MSMIS Summer Session 1 - 2001 Topics JavaScript and Frames –JavaScript / Chapter 4 JavaScript and Windows –JavaScript / Chapter 5 JavaScript and Forms –JavaScript / Chapter 6

3. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript and Frames Frameset –called “top” or “parent” in the object model –each frame is named

4. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript and Frames Breaking out of a frame –If someone links to your site in a frame –Allows you to look at the current page in reference to all pages and replace the current location –if (top.location != self.location) { top.location.replace(self.location) } If the location of the current page is not the top location, use the replace method to place the current page in the top location

5. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript and Frames Forcing a page into a frame –If someone links to one of your pages that you intended to be inside a frame –if (top.location == self.location) { top.location.replace(“framesetpage.htm”) } If the location of the current page is the top location, use the replace method to place the frameset page in the top location

6. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript and Frames Can use JavaScript to redirect the user to a non- framed version of your site by checking for frame support Can use JavaScript to create dynamic content within frames

7. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript and Browser Windows Can use JavaScript to open new browser windows, or to update the content of a window function newWindow() { myWindow = window.open(“myimage.jpg”, “myWin”, “width=n,height=n”) } This function will create a new window object, myWindow, that is named myWin and loads an image into the window

8. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript and Browser Windows Other window.open parameters are: –toolbar=yes for the toolbar to display –location=yes for the url to display –scrollbars=yes to display scrollbars –resize=yes to allow the user to resize the window myWindow.focus() –Brings your new window into focus myWindow.blur() –Hides your new window

9. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript and Browser Windows Can use JavaScript to write html to the new window myWindow.document.write(‘ …. Can break the document.write into several groups and the dynamically generate content in the

10. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript and Browser Windows You can also close the window you opened Should have a myWindow = null in the inside the head to ensure that the object exists –it will be created on page load if (myWindow && !myWindow.closed) { myWindow.close() } If the object exists and has not already been closed, then close it

11. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript and Browser Windows Can create a Navigation or Control Panel window –Create a new window and load it with a page of hyperlinks –Each hyperlink in the control panel performs an update of the window that opened it –function updateParent(newURL) { opener.document.location = newURL } –When called with a url in the control panel, this function sets the address of the calling window to the linked page

12. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript and Browser Windows Positioning the new window –You can specify the position of the new widow with the “top” and “left” attributes –leftPos = 0 if (screen) { leftPos = screen.width-N } –N represents the width of the new window –Use screen.height for vertical height positioning –window.open(..."width=330,height=250,left="+leftPos +",top=0")

13. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript and Form Validation Allows client-side validation of form data –Saves resources on the server-side –Still need validations in the CGI in the event the browser does not support JavaScript Typically the validation is performed with the onSubmit event – –The validForm function will return true or false and depending upon the result, the form will or will not be sent to the server

14. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript Select and Go Create a form / selection list Create a function that changes the page location Use the onChange event for the form selection object to jump to the new page Should have a cgi function available to perform the same task and use the tag to generate a submit button

15. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript Form Field Validation Multiple form elements can be validated in the same function The simplest style is to make the user correct each error as it is encountered More complex programming is required to display all errors simultaneously

16. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript Form Field Validation Should be validated in the order that they appear on the screen –This make the most logical sense to the user Use the form.field.focus() to position the cursor in the field in error Use the form.field.select() to highlight the contents of the field in error

17. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript Validating Numbers A text field has a datatype of string Must compare character by character looking for non-numeric characters –less than zero ( < 0 ) –greater than 9 ( >9 ) A common function is usually created to validate numeric Used for U.S. zip codes, phone numbers, dollar amounts, quantities, etc.

18. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript E-mail Validation Can validate an e-mail address to eliminate most problems –No method is 100% Look for invalid characters Locate the @ sign and make sure there is only one at sign Look for a period (dot) following the @ sign

19. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript and Regular Expressions Can use regular expressions in JavaScript re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ The above expression validates an e-mail address Regular expressions are very powerful, but can be difficult to read Comment them well

20. Scott Marino MSMIS Summer Session 1 - 2001 JavaScript and Regular Expressions Can use regular expressions for many things –Validation of strings E-mail addresses, phone numbers, zip codes –Splitting text values apart First and last name –Formatting strings with character substitution Formatting a phone number with -’s or ()’s –Sorting strings Sorting a list of strings in a text box