Document Object Model n341.tplt 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