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

2. 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

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

4. 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!

5. 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.

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

7. 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 ===.

8. 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) {…

9. 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.

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

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

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

13. 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!

14. 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!

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

16. 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.

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

18. 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.

19. 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.

20. 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.

21. 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.

22. 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') {

23. 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. }

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

25. 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