To Lecture Notes

IT 238 -- May 5, 2025

Review Exercises

  1. 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.
  2. 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. See the Kid and Clock classes in the Apr 30 Notes.
  3. In the methods of a class, which reference variable do you use to access the properties of the same class?
    Answer: this.
  4. 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);
  5. Look at the Lotto class in lotto.js. See how the 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]
  6. 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.
  7. 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 and Examples

  1. When would you prefer to use <button> instead of <input> for a button?
    Answer: Use a button tag if you want to use other HTML tags to modify the button text, for example, the <strong> and <em> tags. You can't insert HTML markup in the value of an <input> tag.
  2. Look at this Controls Example:
    Web Page    Source Code

Event Object Properties and Methods

Practice Problems