Lesson 13: Counting and Looping

Working While a Condition is True

Introduction

Looping consists of visiting the values or items of a list of consecutive elements. Like every C-based language, JavaScript supports various techniques.

while something is Going on

As one way to create a loop, you can start from a certain value, such as 0, and keep moving up until you reach a condition by which you would stop. This type of loop is performed using a keyword named while. The formula to create this type of loop is:

while(condition) {
	statement1;
    statement2;
    statement_n;
};

The while loop can be illustrated as follows:

While

You can first provide a starting point. This can be done by declaring and initilizing a variable. Then, in the body of the while loop, create one or more statements to execute. In the parentheses of the loop, create a condition that will be checked to decide whether to continue or not. Here is an example:

TypeScript File: ConditionalLooping.ts

let counter: number = 0;

document.write("<ul>");

while (counter < 8) {
    document.write("<li>" + counter + "</li>");

    counter++;
}

document.write("</ul>");

View: WhileLooping.cshtml

@{
    ViewBag.Title = "Counter";
}

<h2>Counting Number</h2>

<script src="~/Scripts/ConditionalLooping.js"></script>

This would produce:

doing Something while Going On

To do something in a loop before checking a condition, JavaScript provides a condition writen with do...while. The formula to follow is:

do {
    statement1;
    statement2;
    statement_n
} while (condition);

The do...while condition can be illustrated as follows:

do...while

Here is an example:

let counter: number = 0;

document.write("<ul>");

do {
    document.write("<li>" + counter + "</li>");

    counter++;
} while (counter < 5);

document.write("</ul>");

Going for a Loop

The while and the do...while loops require that you first specify a starting point for the loop. JavaScript provides a loop that allows you to directly create the starting point in the loop. This is done with the for keyword. The formula to use it is:

for(start; end; frequency) {
	statement1;
    statement2;
    . . .
    statement_n;
}

Here is an example:

document.write("<ul>");

for (let counter = 0; counter < 5; counter++) {
    document.write("<li>" + counter + "</li>");
}

document.write("</ul>");

An Array Object

Introduction

To support arrays, the JavaScript language provides an object named Array. It is equipped with properties to provide various pieces of information about an array and methods to perform operations.

Creating an Array

To create an array, you can declare a variable and initialize it with Array. This object is equipped with a constructor that can take 0 or more arguments. You can create and pass an array as argument. You can create the array directly in the parentheses of the constructor. Here is an example:

let thaiFoodMenu = new Array(['Yum Neau', 'Curry Puffs',
                              "Chicken Cashew", 'Tom Kha Soup',
                              'Shrimp Bikini', "Crab Fried Rice"]);

As an alternative, you can first declare a variable and initialize it with empty parentheses of an Array object. To add an element to the array, use the name of the variable and apply the square brackets to it. In the brackets, enter a positive index lower than the current number of elements. Then assign the desired value to it. Here is an example:

let thaiFoodMenu = new Array();

thaiFoodMenu[0] = 'Yum Neau';
thaiFoodMenu[1] = 'Curry Puffs';
thaiFoodMenu[2] = "Chicken Cashew";
thaiFoodMenu[3] = 'Tom Kha Soup';
thaiFoodMenu[4] = 'Shrimp Bikini';
thaiFoodMenu[5] = "Crab Fried Rice";

When you declare a variable and initialize it as an array, the variable is automatically an object of type Array. As a result, such a variable benefits from the properties and methods of the Array object.

Accessing an Array

There are various ways you can access an array. To access an array as an object, use the name of the variable. Here is an example:

TypeScript File: FoodMenuCreation.ts;

let thaiFoodMenu = new Array(['Yum Neau', 'Curry Puffs',
                              "Chicken Cashew", 'Tom Kha Soup',
                              'Shrimp Bikini', "Crab Fried Rice"]);

document.querySelector(".foodItems").innerHTML = thaiFoodMenu.toString();

View: FoodPresentation.cshtml

