IT 231 -- Feb 20, 2024 Notes

IT 231 -- Feb 20, 2024

Review Exercises

If the Express server app is defined as
```
const app = express( );
```
what do these methods do?
```
(a) app.get  (b) app.set  (c) app.use
```
Answer:
(a) An app.get call is of the form
```
app.get(route, callback);
```
If the route input into the URL field of the browser matches the route parameter, the callback function is executed.
(b) An app.set call is of the form
```
app.set(key, value);
```
For example,
```
app.set("view engine", "ejs");
```
adds a setting to the browser app with key "view engine" and value "ejs".
(c) app.use executes a middleware function. (We will look at the details of middleware software later.) The example we have seen is this:
```
app.use(express.static("public"));
```
This method call sets the public folder as a static folder.
Which Array methods do you know?
Answer: We discussed these Array methods previously in class:
```
reverse  toString  sort  forEach (hypermodern for loop)
```
Here are three for loops that print the items in an array:
```
// Array definition:
var arr = [4, 2, 7, 6, 8];

// Traditional for loop:
for(let i = 0; i < arr; i++) {
    console.log(arr[i]);
}

// Modern for loop:
for(let n of arr) {
    console.log(n);
}

// Hypermodern for loop:
arr.forEach( n => {
    console.log(n);
});
```
We also discussed the Array length property.

You need parentheses when accessing a method, even if there are no parameters:
```
var i = a.indexOf("page");
// or
a.sort( );
```
The difference in accessing an Array method vs. an Array property:
Don't use parentheses when accessing a property, for example: a.length.-->

Look up these Array methods in the W3Schools documentation:

push  pop  shift  unshift  slice  splice

Try out these methods using REPL. Answer: Here is our REPL session from class:

> var a = [3, 6, 4, 5, 7];
undefined
> a.pop( )
7
> a
[3, 6, 4, 5]

> var a = [3, 6, 4, 5, 7];
undefined
> a.push(9);
6
> a
[3, 6, 4, 5, 7, 9]

> var a = [3, 6, 4, 5, 7];
undefined
> a.shift( )
3
> a
[6, 4, 5, 7]

> var a = [3, 6, 4, 5, 7];
undefined
> a.unshift(9);
6
> a
[9, 3, 6, 4, 5, 7]
> a.shift( );
9
> a
[3, 6, 4, 5, 7]
> a.splice(1, 3, 97, 98]
[6, 4, 5]
> a
[3, 97, 98, 7]

Practice Quiz 6a

Take Practice Quiz 6a.

Embedded JavaScript Files

EJS means Embedded JavaScript, which means JavaScript code that is inserted into an HTML file and is converted to pure HTML by a templating engine.
One of the strengths of Express is its ability to work with templating engines.
The ejs Express package is the most popular templating engine, but there are several others, including
Handlebars.js Mustache.js Underscore.js Pug.js
JavaScript in EJS files uses the <% ... %> and <%= ... %> delimiters.
Use the <% ... %> delimiters for JavaScript code that simply executes and has no return value.
Use the <%= ... %> delimiters for JavaScript code that does have a return value, which is inserted and displayed in the EJS document.

LarryOwesMe Example.

Create a project folder named larry-owes-me.
Create a Node project: npm init
Install Express and EJS: npm i express ejs

Create this main.js script:

const express = require("express");
const app = express( );

// Set View Engine to EJS
app.set("view engine", "ejs");

app.get("/", (q, r) => {
    r.render("index");
});

app.listen(3000, ( ) => {
    console.log("Listening on Port 3000.");
});

Create a subfolder named views.

In the views folder, create this index.ejs file:

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <h1>I Owe Larry</h1>
        <% let name = "Larry"; 
           let amt = 258.61 %>
        <p><%= name %> owes me $<%= amt %>.</p>
    </body>
</html>

Start the server: node main.js
View the browser output using this URL:
```
localhost:3000/
```

Embedded JavaScript works well with server-side apps because the EJS page can receive content from the server app, as can be seen with this modified LarryOwesMe Example. Here are the modified main.js and index.ejs files so that the EJS file obtains its local variables in an object from the main.js script:

-------------------------------------------------
// Modified main.js script:
const express = require("express");
const app = express( );

// Set View Engine to EJS
app.set("view engine", "ejs");

// Set the data to pass to the EJS page:
var firstName = "Larry";
var amtOwed = 258.61;
// The previous two lines can be omitted if 
// the values of firstName and amtOwed are hardcoded
// into the r.render statement as shown on the line
// following it.

// Execute if requested route is /.
app.get("/", (q, r) => {
    r.render("index", { name: firstName, amt: amtOwed });
    // r.render("index", name: "Larry", amt: 258.51 });
});

app.listen(3000, ( ) => {
    console.log("Listening on Port 3000.");
});
-------------------------------------------------
<!DOCTYPE html>

<!-- Modified EJS file index.ejs. -->

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <h1>I Owe Larry</h1>
        <p><%= name %> owes me $<%= amt %>.</p>
    </body>
</html>
-------------------------------------------------

Start the server: node main.js
View the browser output using this URL:
```
localhost:3000/
```

The Magic8Ball Example

Create an Express project folder named magic-8ball.
Create this main script: main.js
Create an Express project with npm init.
Install Express with npm i express.
Install the Ejs package with npm i ejs.
Create a views folder in your Express project folder.
Place these EJS files in the views folder:
magic-8ball.ejs route-not-found.ejs
Run your Express project using node main.js.
View your app in a browser using this URL:
```
localhost:3000/prediction
```