Interacting with web pages

Transcription

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
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).
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.getElementById(‘headerTitle’)
the page
• JS selectors
• CSS selectors
id
tag
class name
JS History</h1>
<p>Javascript has a
history.</p>
</div>
#headerTitle { color:Yellow; }
the page
• JS selectors
• CSS selectors
id
tag
class name
JS History</h1>
<p>Javascript has a
history.</p>
</div>
document.getElementsByClassName(‘content’)
the page
• JS selectors
• CSS selectors
id
tag
class name
JS History</h1>
<p>Javascript has a
history.</p>
</div>
.content { background:Black; }
the page
• JS selectors
• CSS selectors
id
tag
class name
JS History</h1>
<p>Javascript has a
history.</p>
</div>
document.getElementsByTagName(‘p’)
the page
• JS selectors
• CSS selectors
id
tag
class name
JS History</h1>
<p>Javascript has a
history.</p>
</div>
p { padding: 0; }
the page
• JS selectors
• CSS selectors
id
tag
class name
JS History</h1>
<p>Javascript has a
history.</p>
</div>
JSON: JS Object Notation
var cornucopia = {
corn : [
cob1,
cob2,
cob3
],
squash : {
pumpkin : [...],
‘summer squash’: [...],
trumpet : [...],
},
}
leaves : [ redLeaf1,
orangeLeaf2,
yellowLeafN]
var cornucopia = {
corn : [
cob1,
cob2,
cob3
],
squash : {
pumpkin : [...],
trumpet : [...],
},
}
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.)
•Key-Value Pairs
•Keys are strings
or plain text
•Values are JS
var cornucopia = {
corn : [
cob1,
cob2,
cob3
],
squash : {
pumpkin : [...],
trumpet : [...],
},
}
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.)
var myObject = {
‘key1‘: ‘value1’,
‘sum’ : 1+1,
‘fn‘ : function(){return ‘x’},
array: [‘a’,’b’,’c’]
};
// reference keys with dot-notation
myObject.key1 // => ‘value1’
var myObject = {
‘sum’ : 1+1,
};
// or reference keys with array-notation
myObject[‘key1’] // => ‘value1’
var myObject = {
‘sum’ : 1+1,
};
// values are evaluated
myObject[‘sum’] // => 2
var myObject = {
‘sum’ : 1+1,
};
// Functions can conveniently be stored
myObject[‘fn’]() // => ‘x’
var myObject = {
‘sum’ : 1+1,
};
// keys need not be strings
myObject.array[0] // => ‘a’
var myObject = {
‘sum’ : 1+1,
};
// but keys can be referenced as strings
myObject[‘array’][1] // => ‘b’
var myObject = {
‘sum’ : 1+1,
};
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
JS History</h1>
<p>Javascript has a
history.</p>
</div>
<script>
var h = document.
getElementById(
‘js_title’);
</script>
Manipulation: CSS
h.className = ‘highlight’
names
- add class name
- remove class name
- change HTML
- append HTML
<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( |$)/,’ ’)
names
- add class name
- remove class name
- change HTML
- append HTML
<div class=””>
JS History</h1>
</div>
<script>
var h = document.
getElementById(
‘headerTitle’);
</script>
Manipulation: HTML
h.innerHTML = ‘Javascript’
names
- add class name
- remove class name
- change HTML
- append HTML
Javascript</h1>
</div>
<script>
var h = document.
getElementById(
‘headerTitle’);
</script>
Manipulation: HTML
h.innerHTML += ‘ <em>over the ages</em>’
names
- add class name
- remove class name
- change HTML
- append HTML
JS History
<em>over the ages</em>
</h1>
</div>
<script>
var h = document.
getElementById(
‘headerTitle’);
</script>
Manipulation: Events
• CSS
- :hover
• HTML + Javascript
- onHover
- onMouseOver / onMouseOut
- onMouseClick
- onFocus / onBlur
- onLoad
JS History</h1>
</div>
• CSS
- :hover
- onHover
- onMouseClick
- onFocus / onBlur
- onLoad
<style>
h1 { color:white; }
h1:hover {
color:pink; }
</style>
JS History</h1>
</div>
• CSS
- :hover
- onHover
- onClick
- onFocus / onBlur
- onLoad
<script>
function add(elt) {
elt.innerHTML =
parseInt(elt.innerHTML)+1;
}
</script>
JS History</h1>
<p onClick=”add(this);”>
0</p>
</div>
• CSS
- :hover
- onHover
- onClick
- onFocus / onBlur
- onLoad
<script>
function add(elt) {
elt.innerHTML =
}
</script>
JS History</h1>
1</p>
</div>
• CSS
- :hover
- onHover
- onClick
- onFocus / onBlur
- onLoad
<script>
function add(elt) {
elt.innerHTML =
}
</script>
JS History</h1>
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
communication
• JSONP
- JSON with Padding
loading
• YQL
Leverages Javascript
function “XMLHTTPRequest”
Cannot load data from
third-party domains
Talking to the Web
• AJAX
communication
• JSONP
- JSON with Padding
loading
• YQL
Calls third-party domains by
injecting a <script> tag into
the document.
Response is wrapped in a
function call.

<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);
}
communication
- JSON with Padding
loading
• YQL
// 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

Interacting with web pages

Transcription

Similar documents

Video Resizer - Sizmek Ad Feature

Microsoft.Braindumps.70-480.v2014-04-14.by

Customization: Foundations

Introduction to Web Programming

Stored Processes

Web Performance

Retailigence - Sizmek Ad Feature

Designing CSS Layouts for the Flexible Web

ni.com - SDL.com

OPUA SCHOOL

υχ Using Twitter Bootstrap in XPages The ultimate incomplete guide

CSS for Page Layout

HTML Handout - Chajewski`s

Introduction to Database Communication using ASP.NET Web Forms

The Longest Lasting, Most Durable Stainless Steel Outdoor Furnace

Section Styling - Gerry Kruyer`s courses

JavaScript Introduction

0 - ITTC

EDUCATIONAL LCD OSCILLOSCOPE eDu08

Presentation slides available here. - MOBILESOFT

Chapter 4 Page Layout - Web Programming Step by Step

Agilent U1610A/U1620A Handheld Digital Oscilloscope