1. Introduction to JavaScript 41 Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 17

2. Introduction to JavaScript 42 Today’s Topics Using events (cont’d) Working with Objects (window, location, history and navigator) Working with Forms

3. Introduction to JavaScript 43

4. 4

5. 5

6. 6 Review: More Effective Image Rollover http://people.cs.uchicago.edu/~hai/hw6/betterimagerollover.html var theOffImage = new Image; var theOnImage = new Image; theOffImage.src ="sunflowers.jpg"; theOnImage.src = "sunflowerlady.jpg"; function rollover (tag){ if (tag == 'on') document.picture.src = theOnImage.src; else document.picture.src = theOffImage.src; } <a href=“#” onMouseOver="rollover('on');" onMouseOut="rollover('off')"> The simple image rollover may produce an unacceptable delay in retrieving and displaying the 2 nd image The new example will improve the efficiency by preloading the images

7. Introduction to JavaScript 47 Using Events with Image Maps Examples:  ShowCountry.html ShowCountry.html  Changing images with MouseOver and MouseOut events.

8. Introduction to JavaScript 48 Image Maps Example: changing images with events. <img src=“north_america.gif” usemap=“#northAmerica_map” name=“northAmerica”> <area shape=“circle” coords=“44,46,20” nohref onMouseOver=“change_image(‘alaska.gif’);return false” onMouseOut=“reset_image(); return false”> <area shape=“poly” …… rest of html code here …….

9. Introduction to JavaScript 49 Image Maps Example: changing images with events. North America function change_image(image_name){ document.northAmerica.src = image_name; } function reset_image(){ document.northAmerica.src = “north_america.gif” }

10. Introduction to JavaScript 410 Using Events More examples:  ImageOver.html ImageOver.html  ShowAnimal.html ShowAnimal.html  ShowAnimal2.html (uses functions) ShowAnimal2.html  FamilyImageMap.html FamilyImageMap.html

11. Introduction to JavaScript 411 Working with Windows The JavaScript Object Model  Browser object model A hierarchy of objects, each of which provides programmatic access to a different aspect of the HTML page or the Web browser window Created automatically when a Web browser opens an HTML document

12. Introduction to JavaScript 412

13. Introduction to JavaScript 413 Working with Windows The JavaScript Object Model  Window object Represents a Web browser window or an individual frame within a window Top-level object in the browser object model Its properties and methods can be used to control the Web browser window

14. Introduction to JavaScript 414 Working with Windows The JavaScript Object Model  Document object Represents an HTML document displayed in a window Descended from a Window object Ancestor (parent) for all elements contained on an HTML page  e.g., all HTML elements descend from the Document object

15. Introduction to JavaScript 415 Working with Windows The JavaScript Object Model  Referencing objects To refer to a JavaScript object in code, you must list all of its ancestors as a series of properties separated by periods (the dot operator) It is not necessary to explicitly refer to the Window object, it is assumed by the browser In some browser versions, it is not necessary to explicitly refer to the Document object

16. Introduction to JavaScript 416 Working with Windows The Window Object  Includes several properties that contain information about the Web browser window  e.g., status property Contains information displayed in a Web browser’s status bar

17. Introduction to JavaScript 417

18. Introduction to JavaScript 418

19. Introduction to JavaScript 419 Working with Windows Opening and Closing Windows  Netscape and Internet Explorer both allow the opening of new Web Browser windows Creates a new window object Use open() method of the Window object Syntax  window.open(“URL”, “name”, options);

20. Introduction to JavaScript 420 Working with Windows Opening and Closing Windows  window.open(“URL”, “name”, options); URL: the address of the content of the window Name: use this as the value of a target in HTML tags.  If a window with this name already exists, open does not create a new window, rather returns a reference to the already opened window.  This name cannot be used in javascript code to reference the window (must use a variable)  This name does not appear in the title.

21. Introduction to JavaScript 421 Working with Windows Opening and Closing Windows  window.open(“URL”, “name”, options); URL: the address of the content of the window  if the URL is empty, the new window will have no content (i.e., it is blank).  Otherwise, the content at the given URL is loaded into the new browser window.

22. Introduction to JavaScript 422 Opening new windows <INPUT TYPE="button" VALUE="About this JavaScript Program" onClick="window.open('About.html', 'About', 'height=100,width=300')"> Note that all options are in a single string. AboutExercise.html

23. Introduction to JavaScript 423 More Examples Recipes.html  Two links, each of which will open in a new window. Links.html  Links open in a new window, but the window is created when the first link is pressed.

24. Introduction to JavaScript 424 Working with Windows Opening and Closing Windows  When opening a new window, it can be customized using the options argument of the open() method Multiple items in the options string must be separated by commas Defaults are provided if no options are specified If any option is specified, then all desired options must be specified. See example later.

25. Introduction to JavaScript 425

26. Introduction to JavaScript 426 Working with Windows Example. Options specified by listing. Below example will have no toolbars, menubars, directory buttons, or location bar. var myWin = Window.open(”Chili.html”, ”Chili”, ”height=350, width=400,scrollbars, resizable, status”); Or var myWin = Window.open(”Chili.html”, ”Chili”, ”height=350, width=400,scrollbars=yes, resizable=yes, status=yes”);  Chili.html Chili.html

