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 Reading gets a little further from where you are comfortable. Some sections are to slog through and return to later. Concepts important and appear in different contexts. Object-oriented aspects do not look a lot like C++ Similarities with VB.
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.form[0].element[0]* anchors[ ] links[ ] ... frames[ ] history location … * or, document.simpleForm.Number1 in add.htm Script tags: just IIE Style sheets: not standard enough. Will do in HTML
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.frame[0] window.frame[1] window.frame[2] See forms.htm 1 2
EmbeddingJavaScript in HTML Between <script> and </script> (fact.htm) From an external file (fact2.htm) <script src= “scripts/fact.js”> </script> In an event handler onClick= “alert(‘you win the car’). Omit 12.2.3.1, event handlers in <script> tags In a URL javascript:alert(‘hello’) Omit 12.2.5, in a style sheet Script tags: just IIE Style sheets: not standard enough. Will do in HTML
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: <script language="JavaScript"> document.write('Last updated: ',document.lastModified,', CCS') </script> Pages are parsed in order and must not refer to as yet undefined objects document.form[0].element[0].value = ‘hello’ in the header not OK because form[0] has not been defined. defining a function is OK Lengthy scripts can slow down a page loading Script tags: just IIE Style sheets: not standard enough. Will do in HTML
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 Script tags: just IIE Style sheets: not standard enough. Will do in HTML
Dialogs (13.2) Windows methods that use pop-up boxes alert confirm displays a message until user confirms (OK) confirm expects confirmation (OK) or not (cancel) example: select from versions of a page [onLoad=“if confirm(‘Do you want a text… p. 233 prompt variableName = prompt(‘displayed message’) the text entered is assigned to variableName
Timeouts and intervals (13.4) 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 <body> or triggered by another event and executed at subsequent intervals. Example 13-2, p 236 (clock.htm). Look at cs 330 page and mouse over mailto, internal links, external links