To Lecture Notes

IT 238 -- Feb 11, 2026

Review Exercises

  1. Show how to set up a CSS class that sets the background color to red and the color to white. Use this class in a paragraph element. Answer 
    /* In the CSS file 
   A class definition starts with a dot. */
.red { background-color: red; color: white; }

<!-- In the HTML file.
     When you use a class, don't use the dot. -->
<p>This is a <span class="red">test paragraph</span>.</p>
  2. Look at this Random Color Example:
    Web Page  Source Code
    Here is a justification of the formula to choose a random color component, for example r (red).
    Math.random( )  -->  [0, 1)
Math.random( )*256  -->  [0, 255)
Math.floor(Math.random( )*256) --> {0, 1,...,254,255},
which are the random outputs that we want for
a random color component.
Now convert the base-10 random values to hex and
concatenate them to obtain the hex color code.
  3. What is the difference between an object and a class?
    Answer: A class is a factory that can produce objects. Objects can also be created directly as object literals, but classes are easier to use. Creating 1,000 objects is easier with a class. See the Kid and Clock classes in the Feb 9 Notes.
  4. In the methods of a class, which reference variable do you use to access the properties of the same class?
    Answer: this
  5. What is the constructor for a class?
    Answer: The constructor creates a new object. The constructor is logically named constructor. Here is the constructor for the Kid class:
    constructor(name, gender, age) {
    this.name = name;
    this.gender = gender;
    this.age = age;
}
    Call the constructor to create a new Kid object like this:
    var k = new Kid("Alice", "F", 11);
  6. Look at the Lotto class in lotto.js. See how the Array splice method is used to randomly select the lotto balls.
    Answer: The splice method call for an array arr has this general form:
    arr.splice(start, len, item1, item2, ... , itemn);
    where start is the index where the section of the array to remove begins
    len is the number of items to remove
    item1, item2, ... , itemn are the items to insert in place of the items removed.
    In the Lotto class, the splice method call looks like this:
    this.balls.splice(randVal, 1);
    this.balls is the array of Lotto balls still available to draw. When the ball with index randVal is drawn it must be removed from this.balls. There is 1 ball to remove, and no balls to insert so there are no extra items in the splice call. Here is a sequence that shows how the balls and ballsDrawn arrays are used to draw five balls out of 10 possible balls. The variable i is the index of the for loop that draws the balls:
     i    ballsDrawn          balls
---+------------+-------------------
    [ ]          [1,2,3,4,5,6,7,8,9,10]
 1  [4]          [1,2,3,5,6,7,8,9,10]         
 2  [4,9]        [1,2,3,5,6,7,8,10]
 3  [4,9,5]      [1,2,3,6,7,8,10]
 4  [4,9,5,7]    [1,2,3,6,8,10]
 5  [4,9,5,7,1]  [2,3,6,8,10]
  7. For the DiceGame Example and Project 3, explain the difference between the HTML image element and the image file that is displayed.
    Answer: An image element is defined as
    <img id="1">
    before any image file is displayed in it. An image file is defined as
    var imgFile = "images/5.jpg";
    To display the image file in the image element, you can do this in JavaScript:
    var imgElement = document.getElementById("1");
imgElement.src = imgFile;
    The script for the Lotto class displays a random image file in the image element chosen randomly without replacement.
  8. Look at this Pair class:
    class Pair {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    
    toString( ) {
        return `(${this.x}, ${this.y})`;
    }
}
    A Pair object is an ordered pair of values that you used in high school math class.
    Use this class to create three Pair objects and print them. Answer:
    var p1 = new Pair(3, 5);
var p2 = new Pair(4, 7);
var p3 = new Pair(6, 11);
document.writeln(`${p1}, ${p2}, ${p3}`);
// Output: (3, 5), (4, 7), (6, 11)

HTML Controls

HTML Events

blur  change  click  dblclick  focus  keydown  keypress  keyup  load
mousedown  mouseenter  mouseleave  mousemove  mouseup  resize  scroll  
select  wheel

HTML Events (W3Schools)

Practice Problems

  1. Use a button to test the dblclick event. Write the results of your tests to a paragraph (<p> tag), using the innerHTML property of this tag. Answer:
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=", initial-scale=1.0">
        <title>Document</title>
        <script>
        function eventListener( ) {
            var para1 = document.getElementById("p1");
            para1.innerHTML = "I\'ve been double clicked.";
        }
        function init( ) {
            var button1 = document.getElementById("btn1");
            button1.addEventListener("dblclick", eventListener);
        }
        window.addEventListener("load", init);
        </script>
    </head>
<body>
    <h1>Test Button</h1>
    <button id="btn1">Double Click Me</button><br>
    <p id="p1"></p>
</body>
</html>
  2. Look at this Controls Example:
    Web Page    Source Code