Interacting Bodies and Interacting Minds. The case of Emotions
Interacting with a Web Page using JavaScript Mat Kelly GTAI Presentation January 10, 2014.
-
Upload
alannah-mills -
Category
Documents
-
view
214 -
download
0
Transcript of Interacting with a Web Page using JavaScript Mat Kelly GTAI Presentation January 10, 2014.
2
What’s in a Web Page
• Three languages make up a web page– HTML – HyperText Markup Language• Defines web page STRUCTURE & CONTENT
– CSS – Cascading Style Sheets• Defines web page STYLE
– JavaScript (JS)• Defines web page BEHAVIOR
3
What’s in a Web Page
• Three languages make up a web page– HTML – HyperText Markup Language• Defines web page STRUCTURE & CONTENT
– CSS – Cascading Style Sheets• Defines web page STYLE
– JavaScript (JS)• Defines web page BEHAVIOR
4
Behavior?
• Web pages can be made up of only content– HTML w/o style (CSS) or behavior (JS)
• Interaction and animation requires the definition of functionality– CSS has limited control• Simpler animation (hovers) and effects
– JavaScript can create, remove and manipulate content!
5
How can I do this?
• Within a web page’s source: <!DOCTYPE html><html><head></head><body>Content!</body></html>
index.html
6
How can I do this?
• Within a web page’s source: <!DOCTYPE html><html><head></head><body>Content!</body></html>
index.html
HTML files can beRendered in a browser
7
How can I do this?
• Within a web page’s source:– Define scripts inline
<!DOCTYPE html><html><head><script> // Code goes here</script></head><body>Content!</body></html>
index.html
8
How can I do this?
• Within a web page’s source:– Define scripts inline– Include external scripts
<!DOCTYPE html><html><head><script> // Code goes here</script><script src=“code.js”></script></head><body>Content!</body></html>
index.htmlwindow.onload = function(){var b =
document.getElementsByTagName(“body”);var myBody = b[0];var newText =
document.createTextNode(“New!”);myBody.appendChild(newText);
};
code.js
9
How can I do this?
• Within a web page’s source:– Define scripts inline– Include external scripts• Define functionality elsewhere
<!DOCTYPE html><html><head><script> // Code goes here</script><script src=“code.js”></script></head><body>Content!</body></html>
index.htmlwindow.onload = function(){var b =
document.getElementsByTagName(“body”);var myBody = b[0];var newText =
document.createTextNode(“New!”);myBody.appendChild(newText);
};
code.js
10
Deconstructing the code
• Line by line• End-result:
we’ll modify this page using this code.
window.onload = function(){var b =
document.getElementsByTagName(“body”);var myBody = b[0];var newText =
document.createTextNode(“New!”);myBody.appendChild(newText);
};code.js
11
Acquiring a browser event
• window.load : when the page has finished loading, do something– JS libraries exist for cross-browser compatibility– Simplified for this example
window.onload = function(){var b =
document.getElementsByTagName(“body”);var myBody = b[0];var newText =
document.createTextNode(“New!”);myBody.appendChild(newText);
};code.js
12
Associating with the browser event
• = Assigns something (variable or function) to the onload event
window.onload = function(){var b =
document.getElementsByTagName(“body”);var myBody = b[0];var newText =
document.createTextNode(“New!”);myBody.appendChild(newText);
};code.js
13
Providing a wrapper for our event definition
• function(){…} :Defines the function to be assigned
• Closing ; required to be syntactically correct
window.onload = function(){var b =
document.getElementsByTagName(“body”);var myBody = b[0];var newText =
document.createTextNode(“New!”);myBody.appendChild(newText);
};code.js
14
Querying the web page
• var b = document.getElementsByTagName(“body”); Asks the document, “Give me all of your body tags
and assign the set to variable b”• Any HTML tag can be queried this way
window.onload = function(){var b =
document.getElementsByTagName(“body”);var myBody = b[0];var newText =
document.createTextNode(“New!”);myBody.appendChild(newText);
};code.js
… b
15
Isolating the content we want
• From the collection of body tags, give me the first element (JS is index base 0)
window.onload = function(){var b =
document.getElementsByTagName(“body”);var myBody = b[0];var newText =
document.createTextNode(“New!”);myBody.appendChild(newText);
};code.js
myBody
b…points to our page
from before
var myBody = b[0];
16
Creating Content!
• Create a new text node, store in a variable• This DOES NOT yet add the node to the
webpage
window.onload = function(){var b =
document.getElementsByTagName(“body”);var myBody = b[0];var newText =
document.createTextNode(“New!”);myBody.appendChild(newText);
};code.js
“New!”newText
myBody
var newText = document.createTextNode(“New!”);
17
Attaching our created content!
• Finally, append the new node to the first body tag
window.onload = function(){var b =
document.getElementsByTagName(“body”);var myBody = b[0];var newText =
document.createTextNode(“New!”);myBody.appendChild(newText);
};code.js
“New!”newText
Content has been added to the webpage using
JavaScript!
myBody.appendChild(newText);
18
This has been done before,Use a Library
window.onload = function(){var b =
document.getElementsByTagName(“body”);var myBody = b[0];var newText =
document.createTextNode(“New!”);myBody.appendChild(newText);
};
$(document).ready(function(){$(“body”)[0].append(“New!”);
});
code.js
easyCode.js
19
Beyond just adding text
• Adding content from elsewhere– AJAX: Asynchronous JavaScript and XML
$.ajax({url: “newContent.xml”})
.done(function(data){$(“body”)[0].append(data);
});
• Giving user input feedbackvar myAge = document.getElementById(“age”).value;if(myAge.length == 0){
$(“p”).append(“You forgot your age!”);}
20
Beyond just adding text
• Adding content from elsewhere– AJAX: Asynchronous JavaScript and XML
$.ajax({url: “newContent.xml”})
.done(function(data){$(“body”)[0].append(data);
});
• Giving user input feedbackvar myAge = document.getElementById(“age”).value;if(myAge.length == 0){
$(“p”).append(“You forgot your age!”);}
THIS IS JUST THE BEGINNING!