@{
    ViewBag.Title = "Thai Restaurant: Menu Presentation";
}

<h2>Thai Restaurant: Menu Presentation</h2>

<p class="foodItems"></p>

<script src="~/Scripts/FoodMenuManagment.js"></script>

This would produce:

Accessing an Array as an Object

To access each element of an array, you can us a loop to visit each item. You have many options.ay or another. Here is an example:

Looping a Collection

Introduction

A loop that solely uses a numeric counter is primarily used if you want to count some numbers. If your application is using a list such as an array, you can use a looping mechanism to specify a list of numbers you want to visit. Then every time your code gets to a number, you can apply that number to the list and take an appropriate action.

While a List is Going Through a Loop

If you have a list of values, you can use a while loop when accessing each element of the list. As seen previously, this type of loop gets you to each number. If you are using an array, you can pass the looping number to the square brackets of the list and do what you want, such as displaying the value to a webpage. Here is an example:

TypeScript File: FoodMenuManagment.ts

let i: number = 0;
let thaiFoodMenu: string[] = ['Yum Neau', 'Curry Puffs', "Chicken Cashew",
                              'Tom Kha Soup', 'Shrimp Bikini'];

document.write("<ul>");

while (i < 5) {
    document.write("<li>" + thaiFoodMenu[i] + "</li>");

    i++;
}

document.write("</ul>");

View: MenuPresentation.cshtml

@{
    ViewBag.Title = "Thai Restaurant";
}

<h2>Thai Restaurant</h2>

<script src="~/Scripts/FoodMenuManagment.js"></script>

This would produce:

This loop is also valid for an array created using the Array object. Here is an example:

let thaiFoodMenu = new Array();

thaiFoodMenu[0] = 'Yum Neau';
thaiFoodMenu[1] = 'Curry Puffs';
thaiFoodMenu[2] = "Chicken Cashew";
thaiFoodMenu[3] = 'Tom Kha Soup';
thaiFoodMenu[4] = 'Shrimp Bikini';
thaiFoodMenu[5] = "Crab Fried Rice";

document.write("<ul>");

let i: number = 0;

while (i < 6) {
    document.write("<li>" + thaiFoodMenu[i] + "</li>");
    i++;
}

document.write("</ul>");

doing Something while on a List

As mentioned previously, an alternative to the while loop is to use it in a do...while loop. This loop can also be applied to a list. Here is an example:

let i: number = 0;
let thaiFoodMenu: string[] = ['Yum Neau', 'Curry Puffs', "Chicken Cashew",
                              'Tom Kha Soup', 'Shrimp Bikini'];

document.write("<ul>");

do {
    document.write("<li>" + thaiFoodMenu[i] + "</li>");

    i++;
} while (i < 5);

document.write("</ul>");

Looping for a List

To perform a loop that specifies its own starting point, we saw that you can use a for loop. Here is an example:

let thaiFoodMenu: string[] = ['Yum Neau', 'Curry Puffs', "Chicken Cashew",
                              'Tom Kha Soup', 'Shrimp Bikini'];

document.write("<ul>");

for (let i: number = 0; i < 3; i++) {
    document.write("<li>" + thaiFoodMenu[i] + "</li>");
}

document.write("</ul>");

Looping for the Items In a List

To assist you with loops for a list, JavaScript provides another version of the for loop. Instead of using a counter, use the for keyword combined with the in keyword. The formula to follow is:

for(variable in list-or-array) {
    statement1;
    statement2;
    . . .
    statement_n
}

As seen with the classic for loop, start with a variable in the parentheses and initialize that variable. It is followed by the in keyword and the name of a list or array. The variable represents the index as is the case for the for loop. This means that, in the body of the for...in loop, to access the index of an element, get the name of the variable. To access an item, type the name of the list or array, apply the square brackets, and, in the square brackets, pass the name that was declared in the parentheses of for. In the body of the loop, create the necessary statements. Here is an example:

