To Lecture Notes

IT 212 -- Apr 14, 2025

Review Exercises

1. What is the ** operator?
2. How do the Math.floor, Math.ceil, and Math.round methods work?
3. How can you use Math.round to round a floating point number to three digits after the decimal point.

Control Structures

• Look at the Control Structures Document.

Practice Problems

1. What were the control structures mentioned in Edsgar Dykstra's seminal letter Go To Considered Harmful sent to the editor of the journal of the Association of Computing Machinery (ACM) in 1968? Look at how traditional for loops work.
2.  Explain how a while loop is related to a traditional for loop.
3. Write a for loop that prints the integers 1 to 1,000 on a browser page. Put 20 numbers on each line. Hint: whenever n % 20 == 0 for a number, write "<br>".
4. Using the document.write method, write a double for loop that writes the following to the browser document:
   

   *
   **
   ***
   ****
   *****
   ******
   *******
   

   Use a prompt box to enter the number of rows.
5. This problem was given as part of a job interview programming test, according to the Eloquent JavaScript textbook. Write a loop that prints the numbers from 1 to 100. If a number is divisible by 3, print Fizz after it. If the number is divisible by 5, print Buzz after it. If the number is divisible by both 3 and 5, print Fizz Buzz after it. Here is the beginning of the output:
   

   1
   2
   3 Fizz
   4
   5 Buzz
   6 Fizz
   7
   8
   9 Fizz
   10 Buzz
   11
   12 Fizz
   13
   15 Fizz Buzz
   16
   17
   ...
   

6. Write a function convert that inputs a length in meters then outputs the length feet and inches. Test your function like this:
   

   document.writeln(convert(1.0));
   // Output: 3'3"
   

Practice Quiz

• Take the Practice Quiz 3a.

Expression Interpolation

• Expression interpolation means inserting variables or expressions into a string.
• Strings that use expression interpolation are called f-strings in Python.
• A JavaScript string that uses expression interpolation is delimited with backquotes.
• Try out this example script:
  

  // ExpressionInterpolation Example
  var name = "Larry";
  var amt = "347.81";
  document.writeln(`${name} owes me $${amt}.`);
  // Output:
  Larry owes me $347.81.
  

• In Review Exercise 7, change the function return value to use expression interpolation.
  Answer: Change

  var output = ftInt + "\' " + inInt + "\"";
  

  to

  var output = `${ftInt}\' ${inInt}\"`;
  

Comparisons for Equality

• You are familiar with the comparison operator ==, used in JavaScript, Python, Java, and C#.
• This operator acts somewhat differently in each language.
• The JavaScript == operator is liberal in its comparisons.
• x == y returns true if x equals y after conversion to the same datatype.
• For example,
  

  5 == 5, "5" == "5", 5 == "5", 0 == false, 1 == true
  

  all return true.
• The === operator is strict in its comparisons.
• x === y returns true if the values x and y are equal and also are of the same datatype.
• For example 5 === "5", 0 === false, and 1 === true all return false because, in each case, the operands are not of the same datatype.
• Predict the output of these statements:

  document.writeln(`${5 == 5} ${5 == 3} ${"5" == "5"}<br>`);
  // The string "5" is converted to a number before
  // performing the comparison:
  document.writeln(`${5 == "5"}`);
  // Output:
  true false true
  true
  

• When performing a comparison, to convert a number to boolean (true or false), the rule is that zero converts to false, one converts to true; any other value does not convert to boolean.
  Predict the output of this statement:
  

  document.writeln(`${0 == false} ${5 == true} ${0.00000001 == false}`);
  // Output:
  true false false
  

• When performing a comparison, to convert a string to boolean, the rule is that the strings "", "0", and "0.0" convert to false, "1" and "1.0" convert to true. Any other string does not convert to boolean.
  Predict the output of these statements:
  

  document.writeln(`${"1" == true} ${"" == false}<br>`);
  document.writeln(`${"0" == false} ${"1" == true} ${"5" == true}<br>`);
  document.writeln(`${"0.00" == false} ${"1.00" == true} ${"5.00" == true}`);
  // Output:
  true true false
  true true false
  true true false
  

• The === comparison operator only returns true if the datatypes of the operands are the same without converting.
  Predict the output of these statements:
  

  document.writeln(`${5 === "5"}<br>`);
  document.writeln(`${"" === false} ${"1" === true}<br>`);
  document.writeln(`${"0" === false} ${"1" === true}<br>`);
  document.writeln(`${"0.00" === false} ${"1.00" === true}`);
  // Output
  false
  false false
  false false
  false false
  

