Introduction to Programming the WWW I

1
Introduction to Programming the WWW I

• CMSC 10100-1
• Winter 2004
• Lecture 17

2
Todays Topics

• Using events (contd)
• Working with Objects (window, location, history
  and navigator)
• Working with Forms

3
(No Transcript)
4
(No Transcript)
5
(No Transcript)
6
Review More Effective Image Rollover

• http//people.cs.uchicago.edu/hai/hw6/betterimage
  rollover.html
• lthtmlgt ltheadgt
• ltscript language"javascript"gt
• 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
  
• lt/scriptgt
• lt/headgtltbodygt
• lta hrefonMouseOver"rollover('on')"
• onMouseOut"rollover('off')"gt
• ltimg src"sunflowers.jpg" name"picture"
  border"0gt
• lt/agt
• lt/bodygtlt/htmlgt

• The simple image rollover may produce an
  unacceptable delay in retrieving and displaying
  the 2nd image
• The new example will improve the efficiency by
  preloading the images

7
Using Events with Image Maps

• Examples
• ShowCountry.html
• Changing images with MouseOver and MouseOut
  events.

8
Image Maps

• Example changing images with events.
• ltimg srcnorth_america.gif
• usemapnorthAmerica_map namenorthAmericagt
• ltmap namenorthAmerica_mapgt
• ltarea shapecircle coords44,46,20 nohref
• onMouseOverchange_image(alaska.gif)return
  false
• onMouseOutreset_image() return falsegt
• ltarea shapepoly
• rest of html code here .
• lt/mapgt

9
Image Maps

• Example changing images with events.
• lthtmlgt
• ltheadgt
• lttitlegtNorth Americalt/titlegt
• ltscript languageJavaScriptgt
• function change_image(image_name)
• document.northAmerica.src image_name
• function reset_image()
• document.northAmerica.src north_america.gif
• lt/scriptgt
• lt/headgt

10
Using Events

• More examples
• ImageOver.html
• ShowAnimal.html
• ShowAnimal2.html (uses functions)
• FamilyImageMap.html

11
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
(No Transcript)
13
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
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
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
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 browsers
  status bar

17
(No Transcript)
18
(No Transcript)
19
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
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
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
Opening new windows

• ltHTMLgt
• ltBODYgt
• ltFORMgtltINPUT TYPE"button" VALUE"About this
  JavaScript Program"
• onClick"window.open('About.html', 'About',
  'height100,width300')"gt
• lt/FORMgt
• lt/BODYgt
• lt/HTMLgt

Note that all options are in a single string.
AboutExercise.html
23
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
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
(No Transcript)
26
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,
  height350, width400,scrollbars, resizable,
  status)
• Or
• var myWin Window.open(Chili.html, Chili,
  height350, width400,scrollbarsyes,
  resizableyes, statusyes)
• Chili.html

27
Working with Windows

• Opening and Closing Windows
• Referencing a window
• A Window objects 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
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
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
Working with the Location Object

• 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

31
(No Transcript)
32
The Location Object

• Example
• location.href http//www.uchicago.edu
• Will cause the browser to open the uchicago home
  page

33
(No Transcript)
34
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
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
  browsers history list.
• The href property opens a different document and
  adds it to the history list.

36
The Location Object

• Example
• Redirect.html
• Redirect2.html

37
Working with the History Object

• 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

38
(No Transcript)
39
Working with the History Object

• The History Object Example
• http//www.comptechdoc.org/independent/web/cgi/jav
  amanual/javahistory.html

40
Working with the Navigator Objects

• The Navigator Object
• Used to obtain information about the current web
  browser
• Typically used to identify browser

41
(No Transcript)
42
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
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
Validating a Users Input to a Form

• Hidden Form Fields
• Special type of form element that allows the
  hiding of information from users
• Created with ltinputgt tag, setting the TYPE
  attribute to hidden
• Can be used to store information the program
  needs later

45
Validating a Users 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
(No Transcript)
47
Validating a Users 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 documents forms
• Each form object includes an elements array
  that contains all of a forms elements
• Placed into array in order they are placed in
  form
• To reference third element in second form
• document.forms1.elements2

48
Validating a Users 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.ageGroup1.value

49
Validating a Users 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
Validating a Users 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
  ltinputgt tag
• reset()
• Used to clear a form without the use of a reset
  ltinputgt tag

51
Validating a Users Input to a Form

• The Form Object
• Form Properties
• Form object includes
• Several properties that correspond to the
  attributes of the ltformgt tag
• Properties containing information about form
  elements

52
(No Transcript)
53
(No Transcript)
54
Validating a Users Input to a Form

• Examples
• ConfirmForm.html and ConfirmForm2.html (simple
  confirmation examples)
• PurchaseOrder.html (confirmation of values before
  submitting)
• MathQuiz.html (using hidden fields)
• ProductRegistration.html (using hidden fields for
  creating a multiple page form). Second form page
  is ProductInfo.html
• Calculator.html (hidden fields etc.)
• http//people.cs.uchicago.edu/hai/hw6/form.html

55
Hw6 Discussions

• Problem1 Client-side Form Validation
• Problem2 Browser and OS detection
• http//www.classes.cs.uchicago.edu/classes/archive
  /2004/winter/10100-1/02/hw6/requirements.txt