IT 238 -- May 4, 2026 Notes

IT 238 -- May 4, 2026

Review Exercises

Write a script to test the keyup and keydown events. Use the DOM Keyboard Event property key, which shows which key was pressed. Answer:

<!DOCTYPE html>

<-- KeyDown Example
    Source code file: index.html -->

<html lang="en"l>
<head>
    <meta charset="UTF-8">
    <title>Test KeyPress</title>
    <script>
    function keyDownListener(e) {
        var para1 = document.getElementById("p1");
        para1.innerHTML += "keydown Event. Key " +  e.key + " was pressed<br>";
    }
    function init( ) {
        var textField1 = document.getElementById("tf1");
        textField1.addEventListener("keypress", keyDownListener);
    }
    window.addEventListener("load", init);
    </script>
</head>
<body>
    <h1>Test KeyPress</h1>

    <input type="text" id="tf1"><br><br>

    <label for="p1">Event Log:</label><br>
    <p id="p1"></p>

</body>
</html>

Look up some of the other Keyboard events on the W3Schools website:
https://www.w3schools.com/js/js_events_keyboard.asp

Classes

Creating objects as object literals can be cumbersome because each object must be created individually.
To facilitate the creation of objects, in 2015 JavaScript introduced a more streamlined class notation.
This new JavaScript class notation is similar to the way other languages such as C++, C#, Java, and Python define classes
A class is a template or blueprint for creating objects.

Here is a class for creating Kid objects:
KidClass Example

class Kid {
    
    // Constructor for initializing 
    // Kid properties
    constructor(name, gender, age) {
        this.name = name;
        this.gender = gender;
        this.age = age;
    }

    // Define instance methods
    haveBirthday( ) {
        this.age++;
    }
  
    toString( ) {
        return `${this.name};${this.gender};${this.age}`;
    }
}

// Test Kid class by creating a Kid object.
k = new Kid("Alice", "F", 11);
document.writeln(`${k.name} ${k.gender} ${k.age}<br>`);
document.writeln(`${k.toString( )} ${k}<br>`);
k.haveBirthday( );
document.writeln(k.age);

Practice Problem: Create and test a clock class. Answer:

 class Clock {
    constructor(hr, min, sec) {
        this.hr = hr;
        this.min = min;
        this.sec = sec;
    }

    tick( ) {
        this.sec++;
        if(this.sec == 60) {
            this.sec = 0;
            this.min++;
        }
        if(this.min == 60) {
            this.min = 0;
            this.hr++;
        }
        if(this.hr == 24) {
            this.hr = 0;
        }
    }

    toString( ) {
        var h = this.hr.toString( ).padStart(2, "0");
        var m = this.min.toString( ).padStart(2, "0");
        var s = this.sec.toString( ).padStart(2, "0");
        return `${h}:${m}:${s}`;
    }
}

c = new Clock(20, 44, 9);
document.writeln(c + "<br>");
for(let i = 1; i <= 20000; i++) {
    c.tick( );
}
document.writeln(c);

Project 3

Look at the Project 3 Description.
Look at the DiceGame Example:
Test DiceGame Web Page Source Code
This example should help you understand Project 3.

Write a script that tests the Lotto class for Project 3. Answer:

var lottoObject = new Lotto(30, 5);
lottoObject.selectBalls( );
document.writeln(lottoObject);
for(let i = 1; i <= 5; i++) {
    document.writeln(lottoObject.getBall(i));
}

Practice Problem

Write a Clock class that has properties hr, min, sec, and the methods toString and tick, which adds one to sec. Use your Clock class to display the time on an HTML page. Use setInterval to call the Clock tick method once every second (1,000 milliseconds). Answer: Look at this
Clock Example
Web Page Source Code
Modify this Clock Example to initialize the time using a new Date object. Look up the Date class in the W3Schools Tutorial.

Review of CSS Selectors

We are familiar with type selectors that refer to normal HTML elements, such as
```
h1  p  td  li  span
```
You have also probably seen the universal selector *, which refers to all HTML elements.

To illustrate some other types of selectors, consider the body of a sample HTML page:

<body>
    <div id="content">
        <h1>Sample HTML Page</h1>
        <p class="info">Lorum ipsum dolor sit amet.</p>
        <p>Lorum ipsum dolor <a href="#">sit</a> amet.</p>
    </div>
    <div id="nav">
        <ul>
            <li><a href="#" class="intro">Item 1<a></li>
            <li><a href="#">Item 2</li>
            <li><a href="#">Item 3</li>            
        </ul>
    </div>
    <div id="footer">
        Lorum ipsum dolor <a href="#">sit</a> amet.
    </div>
</body>

Here are some CSS selectors:

Type Selector:
```
li { color: blue; }
```

Class Selectors:

.intro { font-weight: bold; }
p.intro { color: red; }
a.intro { color: green; }

ID Selector:
```
#nav { color: blue; }
```

Descendent Selectors:

li a { color: green; }
#nav a { color: red; }
#nav ul li a { color: green; }

Universal Selector:
```
* { margin: 0px; padding: 0px; }
```
Direct Child Selector:
```
div > em { color: blue; }
```
Adjacent Sibling Selector:
```
h2 + h3 { margin: -1em; }
```

Attribute Selector:

img[src="small.gif"] { border: 1px solid #000000; }

Pseudo-element Selector:

p:first-line { font-weight: bold; }
p:first-letter { font-size: 200%; font-weight: bold; }

The DOM

DOM means Document Object Model.
The DOM represents the elements on an HTML page as a tree.

As an example (ref. Freeman and Robson, Headfirst JavaScript Programming, O'Reilley, 2014), look at the body of this HTML page:
DOM Example:

<body>
    <h1>Planetary Outpost Status Summaries</h1>
    <ol>
        <li>Green Planet<br>
            All is well.</li>
        <li class="redtext">Red Planet<br>
            All systems A-OK.</p>
    </ol>
    <h2>Number of Planets</h2>
    <p id="para">3</p>
</body>

DOM for page representes as a traditional tree:

      +--------- body ---------+
      |         /    \         |
      |        /      \        |
     h1       ol      h2       p
             /  \
            li  li

Traditionally trees are drawn upside down, with the root on top and the leaves at the bottom.

Here is an alternative representation with indentation with the child relationship shown by indentation. In addition the inner HTML is also shown as a child of its containing node.

body
   h1
       Planetary Outpost Status Summaries
   ol
      li
          Green Planet<br>All is well.
      li
          Red Planet<br>All systems A-OK.
   h2
       Number of Planets
   p
       3