IT 238 -- Mar 2, 2026 Notes

IT 238 -- Mar 2, 2026

jQuery Practice Exercises

Here are some jQuery examples from the W3Schools jQuery Tutorial. Their URL is
https://www.w3schools.com/jquery/default.asp.
Translate each example into vanilla JavaScript.
Note: if the this keyword is used in a function, which refers sequentially to each of the items referenced by the selector, use the function keyword to define the function instead of arrow notation. To avoid confusion, we use the function keyword for all five examples.

// Example 1
// Use 5 paragraphs in HTML file.
$(function( ) { 
    $("p").click( function( ) {
        $(this).hide( ); 
    }); 
});

// Example 2
// Use buttons with captions "Hide" and "Show", 
// and also a paragraph with no ID.
$(function( ) { 
    $("#hide").click(function( ) { 
        $("p").hide( ); 
    }); 
    $("#show").click(function( ){ 
        $("p").show(); 
    }); 
}); 

// Example 3
// Use 3 input elements with type="text".
$(function( ) { 
    $("input").focus(function( ) {
        $(this).css("background-color", "#cccccc"); 
    }); 
    $("input").blur(function( ){ 
        $(this).css("background-color", "#333333"); 
    }); 
});

See the W3Schools site for the complete HTML files, which can be run interactively. Here are the HTML files with scripts (jQuery and Vanilla JS) that we looked at in class.

Other jQuery effects, such as fade and slide require animation when written in vanilla JavaScript. We we will discuss animation later.
Look at some of the exercises at the bottom of the jQuery Events section in the WSchools JavaScript tutorial.

Examples for Project 4

MathRiddles1 Example
Display three math riddles and answers in an HTML page like this.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>MathRiddles1 Example</title>
    </head>
    <body>
        <ol>
            <li><span id="r1">
                Why is 6 scared of 7?</span><br>
                <span id="a1">
                Because 7 8 9.</span>
                <button>Show Answer for Riddle 1</li>

            <li><span id="r2">
                How can you tell that the three fractions
                x/c, y/c, and z/c all live in a foreign country?</span><br>
                <span id="a2">
                Because they are all over cs.</span>
                <button>Show Answer for Riddle 2</li>

            <li><span id="r3">
                What did the repeating decimal number say to pi?</span><br>
                <span id="a3">
                Don't be so irrational.</span>
                <button>Show Answer for Riddle 3</li>
        </ol>
    </body>
</html>

The each answer is hidden, but can be displayed when the button for its riddle is clicked.
Web Page Source Code

MathRiddles2 Example
Same as the MathRiddles1 Example but without the buttons. Click a riddle to make its answer visible.
Web Page Source Code
MathRiddles3 Example
Same as MathRiddles2, but only use one click event handler. This event handler uses an event object to determine which riddle was clicked and then determines the answer to show from the ids of the riddle and answer.
Web Page Source Code
MathRiddles4 Example
Same as MathRiddles3, but no ids are used, only the classes .r for riddles and .a for answers. Use the document.nextElementSibling property to obtain the object representing the answer for the clicked riddle.
Web Page Source Code
ReadFromJSON Example
Place the JSON file riddles.json on your harddrive. The script then reads the riddles and answers from this JSON file and dynamically loads them into an ordered list.
Web Page Source Code
CrapsGame Example
Play the the dice game on the Web Page. A win is marked with a green check image; a loss is marked with a red X image. Here are the rules for Craps:
A player, called the shooter, rolls a pair of dice,
1. if the sum of the dice is 7 or 11, the player wins,
2. else if the sum of the dice is 2, 3, or 12, the player loses
3. otherwise the sum is recorded as the point and the player keeps rolling the dice,
4. if the player obtains the point again before rolling another 7, the player wins,
5. otherwise the player loses.
Try it out with this simulation:
Web Page Source Code

Project 4

Look at the Project 4 Description.

Write a script that computes the number of correct choices, where the correct answers are given as

const correctAnswers = ["b", "c", "a"];

Start with this HTML code for an ordered list:

<ol>
    <li>First Question.<br>
        <ol>
            <li><input type="radio" id="11" name="q1" value="a">
                Answer A.</li>
            <li><input type="radio" id="12" name="q1" value="b">
                Answer B.</li>
            <li><input type="radio" id="13" name="q1" value="c">
                Answer C.</li>
        </ol>
    </li>
    <li>Second Question.<br>
        <ol>
            <li><input type="radio" id="21" name="q2" value="a">
                Answer A.</li>
            <li><input type="radio" id="22" name="q2" value="b">
                Answer B.</li>
            <li><input type="radio" id="23" name="q2" value="c">
                Answer C.</li>
        </ol>
    </li>
    <li>Third Question.<br>
        <ol>
            <li><input type="radio" id="31" name="q3" value="a">
                Answer A.</li>
            <li><input type="radio" id="32" name="q3" value="b">
                Answer B.</li>
            <li><input type="radio" id="33" name="q3" value="c">
                Answer C.</li>
        </ol>
    </li>
</ol>
<button id="btn1">Compute Score</button>
<p id="numcorrect"></p>

Answer: Here are the complete HTML, CSS, and JavaScript files:

==================================================
<!DOCTYPE html>
<!-- Source code file: index.html -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <ol>
            <li>First Question.<br>
            <ol>
                <li><input type="radio" id="11" name="q1" value="a">
                    Answer A.</li>
                <li><input type="radio" id="12" name="q1" value="b">
                    Answer B.</li>
                <li><input type="radio" id="13" name="q1" value="c">
                    Answer C.</li>
           </ol>
       </li>
       <li>Second Question.<br>
           <ol>
               <li><input type="radio" id="21" name="q2" value="a">
                   Answer A.</li>
               <li><input type="radio" id="22" name="q2" value="b">
                   Answer B.</li>
               <li><input type="radio" id="23" name="q2" value="c">
                   Answer C.</li>
           </ol>
       </li>
       <li>Third Question.<br>
           <ol>
               <li><input type="radio" id="31" name="q3" value="a">
                   Answer A.</li>
               <li><input type="radio" id="32" name="q3" value="b">
                   Answer B.</li>
               <li><input type="radio" id="33" name="q3" value="c">
                   Answer C.</li>
          </ol>
      </li>
      </ol>
      <button id="btn1">Compute Score</button>
      <p id="numcorrect"></p>
    </body>
</html>
--------------------------------------------------
/* Source code file: styles.css */
ol ol { list-style-type: lower-alpha; }
--------------------------------------------------
// Source code file: script.js
function computeScore( ) {
    const correctAnswers = ["", "b", "c", "a"];
    var numCorrect = 0;
    for(var i = 1; i <= 3; i++) {
        for(var j = 1; j <= 3; j++) {
            var rb = document.getElementById("" + i + j);
            if (rb.checked && rb.value == correctAnswers[i]) {
                numCorrect++;
            }
        }
    }
    var outputPara = document.getElementById("numcorrect");
    outputPara.innerHTML = "Number correct: " + numCorrect;
}

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

window.addEventListener("load", init);
==================================================

The Date Class

The date class represents a date and time, accurate to the nearest millisecond.

Print the current date and time:

var d = new Date( );
document.writeln(d);
// Output:
Sun Feb 21 2021 10:11:22 GMT-0600 (Central Standard Time)

Print an arbitrary date. If not specified the time is midnight (00:00:00). Notice that for the month, 2 represents March, not February, because JavaScript month indices are zero-based.
```
var d = new Date(1978, 2, 18);
document.writeln(d);
// Output:
Sat Mar 18 1978 00:00:00 GMT-0600 (Central Standard Time)
```

Print an arbitrary date and time. The time is 24-hour time.

var d = new Date(1978, 2, 18);
document.writeln(d);
// Output: 
Sat Mar 18 1978 23:59:58 GMT-0600 (Central Standard Time)

The Date class has methods getYear, getMonth, getDay, getHours, getMinutes, getSeconds, and getTime.

The first six of these methods are what you expect:

var d = new Date( );
var yr = d.getFullYear( );
var mon = d.getMonth( );
var day = d.getDate( );
var hr = d.getHours( );
var min = d.getMinutes( );
var sec = d.getSeconds( );
document.writeln(`${yr} ${mon} ${day} ${hr} ${min} ${sec}`);
// Output: 2021 1 21 10 31 56

The getTime method is surprising. It is the number of milliseconds since midnight, Jan 1, 1970, which is the start of "Unix Time." Try it out:
```
var d = new Date( );
document.writeln(d.getTime( ));
```
Try this script. Can you figure out why you don't get 0 for output, since this is the Unix start date?
```
var d = new Date(1970,0,1);
document.writeln(d.getTime( ));
// Output: 21600000
```

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.