Scripting Documents

Scripting Documents
Javascript the Definitive Guide by David Flanagan

CpSc 217 - Structured and Dynamic Web Programming

The notes found on these pages all reference the textbook given above. Unless otherwise stated, the citation of the information on these web pages is that text.

Part 1 - Document Structure and traversal

Recall "get" methods

getElementById("ID")
getElementById
getElementsByName("Name")
getElementsByTagName("p")
document.all[] - collection of all elements
Also, can select elements by CSS Class in HTML 5
getElementsByClassName("warning")
Try it

Tree of Nodes

parentNode
childNodes
firstChild, lastChild
nextSibling, previousSibling
nodeType, nodeValue, nodeName

sample - 2nd child of 1st child of Document (the body tag below)

document.childNodes[0].childNodes[1]
document.firstChild.firstChild.nextSibling

<html><head><title>Test</title></head><body>Hello World</body></html>

Try it
Be CAREFUL using these - one change in document and ....
tag attributes can be accessed - see page 378
x=document.getElementsByClassName("test");
ymin=x[0].getAttribute("data-ymin")
HTML5 has outerHTML - replace the element itself
HTML5 has insertAdjacentHTML - not suppored in Firefox

Part 2 - Forms

form object has properties such as name and elements array
See page 397 for an example of for elements or:
Radio buttons, check boxes

Event handlers for forms include:

onclick - mouse click

onchange - triggered when value is changed and user moves focus to another form element

onfocus - triggered when user moves focus to form element

onblur - triggered when form element loses focus

Hidden elements can be used on forms to transmit data to the server

Consider these two functions for form validation:

function report(element, event) {
 if ((element.type == "select-one")) || (element.type == "select-multiple")){
   value=" ";
   for (var i = 0; i < element.options.length; i++)
    if (element.options[i].selected)
 	value += element.options[i].value = " ";
 }
 else if (element.type =="textarea") 
   value = "...";
 else
   value = element.value;
 var msg= event + ": " + element.name + ' (' + value + ')\n';
 var t = element.form.textarea;
 t.value = t.value + msg;
}
function addhandlers(f){
  //loop through all elements of form
  for (var i=0; i < f.elements.length; i++){
    var e = f.elements[i];
    e.onclick = function () { report (this, 'Click'); }
    e.onchange = function () { report (this, 'Change'); }
    e.onfocus = function () { report (this, 'Focus'); }
    e.onblur = function () { report (this, 'Blur'); }
    e.onselect = function () { report (this, 'Select'); }
  }

the report function receives an element object (called from addhandlers function) and uses object attributes to work for all form elements

Lets try it

Some help

Solution

Multiple forms on the page can be accessed by the builtin forms array

document.forms[0] is first form on the page

document.forms.length is the number of forms on the page

Using setTimeout (and setInterval) can be used for animating. SetInterval isn't very reliable, though.

Part 3 - Dynamic Change to document Structure

Creating, Inserting, and Deleting Nodes

Create nodes using createElement
var s=document.createElement("script");
then append or insert the node
Inserting Nodes (page 383)
ElementNode.appendChild(node)
ElementNode.insertBefore(node)
Removing and Replacing Nodes (page 384)
n.parentNode.removeChild(n);
oldNode.parentNode.replaceChild(newNode,oldNode)
Document Fragment
document.createDocumentFragment();
See Example 15-6, page 386. notice insertAdjacentHTML

Document and Element Geometry and Scrolling

X,Y coordinates is in pixels. Upper left is 0,0
Difference between document coordinates and viewport coordinates. Document coordinates don't take scrolling into account, but viewport coordinates do.
document X coordinate of 400 and user scrolls 100 pixels, then viewport coordinate is 500 pixels.
pageXOffset and pageYOffset can be used to determine scrollbar positions
Viewport size of window w:
w.innerWidth and w.innerHeight
Using innerWidth
getBoundingClientRect() returns object with attributes: width, height, right, left, top, and bottom
scrollLeft and scrollTop properties can be set to make browser scroll
Earlier methods scrollTo() and scroll() takes X,Y in document coordinates and sets these as scrollbar offsets
HTML elements have these properties
offsetWidth, offsetHeight, offsetLeft, offsetTop, offsetParent
clientWidth, clientHeight, clientLeft, clientTop
scrollWidth, scrollHeight, scrollLeft, scrollTop