IT 238 -- Apr 26, 2026 Notes

IT 238 -- Apr 29, 2026

Review Exercises

The following code is supposed to sort the array a in numerical order. What is wrong? How can you fix it?
```
var arr = [45, 24, 113, 19, 1, 228];
arr.sort( );
document.writeln(arr);
```
Write JavaScript code to enlarge an image to 150% width and 150% height when the mouse enters (is moved over without clicking) the image. You can use this image: earth-from-space.jpg
Look at this Controls Example:
Web Page Source Code
In an <img> element in the body, when the window is loaded or refreshed, randomly display one of these images: heads.png or tails.png.

Event Object Properties and Methods

If a click event handler has a parameter, when a click event occurs and the event handler fires, the JavaScript interpreter passes back an event object that contains information about the event.

ButtonClick Example:
Try clicking on one of these buttons:

HTML code: index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="script.js"></script>
    </head>

    <body>
        <input type="button" id="btn1" 
               value="Button 1">&nbsp;
        <input type="button" id="btn2"
               value="Button 2">&nbsp;
        <input type="button" id="btn3"
               value="Button 3">&nbsp;
        <input type="button" id="btn4"
               value="Button 4"><br><br>
        <p id="para" 
               style="border: 2px red solid;
                      height: 20px" />
    </body>
</html>

JavaScript Script:

// Click event handler to be attached to
// all four buttons.
// e is the event object. e.target is the
// control that is the target of the click.
function clickEventHandler(e) {
    var caption = e.target.value;
    var para = document.getElementById("para");
    para.innerHTML = caption + " clicked.";
}

function init( ) {
    // Create JavaScript objects for buttons
    var button1 = document.getElementById("btn1");
    var button2 = document.getElementById("btn2");
    var button3 = document.getElementById("btn3");
    var button4 = document.getElementById("btn4");

    // Attach clickEventHandler to each button.
    button1.addEventListener("click", clickEventHandler);
    button2.addEventListener("click", clickEventHandler);
    button3.addEventListener("click", clickEventHandler);
    button4.addEventListener("click", clickEventHandler);
}
window.addEventListener("load", init);

The event object e is passed to the click event handler when it is called by the JavaScript interpreter.
e.target is the control that was clicked.
e.target.value is the value of the control that was clicked, in this case, it is the caption on the button.

Write JavaScript code that changes an image when the mouse cursor enters it and changes it back when the mouse cursor leaves. Also add a red border to an image when it is clicked. Answer:

ImageRollovers Example:
Web Page Source Code

The original images are 1.png, 2.png, 3.png, and 4.png. The replacement images for when the mouse enters an image are 1b.png, 2b.png, 3b.png, and 4b.png.
Write an HTML page and script file to test these events:
```
focus  blur  keydown  keyup
```

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.
```
  2. Build this table entirely by using JavaScript:
    
    Name Height Country
    
    Everest 8849 China/Nepal
    
    Denali 6190 United States
    
    Kilimanjaro 5895 Tanzania

Name	Height	Country
Everest	8849	China/Nepal
Denali	6190	United States
Kilimanjaro	5895	Tanzania

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