B118 Web Programming

1
B118 Web Programming

• Session 8 Dynamic HTML
• March 22, 2004

2
Tonights Agenda

• Administrative
• JavaScript wrap-up
• Document Object Model JavaScript
• Quiz

3
Administrative

• Individual presentation
• Term project FTP access

4
Administrative Term Project

• FTP information
• ftp//cypress.cob.sjsu.edu/b118w
• WS_FTP LE demo?

5
Midterm 2 Study Guide

• Understand
• window.prompt (chapter 8)
• while loops (chapter 14)
• if statements (chapter 12)
• parseInt and parseFloat math object (chapter
  11)
• functions in general (chapter 9)
• onclick buttons (chapter 8)
• text area (chapter 10)
• forms (chapter 10)
• how to define and apply internal style sheets
  (chapter 3)

6
Midterm 2 Study Guide (contd)

• Coding questions based on the following session
  note exercises

7
JavaScript Object Hierarchy

• JavaScript objects contain
• Properties that are JavaScript variables or other
  objects
• Functions that are known as the object's methods.

8
JavaScript Objects and Methods

• objectName.propertyName
• myCar.make Pontiac"myCar.model
  TransAm"myCar.year 2000
• objectName.propertyName.methodName
• myCar.make.value would return the value of
  myCar.make (if value were defined as a valid
  method)
• Everythings case sensitive

9
JavaScript Objects and Methods (contd)

• document.codelab.codefield.value
• Retrieves the codefield property from the
  textarea object contained in the codelab form
  object of the document object being displayed.

ltheadgt ltscript type'text/javascript'
language'javascript'gt function runCode()
eval(document.codelab.codefield.value) lt/script
gtlt/headgt ltbodygt ltform name"codelab"gt ltpgtlttextarea
name"codefield" rows4 cols60gtlt/textareagt ltbrgtlt
brgtltinput type"button" onclick"runCode()"
value"Run Code"gtlt/pgt lt/formgt lt/bodygt
10
National Parks Slideshow

• Responds to mouse events
• ltimg id"slideShow" onmouseover"mouseOver()"
  onmouseout"mouseOut()"
• Responds to onload event
• ltbody onload"changeImage()"gt
• Changes slideShow source properties
• document.slideShow.srcpark_imagecurrent_image.s
  rc
• Uses object array to store picture parameters

function park_object(name,photo)
this.name name this.photo
photo
11
National Parks Slideshow

• Checks for an ltimggt object

if (document.images) //do this code only if
there's //an image
defined for the page!
12
Practice Exercises for Midterm 2

• Exercise 5.11 (Session 3 Notes) create an XHTML
  document that displays a tic-tac-toe table with
  player X winning. Use lth2gt to mark up both Xs and
  Os. Center the letters in each cell horizontally.
  Title the game using an lth1gt tag. This title
  should span all three columns. Set the table
  border to one.

13
Practice Exercises for Midterm 2

• Exercise 6.8 (Session 4 Notes) Write an XHTML
  document that shows the results of a color
  survey. The document should contain a form with
  radio buttons that allows users to vote for their
  favorite color. One of the colors should be
  selected as a default. The document should also
  contain a table showing various colors and the
  corresponding percentage of votes for each color.
  (Each row should be displayed in the color to
  which it is referring.) Use attributes to format
  width, border and cell spacing for the table. You
  don't need to make the Submit and Clear buttons
  do anything if they're clicked. Screen shot of
  one possible solution.

14
Practice Exercises for Midterm 2

• This exercise and the others following it are
  from Session 6 Notes
• Exercise 7.18 write a script that inputs three
  integers from the user and displays the sum,
  average, product, smallest and largest of the
  numbers in an alert dialog. Screen shot of one
  possible solution. Instructor's note Figure
  7.15 of the Deitel, Deitel text is an example
  program that can help you get started. View the
  program by clicking here.

15
Practice Exercises for Midterm 2

• Exercise 7.26 write a script that reads five
  integers and determines and outputs XHTML text
  that displays the largest integer and the
  smallest integer in the group. Use only IF
  statements to do the comparison tests. Screen
  shot of one possible solution.

16
Practice Exercises for Midterm 2

• Exercise 8.11 drivers are concerned with the
  mileage obtained by their automobiles. One driver
  has kept track of several tankfuls of gasoline by
  recording the number of miles drive and the
  number of gallons used for each tankful. Develop
  a JavaScript program that will input the miles
  driven and gallons used (both as integers) for
  each tankful. The program should calculate and
  output XHTML text that displays the number of
  miles per gallon obtained for each tankful and
  prints the combined number of miles per gallon
  obtained for all tankfuls up to this point. Use
  prompt dialogs to obtain the data from the user.
  Screen shot of one possible solution.

17
Practice Exercises for Midterm 2

• Exercise 8.12 develop a JavaScript program that
  will determine whether a department-store
  customer has exceeded the credit limit on a
  charge account. For each customer, the following
  facts are available
• Account number
• Balance at the beginning of the month
• Total of all items charged by the customer this
  month
• Total of all credits applied to this customer's
  account this month
• Allowed credit limit
• The program should input each of these facts from
  prompt dialogs as integers, calculate the new
  balance ( beginning balance charges -
  credits), display the new balance and determine
  whether the new balance exceeds the customer's
  credit limit. For customers whose credit limit is
  exceeded, the program should output XHTML text
  that displays the message "Credit limit
  exceeded." Screen shot of one possible solution.

18
Practice Exercises for Midterm 2

• Exercise 8.16 Write a JavaScript program that
  uses looping to print the following table of
  values. Output the results in an XHTML table.

N 10N 100N 1000N 1 10 100 1000 2 20
200 2000 3 30 300 3000 4 40 400 4000 5
50 500 5000