1 / 29

Logistics

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.

lesley-lane
Download Presentation

Logistics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. Lab • Valid HTML= Doctype dec. <html> XML root element <head> contains metadata <title> required element in head <body> contains document contents

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

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

  6. JS DOM Document Object Model

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

  8. Nodes Element node Attribute node Document node Text node

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

  10. Accessing Nodes

  11. Node Properties

  12. Node Properties (cont)

  13. Getting Node Info • http://www.rpi.edu/~gillw3/websys/dom/ex1.html

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

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

  16. createElement() varnew_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)

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

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

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

  20. 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)

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

  22. Wait, these shortcuts suck • Class v. className …. !*@ *#!)(*@ • Solution: node.setAttribute(‘attname’, ‘value’);

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

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

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

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

  27. Flyout Menus • Using CSS, hide <ul>s inside <li>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’;

  28. 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)

  29. 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?

More Related