CIS408– Lab Assignment 3 Name: Stacey Heideloff ID: 2715891 Platform Web Browser: Google Chrome - Version 63.0.3239.132 (Official Build) (64-bit) Host Machine OS: Windows 10 Development Environment: Visual Studio 2017 Problem 3 Execution Steps 1) Save a local copy of the simplified infoplease website as infoplease.html 2) Modify infoplease.html to include a button element and an empty table element <button id="getLinksButton" onclick="getCorrectLinks()">Get the Correct Links</button> <br /> <table id="presidentTable"></table>
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
CIS408– Lab Assignment 3
Name: Stacey Heideloff
ID: 2715891
Platform
Web Browser: Google Chrome - Version 63.0.3239.132 (Official Build) (64-bit)
Host Machine OS: Windows 10
Development Environment: Visual Studio 2017
Problem 3
Execution Steps
1) Save a local copy of the simplified infoplease website as infoplease.html
2) Modify infoplease.html to include a button element and an empty table element
<button id="getLinksButton" onclick="getCorrectLinks()">Get the Correct Links</button> <br /> <table id="presidentTable"></table>
3) Create a javascript file code.js and link it to infoplease.html
//Event handler for button "getLinksButton"'s onClick attribute in infoplease.html function getCorrectLinks() { //Retrieve presidental address information by using an XPath query targeting all span elements with // a class attribute value of 'article' var nodes = document.evaluate("//span[@class='article']", document, null, XPathResult.ANY_TYPE, null); //Retrieve first node matching the XQuery expression above from XPathResult var result = nodes.iterateNext(); //Initialize result table's HTML string with title of the table and header row var table = "<caption>Correct List of Collected State of the Union Addresses of U.S.
Presidents</caption><tr><th>Name of President</th><th>Date of Union Address</th><th>Link to Address</th></tr>";
//For as long as the XPathResult's iterator returns another result node while (result) { //Get the result's childNode[0] (anchor element), then get the text node attached to it var rowData = result.childNodes[0].innerHTML; //Split the text string into president name and date elements by using the parentheses as a
delimiter
splitData = rowData.split(new RegExp("[()]")); //Further split the president name into first name and last name by using space as a delimiter var president = splitData[0].split(" "); //Further split the date into month, day, and year by using comma space or just space as a delimiter var addressDate = splitData[1].split(new RegExp(", |[ ]")); //Create an appropriate link by concatenating the host information with the president's first // name, hyphen, last name, hyphen, month, hyphen, day, hyphen, year var addressLink = "https://infoplease.com/homework-help/us-documents/state-union-address-" + president[0] + "-" + president[1] + "-" + addressDate[0] + "-" + addressDate[1] + "-" +
addressDate[2]; //Concatenate the HTML string we already have for the result table with this result row table += "<tr><td>" + president[0] + " " + president[1] + "</td><td>" + addressDate[0] + " " + addressDate[1] + ", " + addressDate[2] + "</td><td><a href='" + addressLink + "'>" + addressLink + "</a></td></tr>"; //Retrieve the next result node from the XPathResult iterator result = nodes.iterateNext(); } //Set the empty table with id "presidentTable" in infoplease.html to the table built with HTML text above document.getElementById("presidentTable").innerHTML = table; }