TypeScript File: FoodMenuCreation.ts

let thaiFoodMenu: string[] = ['Yum Neau', 'Curry Puffs',
                              "Chicken Cashew", 'Tom Kha Soup',
                              'Shrimp Bikini', "Crab Fried Rice"];

document.write("<ul>");

for (let food in thaiFoodMenu) {
    document.write("<li>" + thaiFoodMenu[food] + "</li>");
}

document.write("</ul>");

View: FoodMenuPresentation.cshtml

@{
    ViewBag.Title = "Thai Restaurant";
}

<h2>Thai Restaurant</h2>

<script src="~/Scripts/FoodMenuCreation.js"></script>

An Object as a List

We saw that the members (properties, methods, etc) of an object qualify that object as a list. Based on this, when you have created an object, to access the properties using a loop, use the square brackets of an array. In this case, the key is the variable of the loop. Therefore, apply the square brackets to the object and pass the index. Here is an example:

TypeScript File: ToysCatalog.ts

let toy = {
    itemNumber: 538405,
    toyName:    "High Speed Train",
    categories: "Mild",
    true:       true,
    Category:   "Building Blocks",
    "#":        137,
    0:          0803845,
    18.75:      18.75,
    false:      "Requires Supervision"
};

document.write("<ul>");
for (var item in toy) {
    document.write("<li>" + item + " : " + toy[item] + "</li>");
}
document.write("</ul>");

View: ToyPresentation.cshtml

@{
    ViewBag.Title = "Toy Presentation";
}

<h2>Toy Presentation</h2>

<script src="~/Scripts/ToyExamination.js"></script>

This would produce:

Characteristics and Operations on Arrays

The Length of an Array

The size or length of an array is the number of elements it contains. To give you this piece of information, the Array object is equipped with a property named length. Here is an example of using this property:

TypeScript File: MeenuPreparation.ts

let thaiFoodMenu = new Array();

thaiFoodMenu[0] = 'Kee Mao';
thaiFoodMenu[1] = 'Pad Ka Na';
thaiFoodMenu[2] = "Chicken Cashew";
thaiFoodMenu[3] = 'Mango with Sticky Rice';
thaiFoodMenu[4] = 'Tom Yum Goong';
thaiFoodMenu[5] = "Crab Fried Rice";
thaiFoodMenu[6] = "Pad Ka Pow";

document.write("<ul>");

let i: number = 0;

do {
    document.write("<li>" + thaiFoodMenu[i] + "</li>");
    i++;
} while (i < thaiFoodMenu.length);

document.write("</ul>");

View: MenuPresentation.cshtml

@{
    ViewBag.Title = "Thai Restaurant: Menu Presentation";
}

<h2>Thai Restaurant: Menu Presentation</h2>

<script src="~/Scripts/FoodMenuManagment.js"></script>

This would produce:

The Length of an Array

Adding an Element to an Array

To let you add new elements to an existing array, the Array object is equipped with a method named push. Its syntax is:

push(element1, element2, ..., element_n);

To call this method, apply it to an array variable. To add one element, pass it as argument. Here is an example:

let thaiFoodMenu = [ 'Kee Mao', 'Pad Ka Na', "Chicken Cashew",
                     'Mango with Sticky Rice', 'Tom Yum Goong',
                     "Crab Fried Rice", "Pad Ka Pow" ];

thaiFoodMenu.push("Gang Keow Whan");

document.write("<ul>");

let i: number = 0;

do {
    document.write("<li>" + thaiFoodMenu[i] + "</li>");
    i++;
} while (i < thaiFoodMenu.length);

document.write("</ul>");

This would produce:

Adding an Element to an Array

To add more than one element, create their list in the square bracket and pass the whole array as argument.

Removing an Element from an Array

To let you delete an existing element from an array, the Array object is equipped with a method named pop. Its syntax is:

pop();

To call this method, apply it to an array variable. If the array has at least one element, this method would remove the last element.

Arrays and Functions

