IT 238 -- Apr 26, 2026 Notes

IT 238 -- Apr 29, 2026

Review Exercises

The following code is supposed to sort the array a in numerical order. What is wrong? How can you fix it?
```
var arr = [45, 24, 113, 19, 1, 228];
arr.sort( );
document.writeln(arr);
```
Ans: The output is
```
1,113,19,228,24,45
```
The values to sort are being changed to strings, then sorted in alphabetical order. To change the sort order, we must pass a compare function to the sort method. The compare method has two parameters a and b. It returns a positive value if a > b, a negative value if a < b, and zero if a == b. We can define the compare method something like this:
```
function compare(a, b) {
    if (a > b) {
        return 1;
    }
    else if (a < b) {
        return -1;
    }
    else {
        return 0;
    }
}
```
and then sort the array like this:
```
arr.sort(compare);
```
An shorter, more elegant way to write the compare method is like this:
```
function compare(a, b) {
    return b - a;
}
```
If a > b, a - b is positive, if a < b, a - b is negative, and if a == b, a - b is zero. We can even pass in the function as an anonymous function in arrow notation:
```
arr.sort((a, b) => a - b);
```

Write JavaScript code to enlarge an image to 150% width and 150% height when the mouse enters (is moved over without clicking) the image. You can use this image: earth-from-space.jpg.
Answer: here are the HTML and JavaScript files:

==================================
<!DOCTYPE html>
<!-- Enlarge Image Example
     Source code file: image.html -->

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Inflate Image</title>
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Inflate Image</h1>

        <img id="img1" 
            src="images/earth-from-space.jpg" 
            alt="Earth from Space">
    </body>
</html>
-----------------------------------
// Enlarge Image Example
// Source code file: script.js

// Global variable containing the image object.
var image1;

function inflateImage( ) {
    image1.style.width = "300px";
}

function restoreImage( ) {
    image1.style.width = "200px";
}

function init( ) {
    image1 = document.getElementById("img1");
    image1.addEventListener("mouseenter", inflateImage);
    image1.addEventListener("mouseleave", restoreImage);
}

window.addEventListener("load", init);
===================================

Look at this Controls Example:
Web Page Source Code

In an <img> element in the body, when the window is loaded or refreshed, randomly display one of these images: heads.png or tails.png. Answer:

================================
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Coin Flip Example</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Inflate Image</h1>
        <img id="img1" alt="Result of Coin Flip">
    </body>
</html>
--------------------------------
// Coin Flip Example
// Source code file: script.js
function init( ) {
    var image1 = document.getElementById("img1"); 
    var randomNumber = Math.random( );
    var imageName = (randomNumber >= 0.5) ? "heads" : "tails";
    image1.src = "images/" + imageName + ".png";
}
window.addEventListener("load", init);
================================

Event Object Properties and Methods

If a click event handler has a parameter, when a click event occurs and the event handler fires, the JavaScript interpreter passes back an event object that contains information about the event.

ButtonClick Example:
Try clicking on one of these buttons:

HTML code: index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="script.js"></script>
    </head>

    <body>
        <input type="button" id="btn1" 
               value="Button 1">&nbsp;
        <input type="button" id="btn2"
               value="Button 2">&nbsp;
        <input type="button" id="btn3"
               value="Button 3">&nbsp;
        <input type="button" id="btn4"
               value="Button 4"><br><br>
        <p id="para" 
               style="border: 2px red solid;
                      height: 20px" />
    </body>
</html>

JavaScript Script:

// Click event handler to be attached to
// all four buttons.
// e is the event object. e.target is the
// control that is the target of the click.
function clickEventHandler(e) {
    var caption = e.target.value;
    var para = document.getElementById("para");
    para.innerHTML = caption + " clicked.";
}

function init( ) {
    // Create JavaScript objects for buttons
    var button1 = document.getElementById("btn1");
    var button2 = document.getElementById("btn2");
    var button3 = document.getElementById("btn3");
    var button4 = document.getElementById("btn4");

    // Attach clickEventHandler to each button.
    button1.addEventListener("click", clickEventHandler);
    button2.addEventListener("click", clickEventHandler);
    button3.addEventListener("click", clickEventHandler);
    button4.addEventListener("click", clickEventHandler);
}
window.addEventListener("load", init);

The event object e is passed to the click event handler when it is called by the JavaScript interpreter.
e.target is the control that was clicked.
e.target.value is the value of the control that was clicked, in this case, it is the caption on the button.

Write JavaScript code that changes an image when the mouse cursor enters it and changes it back when the mouse cursor leaves. Also add a red border to an image when it is clicked. Answer:

ImageRollovers Example:
Web Page Source Code

The original images are 1.png, 2.png, 3.png, and 4.png. The replacement images for when the mouse enters an image are 1b.png, 2b.png, 3b.png, and 4b.png.

Write an HTML page and script file to test these events:

focus  blur

Answer:

<!DOCTYPE html>
<head>
<script>
function focusEventHandler( ) {
    var para = document.getElementById("p1");
    para.innerHTML += "focus Event occurred.<br>\n";
}

function blurEventHandler( ) {
    var para = document.getElementById("p1");
    para.innerHTML += "blur Event occurred.<br>\n";
}

// Callback function
function init( ) {
    var textField = document.getElementById("tf1");
    textField.addEventListener("focus", focusEventHandler);
    textField.addEventListener("blur", blurEventHandler);
}
window.onload = init;
</script>
</head>
<html>
    <body>
        <h1>Test Events</h1>
        <input type="text" id="tf1"><br><br>
        <input type="text" id="tf2"><br>
        <p id="p1"></p>
    </body>
</html>