IT 238 -- Apr 27, 2026 Notes

IT 238 -- Apr 27, 2026

Review Exercises

What is wrong with the beginning of this HTML file?
```


<!DOCTYPE html>
<html lang="en">
....
```
Answer: The first line of the HTML page should be
```
<!DOCTYPE html>
```
Source code comments or other code should go after that. Here is what the beginning of the HTML file should look like:
```
<!DOCTYPE html>



<html lang="en">
```
Arrange these operators in order from highest precedence to lowest precedence:
```
+  ==  =  ++  <  **  +=  .  *  &&
Answer:
.  ++  **  *  +  <  ==  &&  =  +=
```
Look at the W3Schools Operator Precedence Table

What is the value of the array a after these two statements?

var a = ["apple", "peach", "cherry", "orange", "lemon", "pear"];
a.splice(1, 3, "carrot", "celery"];
// Answer:
["apple", "carrot", "celery", "lemon", "pear"]

Look up three of these Math class methods on the W3Schools site and test them:

abs  cos  max  min  pow  sin  sqrt
// Answer:
document.writeln(Math.abs(-34.72) + " " + Math.abs(84.38) + "<br>");
document.writeln(Math.sin(0) + "<br>");
document.writeln(Math.sqrt(2));
// Output:
34.72 84.38
0
1.41421356237309505

How do you write a function in arrow notation? Answer:

function greeting( ) {
    return "Hello, World.";
}
// is written in arrow notation as
var greeting = ( ) => "Hello, World.";

Convert this function to arrow notation:

function convert( ) {
    var input1 = document.getElementById("tf1");
    var cm = parseFloat(input1.value) * 2.54;
    var output1 = document.getElementById("para1");
    output1.innerHTML = `Length in cm: ${output1}`);
}
// Answer:
var convert = ( ) => {
    var input1 = document.getElementById("tf1");
    var cm = parseFloat(input1.value) * 2.54;
    var output1 = document.getElementById("para1");
    output1.innerHTML = `Length in cm: ${output1}`);
}

Then pass this function to this JS statement as an anonymous function:

button1.addEventListener("click", convert);

Answer:

button1.addEventListener("click", ( ) => {
    var input1 = document.getElementById("tf1");
    var cm = parseFloat(input1.value) * 2.54;
    var output1 = document.getElementById("para1");
    output1.innerHTML = `Length in cm: ${output1}`);
});

Write an HTML page with a button and a script file that changes the background color of the document to red when the button is clicked. Use anonymous functions in arrow notation.
Answer: Place a button in the body:

<button id="btn">Click Me</button>

You can also use this input tag:

<input type="button" id="btn" value="Click Me">

Then use this script.js file:

function changeColor( ) {
    var bodyObject = document.getElementById("b");
    bodyObject.style.backgroundColor = "red";
}
function init( ) {
    document.getElementById("btn").
        addEventListener("click", changeColor);
}
window.addEventListener("load", init);

The preceding lines can be written using anonymous methods for init and changeColor:

window.addEventListener("load", ( ) => {
    var bodyObject = document.getElementById("btn");
    bodyObject.addEventListener("click", ( ) => {
        document.getElementById("btn")
            .bodyObject.style.backgroundColor = "red";
    });
});

In an <img> element in the body, when the window is loaded or refreshed, randomly display one of these images: heads.png or tails.png.

Write an object literal 24-hour clock object with properties hr, min, sec, and methods tick (add one to sec), toString that outputs a time like this: 15:07:49. Answer:

var clock = { hr: 23;
              min: 59;
              sec: 59;
              tick: function( ) {
                   this.sec;
                   if (this.sec == 60) {
                       this.min++;
                       this.sec = 0;
                   }
                   if (this.min == 60) {
                       this.hr++;
                       this.min = 0;
                   }
                   if (this.hr == 60) {
                       this.hr = 0;
                   }
                   toString: function( ) {
                       return `${hr} ${hr} ${hr}`;
              }
document.writeln(clock + "<br>");
clock.tick( );
document.writeln(clock + "<br>");

Primitive vs. Class Variables

List four JavaScript primitive datatypes.

Formally there is a distinction between the primitive type string variable s and the String object t defined by

var s = "abc";
var t = new String("abc");

To see this, run these JavaScript statements in a script:

var s = "abc";
var t = new String("abc");
document.writeln((typeof s) + " " + (typeof t));
// Output: string object

The toString method converts an arbitrary value or object to a String object; the valueOf method converts an object or value to a string value.
Admittedly this can be confusing. However, the JavaScript interpreter is able to switch seamlessly back and forth between a primitive type and an object type, so the primitive type value s is able to call methods from the class String.
The number and boolean primitive types also have the corresponding object types Number and Boolean.
Converting from a primitive type to the corresponding class type is called boxing.
Converting from a class object to the corresponding primitive type is called unboxing.
Boxing and unboxing also occurs between the primitive type number values and Number class objects and also between boolean values and Boolean class objects.
When possible, use the primitive types string and number instead of the class types String and Number because processing primitive types is faster and requires less computer memory.

Use Strict

Some JavaScript programmers use the following statement at the beginning of each function:
```
'use strict';
```
This statement causes the JavaScript interpreter to issue error and warning messages that will
- eliminate silent errors by throwing error messages instead,
- improve security and performance,
- warn about deprecated code.
In particular, 'use strict'; does not allow the declaration of unqualified global variables. Instead, declare them as properties of the window object.
Some programmers call code "sloppy code" that does not include 'use strict';
W3Schools reference that gives more details about strict mode:
https://www.w3schools.com/js/js_strict.asp

HTML Controls

HTML tags that represent controls:
```
<input>  <button>  <textarea>  
<select>  <option>  <output>
```
HTML Tags Listed Alphabetically (W3Schools)
Attributes that can be used by all controls:
```
id  class  hidden  style  disabled  tabindex  dragable
required  autofocus
```
HTML Global Attributes (W3Schools)

Attributes for specific controls:

<input>  type  (button checkbox radio hidden number password 
                color date email file image month range reset 
                search submit tel text time url week)
         value (text)
         checked (checkbox, radio)
         max (number)
         maxlength (number)
         minlength (number)
         pattern (text)
         placeholder (text)
         readonly
         size (number)
         step (number)

<button> type (button reset submit)

<textarea>  cols (number)
            rows (number)
            readonly
            maxlength (number)
            placeholder (text)
            wrap (hard soft)

<select>  multiple
          size (number)

<option>  value (text)
          selected

Tag Attibutes Listed Alphabetically (W3Schools)
Look up attributes for individual tags.

HTML Events

blur  change  click  dblclick  focus  keydown  keypress  keyup  load
mousedown  mouseenter  mouseleave  mousemove  mouseup

HTML Events (W3Schools)