Introduction

You can create an array in the body of a function. If you don't yet have the elements for the array, you can first initialize the variable with empty square brackets as we saw already. When you are ready, you can add elements to the array using any of the techniques we reviewed. Here is an example:

function defineSuperHero() {
    var superman = [];

    superman.push(['Heat Vision']);
    superman.push(["X-Ray Vision"]);
    superman.push(["Freeze Breath"]);
    superman.push('Super Strength');
    superman.push(["Healing Factor"]);
    superman.push(['Super Human Hearing']);
}

If the array is locally created in a function, it cannot be accessed outside the function. To access an element of the array inside the function, use the name of the array, apply the square brackets to it, and pass the desired index. Here is an example:

TypeScript File: ToyExamination.ts

function present(): void {
    let numbers  : number[]  = [ 950835, 480583, 705804, 274953 ];
    let names    : string[]  = [ "Fire Truck with Remote Control",
                                 '612 Pieces Building Kit',
                                 '3-Pack Dinosaur Set',
                                 "Princess Palace Playhouse"];
    let prices   : number[]  = [ 25.5, 55.55, 44.7, 795.95 ];
    let batteries: boolean[] = [ true, false, false, false ];

    document.querySelector("#toy1Name").innerHTML = names[0];
    document.querySelector("#toy1Price").innerHTML = prices[0].toFixed(2);
    document.querySelector("#toy1Number").innerHTML = numbers[0].toString();
    document.querySelector("#toy1Batteries").innerHTML = batteries[0].toString();

    document.querySelector("#toy2Name").innerHTML = names[1];
    document.querySelector("#toy2Price").innerHTML = prices[1].toFixed(2);
    document.querySelector("#toy2Number").innerHTML = numbers[1].toString();
    document.querySelector("#toy2Batteries").innerHTML = batteries[1].toString();

    document.querySelector("#toy3Name").innerHTML = names[2];
    document.querySelector("#toy3Price").innerHTML = prices[2].toFixed(2);
    document.querySelector("#toy3Number").innerHTML = numbers[2].toString();
    document.querySelector("#toy3Batteries").innerHTML = batteries[2].toString();

    document.querySelector("#toy4Name").innerHTML = names[3];
    document.querySelector("#toy4Price").innerHTML = prices[3].toFixed(2);
    document.querySelector("#toy4Number").innerHTML = numbers[3].toString();
    document.querySelector("#toy4Batteries").innerHTML = batteries[3].toString();
}

present();

View: InventoryPresentation.cshtml

@{
    ViewBag.Title = "Toys Presentation";
}

<h2>Toys Presentation</h2>

<hr />

<table style="width: 500px; border: 3px solid #000000;">
    <tr>
        <td style="border: 3px solid #000000; width: 80px; font-weight: 600">Product #</td>
        <td style="border: 3px solid #000000; font-weight: 600">Toy Name/Description</td>
        <td style="border: 3px solid #000000; width: 60px; font-weight: 600">Price</td>
        <td style="border: 3px solid #000000; width: 140px; font-weight: 600">Require Batteries</td>
    </tr>
    <tr>
        <td style="border: 1px solid #C0C0C0;" id="toy1Number"></td>
        <td style="border: 1px solid #C0C0C0;" id="toy1Name"></td>
        <td style="border: 1px solid #C0C0C0;" id="toy1Price"></td>
        <td style="border: 1px solid #C0C0C0;" id="toy1Batteries"></td>
    </tr>
    <tr>
        <td style="border: 1px solid #C0C0C0;" id="toy2Number"></td>
        <td style="border: 1px solid #C0C0C0;" id="toy2Name"></td>
        <td style="border: 1px solid #C0C0C0;" id="toy2Price"></td>
        <td style="border: 1px solid #C0C0C0;" id="toy2Batteries"></td>
    </tr>
    <tr>
        <td style="border: 1px solid #C0C0C0;" id="toy3Number"></td>
        <td style="border: 1px solid #C0C0C0;" id="toy3Name"></td>
        <td style="border: 1px solid #C0C0C0;" id="toy3Price"></td>
        <td style="border: 1px solid #C0C0C0;" id="toy3Batteries"></td>
    </tr>
    <tr>
        <td style="border: 1px solid #C0C0C0;" id="toy4Number"></td>
        <td style="border: 1px solid #C0C0C0;" id="toy4Name"></td>
        <td style="border: 1px solid #C0C0C0;" id="toy4Price"></td>
        <td style="border: 1px solid #C0C0C0;" id="toy4Batteries"></td>
    </tr>
