IT 238 -- May 4, 2026 Notes

IT 238 -- May 4, 2026

Review Exercises

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

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

Methods for finding HTML elements:

document.getElementById("123")
document.getElementsByTagName("input")  
document.getElementsByClassName("redtext")
document.querySelector("li .redtext");
document.querySelectorAll("li .redtext");

Properties of HTML elements:

innerHTML  nodeName   firstChild  lastChild
childNodes  previousSibling  nextSibling

Changing an attribute of an HTML element:

element.attributeName = "HTMLAttributeValue";
element.style.styleName = "cssStyleValue";

Adding or deleting HTML elements:

document.createElement(element);
document.removeChild(element);
document.appendChild(element);
document.replaceChild(oldElement, newElement);

Practice Problems:
For the Planetary Outpost Status Summaries page, show the output in this element at the end of the document:
```
<p id="output" />
```
- Obtain the root node <html> and output its node name (property nodeName). Remember to put your JavaScript statements in an init method that is called after the page is loaded. Answer:
```
var elements = document.getElementsByTagName("html");
var para = document.getElementById("output");
para.innerHTML = elements[0].nodeName;
```
- Print the number of elements with tagname li. Answer:
```
var elements = document.getElementsByTagName("li");
var para = document.getElementById("output");
para.innerHTML = elements.length;
```
- Start with a body tag that looks like this:
```
<body />
```
  1. Add a paragraph to the body with the inner HTML
```
This is a test.
```
Hiding and Displaying Elements
- Show the difference between the display and visibility properties.
  To hide an HTML element, change its display property from "inline" to "none".
  To make an HTML element invisible, change its visibility property from "visible" to "hidden".
  HideDisplay Example
  Web Page Source Code