CHS Web Design Track

Storing Data in Arrays

• Changing the order in which JavaScript code is executed is known as controlling flow
• Array: a set of data represented by a single variable name
• Declaring and initializing arrays
  • Syntax for creating an array with an array literal (values as a comma-separated list, or no values to initialize an empty array):

    let array = [values];

  • Syntax for creating an array with the new Array() object constructor:

    let array = new Array(values)
    let array = new Array(length)

Elements and indexes

• Element: a value stored in an array
• Index: position of an element within an array; indexes begin with 0
• Syntax to set a specific array value by its index:

  array[index] = value;

• JavaScript arrays are dynamic
  • They automatically expand to allow for new elements
  • Can create sparse arrays in which some values are left undefined so the length is greater than the number of defined values
  • Syntax for the property used to query an array's current size:

    array.length

Multidimensional arrays

• Matrix: a data storage format in which values are arranged in a rectangular grid
  • JavaScript does not support matrices
• Multidimensional array: a structure that nests one array within another to mimic the behavior of a matrix
  • Sample multidimensional array:

    var mArray = [
       [4, 2, 1, 2],
       [1, 3, 18, 6],
       [3, 7, 3, 4]
    ];

• The expression array[x][y] is used to reference values (x is the index of the outer array, or row; y is the index of the inner array, or column)
• length property returns the number of rows; applied to first row to return number of columns

Exploring HTML Collections

• The DOM organizes HTML elements into collections where each element is an HTML Collection Object

Referencing an element within a collection

• Syntax: objects[idref] or objects.idref
• objects is the HTML collection
• idref is either an index number for the element's position or the value of the id attribute assigned to the element

Searching through the DOM

• Syntax for methods that form an HTML collection by searching through DOM elements:

  document.getElementsByClassName(class)
  document.getElementsByTagName(tag)
  document.getElementsByName(name)

• Add the index in brackets to reference a particular element in the collection
• Nest the object reference to search within a specified part of the document, e.g.:

  document.getElementsByTagName(“td”)[0].getElementsByTagName(“p”)

Working with Program Loops

• Program loop: a command block that executes repeatedly until a stopping condition is met

The while loop

• Command block executes while a given condition is true and stops when it is not true
• Syntax:

  while (condition) {
     statements;
  }

• Iteration: one repetition of the command block for a loop
• Include at least one statement that eventually results in a falsy value for the stopping condition to avoid an infinite loop
  • To abort an infinite loop, force-close/force-quit the browser
• Counter: a variable whose value changes with each iteration
• Sample while loop:

  let i = 1;
  while (i <= 5) {
     document.write(i + “<br>”);
     i++; // increase the value of i by 1
  }
  document.write(“<p>The value of i is equal to “ + i + “</p>”);

• This sample while loop writes the following to the web page:
  1<br>2<br>3<br>4<br>5<br>
  <p>The value of i is equal to 6</p>

The do while loop

• The while loop is a pretest loop, where the condition is evaluated before each iteration
• The do while loop is a posttest loop, where the condition is evaluated after the command block has been executed at least once
• Syntax for the do while loop:

  do {
     statements;
  } while (condition);

• Aside from the location of the stopping condition, while and do while loops are the same

The for loop

• A pretest loop that places the initial condition, stopping condition, and iterative expression within a single line
• Syntax of the for loop:

  for (initial; condition; iteration) {
     statements;
  }

• Sample for loop:

  for (let i = 1; i <= 5; i++) {
     document.write(i + “<br>”);
  }

• Preferred method for writing loops
• Sample nested for loops (outer loop iterates through a set of table rows, inner loop iterates through a set of table cells within each row):

  document.write(“<table>”);
  for (let i = 1; i <= 2; i++) {
     document.write(“<tr>”);
     for (let j = 1; j <= 3; j++) {
        document.write(“<td>” + i + “,” + j + “</td>”);
     }
     document.write(“</tr>”);
  }
  document.write(“</table>”);

Writing a for loop

• Syntax for creating a for loop that iterates through the contents of an array or HTML collection:

  for (let i = 0; i < objects.length; i++) {
     statements;
  }

• Sample loop to apply an event handler to every input element in a document:

  let allInputs = document.getElementsByTagName(“input”);
  for (let i = 0; i < allInputs.length; i++) {
     allInputs[i].addEventListener(“click”, checkOrder);
  }

• Method for inserting additional content into an element (not overwriting it):

  element.insertAdjacentHTML(position, text)

• Position is “beforeBegin”, “afterBegin”, “beforeEnd”, or “afterEnd”

Exploring Array Methods for Generating Loops