</table>

<script src="~/Scripts/ToyExamination.js"></script>

An Element from a Function

The value of an element of an array can come from a function. Here is an example:

TypeScript File: TicketManagement.ts

let speedLimit: number = 30;
let drivingSpeed: number = 75;
let prices = [30, 15, show(drivingSpeed), 758, 60];

function show(current):void {
    let difference = drivingSpeed - speedLimit;

    if (current > difference) {
        document.querySelector("#conclusion").innerHTML = "Driver's License Suspended: You were caught driving at " + difference + "/MPH over the speed limit.";
    }
}

View: TicketAnalysis.cshtml

@{
    ViewBag.Title = "Traffic Ticket";
}

<h2>Traffic Ticket</h2>

<p id="conclusion"></p>

<script src="~/Scripts/TicketManagement.js"></script>

Returning an Array from a Function

You can create a function that returns an array. To do this, define the array in the body of the function. Somewhere at the end of the function, return that array. Here is an example:

function defineSuperHero() {
    let superman = [];

    superman.push(['Heat Vision']);
    superman.push(["X-Ray Vision"]);
    superman.push(["Freeze Breath"]);
    superman.push('Super Strength');
    superman.push(["Healing Factor"]);
    superman.push(['Super Human Hearing']);

    return superman;
}

You can also create the array directly after the return keyword. Here is an example:

function createNumbers() {
    return [40, 30, 5, 840, 9, 8 ];
}

To use the returning array, you can call the function and assign its call to a variable. After doing, you can use the variable as array.

An Array as Argument

You can create a function that uses a parameter that is an array. When creating the function, simply specify the name of the parameter. Here is an example:

function presentTimeSheets(workRecords) {

}

Notice that our function has a parameter. Except for the fact that its name is plural, we don't know what that parameter represents. When calling the function, of course you must pass an argument. In this case, the argument would/can be reated as an array. Here is an example:

TypeScript File: DataRepository.ts

function keepTimeSheet(){
    let timeSheets = [
        { timeSheetId: 1001, employeeNumber: 941148, startDate: "04/01/2019", monday: 8.00, tuesday:  8.00, wednesday: 8.00, thursday: 8.00, friday: 8.00 },
        { timeSheetId: 1002, employeeNumber: 317462, startDate: "04/01/2019", monday: 6.00, tuesday:  9.00, wednesday: 7.50, thursday: 8.50, friday: 6.50 },
        { timeSheetId: 1003, employeeNumber: 266830, startDate: "04/01/2019", monday: 6.50, tuesday:  7.00, wednesday: 5.50, thursday: 6.00, friday: 7.50 },
        { timeSheetId: 1004, employeeNumber: 941148, startDate: "04/15/2019", monday: 8.00, tuesday:  8.00, wednesday: 8.00, thursday: 8.00, friday: 8.00 },
        { timeSheetId: 1005, employeeNumber: 266830, startDate: "04/15/2019", monday: 5.00, tuesday:  5.50, wednesday: 6.50, thursday: 7.50, friday: 6.00 },
        { timeSheetId: 1006, employeeNumber: 317462, startDate: "04/15/2019", monday: 8.50, tuesday: 10.00, wednesday: 9.00, thursday: 8.00, friday: 9.50 },
        { timeSheetId: 1007, employeeNumber: 941148, startDate: "04/29/2019", monday: 8.00, tuesday:  8.00, wednesday: 8.00, thursday: 8.00, friday: 8.00 },
        { timeSheetId: 1008, employeeNumber: 266830, startDate: "04/29/2019", monday: 7.50, tuesday:  6.50, wednesday: 5.00, thursday: 7.00, friday: 6.00 },
        { timeSheetId: 1009, employeeNumber: 317462, startDate: "04/29/2019", monday: 9.50, tuesday: 6.50, wednesday: 8.50, thursday: 7.50, friday: 8.00 }];

    return timeSheets;
}

