1. Javascript II DOM & JSON

2. In an effort to create increasingly interactive experiences on the web, programmers wanted access to the functionality of browsers directly. But…initially each browser developed its own Application Programming Interface (API) and they were not compatible making cross-browser development problematic. W3C helped gain a consensus on a common API for dynamically accessing and updating web documents

3. The Document Object Model “The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.” Applies to HTML, as well as XML Defines the objects and their properties, and the methods to access them. Most recent “level” is DOM Level 3 (2004)

4. Document as a node tree My title My link My header

5. Parent, Child, Sibling

6. Programming Interface of DOM Defines standard properties and methods –Properties are attributes of an object, such as the name of a node. –Methods are things that can be done, such as removing a node Methods are used to get objects or their properties Methods are used to modify objects (i.e., insert a node) and their properties (i.e., change a node’s ID)

7. Some HTML DOM Properties x.innerHTML - the text value of x x.nodeName - the name of x x.nodeValue - the value of x x.parentNode - the parent node of x x.childNodes - the child nodes of x x.attributes - the attributes nodes of x txt=document.getElementById("intro").innerHTML;

8. Some HTML DOM Methods x.getElementById(id) - get the element with a specified id x.getElementsByTagName(name) - get all elements with a specified tag name x.appendChild(node) - insert a child node to x x.removeChild(node) - remove a child node from x

9. Events An event handler executes code when an event (an action detected by JavaScript such as a mouse click, page load, keystroke, etc.) occurs. <input type="button" onclick="document.body.style.backgroundColor='lavender';" value="Change background color" />

10. Event Attribute examples Onblur - an element loses focus Onclick - mouse clicks an object Onerror - an error occurs when loading a document or image Onload - a pge or image is finished loading Onmouseover - the mouse is moved over an element Onunload - the user exits the page

11. Form Validation Example Old-school examples (still common) –SyntaxSyntax –Example pageExample page The code –More complex form exampleexample The code HTML5 exampleexample There are also many Javascript libraries that simplify form validation

12. More DOM Examples A list of examples that use the DOM: http://www.w3schools.com/htmldom/dom_examples.asp http://www.w3schools.com/htmldom/dom_examples.asp A reference of built-in JavaScript objects, browser objects, and HTML DOM objects. Use this to see what is possible: http://www.w3schools.com/jsref/default.asp http://www.w3schools.com/jsref/default.asp

13. JavaScript Object Notation (JSON) “syntax for storing and exchanging text information” Similar to XML, but faster and easier to parse - particularly using JavaScript eval() or a JSON parser (which is more secure) Language and platform independent

16. JSON & JavaScript

17. JSON Example & Exercise Go to http://www.w3schools.com/json/tryit.asp?fil ename=tryjson_create http://www.w3schools.com/json/tryit.asp?fil ename=tryjson_create Modify it so that it includes an email address line

18. Additional Resources W3schools.com Douglas Crockford’s JavaScript videos and other resources on DOM and JSON: http://javascript.crockford.com/ (note: he “discovered”/invented JSON) http://javascript.crockford.com/