To Lecture Notes

IT 238 -- Feb 16, 2026

Review Exercises

  1. What happens when you test these JavaScript statments?
    var a = [ 129, 1123, 49, 9, 116];
a.sort( );
document.writeln(a);
    The output is
    1123,129,116,49,9
    which is alphabetic order because the numbers are converted to strings. How can you get the Array sort method to sort the numbers in numeric order?
    Answer: you must supply a compare function that tells the sort method how to compare the numbers to be sorted, two at a time. Here is the compare function that returns a positive value if x >= y, that returns a negative value if x <= y, and returns zero if x == y:
    function compare(x, y) {
    if (x >= y) {
        return 1;
    }
    else if (x <= y) {
        return -1
    }
    else {
        return 0;
    }
}
    Then call the sort method like this:
    a.sort(compare);
    JavaScript programmers noticed that the compare method can be shortened to this:
    function compareShort(x, y) {
    return x - y;
}
    This works because when x >= y, x - y is positive, when x <= y, x - y is negative, and when x == y, x - y is zero. These are the exact requirements of the compare function. We can pass this compareShort function to the sort method like this:
    a.sort((x - y) => x - y);
  2. Name the JavaScript events that you know. Answer:
    click load dblclick focus blur keydown keyup 
mousedown mouseup mouseenter mouseleave
  3. Use two input elements to test the focus, blur, keydown, and keyup events. Write the results of your tests to a paragraph. Answer:
    <!DOCTYPE html>
<!-- TestEvents 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>Test Events</title>
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Test Events</h1>

        <label for="txt1">Textfield 1</label><br>
        <input type="text" id="txt1"><br><br>

        <label for="txt2">Textfield 2</label><br>
        <input type="text" id="txt2"><br><br>

        <p id="p1">Results of Tests:</p>
    </body>
</html>
---------------------------------------------------
// TestEvents Example
// File: script.js
// Write event listeners for
// focus, blur, keydown, and keyup events.

function recordFocus( ) {
    var para1 = document.getElementById("p1");
    para1.innerHTML += "<br>" + 
        "Focus event fired in Textfield 1";
}

function recordBlur( ) {
    var para1 = document.getElementById("p1");
    para1.innerHTML += "<br>" + 
        "Blur event fired in Textfield 1";
}

function recordKeyup( ) {
    var para1 = document.getElementById("p1");
    para1.innerHTML += "<br>" + 
        "Keyup event fired in Textfield 1";
}

function recordKeydown( ) {
    var para1 = document.getElementById("p1");
    para1.innerHTML += "<br>" + 
        "Keydown event fired in Textfield 1";
}

function init( ) {
    var textField1 = document.getElementById("txt1");
    textField1.addEventListener("focus", recordFocus);
    textField1.addEventListener("blur", recordBlur);
    textField1.addEventListener("keyup", recordKeyup);
    textField1.addEventListener("keydown", recordKeydown);
}

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

Event Object Properties and Methods

Practice Problem

Review of CSS Selectors

The DOM