IT 238 -- May 16, 2025 Notes

To Lecture Notes

IT 238 -- May 14, 2025

Review Exercises

How many times does this for loop execute?
```
var m = 10000;
var n = 20000;
var count = 0;
for(let i = 1; i <= m; i++) {
    for(let j = 1; j <= n; j++) {
        count++;
    }
}
document.writeln("Count = " + count);
```
Answer: 10,000 * 20,000 = 200,000,000 (200 million). The reason is that the inner loop executes 20,000 times for each time that the outer loop executes. Therefore multiply the numbers to get the total number of times that the inner loop and count++ executes.
What is the difference between the CSS properties margin and padding?
Answer: padding is space between the border and the contents of the element; margin is space between the border and the neighboring element or document border.
What is the difference between the CSS properties display and visibility for an HTML element?
Answer: When the display property is set to "none", the item no longer takes up space and the neighboring elements close up the space around the item. When the visibility property is set to "hidden", the invisible element still takes the same amount of space as when it was visible.

Project 2b

Look at the Project 2b Description.
Modify the KidsTextArea2 Example so that it uses a file upload input element.

Practice Quiz 5b

Take Practice Quiz 5b.

The jQuery JavaScript Library

jQuery is a lightweight JavaScript library, which makes many JavaScript programming tasks easier.
However, for new web programming projects, jQuery is becoming less popular 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.7.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.7.1.js">
    </script>
    ... other script tags.
</head>
```
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.6.0/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

Start with this HTML page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="../jquery-3.7.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 Greeting</button>
        <p id="p1"></p>
    </body>
</html>

Test these two choices for myscript.js, then translate them into vanilla JavaScript.

// myscripta.js
$(document).ready( ( ) => {
    $("#p1").text = "Hello World!";
});

// myscriptb.js
$(document).ready( ( ) => {
    ${"btn1").click( ( ) => {
        $("p1").text = "Hello World!";
    });
});

// myscripta.java translated into
// vanilla JavaScript
document.addEventListener("DOMContentLoaded", ( ) => {
    document.querySelector("p").innerHTML =
        "Hello, World!";
});

// myscriptb.java translated into
// vanilla JavaScript
document.addEventListener("DOMContentLoaded", ( ) => {
    document.querySelector("btn1").
             addEventListener("click", ( ) => {
        document.querySelector("p").innerHTML = 
            "Hello, World!";
    });
});

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

$(init);

is written in vanilla JavaScript as

window.addEventListener("load", init);

window.onclick = init;

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

// jQuery Script
$(( ) => {
    $("#p1").text("Hello, World!");
});

// The vanilla JavaScript translation is
window.onclick = ( ) => {
    document.querySelector("#p1").innerHTML = "Hello, World!";    
};

Attach a click event handler to the button with caption Show First Greeting, which displays the greeting "Hello, how are you?" in the paragraph p1 when the button is clicked.

// jQuery Script
$(( ) => {
    $("#btn1").click(( ) => {
        $("#p1").text("Hello, World!");
    });
});

// The vanilla JavaScript translation is:
window.onload = ( ) => {
    document.querySelector("#btn1").onclick = ( ) => {
        document.querySelector("#p1").innerHTML = "Hello, World!";
    };
};

// or
window.addEventListener("load", ( ) => {
    document.querySelector("#btn1").
            addEventListener("click", ( ) => {
        document.querySelector("#p1").innerHTML = "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");
$("ol ol")	document.querySelectorAll("ol ol"); No equivalent document.getElements statement

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 straightforward to translate jQuery statements into vanilla JavaScript that executes faster than using methods from the jQuery library.