The Document Object Model

Goals Understand how a JavaScript can communicate with the web page in which it “lives.” Understand how to use dot notation. Understand how to read form elements. Understand how to work with new windows.

Review – Objects Objects are unique programming entities in scripts or web pages. Objects have properties which describe them; methods (actions that objects can do) and events to which they can react. A property is an object’s characteristic. Typically, properties come in property-value pairs (i.e. - background-color is a property; blue is a value). A method is something that an object can do. An event is an action to which an object can react (i.e. – when a web page loads).

Introducing DOM Describes the way JavaScript (and other client-side languages) can communicate with the web page in which it “lives.” DOM allows us to dynamically update Web pages. Because of DOM, we can now use JavaScript to interact with CSS and other web elements, like form objects.

Introducing DOM DOM relies on interaction with objects in a web page. The document object is considered the “core” object in DOM. The top-level DOM object is the window object. We can dynamically assign values to object properties:

Reading Properties Not only can we change properties dynamically, we can read properties, as well:

Common Document Properties document.bgColor – The background color of the page. document.fgColor – The text color used on a page. document.domain – The address of the web server that houses the page. document.lastModified – The date and the last time someone edited the page.

Common Document Properties document.URL – The address of the web page. document.location – (Deprecated) Same as document.URL document.referrer – The address of the page that linked to the current page. document.title – The text contained in the … tag of the current page.

Common Document Methods document.open() – Begin a new document, replacing existing content (destructive) document.close() – Ends a document begun with the document.open() method document.write() – Append text to the current document document.writeln() – Append text to the current document and include a newline character (line break)

JavaScript Events & DOM Through recording and reacting to events, we make our web page more interactive. We can add this interactivity by detecting events in a document’s environment and writing programming statements to react to those events. Typically, we code this using functions:

Getting Input Using DOM Input is not just text anymore! It can come from form components (text fields, password fields, hidden fields, radio buttons, etc.). We can use dot notation to represent DOM hierarchy. DOM hierarchy provides each form element with its unique “address.”

Dot Notation The unique “address” of an object From L to R, start with the most general, moving to the object itself window.document.myForm.fName.value Browser Window The Current Page Form Name Field Name Value Property

Input using Text Fields Name the form Name all fields Use dot notation to reference specific fields Straight-forward, similar to how we reference variables Other objects that use the same syntax: ◦ textarea ◦ password field ◦ hidden

Input using Check Boxes Name the form Name all fields Use dot notation to reference specific fields Used the “checked” instead of the “value” property Returns a Boolean value: ◦ true ◦ false Use if structure to evaluate

DOM and Arrays For some form objects, we need to use a new type of data structure – an array. What is an array? ◦ An array is a data structure that can hold multiple values (unlike a variable, which can only hold 1 value at a time). ◦ An array is useful when we work with groups of form objects, like radio buttons

Arrays and Memory In a computer’s memory, an array represents multiple contiguous locations that all contain the values of the same data type. We represent each “slot” in an array with a number: ◦ Numbers start at zero. ◦ An element’s position (represented by a number) is called an index (or subscript)

Why use Arrays? Use an array when you need to group values by some common characteristic (e.g. – Students in a classroom). When designing an application that performs the same processing for multiple sets of data, use an array and a looping structure.

Conceptual Example of Arrays 0John 1Mary 2Elizabeth 3Omar 4Charles 5Ravi 6Katherine 7Hannah 8Alexander 9William Array Positions (Elements) – Each number represents the subscript (index) of its corresponding position Array Values – The value stored in contiguous memory cells Array Name = Class

Array Elements Elements populate an array. Each element is a discrete value. We identify elements using a unique index (the element’s “address”). Array index numbering starts with zero and increments by one for each new element.

Declaring an Array To declare an array in JavaScript, we use the array constructor and assign the array to a variable. We give the constructor the size of the array as an argument: var n341Class = new Array(34); At times, we may not know the size of the array when declaring. In such situations, we can declare an empty array: var n341Class = new Array();

Adding Values to an Array To add values to an array, assign the new values while also identifying the index where you want JavaScript to store the new value: n341Class[0] = “Jennifer”; n341Class[1] = “Joseph”; n341Class[2] = “Marcus”; n341Class[3] = “Alex”;

Using a For Loop to Add Values In some instances, we can use a for loop to add values: for(var i=0; i<10; i++) { var newStudent = new String(“”); newStudent = “Student”; newStudent = i.toString(); n341Class[i] = newStudent; }

Parallel (Corresponding) Arrays Parallel arrays gives you the ability to store multiple pieces of information about a single entity in an application. The indexes of each array should correspond to one another for individual entities: ◦ Student ID ◦ Student Name ◦ Student Exam Score

Conceptual Example of Parallel Arrays Array Name = strSID0John1Mary 2Elizabeth 3Omar 4Charles 5Ravi 6Katherine 7Hannah 8Alexander 9William Array Name = strN341Class Array Name = fltExam1Scores

Creating Parallel Arrays To create parallel arrays, just create them as you would any other array: var SID = new Array(); var n341Class = new Array(); var examScr = new Array(); The arrays are separate arrays in memory, but your program should treat them as one …

Assigning Values to Parallel Arrays To assign values for a single entity to parallel arrays, use the same index number for each assignment: SID[5] = “025769”; n341Class[5] = “Ravi”; examScr[5] = 82;

The Array.length Property Just like any JavaScript objects, arrays have properties. One of the most useful properties is the length property, which will give you a count of how many indexes the array has.

The Array.length Property Example of the Array.length property: var golfScores = new Array(); var golfScrSize = 0; golfScores[0] = 72; golfScores[1] = 85; golfScores[2] = 125; //golfScrSize will get the //value of 3 golfScrSize = golfScores.length;

Using Array.length The following code averages the values stored in an array for(var i=0; i<golfScores.length; i++) { sumScores += golfScores[i] } avgScore = sumScores/golfScores.length;

Array Examples Single Array Parallel Arrays

Input using Radio Buttons Name the form. Name the group (each button of the same group has the same name) Assign each button a “value” property. Use an if structure nested in a for loop to evaluate each button.

Input using Selection Objects Similar to radios (use an array to evaluate) No need for a loop because there is only one object rather than several options. Name the form Name the select object Assign each option a “value” property

Outputting to Windows Use a function Create a new window using the open() method of the window object. The open() method takes the following parameters: ◦ URL ◦ Name of the window object ◦ Window properties:  Size  Menus?  Toolbars?

Outputting to Windows - Examples Example 1 Example 2

Questions?

Resources Flanagan, David. JavaScript: The Definitive Guide, 4 th Edition. O’Reilly, 2002.