To Lecture Notes

IT 238 -- May 12, 2025

Review Exercises

  1. What do these JavaScript methods do?
    document.querySelector  document.querySelectorAll  
document.createElement  obj.appendChild
  2. Look at the HideDisplay Example.
  3. How can you change the size of an HTML element represented by the object h1Obj to twice its default size?
    Answer: as in the example in Exercise 4, if the font size of the element represented by h1Obj is 20 points (20pt), change its size to 40pt like this:
    h1Obj.style.fontSize = "40pt";
  4. Look at this ChangeSize Example
    Web Page  Source Code
  5. Start with this HTML page:
    <body>
    <p>Lorem ipsum.</p>
    <p id="p1">In eu blandit velit.</p>
    <p>Proin turpis erat, porta dignissim dapibus 
       in, rhoncus et diam. Sed id ante mattis.</p>
    <p class="flagged">Suspendisse.</p>
    <p class="flagged">Class aptent taciti sociosqu ad litora 
       torquent per conubia nostra, per inceptos 
       himenaeos. Fusce sed nunc nisi.</p>
    <button>Perform Ex2</button>
</body>
    Write JavaScript code that does each of the following when the "Perform Ex2" button is clicked:
    1. Change the text color of the paragraph with id #p1 to blue.
    2. Change the text of the paragraphs that implement the class .flagged to uppercase.
    3. Count the total number of paragraphs.
    Answer:
    =================================================
<!DOCTYPE html>
<!-- HTML File: index.html -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ex 2</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>

    <body>
        <h1>ex 2</h1>
        <p>Lorem ipsum.</p>
        <p id="p1">In eu blandit velit.</p>
        <p>Proin turpis erat, porta dignissim dapibus 
           in, rhoncus et diam. Sed id ante mattis.</p>
        <p class="flagged">Suspendisse.</p>
        <p class="flagged">Class aptent taciti sociosqu ad litora 
           torquent per conubia nostra, per inceptos 
           himenaeos. Fusce sed nunc nisi.</p>
        <button>Perform Ex2</button>
    </body>
</html>
-------------------------------------------------
/* Stylesheet: styles.css */
    body     { font-family: verdana; }
.flagged { font-style: italic; }
-------------------------------------------------
// JavaScript script: script.js
// Exercise 5a.
function changeToBlue( ) {
    var p1Obj = document.querySelector("#p1");
    p1Obj.style.color = "blue";
}

// Exercise 5b.
function changeToUpperCase( ) {
    var parObjects = document.querySelectorAll(".flagged");
    for(p of parObjects) {
        var str = p.innerHTML;
        p.innerHTML = str.toUpperCase( );
    }
}

// Exercise 5c.
function showCount( ) {
    var paras = document.querySelectorAll("p");
    var count = paras.length;
    var newP = document.createElement("p");
    var bodyObj = document.querySelector("body");
    bodyObj.appendChild(newP);
    newP.innerHTML = "Paragraph count: " + count;
}

// Execute code for Ex. 5a, 5b, and 5c.
function buttonListener( ) {
    changeToBlue( );
    changeToUpperCase( );
    showCount( );
}

// Attach click event listener to button.
function init( ) {
    var button1 = document.querySelector("button");
    button1.addEventListener("click", buttonListener);
}

// The following line is an alternative to window.onload:
document.addEventListener("DOMContentLoaded", init);
=================================================

Practice Quiz 5a

The File Upload Object

Project 2b

Practice Problem

  1. Build this table entirely by using JavaScript:
    Name Height Country
    Kilimanjaro 5895 Tanzania
    Start with the empty body
    <body></body>
    Answer:
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
        function init( ) {
            var bodyObject = document.querySelector("body");
            var tableObject = document.createElement("table");
            bodyObject.appendChild(tableObject);

            var headers = ["Name", "Height", "Country"];
            var entries = ["Kilimanjaro", "5987", "Tanzania"];

            var rowObject1 = document.createElement("tr");
            tableObject.appendChild(rowObject1);
            for(var h of headers) {
                var headerObject = document.createElement("th");
                rowObject1.appendChild(headerObject);
                headerObject.innerHTML = h;
            }
            var rowObject2 = document.createElement("tr");
            tableObject.appendChild(rowObject2);
            for(var e of entries) {
                var entryObject = document.createElement("td");
                rowObject2.appendChild(entryObject);
                entryObject.innerHTML = e;
            }
            var tdObjects = document.querySelectorAll("td");
            for(td of tdObjects) {
                td.style.border = "2px solid red";
            }
            tableObject.style.borderCollapse = "collapse";
        }
        window.addEventListener("load", init);
        </script>
    </head>
    <body></body>
</html>