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

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)

• <script src=“path to file”></script>– Must be called within <head>– Includes the contents of that script into your

page

Lab

• Valid HTML=

Doctype dec.

<html> XML root element<head> contains metadata

<title> required element in head

<body> 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 / Moleculesas

Nodes / Atoms

Nodes

Text node

Element node

Doc

umen

t no

de

Attribute node

Accessing Nodes

• node.getElementById(‘id’)

• node.getElementsByTagName(‘tag’)

• Example:

mydiv = Document.getElementById(‘mydiv’);

Accessing Nodes

Node Properties

n.nodeName Name of a node

n.nodevalue Value of a node

n.nodeType Document(9), element(1), attribute(2) or text(3)

n.parentNode Node’s Parent

n.childNodes Array of children

n.attributes Array of attributes

Node Properties (cont)

n.previousSibling Pointer to previous element

n.nextSibling Pointer to next element

n.firstChild First child

n.lastChild Last child

Getting Node Info

• http://www.rpi.edu/~gillw3/websys/dom/ex1.html

http://www.rpi.edu/~gillw3/websys/dom/ex1.html

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 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 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

• http://www.rpi.edu/~gillw3/websys/dom/ex2.html

http://www.rpi.edu/~gillw3/websys/dom/ex2.html

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 <body> 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 <ul>s inside <li>sul 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?

Documents

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