outline

Motivation

• Connect JavaScript with HTML
• JavaScript communicates with the page it 'lives in'
• Achieved through Document Object Model (DOM)

DOM

• A model for describing a web page that already exists
• DOM heavily dependant on object oriented design
• The page, all the constituent elements in it and the browser are considered objects

Object Oriented Design

• Object Oriented Programming (OOP)
• Think of various parts of a program as objects

Objects have Properties

• Consider physical world
  
    Example: Stapler has properties
    - color
    - staple size
    - number of staples
    - syntax: alert (myStapler.numberOfStaples);

'Core' Object

• The Document is the core object
• A web page is essentially a document
• Documents have properties
• Example:
    - background color

Sample Syntax

• <center>
  <h1>Background Switcher</h1>
  This page will change colors!! </center>
  <script>
  document.bgColor = "red";
  alert ("Press for a new color");
  document.bgColor = "orange";
  alert ("Press for a new color");
  document.bgColor = "yellow";
  alert ("Press for a new color");
  </script>

Note on Properties

• Not all have the same behavior
• Some can be read from and written to
• Others can be read, but not changed by a script (property.domain)
• Consult up-to-date reference manuals to determine which properties will be available

Methods

• In addition to properties, objects have methods
• Properties are like adjectives, methods are like verbs
• Methods are the things an object can do

Example

• <center>
  <h1>Document Methods Example</h1>
  </center>
  <script>
  var userName;
  userName = prompt ("What is your name?");
  document.write("<h3>Hello, " + userName + "! </h3>");
  </script>

Events

• Events are stimuli that an object recognizes
• Events are basically signals that an object sends out

Example

• <form name = theForm>
  <input type = button
      name = btnHi
      value = "don't click me"
      onClick = 'alert("Och!!")'>
  </form>

Important Notes

• We used a form and give the form and all the form objects names using the name attribute.
• We put a button in the form, adding onClick parameter
• Objects that might generate events have an onClick parameter

Functions

• The 'one line' of JavaScript you are allowed is great, however, most of the time you will need to do things that are more involved

Example

• <script>
  function sayOuch(){
     //this 'mini' program says ouch
     //it can be as many lines long as I wish
     alert ("Ouch!!");
  }//end function
  </script>

Example continued

• <form name = theForm>
  <input type = button
      name=btnHi
      value = "Don't click me"
      onClick = "sayOuch()">
  </form>

Functions Continued

• Functions are nothing more than grouping together several lines of code and giving it a name
• In the same way that a variable is a place-holder for data, a function is a place-holder for instructions
• Functions are usually stored in the header area so they will be defined before they are needed in code

Input/Output - the Event-DrivenWay

• One method of input (the prompt command)
• Two methods of output (alert and document.write())
• document.write() method has some problems
  - the user is not guaranteed to see the output of the command until the page has finished loading

Getting Input from Other Objects

• Text-like objects
  - checkboxes
• Generally, when you work with checkboxes, you will want to do some kind of a conditional check on the checked property of the item

Radio Buttons

• Radio buttons work in groups - only one item in a radio group can be selected
• Mechanism is to give all radio objects the same name property
• Several items with the same name is an example of an array
• George Foreman scenario- George[1], George[2], etc.

Arrays

• Think of the entire list of radio buttons as one element
• We are using the loop to look at the elements individually
• Once this is done, we can extract the value property that was stored in the HTML

Selection Objects

• Important to recognize that the select object is one object and it contains an array of option objects
• The selected property of the selected tell which element in the object's array was selected, so we do not need a loop

Selection Objects Continued

• Extract the value through a series of steps
  - create a bunch of variables
  - use a variable to hold the selection object
  - another variable to hold the index of the item the user selects
  - another variable for the item itself
  - finally a variable for the output

Selection Objects Continued

• Assign theSelect the value of the selection object
• The selection object has a selectedIndex property which returns the numeric index of whatever item was selected
• The select object has a number of option elements attached to it - these elements are essentially a list

Section Objects

• Number lists, in programming, are referred to as arrays denoted by [..] brackets