Modern JavaScript Develop And Design Instructor’s Notes Chapter 5 – Using Control Structures Modern JavaScript Design And Develop Copyright © 2012 by Larry Ullman

Objectives Understand what JavaScript considers to be TRUE and FALSE Know how to write several types of conditionals Recognize the comparison operators Identify and prevent many common bugs related to conditionals

More Objectives Recognize the logical operators Perform string comparisons and searches Define loops Set HTML content using DOM manipulation

True and False These are FALSE: false an empty string NaN null an empty string NaN null undefined One must understand what JavaScript considers to be TRUEin order to use conditionals. These are FALSE, everything else is considered to be TRUE. What out for 0 and an empty string!

If Conditional if (condition) { // Execute these statements. } if is a branching statement. If the condition is TRUE, the statement or statements within the curly braces will be executed. if the condition is FALSE, the statements are not executed. Technically, JavaScript allows you to omit the curly braces if there is only one executed statement, but I almost always recommend you use them. Do indent the statements to indicate they are subservient to the IF.

True or False? var myVar; if (myVar) {… var myVar = 0; if (myVar) {… First two are FALSE; last one is TRUE.

Comparison Operators Operator Meaning > Greater than < Less than >= Greater than or equal to <= Less than or equal to == Equal to != Not equal to === Identical to !== Not identical to Be very careful with =, ==, and ===.

Bugs! Wrong Right var myVar; if (myVar = 2) {… var myVar; if (myVar !== undefined) {… The first two are bugs. The last one is the proper way to right the middle conditional. Must be an IDENTICAL comparison. var myVar = 0; if (myVar) {… var myVar = 0; if (myVar !== false) {…

Tip Perform an identical comparison when you want to confirm a variable has a value of undefined null false As opposed to FALSE-like value.

Comparing Numbers Be careful when checking equality of numbers with decimals.

Solutions Limit decimals Perform string comparisons Perform integer comparisons var n = 1 - .8; n = n.toFixed(1); var m = .3 - .1; m = m.toFixed(1); if (n == m) { // TRUE! Money is normally treated as integers, in cents.

Comparing NaN You cannot compare a number to NaN. NaN !== NaN Use isNaN(). Use isFinite() to also rule out infinite values.

Comparing Strings String comparisons are case-sensitive! Use toLowerCase() or toUpperCase() var s1 = 'cat'; var s2 = 'Cat'; if (s1 == s2) { // FALSE! var s1 = 'cat'; var s2 = 'Cat'; if (s1.toLowerCase() == s2.toLowerCase()) { // FALSE!

Confirming Substrings indexOf() returns 0 if the substring is first 0 is treated as FALSE var s1 = 'cat'; var s2 = 'catalog'; if (s2.indexOf(s1)) { // BUG! var s1 = 'cat'; var s2 = 'catalog'; if (s2.indexOf(s1) != -1) { // Right!

Logical Operators Operator Meaning && And || Or ! Not The OR is two of the PIPE characters together. Not negates anything.

Compound Conditions Condition True/False (0 < 5) && (5 < 10) (0 < 5) && (5 > 10) False (0 > 5) && (5 > 10) (0 < 5) || (5 < 10) (0 < 5) || (5 > 10) (0 > 5) || (5 > 10) A compound AND conditional is only true if all subconditions are TRUE. A compound OR conditional is true if any subcondtion is TRUE. Use parentheses for clarity Short circuit evaluation: JavaScript will stop evaluating a condition as soon as it knows the condition will be TRUE or FALSE.

If-Else Conditional if (condition) { // Execute these statements. // Execute these statements instead. } else is the default clause

If-Else If Conditional // Execute these statements. } else if (condition2) { // Execute these statements instead. } else and if are two separate words. With no else clause, there’s no default.

If-Else If-Else Conditional if (condition1) { // Execute these statements. } else if (condition2) { // Execute these statements instead. } else { // Now execute these. } else clause, which is optional, must always come last.

Switch Conditional switch (expression) { case value1: // Execute these statements. break; case value2: // Execute these statements instead. case value3: // Execute these statements now. default: // Default statements. } Switch is an alternative to if-else if. Must use break or the subsequent statements will continue to execute. default is optional. Performs an identity match.

Conditional Operator (condition) ? return_if_true : return_if_false; var even = ( (n % 2) === 0) ? true : false; Note that this operator returns one of two values; it does not execute statements as the other conditionals do. Can be used inline. Also called ternary or trinary in other languages.

typeof Operator Type typeof Value Undefined undefined Null object Boolean boolean Number number String string Array Object typeof is often a better way to confirm a value’s type. Just be careful with null, array, and object if (typeof myVar == 'number') {

The for Loop for (initial; condition; after) { // Execute these statements. } Two primary loops in JavaScript: for and while. The for loop is used to iterate a known number of times, such as once for each element in an array. The initial expression is always evaluated just once. The condition is checked each time. If TRUE, the statements are executed. The after expression is executed once for each loop iteration. The third clause, or something in the statements, should eventually make the condition be FALSE. for (var i = 1; i <= 10; i++) { // Use i. }

The while Loop while (condition) { // Statements. } do { do…while is always executed at least once.

Setting HTML Content textContent innerText innerHTML if (elem.textContent !== undefined) { // Use elem.textContent. } else { // Use elem.innerText. } Unrelated to control structures, but necessary information is the ability to set HTML content. textContent is the W3C standard and works on most browsers innerText is for IE