IT 238 -- Apr 6, 2026 Notes

IT 238 -- Apr 6, 2026

Review Exercises

What is the folder structure on the studentweb server for Project 0?
What is a stub page?
What is an entity? What are some common HTML entities that you know?
List the JavaScript operators that you remember from IT 130.
How you define a textfield that looks like this?

What is the difference between these two HTML tags?

<button id="btn1">Click Me</button>
<input type="button" id="btn1" value="Click Me">

Finish separating the source code for the BirthdayRiddle Example in the April 1 notes into .html, .css, and .js files.

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.

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>
```
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");
```
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.html with target page1.html. Show Page 1 in a new window.
Test Script
- To test the JavaScript code for the rest of these notes, use this test script:
```
<!DOCTYPE html>
<html>
    <body>
        <script>
        // Copy JavaScript code to test here.
        </script>
    </body>
</html>
```
JavaScript Datatypes
- 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>

<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 
```
- 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.
- Example:
```
document.writeln(1.0e500 + " "); 
document.writeln(0 / 0 + " "); 
document.writeln(5 / "W" + " ");
// Output:
Infinity NaN NaN
```
- string -- A string of characters delimited by single or double quotes:
  'dog', "horse", 'supercalifragilisticexpialidocious', "243567", "!@#$%^&*()", ' ' (space), "" (null string)
- boolean -- true or false
- undefined -- Special value assigned to a variable that is declared, but not yet assigned a value.
- 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
```
- Two additional Java datatypes that we will not discuss are bigint and symbol.
Control Structures
- Look at this Control Structures Document.
- Practice Problems
  1. Input courseScore from a prompt box. Write if..else statements that write Pass to the document if courseScore >= 69.5, else write Fail to the document.
  2. Write a while loop that prints all 99 verses of the song 99 Bottles of Beer on the Wall.
  3. Modify the while loop in Problem 2 to be a for loop.
Project 2a
- Look at the Project 2a Description.
- You probably know about of ASCII codes for representing characters.
- Some of the cities in the cities.js file have foreign names with non-ASCII characters.
- These non-ASCII characters are represented by Unicode characters, which represent alphabets of the languages of the world, ancient and modern.
- Other non-alphabet characters, like wingdings, emoticons, and math symbols and are also represented.
- A directory for Unicode character pages:
  http://www.unicode.org/charts/
- Here is also a converter that converts Unicode entities into actual characters:
  https://www.online-toolz.com/tools/text-unicode-entities-convertor.php
- In the second section of this page, Decode/Unescape Unicode Entities, enter Unicode entities like \u03B2 and \u00FC in the Unicode Entries box. The actual characters β and ü will appear in the Result Box.
Truthiness
- We saw in the Comparisons for Equality section that 0, 0.0, "", and null are
  equal to the value false, according to the == operator.
- In this section, we investigate the truthiness of various values.
- The truthiness of a value is its value after being converted to boolean with the Boolean functionTruthiness Example
  Predict the output of this script.
```
document.write(Boolean(5) + " ");
document.write(Boolean(283764) + " ");
document.write(Boolean(0) + " ");
document.write(Boolean(-203) + "<br>");

document.write(Boolean(3.14159265) + " ");
document.write(Boolean(-284.378) + " ");
document.write(Boolean(0.000000001) + " ");
document.write(Boolean(0.0) + "<br>");

document.write(Boolean("grapefruit") + " ");
document.write(Boolean("$%&*@") + " ");
document.write(Boolean("0") + " ");
document.write(Boolean("false") + " ");
document.write(Boolean(" ") + " ");
document.write(Boolean("") + "<br>");

document.write(Boolean(null) + " ");
document.write(Boolean(undefined) + " ");
document.write(Boolean(Infinity) + " ");
document.write(Boolean(NaN) + "<br>");
```
  Then run it to check if your prediction is correct.
- Formulate the rules for truthiness.
- The reason that truthiness is important is the behavior of if or while statements when their conditions are expressions that do not return true or false.
- What is the output?
```
var n = 45;
var p;
if (n) {
    v = "nonzero";
}
else {
    v = "zero";
}
document.writeln("Value: " + v);
```
Scope
- The scope of a variable is the region in JavaScript code where a variable exists.
- A variable defined with var has function scope, which means that the variable only exists in the function where it is defined.
- For example, this makeGreeting function will generate an error:
```
function makeGreeting(name) {
    var greeting = `Hello, ${name}, how are you?`;
    return greeting
}
document.writeln(greeting);
```
  The variable greeting does not exist after the end of the function.
- A block consists of lines of code within an if..else statement, while loop, for loop, or any code defined within curly braces like this:
```
{
    let x = 1.5;
    x++;
}
document.writeln(x);    
```
  These statements generate an error because the variable x does not exist after the block in which it is defined ends.
- A variable defined with let has block scope, which means that the variable only exists in the block where it is defined.
- Best practice is the keep the scope of a variable as small as possible. If a variable is only needed in a block, use let to declare it.
- In this example, the variable n has block scope within the for loop, but the variable sum has function scope:
```
// Compute the sum of numbers between 
// 1 and n inclusive:
function sum1ToN(n) {
    var sum = 0;
    for(let i = 1; i <= n; i++) {
        sum += i;
    }
    return sum;
}
document.writeln("Sum: " + sum1ToN(100));
// Output:
5050
// Note: a more efficient way to compute
// the sum of the numbers from 1 to 100
// is to use this formula:
// sum = (n * (n + 1)) / 2 
       = (100 * 101) / 2 
       = 10100 / 2 
       = 5050
```
  This last forrmula is part of the famous mathematician Karl Gauss's story. When he was in elementary schools (some versions say Kindergarten), the teacher asked the class asked the students to add up the numbers from 1 to 100. Although this would be a difficult problem for most elementary students, Karl Gauss noticed that
```
sum = 1 + 2 + 3 + ... + 98 + 99 + 100
    = (1 + 100) + (2 + 99) + (3 + 98) + ... + (50 + 51)
    = 101 * 50
    = 5050
```
  and announced the answer of 5,050 in less than one minute.
- Practice Problems:
  1. This code produces an error. Fix the error.
```
let x = alert("Enter a positive integer.");
if (x % 2 == 0) {
    var parity = "even";
}
else {
    var parity = "odd";
}
document.writeln(`Parity: ${parity}`);
```

IT 238 -- Apr 6, 2026

Review Exercises

What is JavaScript?

JavaScript Output

Functions

Projects 1a and 1b

Practice Problems

Test Script

JavaScript Datatypes

Control Structures

Project 2a

Truthiness

Scope