Introduction to JavaScript – Part III Hamid Zarrabi-Zadeh Web Programming – Fall 2013 2 Outline

• (DOM) • The Browser Object Model • Handling • Exception Handling 3 Document Object Model

• The Document Object Model (DOM) defines a standard for accessing documents through an object model • DOM is platform and language independent • It allows programs and scripts to dynamically access and update the content, structure, and style of a document 4 The W3C DOM

• The W3C DOM standard is separated into three different parts:  Core DOM - standard model for all document types  XML DOM - standard model for XML documents  HTML DOM - standard model for HTML documents 5 The HTML DOM

• The HTML DOM defines:  The HTML elements as objects  The properties of all HTML elements  The methods to access all HTML elements  The events for all HTML elements 6 The HTML DOM Tree

• The HTML DOM represents HTML document as a tree of objects 7 Finding Elements

• Using get methods  getElementById  getElementsByName  getElementsByTagName  getElementsByClassName • Using document object collections  anchors, forms, images, links

var x = document.getElementById('main'); var y = x.getElementsByTagName('p'); var = document.forms[0]; 8 Getting Information

• For each element, information can be obtained from  nodeValue – The text of a text node  nodeName – The tag name  nodeType – The type of node (a number)  innerHTML – The inner HTML content

var x = document.getElementById('main'); alert(x.nodeName); 9 Updating Elements

• Change HTML content  element.innerHTML = new HTML • Change an HTML attribute  element.attribute = new value

var x = document.getElementById('image'); x.src = 'sun.png' x.title = 'The Sun!'; 10 Changing Style

• We can change the style of an element using the element's style object  element.style.property = new style

var x = document.getElementById('main'); x.style.color = 'blue'; x.style.backgroundColor = '#eee'; 11 Navigating DOM Tree

• Navigation pointers  parentNode, firstChild, lastChild, childNodes, nextSibling, previousSibling

• Root pointers  document.body  document .documentElement 12 Add/Remove Elements

• Methods for adding/removing HTML elements  createElement  createTextNode  appendChild  removeChild

var p = document.createElement('p'); var node = document.createTextNode('Test'); p.appendChild(node);

var div = document.getElementById('main'); div.appendChild(p); Event Handling 14 Assign Event Handlers

• Using HTML event attributes  • Using HTLM DOM events

var x = document.getElementById('button'); x.onclick = function() { this.innerHTLM = Date(); } 15 Common Events

• Mouse Events  onclick, ondblclick, onmouseover, onmouseout • Keyboard Events  onkeypress, onkeydown, onkeyup • Events  onload, ununload, onresize, onscroll • Form Events  onfocus, onblur, onchange, onsubmit 16 Timing Events

• One-time events  setTimeout (func, milliseconds); • Repeated Events  setInterval(func, milliseconds); • Stop Execution  clearInterval(), clearTimeout()

var timer = setInterval(myTimer, 1000);

document.getElementById('stop-timer').onclick = function() { clearInterval(timer); } The Browser Object Model 18 The Browser Object Model

• The window object represents the browser's window. • Global variables are properties of the window object. • Global functions are methods of the window object. • Even the document object (of the HTML DOM) is a property of the window object 19 The Window Object

• Some properties  window.innerHeight - inner height of the browser window  window.innerWidth - inner width of the browser window • Some methods  window.open() - open a new window  window.close() - close the current window  window.moveTo() - move the current window  window.resizeTo() - resize the current window 20 Window Location

• The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page • Location properties  location.href - the URL of the current page  location.hostname - the domain name of the web host  location.pathname - the path and filename  location.port - the port of the web host  location.protocol - the web protocol used 21 Window History

• The window.history object contains the history of the window • Useful methods  history.back() - same as clicking back in the browser  history.forward() - same as clicking forward in the browser

Exception Handling 23 Exception Handling

• JavaScript has try and catch keywords for handling JavaScript errors

try { runSomeCode(); } catch (e) { alert(e.name + ': ' + e.message); } 24 Raising Exceptions

• You can use throw keywords to raise an exception

try { a = 1 * str; if (isNaN(a)) throw 'Not a number';

} catch(err) { alert(err); } 25 Error Object

• Runtime errors in JavaScript throw Error objects • You use the generic Error constructor to throw your own exceptions

try { throw new Error('Oops!'); } catch (e) { msg = e.name + ': ' + e.message+ '\n'; msg += e.fileName + ': '+ e.lineNumber; alert(msg); } 26 References

• W3Schools  http://www.w3schools.com/js • JavaScript: The Good Parts  By Douglas Crockford • A re-introduction to JavaScript  http://developer.mozilla.org/en-US/docs/Web/JavaScript