IT 238 -- Apr 7, 2025 Notes

IT 238 -- Apr 7, 2025

Review Exercises

What is the folder structure on the studentweb server for Project 0?
Answer: indentation means subfolder --

public_html
    it238
        index.html
        styles.css
        myimage.jpg
        proj1a
            index.html
        proj1b
            index.html

What is a stub page?
Answer: a stub page is a placeholder the actual page (in this case your proj1a or proj1b index.html page. The stub page is used to check if the hyperlinks from the Project 0 index page to the stub page and from the stub page back to the Project 0 index page work. These stub pages will be replaced when Project 1a and 1b are completed.
What is an entity? What are some common HTML entities that you know?
Answer: An HTML entity is a symbol that cannot be directly represented by a keyboard character. It is of the form &entity_name; Here are some common entities:
```
Entity   Symbol
&lt;       <
&gt;       >
&amp;      &
&quot;     "
&apos;     '
&nbsp;   nonbreaking space
&beta;     β  (Greek letter beta)
&rarr;     →  (right arrow)
&ldquo;    “  (left double quotes)
```
You can look up other entities as needed. Here is a reference that contains the complete list of HTML entities:
https://www.freeformatter.com/html-entities.html.
The HTML pages page1.html and page2.html are stored on the server in this directory structure:
```
            foldera 
           /   |   \
     folderb s.css page1.html
      /
page2.html
```
1. Add a link to page1.html with target page2.html. Show Page 2 in a new window. Answer:
  <a href="folderb/page2.html" target="_blank">
2. Add a link to page2.html with target page1.html. Show Page 1 in a new window. Answer:
  <a href="../page1.html" target="_blank">
You upload your Project 0 to the studentweb server and try to view it in a browser using this URL:
```
https://studentweb.cdm.depaul.edu/ssmith/index.htm
```
However, you obtain this message:

Not Found
The requested URL /~ssmith/index.htm was not found on this server.
What might be wrong?<
Answer: You might not have uploaded your files to the public_html folder. Perhaps you misspelled a folder or file name, for example, maybe index.htm is spelled as index.html.
What is wrong with this address element:
```
<a href="/target.html">Go to Target Page</a>
```
Answer: a relative URL should not start with a slash (/); it should just be href="target.html".

What do these four shortcut styles do?

td { padding: 5px 10px 15px 20px; }
Answer: 5 pixels padding on top; 
10 pixels padding on the right;
15 pixels padding on the bottom; 
20 pixels padding on the left.
(The amount of padding specified starts 
at the top and goes around clockwise.)

td { padding: 5px 10px 15px; }
Answer: 5 pixels padding on top; 
10 pixels padding on the left and right;
15 pixels padding on the bottom.

td { padding: 5px 10px; }
Answer: 5 pixels padding on top; 
10 pixels padding on the left and right;
15 pixels padding on the bottom.

td { padding: 5px; }
Answer: 5 pixels padding on all sides.

How you define a textfield that looks like this?

Answer: <input type="text">

What is JavaScript?

In September 1995 JavaScript was created in 10 days by Brendan Eich of Netscape Communications.
It is a lightweight scripting language, used to build websites -- about 1.52 billion of them, 95% of all websites.
Originally, the name of JavaScript was Mocha. It was designed as a web scripting companion to Java.
The name Mocha was changed to LiveScript for marketing purposes.
In 1998, AOL acquired Netscape and formed an alliance with Sun Microsystems to develop web software. At that time that the name of LiveScript was changed to JavaScript. This was a marketing ploy, based on the popularity of Java.
JavaScript and Java are very different, but the two languages have many syntax elements in common.
ECMAScript (starting in 1997) is a standard for JavaScript, which is meant to ensure the interoperability of web pages across different browsers. ECMA means European Computer Manufacturers Association.

JavaScript Output

Hello World Example
Here are four ways in JavaScript to output text:
1. Write to the body of the browser
  
  Try this HTML code in a web page:
```
<!DOCTYPE html>
<html>
    <body>
        <script>
        document.writeln("Hello, World.");
        </script>
    </body>
```
2. Write to the Browser Debugging Console
  
  Using the Chrome Browser, click on the three dots icon in the upper right corner;
  Select More tools >> Developer tools.
  In the HTML code for Item 1, replace the line
```
document.writeln("Hello, World.");
```
  with
```
console.log("Hello, World.");
```
  Refresh the browser. Writing to the browser console is useful for debugging.
3. Display a popup window
  
  In the HTML code for Item 1, use
```
alert("Hello, World.");
```
  instead of
```
console.log("Hello, World.");
```
4. Display Output in a Textfield
  
  You already know how to do this from IT 130. We will look at other possibilities this later.

Practice Quiz

Take PracticeQuiz2a.

Functions

A function is a set of statements designed to perform a task.
A function must be called or invoked to execute the statements.

Test this function that converts a length from inches to centimeters:

// BasicFunction Example
// Function definition:
function inToCm(inches) {
    cm = inches * 2.54;
    return cm;
}

// Function test:
var inches = prompt("Enter length in inches", "0");
var cm = inToCm(inches);
document.writeln("Length in cm: " + cm);

// If input is 2, the output is 5.08

Projects 1a and 1b

Look at the Project 1a and Project 1b Descriptions.

Practice Problems

Check the output of these statements:
```
document.writeln("abc");
document.writeln("def");
```
Why are the outputs on the same line? I thought that writeln puts a newline character (\n) at the end of its output. Place these statements in this test script before viewing the HTML page:
```
<html>
    <body>
        <script>
        // Copy JavaScript code to test here.
        </script>
    </body>
</html>
```

Separate the code for this example into separate HTML, CSS, and JavaScript files:

<!DOCTYPE html>
<!-- Birthday Riddle Example -->
<html>
    <head>
        <title>Birthday Riddle</title>
        <style>
        body { background-color: #FFE0E0;
               color: navy; font-family: verdana, sans-serif;
        }
        </style>
        <script>
        function showAnswer( ) {
            var para = document.getElementById("p2");
            para.innerHTML = 
                "Answer: December 31; today is January 1.";
        }
        </script>
    </head>
    <body>
        <h1>Birthday Riddle</h1>
        <p id="p1">Riddle: The day before yesterday I was 21, 
           and next year I will be 24. When is my birthday?</p>
        <p id="p2"></p>
        <input type="button" value="Show Answer" 
               onclick="showAnswer( )">
    <body>
</html>

Answer:
---- index.html ----------------------
<!DOCTYPE html>
<!-- Birthday Riddle Example -->
<html>
    <head>
        <title>Birthday Riddle</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Birthday Riddle</h1>
        <p id="p1">Riddle: The day before yesterday I was 21, 
           and next year I will be 24. When is my birthday?</p>
        <p id="p2"></p>
        <input type="button" id="btn1" value="Show Answer">
    <body>
</html>

---- styles.css ----------------------
/* BirthdayRiddle Example */
body { background-color: #FFE0E0;
    color: navy; font-family: verdana, sans-serif;
}

---- script.js -----------------------
// BirthdayRiddle Example
function showAnswer( ) {
    var para = document.getElementById("p2");
    para.innerHTML = 
        "Answer: December 31; today is January 1.";
}

function init( ) {
    var button = document.getElementById("btn1");
    button.onclick = showAnswer;
    // or
    // button.addEventListener("click", showAnswer);
}

window.onload = init;
// or
// window.addEventListener("load", init);
--------------------------------------

An explanation of the riddle:

Date	My Age	Description
Dec 30, 2024	21	Day Before Yesterday
Dec 31, 2024	22	My Birthday Last Year
Jan 1, 2025	22	Today
Dec 31, 2025	23	My Birthday This Year
Dec 31, 2026	24	My Birthday Next Year