IT 238 -- Mar 20, 2026 Notes

IT 238 -- Mar 20, 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 both examples.

// Example 1
// 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(); 
    }); 
});
// Answer:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example 1</title>
        <link rel="stylesheet" href="styles.css">

        <!-- defer means wait until the HTML page
             loads before executing the script -->
        <script src="script.js" defer></script>
    </head>
    <body>
        <h1>Example 1</h1>

        <input type="button" id="hide" value="Hide"><br><br>
        <input type="button" id="show" value="Show"><br><br>
        <p>This is the paragraph.</p>
    </body>
</html>
-----------------------------------------------
/* Source code: styles.css */
body { font-family: Geneva, Tahoma, Verdana, sans-serif;
font-size: 130%; 
font-weight: bold; }
-----------------------------------------------
// Source code: script.js
function hide( ) {
    var paraObj = document.querySelector("p");
    paraObj.style.display = "none"
}

function show( ) {
    var paraObj = document.querySelector("p");
    paraObj.style.display = "block"
}

var btn1Obj = document.querySelector("#hide") 
btn1Obj.addEventListener("click", hide)
var btn2Obj = document.querySelector("#show") 
btn2Obj.addEventListener("click", show)
-----------------------------------------------

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

Answer:
------------------------------------------------
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example 2</title>
        <style>
        input { background-color: #FFFFE0; }
        </style>
        <script>
        function focus(e) {
            e.target.style.backgroundColor = "#cccccc";
        } 

        function blur(e) {
            e.target.style.backgroundColor = "#333333";
        } 

        function init(e) {
            var inputArray = document.querySelectorAll("input");
            for(var inp of inputArray) {
                inp.addEventListener("focus", focus);
                inp.addEventListener("blur", blur);
            }
        }

        document.addEventListener("DOMContentLoaded", init); 
        </script>
    </head>
    <body>
        <h1>Example 2</h1>

        <input type="text" value="Input 1"><br><br>
        <input type="text" value="Input 2"><br><br>
        <input type="text" value="Input 3"><br><br>
    </body>
</html>
------------------------------------------------

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.

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
```
The discrepancy is that we would get 0 for output if we were at Greenwich Mean Time. Since we are at Central Standard Time, we are 6 hours earlier. If we convert the number 21,600,000 to hours, we should get 6 hours:
```
             21,600,000 msec
-------------------------------------- = 6 hours
60 sec/min * 60 min/hr * 1000 msec/sec
```

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.