IT 238 -- Jun 4, 2025 Notes

IT 238 -- Jun 4, 2025

Review Exercises

Find the mistakes in the PirateMap Exercise, which is Problem 1 of the Takehome Final Exam Practice Problems. The corrected version is shown at the end of that exercise.

Design an HTML form with one field fname. If this field is missing when the form is submitted, post the error message "First name is a required field." under the input element for fname. Then cancel the form submission. Answer:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Exercise 4</title>
        <style>
        #notify { color: red; display: none; }
        </style>
        <script>
        function checkSubmit(e) {
            var fname = document.getElementById("fname").value;
            var notification = document.getElementById("notify");
            if (fname == "") {
                notification.style.display = "block"
                e.preventDefault( );
            }
            else {
                notification.style.display = "none";
            }
        }

        function init( ) {
            document.getElementById("form1").addEventListener("submit",
            checkSubmit);
        }
        window.addEventListener("load", init);
        </script>
    </head>
    <body>
        <h1>Exercise 4</h1>
        <form id="form1"
              action="http://ectweb.cs.depaul.edu/sjost/receipt.php"
              method="POST">
            <label for="fname">First Name:</label><br>
            <input type="text" id="fname" name="fname"><br>
            <span id="notify">First name is a required field<br>.</span><br>

            <input type="submit" value="Submit Form">
        </form>
    </body>
</html>

Look at The Date Class document. Write a page that displays the full date and time every second, by using the Date class.

What is wrong with this form?

<form action="https:www.server.com/receipt.php" method="get">
    <input type="text" placeholder="Enter your name:"><br>
    <input type="number" placeholder="Enter your age:">
</form>

Answer: both the name and age fields must have name attributes for these values to be sent to the server.

Write an HTML page that implements a square root calculator. Use an input element with type="number" and step="any". Answer:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Square Root Calculator</title>
        <script>
        window.onload = ( ) => {
            document.querySelector("#btn1").onclick = ( ) => {
                var x = document.querySelector("#in1").value;
                var output = document.querySelector("#out1");
                output.value = Math.sqrt(x);
            };
        };
        </script>
    </head>
    <body>
        <h1>Square Root Calculator</h1>
        <input type="number" step="any" id="in1"><br><br>
        <button id="btn1">Compute Square Root</button>
        <input type="text" id="out1">
    </body>
</html>

Animation

The function setInterval repeatedly calls a callback function every specified number of milliseconds
```
setInterval(callbackFunction, numMillisecs);
```
The Animate1 Example moves a square along a straight line within a container:
Animate1 Example
Web Page Source Code
The Animate2 Example moves a square along a circle within a container:
Animate2 Example
Web Page Source Code

More about Arrays

Review Questions

What are the Array methods that you know?

Predict the output?

var a = [81];
a[4] = 37;
document.writeln(a);
document.writeln(a[2]);
// Ans:
81,,,,37 undefined

Write a function that inputs an array and prints it. Ans:

function printArray(a) {
    document.writeln(a);
}
var a = [2, 3, 5, 7, 11];
printArray(a);
// Output:
2,3,5,7,11

How do you sort an array of numbers? Answer:

var a = [5, 3, 11, 2, 13, 7];
a.sort((s, t) => s - t); 
document.writeln(a); 
// Output
2,3,5,7,11,13

Two Dimensional Arrays

A two dimensional array is an array of arrays, where the inner arrays are all of the same length.

For example:

var a2d = [[5, 7, 2, 0], 
           [9, 3, 1, 7], 
           [2, 5, 3, 0], 
           [1, 8, 4, 2]];

Two dimensional arrays can be used to represent a grid of items in games, such as tic-tac-toe, checkers, chess, go, sudoku.
Two dimensional arrays are also used in scientific calculation to represent measurements of temperature, pressure, wind velocity, etc, in computer simulations.
The examples we will consider use a two-dimensional array can represent items drawn on an HTML canvas.

Practice Problems:

Given the 2d-array defined above what is the output?

