CS 330 Class 5

1
CS 330 Class 5

• Programming plan for today
• Questions on homework
• Closer focus on client-side JavaScript
• the hierarchy of objects
• embedding JavaScript in HTML
• dialogs
• status line
• timeouts and intervals

2
JavaScript Objects

• Idea hierarchy of objects (p. 210) referred to
  as subsidiary to the window object
• document (the contents of the window)
• forms
• elements e.g. document.form0.element0
• anchors
• links ...
• frames
• history
• location
• or, document.simpleForm.Number1 in add.htm

3
JavaScript Objects (cont.)

• window the highest level object.
• Subsidiary objects document, frames, history,
  location, ...
• document an HTML document that is displayed in
  the window. One of its properties
• window.document.lastModified (or
  document.lastModified)
• Example a page with three frames
• window.frame0
• window.frame1
• window.frame2
• See forms.htm

1
0
2
4
EmbeddingJavaScript in HTML

• Between ltscriptgt and lt/scriptgt (fact.htm)
• From an external file (fact2.htm)
• ltscript src scripts/fact.jsgt lt/scriptgt
• In an event handler
• onClick alert(you win the car).
• Omit 12.2.3.1, event handlers in ltscriptgt tags
• In a URL
• javascriptalert(hello)
• Omit 12.2.5, in a style sheet

5
JavaScript Execution

• Scripts executed as browser parses a document.
• NetscapeView/Page Source shows the result of the
  parse, which may differ from what was sent. E.g.
  source for bottom of CS330.htm
• ltscript language"JavaScript"gt
• document.write('Last updated ',document.lastModif
  ied,', CCS')
• lt/scriptgt
• Pages are parsed in order and must not refer to
  as yet undefined objects
• document.form0.element0.value hello in
  the header not OK because form0 has not been
  defined.
• defining a function is OK
• Lengthy scripts can slow down a page loading

6
Windows and Frames (Ch. 13)

• The details.
• Window the top-level object
• Properties p. 229
• Methods p. 230
• More detail beginning on p. 704
• It can be confusing to distinguish between the
  window and the document that is a property and
  the contents of the window.
• Often the name of the window object is omitted
• window.document.lastModfied document.lastModfied
  

7
Dialogs (13.2)

• Windows methods that use pop-up boxes
• alert
• displays a message until user confirms (OK)
• confirm
• expects confirmation (OK) or not (cancel)
• example select from versions of a page
  onLoadif confirm(Do you want a text p. 233
• prompt
• variableName prompt(displayed message)
• the text entered is assigned to variableName

8

• Status line (13.3)
• Windows properties for controlling the status
  line msg.
• So far Mouse over a hypertext link displays the
  URL
• User controlled Page contains a status command
• window.status message (or status message)
• defaultStatus property can also be set
• Example status.htm
• Timeouts and intervals (13.4)
• Code timed to execute at a specific time or
  intervals.
• Often it is initiated when the page is loaded via
  an attribute in ltbodygt or triggered by another
  event and executed at subsequent intervals.
• Example 13-2, p 236 (clock.htm).