Getting Started with JavaScript

• Browser object model
  • Limited object orientation
    • Unlike more complex languages (Java, C++, SmalTalk), JavaScript only partially conforms to the tenets of Object-Oriented Programming (OOP). The trade-off is much simpler programming in exchange for limited flexibility. This trade-off is common to many other scripting languages.
    • For the purposes of learning JavaScript, object orientation can be thought of as a hierarchical way to organize the information and actions that pertain to the browser and to the web pages it displays.
      • In a hierarchical system, objects with a broader scope are said to be the ancestors of more specific objects, called descendants. For instance, a web page's form object is the ancestor of a number of input objects (such as checkboxes and fields).
      • Each object comprises pieces of information called properties (e.g., the text in the status bar of a browser window) and program instructions called methods (e.g., to scroll the contents of the window).
      • Inheritance means that the properties and methods of ancestor objects automatically apply to its descendants.
      • If some inherited properties or methods are not suitable, descendant objects can be set to override inherited traits with their own properties or methods.
      • Finally, the sequencing of program instructions is simplified by the use of message passing.
        • Rather than trying to anticipate every possible sequence of events, the programmer only has to specify how each object will respond to events that pertain to that object--regardless of the order in which those events occur.
        • This relieves the programmer from having to account for possible undesirable interactions between objects, as well as dividing program code into more manageable chunks.
    • The structure of the browser object model is easy to learn because it is a reflection of the hierarchical structure inherent to an HTML page.
      • The browser object model, however, also includes objects for browser settings that are beyond the control of HTML, such as the size of windows and the contents of the history list.
      • Additionally, JavaScript itself provides a variety of objects for 'utility' functions, such as date and math calculations.
  • Structure of the model
    • navigator
      This object's properties provide information about the browser program itself (such as version number). It contains no other objects.
    • window
      This is the top-level object and the container for all other objects. If the page is divided into frames, each frame has its separate window object.
      • location
        This object's properties provide information about the URL of the current web page.
      • history
        This object's properties provide information about the URL of previously visited web pages.
      • document
        This object's properties describe the page as a whole (e.g., background color, title. etc.) It may contain any number and combination of objects, depending on the HTML elements that make up the web page.
        • anchor
          These objects reflect the A tags with NAME parameters contained within the HTML body.
        • applet
          Reflect APPLET tags, used to embed Java programs in the web page.
        • area
          Reflect AREA tags in the HTML body, used for client-side image maps.
        • form
          Reflect FORM tags in the HTML body.
          • form objects contain additional objects, one for each elemnt in the HTML form.
        • image
          Reflect IMG tags in the HTML body.
        • link
          Reflects links created with HREF parameters to A and AREA tags in the HTML body.
  • Notation
    • Objects can be identified by name or numerically
      • Naming an object involves adding a NAME attribute to the tag it reflects.
        • For instance, if the HTML contains:
          <IMG SRC="cityscape.jpeg" NAME="parislanuit">
          then JavaScript can indicate the corresponding image object by its name parislanuit
      • Numbering of same-type objects is done automatically by the browser, following the order in which they appear in the HTML file. This inventory of objects is called an array, and the object model includes arrays for most HTML features. To indicate a specific object, type the name of the array (usually the plural form of the object type) followed by its sequential number enclosed in [] (square brackets).
        • For instance, given this HTML file:
          <HTML>
          <HEAD><TITLE>Some Pictures</TITLE></HEAD>
          <BODY>
          <IMG SRC="cityscape.jpeg><BR>
          <IMG SRC="flower.jpeg><BR>
          <IMG SRC="billowyclouds.jpeg><BR>
          </BODY>
          </HTML>
          then JavaScript can be used to access the flower image object numerically as images[1]. Note that the sequence starts with zero, so the second object is item number 1.
    • To specify an object in a script, list the names of all its ancestor objects followed by its name. The names are separated by periods. The following example:
      document.entryForm.elements[0]
      accesses the first element (that is, any control or field) of the form called entryForm within the current web page.
    • In JavaScript's notation, descendant objects and properties are handled in the same manner. The following example:
      document.entryForm.elements[0].value
      accesses the value property (for a button, this is the text of the label) of the first element of the form called entryForm within the current web page.
    • Additionally, the same basic notation is used to invoke an object's methods. The following example:
      document.write("<H2>This is a Dynamic Subhead</H2>")
      uses the write method of the current web page object to add a line of HTML code to the page.