To Lecture Notes

IT 238 -- Apr 15, 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>");
   }
   

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
  

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  weight  college  position  isRookie  name  team  jerseyNumber
  

  Basketball Player Methods that were suggested in class:
  

  dribble  shoot  pass  dunk  run  foul  stop  block
  

• Now look at properties and methods for an array object. Using the array a 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]
  

• Notice that parentheses are always used when accessing a method, even if no arguments are passed to the method.
• Parentheses are not used when accessing a property.
• 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
  

• Write a script that tests these string methods:
  

  indexOf  repeat  toUpperCase  trim
  

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

  var a = "elephant";
  
  document.writeln(a.indexOf("ph");
  // Output: 3
  
  document.writeln(a.repeat(4));
  // Output: elephantelephantelephantelephant
  
  document.writeln(a.toUpperCase( ));
  // Output: ELEPHANT
  
  var b = "       Sample Text    ";
  document.writeln("*" + a.trim( ) + "*");
  // Output: *Sample Text*
  

Project 2a

• Look at the Project 2a Description.

Object Literals

• An object literal obj is a collection of key-value pairs where the key is called the property (p1, p2, p3) and the value is the value of the property (v1, v2, v3):
  

  var obj = {
      p1: v1,
      p2: v2,
      p3: v3
  };
  

• The value v is obtained from a property p in an object obj by using the dot operator:
  

  var v = obj.p;
  

• Here is an object literal definition for a basketball player:
  

  var b = {
      name: "Michael Jordan",
      jerseyNumber: 23,
      ht: 1.98,
      wt: 98,
      team: "Bulls"
  };
  

• Another example of an object literal:
  ObjectLiteral Example

  var k = {
      name: "Alice",
      gender: "F",
      age: 11    
  };
  document.writeln(`${k.name} ${k.gender} ${k.age}`);
  // Output: Alice F 11
  

• A JavaScript object literal is like a Python dictionary, except that the keys need not be in quotes.
• An object literal can also be created by adding properties to the object after it has been created:
  

  var k = { };
  k.name = "Alice";
  k.gender = "F";
  k.age = 11;
  
  document.writeln(`${k.name} ${k.gender} ${k.age}`);
  // Output: Alice F 11
  

• Although the object in the ObjectLiteral Example has the properties name, gender, and age, it does not contain any instance methods.
• The instance methods haveBirthday and toString can be added like this:
  

  var k = {
      name: "Alice",
      gender: "F",
      age: 11,
      haveBirthday: function( ) {
          this.age++;
      },
      toString: function( ) {
          return `${this.name};${this.gender};${this.age}`;
      }
  };
  
  document.writeln(`${k.toString( )}<br>`);
  document.writeln(`${k}<br>`);
  k.haveBirthday( );
  document.writeln(`${k.age}`);
  // Output:
  Alice;F;11
  Alice;F;11
  12
  

• Practice Problem: Create an object literal that represents an ordered pair of numbers, say x=3 and y=5. The toString method should return a string of the ordered pair in traditional notation: (3, 5). Answer:
  

  var pair = {
      x: 3,
      y: 5,
      toString: function( ) {
          return `(${this.x}, ${this.y})`;
      }
  }
  document.writeln(pair.x + " " + pair.y + " ");
  // or
  // document.writeln(`${pair.x} ${pair.y}`);
  document.writeln(pair);
  

• Later we will see how to create classes, which are templates or blueprints from which objects can be created.
• Modern object oriented languages, such as Java, C++, C#, and Python create objects from classes by calling the class constructor.

JavaScript Object Notation (JSON)

• A popular storage format for data, even for applications using languages other than JavaScript, is JavaScript Object Notation (JSON).
• JSON data is usually stored as string that represents JavaScript array of object literals.
• Use the JSON method stringify to convert an array of object literals into a JSON string.
• Use the JSON method parse to convert a JSON string back to a JavaScript array.
• For example:
  

  // Define p as an array of object literals:
  p = [ {name: "Alice", gender: "F", age: 11},
        {name: "Bob", gender: "M", age: 10},
        {name: "Chloe", gender: "F", age: 8} ];
  
  // Convert array to a JSON string:
  s = JSON.stringify(p);
  document.writeln(s);
  // Output:
  [{"name":"Alice","gender":"F","age":11},
  {"name":"Bob","gender":"M","age":10},
  {"name":"Chloe","gender":"F","age":8}]
  
  // Convert JSON string back to an array:
  p1 = JSON.parse(s);
  for(let i = 0; i <= 2; i++) {
      document.writeln(p1[i].name + " ");
      document.writeln(p1[i].gender + " ");
      document.writeln(p1[i].age + "<br>");
  }
  // Output:
  Alice F 11
  Bob M 10
  Chloe F 8
  

• Practice Problems:
  
  1. Convert the JSON string defined in the Kids Data file kidsdata.js file into an array of object literals. Then print the name, gender, and age of the kids in the array.
  2. Print only the girls in the Kids Data file kidsdata.js file.
  3. Print the gender and age of Jane.
  4. Print the gender and age of the kid whose name is entered in a prompt box.
  5. Display the gender and age of the kid when the name is entered in a textfield.
  6. Print the names and ages of all the kids when the gender is entered in a textfield. Display the output in a textarea.
• KidsTextArea1 Example
  This KidsTextArea1 Example displays output from questions 1, 2, and 3 in a textarea controls:
  Web Page   Source Code
• KidsTextArea2 Example
  This KidsTextArea1 Example displays output from questions 4 and 5 in a paragraph and in a text area control, respectively:
  Web Page   Source Code

Scope

• The scope of a variable is the region in JavaScript code where a variable exists.
• A variable defined with var has function scope, which means that the variable only exists in the function where it is defined.
• For example, this makeGreeting function will generate an error:
  

  function makeGreeting(name) {
      var greeting = `Hello, ${name}, how are you?`;
      return greeting
  }
  document.writeln(greeting);
  

  The variable greeting does not exist after the end of the function.
• A block consists of lines of code within an if..else statement, while loop, for loop, or any code defined within curly braces like this:
  

  {
      let x = 1.5;
      x++;
  }
  document.writeln(x);    
  

  These statements generate an error because the variable x does not exist after the block in which it is defined ends.
• A variable defined with let has block scope, which means that the variable only exists in the block where it is defined.
• Best practice is the keep the scope of a variable as small as possible. If a variable is only needed in a block, use let to declare it.
• In this example, the variable n has block scope within the for loop, but the variable sum has function scope:
  

  // Compute the sum of numbers between 
  // 1 and n inclusive:
  function sum1ToN(n) {
      var sum = 0;
      for(let i = 1; i <= n; i++) {
          sum += i;
      }
      return sum;
  }
  document.writeln("Sum: " + sum1ToN(100));
  // Output:
  5050
  // Note: a more efficient way to compute
  // the sum of the numbers from 1 to 100
  // is to use this formula:
  // sum = (n * (n + 1)) / 2 
         = (100 * 101) / 2 
         = 10100 / 2 
         = 5050
  

  Here is a story about the famous mathematician Karl Gauss. When he was eight years old in elementary school, the teacher asked the class asked the students to add up the numbers from 1 to 100. Although this would be a difficult problem for most elementary students, the teacher was surprised that Karl obtained the answer so quickly. He noticed that
  

  sum = 1 + 2 + 3 + ... + 98 + 99 + 100
      = (1 + 100) + (2 + 99) + (3 + 98) + ... + (50 + 51)
      = 101 * 50
      = 5050
  

  and announced the answer of 5,050 in less than one minute.