document.writeln(a2d[1][3] + "<br>");
document.writeln(a2d[1] + "<br>");
document.writeln(a2d);
// Output
7 
9,3,1,7 
5,7,2,0,9,3,1,7,2,5,3,0,1,8,4,2

Write a function that initializes a two-dimensional n x n array to all to all zeros. The function parameter is n. Ans:

function make2dArray(size) {
    var arr = [ ];
    for(let i = 0; i < size; i++) {
        arr.push([0]);
        for(let j = 0; j < size; j++) {
            arr[i][j] = 0;
        }
    }
    return arr;
}

Write a function that initializes a two-d n x n array to random 0s and 1s with equal probability. Use

Math.floor(Math.random( ) * 2);

to generate random 0s and 1s with equal probability.

function make2dRandomArray(size) {
    var arr = [ ];
    for(let i = 0; i < size; i++) {
        arr.push([0]);
        for(let j = 0; j < size; j++) {
            arr[i][j] = Math.floor(Math.random( ) * 2);
        }
    }
    return arr;
}

Write a function that prints a two-d array, such as the arrays in the two previous problems. Ans:

function print2dArray(arr) {
    var len = arr.length;
    for(let i = 0; i < len; i++) {
        for(let j = 0; j < len; j++) {
            document.write(arr[i][j]);
        }
        document.writeln("<br>");
    }
}
// Output:
111111110010010
100001111111001
010000011010101
100101100010101
100110011010000
000100101000110
001100101011000
010010110110001
011110000011001
111010000111010
101000011111100
010101100010111
000110011111110
110000100011110
000010010000000

Example: Conway's Game of Life
See this Wikipedia article for a description of this game:
en.wikipedia.org/wiki/Conway%27s_Game_of_Life

The game of life is played on a large two-dimensional array populated with cells represented with zeros and ones, for example:

00000000000000000000
00000000000000000000
00000000000000000000
00000000000000000000
00000101100000000000
00011001110000000000
00011101100000000000
00000000000000000000
00000000000000000000
00000000000000000000
00000000000000000000
00000000000000000000

In this array, 1 = alive and 0 = dead or non-existant. Here is the array represented with spaces (dead) and Xs (alive) instead of zeros and ones:





     X XX
   XX  XXX
   XXX XX

See the Wikipedia article for the rules for how cells are born and die in each successive generation.
Also look up these configurations for live cells in the Wikipedia article: block, beehive, blinker, glider.

Here is an HTML/JavaScript application that applies these rules to track successive generations of organisms in the Game of Life:

<!DOCTYPE html>
<html>
    <body>
        <canvas id="myCanvas" width="500" height="500"
                style="border:3px solid #000000;">
            Your browser does not support the canvas element.
        </canvas>
        <p id="out"></p>
        <script>
        var p = document.getElementById("out");
        function make2dArray(size) {
            var arr = [ ];
            for(let i = 0; i < size; i++) {
                arr.push([0]);
                for(let j = 0; j < size; j++) {
                    arr[i][j] = 0;
                }
            }
            return arr;
        }
        function print2dArray(arr) {
            var len = arr.length;
            for(let i = 0; i < len; i++) {
                for(let j = 0; j < len; j++) {
                    document.write(arr[i][j]);
                }
                document.writeln("<br>");
            }
        }
        const size = 100;
        var a = make2dArray(size);

        // Seed 2d array with random 0, 1 values.
        for(let i = 1; i < size - 1; i++) {
            for(let j = 1; j < size - 1; j++) {
                a[i][j] = Math.random( ) >= 0.5 ? 1 : 0;
            }
        }
        //document.writeln("<br><br>");
        //print2dArray(a);

        // Display grid from array values
        function displayGrid( ) {
            const cellSize = 5;
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            for(var j = 1; j < size - 1; j++) {
                var y = cellSize * j;
                for(var i = 1; i < size - 1; i++) {
                    x = cellSize * i;
                    ctx.fillStyle = a[i][j] ? "#800000" : "#FFFFFF";
                    ctx.fillRect(x, y, cellSize, cellSize);
                }
            }
        }
        displayGrid( );
        var b = make2dArray(size);
        var n = 0;
        function computeNextGeneration( ) { 
            for(let i = 1; i < size - 1; i++) {
                for(let j = 1; j < size - 1; j++) {
                    let sum = a[i][j-1] + a[i][j+1] +
                        a[i-1][j-1] + a[i-1][j] + a[i-1][j+1] +
                        a[i+1][j-1] + a[i+1][j] + a[i+1][j+1];
                    if (sum < 2) {
                        b[i][j] = 0;
                    }
                    else if(sum == 2) {
                        b[i][j] = a[i][j];
                    }
                    else if(sum == 3) {
                        b[i][j] = 1;
                    }
                    else {
                        b[i][j] = 0;
                    }
                }
            }

            // Copy next generation into array a.
            for(let i = 1; i < size - 1; i++) {
                for(let j = 1; j < size - 1; j++) {
                    a[i][j] = b[i][j];
                }
            }
            displayGrid( );
            p.innerHTML = "n = " + n;
            n++;
        }
        setInterval(computeNextGeneration, 1000);
        </script>
    </body>
