IT 212 -- Apr 16, 2025 Notes

IT 212 -- Apr 16, 2025

Review Exercises

Find the errors in the source code files contained in this project:
meters-to-ft-in.zip.
Answer: here is a zipfile of the corrected project.

Create a textfield that has rounded corners. Also, add a placeholder attribute to the textfield.
Answer:
Source code:

<input type="text" value="Larry" placeholder="Enter name:"
       style="border-radius: 15px; width: 150px; height: 15px;">

We know how to create a button that looks like this:
```
<input type="button" value="Push Me">
```
How does a button created with a <button> element differ from a button created from an
<input> element?
Answer:
```
<button>
    Push Me
</button>
```
The advantage of using the button tag is that HTML markup can be included, for example:
```
<button>
    <strong>Push Me</strong>
</button>
```
The <strong> element changes its contents to bold font.
We use entities to display special characters on a web page. Try displaying the greek letters alpha (α), beta (β), and gamma (γ) in a paragraph, a textarea, and the title. However, entities do not work in prompt or alert boxes. For these boxes, use these hex unicode escape characters instead: \u03B1, \u03B2, \u03B3. Check out the website unicode.org to find the codes of the special characters that you need. Answer: here is a sample website that displays these characters.
```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>&alpha; &beta; &gamma;</title>
        <script>
        var values = prompt("Enter values for \u03B1, \u03B2, \u03B3.");
       alert("\u03B1, \u03B2, \u03B3");
        </script>
    </head>
    <body>
        <p>&alpha; &beta; &gamma;</p>
        <textarea>&alpha; &beta; &gamma;</textarea>
    </body>
</html>
```

Expression Interpolation

Expression interpolation means inserting variables or expressions into a string.
Strings that use expression interpolation are called f-strings in Python.
A JavaScript string that uses expression interpolation is delimited with backquotes.

Try out this example script:

// StringInterpolation Example
var name = "Larry";
var amt = "347.81";
document.writeln(`${name} owes me $${amt}.`);
// Output:
Larry owes me $347.81.

