The Document, Window and Navigator Object

So far we have discussed the document object and how it can be used to find objects which represent elements on a page. (either through document.forms, document.head, document.body, document.anchors, document.links, document.images, or document.getElementById). It has several other useful methods which do sorta what their names say:
- Retrieval methods like: Document.getElementsByClassName() (returns an array), Document.getElementsByTagName() (returns an array), etc.
- Creation methods like: Document.createElement(), Document.createAttribute(), Document.createTextNode(), Document.createEvent()
The window object also has some useful properties and methods. We have seen some already alert, document, prompt, etc. are really window.alert, window.document, window.prompt, etc. Other useful properties/methods are:
- window.location which can be used to get and set the url of the web page one is currently looking at. If you set this, the web page will change.
- window.frame array of frame objects associated with window
- window.fullScreen returns whether the browser is in full screen mode
- window.history is a History object which can be used to see/manipulate the browser history (.length, .back(), .forward(), .go(-n))
- window.scroll, window.scrollX, window.scrollY can be used to get/set the horizontal and vertical scroll position of the document within the window.
- window.status can be used to set and get the text status bar that some people have at the bottom of the browser window.
The navigator object (window.navigator) can be used to determine browser type.
It has two properties of interest, appName (always Netscape) and appVersion (can figure out browser by examining)

Element Positioning

Positioning of elements can be done using styles.

It come in a few types absolute, fixed, relative, etc:

<p style="position: absolute; left:100px; top: 200px">some text
</p>
<p style="position: relative; left:10px; top: -20px; width: 50">some other text
</p>

Both positionings can be used to set text on top of other text.
Since you can change the style property of an element in Javascript, you can use positioning to move objects around on the screen dynamically.

Moving Elements

Consider the following Javascript function:

function moveIt(id, newTop, newLeft)
{
myStyle = document.getElementById(id).style;
myStyle.top = newTop + "px"; /* notice how CSS properties are properties of the style object*/
myStyle.left = newLeft + "px";
}

This could be used to move an element to a specific location on the screen.

Element Visibility, Colors and Fonts

You can control the visibility of an XHTML element using the CSS property.

<div id="test" style="visibility: hidden">hi there</div>
<input type="button" onclick='show("test")' />
<script type="text/javascript"> 
	function show(id)
    {
		myStyle = document.getElementById(id).style;
       myStyle.visibility = "visible";
    }
</script>

In a similar fashion one can change other CSS properties in response to events. For instance, if you like you could change the color or font type or size.

Dynamic Content

It is sometimes useful to be able to give help information when a person hovers over a form element. This can be achieved as follows:

<script type="text/javascript" >
msgs = ["<p>mesg0</p>", "<p>mesg1</p>"]
function showMessage(evt, num)
{
   box = document.getElementById("adviceBox");
   box.innerHTML = msgs[num];
   myStyle =box.style;
   myStyle.position = "absolute";
   myStyle.top = evt.clientY +10 +"px"; 
   myStyle.left =  evt.clientX +10 +"px";
   myStyle.visibility = "visible";
}
function hideMessage() 
{
   myStyle = document.getElementById("adviceBox").style;
   myStyle.visibility = "hidden";
}
</script>
<div id="adviceBox" style="visibility:hidden" ></div >
<input type="text" onmouseover="showMessage(event, 1)" onmouseout="hideMessage()" />

Timers

It is sometimes useful to update the contents of a page every so many milliseconds.
Javascript supports this by using either the function setInterval (repeating) or setTimeout (fires once).

For example,

setTimeout(myCallback, repeatTimeInMilliSec);
// myCallback is the Javascript function you would like called

To stop the timer you can use clearTimeout/clearInterval.

var timeout = setInterval(myCallback, 5000);
clearInterval(timeout);

Let's Build Something

Create a small HTML page with an h1 header that says: "Enter Email For Grand Prize Drawing". Beneath this it has a text field with label Email and an Enter button. In a div field below there is a count down clock that is updated every five seconds. Initially, it says, "30 Seconds Left!" If the Enter button is clicked before the 30 seconds is up and the Email field is not empty, the div field says, "You won the grand prize!" If the Enter button is clicked but no data is in the name field, an alert appears saying, "Please Enter Your Email". Finally, if the 30 seconds expires, the div field is replaced with "You missed the drawing!"

Post your code to the Nov 9 Discussion Thread.

Introduction to XML

Recall that HTML was originally specified as an SGML (Standard Generalized Markup Language) doctype.
HTML only provides limited semantic information about a document. You can tell if something is in <h1> tags that is probably important, but not much else.
Starting in 1998 a stripped-down version of SGML called XML (extensible markup language) was developed to make it easier to create new tag-based mark-up languages where the tags can be used to carry whatever semantic information is desired.

The Syntax of XML

A new XML language can be specified in one of several ways, of which we will consider:
- Give a DTD (Document Type Definition) -- this is closer to the SGML way of specifying languages
- Give an XML schema -- unlike DTDs such schemas are also XML documents so can easily be parse with XMLParsers.
Further schemas can be more detailed.
In both a DTD and a schema, one specifies:
1. What tag elements exist in the language
2. What sub-elements or data a given element is allowed to contain
3. What attributes an element has and what their values can be.
Tags are case-sensitive in XML, and every tag must have a close tag, although the abbreviation <element /> works as an implicit close tag.

