IT 212 -- Jan 27, 2025 Notes

IT 212 -- Jan 27, 2025

Practice Quiz

Take Practice Quiz 3b.
Use the Comparisions for Equality section in the Jan 22 Notes to help you.

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">
```
Show how to create this button with a <button> 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>
```

Test four String methods in the W3Schools documentation.

replace  replaceAll  toUpperCase  padStart  trim

Use the W3Schools documentation if needed
www.w3schools.com/js/js_string_methods.asp
Answer: The entire HTML file that contains the test script:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
        var s = "mississippi";
        document.writeln(s.replace("s", "*") + " " + "<br>");
        // Output: mi*sissippi
        document.writeln(s.replaceAll("s", "*") + "<br>");
        // Output: mi**i**ippi
        document.writeln(s.toUpperCase( ) + "<br>");
        // Output: mississippi
        var b = "459";
        document.writeln(b.padStart(5, "0") + "<br>");
        // Output: 00459
        var c = "   This is a test. 
        document.writeln("!" + c.trim( ) + "!<br>");
        // Output: !This is a test.!
        </script>
    </head>
    <body></body>
</html>

What is the value of the variable f after these statements are executed?

var a = "abc", b = 128.73, c = 45;
var f = `###${a} %%%${b} ***${c}`;
Answer:
###abc %%%128.73 ***45

Functions vs. Methods

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

Simple Answer: A method is called from an object; a function is standalone and not called from an object, for example:
```
someObject.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