1 / 18

Javascript II

Javascript II. DOM & JSON. In an effort to create increasingly interactive experiences on the web, programmers wanted access to the functionality of browsers directly.

lorant
Télécharger la présentation

Javascript II

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. 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 <html> <head> <title>My title</title> <body> <a href=“url”>My link</a> <h1>My header</h1>

  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. <html> <body> <input type="button" onclick="document.body.style.backgroundColor='lavender';" value="Change background color" /> </body> </html>

  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) • Syntax • Example page • The code • More complex form example • The code • HTML5 example • 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 • 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

  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

  14. JSON & JavaScript

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

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

More Related