Interacting with a Web Page using JavaScript Mat Kelly GTAI Presentation January 10, 2014

Interacting with a Web Page using JavaScript

Mat KellyGTAI PresentationJanuary 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 =



};

code.js

10

Deconstructing the code

• Line by line• End-result:

we’ll modify this page using this code.

window.onload = function(){var b =



};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




};code.js

12

Associating with the browser event

• = Assigns something (variable or function) to the onload event




};code.js

13

Providing a wrapper for our event definition

• function(){…} :Defines the function to be assigned

• Closing ; required to be syntactically correct




};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




};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)




};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




};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




};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




};

$(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!

21

Summary

JavaScript can:– control behavior of a web page–be loaded inline or externally–manipulate web page contents– acts as a functional bridge between a

browser and a web page

Documents

Interacting with a Web Page using JavaScript Mat Kelly GTAI Presentation January 10, 2014