To Lecture Notes

IT 238 -- Feb 10, 2025

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.
• 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);
  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 + "<br>");
  for(let i = 1; i <= 5; i++) {
      document.writeln(lottoObject.getBall(i));
  }
  

Review Exercises

1. What is the difference between an object and a class?
2. In the methods for a class, which reference variable do you use to access the properties of the same class?
3. What is the constructor for a class?
4. Look at the W3Schools Examples for the Array slice and splice methods:
   www.w3schools.com/jsref/jsref_slice_array.asp
   www.w3schools.com/jsref/jsref_splice.asp
5. Look at the Lotto class in lotto.js. See how the splice method is used to randomly select the lotto balls.
6. For the DiceGame Example and Project 3, explain the difference between the HTML image element and the image file that is displayed.

Practice Quiz

• Take Practice Quiz 4b

HTML Controls

• HTML tags that represent controls:
  

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

  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 and Examples

1. When would you prefer to use <button> instead of <input> for a button?
2. 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 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