SK | Codebase > Basics

TABLE OF CONTENTS

9. Built-In-Arrays

The JavaScript Document Object Model incorporates a limited subset of document HTML elements, including primarilly images and controls capable of accepting user input and/or events:

Document elements are automatically evaluated as by the parser as environmental variables when the page loads and incorporated as members of one or more arrays of document objects.

Images
Links
Forms and Form Elements
Frames

The JavaScript Document Object Model provides a syntax for dynamically reading and assigning values to the properties of the objects as:

named elements in the full document object array;
named elements or child element in one of the document element-type arrays; or
indexed element or child element of one of the element-type arrays:

9.1 Images

9.1.1 Syntax

document.element-name
document.images['element-name']
document.images[n]

9.1.2 Properties

document.images[n].name
document.images[n].src
document.images[n].height
document.images[n].width

Listing 9.1.1 Images

<script type="text/javascript">

function swap(name,source) {
    document.images[name].src=source;
    return false;
    }

</script>

<p align=center>
<img name="slide"
   src="slide1.jpg"
   border="0">
<br />
<a href="#"
   onclick="return swap('slide','slide1.jpg')">
   Slide 1
</a>
|
<a href="#"
   onclick="return swap('slide','slide2.jpg')">
   Slide 2
</a>
|
<a href="#"
   onclick="return swap('slide','slide3.jpg')">
   Slide 3
</a>

Slide 1 | Slide 2 | Slide 3

9.2 Links

9.2.1 Syntax

document.element-name
document.links['element-name']
document.links['n']

9.2.2 Properties

document.links[n].name
document.links[n].href
document.links[n].title

9.2.3 Listings

Listing 9.2.1 Links

<script type="text/javascript">

function alert_linkprops(name) {
    var href=document.links[name].href;
    var title=document.links[name].title;
    alert(href + "\n" + title);
    return false;
    }

</script>

<a name="link1" 
   onclick="return alert_linkprops(this.name)"
   href="http://sophiaknows.com"
   title="Sophia Main">
   SophiaKnows
</a>

SophiaKnows

Listing 9.2.2 Links & Images

<script type="text/javascript">

function swap(name,source) {
    document.images[name].src=source;
    return false;
    }

function auto_load() {
    for(i=0;i<document.links.length;i++) {
        if(document.links[i].href.search(/[jgp][pin]e?[gf]$/)>-1) {
        preimages[i]=new Image(document.links[i].href);
        }
    }


</script>

<p align=center>
<img name="slide"
   src="slide1.jpg"
   border="0">
<br />
<a href="slide1.jpg"
   onclick="return swap('slide',this.href)">
   Slide 1
</a>
|
<a href="slide2.jpg"
   onclick="return swap('slide',this.href)">
   Slide 2
</a>
|
<a href="slide3.jpg"
   onclick="return swap('slide',this.href)">
   Slide 3
</a>

Slide 1 | Slide 2 | Slide 3

9.3 Forms and Form Elements

9.3.1 Syntax

document.forms['element-name']
document.forms[n]

9.3.2 Properties

document.forms[n].name
document.forms[n].action
document.forms[n].length
document.forms[n].elements

document.forms[n].elements[0]
document.forms[n].elements[forms[n].length-1]

Listing 9.3.1 Forms

<script type="text/javascript">

function getFormProps() {
    for(i=0;i<document.forms.length;i++) {
      name=document.forms[i].name;
      action=document.forms[i].action;      
      name=document.forms[i].length;
      document.write("<p>FORM NAME: "+ name);
      document.write("<p>FORM ACTION: "+ action);
      document.write("<p>FORM LENGTH: "+ length);
      }
    }

</script>

<FORM name="eg1" action="#">

    <input type=text name="text1" />

    <input type=radio name="radio1" checked />
    <input type=radio name="radio1" />

    <select name="select1">
        <option value="1">one
        <option value="2">two
        <option value="3">three        
    </select>
    
</FORM>

9.3.3 Child Elements

document.forms['element-name'].child-element-name
document.forms[n].element[n]

9.3.3.1 Child Element Properties All

document.forms[n].elements[n].name        
document.forms[n].elements[n].value
document.forms[n].elements[n].type

9.3.3.1 Checkbox Properties

document.forms[n].elements[n].checked

9.3.3.1 Radio Button Properties

document.forms[n].elements[n].checked
document.forms[n].elements[n].length
document.forms[n].elements[n][n].checked
document.forms[n].elements[n][n].value

9.3.3.1 Select Menu Properties

document.forms[n].elements[n].length
document.forms[n].elements[n].selectedIndex

document.forms[n].elements[n].options[n].value
document.forms[n].elements[n].options[n].text

Listing 9.3.2 Form Elements

<script type="text/javascript">

function recalc() {
 
    var order=""
 
    // set f to eg2
    f=document.forms['eg2'];

    // get selected option value
    order+=f.select1.options[f.select1.selectedIndex].value + " ";

    // get checked value
    for(i=0;i<f.radio1.length;i++) {
        if(f.radio1[i].checked) order+=f.radio1[i].value;    
        }

    order+=" truck(s)"

    // reset order value
    f.text1.value=order;
    }

</script>


<FORM name="eg2" action="#">

<p>
<input type=text name="text1" value="1 red truck(s)" />
</p>

<p>
<input type=radio value="red" name="radio1" onclick="recalc()" checked /> red
<br />
<input type=radio value="green" name="radio1" onclick="recalc()"  /> green
<br />
<input type=radio value="blue" name="radio1" onclick="recalc()"  /> blue
</p>

<p>
How Many?<br />
<select name="select1" onchange="recalc()" >
    <option value="1" selected>one
    <option value="2">two
    <option value="3">three        
</select>
</p>
    
</FORM>

Part 9 of 9 | Back Part A: Intro >