27. Introduction to JavaScript 427 Working with Windows Opening and Closing Windows  Referencing a window A Window object’s name property can only be used to specify a target window, and cannot be used in JavaScript code To reference a window in code, the new Window object reference must be assigned to a variable  var newWindow = window.open(“http://course.com”);

28. Introduction to JavaScript 428 Working with the object hierarchy Different ways to access elements in an html page.  Here we just talk about forms The form and every element in it must be named Refer to elements using the dot notation To access the number/string stored or displayed in an element such as a text box use the value property.

29. Introduction to JavaScript 429 Working with the Location Object The Location Object  Allows you to change to a new web page from within JavaScript code  Contains several properties and methods for working with the URL of the document currently open in a Web browser window Go to First Slide

30. Introduction to JavaScript 430 The Location Object  When you modify any property of the Location object, you generate a new URL  The web browser will then automatically attempt to open that new URL Working with the Location Object

31. Introduction to JavaScript 431

32. Introduction to JavaScript 432 The Location Object Example: location.href = “http://www.uchicago.edu Will cause the browser to open the uchicago home page

33. Introduction to JavaScript 433

34. Introduction to JavaScript 434 The Location Object The assign() method is same as the href property: location.assign(“http://www.uchicago.edu”) will cause the uchicago home page to be loaded in the browser. The reload() method is same as the reload button  If no argument or argument is false then the page is reloaded only if it has changed  If argument is true then the page will always reload

35. Introduction to JavaScript 435 The Location Object The replace() method is similar to the href property: location.assign(“http://www.uchicago.edu)  Difference: replace actually overwrites one document with another  Also replaces the old URL entry in the web browser’s history list.  The href property opens a different document and adds it to the history list.

36. Introduction to JavaScript 436 The Location Object Example:  Redirect.html Redirect.html  Redirect2.html Redirect2.html

37. Introduction to JavaScript 437 The History Object  Maintains a history list of all the documents that have been opened during the current Web browser session  Security features History object will not display the URLs on the list In IE: only allows navigation if page is in same domain Working with the History Object

38. Introduction to JavaScript 438

39. Introduction to JavaScript 439 The History Object Example:  http://www.comptechdoc.org/independent/web/cgi/ja vamanual/javahistory.html http://www.comptechdoc.org/independent/web/cgi/ja vamanual/javahistory.html Working with the History Object

40. Introduction to JavaScript 440 Working with the Navigator Objects The Navigator Object  Used to obtain information about the current web browser  Typically used to identify browser

41. Introduction to JavaScript 441

42. Introduction to JavaScript 442 Working with Navigator Object The Navigator Object  Example: NavigatorObjects.html document.writeln(“Browser code name: “ + navigator.appCodeName); document.writeln(“Web browser name: “ + navigator.appName); document.writeln(“Web browser version: “ + navigator.appVersion); document.writeln(“Operating platform: “ + navigator.platform); document.writeln(“User agent: “ + navigator.userAgent); BrowserProperties.html Check DHTML/CSS book page 73 for codes to decide specific browser and platform

43. Introduction to JavaScript 443 Working with Forms Validating a User's Input to a Form with JavaScript  About hidden form fields  About the Form object  How to reference forms and form elements  About form event handlers, methods, and properties  How to e-mail form data

44. Introduction to JavaScript 444 Validating a User’s Input to a Form Hidden Form Fields  Special type of form element that allows the hiding of information from users  Created with tag, setting the TYPE attribute to hidden  Can be used to store information the program needs later

45. Introduction to JavaScript 445 Validating a User’s Input to a Form The Form Object  Enables the use of JavaScript for verifying form information Allows validation before submission to CGI script on server (client-side validation)  Minimizes Web traffic  Simplifies CGI script

46. Introduction to JavaScript 446 The elements[ ] array contains all the elements used in the form. The form array contains all forms in the document

47. Introduction to JavaScript 447 Validating a User’s Input to a Form The Form Object  Referencing Forms and Form Elements Each document object includes a forms[ ] array that contains all of an HTML document’s forms Each form object includes an elements[ ] array that contains all of a form’s elements Placed into array in order they are placed in form To reference third element in second form:  document.forms[1].elements[2]

48. Introduction to JavaScript 448 Validating a User’s Input to a Form The Form Object  Referencing Forms and Form Elements NAME attribute  Allows JavaScript to reference the item (e.g., form, element, etc.)  If multiple form elements share the same name, JavaScript creates an array out of those elements Radio buttons document.demographics.ageGroup[1].value

49. Introduction to JavaScript 449 Validating a User’s Input to a Form The Form Object  Form Event Handlers onSubmit  Executes when a form is submitted to a CGI script using a submit or an image input tag onReset  Executes when a reset button is selected on a form

50. Introduction to JavaScript 450 Validating a User’s Input to a Form The Form Object  Form Methods Form object contains two methods  submit() Used to submit a form without the use of a submit tag  reset() Used to clear a form without the use of a reset tag

51. Introduction to JavaScript 451 Validating a User’s Input to a Form The Form Object  Form Properties Form object includes:  Several properties that correspond to the attributes of the tag  Properties containing information about form elements

52. Introduction to JavaScript 452

53. Introduction to JavaScript 453

54. Introduction to JavaScript 454 Validating a User’s Input to a Form Examples:  ConfirmForm.html and ConfirmForm2.html (simple confirmation examples) ConfirmForm.htmlConfirmForm2.html  PurchaseOrder.html (confirmation of values before submitting) PurchaseOrder.html  MathQuiz.html (using hidden fields) MathQuiz.html  ProductRegistration.html (using hidden fields for creating a multiple page form). Second form page is ProductInfo.html ProductRegistration.htmlProductInfo.html  Calculator.html (hidden fields etc.) Calculator.html  http://people.cs.uchicago.edu/~hai/hw6/form.html http://people.cs.uchicago.edu/~hai/hw6/form.html

55. Introduction to JavaScript 455 Hw6 Discussions Problem1: Client-side Form Validation Problem2: Browser and OS detection http://www.classes.cs.uchicago.edu/classe s/archive/2004/winter/10100- 1/02/hw6/requirements.txt http://www.classes.cs.uchicago.edu/classe s/archive/2004/winter/10100- 1/02/hw6/requirements.txt