To Lecture Notes

IT 238 -- Apr 9, 2025

Review Exercises

1. List the JavaScript operators that you remember from IT 130.
   Arithmetic Operators: + - *  ** / %  ++  --
   Comparison Operators: ==  ===  !=  !===  <  <=  >  >=
   Logical Operators: &&  ||
   Assignment Operators: =  +=  -=  *=  /=  %=
   Increment and Decrement Operators: ++ --
   Special Operator: typeof
2. What are the JavaScript datatypes that listed at the end of class on Monday?
   Answer: number string boolean undefined
3. 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 = -163;
   document.writeln(b + " " + typeof b + "<br>");
   // Output: -163 number
   
   var c = "pomegranate";
   document.writeln(c + " " + typeof c + "<br>");
   // Output: pomegranate string
   
   var d = false;
   document.writeln(d + " " + typeof d + "<br>");
   // Output: false boolean
   
   var e = 1384 / 0;
   document.writeln(e + " " + typeof e + "<br>");
   // Output: Infinity number
   
   var f = "w" / 25;
   document.writeln(f + " " + typeof f + "<br>");
   // Output: NaN number
   
   var f2 = 0 / 0;
   document.writeln(f2 + " " + typeof f2 + "<br>");
   // Output: NaN number
   
   var g;
   document.writeln(g + " " + typeof g + "<br>");
   // Output: undefined undefined
   
   var h = 1.43e678;
   document.writeln(h + " " + typeof h + "<br>");
   // Output: Infinity number
   
   document.writeln("abc");
   document.writelm("def");
   document.writeln("ghi");
   // Output: abc
   // In Line 2, writeln is mispelled as writelm.
   // Open the Chrome Console to see the error message. 
   

4. What is the output?
   

   var i = 1, n = 2;
   while(i <= 11) {
       document.write(n + " ");
       i++;
       n = n * n;
   }
   document.writeln("<br><br>");
   document.writeln(Number.MAX_VALUE);
   // Output:
   2 4 16 256 65536 4294967296 18446744073709552000 3.402823669209385e+38 
        1.157920892373162e+77 1.3407807929942597e+154 Infinity
   
   1.7976931348623157e+308
   

More about Datatypes

• The official list of JavaScript primitive datatypes:
  

  bigint  boolean  number  string  symbol  undefined  null     
  

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

Functions

• A function is a set of statements designed to perform a task.
• A function must be called or invoked to execute its statements.
• Test this function that converts a length from inches to centimeters:
  

  // BasicFunction Example
  // Function definition:
  function inToCm(inches) {
      cm = inches * 2.54;
      return cm;
  }
  
  // Test the function:
  var inches = prompt("Enter length in inches", "0");
  var cm = inToCm(inches);
  document.writeln("Length in cm: " + cm);
  
  // If input is 2, the output is 5.08
  

Project 1a

• Look at the Project 1a Description.

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

Practice Problems

1. Write HTML, CSS, and JavaScript code in separate files that displays a button on the page that looks like this:
   
   Click Me
   
   When the button is clicked, the caption changes to "I've been clicked." Answer:
   

   ==========================================
   ------------------------------------------
   <!DOCTYPE html>
   <!-- ButtonTest Example
   Source code file: index.html-->
   <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>ButtonTest Example</title>
           <link rel="stylesheet" href="styles.css">
           <script src="script.js"></script>
       </head>
       <body>
           <h1>Button Test Example</h1>
           <button id="btn1">Click Me</button>
       </body>
   </html>
   ------------------------------------------
   /* ButtonTest Example 
      Source code file: styles.css */
   
   body { font-family: Verdana, sans-serif; }
   button { width: 150px; }
   ------------------------------------------
   / ButtonTest Example
   // Source code file: script.js
   
   // Event listener
   function changeCaption( ) {
       var button1 = document.getElementById("btn1");
       button1.innerHTML = "I\'ve been clicked.";
   }
   
   // init method adds event listener to button.
   function init( ) {
       var button1 = document.getElementById("btn1");
       button1.addEventListener("click", changeCaption);
   }
   
   // init method executes after page is loaded.
   window.addEventListener("load", init);
   ==========================================
   

2. 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
3. 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.
   

Project 1b

• Look at the Project 1b Description.