IT 238 -- Jan 15, 2025 Notes

IT 212 -- Jan 15, 2025

Review Exercises

List the JavaScript operators that you remember from IT 130.
Arithmetic Operators: + - * ** / % ++ --
Comparison Operators: == === != !=== < <= > >=
Logical Operators: && ||
Assignment Operators: = += -= *= /= %=
Special Operator: typeof

For this exercise, the typeof operator returns a string that represents the datatype of the expression after it. What is displayed in the browser by each of these JavaScript code fragments?

var a = 45.3;
document.writeln(a + " " + typeof a + "<br>");
// Output: 45.3 number

var b = "pomegranate";
document.writeln(b + " " + typeof b + "<br>");
// Output: pomegranate string

var c = false;
document.writeln(c + " " + typeof c + "<br>");
// Output: false boolean 

var d = 1384 / 0;
document.writeln(d + " " + typeof d + "<br>");
// Output: Infinity number

var e = "w" / 25;
document.writeln(e + " " + typeof e + "<br>");
// Output: NaN number

var f;
document.writeln(f + " " + typeof f + "<br>");
// Output: undefined undefined

var x = 1.43e678;
document.writeln(x + " " + typeof x + "<br>");
// Output: Infinity number

var g = "123", h = 123;
document.writeln((g == h) + " " + (g === h) + "<br>");
// Output: true false

document.writeln("abc");
document.writelm("def");
document.writeln("ghi");
// Output: abc
// Note that document.writelm is not a method, so the
// JavaScript script stops here and displays an error
// message in the debugging console.

More about Datatypes

The official list of JavaScript primitive datatypes:

bigint  boolean  number  string  symbol  undefined  null

The primitive datatypes are built in datatypes.
Primitive datatypes are used as building blocks for composite datatypes such as arrays, maps, and other objects.
We use the number datatype, not bigint, to represent numeric data.
bigint is not even mentioned in our Eloquent JavaScript testbook. Look up bigint online if you are interested in how it works and how it differs from number.
The symbol datatype is an alternative representation for string data that is useful for technical reasons.
We will look at the difference between string and symbol later if we have time.

A function is not a primitive datatype, but typedef identifies its type as function:

function s(x) {
    return x ** 2;
}
document.writeln(typeof(s));
// Output:
function

The operator typeof also identifies the type of null as object. At first glance, this is confusing, but here is the rationale: usually null is used as an empty reference to an object.

Practice Quiz

Take PracticeQuiz2b on D2L.

Some Math Methods

The Math class contains methods that perform math calculations.
A function is standalone. It is not called from a class or an object.
For example, parseFloat is a function. parseFloat("2.34") returns the numeric value 2.34.
Math.floor is a method called from the Math class. It converts a floating point number into the next lower integer.
For example, here are the some Math.floor method calls and return values:

Method Call Return Value

Math.floor(2.38) 2.0

Math.floor(0.998) 0.0

Math.floor(-6.83) -7.0
The Math.ceil (ceiling) method converts a floating point number to the next higher integer:

Method Call Return Value

Math.ceil(2.38) 3.0

Math.ceil(0.001) 1.0

Math.floor(-6.83) -6.0
See this W3Schools reference page for all Math methods:
www.w3schools.com/jsref/jsref_obj_math.asp

Method Call	Return Value
Math.floor(2.38)	2.0
Math.floor(0.998)	0.0
Math.floor(-6.83)	-7.0

Method Call	Return Value
Math.ceil(2.38)	3.0
Math.ceil(0.001)	1.0
Math.floor(-6.83)	-6.0

Practice Problems

Work Practice Problem 2 from the Jan 13 Notes. Answer:

<!DOCTYPE html>
<!-- Method 1. Use onclick attribute in button.
     All source code is in one file. -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Button</title>
    <script>
    function changeValue( ) {
        var button1 = document.getElementById("btn1");
        button1.value = "I've been clicked.";
    }
    </script>
</head>
<body>
    <h1>Test Button</h1>

    <input id = "btn1" type="button" 
           value="Click Me" onclick="changeValue( );">
</body>
</html>
======================================================
<!DOCTYPE html>
<!-- Method 2. Use addEventListener method to attach
               event listener to button. Put HTML, CSS, 
               and JS code in separate files. 
               Source code file: index.html      -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test Button</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Test Button</h1>
        <input id = "btn1" type="button" value="Click Me">
    </body>
</html>
----------------------------------------------------------
/* Source code file: styles.css */
body { font-family: Verdana;
       background-color: #F0F0FF;
       color: #000040; }
----------------------------------------------------------
// Source code file: script.js
function changeValue( ) {
    var button1 = document.getElementById("btn1");
    button1.value = "I've been clicked.";
}

function init( ) {
    var button1 = document.getElementById("btn1");
    button1.addEventListener("click", changeValue);
}

window.addEventListener("load", init);

Work Practice Problem 3 from the Jan 13 Notes.
Answer: see Practice Problem 3 in Jan 13 Notes.
Design a web page that computes the monthly payment for a loan, given the principal, monthly payment, and term in years.
- Formula:
  
  m =
  
  p r / 1200.0
  
  1 - (1.0 + r / 1200.0)^-12n
  
  where m = monthly payment, p = principal, r = interest rate percentage, n = term of the loan in years.
- Use the exponention the operator ** to raise n to the p power. Answer:
- MonthlyPayment Example
  Web Page Source Code
  Test this webpage with these values:
  principal: 100000; interest rate: 6; term of loan in years: 15
  monthly payment: 843.86

Here is a script (similar to your submission for Project 1a) to test the computeMP function:

// Test the computeMP function, which computes the monthly
// payment for a loan.  The function parameters are
// p=principal, r=interest rate, n=term of loan in years.
function computeMP(p, r, n) {
    var mp = (p * r / 1200.0) /
        (1 - (1.0 + r / 1200.0) ** (-12.0 * n));
    return mp;
}
var principal = 100000;
var rate = 6;
var term = 15;
var mp = computeMP(principal, rate, term);
mp = Math.round(mp * 100) / 100;
document.writeln(mp);
// Output should be 843.86.

Projects 1a and 1b

Look at the Project 1a and Project 1b Descriptions.

Control Structures

Look at the Control Structures Document

Arrays

An array is a list of values accessed by index. What is the output?

var a = [2, 3, 5, 7, 11, 13];
document.writeln(a + "<br>");
document.writeln(a[4]);

Without arrays, multiple variables would be needed to hold a list of data values:
```
a0 = 2;
a1 = 3;
a2 = 5;
a3 = 7;
a4 = 11;
a5 = 13;
```

Also, the index of an array can be a variable, which facilitates processing array items in a loop. For example:

for(let i = 0; i < 5; i++) {
    document.write(a[i] + " ");
}
// Output:
2 3 5 7 11 13

for(let n of a)) {
    document.write(n + " ");
}
// Output:
2 3 5 7 11 13

An array can contain mixed types:
```
var a = [45.3, 'apple', false, null];
```

What is the output of these statements (surprise)?

var a = [2, 3, 5, 7];
document.writeln(typeof a);
// Output:
object
// Reason: an array is not a primitive datatype, it
// is a composite datatype called an object type.