• Built-in JavaScript array methods can replace program loops, are usually faster, and make code simpler and more compact
• Each employs a callback function, a function passed as a parameter to another function or method
• For example, the forEach() method calls a function for each array element:

  array.forEach(callback, thisArg)

• Callback function syntax:

  function callback(arrValue, index, array) {
     statements;
  }

• To create an efficient loop, place all calculations that will not change during the loop outside of the loop
• Example using the forEach() method to change array values from [1, 3, 5, 10] to [6, 8, 10, 15]:

  let x = [1, 3, 5, 10];
  x.forEach(stepUp5);
  function stepUp5(arrValue, i, arr) {
     arr[i] = arrValue + 5;
  }

• Parameters in this example:
  • arrValue: value of the array element at each iteration
  • i: index number at each iteration
  • arr: name of the array

Adding Decision Making to Your Code

• Decision making is the process of choosing which code to execute in response to a circumstance
• JavaScript decision-making statements (a.k.a. decision-making structures or conditional statements) are special types of statements used for making decisions

The if statement

• Runs a set of statements only if the given condition is true
• Syntax, where condition is a Boolean expression that returns true or false:

  if (condition) {
     statements
  }

• Sample if statement :

  if (day === “Friday”) {
     window.alert(“Get ready for the Weekend!”);
  }

The if else statement

• Runs one command if the given condition is true or a different command if it is false or falsy
• Syntax:

  if (condition) {
     statements if condition is true
  } else {
     statements if condition is not true
  }

• Sample if else statement:

  if (day === “Friday”) {
     window.alert(“Get ready for the Weekend!”);
  } else {
     window.alert(“Have a great day!”);
  }

The else if statements

• Include multiple if statements
• Only the first if statement whose condition is true is executed
• Or if all the if statements' conditions are false, the else statement (default option) is executed
• Syntax:

  if (condition1) {
     statements if condition1 is true
  } else if (condition2) {
     statements if condition2 is true
  } else {
     statements if neither condition1 nor condition2 is true
  }

Nested if and if else statements

• Nested decision-making structure: a program structure that creates a series of conditions that all must be true before an action is taken by nesting decision-making statements within one another
• Sample nested if statements:

  if (day === “Friday”) {
     if (time === “8am”) {
        window.alert(“Start of the last day of the week.”);
     } else if (time === “5pm”) {
        window.alert(“Time to start the weekend!”);
     } else {
        window.alert(“A few more hours until the weekend.”);
     }
  } else if (day === “Monday”) {
     window.alert(“Start of another work week.”);
  } else {
     window.alert(“Have a great day!”);
  }

Conditional statements and browser testing

• Program code should be supported by various users' browsers
• Browser tests either confirm a feature of ECMAScript is supported or provide alternate statements if it is not
  • Allow the most current features to be applied where supported and older features to be used when necessary
• Syntax, where feature is a JavaScript object, property, or method to test:

  if (feature) {
     statements that use the feature
  } else {
     statements that use replacement code
  }

• Sample browser test for the find() method:

  // array of order ids
  let orders = [“33-104”, “21-098”, “88-001”, “14-791”];
  
  // find the first order that has not shipped
  if (orders.find) {
     // the find method is supported by the browser
     let firstUnshipped = orders.find(unshipped);
  } else {
     // alternate code in place of the find method
  }
  
  function unshipped(arrValue) {
     // callback function to determine whether an order has shipped
  }

The switch statement

• Syntax, where expression is a statement that returns a value and label1, label2, etc. are possible values it returns:

  switch (expression) {
     case label1 : statements; break;
     case label2 : statements; break;
     case label3 : statements; break;
  …
     default: statements; break;
  }

• The optional break statement halts execution of the switch statement once a matching case has been found
• Without the break statement, fallthrough occurs—all case statements where a match is found will execute

Managing Program Loops and Conditional Statements

The break statement

• Directs code execution to the next set of statements
• Useful for exiting a loop when the goal is achieved before the stopping condition is met

The continue statement

• Stops the current iteration of a loop and continues to the next iteration
• Useful for skipping an iteration of a loop (e.g., to avoid undefined values that would cause program failure)
• Example that skips undefined values when iterating over an array:

  for (let i = 0; i< customerEmail.length; i++) {
     if (customerEmail[i] === undefined) {
        continue;
     } else {
        // statements to process the e-mail address
     }
  }

Statement labels

• Identify statements in the code so that they can be referenced elsewhere in the program
• Useful when you need to exit a loop/nested loop early and direct the program flow to a specific set of statements rather than the next statement in sequence
• Syntax is label: statements
• Reference syntax is break: label; or continue: label;
• Many developers discourage the use of label statements unless absolutely necessary in order to reduce the risk that the program will become spaghetti code