Javascript II DOM JSON In an effort to

  • Slides: 18
Download presentation
Javascript II DOM & JSON

Javascript II DOM & JSON

In an effort to create increasingly interactive experiences on the web, programmers wanted access

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. W 3 C helped gain a consensus on a common API for dynamically accessing and updating web documents

The Document Object Model • “The W 3 C Document Object Model (DOM) is

The Document Object Model • “The W 3 C 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)

<html> <head> <title>My title</title> <body> <a href=“url”>My link</a> <h 1>My header</h 1> Document as

<html> <head> <title>My title</title> <body> <a href=“url”>My link</a> <h 1>My header</h 1> Document as a node tree

Parent, Child, Sibling

Parent, Child, Sibling

Programming Interface of DOM • Defines standard properties and methods – Properties are attributes

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)

Some HTML DOM Properties • x. inner. HTML - the text value of x

Some HTML DOM Properties • x. inner. HTML - the text value of x • x. node. Name - the name of x • x. node. Value - the value of x • x. parent. Node - the parent node of x • x. child. Nodes - the child nodes of x • x. attributes - the attributes nodes of x txt=document. get. Element. By. Id("intro"). inner. HTML;

Some HTML DOM Methods • x. get. Element. By. Id(id) - get the element

Some HTML DOM Methods • x. get. Element. By. Id(id) - get the element with a specified id • x. get. Elements. By. Tag. Name(name) - get all elements with a specified tag name • x. append. Child(node) - insert a child node to x • x. remove. Child(node) - remove a child node from x

Events • An event handler executes code when an event (an action detected by

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

Event Attribute examples • Onblur - an element loses focus • Onclick - mouse

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

Form Validation Example • Old-school examples (still common) – Syntax – Example page •

Form Validation Example • Old-school examples (still common) – Syntax – Example page • The code – More complex form example • The code • HTML 5 example • There also many Javascript libraries that simplify form validation

More DOM Examples • A list of examples that use the DOM: http: //www.

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

Java. Script Object Notation (JSON) • “syntax for storing and exchanging text information” •

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

JSON & Java. Script

JSON & Java. Script

JSON Example & Exercise • Go to http: //www. w 3 schools. com/json/tryit. asp?

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

Additional Resources • W 3 schools. com • Douglas Crockford’s Java. Script videos and

Additional Resources • W 3 schools. com • Douglas Crockford’s Java. Script videos and other resources on DOM and JSON: http: //javascript. crockford. com/ (note: he “discovered”/invented JSON)