IT 238 -- Apr 28, 2026 Notes

IT 238 -- Jan 28, 2026

Review Exercises

Test the array lookup operator [ ]. Answer:
```
var a = ["abc", "def", "ghi", "jkl", "mno"];
document.writeln(a[3]);
// Output:
jkl
```
Recall that array indices in JavaScript are zero-based.
Explain what properties and methods are for an object.

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]
```
Practice Problem
ArrayMethods Example
Write a script that tests these array instance methods.
```
toString  concat  pop  push  shift  unshift
```

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

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

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="kids.js"></script>
        <script>
        var objects = JSON.parse(kids);
        for(var kid of objects) {
            document.writeln(kid.name + "<br>");
        }
        </script>
    </head>
    <body></body>
</html>

Print the names and ages of the girls in the Kids Data file kidsdata.js file. Answer:

// Script only:
var objects = JSON.parse(kids);
for(var kid of objects) {
    if (kid.gender == "F") {
        document.writeln(`${kid.name} ${kid.age}<br>`);
    }
}

Print the gender and age of Jane. Answer: see KidsTextArea1 Example below.
Print the gender and age of the kid whose name is entered in a prompt box. Answer: see below.
Display the gender and age of the kid when the name is entered in a textfield. Answer: see below.
Print the names and ages of all the kids when the gender is entered in a textfield. Display the output in a textarea. Answer: see below.
Look at this KidsTextArea1 Example
This example displays output from questions 1, 2, and 3 in a textarea controls:
Web Page Source Code
Look at this KidsTextArea2 Example
This example displays output from questions 4 and 5 in a paragraph and in a text area control, respectively:
Web Page Source Code

Project 2a

Look at the Project 2a Description.