ITSE 1411 Beginning Web
JS BOM Chapter 4 Discussion
Discussion
  1. The Browser Object Model (BOM) is used to Control the web browser. Objects in the BOM are used to access either the window object or the document object. See Figure 4-1 on page 191.
    1. Use methods and properties of the document object to control the web page.
      • The write() and writeln() methods refer to the document object.
      • All elements on a web page are contained in the document object and are represented in JavaScript by its own object.
      • When coding the object name, always use lowercase letter.
      • Some objects represent arrays. The array elements are assigned in the order that they appear on the page.
      • Some objects can be referenced by name as well as through its array. For example, the first image on a page would be referenced in JavaScript as document.images[0]
    2. Use method and properties of the window object to control the browser window.
      • Window object properties and window object methods are listed in tables 4-1 and 4-2 pages 197 and 198.
      • The self property an be used the same as the window property, for example:
        window.alert("Your order has been received.");
        self.alert("Your order has been received.");
        and in most browsers, the following works:
        alert("Your order has been received.");
    3. Events, when executed, allows coding to change the properties of an object.
      1. The click and dblclick events.
        • The anchor event is associated with the anchor element. When a link is clicked the onclick event handler automatically is called.
        • The onclick even handler can be overridden in the anchor element by coding onclick(). The result of the written onclick returns a true or false to determine if the automatic call occurs.
        • The dblclick and the click event work the same. Double clicks are not used as often as single clicks.
      2. The mouseover and mouseout events.
        • A rollover occurs when the mouse moves over an element. The mouseover occurs when the mouse is over the element. The mouseout occurs when the mouse is no longer over the element.
      3. The mousedown and mouseup events.
        • A mousedown occurs when the mouse points to an element and the mouse button is held down. The mouseup occurs when the mouse button is released.
    4. Event examples this.style reference and defaultStatus property
      1. When you want to change the CSS of the element using a rollover, use the this.style reference. CSS properties written with a hyphen, are written in JavaScript without the hyphen and the second word with uppercase (camel casing) format. for example font-face is fontFace.
      2. The defaultStatus does not work on all browsers. To change the status bar in browsers that recognize the change use window.defaultStatus = "some string";