To Lecture Notes

IT 238 -- May 27, 2026

Practice Exercises

  1. What do these document methods do:
    querySelector  querySelectorAll  createElement  appendChild
    querySelector -- Creates a JavaScript object that represents the first element specified by the selector. Selectors can be element selectors (e.g., "input"), id selectors (e.g., "#btn1"), or class selectors (e.g.,".red")
    querySelectorAll -- Creates an array of JavaScript objects that represent all of the elements specified by the selector.
    createElement -- Creates a JavaScript object from scratch that represents an HTML element specified by an element selector, e.g., 
    var paraObj = document.createElement("p");
    appendChild -- Adds an element to the DOM tree by adding it as the last child of the parent object, e.g.,
    olObj.appendChild(liObj);
  2. On an HTML page, create a dropdown menu with the inner html "Alabama", "Alaska", "Arizona" with values "AL", "AK", "AR". Display the value in a paragraph when the selected item is changed. Answer:
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>States Example</title>
        <script src="script.js"></script>
    </head>
    <body>
        <h2>States Example</h2>

        <select id="states">
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
        </select>

        <p></p>
    </body>
</html>
------------------------------------------------
function showSelectedState( ) {
    var selectObj = document.querySelector("#states");
    var paraObj = document.querySelector("p");
    paraObj.textContent = selectObj.value;
}

function init( ) {
    var selectObj = document.querySelector("#states");
    var paraObj = document.querySelector("p");
    paraObj.textContent = selectObj.value;
    selectObj.addEventListener("change", showSelectedState);
}
  3. Repeat Exercise 1, but add the items dynamically from these two arrays:
    var states = ["Alabama", "Alaska", "Arizona", "Arkansas", 
    "California", "Colorado", "Connecticut", "Delaware",
    "Florida", "Georgia", "Hawaii", "Idaho", "Illinois",
    "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana",
    "Maine", "Maryland", "Massachusetts", "Michigan",
    "Minnesota", "Mississippi", "Missouri", "Montana",
    "Nebraska", "Nevada", "New Hampshire", "New Jersey",
    "New Mexico", "New York", "North Carolina", 
    "North Dakota", "Ohio", "Oklahoma", "Oregon",
    "Pennsylvania", "Rhode Island", "South Carolina",
    "South Dakota", "Tennessee", "Texas", "Utah", 
    "Vermont", "Virginia", "Washington", "West Virginia",
    "Wisconsin", "Wyoming"];

var abbrev = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", 
    "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", 
    "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", 
    "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", 
    "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", 
    "UT", "VT", "VA", "WA", "WV", "WI", "WY"];
    As in Exercise 2, display the abbreviation in a paragraph when the selected item is changed. Answer:
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>States Example</title>
        <script src="script.js"></script>
    </head>
    <body>
        <h2>States Example</h2>

        <select id="states"></select>

        <p></p>
    </body>
</html>
--------------------------------------------
// Place the states and abbrev arrays here
// as global arrays.

function showSelectedState( ) {
    var selectObj = document.querySelector("#states");
    var paraObj = document.querySelector("p");
    paraObj.textContent = selectObj.value;
}

function init( ) {
    var selectObj = document.querySelector("#states");
    var paraObj = document.querySelector("p");
    for(var i = 0; i < states.length; i++) {
        var optionObj = document.createElement("option");
        optionObj.textContent = states[i];
        optionObj.value = abbrev[i];
        selectObj.appendChild(optionObj);
    }
    paraObj.textContent = selectObj.value;
    selectObj.addEventListener("change", showSelectedState);
}

document.addEventListener("DOMContentLoaded", init);
  4. Modify the exercise from last time (Mar 2), by adding this line at the bottom of the body showing which questions were answered correctly, for example:
    1. Correct 2. Incorrect 3. Correct
    Answer: add this empty paragraph to the end of the body:
    <p id="details"></p>
    Modify the script.js file to look like this:
    function computeScore( ) {
    const correctAnswers = ["", "b", "c", "a"];
    var numCorrect = 0;
    var details = "";
    for(var i = 1; i <= 3; i++) {
        var isCorrect = false;
        for(var j = 1; j <= 3; j++) {
            var rb = document.getElementById("" + i + j);
            if (rb.checked && rb.value == correctAnswers[i]) {
                numCorrect++;
                isCorrect = true;
            }
        }
        var word = isCorrect ? "Correct" : "Incorrect";
        details += `${i}: ${word} `;
    }
    var outputPara = document.getElementById("numcorrect");
    outputPara.innerHTML = "Number correct: " + numCorrect;
    var detailsPara = document.getElementById("details");
    detailsPara.innerHTML = details;
}

function init( ) {
    var button1 = document.getElementById("btn1");
    button1.addEventListener("click", computeScore);
}

window.addEventListener("load", init);

Project 4

HTTP

Submission Forms

We will discuss this section on Mar 9.

Form Validation -- Part A

We will discuss this section on Mar 9.