To Lecture Notes

IT 238 -- Jan 13, 2025

Review Exercises

  1. 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
  2. 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.
  3. What is an entity? What are some common HTML entities that you know?
    Here is a reference that contains the complete list of HTML entities:
    https://www.freeformatter.com/html-entities.html.
    Answer: here are some commonly used entities:
    Entity  Meaning
======  =======
&lt;       <
&gt;       >
&amp;      &
&nbsp;  Non-breaking space
&quot;     "
&apos;     '
&alpha;    α
&beta;     β
&gamma;    γ
&Delta;    Δ
  4. 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.
    2. Add a link to page2.htm with target page1.htm. Show Page 1 in a new window.
    Ans: Here is a zipfile of these folders and files: foldera.zip.
  5. You upload your Project 0 to the studentweb server and try to view it in a browser using this URL:
    http://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.
  6. 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".
  7. 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 the top and bottom;
10 pixels padding on the left and right.

td { padding: 5px; }
Answer: 5 pixels padding on all sides.
  8. How you define a textfield that looks like this?


    Answer:
    9. <input type="text">
    Here are some of the other type attribute values:
    button checkbox color date datetime-local email
file hidden image month number password radio
range reset search submit tel time url week

Practice Quiz

What is JavaScript?

JavaScript Output

Functions

Projects 1a and 1b

Practice Problems

  1. 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>
  2. Place a button on a web page that looks like this:



    The button should display the text "I've been clicked." when the button is clicked. Give three solutions:
    (a) using an onclick attribute in the <button> tag,
    (b) using the addEventListener method in an init method,
    (c) and setting the onclick
    Answer: here is the source code, including HTML code and JavaScript code, using the property of the button object that represents the button tag.
  3. 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);
--------------------------------------

Test Script

JavaScript Datatypes