Javascript Interacting with web pages by Aaron Wheeler (awheeler@yahoo-inc.com) Design Prototyper, Yahoo! Inc.
Schedule of How To: Building Blocks: elements & objects DOM JSON Manipulate elements CSS HTML Events Talk to web services AJAX JSONP Homework
Document Object Model
Document Object Model Humans see web pages as they are displayed on the screen, but browsers see web pages as a structured group of nested page elements (links, paragraphs, divs, etc.). This structured grouping of page elements is called the Document Object Model (DOM).
Document Object Model Traverse elements on the page JS selectors document.getelementbyid document.getelementsbyclassname document.getelementsbytagname CSS selectors id tag class name <div class= content > <h1 id= headertitle > JS History</h1> <p>javascript has a long and illustrious history.</p> <p>here s a taste!</p> </div> In order to change parts of the visible page, we must programatically be able to change parts of the DOM. Javascript and CSS both have support for traversing and referencing parts of the DOM.
Document Object Model document.getelementbyid( headertitle ) Traverse elements on the page JS selectors document.getelementbyid document.getelementsbyclassname document.getelementsbytagname CSS selectors id tag class name <div class= content > <h1 id= headertitle > JS History</h1> <p>javascript has a long and illustrious history.</p> <p>here s a taste!</p> </div>
Document Object Model #headertitle { color:yellow; } Traverse elements on the page JS selectors document.getelementbyid document.getelementsbyclassname document.getelementsbytagname CSS selectors id tag class name <div class= content > <h1 id= headertitle > JS History</h1> <p>javascript has a long and illustrious history.</p> <p>here s a taste!</p> </div>
Document Object Model document.getelementsbyclassname( content ) Traverse elements on the page JS selectors document.getelementbyid document.getelementsbyclassname document.getelementsbytagname CSS selectors id tag class name <div class= content > <h1 id= headertitle > JS History</h1> <p>javascript has a long and illustrious history.</p> <p>here s a taste!</p> </div>
Document Object Model.content { background:black; } Traverse elements on the page JS selectors document.getelementbyid document.getelementsbyclassname document.getelementsbytagname CSS selectors id tag class name <div class= content > <h1 id= headertitle > JS History</h1> <p>javascript has a long and illustrious history.</p> <p>here s a taste!</p> </div>
Document Object Model document.getelementsbytagname( p ) Traverse elements on the page JS selectors document.getelementbyid document.getelementsbyclassname document.getelementsbytagname CSS selectors id tag class name <div class= content > <h1 id= headertitle > JS History</h1> <p>javascript has a long and illustrious history.</p> <p>here s a taste!</p> </div>
Document Object Model p { padding: 0; } Traverse elements on the page JS selectors document.getelementbyid document.getelementsbyclassname document.getelementsbytagname CSS selectors id tag class name <div class= content > <h1 id= headertitle > JS History</h1> <p>javascript has a long and illustrious history.</p> <p>here s a taste!</p> </div>
JSON: JS Object Notation var cornucopia = { corn : [ cob1, cob2, cob3 ], squash : { pumpkin : [...], summer squash : [...], trumpet : [...], }, } leaves : [ redleaf1, orangeleaf2, yellowleafn]
Humans visualize objects as groups or clusters of things. Programatically, Javascript denotes objects using JSON. A Javascript object is basically a group of key-value pairs separated by a colon. A key can be a string or a literal, and the value can be any valid Javascript (variable reference, string, integer, boolean, null, function, etc.) JSON: JS Object Notation var cornucopia = { corn : [ cob1, cob2, cob3 ], squash : { pumpkin : [...], summer squash : [...], trumpet : [...], }, } leaves : [ redleaf1, orangeleaf2, yellowleafn]
Humans visualize objects as groups or clusters of things. Programatically, Javascript denotes objects using JSON. A Javascript object is basically a group of key-value pairs separated by a colon. A key can be a string or a literal, and the value can be any valid Javascript (variable reference, string, integer, boolean, null, function, etc.) JSON: JS Object Notation Key-Value Pairs Keys are strings or plain text Values are JS var cornucopia = { corn : [ cob1, cob2, cob3 ], squash : { pumpkin : [...], summer squash : [...], trumpet : [...], }, } leaves : [ redleaf1, orangeleaf2, yellowleafn]
JSON: JS Object Notation var myobject = { key1 : value1, sum : 1+1, fn : function(){return x }, array: [ a, b, c ] };
JSON: JS Object Notation // reference keys with dot-notation myobject.key1 // => value1 var myobject = { key1 : value1, sum : 1+1, fn : function(){return x }, array: [ a, b, c ] };
JSON: JS Object Notation // or reference keys with array-notation myobject[ key1 ] // => value1 var myobject = { key1 : value1, sum : 1+1, fn : function(){return x }, array: [ a, b, c ] };
JSON: JS Object Notation // values are evaluated myobject[ sum ] // => 2 var myobject = { key1 : value1, sum : 1+1, fn : function(){return x }, array: [ a, b, c ] };
JSON: JS Object Notation // Functions can conveniently be stored myobject[ fn ]() // => x var myobject = { key1 : value1, sum : 1+1, fn : function(){return x }, array: [ a, b, c ] };
JSON: JS Object Notation // keys need not be strings myobject.array[0] // => a var myobject = { key1 : value1, sum : 1+1, fn : function(){return x }, array: [ a, b, c ] };
JSON: JS Object Notation // but keys can be referenced as strings myobject[ array ][1] // => b var myobject = { key1 : value1, sum : 1+1, fn : function(){return x }, array: [ a, b, c ] };
Manipulation
Manipulation In order to manipulate the visible page, we have to change the DOM. Two common ways to do this are to change CSS classes and HTML in the DOM with Javascript. In order to execute the Javascript, we leverage user events.
Manipulation CSS - toggle CSS class names - add class name - remove class name HTML - innerhtml - change HTML - append HTML <div class= content > <h1 id= headertitle > JS History</h1> <p>javascript has a long and illustrious history.</p> <p>here s a taste!</p> </div> <script> var h = document. getelementbyid( js_title ); </script>
Manipulation: CSS h.classname = highlight CSS - toggle CSS class names - add class name - remove class name HTML - innerhtml - change HTML - append HTML <div class= content > <h1 id= headertitle class= highlight > JS History</h1> <p>javascript has...</p> </div> <script> var h = document. getelementbyid( headertitle ); </script>
Manipulation: CSS h.classname = h.classname. replace(/(^ )content( $)/, ) CSS - toggle CSS class names - add class name - remove class name HTML - innerhtml - change HTML - append HTML <div class= > <h1 id= headertitle > JS History</h1> <p>javascript has...</p> </div> <script> var h = document. getelementbyid( headertitle ); </script>
Manipulation: HTML h.innerhtml = Javascript CSS - toggle CSS class names - add class name - remove class name HTML - innerhtml - change HTML - append HTML <div class= content > <h1 id= headertitle > Javascript</h1> <p>javascript has...</p> </div> <script> var h = document. getelementbyid( headertitle ); </script>
Manipulation: HTML h.innerhtml += <em>over the ages</em> CSS - toggle CSS class names - add class name - remove class name HTML - innerhtml - change HTML - append HTML <div class= content > <h1 id= headertitle > JS History <em>over the ages</em> </h1> <p>javascript has...</p> </div> <script> var h = document. getelementbyid( headertitle ); </script>
Manipulation: Events CSS - :hover HTML + Javascript - onhover - onmouseover / onmouseout - onmouseclick - onfocus / onblur - onload <div class= content > <h1 id= headertitle > JS History</h1> <p>javascript has...</p> </div>
Manipulation: Events CSS - :hover HTML + Javascript - onhover - onmouseover / onmouseout - onmouseclick - onfocus / onblur - onload <style> h1 { color:white; } h1:hover { color:pink; } </style> <div class= content > <h1 id= headertitle > JS History</h1> <p>javascript has...</p> </div>
Manipulation: Events CSS - :hover HTML + Javascript - onhover - onmouseover / onmouseout - onclick - onfocus / onblur - onload <script> function add(elt) { elt.innerhtml = parseint(elt.innerhtml)+1; } </script> <div class= content > <h1 id= headertitle > JS History</h1> <p onclick= add(this); > 0</p> </div>
Manipulation: Events CSS - :hover HTML + Javascript - onhover - onmouseover / onmouseout - onclick - onfocus / onblur - onload <script> function add(elt) { elt.innerhtml = parseint(elt.innerhtml)+1; } </script> <div class= content > <h1 id= headertitle > JS History</h1> <p onclick= add(this); > 1</p> </div>
Manipulation: Events CSS - :hover HTML + Javascript - onhover - onmouseover / onmouseout - onclick - onfocus / onblur - onload <script> function add(elt) { elt.innerhtml = parseint(elt.innerhtml)+1; } </script> <div class= content > <h1 id= headertitle > JS History</h1> <p onclick= add(this); > 2</p> </div>
Talking to the Web Web App Internet AJAX Web 2.0 introduced asynchronous ways of talking to the web via AJAX. This spurred a revolution in web apps, but had some shortcomings.
Talking to the Web JSONP YQL (think babelfish) As web apps matured, so did the means for talking to the web. JSONP is a cross-domain method for talking to supporting web APIs, and YQL is a way for talking to these APIs.
Talking to the Web AJAX - Asynchronous Javascript XML - Limited to same-domain communication JSONP - JSON with Padding - work-around for cross-site JS loading YQL - Yahoo! Query Language - Standardize way to talk to web APIs Asynchronous behavior Two or more things happen concurrently (aka threading) Callback functions Provide direction on what to do once an asynchronous call (thread) completes.
Talking to the Web AJAX - Asynchronous Javascript XML - Limited to same-domain communication JSONP - JSON with Padding - work-around for cross-site JS loading Leverages Javascript function XMLHTTPRequest Cannot load data from third-party domains YQL - Yahoo! Query Language - Standardize way to talk to web APIs
Talking to the Web AJAX - Asynchronous Javascript XML - Limited to same-domain communication JSONP - JSON with Padding - work-around for cross-site JS loading YQL - Yahoo! Query Language - Standardize way to talk to web APIs Calls third-party domains by injecting a <script> tag into the document. Response is wrapped in a function call. <!-- responds with cb({flickrpics:[]}) --> <script src= http:// flickr.com/ popular.json?cbfunc=cb > </script> <script> function cb(dat) {...}
Talking to the Web AJAX - Asynchronous Javascript XML - Limited to same-domain communication JSONP - JSON with Padding - work-around for cross-site JS loading YQL - Yahoo! Query Language - Standardize way to talk to web APIs var query = select * from search.web where query = dogs ; function callback(data) { alert( got data! ); console.log(data); } // YQL is a custom class // in Homework #3 YQL.query(query, callback );
Homework Create clickable tabs http://jsfiddle.net/4r6k3/ Track history of tab clicks http://jsfiddle.net/ajknm/ Tabbed access to faceted web search http://jsfiddle.net/gmmcc/ Solutions for all homework can be found by appending 1 to the URL. For example, the solution to the first homework can be found at http://jsfiddle.net/4r6k3/1