IT 238 -- May 211, 2026 Notes

IT 238 -- May 11, 2026

Review Exercises

What is the difference between the paragraph object methods innerHTML and textContent?
Answer:
```
paraObj.innerHTML = inputString;
```
means interpret and/or execute any HTML/CSS/JavaScript code included in inputString.
```
paraObj.textContent = inputString;
```
means literally display the text that is contained in inputString. Using innerHTML can be a security risk if user input contains malicious JavaScript code. Here is the example that we looked at in class:
Create an HTML page that contains a input element, a button, and an empty paragraph. Place this JavaScript script in the head of the document:
```
<script>
function displayString( ) {
    var inputObj = document.querySelector("input");
    var paragraphObj = document.querySelector("p");
    paragraphObj.innerHTML = inputObj.value;
}
function init( ) {
    var buttonObj = document.querySelector("button");
    buttonObj.addEventListener("click", displayString);
}
document.addEventListener("DOMContentLoaded",init);
</script>
```
Paste this string into the input element:
```
<img src="X" onerror="alert('You\'ve been hacked.');">
```
then click the button. An alert box appears with the message "You've been hacked."
Show that the method call
```
document.addEventListener("DOMContentLoaded", init);
```
can be used in the place of
```
window.addEventListener("load", init);
```
Answer: the first statement, which is executed when the HTML page has been entirely loaded; the first statement, which is executed when the DOM Tree has been loaded. The DOMContentLoaded event can occur 0.5 to 1.5 seconds before the load event, because the DOM tree finishes loading before images and videos load for an HTML page. See Exercise 1 to see how to use the first statement.
What do these JavaScript methods do?
```
document.querySelector
document.querySelectorAll
```
Answer:
```
var obj = document.querySelector(selector);
```
creates an object for the first element that matches the selector.
```
var obj = document.querySelectorAll(selector);
```
creates an array of all objects that match the selector.

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);
--------------------------------------------

Write a JavaScript script that will dynamically add the content to this page.

Halloween Greeting Example
Happy Halloween

Start with this empty body:

<body></body>

Here is a static HTML file that produces the same page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
        body { background-color:black;
               color: orange; }
        p { font: bold 200% Chiller; }
        </style>
    </head>
    <body>
        <p>Halloween Greeting Example<br>
           Happy Halloween!</p>
    </body>
</html>

Answer:

<!DOCTYPE html>
    <html lang="en">
        <head>
            <script>
            window.onload = ( ) => {
                var bodyTag = document.getElementsByTagName("body")[0];
                var pTag = document.createElement("p");
                pTag.innerHTML = "Halloween Greeting Example<br>" +
                    "Happy Halloween!";
                bodyTag.appendChild(pTag);
                bodyTag.style.backgroundColor = "black";
                bodyTag.style.color = "orange";
                pTag.style.font = "bold 200% Chiller";
                // You could set the styles separately like this:
                // pTag.style.fontWeight = "bold";
                // pTag.style.fontSize = "200%";
                // PTag.style.fontFamily = "Chiller";
            };
        </script>
    </head>

    <body></body>
</html>

If chk1 is a checkbox object, how do you tell if this checkbox is checked?
Answer: the checkbox is checked if chk1.checked is true, unchecked if it is false.

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

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.");
    });
});