IT 238 -- Feb 24, 2025 Notes

To Lecture Notes

IT 238 -- Feb 24, 2025

Review Exercises

Use document methods to obtain JavaScript objects that represent HTML elements that match these selectors:
```
#5  td  .red
```
Dynamically create a paragraph element, populate it, and append it to the body of the DOM? Assume that this paragraph tag does not exist so that it must be created dynamically and added to the body element. Use an anonymous function in arrow notation for the init method to add this element.
Dynamically create an ordered list and append it to the bottom of the HTML document. Obtain the inner HTML for the list items from this array:
```
["un", "deux", "trois", "quartre", "cinq"]
```
Use an anonymous functions in arrow notation for the event handlers.

Practice Quiz 6b

Take Practice Quiz 6b.

Project 4

The goal of Project 4 is to implement an online multiple choice quiz.
Look at the Project 4 Description.
Note that the quiz questions, hints, and answers must be in a JSON file, which is uploaded to use in populating the quiz data on the HTML page.
The File Upload and Hide/Display examples should help you for Project 4
Start composing questions and hints for your Project 4 quiz.
Your quiz questions should be related to a specific topic. Don't just use a random collection of unrelated questions.

Examples for Project 4

Four examples to help you with Project 4:

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

Truthiness

We saw in the Comparisons for Equality Section on Jan 22 that 0, 0.0, "", and null are
equal to the value false, according to the == operator.
In this section, we investigate the truthiness of various values.
The truthiness of a value is its value after being converted to boolean with the Boolean function.
The truthiness of an expression is also the boolean value to which an expression in the condition of if, else..if, while, traditional for loop, or Elvis operator is converted.

Truthiness Example
Predict the output of this script.

document.write(Boolean(5) + " ");
document.write(Boolean(283764) + " ");
document.write(Boolean(0) + " ");
document.write(Boolean(-203) + "<br>");
// Output: true true false true

document.write(Boolean(3.14159265) + " ");
document.write(Boolean(-284.378) + " ");
document.write(Boolean(0.000000001) + " ");
document.write(Boolean(0.0) + "<br>");
// Output: true true true false

document.write(Boolean("grapefruit") + " ");
document.write(Boolean("$%&*@") + " ");
document.write(Boolean("0") + " ");
document.write(Boolean("false") + " ");
document.write(Boolean(" ") + " ");
document.write(Boolean("") + "<br>");
// Output: true true true true false

document.write(Boolean(null) + " ");
document.write(Boolean(undefined) + " ");
document.write(Boolean(Infinity) + " ");
document.write(Boolean(NaN) + "<br>");
// Output: false false true false

Then run it to check if your prediction is correct.

Formulate the rules for truthiness.
The reason that truthiness is important is the behavior of if or while statements when their conditions are expressions that do not return true or false.

What is the output?

var n = 45;
var v;
if (n) {
    v = "nonzero";
}
else {
    v = "zero";
}
document.writeln("Value: " + v);

The jQuery JavaScript Library

jQuery is a lightweight JavaScript library, which makes many JavaScript programming tasks easier.
However, for most web programming projects, jQuery is becoming obsolete for several reasons:
- many jQuery features have been incorporated directly into JavaScript,
- other libraries such as Vue, Angular, and React have become popular.
Our goal is to show how some common constructs in JavaScript can be translated into jQuery.
A good reference for jQuery is W3Schools:
https://www.w3schools.com/jquery/default.asp
You can use the jQuery library in two ways:
1. Download the jQuery library; download the uncompressed, development version jquery-3.5.1.js from the jQuery website:
  https://jquery.com/download/
  Use jQuery by including this script file in the head section of your HTML file:
```
<head>
    <script src="../jquery-3.5.1.js">
    </script>
    ... other script tags.
</head>
```
  Place the jQuery library script in the parent folder of your submission file so it is not included in your submission file. I will supply my own copy of this file in the parent folder when I grade your submission.
2. Access jQuery via a CDN (Content Delivery Network). The link in the following head tag is hosted by Google:
```
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    ... other script tags.
</head>
```

Basic jQuery Syntax

Most jQuery statements consist of selecting HTML elements and performing an action on them:
```
$(selector).action( );
```

Here are some examples of jQuery statements:

// Hide all elements with node name p.
$("p").hide( );

// Change the value of the input 
// controls with class="test" to "abc".
$(".test").val("abc");

// Change the inner html of the paragraph
// with id="p1" to "Hello, World!".
$("#p1").text("Hello, World!");

The jQuery expression for

window.addEventListener("load", init);

$(document).ready(init);

or even shorter

$(init);

Some jQuery Examples

Consider this HTML page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="../jquery-3.5.1.js">
        </script>
        <script src="myscript.js">
        </script>
        <link rel="stylesheet" 
              href="styles.css">
    </head>

    <body>
        <h1>jQuery Examples -- Set 1</h1>
        <button id="btn1">Show First Greeting</button>
        <input type="button" id="btn2" 
               value="Show Second Greeting">
        <p id="p1"></p>
    </body>
</html>

Translate these JavaScript scripts into jQuery. In each case, place the script in myscript.js to run the example.

Problems. Write a JavaScript script for each problem and then translate it into jQuery.

Display the greeting "Hello, World!" in the paragraph p with id="p1".

// JS1: myscript.js
// display the greeting "Hello, World!" in
// the paragraph p1 when the window loads.
function init( ) {
    document.getElementById("p1").innerHTML =
        "Hello, World!";
}
window.addEventHandler("load", init);

The init method could be passed to window.addEventHandler as an anonymous function like this:

// JS2: myscript.js
window.addEventHandler("load", function( ) {
    document.getElementById("p1").innerHTML =
        "Hello, World!";
});

Here is the JavaScript Script JS1 translated into jQuery (JQ1), using $ as an abbreviation for $(document).ready:

$(function( ) {
    $("#p1").text("Hello, World!");
});

Write a script which attaches a click event handler to the button, which displays the greeting "Hello, how are you?" in the paragraph p1 when the button is clicked.
```
// JQ1: myscript.js
$(function( ) {
    $("btn1").click(function) {
        $("#p").text("Hello, World!");
    });
});
```

JavaScript querySelector Method

The JavaScript document.querySelector method allows direct translation of jQuery statements into JavaScript

jQuery	JavaScript
$("#p1")	document.querySelector("#p1"); document.getElementById("p1");
$(".red")	document.querySelectorAll(".red"); document.getElementsByClassName("red");
$("p")	document.querySelectorAll("p"); document.getElementsByTagName("p");

document.querySelector returns the first instance of the HTML element that matches the selector.
document.querySelectorAll returns a list of all HTML elements that match the selector.
The introduction of the querySelector and querySelectorAll methods may explain the decrease in popularity of jQuery.
Using these methods, it is now easy to translate jQuery statements into vanilla JavaScript that executes faster than using methods from the jQuery library.