IT 238 -- Jan 6, 2025 Notes

To Lecture Notes

IT 238 -- Jan 6, 2025

About IT 238

IT 130 is the prerequisite for IT 238.
For web pages, use
- HTML to specify content,
- CSS to specify layout and presentation,
- JavaScript to specify behavior.
Best practice is to put code for HTML, CSS, and JavaScript in separate files.
This is a requirement for class projects: 20% penalty if you don't put HTML, CSS, and JavaScript in separate files.
The file extensions are .html, .css, and .js.
IT 238 is a client-side programming class. The emphasis is on JavaScript programming.
Client-side programming means that JavaScript code is executed in the browser that displays HTML files with embedded JavaScript.
In IT 238, HTML and CSS will be covered as needed, but I assume that you can look up additional information as needed.
We will review HTML and CSS during the first week of this class.

Course Website

Announcements Lecture Notes Documents Projects Exam Info Prof Info Syllabus

Course Topics

Review of HTML and CSS
Review of JavaScript:
Variables Functions Control Structures
JavaScript Arrays, Maps, Objects, JSON, Classes
Document Object Model (DOM), Forms, Events
Effects such as fade-in/fade-out.
Submission Forms.
Regular Expressions
JavaScript Libraries (for example jQuery and Angular)
Drawing and Animation
If time permits: Asynchronous Programming, Promises

Review Questions

Who designed the first version of HTML?
Answer: Tim-Berners Lee. He also designed the first version of HTTP.
What does HTML mean? List some HTML tags that you know.

Details: some newer HTML commands. Commands new to HTML5 are marked with *.
<abbr> <address> <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> <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: Here are some frequently used HTML tags:
<!DOCTYPE html> <html> <body> <head>
Tags included in the <head> tag:
<meta> <title> <link> <style> <script>
Tags included in the <body> tag:
<div> <span> <br> <h1> <h2> <h3>
<p> <ul> <ol> <li> <table> <tr> <td> <th>
<a> <img> <input> <button> <label>

Set up an HTML page that uses tags that you know from Exercise 2. Upload your page to the studentweb server.
Answer: Here is the HTML file that we uploaded to the server:

<!DOCTYPE html>
<!-- Source code for exercise3.html --/>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercise 3</title>
</head>
<body>
    <h1>Exercise 3</h1>
    <p>This is a test paragraph.<br>
       This is the second line.</p>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
    <table>
        <tr>
            <th>State</th>
            <th>Capitol</th>
            <th>State Flower</th>
        </tr>
        <tr>
            <td>Illinois</td>
            <td>Springfield</td>
            <td>Common Blue Violet</td>
        </tr>
        <tr>
            <td>Iowa</td>
            <td>Springfield</td>
            <td>Iowa City</td>
        </tr>        
        <tr>
            <td>Indiana</td>
            <td>Indianapolis</td>
            <td>Peony</td>
        </tr>
    </table>
</body>
</html>

The directory structure on the studentweb server should look like this. Indentation means subfolder.

public_html
    it238
       exercise3.html

This is the URL for accessing this file on studentweb, if ssmith is your campusconnect username:

https://studentweb.cdm.depaul.edu/ssmith

What is the root node of an HTML page?
Answer: the html node defined by the <html> and </html> tags.
How does HTML5 differ from earlier versions of HTML?
Ans: Simplified validation tag <!DOCTYPE html>
many new tags, runs on newer browsers,
greater support for audio and video,
support for vector scalable graphics and drawing in a canvas.
What does CSS mean? List some 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: Here are some common CSS properties:
color background-color font-family font-size font-weight font-style
margin text-align text-decoration vertical-align
width height list-style-type background-image
In this CSS style:
```
h2 { color: navy; }
```
identify the property, selector, and value.
Answer: h2 is the selector, color is the property, navy is the value.
What is HTTP? List some other web transmission protocols that you know.
Answer: HTTP means Hypertext Transmission Protocol. Other protocols are:
HTTPS (Hypertext Transmission Protocol Secure),
FTP (File Transfer Protocol),
SFTP (FTP over Secure Shell),
FTPS (FTP over Secure Sockets Layer / Transport Layer).

Use this URL in FileZilla for connecting to the studentweb server:
```
sftp://studentweb.cdm.depaul.edu
```
Also use your campusconnect username and password. A port number is not needed.

Practice Quiz 1a

Take Practice Quiz 1a.

Project 0

Look at the Project 0 Description.
Requirement for all projects: the HTML, CSS, and JavaScript code must each be in separate files. You can named these files index.html or index.htm, styles.css, and script.js if you wish--20% deduction if this requirement is not followed.

Here is the sample Project 0 that we will upload to the studentweb server:

Proj0Index Example

This project will be discussed next class on Jan 8.

URL: http://studentweb.cdm.depaul.edu/sjost/it238/index.html

Zipfile: proj0smith.zip

File and Folder Layout. Indentation indicates subfolder:

public_html
    it238
        index.html  <-- index of proj1a and proj1b
        styles.css  
        proj1a
            index.html  <-- stub files
            script.js
            styles.css  <-- if needed
        proj1b      
            index.html  <-- stub files
            script.js
            styles.css  <-- if needed

Some HTML5 Examples

These examples were not discussed in class on Jan 6, but are included here for your reference.

Details Example
Use a details element to hide information:
Web Page Source Code
Table Example
A table with HTML5 elements:
Web Page Source Code
Iframe Example
Use an <iframe> tag to display text:
Web Page Source Code
Drawing1 Example
Draw two shapes (circle and polygon) using scalable vector graphics (SVG).
Web Page Source Code
Drawing2 Example
Drawing can also be accomplished using JavaScript:
Web Page Source Code

Some CSS Examples

AbsolutePositioning Example
Display div sections using absolute positioning and a background image.
Web Page Source Code
Float Example
Use the CSS float property to allow text to flow around an image.
Web Page Source Code