IFSC 3300 HW 12 Due W Nov. 13, 2024

Directions: Email your HW to IFSC3300HW@gmail.com.

1. Consider this code, based on the first "Try It Yourself" exercise in the DOM Nodes lesson on w3schools.com:

<!DOCTYPE html>

<html>

<body>

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

var paragraphNode = document.createElement("b");

var textNode = document.createTextNode(paragraphNode.nodeType);

textNode = document.createTextNode(textNode.nodeName);

paragraphNode.appendChild(textNode);

var divisionNode = document.getElementById("div1");

var someChild = divisionNode.childNodes[3];

divisionNode.insertBefore(paragraphNode, someChild);

</script>

</body>

</html>

1a. Find the number 3 in the code. Try replacing it with the following numbers: 0, 1, 2, 3, 4, 100. What does each number do? Why?

1b. For the value 3, compare having the two paragraphs on separate lines (as they are above) to having them on the same line with no spaces between them, like this:

<p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.</p>

Explain.

2. Consider nodes' parentNode, childNodes, firstChild, lastChild, nextSibling, and previousSibling properties (properties, or attributes, or members, are local variables in an object, such as a DOM node object).These are described in this guide. Make buttons demonstrating any two of them by modifying the code of question 1 above. Add these buttons to the button-based JavaScript demo you made for a previous HW or HWs. Explain what happened in each of the two cases.

3. Do exercises 6, 7, & 8 at the bottom of the “DOM CSS” lesson page (here). Explain what setting the CSS style.display value to “block” means.

4. Consider the animated progress bar “Try it Yourself” example at this link. Make some fun or interesting changes to the animation. State what they are in the program. Change the program further so that it prints out the value of the setInterval() call.