IT 238 -- Feb 23, 2026 Notes

To Lecture Notes

IT 238 -- Feb 23, 2026

Review Exercises

Display this image of the Andromeda Galaxy on an HTML page. When the image is clicked, use JavaScript to add a border, a margin, and padding to the image.
Start with this HTML body:
```
<body>
    <h2>Ordered List Example</h1>
</body>
```
Use JavaScript to create and append this ordered list to the body:
1. New York City
2. Los Angeles
3. Chicago
What is the difference between the CSS properties display and visibility for an HTML element?

Project 2b

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

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.

The W3Schools jQuery Tutorial

Look at some of the examples in the jQuery Tutorial:
www.w3schools.com/jquery/default.asp.

Translate these jQuery function calls from jQuery into vanilla JavaScript. Also, write the JavaScript functions in arrow notation.

Add an event handler for the window load event that displays "Hello, World!" in an alert box.

$(function( ) {
    alert("Hello, World!");
}

$(( ) => { 
    alert("Hello, World!"); 
});

Add an event handler to a button that displays "Hello, World!" in an alert box.

$(function( ) {
    $("btn1").click(function( ) {
        alert("Hello, World!");
    });
});

$(( ) => {
    $("bt1").click(( ) => {
        alert("Hello, World!");
    });
});

Try out the W3Schools double click event handler on this page:
www.w3schools.com/jquery/jquery_events.asp

$(function( ){
    $("p").dblclick(function( ){
        $(this).hide( );
    });
});

Translate it into vanilla JavaScript. Answer:

function eventHandler(e) {
    var para = e.target;
    para.style.display = "none";
}
function init( ) {
    var para = document.querySelectorAll("p");
    for(let node of para)) {
        node.addEventListener("dblclick", 
            eventHandler);
    }
}
window.addEventListener("load", init);

Here is the script written with anonymous functions using arrow notation:

window.addEventListener("load", ( ) => {
    var para = document.querySelectorAll("p");
    for(let node of Array.from(para)) {
        node.addEventListener("dblclick", e => {
            var para = e.target;
            para.style.display = "none";
        });
    }
});

Also look the W3Schools examples for this other events:

mouseenter  mouseleave  mousedown  
mouseup  hover  focus  blur

The hover method combines the mousein and mouseout events. It accepts two event handlers:

$("#p1").hover(function( ) {
    alert("Welcome! You entered p.");
},
function( ) {
    alert("Bye! You left p.");
});

Here is the Hover Example translated into JavaScript:

// There is no hover event in vanilla JavaScript.
// The mouseenter and mouseleave event handlers
// must be implemented separately.
window.addEventListener("load", ( ) => {
    var para1 = document.querySelector("p");
    para1.addEventListener("mouseenter", ( ) => {
        alert("Welcome! You entered p.");
    });
    para1.addEventListener("mouseleave", ( ) => {
        alert("Bye! You left p.");
    });
});

The on method attaches an event handler for a specified event. This on method is equivalent to the JavaScript method addEventHandler. Here is an example that attaches a click event handler using the on method:
```
$("p").on("click", function( ){
    $(this).hide( );
}); 
```

With the on method, more than one event handler can be attached using an object literal:

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    }, 
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});

Translate this event handler into vanilla JavaScript. Answer:

window.addEventListener("load", ( ) => {
    var para = document.querySelector("p");
    para.addEventListener("mouseenter", ( ) => {
        para.style.backgroundColor = "lightgray";
    });
    para.addEventListener("mouseleave", ( ) => {
        para.style.backgroundColor = "lightblue";
    });
    para.addEventListener("mouseenter", ( ) => {
        para.style.backgroundColor = "lightgray";
    });
    para.addEventListener("click", ( ) => {
        para.style.backgroundColor = "yellow";
    });
});