To Lecture Notes

IT 238 -- Jan 26, 2026

Review Exercises

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

   for(var n = 1; n <= 1000; n++) {
       document.writeln(n + " ");
       if (n % 10 == 0) {
           document.writeln("<br>");
       }
   }
   

2. How many stars are printed?
   

   for(var i = 1; i <= 100; i++) {
       for(var j = 1; j <= 200; j++) {
           for(var k = 1; k <= 300; k++) {
               document.writeln("*<br>");
           }
       }
   }
   

   Answer: 100 * 200 * 300 = 6,000,000 (6 million).
   Because these are nested loops, you multiply.
3. How many stars are printed?
   

   for(var i = 1; i <= 100; i++) {
       document.writeln("*<br>");
   }
   for(var j = 1; j <= 200; j++) {
       document.writeln("*<br>");
   }
   for(var k = 1; k <= 300; k++) {
       document.writeln("*<br>");
   }
   

   Answer: 100 + 200 + 300 = 6,000 (6 thousand).
   Because these loops are sequential, you add.
4. 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
   ...
   

   Answer:
   

   for(var i = 1; i <= 100; i++) {
       document.write(i);
       if (i % 3 == 0) {
           document.write(" Fizz");
       }
       if (i % 5 == 0) {
           document.write(" Buzz");
       }
       document.writeln("<br>");
   }
   

5. Create a textfield that has rounded corners. Also, add a placeholder attribute to the textfield.
   Answer:
   Source code:
   

   <input type="text" value="Larry" placeholder="Enter name:"
          style="border-radius: 15px; width: 150px; height: 20px;">
   

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:
  

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

• Change this expression to use expression interpolation.
  

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

  Answer: 

  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
  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 binary floating point 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
  

Functions vs. Methods

• Question: What is the difference between a method and a function?
  
  Simple Answer: A method is called from an object or a class; a function is standalone and not called from an object, for example:
  

  someObject.someMethod( );
  someClass.someMethod( );
  someFunction( );

  Technical Answer: A function that is actually called from the global object window like this:
  

  window.someFunction( );
  

  When the global object window is omitted, it is understood, so someFunction( ) and window.someFunction( ) have the same effect.
• Here are some JavaScript builtin functions to try out:
  

  isFinite  isNaN  parseFloat  parseInt

  We can use this script to test them:
  

  document.writeln(isFinite(34544.5484));
  // Output: true
  document.writeln(window.isFinite(34544.5484));
  // Output: true
  document.writeln(Number.MAX_VALUE);
  // Output: 1.7976931348623157e+308 
  document.writeln(isFinite(1.0e309) + " ");
  // Output: false
  document.writeln(isNaN(0 / 0));
  // Output: true
  document.writeln(parseFloat("453.45"));
  // Output: 453.45
  document.writeln(parseInt("453");
  // Output: 453
  

Project 2a

• Look at the Project 2a Description.

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 < 6; 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 (number)  position (string)  name (name)
  year (number)    jerseyNumber (number)  isRookie (boolean)
  

  Basketball Player Methods that were suggested in class:
  

  shoot  block  rebound  pass  steal  run  stop  foul
  

• We will look at the rest of this section on Wednesday, Jan 28.
• 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 Problem
  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 methods:
  

  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
  

• Start with this array of prime numbers:
  

  var c = [2, 3, 5, 7, 11, 13, 17, 19];
  // The splice method "splices" new elements
  // into the middle of an array.  In the following line,
  // the 3 means delete items, starting at index 3
  // the 4 means delete 4 items
  // the 8, 7, and 5 are the items to be inserted in the
  // array to replace the deleted items.
  c.splice(3, 4, 9, 8, 7, 6);
  document.writeln(c + "<br>");
  // Output: 2,3,4,9,8,7,6,19
  

• 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