IT 238 -- Feb 3, 2025 Notes

IT 238 -- Feb 3, 2025

Review Exercises

How do you write the string "This is a test." to each of these output locations?
(a) Chrome Console (b) HTML Document
(c) Output Dialog (d) HTML Textfield
Answer:

// (a) Write to the Chrome Console:
console.log("This is a test.");
// (b) Write to the browser document:
document.writeln("This is a test.");
// (c)Display string in output dialog:
alert("This is a test.");

// (d) Display in an HTML textfield, say with id output.
function init( ) {
    var textField = document.getElementById("output");
    textField.value = "This is a text.";
}
window.addEventListener("load", init);

What are the JavaScript operators && and || ?
Answer: && means logical and; || means logical or.
What is the difference between an array of object literals and JSON?
Answer: The object literals in an array can be accessed and manipulated. JSON is just a string that must be converted to an object literal or an array of object literals before its data can be accessed.
Which method changes an array of object literals into a JSON string?
Answer: var jsonString = JSON.stringify(objects);
Which method changes a JSON string into an array of object literals?
Answer: var objects = JSON.parse(jsonString);

Create an array of book literal objects named books with these properties:

title	author	year
"Tale of Two Cities"	"Dickens"	1859
"Return of the Native"	"Hardy"	1878
"Alice in Wonderland"	"Carroll"	1865

Answer: The zipfile of all source code files for Exercises 5, 6, and 7:
ex456.zip

// Script for Exercise 5
var books =
    [ { title: "Tale of Two Cities",
        author: "Dickens",
        year: 1859 },
      { title: "Return of the Native",
        author: "Hardy",
        year: 1878 },
      { title: "Alice in Wonderland",
        author: "Carroll",
        year: 1865 } ];

// Print array with traditional for loop.
for(var i = 0; i < books.length; i++) {
    document.writeln(`${books[i].title} `);
    document.writeln(`${books[i].author} `);
    document.writeln(`${books[i].year}<br>`);
}

// Print array with modern for loop.
for(var book of books) {
    document.writeln(`${book.title } `);
    document.writeln(`${book.author} `);
    document.writeln(`${book.year}<br>`);
}

Create an object literal student with this information:

name	"Becky"
quizScores	[93, 89, 95, 100]

Add a toString method that converts the object to a string.
Answer:

// Script for Exercise 6
var student = {
    name: "Becky",
    quizScores: [93, 89, 95, 100],
    toString: function( ) {
        var output = this.name + ";" +
            this.quizScores.toString( );
        return output;
    }
};
// toString method is called automatically
// when the student object is printed.
document.writeln(student);

Create a clock object representing a 24 hour clock with instance variables hr, min, sec, and instance methods toString and tick. Answer:

// Script for Exercise 7
 clock = { hr: 19, min: 3, sec: 9,
    tick: function( ) {
        this.sec++;
        if(this.sec == 60) {
            this.sec = 0;
            this.min++;
        }
        if(this.min == 60) {
            this.min = 0;
            this.hr++;
        }
        if(this.hr == 24) {
            this.hr = 0;
        }
    },
    toString: function( ) {
        var h = this.hr.toString( ).padStart(2, "0");
        var m = this.min.toString( ).padStart(2, "0");
        var s = this.sec.toString( ).padStart(2, "0");
        return `${h}:${m}:${s}`;
    }
}

// Test clock object
document.writeln(clock);
for(var i = 1; i <= 20000; i++) {
    clock.tick( );
}
document.writeln(clock);

Using the kids.js file, write scripts that:

output the name and age of all kids that are 9 years old;
Answer:

===== HTML file: index.html ====================
<!DOCTYPE html>
<!-- Use this HTML file for exercises
     9b, 9c, and 9d also. -->
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Kids Examples</title>
    <script src="kids.js"></script>
    <script src="script.js"></script>
</head>
<body></body>
</html>
----- JavaScript script: script.js -------------
// Script for Exercise 9a
var kidObjects = JSON.parse(kids);
for(kid of kidObjects) {
    if(kid.age == 9) {
        document.writeln(`${kid.name} ${kid.gender}<br>`);
    }
}
================================================

output the name of all the girls that are 11 years old;

// Script for Exercise 9b
// Source code file: script.js
var kidObjects = JSON.parse(kids);
for(kid of kidObjects) {
    if(kid.age == 11 && kid.gender == "F") {
        document.writeln(`${kid.gender}<br>`);
    }
}

output the gender and age of Joan;

// Script for Exercise 9c
// Source code file: script.js
var kidObjects = JSON.parse(kids);
for(kid of kidObjects) {
    if(kid.name == "Joan") {
        document.writeln(`${kid.gender} ${kid.age}<br>`);
    }
}

output the gender and age of the person with name entered in a prompt box;
Answer:

// Script for Exercise 9d
// Source code file: script.js
var kidObjects = JSON.parse(kids);
var searchName = prompt("Enter name: ");
for(kid of kidObjects) {
    if(kid.name == searchName) {
        document.writeln(`${kid.gender} ${kid.age}<br>`);
    }
}

