IT 238 -- May 19, 2025 Notes

IT 238 -- May 19, 2025

Practice Exercises

How does the Elvis operator work?
Answer: The Elvis operator is so named because a ? rotated 90 degrees counterclockwise looks like Elvis Presley's wavy hair. This operator is also called the tertiary conditional operator because it accepts three operands: (1) condition, (2) result if condition is true, and (3) result if condition is false:
```
var result = condition ? resultIfTrue : resultIfFalse;
```
This is just a one-line if-else statement:
```
var result;
if (condition) {
    result = resultIfTrue;
}
else {
    result = resultIfFalse;
}
```
For example:
```
var x = 259;
var size = (x >= 100) ? "Large" : "Small";
```

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. Answer:

<!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 12</label></li>

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

For Project 4, how do you set up the hints to be initially hidden?

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( ( ) => {
    $("#btn1").click( ( ) => {
        $("#p1").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>

Test the following jQuery script that dynamically adds content to paragraph like this:

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. Answer:

window.addEventListener("load", ( ) => {
    var pObj = document.querySelector("#p1");
    pObj.innerHTML = "Halloween Greeting " +
        "Example<br>Happy Halloween";
    pObj.style.font = "bold 200% Chiller";
    pObj.style.backgroundColor = "#FF8000";
});

Practice Quiz

Take Practice Quiz 7a.

Examples for Project 4

Four examples to help you with Project 4:
1. 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>
 Why is 6 scared of 7? 
 
 Because 7 8 9.
 <button>Show Answer for Riddle 1</li>

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

 <li>
 What did the repeating decimal number say to pi? 
 
 Don't be so irrational.
 <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
2. MathRiddles2 Example
 Same as the MathRiddles1 Example but without the buttons. Click a riddle to make its answer visible.
 Web Page Source Code
3. 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
4. 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
5. 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
6. 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.

// Example 1
// Use 1 paragraph in HTML file with id="p1".
$(function( ) {
    $("#p1").mouseleave(function( ) { 
        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.