IT 238 -- Apr 30, 2025 Notes

IT 238 -- Apr 30, 2025

Review Exercises

What is wrong with the beginning of this HTML file?
```


<!DOCTYPE html>
<html lang="en">
....
```
Answer: The first line of the HTML page must be
```
<!DOCTYPE html>
```
Source code comments or other code should go after that. Here is what the beginning of the HTML file should look like:
```
<!DOCTYPE html>



<html lang="en">
```

Write an HTML page with a button and a script file that changes the background color of the document to red when the button is clicked. Use anonymous functions in arrow notation.
Answer: Place a button in the body:

<input type="button" id="btn" value="Click Me">

You can also use a button tag:

<button id="btn">Click Me</button>

Then use this script.js file:

function changeColor( ) {
    var bodyObject = document.getElementById("b");
    bodyObject.style.backgroundColor = "red";
}
function init( ) {
    document.getElementById("btn").
        addEventListener("click", changeColor);
}
window.addEventListener("load", init);

The preceding lines can be written using anonymous methods for init and changeColor:

window.addEventListener("load", ( ) => {
    var bodyObject = document.getElementById("btn");
    bodyObject.addEventListener("click", ( ) => {
        document.getElementById("btn")
            .bodyObject.style.backgroundColor = "red";
    });
});

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. Answer:

<!DOCTYPE html>
<!-- Test Coin Flip Example:
     Source code file: test-coin-flip.html -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test Coin Flip</title>
        <style>
            img { width: 250px; }
        </style>
        <script>
        function flipCoin( ) {
            var image1 = document.getElementById("coin");
            var randomValue = Math.random( );
            if (randomValue >= 0.5) {
                image1.src = "heads.png";
            }
            else {
                image1.src = "tails.png";
            }
        }
        window.addEventListener("load", flipCoin);
        </script>
    </head>
    <body>
        <h1>Test Coin Flip</h1>
        <img id="coin" alt="Heads or Tails">
    </body>
</html>

What is the difference between the Array methods slice and splice? Look up these methods in W3Schools. Try the methods out on this array:
```
var a = [34, 72, 19, 5, 90, 7];
```

Primitive vs. Class Variables

List four JavaScript primitive datatypes.

Formally there is a distinction between the primitive type string variable s and the String object t defined by

var s = "abc";
var t = new String("abc");

To see this, run these JavaScript statements in a script:

var s = "abc";
var t = new String("abc");
document.writeln((typeof s) + " " + (typeof t));
// Output: string object

The toString method converts an arbitrary value or object to a String object; the valueOf method converts an object or value to a string value.
Admittedly this can be confusing. However, the JavaScript interpreter is able to switch seamlessly back and forth between a primitive type and an object type, so the primitive type value s is able to call methods from the class String.
The number and boolean primitive types also have the corresponding object types Number and Boolean.
Converting from a primitive type to the corresponding class type is called boxing.
Converting from a class object to the corresponding primitive type is called unboxing.
Boxing and unboxing also occurs between the primitive type number values and Number class objects and also between boolean values and Boolean class objects.
When possible, use the primitive types string and number instead of the class types String and Number because processing primitive types is faster and requires less computer memory.

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));
}

var vs. let

We are familiar with using the keyword var to declare and initialize variables:
```
var count = 0;
```
Another keyword that can be used to initialize variables is let:
let count = 0;
What is the difference between var and let?
Answer:
var has function scope -- variables defined with var exist in the function where they were defined.
let has block scope, where a block is delimited by curly braces { }: variables defined with let are only valid in the block where they were defined.
Software engineers recommend that the scope of a variable be as small as possible. Since the scope of variables define with let is smaller than the scope of variables defined with var, many JavaScript programmers use let whenever possible.

For example: what is the output of each of these for loops?

// for loop 1
function testScope( ) {
    for(var i = 1; i <= 5; i++) {
    }
    return i;
}
document.writeln(testScope( ));
// Output of for loop 1
6

// for loop 2
function testScope( ) {
    for(let i = 1; i <= 5; i++) {
    }
    return i;
}
document.writeln(testScope( ));
// Output of for loop 2
No output. The i in the return statement is not valid
because it is outside of the loop where it is defined.

HTML Controls

HTML tags that represent controls:
```
<input>  <button>  <textarea>  
<select>  <option>
```
HTML Tags Listed Alphabetically (W3Schools)
Attributes that can be used by all HTML elements:
```
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 (checked)
         max (number)
         maxlength (number)
         min (number>
         minlength (number)
         multiple (multiple)
         pattern (regexp)
         placeholder (text)
         readonly (readonly)
         required 
         size (number)
         step (number)

<button> 

<textarea>  cols (number)
            rows (number)
            readonly (readonly)
            maxlength (number)
            placeholder (text)
            wrap (hard soft)

<select>  multiple (multiple)
          size (number)

<option>  value (text)
          selected (selected)

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

HTML Events

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

HTML Events (W3Schools)