output the gender and age of the person with name entered in a textfield when a button is clicked.
Answer:

======== HTML file: index.html ===============================
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Exercise 8e</title>
        <script src="kids.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Exercise 8e</h1>

        <label for="txtName">Name:</label><br>
        <input type="text" id="txt-name"><br><br>

        <button id="btn1">Display</button><br><br>

        <p id="display" />
    </body>
</html>
-------- Script file: script.js ==============================
function displayInfo( ) {
    var input1 = document.getElementById("txt-name");
    var display1 = document.getElementById("display");
    var searchName = input1.value;
    var kidsArray = JSON.parse(kids);
    for(kid of kidsArray) {
        if (kid.name == searchName) {
            display1.innerHTML = 
                `${kid.gender} ${kid.age}`;
        }
    }
}

function init( ) {
    var button1 = document.getElementById("btn1")
    button1.addEventListener("click", displayInfo)
}

window.addEventListener("load", init);
--------------------------------------------------------------

Look at the KidsTextArea1 and KidsTextArea2 Examples.

Using the cities JSON file for Project 2a:
https://facweb.cdm.depaul.edu/sjost/cities.js,
output the number of cities represented in the database. It is not necessary to include the JSON file in your project for this exercise. Access it via its URL instead.
Here is the script:

<!DOCTYPE html>
<!-- Source code for Exercise 11.
     File name: index.html -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Cities Example</title>
        <script 
src="https://facweb.cdm.depaul.edu/sjost/cities.js">
        </script>
        <script src="script.js></script>
   </head>
   <body />
</html>
-------------------------------------------
// Source code for Exercise 11.
// File name: script.js
var cities = JSON.parse(data);
document.writeln(cities.length);
// or, longer, replace previous line with
var count = 0;
for(city of cities) {
    count++;
}
document.writeln(count);

Functions as First Class Objects

In JavaScript, functions are first class objects.
This means that functions can be assigned to variables, passed as arguments to other functions, and even printed.

Try out this script:

// FirstClass Example

function s(n) {
    return n * n;
}

function c(n) {
    return n * n * n;
}

function evaluate(f) {
    return f(3);
}

document.writeln(s(5) + " ");
document.writeln(c(2) + " ");
g = s;
document.writeln(g(2) + "<br>");
document.writeln(evaluate(s) + 
    " " + evaluate(c) + "<br>");
document.writeln(s + "<br>");
document.writeln(c + "<br>");

Anonymous Functions

A function created without a name is an anonymous function, for example:
```
function(n) {
    return n * n;
}
```
An anonymous function is useless unless is assigned to a variable or passed in as an argument to another method. Try this script:
```
// Anonymous Example
var c = function(n) {
    return n * n * n;
}
document.writeln(c(5));
```

Arrow Notation for Functions

Modern JavaScript provides an alternative arrow notation for methods.
Arrow notation comes from math. Traditionally, a math function is defined like this: f(x) = x². In arrow notation, this function is defined as f : x → x².
In JavaScript, the method
```
function square(x) {
    return x * x;
}
```
can be defined as an anonymous method in arrow notation like this:
```
var square = (x) => x * x;
```
If the method has exactly one parameter, the parentheses can be omitted:
```
var square = x => x * x;
```
JavaScript uses the fat arrow ( => ) to define functions in arrow notation. Some other languages, including Java, use the thin arrow ( -> ) instead.

Practice Problems: Write these four functions in arrow notation and test them:

function square(n) {
    return n ** 2;
}
// Answer:
// Parentheses are not needed for argument list
// when there is only one argument.
var square = n => n ** 2;
var value = 5;
document.writeln(square(value));
// Output: 25

function add(n, m) {
    return n + m
}
// Answer:
var add = (n, m) => n + m;
document.writeln(add(5, 7));
// Output: 12

function sayHello( ) {
    alert("Hello!");
}
// Answer
var sayHello = ( ) => alert("Hello!");
sayHello( );
// Output: Hello!

 function sayHello(name) {
    alert(`Hello, ${name}!`;
}
// Answer
var sayHello = name => alert(`Hello, ${name}!`);
var name = prompt("Enter a name.");
sayHello(name);
// Input: Billy
// Output: Hello, Billy.

function showStars( ) {
    return "**********";
}
// Answer:
var showStars = ( ) => "**********";
document.writeln(showStars( ));
// Output: **********

function triangleArea(base, height) {
    return base * height / 2.0;
}
// Answer:
var triangleArea = 
    (base, height) => base * height / 2.0;
document.writeln(triangleArea(3, 4));

function greeter(name) {
    document.writeln(`Hello, ${name}, how are you?`);
}
// Answer:
var greeter = name => {
    document.writeln(`Hello, ${name}, how are you?`);
}
greeter("Alice");

function init( ) {
    alert("Hello!");
}

// Answer: the body of a function with no return
// value must be enclosed in curly braces.
var init = ( ) => {
    alert("Hello!");
}
// Test it like this:
window.addEventListener("click", init)
// or, shorter
window.addEventListener("click", ( ) => {
    alert("Hello!");
});