IT 238 -- Jun 1, 2026 Notes

IT 238 -- Jun 1, 2026

Practice Exercises

We know about HTML entities, which are special characters whose HTML name starts with an ampersand (&) and ends with a semicolon (;). Some examples are
```
&nbsp;  &lt;  &gt;  &quot;  &apos;  &amp;  
```
What is a JavaScript escape character? Give some examples of such escape sequences.
Answer: The Java escape character is the backslash character \, which changes the meaning of the character after it. The combination of \ with the next character after it is called an escape sequence. Here are some JavaScript escape sequences:
```
\n -- new line
\t -- tab
\' -- literal single quote character
\" -- literal double quote character
\\ -- literal backspace character
```
The \n character works in a textarea element, but it does not work in a paragraph element. This is because new lines are eliminated by the browser when text is displayed in a paragraph. To actually go to a new line in a paragraph, insert a <br> element instead. The newline character \n is used to go to a new line in an alert box or in a textarea:
```
function init( ) {
    alert("This is a test line.\nThis is the second line.")
    var taObj = document.querySelector("textarea");
    taObj.value = "This is a test line.\nThis is the second line."
}
```
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 = "elephant";
document.writeln(s.charAt(4));
// Output: h
```
For an input element, what are some values of the type attribute that we have seen? Answer:
text -- a normal textfield
number -- a textfield that can contain only numbers
radio -- radio button
checkbox -- check box
file -- file download element
range -- slider, also called a trackbar
color -- color picker
date -- date picker or calendar
password -- textfield that hides the characters that are entered

Show how to use a datepicker element (input element with type="date"). Answer:

<!DOCTYPE html>
<!-- DatePicker Example -- Source code file: index.html -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DatePicker Example</title>
        <script>
        function displayDate( ) {
            var datePicker = document.querySelector("input");
            var para = document.querySelector("p");
            para.textContent = datePicker.value;
        }
        function init( ) {
            var datePicker = document.querySelector("input");
            datePicker.addEventListener("change", displayDate);
        }
        document.addEventListener("DOMContentLoaded", init);
        </script>
    </head>
    <body>
        <h1>DatePicker Example</h1>
        <input type="date" name="date">
        <p></p>
    </body>
</html>

Look at these InputElement Examples:
Required
Web Page Source Code
Slider
Web Page Source Code
ColorPicker
Web Page Source Code
ImagePreview
Web Page Source Code

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.