Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.
-
Upload
cordelia-floyd -
Category
Documents
-
view
218 -
download
0
Transcript of Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.
![Page 1: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/1.jpg)
Introduction to Control Statements
JavaScript – Part 3
George Mason University
June 3, 2010
![Page 2: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/2.jpg)
Selection Statements
if Statements
switch Statements
Conditional Operators
![Page 3: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/3.jpg)
Simple if Statements
Boolean Expression
true
Statement(s)
false (radius >= 0)
true
area = radius * radius * PI; document.write("The area for the circle of " + "radius " + radius + " is " + area);
false
(A) (B)
if (booleanExpression) { statement(s);}
if (radius >= 0)
{ area = radius * radius * PI;
document.write("The area"
+ " for the circle of radius "
+ radius + " is " + area);
}
![Page 4: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/4.jpg)
Note
if ((i > 0) && (i < 10)) { document.write("i is an " + + "integer between 0 and 10"); }
(a)
Equivalent
(b)
if ((i > 0) && (i < 10)) document.write("i is an " + + "integer between 0 and 10");
Outer parentheses required Braces can be omitted if the block contains a single statement
![Page 5: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/5.jpg)
CautionCommon Logic Error
if (radius >= 0);
{
area = radius*radius*PI;
document.write(
"The area for the circle of radius " +
radius + " is " + area);
}
Wrong
![Page 6: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/6.jpg)
The if...else Statementif (booleanExpression) { statement(s)-for-the-true-case;}else { statement(s)-for-the-false-case;}
Boolean Expression
false true
Statement(s) for the false case Statement(s) for the true case
![Page 7: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/7.jpg)
if...else Example
if (radius >= 0) { area = radius * radius * 3.14159;
document.write(“The area for the “ + “circle of radius “ + radius + “ is “ + area);}else { document.write(“Negative input”);}
![Page 8: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/8.jpg)
Multiple Alternative if Statements
if (score >= 90.0) grade = "A"; else if (score >= 80.0) grade = "B"; else if (score >= 70.0) grade = "C"; else if (score >= 60.0) grade = "D"; else grade = "F";
Equivalent
if (score >= 90.0) grade = "A"; else if (score >= 80.0) grade = "B"; else if (score >= 70.0) grade = "C"; else if (score >= 60.0) grade = "D"; else grade = "F";
![Page 9: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/9.jpg)
Trace if-else statement
if (score >= 90.0) grade = "A";else if (score >= 80.0) grade = "B";else if (score >= 70.0) grade = "C";else if (score >= 60.0) grade = "D";else grade = "F";
Suppose score is 70.0 The condition is false
![Page 10: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/10.jpg)
Trace if-else statement
if (score >= 90.0) grade = "A";else if (score >= 80.0) grade = "B";else if (score >= 70.0) grade = "C";else if (score >= 60.0) grade = "D";else grade = "F";
Suppose score is 70.0 The condition is false
![Page 11: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/11.jpg)
Trace if-else statement
if (score >= 90.0) grade = "A";else if (score >= 80.0) grade = "B";else if (score >= 70.0) grade = "C";else if (score >= 60.0) grade = "D";else grade = "F";
Suppose score is 70.0 The condition is true
![Page 12: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/12.jpg)
Trace if-else statement
if (score >= 90.0) grade = "A";else if (score >= 80.0) grade = "B";else if (score >= 70.0) grade = "C";else if (score >= 60.0) grade = "D";else grade = "F";
Suppose score is 70.0 grade is C
![Page 13: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/13.jpg)
Trace if-else statement
if (score >= 90.0) grade = "A";else if (score >= 80.0) grade = "B";else if (score >= 70.0) grade = "C";else if (score >= 60.0) grade = "D";else grade = "F";
Suppose score is 70.0 Exit the if statement
![Page 14: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/14.jpg)
Note
The else clause matches the most recent if clause in the same block.
int i = 1; int j = 2; int k = 3; if (i > j) if (i > k) document.write("A"); else document.write("B");
(a)
Equivalent
(b)
int i = 1; int j = 2; int k = 3; if (i > j) if (i > k) document.write("A"); else document.write("B");
![Page 15: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/15.jpg)
Note, cont.Nothing is printed from the preceding statement. To force the else clause to match the first if clause, you must add a pair of braces: i = 1;
j = 2;
k = 3;
if (i > j) {
if (i > k)
document.write("A");
}
else
document.write("B");
This statement prints B.
![Page 16: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/16.jpg)
TIP
if (number % 2 == 0) even = true; else even = false;
(a)
Equivalent even = number % 2 == 0;
(b)
![Page 17: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/17.jpg)
Note
if (even == true) document.write( "It is even.");
(a)
Equivalent if (even) document.write( "It is even.");
(b)
![Page 18: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/18.jpg)
Example 3.1 Computing TaxesThe US federal personal income tax is calculated based on the filing status and taxable income. There are four filing statuses: single filers, married filing jointly, married filing separately, and head of household. The tax rates for 2002 are shown in Table 3.1.
![Page 19: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/19.jpg)
Example 3.1 Computing Taxes, cont.if (status == 0) { // Compute tax for single filers}else if (status == 1) { // Compute tax for married file jointly}else if (status == 2) { // Compute tax for married file separately}else if (status == 3) { // Compute tax for head of household}else { // Display wrong status}
![Page 20: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/20.jpg)
switch Statement Flow Chart
status is 0 Compute tax for single filers break
Compute tax for married file jointly break status is 1
Compute tax for married file separatly break status is 2
Compute tax for head of household break status is 3
Default actions default
Next Statement
![Page 21: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/21.jpg)
switch Statementsswitch (status) { case 0: compute taxes for single filers; break; case 1: compute taxes for married file jointly; break; case 2: compute taxes for married file separately; break; case 3: compute taxes for head of household; break; default: document.write("Errors: invalid status");}
![Page 22: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/22.jpg)
switch Statement Rules
switch (switch-expression) {
case value1: statement(s)1;
break;
case value2: statement(s)2;
break;
…
case valueN: statement(s)N;
break;
default: statement(s)-for-default;
}
The switch-expression must always be enclosed in parentheses.
![Page 23: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/23.jpg)
switch Statement Rules
The keyword break is optional, but it should be used at the end of each case in order to terminate the remainder of the switch statement. If the break statement is not present, the next case statement will be executed.
switch (switch-expression) {
case value1: statement(s)1;
break;
case value2: statement(s)2;
break;
…
case valueN: statement(s)N;
break;
default: statement(s)-for-default;
}
The default case, which is optional, can be used to perform actions when none of the specified cases matches the switch-expression. The case statements are executed in sequential
order, but the order of the cases (including the default case) does not matter. However, it is good programming style to follow the logical sequence of the cases and place the default case at the end.
![Page 24: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/24.jpg)
Trace switch statement
switch (ch) { case "a": document.write(ch); case "b": document.write(ch); case "c": document.write(ch);}
Suppose ch is "a":
![Page 25: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/25.jpg)
Trace switch statement
switch (ch) { case 'a': document.write(ch); case "b": document.write(ch); case "c": document.write(ch);}
ch is "a":
![Page 26: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/26.jpg)
Trace switch statement
switch (ch) { case "a": document.write(ch); case "b": document.write(ch); case "c": document.write(ch);}
Execute this line
![Page 27: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/27.jpg)
Trace switch statement
switch (ch) { case "a": document.write(ch); case "b": document.write(ch); case "c": document.write(ch);}
Execute this line
![Page 28: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/28.jpg)
Trace switch statement
switch (ch) { case "a": document.write(ch); case "b": document.write(ch); case "c": document.write(ch);}
Execute this line
![Page 29: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/29.jpg)
Trace switch statement
switch (ch) { case "a": document.write(ch); case "b": document.write(ch); case "c": document.write(ch);}
Next statement;
Execute next statement
![Page 30: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/30.jpg)
Trace switch statement
switch (ch) { case "a": document.write(ch); break; case "b": document.write(ch); break; case "c": document.write(ch);}
Suppose ch is "a":
![Page 31: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/31.jpg)
Trace switch statement
switch (ch) { case 'a': document.write(ch); break; case "b": document.write(ch); break; case "c": document.write(ch);}
ch is 'a':
![Page 32: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/32.jpg)
Trace switch statement
switch (ch) { case "a": document.write(ch); break; case "b": document.write(ch); break; case "c": document.write(ch);}
Execute this line
![Page 33: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/33.jpg)
Trace switch statement
switch (ch) { case "a": document.write(ch); break; case "b": document.write(ch); break; case "c": document.write(ch);}
Execute this line
![Page 34: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/34.jpg)
Trace switch statement
switch (ch) { case 'a': docuent.write(ch); break; case 'b': document.write(ch); break; case 'c': document.write(ch);}
Next statement;
Execute next statement
![Page 35: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/35.jpg)
Example using Else If structure
exam1 = parseFloat(prompt("Enter exam 1 grade (0-100)")); // convert input to numberexam2 = parseFloat(prompt("Enter exam 2 grade (0-100)")); // convert input to number
average = (exam1 + exam2) /2; // need to have converted to number, otherwise string concatenation // here
if (average > 90) letterGrade = "A";else if (average > 80) letterGrade = "B";else if (average >70) letterGrade = "C";else if (average >60) letterGrade = "D";else letterGrade ="F";
document.write("Average: " + average + "Grade: " + letterGrade);}}
----------------------------------------------------------------------------------------------------------------------------
Switch statement only tests for equality and thus one would have to do calculations to use a switch statement for the above problem
![Page 36: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/36.jpg)
Conditional Operator
if (x > 0) y = 1else y = -1;
is equivalent to
y = (x > 0) ? 1 : -1;(booleanExpression) ? expression1 : expression2
Ternary operatorBinary operatorUnary operator
![Page 37: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/37.jpg)
Conditional Operator
if (num % 2 == 0)
document.write(num + “ is even”);else document.write(num + “ is odd”);
document.write( (num % 2 == 0)? num + “ is even” : num + “ is odd”);
![Page 38: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/38.jpg)
Conditional Operator, cont.
(booleanExp) ? exp1 : exp2
![Page 39: Introduction to Control Statements JavaScript – Part 3 George Mason University June 3, 2010.](https://reader030.fdocuments.in/reader030/viewer/2022032612/56649efa5503460f94c0ba9c/html5/thumbnails/39.jpg)
39
Arithmetic Expressions
)94
(9))(5(10
5
43
y
x
xx
cbayx
is translated to
(3+4*x)/5 – 10*(y-5)*(a+b+c)/x + 9*(4/x + (9+x)/y)