IT 238 -- May 18, 2026 Notes

IT 238 -- May 18, 2026

Practice Exercises

Translate each of these lines into vanilla JavaScript:

// a.
$(document).ready(init);
// VJS:
document.addEventListener("DOMContentLoaded", init);

// b.
$(init);
// Same as 1a.

// c.
$("button").click(f);
// VJS: if there is only one button
document.querySelector("button").
    addEventListener("click", f);
// VJS: if there is more than one button:
var btnObject = document.querySelectorAll("button");
for (btn of btnObject) {
    btn.addEventListener("click", f);
}

// d. p1 is the id of a paragraph
$("#p1").text("This is a test.");
// VJS:
document.querySelector("#p1").textContent = 
    "This is a test.";

// e.
var paraContent = $("#p1").text( );
// VJS:
var paraContent = document.querySelector("#p1").textContent

// f. 
$("#input").val("Test input");
// VJS:
document.querySelector("#input").value = "This is a test.";

// g.
var inputContent = $("input").val( );
// VJS:
var inputContent = document.querySelector("#input").value;

// h.
$("button").click( ( ) => $("button").hide( ));
// VJS: if there is only one button:
var btnObject = document.querySelector("button");
btnObject.addEventListener("click", ( ) => {
   btnObject.style.display = "none";     
});
// VJS: if there is more than one button:
var btnObject = document.querySelector("button");
for(var btn of btnObject) {
    btn.addEventListener("click", e => {
        e.target.style.display = "none";
});

In jQuery, the statement

$(document).ready(init);

is usually written as its shorter version

$(init);

Rewrite this script as its shorter version and test it:

$(document).ready( ( ) => {
    $("button").click( ( ) => {
        $("p").text("Hello, World!");
    });
});

Answer: here is the entire HTML file with the revised script.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Exercise 3</title>
        <script>
        $( ( ) => {
            $("#btn1").click( ( ) => {
                $("#p1").text("Hello, World!");
            });
        });
        </script>
    </head>
    <body>
        <h1>Exercise 3</h1>
        <button id="btn1">Show Greeting</button>
        <p id="p1"></p>
    </body>
</html>

Examples for Project 4

GreenRedImages Example. Write a script that shows a green check or red X image when a check box element is checked or unchecked?

Checkbox a
Checkbox b
Checkbox c

Initially, the images are empty with background color #C0C0C0. Here is the source code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Exercise 2</title>
        <style>
        #img1, #img2, #img3 { 
            display: inline;
            width: 15px; height: 15px;
            background-color: #C0C0C0; }
        </style>
        <script>
        function showIcon(e) {
            var cbObj = e.target; 
            var cbIndex = cbObj.id.charAt(2);
            var imgObj = document.querySelector("#img" + cbIndex);
            var imageFile = cbObj.checked ? 
                "green-check.png" : "red-x.png";
            imgObj.src = imageFile;
        }

        function init( ) {
            for(var i = 1; i <= 3; i++) {
                document.querySelector("#cb" + i).
                addEventListener("change", showIcon);
            }
        }
        window.addEventListener("load", init);
        </script>
    </head>
    <body>
        <h1>Exercise 2</h1>
        <ol>
            <li><img id="img1">
            <input type="checkbox" id="cb1">
            <label for="cb1">Checkbox 1</label></li>

            <li><img id="img2">
            <input type="checkbox" id="cb2">
            <label for="cb2">Checkbox 2</label></li>

            <li><img id="img3">
            <input type="checkbox" id="cb3">
            <label for="cb3">Checkbox 3</label></li>
        </ol>
    </body>
</html>

MathRiddles1 Example
Display three math riddles and answers in an HTML page like this.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>MathRiddles1 Example</title>
    </head>
    <body>
        <ol>
            <li><span id="r1">
                Why is 6 scared of 7?</span><br>
                <span id="a1">
                Because 7 8 9.</span>
                <button>Show Answer for Riddle 1</li>

            <li><span id="r2">
                How can you tell that the three fractions
                x/c, y/c, and z/c all live in a foreign country?</span><br>
                <span id="a2">
                Because they are all over cs.</span>
                <button>Show Answer for Riddle 2</li>

            <li><span id="r3">
                What did the repeating decimal number say to pi?</span><br>
                <span id="a3">
                Don't be so irrational.</span>
                <button>Show Answer for Riddle 3</li>
        </ol>
    </body>
</html>

The each answer is hidden, but can be displayed when the button for its riddle is clicked.
Web Page Source Code

MathRiddles2 Example
Same as the MathRiddles1 Example but without the buttons. Click a riddle to make its answer visible.
Web Page Source Code
MathRiddles3 Example
Same as MathRiddles2, but only use one click event handler. This event handler uses an event object to determine which riddle was clicked and then determines the answer to show from the ids of the riddle and answer.
Web Page Source Code
MathRiddles4 Example
Same as MathRiddles3, but no ids are used, only the classes .r for riddles and .a for answers. Use the document.nextElementSibling property to obtain the object representing the answer for the clicked riddle.
Web Page Source Code
ReadFromJSON Example
Place the JSON file riddles.json on your harddrive. The script then reads the riddles and answers from this JSON file and dynamically loads them into an ordered list.
Web Page Source Code
CrapsGame Example
Play the the dice game on the Web Page. A win is marked with a green check image; a loss is marked with a red X image. Here are the rules for Craps:
A player, called the shooter, rolls a pair of dice,
1. if the sum of the dice is 7 or 11, the player wins,
2. else if the sum of the dice is 2, 3, or 12, the player loses
3. otherwise the sum is recorded as the point and the player keeps rolling the dice,
4. if the player obtains the point again before rolling another 7, the player wins,
5. otherwise the player loses.
Try it out with this simulation:
Web Page Source Code

More jQuery Examples

Here are some jQuery examples from the W3Schools jQuery Tutorial. Their URL is
https://www.w3schools.com/jquery/default.asp.
Translate each example into vanilla JavaScript.
Note: if the this keyword is used in a function, which refers sequentially to each of the items referenced by the selector, use the function keyword to define the function instead of arrow notation. To avoid confusion, we use the function keyword for all five examples. In Vanilla JavaScript, arrow notation can always be used.

We only looked at Example 1 in class today.

// Example 1
// Use 1 paragraph in HTML file with id="p1".
$(function( ) {
    $("#p1").mouseleave(function( ) { 
        alert("You left paragraph #p1."); 
    }); 
});
// VJS:
document.addEventListener("DOMContentLoaded", ( ) => {
    document.querySelector("#p1").
        addEventListener("click", ( ) => {
            alert("You left paragraph #p1."); 
    });
});

// Example 2
// Use 4 paragraphs in HTML file.
$(function( ) {
    $("p").mouseleave(function( ) { 
        var t = $(this).text( );
        alert(`Bye! Left the <p> with text ${t}.`); 
    });
});

// Example 3
// Use 3 input elements with type="text".
$(function( ) { 
    $("input").focus(function( ) {
        $(this).css("background-color", "#cccccc"); 
    }); 
    $("input").blur(function( ){ 
        $(this).css("background-color", "#333333"); 
    }); 
});

// Example 4
// Use 5 paragraphs in HTML file.
$(function( ) { 
    $("p").on("click", function( ) {
        $(this).hide( ); 
    }); 
});

// Example 5
// Use buttons with captions "Hide" and "Show", 
// and also a paragraph with no ID.
$(function( ) { 
    $("#hide").click(function( ) { 
        $("p").hide( ); 
    }); 
    $("#show").click(function( ){ 
        $("p").show(); 
    }); 
});

See the W3Schools site for the complete HTML files, which can be run interactively. Here are the HTML files with scripts (jQuery and Vanilla JS) that we looked at in class.

Other jQuery effects, such as fade and slide require animation when written in vanilla JavaScript. We we will discuss animation later.
Look at some of the exercises at the bottom of the jQuery Events section in the WSchools JavaScript tutorial.