Web Development

1
Web Development Management

• Developing JavaScripts

2
Student Objectives

• Design JavaScript applications using
• Structure chart
• Pseudocode
• Display information dynamically to user
• Write JavaScript functions to respond to onClick
  events
• Use form to get data from user and then to
  display information back
• Work with window objects
• Write JavaScript functions to respond to
  onMouseOver and onLoad events

3
Administrative Stuff

• Quiz 6
• Website evaluations
• Point values
• Comments
• Next evaluation to include styles, image map,
  scripts
• Miscellaneous questions?

4
And Now the Quiz . . .

• Get out a sheet of paper and write your name in
  the upper right corner
• This is an open book / open note quiz
• Compare and contrast two means of displaying
  results of JavaScript processing address
  relative advantages/disadvantages
• You have 5 minutes, so be concise

5
JavaScript Where Weve Been

• Script basics
• Variables
• Naming
• Declaring
• Assigning values
• Objects
• Types
• Strings
• Arrays
• Math
• Properties methods
• Functions
• Control structures
• Selection structures (if, switch)
• Looping structures (for, while)
• Calculations

6
Planning Your JavaScripts

• Top-down design
• Overall goal broad statement
• Identify the building blocks
• Write pseudocode for modules
• Summarize the processing in each building block
• Dont worry about syntax or statements just
  write in English

7
Script Planning Example Pay Calculations

• Given basic data, calculate and display gross pay
  for an employee
• Get data
• Calculate pay
• Display results
• Could be displayed with a structure chart
• Often each module in the chart represents a
  function or subroutine

8
Pseudocode for Pay Calculations

• Get data from user
• Work category
• Hours worked
• Marital status (possible enhancement)
• Determine wage rate
• Labor
• Carpentry
• Roofing
• Supervision
• Calculate pay
• Gross pay hours wage rate
• Marriage adjustment (possible enhancement)
• Display results

9
Three Example Scripts Pay Calculations

• Example F
• Prompt user for data
• Write page based upon data and results
• Example G(1)
• Get data from form fields
• Use onClick event for Calculate button
• Display result in form field
• Example G(2)
• Same as G(1) but enhanced
• Sets focus on loading
• Opens new windows homepage, help screen

10
Using the DOM

• Document Object Model
• The document is an object contained in the window
  object, and form elements are objects within the
  form object

11
Working with JavaScript Objects

• For each of the objects, the properties can be
• Obtained
• Modified
• Example see G(1)
• Form element value attributes used in
  calculations
• Radio buttons
• Combo box
• Text box
• Form element value attribute set to display
  result of calculation
• Note the dot notation

12
Some Enhancements

• Example see G(2)
• Setting the focus
• Response to loading
• Allows user to get right to form
• Window object
• Methods
• Timeout
• Open
• Parameters
• Size
• Features
• Examples in G(2)
• New window response to mouseover
• New window response to change
• Timeout example (scrolling message)

13
Next Working with Image Objects

• Rollovers
• Trigger other actions
• Replace images
• Animations
• Open windows
• Navigate to other pages
• . . .

14
A Quick Look at Rollovers

• Typically done within the ltagt element
• Refer to the images array within the document
  object
• On event (usually mouseover), change source
  attribute to new file
• Example
• lta
• hrefhome.htm
• onMouseOver
• document.images1.src..images/button2.gif
• gt
• ltimg src../images/button1.gifgt
• lt/agt

15
More on Rollovers

• See HRU Realty exercise at Suzys website
• A closer look next time

16
Next time . . .

• Look at code for rollover example
• Address miscellaneous scripts weve seen already
• Summarize other handy JavaScript uses
• Resolve questions and problems with exercises

17
Review of Objectives

• Design JavaScript applications using
• Structure chart
• Pseudocode
• Display information dynamically to user
• Write JavaScript functions to respond to onClick
  events
• Use form to get data from user and then to
  display information back
• Work with window objects
• Write JavaScript functions to respond to
  onMouseOver and onLoad events