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

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

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! 4

How can I do this? Within a web page’s source: Content! index.html 5

How can I do this? Within a web page’s source: Content! index.html 6 HTML files can be Rendered in a browser

How can I do this? Within a web page’s source: – Define scripts inline // Code goes here Content! index.html 7

How can I do this? Within a web page’s source: – Define scripts inline – Include external scripts // Code goes here Content! index.html 8 window.onload = function(){ var b = document.getElementsByTagName(“body”); var myBody = b[0]; var newText = document.createTextNode(“New!”); myBody.appendChild(newText); }; code.js

How can I do this? Within a web page’s source: – Define scripts inline – Include external scripts Define functionality elsewhere // Code goes here Content! index.html window.onload = function(){ var b = document.getElementsByTagName(“body”); var myBody = b[0]; var newText = document.createTextNode(“New!”); myBody.appendChild(newText); }; code.js 9

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 10 

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 11

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 12

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 13

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 14 …

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 15 myBody … points to our page from before var myBody = b[0];

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 16 “New!” var newText = document.createTextNode(“New!”);

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 17 “New!” Content has been added to the webpage using JavaScript! myBody.appendChild(newText);

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 18

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 feedback var myAge = document.getElementById(“age”).value; if(myAge.length == 0){ $(“p”).append(“You forgot your age!”); } 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 feedback 20 var myAge = document.getElementById(“age”).value; if(myAge.length == 0){ $(“p”).append(“You forgot your age!”); } THIS IS JUST THE BEGINNING!

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 21