function presentTimeSheets(workRecords) {
    document.write("<table style='border: 2px solid black; width: 660px'>");
    document.write("<tr><td style='font-weight: bold; text-align: center; width: 110px;'>Time Sheet Id</td>");
    document.write("<td style='font-weight: bold; border: 1px solid black; width: 80px; text-align: center'>Empl #</td>");
    document.write("<td style='font-weight: bold; border: 1px solid black; width: 80px; text-align: center'>Start Date</td>");
    document.write("<td style='font-weight: bold; border: 1px solid black; width: 80px; text-align: center'>Monday</td>");
    document.write("<td style='font-weight: bold; border: 1px solid black; width: 80px; text-align: center'>Tuesday</td>");
    document.write("<td style='font-weight: bold;border: 1px solid black; text-align: center'>Wednesday</td>");
    document.write("<td style='font-weight: bold; border: 1px solid black; width: 80px; text-align: center'>Thursday</td>");
    document.write("<td style='font-weight: bold; border: 1px solid black; width: 80px; text-align: center'>Friday</td></tr>");

    for (let i: number = 0; i < workRecords.length; i++) {
        document.write("<tr><td style='text-align: center; border: 1px solid black;'>" + workRecords[i].timeSheetId + "</td>");
        document.write("<td style='text-align: center; border: 1px solid black'>" + workRecords[i].employeeNumber + "</td>");
        document.write("<td style='text-align: center; border: 1px solid black'>" + workRecords[i].startDate + "</td>");
        document.write("<td style='text-align: center; border: 1px solid black'>" + workRecords[i].monday.toFixed(2) + "</td>");
        document.write("<td style='text-align: center; border: 1px solid black'>" + workRecords[i].tuesday.toFixed(2) + "</td>");
        document.write("<td style='text-align: center; border: 1px solid black'>" + workRecords[i].wednesday.toFixed(2) + "</td>");
        document.write("<td style='text-align: center; border: 1px solid black'>" + workRecords[i].thursday.toFixed(2) + "</td>");
        document.write("<td style='text-align: center; border: 1px solid black'>" + workRecords[i].friday.toFixed(2) + "</td></tr>");
    }
 
    document.write("</table>");
}

let timesWorked = keepTimeSheet();

presentTimeSheets(timesWorked);

View: TimeSheetSummary.cshtml

@{
    ViewBag.Title = "Time Sheets Summary";
}

<h2>Time Sheets Summary</h2>

<script src="~/Scripts/DataRepository.js"></script>

When it comes to the elements or values of an array argument, instead of passing an external array as argument, you can create a function that only knows that it must receive an array. In this case, create a function and specify a name for the parameter. In the body of the function, create a local array and assign to the parameter, and use the parameter as an array. Here is an example:

function presentTimeSheets(workRecords) {
    workRecords = [
        { timeSheetId: 1001, employeeNumber: 941148, startDate: "04/01/2019", monday: 8.00, tuesday: 8.00, wednesday: 8.00, thursday: 8.00, friday: 8.00 },
        { timeSheetId: 1002, employeeNumber: 317462, startDate: "04/01/2019", monday: 6.00, tuesday: 9.00, wednesday: 7.50, thursday: 8.50, friday: 6.50 },
        { timeSheetId: 1003, employeeNumber: 266830, startDate: "04/01/2019", monday: 6.50, tuesday: 7.00, wednesday: 5.50, thursday: 6.00, friday: 7.50 },
        { timeSheetId: 1004, employeeNumber: 941148, startDate: "04/15/2019", monday: 8.00, tuesday: 8.00, wednesday: 8.00, thursday: 8.00, friday: 8.00 },
        { timeSheetId: 1005, employeeNumber: 266830, startDate: "04/15/2019", monday: 5.00, tuesday: 5.50, wednesday: 6.50, thursday: 7.50, friday: 6.00 },
        { timeSheetId: 1006, employeeNumber: 317462, startDate: "04/15/2019", monday: 8.50, tuesday: 10.00, wednesday: 9.00, thursday: 8.00, friday: 9.50 },
        { timeSheetId: 1007, employeeNumber: 941148, startDate: "04/29/2019", monday: 8.00, tuesday: 8.00, wednesday: 8.00, thursday: 8.00, friday: 8.00 },
        { timeSheetId: 1008, employeeNumber: 266830, startDate: "04/29/2019", monday: 7.50, tuesday: 6.50, wednesday: 5.00, thursday: 7.00, friday: 6.00 },
        { timeSheetId: 1009, employeeNumber: 317462, startDate: "04/29/2019", monday: 9.50, tuesday: 6.50, wednesday: 8.50, thursday: 7.50, friday: 8.00 }];

    document.write("<table style='border: 2px solid black; width: 660px'>");
    document.write("<tr><td style='font-weight: bold; text-align: center; width: 110px;'>Time Sheet Id</td>");
    document.write("<td style='font-weight: bold; border: 1px solid black; width: 80px; text-align: center'>Empl #</td>");
    document.write("<td style='font-weight: bold; border: 1px solid black; width: 80px; text-align: center'>Start Date</td>");
    document.write("<td style='font-weight: bold; border: 1px solid black; width: 80px; text-align: center'>Monday</td>");
    document.write("<td style='font-weight: bold; border: 1px solid black; width: 80px; text-align: center'>Tuesday</td>");
    document.write("<td style='font-weight: bold;border: 1px solid black; text-align: center'>Wednesday</td>");
    document.write("<td style='font-weight: bold; border: 1px solid black; width: 80px; text-align: center'>Thursday</td>");
    document.write("<td style='font-weight: bold; border: 1px solid black; width: 80px; text-align: center'>Friday</td></tr>");

    for (let i: number = 0; i < workRecords.length; i++) {
        document.write("<tr><td style='text-align: center; border: 1px solid black;'>" + workRecords[i].timeSheetId + "</td>");
        document.write("<td style='text-align: center; border: 1px solid black'>" + workRecords[i].employeeNumber + "</td>");
        document.write("<td style='text-align: center; border: 1px solid black'>" + workRecords[i].startDate + "</td>");
        document.write("<td style='text-align: center; border: 1px solid black'>" + workRecords[i].monday.toFixed(2) + "</td>");
        document.write("<td style='text-align: center; border: 1px solid black'>" + workRecords[i].tuesday.toFixed(2) + "</td>");
        document.write("<td style='text-align: center; border: 1px solid black'>" + workRecords[i].wednesday.toFixed(2) + "</td>");
        document.write("<td style='text-align: center; border: 1px solid black'>" + workRecords[i].thursday.toFixed(2) + "</td>");
        document.write("<td style='text-align: center; border: 1px solid black'>" + workRecords[i].friday.toFixed(2) + "</td></tr>");
    }
 
    document.write("</table>");
}

When calling the function, you can pass empty square brackets for the argument (as if you don't (yet) have an array). Here is an example:

function presentTimeSheets(workRecords) {
    workRecords = [ . . . ];

    . . .
}

presentTimeSheets([]);


        prepare("Jobs Performed", []);
    }
    
</script>
</body>
</html>

This would produce:

Adding an Element to an Array


Previous	Copyright © 2018-2019, FunctionX	Next