• Practice Problem: Predict the output:
  

  var n = 1.0 - 0.8;
  var m = 0.3 - 0.1;
  document.writeln((n == m) + " ");
  // Output:
  false
  

  Why? Because of differing roundoff errors due to the binary representation of the double precision floating point numbers, 1.0 - 0.8 and 0.3 - 0.1 are not represented with exactly the same values. To see this, look at the output of this statement:
  

  document.writeln((n - m));
  // Output:
  -2.7755575615628914e-17 
  

  Instead of checking for equality with floating point values, we should check that n and m are very close to each other:
  

  document.writeln((Math.abs(n - m) < 1.0e15) + " ");
  // Output:
  true
  

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]);
  // Output:
  2,3,5,7,11,13
  11
  

• 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(var i = 0; i < 5; i++) {
      document.write(a[i] + " ");
  }
  // Output:
  2 3 5 7 11 13
  

  or

  for(var 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.
  

Properties and Methods

• As we see by the output from
  

  document.writeln(typeof [2, 3, 5, 7]);
  

  an array is an object.
• An object has properties and methods:
  A property is a piece of data stored in an object.
  A method is a function called by an object.
• Practice Problem: List some properties and methods for a BasketballPlayer object,
  A property is a piece of data that describes some aspect of a basketball player; a method is something that a basketball player can do.
• BasketballPlayer Properties that were suggested in class:
  

  height  vertical  jump  weight  age  yearsInPros
  name   jerseyNumber   team   position
  

  Basketball Player Methods that were suggested in class:
  

  shoot pass dribble rebound run block 
  screen stop 
  

• Now let's look at properties and methods for an array object.  For example, if the array a is defined by
  

  var a = [2, 3, 5, 7];
  

  the properties and methods of a are accessed by the dot operator (.).
• The dot operator is also called the member selection operator.
• The array object a has the property length that is accessed by the dot operator:
  

  document.writeln(a.length);
  // Output:
  4
  

• The array object has the method reverse that is also accessed by the dot operator:
  

  document.writeln(a.reverse( ));
  // Output:
  [7, 5, 3, 2]
  

• Practice Problems
  
  1. ArrayMethods Example: write a script that tests these array instance methods.
     

     toString  concat  pop  push  shift  unshift
     

     Answer: Check out this W3Schools reference to array methods:
           www.w3schools.com/jsref/jsref_obj_array.asp
     
     Here is a test script that tests these string:
     

     var a = [2, 3, 5, 7];
     var b = [9, 8, 7, 6];
     
     // When printing the array object a, toString
     // is automatically called
     document.writeln(a.toString( ) + " " + a + "<br>");
     // Output: 2,3,5,7 2,3,5,7
     
     // The concat method concatenates two arrays.
     document.writeln(a.concat(b) + "<br>");
     // Output: 2,3,5,7,9,8,7,6
     
     // The pop method pops the element off 
     // of the top (right) of the array.
     a.pop( );
     document.writeln(a + "<br>");
     // Output 2,3,5
     
     // The push method pushes a new element
     // (in this case 99) onto the top of the array.
     a.push(99);
     document.writeln(a + "<br>");
     // Output: 2,3,5,99
     
     // The shift method is similar to pop, but
     // but the bottom (left) element is removed.
     a.shift( );
     document.writeln(a + "<br>");
     // Output: 3,5,99
     
     // The unshift method is like push, but the new element
     // is added to the bottom (left) of the array.
     a.unshift(98);
     document.writeln(a + "<br>");
     // Output: 98,3,5,99
     

  2. Write a script that tests these string methods:
     

     at  indexOf  repeat  toUpperCase  trim
     

     Use the W3Schools String reference to help you:
          www.w3schools.com/jsref/jsref_obj_string.asp

Truthiness

• We saw in the Comparisons for Equality section that 0, 0.0, "", and null are
  equal to the value false, according to the == operator.
• In this section, we investigate the truthiness of various values.
• The truthiness of a value is its value after being converted to boolean with the Boolean function.
• Truthiness Example
  Predict the output of this script.
  

  document.write(Boolean(5) + " ");
  document.write(Boolean(283764) + " ");
  document.write(Boolean(0) + " ");
  document.write(Boolean(-203) + "<br>");
  
  document.write(Boolean(3.14159265) + " ");
  document.write(Boolean(-284.378) + " ");
  document.write(Boolean(0.000000001) + " ");
  document.write(Boolean(0.0) + "<br>");
  
  document.write(Boolean("grapefruit") + " ");
  document.write(Boolean("$%&*@") + " ");
  document.write(Boolean("0") + " ");
  document.write(Boolean("false") + " ");
  document.write(Boolean(" ") + " ");
  document.write(Boolean("") + "<br>");
  
  document.write(Boolean(null) + " ");
  document.write(Boolean(undefined) + " ");
  document.write(Boolean(Infinity) + " ");
  document.write(Boolean(NaN) + "<br>");
  

  Then run it to check if your prediction is correct.
• Formulate the rules for truthiness.
• The reason that truthiness is important is the behavior of if or while statements when their conditions are expressions that do not return true or false.
• What is the output?
  

  var n = 45;
  var p;
  if (n) {
      v = "nonzero";
  }
  else {
      v = "zero";
  }
  document.writeln("Value: " + v);