logistics end of class today: if you didn’t finish lab on wed, get it checked off today wednesday:...
Post on 22-Dec-2015
215 views
TRANSCRIPT
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
Accessing Nodes
• node.getElementById(‘id’)
• node.getElementsByTagName(‘tag’)
• Example:
mydiv = Document.getElementById(‘mydiv’);
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
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
• 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)
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)