IT 238 -- June 2, 2025 Notes

IT 238 -- June 2, 2025

Practice Exercises

What does the String method charAt do? Give an example.
Answer: charAt returns the character specified by the zero-based index. For example:
```
var s = "rhinoceros";
document.writeln(s.charAt(5));
// Output: c
```
Look at these InputElement Examples:
Required
Web Page Source Code
Slider
Web Page Source Code
ColorPicker
Web Page Source Code
Place a select element on an HTML page that displays the three state names Alabama, Alaska, Arizona.

Insert all fifty state names taken from this array into a dropdown box:

["Alabama", "Alaska", "Arizona", "Arkansas", 
"California", "Colorado", "Connecticut", 
"Delaware", "Florida", "Georgia", "Hawaii", 
"Idaho", "Illinois", "Indiana", "Iowa", "Kansas", 
"Kentucky", "Louisiana", "Maine", "Maryland", 
"Massachusetts", "Michigan", "Minnesota", 
"Mississippi", "Missouri", "Montana", "Nebraska",
"Nevada", "New Hampshire", "New Jersey", 
"New Mexico", "New York", "North Carolina", 
"North Dakota", "Ohio", "Oklahoma", "Oregon",
"Pennsylvania", "Rhode Island", "South Carolina", 
"South Dakota", "Tennessee", "Texas", "Utah", 
"Vermont", "Virginia", "Washington", 
"West Virginia", "Wisconsin", "Wyoming"]

Answer:

<!DOCTYPE html>
<html>
    <head>
        <script>
        
        function init( ) {
            var states = ["Alabama", "Alaska", "Arizona", "Arkansas", 
                "California", "Colorado", "Connecticut", "Delaware", 
                "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", 
                "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", 
                "Maine", "Maryland", "Massachusetts", "Michigan", 
                "Minnesota", "Mississippi", "Missouri", "Montana", 
                "Nebraska","Nevada", "New Hampshire", "New Jersey", 
                "New Mexico", "New York", "North Carolina", 
                "North Dakota", "Ohio", "Oklahoma", "Oregon",
                "Pennsylvania", "Rhode Island", "South Carolina", 
                "South Dakota", "Tennessee", "Texas", "Utah", 
                "Vermont", "Virginia", "Washington", 
                "West Virginia", "Wisconsin", "Wyoming"];

            var selectTag = document.querySelector("select");
            for(let state of states) {
                var optionTag = document.createElement("option");
                optionTag.value = state;
                optionTag.innerHTML = state;
                selectTag.appendChild(optionTag);
            }
            selectTag.addEventListener("change", showState);
        }
        document.setEventListener("DOMContentLoaded", init);
        </script>
    </head>
    <body>
        <h1>Dropdown List of States</h1>
        <select></select><br><br>
        <p></p>
    </body>
</html>

Add a button to your page of Exercise 4 to display the selected state name in a paragraph when the button is clicked. Answer: add this code at the end of the init method of Exercise

var button1 = document.querySelector("button");
button1.onclick = showSelectedState;

Then add this event handler to the script file:

function showSelectedState( ) {
    var select1 = document.querySelector("select");
    var p1 = document.querySelector("p");
    p1.innerHTML = "Selected State: " + select1.value;
}

Remove the button from Exercise 5 and display the selected state name when the selection is changed. Change the two statements at the end of the init method to
```
selectTag.onchange = showSelectedState;
```

Implement an input form with fields name, gender, and age. Validate the fields, checking that name is non-empty, gender is one of the values F, M, or X, and that age is non-negative. Use an input element with type="number" for age. Use error messages (color red) on the form to indicate the fields that do not pass validation. For example:

Name:

Name cannot be empty.

Gender:

Age must be F, M, or X.

Age:

Age must be non-negative.

Answer:

===========================================
<!DOCTYPE html>

<!-- Validation2 Example
Source code file: index.html -->

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Kid Info Submission Form</h1>
        <form id="form1" name="form1"
              action="http:ectweb.cs.depaul.edu/sjost/receipt.php"
              method="POST">

            <label>Name:</label><br>
            <input type="text" id="fname" name="fname"><br>
            <span class="err" id="fname-err">
                Name cannot be empty.<br>
            </span><br>

            <label>Gender:</label><br>
            <input type="text" id="gender" name="gender"><br>
            <span class="err" id="gender-err">
                Gender must be F, M, or X.<br>
            </span><br>

            <label>Age:</label><br>
            <input type="number" id="age" name="age" value="0"><br>
            <span class="err" id="age-err">
                Age must be non-negative.<br> 
            </span><br><br> 

            <input type="submit" value="Submit Form">
        </form>
    </body>
</html>
-------------------------------------------
/* Validation2 Example
   Source code file: styles.css */
body { font: 100% Verdana, Arial, sans-serif; 
       color: navy; background-color: #E0E0FF; }
.err { color: red; display : none; }
-------------------------------------------
// Validation2 Example
// Source code file: script.js

// Event listener to validate form when
// it is submitted.
function validateForm(e) {

    // Validate fname.
    var fnameObj = document.querySelector("#fname");
    fnameErr = document.querySelector("#fname-err");
    var fnameOK;
    if (fnameObj.value != "") {
        fnameOK = true;
        fnameErr.style.display = "none";
    }
    else {
        fnameOK = false;
        fnameErr.style.display = "block";
    }

    // Validate gender.
    var genderObj = document.querySelector("#gender");
    var genderErr = document.querySelector("#gender-err");
    var genderOK;
    if (genderObj.value != "M" && genderObj.value != "F" &&
            genderObj.value != "X") {
        genderOK = false;
        genderErr.style.display = "block";
    }
    else {
        genderOK = true;
        genderErr.style.display = "none";
    }

    // Validate age.
    var ageObj = document.querySelector("#age");
    var ageErr = document.querySelector("#age-err");
    var ageOK;
    if (parseInt(ageObj.value) < 0) {
        ageOK = false;
        ageErr.style.display = "block";
    }
    else {
        ageOK = true;
        ageErr.style.display = "none";
    }

    // Cancel submission if at least one
    // field is not validated.
    if (fnameOK == false | 
        genderOK == false | 
        ageOK == false) {
            e.preventDefault( );
    }
}

// Attach validation event listener to form.
function init( ) {
    var formObj = document.querySelector("#form1");
    formObj.addEventListener("submit", validateForm);
}

document.addEventListener("DOMContentLoaded", init);
===========================================

Review Items on ExamInfo Page

Look at the Final Exam Review Items on the ExamInfo Page.

Two Dimensional Arrays

A two-dimensional array is an array of arrays, for example:

var arr = [[1, 4, 2, 7],
           [5, 2, 7, 0],
           [6, 3, 6, 6],
           [1, 8, 0, 8]];

The one-dimensional arrays [1, 4, 2, 7], [5, 2, 7, 0], [6, 3, 6, 6], and [1, 8, 0, 8] are the rows of the two-dimensional array.
To access an element of a two dimensional array, two indices are used. In the expression a[i][j], i specifies the row and j specifies the column, where both i and j are zero-based.
For example, the value of the expression arr[2][1] is 3.
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.
In the next section, Conway's Game of Life uses a two-dimensional array to represent items drawn on an HTML canvas.

Conway's Game of Life

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 (1 second) per generation, (2) with 20 ms (0.02 sec) 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