IT 238 -- Jan 29, 2025 Notes

IT 238 -- Jan 29, 2025

Review Exercises

What is the difference between a function and a method? Give some examples of builtin functions.
Answer: A function is standalone--it does not require an object to call it. A method is called by an object. Some examples of builtin standalone functions:
```
isFinite  isNaN  parseFloat  parseInt
```
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.

Test these String properties and methods:

charAt  length  indexOf  toLowerCase 
Answer:
 var a = "elephant";
document.write(a.charAt(4) + " ");
// Output: h
document.write(a.length + " ");
// Output: 8
document.write(a.indexOf("an") + " ");
// Output: 5
document.writeln(a.toLowerCase( ) + "<br>")
// Output: ELEPHANT

Test these Array properties and methods:

length  pop  push  shift  unshift  
Answer:
var a = [3, 6, 2, 7, 4];
a.pop( );      --> 3,6,2,7
a.push(88);    --> 3,6,2,7,88
a.shift( );    --> 6,2,7,88
a.unshift(99); --> 99,6,2,7,88
document.writeln(a.toString( ));
// Answer: 99,6,2,7,88

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.

Practice Quiz 4a

Take Practice Quiz 4a.

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.