CIS408– Lab Assignment 3 ID: 2715891eecs.csuohio.edu/~sschung/CIS408/CIS408_Heideloff_Lab3.pdf ·...

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

<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="code.js"></script>

</head>

4) Create a css file to style infoplease.html (p3.css) and link it to infoplease.html

<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="code.js"></script>

<link type="text/css" rel="stylesheet" href="p3.css"/> </head>

5) Write an event handler for the button element to create a table of presidents, dates of their presidential

addresses, and links to the content of their addresses that will be populated in the table element

function getCorrectLinks()

6) Test the button / event handler

7) Test the link generated by the javascript code

Source Code

infoplease.html

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="code.js"></script> <link type="text/css" rel="stylesheet" href="p3.css"/> </head> <body> <h1 class="page-title"><span><a id="idm6504896"></a>Collected State of the Union Addresses of U.S. Presidents</span></h1> <section class="main-section col-sm-12" id="mainaside"> <article data-history-node-id="83028" role="article" about="/homework-help/history/collected-state-union-addresses-us-presidents">   <div style="position:relative"> <div class="navheader"><table width="100%" class="PageLinearNav" summary="Navigation header"><tr><td width="20%" align="left" class="PLN-prev"> </td><th align="center"> </th><td width="20%" align="right" class="PLN-next"> <a accesskey="n" href="/homework-help/us-documents/state-union-address-george-washington-january-8-1790">Next</a></td></tr></table></div><div class="book" lang="en" xml:lang="en" xml:lang="en"> <div class="titlepage"><div><div></div></div></div><div class="toc"> <p><b>Contents</b></p> <dl> <dt><span xmlns="" class="article"><a href="/homework-help/us-documents/state-union-address-george-washington-january-8-1790">George Washington (January 8, 1790)</a></span></dt> <dt><span xmlns="" class="article"><a href="/homework-help/us-documents/state-union-address-george-washington-december-8-1790">George Washington (December 8, 1790)</a></span></dt> <dt><span xmlns="" class="article"><a href="/homework-help/us-documents/state-union-address-george-washington-october-25-1791">George Washington (October 25, 1791)</a></span></dt> <dt><span xmlns="" class="article"><a href="/homework-help/us-documents/state-union-address-george-washington-november-6-1792">George Washington (November 6, 1792)</a></span></dt>

<dt><span xmlns="" class="article"><a href="/homework-help/us-documents/state-union-address-george-washington-december-3-1793">George Washington (December 3, 1793)</a></span></dt> <dt><span xmlns="" class="article"><a href="/homework-help/us-documents/state-union-address-george-washington-november-19-1794">George Washington (November 19, 1794)</a></span></dt> <dt><span xmlns="" class="article"><a href="/homework-help/us-documents/state-union-address-george-washington-december-8-1795">George Washington (December 8, 1795)</a></span></dt> <dt><span xmlns="" class="article"><a href="/homework-help/us-documents/state-union-address-george-washington-december-7-1796">George Washington (December 7, 1796)</a></span></dt> <dt><span xmlns="" class="article"><a href="/homework-help/us-documents/state-union-address-john-adams-november-22-1797">John Adams (November 22, 1797)</a></span></dt> <dt><span xmlns="" class="article"><a href="/homework-help/us-documents/state-union-address-john-adams-december-8-1798">John Adams (December 8, 1798)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/1/node/4838">John Adams (December 3, 1799)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/1/node/4949">John Adams (November 11, 1800)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/1/node/4985">Thomas Jefferson (December 8, 1801)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/1/node/4996">Thomas Jefferson (December 15, 1802)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/1/node/5007">Thomas Jefferson (October 17, 1803)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/1/node/5018">Thomas Jefferson (November 8, 1804)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/1/node/5029">Thomas Jefferson (December 3, 1805)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/1/node/5040">Thomas Jefferson (December 2, 1806)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/1/node/5051">Thomas Jefferson (October 27, 1807)</a></span></dt> <dt><span xmlns="" class="article"><a href="/homework-help/us-documents/state-union-address-thomas-jefferson-november-8-1808">Thomas Jefferson (November 8, 1808)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/2/node/4838">James Madison (November 29, 1809)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/2/node/4949">James Madison (December 5, 1810)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/2/node/4985">James Madison (November 5, 1811)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/2/node/4996">James Madison (November 4, 1812)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/2/node/5007">James Madison (December 7, 1813)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/2/node/5018">James Madison (September 20, 1814)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/2/node/5029">James Madison (December 5, 1815)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/2/node/5040">James Madison (December 3, 1816)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/2/node/5051">James Monroe (December 12, 1817)</a></span></dt> <dt><span xmlns="" class="article"><a href="/homework-help/us-documents/state-union-address-james-monroe-november-16-1818">James Monroe (November 16, 1818)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/3/node/4838">James Monroe (December 7, 1819)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/3/node/4949">James Monroe (November 14, 1820)</a></span></dt>

<dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/3/node/4985">James Monroe (December 3, 1821)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/3/node/4996">James Monroe (December 3, 1822)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/3/node/5007">James Monroe (December 2, 1823)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/3/node/5018">James Monroe (December 7, 1824)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/3/node/5029">John Quincy Adams (December 6, 1825)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/3/node/5040">John Quincy Adams (December 5, 1826)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/3/node/5051">John Quincy Adams (December 4, 1827)</a></span></dt> <dt><span xmlns="" class="article"><a href="/homework-help/us-documents/state-union-address-john-quincy-adams-december-2-1828">John Quincy Adams (December 2, 1828)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/4/node/4838">Andrew Jackson (December 8, 1829)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/4/node/4949">Andrew Jackson (December 6, 1830)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/4/node/4985">Andrew Jackson (December 6, 1831)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/4/node/4996">Andrew Jackson (December 4, 1832)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/4/node/5007">Andrew Jackson (December 3, 1833)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/4/node/5018">Andrew Jackson (December 1, 1834)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/4/node/5029">Andrew Jackson (December 7, 1835)</a></span></dt> <dt><span xmlns="" class="article"><a href="/t/hist/state-of-the-union/4/node/5040">Andrew Jackson (December 5, 1836)</a></span></dt> </dl> </div> <button id="getLinksButton" onclick="getCorrectLinks()">Get the Correct Links</button> <br /> <br /> <table id="presidentTable"></table> </div> </article> </section> </body> </html>

code.js

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

p3.css

body { font-family:Tahoma; font-size:13px; } caption { font-family: Tahoma; font-weight: bold; font-size: 20px; } #presidentTable { border-spacing: 0px; } #presidentTable th, td { font-family: Tahoma; font-size: 13px; border-bottom: 1px solid white; padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; } #presidentTable tr:nth-child(even) { background-color: #dfe1e7; } #presidentTable tr:nth-child(odd) { background-color: #eeeff2; } #presidentTable th { background-color: #687291; color: white; font-weight: bold; text-align: left; } #presidentTable tr td:nth-child(4), tr td:nth-child(5), tr td:nth-child(6) { text-align: center; }

CIS408– Lab Assignment 3 ID: 2715891eecs.csuohio.edu/~sschung/CIS408/CIS408_Heideloff_Lab3.pdf ·...

Documents

Transcript of CIS408– Lab Assignment 3 ID: 2715891eecs.csuohio.edu/~sschung/CIS408/CIS408_Heideloff_Lab3.pdf ·...