Introduction to JavaScript – Part III Hamid Zarrabi-Zadeh Web Programming – Fall 2013 2 Outline
• Document Object Model (DOM) • The Browser Object Model • Event 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 form = 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 • Frame 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