To Lecture Notes

IT 238 -- Jan 28, 2026

Review Exercises

1. Test the array lookup operator [ ]. Answer:
   

   var a = ["abc", "def", "ghi", "jkl", "mno"];
   document.writeln(a[3]);
   

   Recall that array indices in JavaScript are zero-based.
2. Explain what properties and methods are for an object.
   Answer: a property is a piece of data that is stored in an object; a method is a procedure that can be called from the object to do something.

Array Properties and Methods

• Look at some 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]
  

• Note that parentheses are not used when addessing a property (e.g., a.length) but parentheses are required when calling a method (e.g., a.reverse( )).
• Practice Problem
  ArrayMethods Example
  Write a script that tests these array instance methods.
  

  toString  pop  push  shift  unshift  concat
  

  Check out this W3Schools reference to array methods:
        www.w3schools.com/jsref/jsref_obj_array.asp
  
  Here is the test script that we came up with in class:
  

  var a = [2, 3, 5, 7];
  
  // test toString
  document.writeln(a.toString( ) + "
  ");
  // The toString method is automatically called
  // when the string is printed.
  document.writeln(a + "
  ");
  // Output: 2,3,5,7
  
  // Test pop
  a.pop( );
  document.writeln(a + "
  ");
  // Output: 2,3,5
  
  // test push
  a.push(99);
  document.writeln(a + "
  ");
  // Output: 2,3,5,99
  
  // Test shift
  a.shift( );
  document.writeln(a + "
  ");
  // Output: 3,5,99
  
  // Test unshift
  a.unshift(98);
  document.writeln(a + "
  ");
  // Output: 98,3,5,99
  
  // Test concat
  var b = [11, 12, 13];
  var c = a.concat(b);
  document.writeln(c + "
  ");
  // Output: 98,3,5,99,11,12,13
  

• Write a script that tests these string methods:
  

  charAt  indexOf  repeat  toUpperCase  trim
  

  Use the W3Schools String reference to help you:
       www.w3schools.com/jsref/jsref_obj_string.asp
  Here is the test script that we came up with in class:
  

  var s = "elephant";
  
  // Test charAt method.
  document.writeln(s.charAt(5) + "<br>");
  // Output: a
  
  // Test indexOf
  document.writeln(s.indexOf("pha"));
  // Output: 3
  
  document.writeln(s.indexOf("phi") + "<br>");
  // Return value of indexOf is -1 if the substring
  // is not found.
  // Output: -1
  
  document.writeln("mississippi".indexOf("iss") + "<br>");
  // Output: 1
  
  // Test repeat.
  var star = "*";
  document.writeln(star.repeat(20) + "<br>");
  // Output: ********************
  
  // Test toUpperCase
  document.writeln(s.toUpperCase( ) + "<br>");
  // Output: ELEPHANT
  
  // Test trim
  var u = " This is a test. ";
  document.writeln("$" + u.trim( ) + "$");
  // Output: $This is a test.$
  

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 names of the kids in the array. Answer:
   

   <!DOCTYPE html>
   <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>Document</title>
           <script src="kidsdata.js"></script>
           <script>
           // If JS statements are called from the head tag,
           // they must be placed in an init method that
           // is called when the page is loaded.
           function init( ) {
               var objects = JSON.parse(kids);
               for(var kid of objects) {
                   document.writeln(kid.name + "<br>");
               }
           }
           window.addEventListener("load", init);
           </script>
       </head>
       <body></body>
   </html>
   

Project 2a

• Look at the Project 2a Description.