To Lecture Notes

IT 231 -- Mar 12, 2024

Review Exercises

  1. Create a CSS class named image100 that sets the width of an image to 100px. How do you use such a class? Answer:
    // Class definition:
.image100 { width: 100px; }
// Class usage in img element:
<img class="image100" src="image1.jpg">
  2. What is the difference between a function and a method?
    Answer: a function is standalone, for example: var n = parseInt("345");
    A method is called from a class or an object. For example:
          Math.random( ) or s.toUpperCase( ).
  3. For a function or method, what is the difference between a parameter and an argument?
    Answer: a parameter is passed in to a function when it is defined. For example:
    function celToFahr(cel) {
    return 9.0 * cel / 5 + 32;
}
    It tells the function what to do with the value passed in. An argument is the value that is passed in to a function when it is invoked (or called). For example:
    console.log(celToFahr(20));
// Output: 68.
  4. What is the difference between var and let?
    Answer: a function defined with var is defined everywhere in the function where it is defined, for example:
    var n = 45;
    A variable defined with let is valid anywhere in the block where it is defined, for example:
    let n = 45;
    A block is a source code fragment delimited with curly braces. Here are the two examples shown in class:
    for(let i = 1; i <= 5; i++) {
    let n = 2 * i + 1;
    console.log(i + " " + n);
}
console.log(i + " " + n);
// Output:
1 3
2 5
3 7
4 9
5 11
After the for loop:
Error: i and n are both undefined.

for(var i = 1; i <= 5; i++) {
    var n = 2 * i + 1;
    console.log(i + " " + n);
}
console.log(i + " " + n);
// Output:
1 3
2 5
3 7
4 9
5 11
5 11
  5. How do you obtain a value from an object literal, given the key for the value?
    Answer: If the object literal student1 is defined as
    var student1 = { name: "Alice", year: 2, gpa: 3.89 };
// Method 1:
var n = student1.name;
// Method 2:
var n = student1["name"];
    You must use Method 2 when the key contains special characters or when the key is a variable:
    var headerInfo = { "Content-Type", "text/html" };
console.log(headerInfo["Content-Type"]);

var key = "year";
console.log(student1[key]);
  6. We know how the of operator works for an array:
    var a = [2, 3, 5, 7, 11, 13];
for(let n of a) {
    console.log(n);
}
    How does the in operator work?
    Answer: You can use the in operator to determine if a given key is present in an object literal:
    console.log("year" in student1);
console.log("gender" in student1);
// Output:
true
false
    The in operator can also be used in a for loop sequentially process all of the keys in an object:
    for(key in student1) {
    console.log(key + student1[key]);
}
// Output:
name Alice
year 11
gpa 3.89
    We have seen the of operator used in a modern for loop to sequentially process the values in an array:
    var a = [39, 51, 74];
for(let n of a) {
    console.log(n);
}
// Output:
39
51
74
    Interestingly, using in instead of in a for loop gives this result:
    var a = [39, 51, 74];
for(let n in a) {
    console.log(n);
}
// Output:
0
1
2
    This tells us that the indices of the array can be considered to be the keys (0, 1, 2) that are used to obtain the array values (39, 51, 74).
  7. How do you make the value in a textfield on an input form required?
    Answer: add the required attribute to the textfield:
    <input type="text" required name="fname">
  8. Add delete capability to the Elements Example: when the route
    localhost:3000/elements/delete/5
    is entered, where 5 is a parameter, row 5 is deleted from the table of elements on the index view. Answer: here are the additions to the source code files:
    Add this app.get method to the main.js script:
    ---------------------------------------------
app.get("/elements/delete/:aNum", (req, res) => {
    // Obtain the parameter like this:
    var n = req.params.aNum;
    if (1 <= n && n <= 8) {
        // Row numbers are zero-based so they are
        // one less than the atomic number.
        elements.splice(n - 1, 1);
        res.render("index", { elements: elements });
    }
    else {
        res.send("Atomic number out of range.");
    }
});
  9. Look at the TestEjs5 Example. Modify it so that the form uses method="post". Here is are the modified source code files. Test them. Here are the source code files:
    -------------------------------------------------
// Display a name obtained from an input form with
// method=GET
// Source code file: main.js
const express = require("express");
const app = express( );
app.use(express.urlencoded({extended: false}));
app.set("view engine", "ejs");

app.get("/contact_info", (q, r) => {
    r.render("contact-info");
});
app.post("/contact_receipt", (q, r) => {
    console.log(q.body);
    r.render("contact-receipt", q.body);
});
app.listen(3000, ( ) => {
    console.log("Listening on port 3000.");
});
-------------------------------------------------
// Source code file:
<!DOCTYPE html>
<!-- Source code file: contact-info.ejs -->

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TestEjs2 Example</title>
    </head>
    <body>
        <h2>TestEjs5 Example</h2>
        <form name="form1" 
              action="/contact_receipt" 
              method="post">
            <label for="fname">First Name:</label><br>
            <input type="text" id="fname" name="fname"><br><br>
            <label for="lname">Last Name:</label><br>
            <input type="text" id="lname" name="lname"><br><br>
            <label for="phone">Phone:</label><br>
            <input type="text" id="phone" name="phone"><br><br>
            <label for="email">Email:</label><br>
            <input type="text" id="email" name="email"><br><br>
            <input type="submit" value="Submit Contact Info">
        </form>
    </body>
</html>
-------------------------------------------------
// Source code file:
<!DOCTYPE html>
<!-- Source code file: contact-receipt.ejs -->

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TestEjs5 Example</title>
    </head>
    <body>
        <h1>TestEjs5 Example</h1>

        <p>Your contact information has been received<br>
           Thank you for your information.</p>

        <table>
            <tr> 
                <th>First Name</th> <th>Last Name</th>
                <th>Phone</th> <th>Email</th> 
            </tr>
            <tr>
                <td><%= fname %></td> <td><%= lname %></td>
                <td><%= phone %></td> <td><%= email %></td>
            </tr>
        </table>
    </body>
</html>
------------------------------------------------
  10. Try out the NVDA (Nonvisual Desktop Access) Screen Reader on the input form in Exercise 7.

Regular Expressions