XML Document Structure and Entities

Let's look at XML document:

<patient type="out of state">
     <![CDATA[This is data that will not be parsed by the XML parser even if it has tags in it like this: <tag>]]>
<name><first>John</first><last>Smith</last></name>
<insurerID>&kaiser;</insurerID>
</patient>

Two files are usually associated with such a document:
1. one specifies what tags will be used with this document
2. another specifies how those tags should be styled.
One can abbreviate parts of a document using entities. For example, &kaiser; above might abbreviate some string of numbers.
Associated with any XML document is a document entity. This can be thought of as the root of the tree associated with the tags of the document. This entity thus can represent the whole document or the parts of it which do not change.
Entities can also be used to reference binary data such as images.

Document Type Definitions

A DTD is used to specify:
1. what tags will be used in a document
2. what kind of data or subtags these tags can hold
3. what attributes the tags can have and what values for these attributes are legal
4. what entities can occur in the document
DTDs can be internal (occur in the XML document itself) or external (occur in some separate file).
A DTD consists of a sequence of declarations enclosed in the block of a DOCTYPE markup declaration. Items 1-4 above correspond to the declaration of type <!ELEMENT ...> (1 and 2), <!ATTLIST ...>, and <!ENTITY ...>
There is also a tag called <!NOTATION ...>which is sometimes used.

<!ELEMENT ..>

Basic syntax of the tag is:

<!ELEMENT element_name 
   (list of names of child elements) SYSTEM Location NDATA NotationName >

Some examples:

<!ELEMENT memo (from, to, date) > 
---- SYSTEM and NDATA don't have to used

<!ELEMENT dept_script SYSTEM "dept.php" NDATA "php" >
<!NOTATION php SYSTEM "/usr/bin/php" >

<!ELEMENT person(parent+, age, spouse?, sibling*) > 
---- + is one or more, ? is optional, and * is 0 or more

<!ELEMENT element_name (#PCDATA) > 
---- pcdata = parsable character data can also use EMPTY 
for no sub-tags or character data or ANY if 
you want to allow everything

<!ATTLIST ..>

The general way to specify a list of attributes is:

<!ATTLIST element_name 
attribute_name_1 attribute_type [default_value] ... attribute_name_n attribute_type [default_value]  >

For example,

<!ATTLIST airplane places CDATA "4">
<!ATTLIST airplane engine_type CDATA #REQUIRED> ---- must have the field
<!ATTLIST airplane price CDATA #IMPLIED> ---- no default value is given
<!ATTLIST airplane manufacturer CDATA #FIXED "cessna"> 
   --- all instances must have the same value

We can define multiple attributes in the same ATTLIST:

<!ATTLIST img src CDATA #REQUIRED
                 width  CDATA #REQUIRED
                 height CDATA #REQUIRED
                 alt    CDATA #IMPLIED
>

We can also list possible values rather than leave it as general as just CDATA:
```
<!ATTLIST horizontal_rule alignment (left|center|right) #IMPLIED >
```

<!ENTITY ..>

Entities come in two flavors:
- General entities that can be referenced anywhere in an XML document
- Parameter entities which can be referenced only in markup declarations
The general form of an entity declaration is:
```
<!ENTITY [%] entity_name "entity value" >
```
% is used when it is a parameter entity

For example,

<!ENTITY cp "Chris Pollett" >
<!ENTITY cool_pic SYSTEM "/usr/local/cool_pic.jpg">

Example DTD

<?xml version = "1.0" encoding ="utf-8" ?>
<!-- planes_for_sale.dtd  -->
<!ELEMENT planes_for_sale (ad+) >
<!ELEMENT ad (year, make, model, color, price?, seller) >
<!ELEMENT year (#PCDATA)>
<!ELEMENT make (#PCDATA)>
<!ELEMENT model (#PCDATA)>
<!ELEMENT color (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ELEMENT seller (#PCDATA)>
<!ATTLIST seller license CDATA #REQUIRED >
<!ENTITY c "cessna" >

Internal versus External DTDs

There are two ways to associate a DTD with an XML document:

Internally --

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE planes_for_sale.dtd [ <!--DTD for planes_for_sale-->]>
<!-- The planes_for_sale document -->

Externally --

<!DOCTYPE planes_for_sale SYSTEM "planes_for_sale.dtd" >

Here is an example complete document that would validate against our planes_for_sale.dtd of a couple slides back

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE planes_for_sale SYSTEM "planes_for_sale.dtd" >
<planes_for_sale>
    <ad>
        <year>1960</year>
        <make>&c;</make>
        <model>150</model>
        <color>white</color>
        <seller license="12345678">Duran Duran</seller>
    </ad>
    <ad>
        <year>1945</year>
        <make>Douglas Aircraft Company</make>
        <model>DC-3</model>
        <color>red</color>
        <seller license="ABCDEFG">Gyro Gearloose</seller>
    </ad>
</planes_for_sale>

Dynamic Javascript, Timers, XML

Outline

The Document, Window and Navigator Object

Element Positioning

Moving Elements

Element Visibility, Colors and Fonts

Dynamic Content

Timers

Let's Build Something

Introduction to XML

The Syntax of XML

XML Document Structure and Entities

Document Type Definitions

<!ELEMENT ..>

<!ATTLIST ..>

<!ENTITY ..>

Example DTD

Internal versus External DTDs