2 (15 pts.). Write an HTML document prob2.html that loads a JavaScript file prob
ID: 3870434 • Letter: 2
Question
2 (15 pts.). Write an HTML document prob2.html that loads a JavaScript file prob2.js. The JavaScript program should prompt the user for a string that contains three values separated by any amount of whitespace. There may also be any amount of whitespace (including, in this case, none) before the first value and after the last. The first value on a line should be in a floatingpoint format (explained in detail below), the second value should be a signed or unsigned decimal integer (see below), and the third value should be one of the single letters ‘x’, ‘y’, or ‘z’. You write a regular expression intended to match an entire line (so it begins with ‘^’ and ends with ‘$’). Keep running sums of the floating-point numbers represented by the first values and of the integers represented by the second values in a line. Also, maintain a string onto which the third values are concatenated. If one or more of the values in a line are improperly formatted, output that line preceded by the string "No match with "; in this case, the entire line is ignored (making no contribution to the accumulated values). The format for the integer value is simple: either (1) an optional sign followed by a string of digits beginning with a digit other than ‘0’ or (2) the string consisting only of ‘0’. The format for floating-point values is very versatile. There is an optional initial sign. Then, before the decimal point (if there is one), there is either the character ‘0’ or a string of digits beginning with a digit other than ‘0’. There are two possibilities for the remainder. One possibility is a decimal point followed by one or more digits. The other possibility is an optional decimal point and one or more digits, then ‘E’ or ‘e’, and then a string of one or more digits optionally preceded by a sign. The following are examples of valid floating-point representations. 12.34 -3.5 32.2E2 4.23e-10 62E+2 0.0 The following are examples of representations that fail to meet this format. 12.E2 (There is no digit after the decimal point.) 062.42 (The initial ‘0’ is invalid.) The following is the strings that you can use to test your program, which you can download from the assignment site. 12.34 -79 x -3.5 23 y 32.2E2 2 z 4.23e-10 +45 x 62E+2 -4 y 0.0 0 z 12.E2 -125 x 062.42 12987 y 3.45 12.5 z -45.2 06 x COMP 322 Internet Systems Fall 2014 Assignment 4 3 43.6 72 yz -2.63 -10 X The last six lines are invalid. The first two of these six contain the invalid floating-point forms just mentioned. The next two lines contain invalid integer representations (as the second values): 12.5 (not an integer) and 06 (invalid initial ‘0’). The third values in the last two lines are invalid: yz (only single letters are allowed) and X (must be lower case). The following is the output of the program clicking Cancel when prompted for a new string. No match with 12.E2 -125 x No match with 062.42 12987 y No match with 3.45 12.5 z No match with -45.2 06 x No match with 43.6 72 yz No match with -2.63 -10 X 9428.84 -13 xyzxyz To extract the values from the lines, in your regular expression, you will have to do grouping to capture sub-expressions (surrounding sub-expressions to be remembered with parentheses). When you need parentheses for grouping but not capturing, use non-capturing groups, which, recall, are of the form (?:…).
Explanation / Answer
<html>
<head>
<title>My Document</title>
</head>
<body>
<h1>Header</h1>
<p>
Paragraph
</p>
</body>
</html>
<!-- Conventional pretty-print
with white spaces between tags:
-->
<div>
<ul>
<li>Position 1</li>
<li>Position 2</li>
<li>Position 3</li>
</ul>
</div>
<!-- Pretty-print adjusted to the issue:
-->
<div
><ul
><li>Position 1</li
><li>Position 2</li
><li>Position 3</li
></ul
></div>
The Javascript code below defines several functions that make it easier to deal with whitespace in the DOM:
/**
* Throughout, whitespace is defined as one of the characters
* " " TAB u0009
* " " LF u000A
* " " CR u000D
* " " SPC u0020
*
* This does not use Javascript's "s" because that includes non-breaking
* spaces (and also some other characters).
*/
/**
* Determine whether a node's text content is entirely whitespace.
*
* @param nod A node implementing the |CharacterData| interface (i.e.,
* a |Text|, |Comment|, or |CDATASection| node
* @return True if all of the text content of |nod| is whitespace,
* otherwise false.
*/
function is_all_ws( nod )
{
// Use ECMA-262 Edition 3 String and RegExp features
return !(/[^ ]/.test(nod.textContent));
}
/**
* Determine if a node should be ignored by the iterator functions.
*
* @param nod An object implementing the DOM1 |Node| interface.
* @return true if the node is:
* 1) A |Text| node that is all whitespace
* 2) A |Comment| node
* and otherwise false.
*/
function is_ignorable( nod )
{
return ( nod.nodeType == 8) || // A comment node
( (nod.nodeType == 3) && is_all_ws(nod) ); // a text node, all ws
}
/**
* Version of |previousSibling| that skips nodes that are entirely
* whitespace or comments. (Normally |previousSibling| is a property
* of all DOM nodes that gives the sibling node, the node that is
* a child of the same parent, that occurs immediately before the
* reference node.)
*
* @param sib The reference node.
* @return Either:
* 1) The closest previous sibling to |sib| that is not
* ignorable according to |is_ignorable|, or
* 2) null if no such node exists.
*/
function node_before( sib )
{
while ((sib = sib.previousSibling)) {
if (!is_ignorable(sib)) return sib;
}
return null;
}
/**
* Version of |nextSibling| that skips nodes that are entirely
* whitespace or comments.
*
* @param sib The reference node.
* @return Either:
* 1) The closest next sibling to |sib| that is not
* ignorable according to |is_ignorable|, or
* 2) null if no such node exists.
*/
function node_after( sib )
{
while ((sib = sib.nextSibling)) {
if (!is_ignorable(sib)) return sib;
}
return null;
}
/**
* Version of |lastChild| that skips nodes that are entirely
* whitespace or comments. (Normally |lastChild| is a property
* of all DOM nodes that gives the last of the nodes contained
* directly in the reference node.)
*
* @param sib The reference node.
* @return Either:
* 1) The last child of |sib| that is not
* ignorable according to |is_ignorable|, or
* 2) null if no such node exists.
*/
function last_child( par )
{
var res=par.lastChild;
while (res) {
if (!is_ignorable(res)) return res;
res = res.previousSibling;
}
return null;
}
/**
* Version of |firstChild| that skips nodes that are entirely
* whitespace and comments.
*
* @param sib The reference node.
* @return Either:
* 1) The first child of |sib| that is not
* ignorable according to |is_ignorable|, or
* 2) null if no such node exists.
*/
function first_child( par )
{
var res=par.firstChild;
while (res) {
if (!is_ignorable(res)) return res;
res = res.nextSibling;
}
return null;
}
function data_of( txt )
{
var data = txt.textContent;
// Use ECMA-262 Edition 3 String and RegExp features
data = data.replace(/[ ]+/g, " ");
if (data.charAt(0) == " ")
data = data.substring(1, data.length);
if (data.charAt(data.length - 1) == " ")
data = data.substring(0, data.length - 1);
return data;
}
var cur = first_child(document.getElementById("test"));
while (cur)
{
if (data_of(cur.firstChild) == "This is the third paragraph.")
{
cur.className = "magic";
cur.firstChild.textContent = "This is the magic paragraph.";
}
cur = node_after(cur);
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.