IT 238 -- Feb 12, 2025 Notes

IT 238 -- Feb 12, 2025

Review Exercises

List the HTML events that you know. Write HTML and JavaScript files to test these events:

focus  blur  mouseup  keyup

Answer:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test Input Events</title>
        <script>
        function blurListener( ) {
            var para1 = document.getElementById("output");
            para1.innerHTML += "blur event occurred<br>";
        }

        function focusListener( ) {
            var para1 = document.getElementById("output");
            para1.innerHTML += "focus event occurred<br>";
        }

        function keyUpListener( ) {
            var para1 = document.getElementById("output");
            para1.innerHTML += "keyup event occurred<br>";
        }

        function mouseUpListener( ) {
            var para1 = document.getElementById("output");
            para1.innerHTML += "mouseup event occurred<br>";
        }

        function init( ) {
            var txtField = document.getElementById("input1");
            txtField.addEventListener("blur", blurListener)
            txtField.addEventListener("focus", focusListener)
            txtField.addEventListener("mouseup", mouseUpListener)
            txtField.addEventListener("keyup", keyUpListener)
        }
        window.addEventListener("load", init);
        </script>
    </head>
    <body>
        <h1>Test Input Events</h1>
        <p>Test events: blur focus mouseup keyup</p>

        <input type="text" id="input1"><br><br>
        <p id="output"></p>
    </body>
</html>

Look at these examples:
ButtonClick ImageRollovers Clock

More about the Event Object

In addition to the target property that tells which object caused the event, the event object can provide other information. For example, the mouseup event can tell you where the cursor is in the browser document when the mouse is clicked. Try this example:
MouseUp Example
Web Page Source Code

Scope

The scope of a variable is the region in JavaScript code where a variable exists.
A variable defined with var has function scope, which means that the variable only exists in the function where it is defined.

For example, this makeGreeting function will generate an error:

function makeGreeting(name) {
    var greeting = `Hello, ${name}, how are you?`;
    return greeting
}
document.writeln(greeting);

The variable greeting does not exist after the end of the function.

A block consists of lines of code within an if..else statement, while loop, for loop, or any code defined within curly braces like this:
```
{
    let x = 1.5;
    x++;
}
document.writeln(x);    
```
These statements generate an error because the variable x does not exist after the block in which it is defined ends.
A variable defined with let has block scope, which means that the variable only exists in the block where it is defined.
Best practice is the keep the scope of a variable as small as possible. If a variable is only needed in a block, use let to declare it.

In this example, the variable n has block scope within the for loop, but the variable sum has function scope:

// Compute the sum of numbers between 
// 1 and n inclusive:
function sum1ToN(n) {
    var sum = 0;
    for(let i = 1; i <= n; i++) {
        sum += i;
    }
    return sum;
}
document.writeln("Sum: " + sum1ToN(100));
// Output:
5050
// Note: a more efficient way to compute
// the sum of the numbers from 1 to 100
// is to use this formula:
// sum = (n * (n + 1)) / 2 
       = (100 * 101) / 2 
       = 10100 / 2 
       = 5050

This last formula is part of a story about the famous mathematician Karl Gauss. When he was in elementary school (some versions of this story say Kindergarten), the teacher asked the class asked the students to add up the numbers from 1 to 100. Although this would be a difficult problem for most elementary school students, Karl Gauss noticed that

sum = 1 + 2 + 3 + ... + 98 + 99 + 100
    = (1 + 100) + (2 + 99) + (3 + 98) + ... + (50 + 51)
    = 101 * 50
    = 5050

and announced the answer of 5,050 in less than one minute.

Practice Problems

This code produces an error. Fix the error.

let x = prompt("Enter a positive integer.");
if (x % 2 == 0) {
    let parity = "even";
}
else {
    let parity = "odd";
}
document.writeln(`Parity: ${parity}`);

What is the output?

var n = 3;
function f( ) {
    var n = 5;
    document.writeln(n + "<br>");
}
document.writeln(n)

Explain this output.

Practice Quiz

Take Practice Quiz 5a.

"use strict";

Some JavaScript programmers use the following statement at the beginning of each script:
```
"use strict";
```
This statement causes the JavaScript interpreter to issue error and warning messages that will
- eliminate silent errors by throwing error messages instead,
- improve security and performance,
- warn about deprecated code.
In particular, "use strict"; does not allow the declaration of unqualified global variables. Instead, declare them as properties of the window object.
Some programmers call code "sloppy code" that does not include "use strict;";
W3Schools reference that gives more details about strict mode:
https://www.w3schools.com/js/js_strict.asp