IT 238 -- Feb 4, 2026 Notes

IT 238 -- Feb 4, 2026

Review Exercises

What is the hex color code for olive (dark yellow)?
Answer: #808000 (max for red, max for green, zero for blue)
What are the JavaScript primitive datatypes that we have been using?
Answer: string number boolean undefined

Give some examples of composite datatypes. Answer:
(a) array, (b) function, (c) any user defined object literal. The typeof operator returns object for a and c. It returns function as the datatype of for any function or method. Here is JS code to test this:

// Create an array a
var a = [4, 7, 3, 5];
// Define the function s
function s(n) {
    return n ** 2;
}
// Define object literal:
var kid = { name: "Alice", age: 11 };

// Check that typeof gives object for arrays and
// object literals.  It gives function as the datatype
// of a function 
document.writeln(typeof a);
document.writeln(typeof b);
document.writeln(typeof kid);
// Output: object function object

Rewrite this traditional for loop as a modern for loop:

var output = "";
for(var i = 0; i < kidsArray.length; i++) {
    if (kidsArray[i].age < 12) {
        output += kidsArray[i].name + "\n";
    }
}

Answer:

var output = "";
for(var kid of kidsArray) {
    if (kid.age < 12) {
        output += kid.name + "\n";
    }
}

We saw earlier that the following lines round the value of n to two digits after the decimal point:

var n = 34.83728;
var nRounded = Math.round(n * 100) / 100;

Verify that the following line also rounds n to two digits after the decimal point:

var n = 354.48592938;
var nRounded = n.toFixed(2);
// Answer: 354.49

We know how to attach a click event listener f to a button object btn1:
```
btn1.addEventListener("click", f);
```
Show how to use the onclick property to add the event listener f to the button object btn1. Answer:
```
btn1.onclick = f;
```
Do the same thing for a load event listener.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Button</title>
        <script>
        function f( ) {
            var output = document.getElementById("para1");
            output.innerHTML = "Button test succeeded.";
        }
        function init( ) {
            var btn1 = document.getElementById("button1");
            // btn1.addEventListener("click", f);
            // or
            btn1.onclick = f;
        }
        // window.addEventListener("load", init);
        // or
        window.onload = init;
        </script>
    </head>
    <body>
        <h1>Test Button</h1>
        <button id="button1">Click Me to Test Button</button>
        <p id="para1" />
    </body>
</html>

Review for Midterm

Look at the Midterm Review Guide.
Look at the Short Essay Portion of the midterm exam posted on D2L, which opens today.

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.

Functions as First Class Objects

In JavaScript, functions are first class objects.
This means that functions can be assigned to variables, passed as arguments to other functions, and even printed.

Try out this script:

// FirstClass Example

function s(n) {
    return n * n;
}

function c(n) {
    return n * n * n;
}

function evaluate(f) {
    return f(3);
}

document.writeln(s(5) + " ");
document.writeln(c(2) + " ");
g = s;
document.writeln(g(2) + "<br>");
document.writeln(evaluate(s) + 
    " " + evaluate(c) + "<br>");
document.writeln(s + "<br>");
document.writeln(c + "<br>");

// Answer: the output is
25 8
4 
9 27
function s(n) { return n * n; }
function c(n) { return n * n * n; }

Anonymous Functions

A function created without a name is an anonymous function, for example:
```
function(n) {
    return n * n;
}
```
An anonymous function is useless unless is assigned to a variable or passed in as an argument to another method. Try this script:
```
// Anonymous Example
var c = function(n) {
    return n * n * n;
}
document.writeln(c(5));
```

Arrow Notation for Functions

Modern JavaScript provides an alternative arrow notation for methods.
Arrow notation comes from math. Traditionally, a math function is defined like this: f(x) = x². In arrow notation, this function is defined as f : x → x².
In JavaScript, the method
```
function square(x) {
    return x * x;
}
```
can be defined as an anonymous method in arrow notation like this:
```
var square = (x) => x * x;
```
If the method has exactly one parameter, the parentheses can be omitted:
```
var square = x => x * x;
```
JavaScript uses the fat arrow ( => ) to define functions in arrow notation. Some other languages, including Java, use the thin arrow ( -> ) instead.

Practice Problems: Write these four functions in arrow notation and test them:

function square(n) {
    return n ** 2;
}
// Answer:
// Parentheses are not needed for argument list
// when there is only one argument.
var square = n => n ** 2;
var value = 5;
document.writeln(square(value));
// Output: 25

function add(n, m) {
    return n + m
}
// Answer:
var add = (n, m) => n + m;
document.writeln(add(5, 7));
// Output: 12

function sayHello( ) {
    alert("Hello!");
}
// Answer
var sayHello = ( ) => alert("Hello!");
sayHello( );
// Output: Hello!

 function sayHello(name) {
    alert(`Hello, ${name}!`;
}
// Answer:
var sayHello = name => alert(`Hello, ${name}!`);
var name = prompt("Enter a name.");
sayHello(name);
// Input: Billy
// Output: Hello, Billy.

function showStars( ) {
    return "**********";
}
// Answer:
var showStars = ( ) => "**********";
document.writeln(showStars( ));
// Output: **********

function triangleArea(base, height) {
    return base * height / 2.0;
}
// Answer:
var triangleArea = base, height) => base * height / 2.0;
document.writeln(triangleArea(3, 4));
// Output: 6

function greeter(name) {
    document.writeln(`Hello, ${name}, how are you?`);
}
// Answer:
var greeter = name => {
    document.writeln(`Hello, ${name}, how are you?`);
}
greeter("Alice");
// Output: Hello, Alice, how are you?

function init( ) {
    alert("Hello!");
}

// Answer: the body of a function with no return
// value must be enclosed in curly braces.
var init = ( ) => {
    alert("Hello!");
}
// Test it like this:
window.addEventListener("click", init)
// or, shorter
window.addEventListener("click", ( ) => alert("Hello!"));

Math Class Methods

Look up five of these Math class methods on the W3Schools site and test them:
```
abs  cbrt  ceil  cos  floor  max  
min  random  round  sin  sqrt 
```

Use Strict

Some JavaScript programmers use the following statement at the beginning of each function:
```
'use strict';
```
This statement causes the JavaScript interpreter to issue error and warning messages that will
- eliminate silent errors by throwing error messages instead,
- improve security and performance,
- warn about deprecated code.
In particular, 'use strict'; does not allow the declaration of unqualified global variables. Instead, declare them as properties of the window object.
Some programmers call code "sloppy code" that does not include 'use strict';
W3Schools reference that gives more details about strict mode:
https://www.w3schools.com/js/js_strict.asp

Primitive vs. Class Variables

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");
```
The toString and valueOf methods convert an object or primitive value to a string type.
Generally toString converts to a long representation and valueOf converts to a short representation, but for many types of objects, toString and valueOf return the same representation.
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.
Converting from a primitive type to the corresponding class object 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.
When possible, the primitive types string and number are preferred over the class types String and Number because processing the primitive types is faster and requires less computer memory.

Project 3

Look at the Project 3 Description.
Look at the DiceGame Example:
Test DiceGame Web Page Source Code