To Lecture Notes

IT 238 -- Feb 25, 2026

Practice Exercises

  1. Translate each of these lines into vanilla JavaScript:
    // a.
$(document).ready(init);

// b.
$(init);

// c.
$("button").click(f);

// d. p1 is the id of a paragraph
$("#p1").text("This is a test.");

// e.
var paraContent = $("#p1").text( );

// f. 
$("input").val("Test input");

// g.
var inputContent = $("input").val( );

// h.
$("button").click( ( ) => $("button").hide( ));
  2. 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!");
    });
});
  3. Test this jQuery script that dynamically adds content to paragraph:

    Halloween Greeting Example
    Happy Halloween

    $( ( ) => {
    $("#p1").html("Halloween Greeting Example<br>Happy Halloween");
    $("#p1").css("font", "bold 200% Chiller");
    $("#p1").css("backgroundColor", "#FF8000");
});
    Translate this script to Vanilla JavaScript.

Examples for Project 4

  1. GreenRedImages Example. Write a script that shows a green check or red X image when a check box element is checked or unchecked?
    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>
  2. 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
  3. MathRiddles2 Example
    Same as the MathRiddles1 Example but without the buttons. Click a riddle to make its answer visible.
    Web Page    Source Code
  4. 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
  5. 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
  6. 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
  7. 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