IT 238 -- May 4, 2025 Notes

IT 238 -- May 4, 2026

Practice Exercises

What do these four document methods do:
```
querySelector  querySelectorAll  createElement  appendChild
```
querySelector -- Creates a JavaScript object that represents the first element specified by the selector. Selectors can be element selectors (e.g., "input"), id selectors (e.g., "#btn1"), or class selectors (e.g.,"red")
querySelectorAll -- Creates an array of JavaScript objects that represent all of the elements specified by the selector.

createElement -- Creates a JavaScript object from scratch that represents an HTML element specified by an element selector, e.g.,
```
var paraObj = document.createElement("p");
```
appendChild -- Adds an element to the DOM tree by adding it as the last child of the parent object, e.g.,
```
olObj.appendChild(liObj);
```

Modify the exercise from last time (Mar 2), by adding this line at the bottom of the body showing which questions were answered correctly, for example:

1. Correct 2. Incorrect 3. Correct

Answer: add this empty paragraph to the end of the body:

<p id="details"></p>

Modify the script.js file to look like this:

function computeScore( ) {
    const correctAnswers = ["", "b", "c", "a"];
    var numCorrect = 0;
    var details = "";
    for(var i = 1; i <= 3; i++) {
        var isCorrect = false;
        for(var j = 1; j <= 3; j++) {
            var rb = document.getElementById("" + i + j);
            if (rb.checked && rb.value == correctAnswers[i]) {
                numCorrect++;
                isCorrect = true;
            }
        }
        var word = isCorrect ? "Correct" : "Incorrect";
        details += `${i}: ${word} `;
    }
    var outputPara = document.getElementById("numcorrect");
    outputPara.innerHTML = "Number correct: " + numCorrect;
    var detailsPara = document.getElementById("details");
    detailsPara.innerHTML = details;
}

function init( ) {
    var button1 = document.getElementById("btn1");
    button1.addEventListener("click", computeScore);
}

window.addEventListener("load", init);

Project 4

Look at the Project 4 Description.

HTTP

HTTP means Hypertext Transfer Protocol.
HTTP version 0.9 was invented by Tim Berners-Lee in 1989. It was designed to request hypertext (text with links, but no images or other multimedia) pages from a server.
Tim Berners-Lee also invented the HTML markup language.
HTTP version 1.0 was introduced in May 1996. It could handle not only simple text documents, but a variety of file formats using the Multipurpose Internet Mail Extentions (MIME) standard.
The current version of HTTP is 2.0. It was released in 2015, and is used by over 50% of current websites.
HTTP version 3.0 is the proposed successor to HTTP/2.0. It is already in use by some servers.
Here are the steps for obtaining a webpage from a server:
1. The browser goes to the DNS server, and finds the real address of the server where the website lives. The real IP address of
```
studentweb.cdm.depaul.edu
```
  is
```
216.220.181.34
```
2. The browser sends an HTTP request message to the server, asking it to send a copy of the webpage to the client. This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP.
3. If the server approves the client's request, the server sends the client a "200 OK" message, which means "You can look at that website. Here it is." The server then starts sending the website's files to the browser as a series of small chunks called data packets.
4. The browser assembles the small chunks into a complete web page and displays it to you.

In the early days, raw HTTP commands could be issued like this:

GET /test.txt http/1.0

The response would look something like this:

HTTP/1.1 302 Found
Date: Thu, 19 Feb 2021 02:50:55 GMT
Server: Apache/2.0.53 HP-UX-Apache-based_Web_Server (Unix) PHP/4.3.8
Last-Modified: Tue, 27 Oct 2015 14:39:09 GMT
ETag: "16896-61d-408dd700"
Accept-Ranges:Bytes
Content-Length: 18
Connection: close
Content-Type: text/html

Content: This is a test.

Currently, we do not request web pages directly through HTTP; a browser issues the HTTP commands for us.
Actually, most modern browsers do not use traditional HTTP, they use HTTPS instead (HTTP Secure). The difference is that HTTPS encrypts the data exchanged by the browser and the server. The result is that HTTPS is more secure than HTTP.

Here is a DOS PowerShell session that invokes the HTTP GET command.:

PS C:\Users\sjost> Invoke-WebRequest facweb.cdm.depaul.edu/sjost/test.txt

StatusCode        : 200
StatusDescription : OK
Content           : ï»¿This is a test.
RawContent        : HTTP/1.1 200 OK
                    Accept-Ranges: bytes
                    Content-Length: 18
                    Content-Type: text/plain
                    Date: Fri, 19 Feb 2021 20:50:26 GMT
                    ETag: "6590583dc510d11:0"
                    Last-Modified: Tue, 27 Oct 2015 14:39:09 GMT
                    Serve...
Forms             : {}
Headers           : {[Accept-Ranges, bytes], [Content-Length, 18], 
                     [Content-Type, text/plain], [Date, Fri, 
                     19 Feb 2021 20:50:26 GMT]...}
Images            : {}
InputFields       : {}
Links             : {}
ParsedHtml        : mshtml.HTMLDocumentClass
RawContentLength  : 18

If you use a Mac, which runs the Unix operating system, try using curl instead of Powershell:

> curl -v http://facweb.cdm.depaul.edu/sjost/test.txt

You should get output something like this:

