To Lecture Notes

IT 238 -- Feb 11, 2026

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?
3. In the methods of a class, which reference variable do you use to access the properties of the same class?
4. What is the constructor for a class?
5. 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]
   

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

• These HTML tags that represent controls:
  

  <input>  <button>  <textarea>  
  <select> <option>  
  

  HTML Tags Listed Alphabetically (W3Schools)
• Attributes that can be used by all controls:
  

  id  class  hidden  style  disabled  dragable
  

  HTML Global Attributes (W3Schools)
• Attributes for specific controls:
  

  <input>  type  (button checkbox radio hidden number password 
                  color date email file image month range reset 
                  search submit tel text time url week)
           value (text)
           checked (checkbox)
           max (number)
           maxlength (number)
           minlength (number)
           multiple (text)
           pattern (text)
           placeholder (text)
           readonly (text)
           size (number)
           step (number)
  
  <button> 
  
  <textarea>  cols 
              rows
              readonly 
              maxlength 
              placeholder 
              wrap 
  
  <select>  multiple 
            size 
  
  <option>  value 
            selected 
  

  Tag Attibutes Listed Alphabetically (W3Schools)
  Look up attributes for individual tags.

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.
2. Use two input elements to test the focus and blur events. Write the results of your tests to a paragraph.
3. Write JavaScript code to enlarge an image to 150% width and 150% height when the mouse enters (is moved over without clicking) the image.
4. Look at this Controls Example:
   Web Page    Source Code

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.

Practice Problems

• 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
• Write an HTML file with a script that tests the focus and blur events of a textfield. Answer:
  

  --------------------------------
  <!DOCTYPE html>
  <html>
      <head>
          <title>Test Focus/Blur</head>
          <script src="script.js"></script>
      <body>
          <h1>Test Focus/Blur</h1>
          <input type="text" id="tf1"><br><br>
          <p id="p1"></p>
      </body>
  </html>
  --------------------------------
  function focusListener( ) {
      var para = document.getElementById("p1");
      para.innerHTML = "Focus event fired.";
  }
  function blurListener( ) {
      var para = document.getElementById("p1");
      para.innerHTML = "Blur event fired.";
  }
  function init( ) {
      var textField = document.getElementById("tf1");
      textField.addEventListener("focus", focusListener);
      textField.addEventListener("focus", blurListener);
  }
  window.addEventListener("load", init);
  --------------------------------
  

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:
  
  1. Type Selector:
     

     li { color: blue; }
     

  2. Class Selectors:
     

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

  3. ID Selector:
     

     #nav { color: blue; }
     

  4. Descendent Selectors:
     

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

  5. Universal Selector:
     

     * { margin: 0px; padding: 0px; }
     

  6. Direct Child Selector:
     

     div > em { color: blue; }
     

  7. Adjacent Sibling Selector:
     

     h2 + h3 { margin: -1em; }
     

  8. Attribute Selector:
     

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

  9. 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.
       

       Answer: The answer to this problem is in the answer for Part b.
    2. Build this table entirely by using JavaScript:
       

       Name	Height	Country
       Kilimanjaro	5895	Tanzania

  Answer:
  

  <!DOCTYPE html>
  <html>
  <head>
  <script>
  function init( ) {
      // Create paragraph and add to body.
      var b = document.getElementsByTagName("body")[0];
      var p = document.createElement("p");
      p.innerHTML = "This is a test.";
      b.appendChild(p);
  
      // Create table
      var t = document.createElement("table");
      var r1 = document.createElement("tr");
      var r2 = document.createElement("tr");
      t.appendChild(r1);
      t.appendChild(r2);
      b.appendChild(t);
  
      // Add data to row 1.
      var th1 = document.createElement("th");
      var th2 = document.createElement("th");
      var th3 = document.createElement("th");
      th1.innerHTML = "Name";
      th2.innerHTML = "Height";
      th3.innerHTML = "Country";
      r1.appendChild(th1);
      r1.appendChild(th2);
      r1.appendChild(th3);
  
      // Add data to row 2 using a data array.
      var data = ["Kilamanjaro", "5895", "Tanzania"];
      for(let i = 0; i <= 2; i++) {
          var td = document.createElement("td");
          r2.appendChild(td);
          td.innerHTML = data[i];
          td.style.borderStyle = "solid";
      }
      t.appendChild(r2);
      t.style.borderCollapse = "collapse";
  }
  window.addEventListener("load", init);
  </script>
  </head>
  
  <body></body>
  </html>
  

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

Truthiness

• We saw in the Comparisons for Equality section that 0, 0.0, "", and null are
  equal to the value false, according to the == operator.
• In this section, we investigate the truthiness of various values.
• The truthiness of a value is its value after being converted to boolean with the Boolean function:
  Truthiness Example
  Predict the output of this script.
  

  document.write(Boolean(5) + " ");
  document.write(Boolean(283764) + " ");
  document.write(Boolean(0) + " ");
  document.write(Boolean(-203) + "<br>");
  // Output: true true false true
  
  document.write(Boolean(3.14159265) + " ");
  document.write(Boolean(-284.378) + " ");
  document.write(Boolean(0.000000001) + " ");
  document.write(Boolean(0.0) + "<br>");
  // Output: true true true false
  
  document.write(Boolean("grapefruit") + " ");
  document.write(Boolean("$%&*@") + " ");
  document.write(Boolean("0") + " ");
  document.write(Boolean("false") + " ");
  document.write(Boolean(" ") + " ");
  document.write(Boolean("") + "<br>");
  // Output: true true true true false
  
  document.write(Boolean(null) + " ");
  document.write(Boolean(undefined) + " ");
  document.write(Boolean(Infinity) + " ");
  document.write(Boolean(NaN) + "<br>");
  // Output: false false true false
  

  Then run it to check if your prediction is correct.
• Formulate the rules for truthiness.
• The reason that truthiness is important is the behavior of if or while statements when their conditions are expressions that do not return true or false.
• What is the output?
  

  var n = 45;
  var v;
  if (n) {
      v = "nonzero";
  }
  else {
      v = "zero";
  }
  document.writeln("Value: " + v);