IT 238 -- Feb 23, 2026 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. Answer:

<!DOCTYPE html>
<!-- AndromedaImage Example
     Source code file: index.html -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
            content="width=device-width, initial-scale=1.0">
        <title>Andromeda Image</title>
        <style>
        img { width: 300px; }
        </style>
        <script>
        function init( ) {
            var image1 = document.querySelector("img");
            image1.style.padding = "20px";
            image1.style.border = "10px solid red";
            image1.style.margin = "30px";
        }
        document.addEventListener("DOMContentLoaded", init);
        </script>
    </head>
    <body>
        <h1>Andromeda Image</h1>
        <img src="images/andromeda.jpg">
    </body>
</html>

Start with this HTML body:

<body>
    <h2>Ordered List Example</h1>
</body>

Use JavaScript to create and append this ordered list to the body:

New York City
Los Angeles
Chicago

Answer:

--------------------------------------------
<!DOCTYPE html>
<!-- OrderedList Example
     Source code file: index.html -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
            content="width=device-width, initial-scale=1.0">
        <title>Ordered List Example</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h2>Ordered List Example</h1>
    </body>
</html>
--------------------------------------------
/* OrderedList Example
   Source code file: styles.css */
body { font: 100% Verdana, sans-serif; }
--------------------------------------------
// OrderedList Example
// Source code file: script.css
function init( ) {
    // cities array is source of content for ordered list.
    var cities = ["New York City", "Los Angeles", "Chicago"];

    // Create and add ordered list to body.
    var olObj = document.createElement("ol");
    var bodyObj = document.querySelector("body");
    bodyObj.appendChild(olObj);

    // Add cities to ordered list as list items.
    for(var c of cities) {
        var liObj = document.createElement("li");
        liObj.innerHTML = c;
        olObj.appendChild(liObj);
    }
}
// DOMContentLoaded files when DOM tree has been
// created and made available to the script.
document.addEventListener("DOMContentLoaded", init);
--------------------------------------------

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.

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-4.0.0.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-4.0.0.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/4.0.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-4.0.0.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!";
    });
});

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