* Trying 216.220.181.39:80...
* TCP_NODELAY set
* Connected to facweb.cdm.depaul.edu (216.220.181.39) port 80 (#0)
> GET /sjost/test.txt HTTP/1.1
> Host: facweb.cdm.depaul.edu
> User-Agent: curl/7.68.0
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Content-Type: text/plain
< Last-Modified: Tue, 27 Oct 2015 14:39:09 GMT
< Accept-Ranges: bytes
< ETag: "6590583dc510d11:0"
< Server: Microsoft-IIS/10.0
< X-Powered-By: ASP.NET
< Date: Mon, 02 Oct 2023 00:25:08 GMT
< Content-Length: 18

Some common HTTP commands
- GET -- Requests a specified document. A header is returned with document meta-information followed by the actual document. This is the most commonly used HTTP command.
- HEAD -- Asks for the header that would be sent in response to a GET request, but without the document. Used for testing.
- POST -- Submits user data (often user supplied data on an HTML form) to be processed by the server.
- PUT -- Uploads the specified file.
- DELETE -- Deletes a file on the server (rairly used).
- TRACE -- Echoes back the specified request so the client can see what intermediate servers are adding or removing from the request.
- OPTIONS -- Returns the HTTP methods that the server supports. Used for testing.
- CONNECT -- Used to connect to a proxy that can change to being an SSL (Secure Socket Layers) tunnel.

Submission Forms

We will discuss this section on Mar 9.

A submission form is used to submit data from the client back to the server.
The data is sent in the HTML controls that we have been using in this class, for example, textfields, textareas, buttons, radio buttons, checkboxes, dropdown menus.

To send data back to the server in HTML controls, the controls must be placed on a form that looks like this:

<form action="http://server-site.org/accepting-page.php" 
      method="get">
    // HTML controls go here.
    <input type="submit">
</form>

The action is the page on the server that will receive the data from the submit page. This page often contains statements written in a server-side language, such as PHP, C#, or Ruby.
Python, Java, and even JavaScript can be used as server-side languages.

Here is a submit form that contains three textfields and a submit button:

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>HTML Submit Page</title>
    </head>

    <body>
        <h1>HTML Submit Page</h1>
        <form action="http://ectweb.cs.depaul.edu/sjost/response-get.php"
              method="get">
            <label for="fname">First Name</label><br>
            <input type="text" id="fname" name="fname"><br><br>

            <label for="gender">Gender</label><br>
            <input type="text" id="gender" name="gender"><br><br>
           
            <label for="age">Age</label><br>
            <input type="text" id="age" name="age"><br><br>

            <input type="submit" value="Submit Form">
        </form>
    </body>
</html>

Important: every HTML element on a form that contains data to submit to the server must contain a name attribute. For example:
```
<input type="text" id="age" name="age">
```
If the name attribute is submitted, this data will not be sent to the server when the form is submitted.

When the Submit Page button is clicked, this form is sent to the server using the GET method; the PHP page receives the information and displays it. Here is the source code of the PHP page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Response Page -- GET</title>
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <h2>Response Page -- GET</h2>
        <h3>PHP Page</h3>
        <p>fname : <?php echo $_GET["fname"]; ?></p>
        <p>gender : <?php echo $_GET["gender"]; ?></p>
        <p>age : <?php echo $_GET["age"]; ?></p>
    </body>
</html>

Try it out the Submit Page:
SubmitGet Example
Web Page
Notice the URL for the Response Page:
```
http://ectweb.cs.depaul.edu/sjost/response-get.php?fname=Steve&gender=M&age=59
```
When the GET method is used for passing parameters, the fields fname, gender, and age are passed to the response page in the URL. Although this is simple, it is a security risk.
A more secure method of passing data to the response page is to use the POST method. This passes data in the header of the webpage.

To use the POST method, change method="get" to method="post" in the form tag:

<form action="http://ectweb.cs.depaul.edu/sjost/get-response.php" method="post">

Also, in the PHP POST page, the GET variables prefix $GET_ is changed to the prefix $POST_
Try out the example using the POST method:
SubmitPost Example
Web Page

Form Validation -- Part A

We will discuss this section on Mar 9.

It is common with online forms to have required fields.

Suppose we have this submit form where name is a required field:

 <!DOCTYPE html>
<html lang="en">
    <body>
        <h1>Validating a Form for Presence</h1>
        <p>* means required field</p>
        
        <form name="form1" 
              action="https://ectweb.cs.depaul.edu/sjost/response-get.php"
              method="get">

            <label for="fname">*First Name:</label><br>
            <input type="text" id="fname" name="fname"><br><br>

            <label for="gender">Gender:</label><br>
            <input type="text" id="gender" name="gender"><br><br>

            <label for="age">Age:</label><br>
            <input type="text" id="name" name="age"><br><br>

            <input type="submit" value="Submit Form">
        </form>
    </body>
</html>

If the fname field is left blank, we want the submission to be cancelled when the submit button is clicked. We can accomplish this by adding the following script to the form:

 function validateForm(e) {
    var x = document.form1.fname.value;
    if (x == "") {
        alert("Name is a required field.");

        // Calling the preventDefault method
        // prevents the default behavior of
        // the submitting the form when the 
        // submit button is clicked.
        e.preventDefault( );
    }
}
function init( ) {
    var f = document.getElementsByName("form1");
    f[0].addEventListener("submit", validateForm); 
}
window.onload = init;

Here are three equivalent expressions:

var x = document.form1.fname.value;
var x = document.forms["form1"]["fname"].value;
var x = document.forms[0][0].value;

Instead of merely checking for the presence of a value in a form, we want to check that the value has a specified form. For this we need regular expressions, discussed in the next section.