IT 231 -- Oct 19, 2023 Notes

IT 231 -- Feb 15, 2024

Review Exercises

What is the difference between the JavaScript statements
```
let n = 329;
```
and the statement
```
var n = 329;
```
Answer: A variable defined using var is valid in the function where it is defined. A variable defined using let is only valid in the block where it is defined. (A block consists of lines code enclosed in curly braces. Here are some examples:
```
{
    var n = 123;
}
console.log(n);
// Output:
123

{
    let m = 123;
}
console.log(m);
Uncaught ReferenceError: m is not defined.
```
What does the nodemon package do?
Answer: The nodemon package automatically restarts the node server when a change is made to the main.js script.
What does the Node command npx do?
Answer: it executes a Node package.
What do these Express response methods do?
```
send  render
```
Answer: send sends a string to the browser,
sendFile sends the contents of an HTML file to the browser,
render sends the contents of an EJS file from the views folder to the browser.
What does the file extension .ejs mean?
Answer: Embedded JavaScript.
Write a hyperlink that selects the /specials route. Answer:
```
<a href="/specials">Specials</a>
```
Write an image element that displays the image eiffel-tower.jpg on an HTML or EJS page. This image is located in the static folder public/images. Answer:
```
<img src="/images/eiffel-tower.jpg" alt="Eiffel Tower">
```
Write a link tag that links the current page to the external style sheet styles.css located in the static folder public/css. Answer:
```
<img src="/images/eiffel-tower.png" alt="Eiffel Tower">
```

MeetTheFlintstones1 Example. The following source code files have errors. Fix the errors and use these files to implement the Express project meet-the-flintstones. Place these images in the folder public/images: fred.jpg and wilma.jpg.

----- Source code file: main.js -------------------------
<!DOCTYPE html>
const express = import("express");
const path = require("path");
const app = express;
app.use(express.public("static"));
app.get("/fred", (r, q) => {
    res.render("fred.ejs");
});
app.post("/wilma", (q, r) => {
    q.render("views/wilma);
});
app.listen(3000, ( ) -> {
    console.log("Server started; listening on port 3000");
);

----- Source code file: views/fred.ejs -----------------
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Meet Fred Flintstone<title>
        <link ref="stylesheet" src="css/styles.css">
    </head>
    <body>
        <h1>Meet Fred Flintstone</h1>
        <img href="images/wilma.jpg"><br><br>
        <a src="fred">Meet Fred Flintstone</a>
    </body>
</html>

----- Source code file: views/wilma.ejs ----------------
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Meet Wilma Flintstone</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>Meet Wilma Flintstone</h2>
        <img src="image/wilma.png"><br><br>
        <a href="\fred">Meet Fred Flintstone</a>
    </body>
</html>

----- Source code file: public/css/styles.css -----------
body { backgroundColor: E0E0FF;
       color: #000000;
       font: 100% verdana san-serif; }
h1 { color: #000080;
img { width: 150; height: 200; )

---------------------------------------------------------

Answer: Here are the corrected meet-the-flintstones files.

Static Routes and Pages

StaticRoutes Example. To be able to access other files with the HTML code in a webpage, static routes are used.
A static page is a pre-rendered page that is typically cached and delivered using a content delivery network (CDN).
A dynamic page is delivered using a dynamic route in real-time at the time of the request by the server.
Steps to implement the StaticRoutes Example:
1. Create a folder for the example named static-pages.
2. Open a Command Prompt or Terminal Window and navigage to the static-pagess folder.
3. Initialize the Node project:
```
> npm init
```
  Set the startup script to main.js.
4. Install Express and Nodemon:
```
> npm i express nodemon
```
In the static-routes folder, create a subfolder named public and place these files in this folder:
index.html contact-us.html specials.html
eiffel-tower.png route-not-found.html
Create this main.js script.
Run the static-routes app:
```
> node main.js
```

Practice Quiz 5b

Take Practice Quiz 5b.

Tutorial 4 -- Alternate Version

Complete Tutorial 4b -- Alternate Version.

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 JavaScript document.

IOweLarry Example.

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

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 Magic8Ball Example.