1. 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 2

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 3

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

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

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

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

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

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

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

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 11

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 12

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 13

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

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 15 myBody … 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 16 “New!” 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 17 “New!” 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 18

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

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 feedback 20 var 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 21