In Review Exercise 7, change the function return value to use expression interpolation.
Answer: Change
```
var output = ftInt + "\' " + inInt + "\"";
```
to
```
var output = `${ftInt}\' ${inInt}\"`;
```

Comparisons for Equality

You are familiar with the comparison operator ==, used in JavaScript, Python, Java, and C#.
This operator acts somewhat differently in each language.
The JavaScript == operator is liberal in its comparisons.
x == y returns true if x equals y after conversion to the same datatype.

For example,

5 == 5, "5" == "5", 5 == "5", 0 == false, 1 == true

all return true.

The === operator is strict in its comparisons.
x === y returns true if the values x and y are equal and also are of the same datatype.
For example 5 === "5", 0 === false, and 1 === true all return false because, in each case, the operands are not of the same datatype.

Predict the output of these statements:

document.writeln(`${5 == 5} ${5 == 3} ${"5" == "5"}<br>`);
// The string "5" is converted to a number before
// performing the comparison:
document.writeln(`${5 == "5"}`);
// Output:
true false true
true

When performing a comparison, to convert a number to boolean (true or false), the rule is that zero converts to false, one converts to true; any other value does not convert to boolean.
Predict the output of this statement:
```
document.writeln(`${0 == false} ${5 == true} ${0.00000001 == false}`);
// Output:
true false false
```

When performing a comparison, to convert a string to boolean, the rule is that the strings "", "0", and "0.0" convert to false, "1" and "1.0" convert to true. Any other string does not convert to boolean.
Predict the output of these statements:

document.writeln(`${"1" == true} ${"" == false}<br>`);
document.writeln(`${"0" == false} ${"1" == true} ${"5" == true}<br>`);
document.writeln(`${"0.00" == false} ${"1.00" == true} ${"5.00" == true}`);
// Output:
true true
true true false
true true false

The === comparison operator only returns true if the datatypes of the operands are the same without converting. Predict the output of these statements:

document.writeln(`${5 === "5"}<br>`);
document.writeln(`${"" === false} ${"1" === true}<br>`);
document.writeln(`${"0" === false} ${"1" === true}<br>`);
document.writeln(`${"0.00" === false} ${"1.00" === true}`);
// Output
false
false false
false false
false false

Practice Problem: Predict the output:
```
var n = 1.0 - 0.8;
var m = 0.3 - 0.1;
document.writeln((n == m) + " ");
// Output:
false
```
Why? Because of differing roundoff errors due to the binary representation of the double precision floating point numbers, 1.0 - 0.8 and 0.3 - 0.1 are not represented with exactly the same binary floating point values. To see this, look at the output of this statement:
```
document.writeln(n - m);
// Output:
-2.7755575615628914e-17 
```
Instead of checking for equality with floating point values, we should check that n and m are very close to each other:
```
document.writeln((Math.abs(n - m) < 1.0e15) + " ");
// Output:
true
```

Practice Quiz

Take Practice Quiz 3b.

Functions vs. Methods

Question: What is the difference between a method and a function?

Simple Answer: A method is called from an object or a class; a function is standalone and not called from an object, for example:
```
someObject.someMethod( );
someClass.someMethod( );
someFunction( );
```
Technical Answer: A function that is actually called from the global object window like this:
```
window.someFunction( );
```
When the global object window is omitted, it is understood, so someFunction( ) and window.someFunction( ) have the same effect.

Here are some JavaScript builtin functions to try out:

isFinite  isNaN  parseFloat  parseInt

We can use this script to test them:

document.writeln(isFinite(34544.5484));
// Output: true
document.writeln(window.isFinite(34544.5484));
// Output: true
document.writeln(Number.MAX_VALUE);
// Output: 1.7976931348623157e+308 
document.writeln(isFinite(1.0e309) + " ");
// Output: false
document.writeln(isNaN(0 / 0));
// Output: true
document.writeln(parseFloat("453.45"));
// Output: 453.45
document.writeln(parseInt("453");
// Output: 453

Project 2a

Look at the Project 2a Description.

Arrays

An array is a list of values accessed by index. What is the output?

var a = [2, 3, 5, 7, 11, 13];
document.writeln(a + "<br>");
document.writeln(a[4]);
// Output:
2,3,5,7,11,13
11

Without arrays, multiple variables would be needed to hold a list of data values:
```
a0 = 2;
a1 = 3;
a2 = 5;
a3 = 7;
a4 = 11;
a5 = 13;
```

Also, the index of an array can be a variable, which facilitates processing array items in a loop. For example:

for(var i = 0; i < 6; i++) {
    document.write(a[i] + " ");
}
// Output:
2 3 5 7 11 13

for(var n of a)) {
    document.write(n + " ");
}
// Output:
2 3 5 7 11 13

An array can contain mixed types:
```
var a = [45.3, 'apple', false, null];
```

What is the output of these statements (surprise)?

var a = [2, 3, 5, 7];
document.writeln(typeof a);
// Output:
object
// Reason: an array is not a primitive datatype, it
// is a composite datatype called an object type.

Properties and Methods

As we see by the output from
```
document.writeln(typeof [2, 3, 5, 7]);
```
an array is an object.
An object has properties and methods:
A property is a piece of data stored in an object.
A method is a function called by an object.
Practice Problem: List some properties and methods for a BasketballPlayer object,
A property is a piece of data that describes some aspect of a basketball player; a method is something that a basketball player can do.
BasketballPlayer Properties that were suggested in class:
```
name jerseyNumber height weight position isRookie
```
Basketball Player Methods that were suggested in class:
```
shoot dunk pass dribble run stop 
```
We will look at the rest of this section on Wednesday, Jan 29.
Now let's look at properties and methods for an array object. For example, if the array a is defined by
```
var a = [2, 3, 5, 7];
```
the properties and methods of a are accessed by the dot operator (.).
The dot operator is also called the member selection operator.
The array object a has the property length that is accessed by the dot operator:
```
document.writeln(a.length);
// Output:
4
```
The array object has the method reverse that is also accessed by the dot operator:
```
document.writeln(a.reverse( ));
// Output:
[7, 5, 3, 2]
```

Practice Problem
ArrayMethods Example
Write a script that tests these array instance methods.

toString  concat  pop  push  shift  unshift

Answer: Check out this W3Schools reference to array methods:
www.w3schools.com/jsref/jsref_obj_array.asp

Here is a test script that tests these string methods:

var a = [2, 3, 5, 7];
var b = [9, 8, 7, 6];

// When printing the array object a, toString
// is automatically called
document.writeln(a.toString( ) + " " + a + "<br>");
// Output: 2,3,5,7 2,3,5,7

// The concat method concatenates two arrays.
document.writeln(a.concat(b) + "<br>");
// Output: 2,3,5,7,9,8,7,6

// The pop method pops the element off 
// of the top (right) of the array.
a.pop( );
document.writeln(a + "<br>");
// Output 2,3,5

// The push method pushes a new element
// (in this case 99) onto the top of the array.
a.push(99);
document.writeln(a + "<br>");
// Output: 2,3,5,99

// The shift method is similar to pop, but
// but the bottom (left) element is removed.
a.shift( );
document.writeln(a + "<br>");
// Output: 3,5,99

// The unshift method is like push, but the new element
// is added to the bottom (left) of the array.
a.unshift(98);
document.writeln(a + "<br>");
// Output: 98,3,5,99

Write a script that tests these string methods:
```
at  indexOf  repeat  toUpperCase  trim
```
Use the W3Schools String reference to help you:
www.w3schools.com/jsref/jsref_obj_string.asp