HTML DOM The Document Object Model is a Javascript class that defines HTML elements as objects. It supports … properties methods events Image from http://www.w3schools.com/js/js_htmldom.asp See http://www.w3schools.com/jsref/dom_obj_document.asp for more on the DOM

DOM Elements Finding elements: document.getElementById(id) document.getElementsByTagName(tag) document.getElementsByClassName(class) Finding HTML objects: document.links document.readyState document.lastModified Changing elements: element.innerHTML = new html content element.attribute = new value element.setAttribute(attribute, value) element.style.property = new property Arguments must be passed as strings See http://www.w3schools.com/js/js_htmldom_document.asp for more HTML objects readyState is either loading, interactive, or complete (returned as a string)

HTML DOM Events There are 3 ways of registering event handlers for a DOM element: HTML Attribute: <button id="mybutton" onclick="alert('Hello world!')"> Event Listener: var myButton = document.getElementById("mybutton"); myButton.addEventListener('click', function(){alert('Hello world');}, false); DOM Element Property: myButton.onclick = function(event){alert('Hello world');}; See https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events for how to register handlers See http://www.w3schools.com/jsref/dom_obj_event.asp for a list of event handlers

Types of Events Mouse events Keyboard events Form events Media events onclick, ondblclick onmousedown, onmouseup onmouseover, onmouseout Keyboard events onkeydown, onkeypress, onkeyup Form events onfocus, onblur onchange, onselect onsubmit Media events oncanplay, onwaiting, onpause See http://www.w3schools.com/jsref/dom_obj_event.asp for a complete listing

Event Functions Event handlers can accept an argument of this to refer to what was clicked on function changeIt(obj) { obj.innerHTML = "I've changed!"; } … <p onclick="changeIt(this)"> Click on this paragraph to change it </p> Event handlers can also accept an argument of event: to access the event's properties function locateIt(evt) { var xval = evt.clientX; var yval = evt.clientY; alert("Clicked at " + xval + ", " + yval); } … <p onclick="changeIt(this)"> Click somewhere on this paragraph to see a location </p> See https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events for how to register handlers See http://www.w3schools.com/jsref/dom_obj_event.asp for a list of event handlers

Event Object Properties Event handlers can accept an argument of this to refer to what was clicked on function changeIt(obj) { obj.innerHTML = "I've changed!"; } … <p onclick="changeIt(this)"> Click on this paragraph to change it </p> Event handlers can also accept an argument of event: to access the event's properties function locateIt(evt) { var xval = evt.clientX; var yval = evt.clientY; alert("Clicked at " + xval + ", " + yval); } … <p onclick="changeIt(this)"> Click somewhere on this paragraph to see a location </p> See https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events for how to register handlers See http://www.w3schools.com/jsref/dom_obj_event.asp for a list of event handlers See http://www.javascriptkit.com/jsref/event.shtml for event properties, and http://www.quirksmode.org/js/events_properties.html for a discussion on how these properties vary among web browsers.

Example: Slideshow 1) Create containers using absolute-positioned container elements <header> <h1>Visions of Maine</h1> </header> <div id="leftscroll"> <button onclick="scrollleft()"> <<</button></div> <div id="rightscroll"> <button onclick="scrollright()"> >></button></div> <div id="imgcontainer"> <img id="myimage"> </div>

Example: Slideshow 2) Style the elements so that they are centered #leftscroll { position: absolute; left: 0px; top: 50%; height: 50px; margin: -25px 0 0 20px; } #rightscroll { right: 0px; top: 50%; height: 50px; margin: -25px 20px 0 0; #imgcontainer { left: 150px; top: 100px; right: 150px; bottom: 30px; img { position: relative; height: 100%; width: auto; margin: 0 auto 0 auto; See https://codemyviews.com/blog/how-to-center-anything-with-css for tips on centering divs

Example: Slideshow 3) Define the images in an array var plist = new Array("img1.jpg", "img2.jpg", "img3.jpg"); var pindex = 0; var plen = plist.length; 4) Define the scrolling functions var myImage = document.getElementById("myimage"); myImage.src = plist[0]; function scrollright() { pindex++; if (pindex >= plen) pindex = 0; myImage.src = plist[pindex]; } function scrollleft() { pindex--; if (pindex < 0) pindex = plen-1;