docInteracting with web pages
download 
Report Transcription
Interacting with web pages
Javascript Interacting with web pages by Aaron Wheeler ([email protected]) 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] 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] 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 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 JSON P 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 • YQL - Yahoo! Query Language - Standardize way to talk to web APIs Leverages Javascript function “XMLHTTPRequest” Cannot load data from third-party domains 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 var query = “select * from search.web where query =‘dogs’”; • JSONP function callback(data) { alert(‘got data!’); console.log(data); } - Asynchronous Javascript XML - Limited to same-domain communication - JSON with Padding - work-around for cross-site JS loading • YQL - Yahoo! Query Language - Standardize way to talk to web APIs // 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