</html>

Run the game of life with (1) 1,000 milliseconds per generation, (2) with 20 ms per generation
When starting from a random configuration of 0s and 1s, the Game of Life usually takes 650 to 1,000 generations to stabilize

Slide Down/Up Example

Look at this W3Schools JQuery SlideDown Example:
www.w3schools.com/jquery/eff_slidedown.asp

Fix up the Animate1 Example to change the height of a paragraph to implement a JavaScript slidedown effect.
Answer: Here is the full lorem ipsum text.

------------------------------------------
<!DOCTYPE html>
<!-- SlideInOut Example
Source code file: styles.css
Lorem ipsum paragraph slides in or out depending on button clicked. -->
<html lang="en">
    <head>
        <title>SlideInOut Example</title>
        <script src="script.js"></script>
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <!-- Click buttons to slide paragraph in or out. -->
        <p>
            <button id="btnin">Slide In</button> &nbsp;
            <button id="btnout">Slide Out</button>
        </p>
        <p id ="p1">
            Lorem ipsum dolor sit amet, consectetur 
            ....
            vulputate tempor magna.
        </p>
    </body>
</html>
------------------------------------------
/* Source code file: styles.css */
body { font-family: 150%; 
    background-color: #E0E0FF; }

#p1 {
    background-color: #A0A0FF;
    overflow: hidden; }
------------------------------------------
// SlideInOut Example
// Source code file: styles.css
// Lorem ipsum paragraph slides in
// or out depending on button clicked.

var timer = null;
function slideOut( ) {
    var divTag = document.getElementById("p1"); 
    var percent = 100;
    var ht = 110;

    clearInterval(timer);
    timer = setInterval(decreaseHeight, 25);

    function decreaseHeight( ) {
        if (percent <= 0) {
            clearInterval(timer);
        } 
        else {
            percent -= 5;
            divTag.style.height = percent * 0.01 * ht + "px"; 
        }
    }
}

function slideIn( ) {
    var divTag = document.getElementById("p1"); 
    var percent = 0;
    var ht = 110;
    clearInterval(timer);
    timer = setInterval(increaseHeight, 25);

    function increaseHeight( ) {
        if (percent >= 100) {
            clearInterval(timer);
        } 
        else {
            percent += 5;
            divTag.style.height = 
            percent * 0.01 * ht + "px"; 
        }
    }
}

function init( ) {
    var button1 = document.getElementById("btnout");
    button1.addEventListener("click", slideOut);
    var button2 = document.getElementById("btnin");
    button2.addEventListener("click", slideIn);
}
window.addEventListener("load", init);
------------------------------------------

Redo this example using only a CSS transition but no JavaScript. Answer:

/* Here is the CSS file styles.css
   Use the same HTML file as previous 
   problem without the buttons.
   No JavaScript needed          */

