To Lecture Notes

IT 238 -- Jan 13, 2025

Review Exercises

  1. Look at the two CSS Examples on the Examples Page.
  2. 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.
  3. 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>
    Answer: Just because the HTML code goes to a new line doesn't mean that the browser will display it on a new line. The \n character counts as whitespace that is eliminated by the browser. You need <br> to force the browser display to go to a new line:
    document.writeln("abc<br>");
document.writeln("def");
  4. List the JavaScript operators that you remember from IT 130.
    Arithmetic Operators:
+  -  *  **  /  %
** is exponentiation.

Comparison Operators:
==  ===  <  <=  >  >=  != !==

Logical Operators:
&&  ||  !

Arithmetic Operators:
=  +=  -=  *=  /=  %=

Increment/Decrement Operators:
++  --

Array Lookup Operator:
[ ]

Member Selection Operator:
.
  5. 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.
  6. 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
  7. Why is the label control needed? Why not just use HTML text?
    <label for="fname">First Name:</label><br>
<input id="fname">


    Answer: The label control has two effects: (1) when the label of a textfield is clicked, the focus goes to the corresponding textfield. Having the focus means that that when the user types at the keyboard, the typed text is entered in the textfield with the focus.
    (2) When a screen reader is running and a textfield is clicked or arrived at via tabbing, the contents of the textfield and the label of the textfield are read.
  8. What is the difference between these two HTML tags?
    <button id="btn1">Click Me</button>
<input type="button" id="btn1" value="Click Me">
    Answer: With the <button> tag, you can place additional HTML markup between the start and end tags like this:
    <button id="btn1"><strong>Click Me</strong></button>
    You can't put HTML markup in the value attribute of the <input> tag.
  9. Write a web page that looks like this:

    Test Button Click


    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.

What is JavaScript?

JavaScript Output

Practice Quiz

Test Script

JavaScript Datatypes

  1. number -- JavaScript numbers are represented as 64 bit (double precision) floating point numbers:
    35342, -8976, 0, 34.3827, -1.359, 4.565e16, -9.37e-31
    Try out this web page:
    <!DOCTYPE html>
<!-- MaxValue Example -->
<html>
    <body>
        <script>
        var n = 2;
        // Repeat for loop 11 times.
        for(var i = 1; i <= 11; i++) { 
            document.write(n + " ");
            n = n * n;
        }
        document.writeln("<br><br>");
        document.writeln(
            "<br>Maximum Number Value:<br>" + 
            Number.MAX_VALUE + "<br>");
        </script>
    </body>
</html>
// Output:
2 4 16 256 65536 4294967296 18446744073709552000 
3.402823669209385e+38 1.157920892373162e+77 
1.3407807929942597e+154 Infinity 

Maximum Number Value: 1.7976931348623157e+308
  2. The special values Infinity and NaN are also values of the Number datatype. Infinity is a numeric value that is larger that the largest legal Number value, which is 1.7976931348623157e+308. The value NaN is obtained from a numeric computation that does not produce a legal floating point value.
  3. Example:
    document.writeln(1.0e500 + " "); 
document.writeln(0 / 0 + " "); 
document.writeln(5 / "W" + " ");
// Output:
Infinity NaN NaN
  4. string -- A string of characters delimited by single or double quotes:
    'dog', "horse", 'supercalifragilisticexpialidocious', "243567", "!@#$%^&*()", ' ' (space), "" (null string)
  5. boolean -- true or false
  6. undefined -- Special value assigned to a variable that is declared, but not yet assigned a value.
  7. null -- Value assigned by the programmer to a variable to show that the variable has no value.
    Try out this statements in a script: 
    // Undefined Example
var s;
document.writeln(s + "<br>");
var t = null;
document.writeln(t + "<br>");
// Output:
undefined
null
  8. Two additional Java datatypes that we will not discuss are bigint and symbol.

Projects 1a and 1b

Functions

Some Math Methods

Control Structures