IT 238 -- Jan 9, 2024 Notes

To Lecture Notes

IT 231 -- Jan 9, 2024

About IT 231

IT 130 is the prerequisite for IT 231.
For web pages, use
- HTML to specify content,
- CSS to specify layout and presentation,
- JavaScript to specify behavior.
IT 231 is a server-side programming class. The emphasis is on using Node.js and Express.js to serve HTML content on a localhost server.
Three reasons why students do not do well on projects IT 231:
1. waiting too long before starting projects,
2. attempting to complete projects before viewing the course videos and notes,
3. not asking for help when needed on projects.

Course Website

Announcements Lecture Notes Documents Projects Exam Info Prof Info Syllabus

Course Topics

Review of HTML and CSS
Review of JavaScript:
Variables Control Structures Functions
Executing JavaScript with Node.js
New JavaScript constructs:
Arrays Object Literals Anonymous Functions Modules
Serving Web content with Node.js
Simplifying routes with Express.js
Using embedded JavaScript in .ejs files.
Using and modifying data in JSON files.

Server-side vs. Client-side Programming

Client-side programming is writing JavaScript scripts that are invoked from an HTML page, like this:
```
<script>
// JavaScript script lines go here.
</script>
```
or
```
<script src="myscript.js"></script>
```
Some of you have already taken IT 238, which is a second course in client-side programming.
Client-side programming allows the possibility of dynamic webpages, based on JavaScript calculations.
Server-side programming is writing scripts that execute on the server. These scripts
1. wait for client request messages and process them when they arrive,
2. when a client request arrives, the server-side code responds to the request, and replies to the client web browser with an HTTP response message.
Server-side code is written in a variety of languages. Here are some of them:
PHP Ruby Python C# Java and JSP JavaScript.
Server-side code written in JavaScript usually uses Node.js, which we start discussing next week.
Reference: www.geeksforgeeks.org/server-side-client-side-programming/

Practice Quizzes

Starting on Thursday, Jan 11, you will take a D2L Practice Quiz during each class meeting. If you are in the async section, a practice quiz taken on Thursday closes on Sunday, 10 days later. A practice quiz taken on Tuesday closes on Thursday, 9 days later. You are allowed three attempts for each practice quiz.
Today the Syllabus Quiz is posted. Read the class syllabus, then take this quiz. Like the practice quizzes, you are allowed three attempts.

Review Questions

What does HTML mean? List the HTML tags that you know.

Details: some newer HTML commands. Commands new to HTML5 are marked with *.
<abbr> <area> <article>* <aside> <audio> <base> <bdi>* <bdo> <blockquote> <canvas> <caption> <cite> <code> <col> <colgroup> <data>* <datalist> <dd> <del> <details>* <dfn> <dialog>* <dl> <dt> <embed>* <fieldset> <figcaption> <figure>* <footer>* <header>* <hgroup>* <ins> <kbd> <keygen>* <legend> <main>* <map> <mark>* <menu> <menuitem>* <meter>* <nav>* <noscript> <object> <optgroup> <option> <output>* <param> <picture>* <progress>* <q> <rp>* <rt>* <ruby>* <s> <samp> <section> <small> <source>* <summary>* <svg>* <tbody> <template>* <tfoot> <thead> <time>* <track>* <var> <video>* <wbr>*

Answer: HTML means hypertext markup language.
Here are some frequently used HTML tags:
<!DOCTYPE html> <html>
<head>
    <title> <style> <link> <script> <meta>
    <br> <hr> <div> <span>
<body>
    <p> <h1> <h2> <h3> <h4> <h5>
    <ul> <ol> <li>
    <table> <header> <footer> <tr> <th> <td>
    <a> <img> <input> <label> <button> <select>
    <span>
What is the root node for an HTML file?
Answer: The root element is the element that contains all of the content on the HTML page; it is the <html> element.
List the HTML entities that you know. Two examples of entities are > and & Answer:
```
&lt; &gt; &amp; &quot; &apos; &nbsp;
&alpha; &beta; &gamma;
```
The entities α β γ look like the corresponding Greek letters when rendered on an HTML page:
α β γ
Here is a W3 Schools reference to HTML Entities:
www.w3schools.com/html/html_entities.asp
What does CSS mean? List the CSS properties that you know.

Details: CSS properties new to CSS3:
align-content align-items align-self animation backface-visibility background-clip background-origin background-size border-bottom-left-radius border-bottom-left-radius border-image border-radius border-top-left-radius border-top-right-radius box-shadow box-sizing column columns flex font-size-adjust font-stretch justify-content opacity order outline-offset overflow perspective resize tab-size text-align-last text-decoration-color text-decoration-line text-decoration-style text-justify text-overflow text-shadow transform transition word-break word-wrap

Answer: CSS means cascading style sheets.
Here are some commonly used CSS properties:
```
font-family  font-size  font-weight  font-style
color  background-color  text-align vertical-align
```

Set up an HTML page that uses some of the tags that you know from Exercise 1. View it with the Chrome or Edge browser. Answer:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Exercise 5</title>
        <meta charset="utf8">
    </head>

    <body>
        <h1>Exercise 5</h1>

        <p>This is a test paragraph.</p>

        <h1>Cities of origin</h1>
        <ol>
            <li>Henderson, NE</li>
            <li>Mundelein, IL</li>
            <li>Skokie, IL</li>
            <li>Oak Park, IL</li>
        </ol>

        <h1>Numbers in Different Languages</h1>
        <table>
            <tr> 
                <th>English</th>
                <th>French</th>
                <th>German</th>
            </tr>
            <tr>
                <td>One</td>
                <td>Un</td>
                <td>Eins</td>
            </tr>
            <tr>
                <td>Two</td>
                <td>Deux</td>
                <td>Zwei</td>
            </tr>
            <tr>
                <td>Three</td>
                <td>Trois</td>
                <td>Drei</td>
            </tr>
            <tr>
                <td>Four</td>
                <td>Quatre</td>
                <td>Vier</td>
            </tr>
            <tr>
                <td>Five</td>
                <td>Cinq</td>
                <td>F&uuml;nf</td>
            </tr>
        </table>

        <h1>Image of Puppy</h1>
            <img src="images/puppy.jpg">
    </body>
</html>

Here is the HTML page index.html, defined by the preceding source code.