body { font-size: 150%;
       font-family: Verdana;
       background-color: #E0E0FF; 
}

#p1 { overflow: hidden;
      animation-duration: 1.0s;
      animation-name: slidein;
}

@keyframes slidein {
    from {
        height: 0px;
    }

    to {
        height: 250px;
    }
}

Fade In/Out Example

Look at this W3Schools JQuery FadeOut Example:
www.w3schools.com/jquery/eff_fadein.asp
Fix up the Animate1 Example to change the background color of the body from light blue to black for fadeout and black to light blue for fadein. This implements a JavaScript fadeout/fadein effect.

Redo this example using only a CSS transition but no JavaScript. Answer:

<!DOCTYPE html>

<!-- FadeInOut Example
Source code file: styles.css
Lorem ipsum paragraph fades in or out depending on button clicked. -->

<html lang="en">
    <head>
        <title>FadeInOut Example</title>
        <script src="script.js"></script>
        <link rel="stylesheet" href="styles.css">
    </head>

    <body id="b">
        <!-- Click buttons to fade 
             paragraph in or out. -->
        <p>
            <button id="btnin">Fade In</button> &nbsp;
            <button id="btnout">Fade Out</button>
        </p>
        <p id ="p1">
            Lorem ipsum dolor sit amet, consectetur 
            ... 
            vulputate tempor magna.
        </p>
    </body>
</html>
--------------------------------------------------
/* Source code file: styles.css */
body { font-family: 150%; 
       background-color: #E0E0FF; }
--------------------------------------------------
// Source code file: styles.css

var timer = null;
function fadeOut( ) {
    var doc = document.getElementById("b"); 
    var percent = 100;
    var redComponent = 224;
    var greenComponent = 224;
    var blueComponent = 255;

    clearInterval(timer);
    timer = setInterval(decreaseBrightness, 25);

    function decreaseBrightness( ) {
        if (percent <= 0) {
            clearInterval(timer);
        } 
        else {
            percent -= 5;
            var rDec = Math.round(redComponent * percent * 0.01);
            var gDec = Math.round(greenComponent * percent * 0.01);
            var bDec = Math.round(blueComponent * percent * 0.01);
            var rHex = rDec.toString(16).padStart(2, "0");
            var gHex = gDec.toString(16).padStart(2, "0");
            var bHex = bDec.toString(16).padStart(2, "0");
            var hexColor = `#${rHex}${gHex}${bHex}`;
            doc.style.backgroundColor = hexColor;
        }
    }
}

function fadeIn( ) {
    var doc = document.getElementById("b"); 
    var percent = 0;
    var redComponent = 224;
    var greenComponent = 224;
    var blueComponent = 255;

    clearInterval(timer);
    timer = setInterval(increaseBrightness, 25);

    function increaseBrightness( ) {
        if (percent >= 100) {
            clearInterval(timer);
        } 
        else {
            percent += 5;
            var rDec = Math.round(redComponent * percent * 0.01);
            var gDec = Math.round(greenComponent * percent * 0.01);
            var bDec = Math.round(blueComponent * percent * 0.01);
            var rHex = rDec.toString(16).padStart(2, "0");
            var gHex = gDec.toString(16).padStart(2, "0");
            var bHex = bDec.toString(16).padStart(2, "0");
            var hexColor = `#${rHex}${gHex}${bHex}`;
            doc.style.backgroundColor = hexColor;
        }
    }
}

function init( ) {
    var button1 = document.getElementById("btnout");
    button1.addEventListener("click", fadeOut);
    var button2 = document.getElementById("btnin");
    button2.addEventListener("click", fadeIn);
}
window.addEventListener("load", init);

JavaScript Recommendations and Tips from W3Schools

JS Style Guide
www.w3schools.com/js/js_conventions.asp
JS Best Practices
www.w3schools.com/js/js_best_practices.asp
JS Mistakes
www.w3schools.com/js/js_mistakes.asp
JS Perfomance
www.w3schools.com/js/js_performance.asp