Logistics End of class today: if you didn’t finish lab on Wed, get it checked off today Wednesday: Test!

Lab Reserved variable names (string, document) –Must be called within –Includes the contents of that script into your page

Lab Valid HTML= Doctype dec. XML root element contains metadata required element in head contains document contents

Lab Web programming is hard –Don’t just copy crap you don’t understand –Write down a plan as comments in your working document

Best looping code ever: var index = (myarray.length -1) % counter; alert(myarray[index]);

JS DOM Document Object Model

Nodes Nodes are anything in an XHTML document Elements / Molecules as Nodes / Atoms

Nodes Text node Element node Document node Attribute node

Accessing Nodes node.getElementById(‘id’) node.getElementsByTagName(‘tag’) Example: mydiv = Document.getElementById(‘mydiv’);

Accessing Nodes

Node Properties n.nodeNameName of a node n.nodevalueValue of a node n.nodeTypeDocument(9), element(1), attribute(2) or text(3) n.parentNodeNode’s Parent n.childNodesArray of children n.attributesArray of attributes

Node Properties (cont) n.previousSiblingPointer to previous element n.nextSiblingPointer to next element n.firstChildFirst child n.lastChildLast child

Getting Node Info

Manipulating Nodes createElement(element_name) insertBefore(ur_node, node) node.appendChild(node) node.removeChild(node)

createElement() var new_para = createElement(‘p’); This creates an instance of an element – it does not add it to the page!!!!!!!!!

createElement() var new_para = createElement(‘p’); var p= Document.getElementById(‘some_p’); document.insertBefore(new_para, p); new_para is now the first child in mydiv (and visible on the page)

createElement() var new_para = createElement(‘p’); var mydiv= Document.getElementById(‘my_div’); mydiv.appendChild(new_para); new_para is now the last child in mydiv (and visible on the page)

Manipulating Nodes

Shortcuts element.innerHTML –Gets or sets all the html content of an element –Supported all major browsers –Not supported by w3c

More Shortcuts: Get or Set element.src –the source of an img, script or iframe element.style.(…css property) element.className –(not element.class to avoid name space collision) element.href (value of a link) element.value (value of an input element)

DOM Properties Almost any valid HTML attribute can be accessed as a DOM property.

Wait, these shortcuts suck Class v. className …. Solution: node.setAttribute(‘attname’, ‘value’);

setAttribute Example: var mydiv = Document.getElementById(‘mydiv’); mydiv.setAttribute(‘class’, ‘highlight’);

Solutions Lightbox: –Function that Takes a string of HTML to display creates a div just under the element –Make that div have a ‘lightbox’ class –In your CSS, let lightbox have 100% height & width A semi-transparent background

Lightbox cont… Create a child div that is smaller than its parent and holds your image, text…what ever Add a ‘close’ link to the string being passed into your lightbox function Set that links onclick attribute to fire a Closelb() function that destroys the lightbox div –Add an onclick event on your page that fires off your lightbox function

Tool tip Very similar to the lightbox Function must take a string, and a x/y pos of the clickable element. Instantiate a new element near the clickable element. Or Unhide a child element within the clickable element

Flyout Menus Using CSS, hide s inside s ul li ul {display: none;} CSS: move child lists along side their parent’s (instead of below) ul { position: relative;} li ul {position: absolute; top: -20px; left: 200px;} Unhide the child list when the parent is mouse over’d using JS. myul.style.display = ‘block’;

Sliding things Position absolute Incrementally (settimeout) increase/decrease top and left values //loop myelement.style.top = myelement.style.top + 1; //end loop Scroll effect: –Specify parent div size –Set parent overflow to ‘hidden’ (css property)

In Class Project Produce a list of links to images. Clicking a link causes the spec’d image to load (without reloading the page). How are you going to store the list of image URLs? What is the edge case?