JavaScript Programming/Conditions

This lesson introduces JavaScript conditions.

Objectives and Skills

Objectives and skills for this lesson include:^[1]

Evaluate expressions that use logical and comparison operators
- ==; !=; <, >; <=; >=; !; &&; ||
Complete and debug decision statements
- if; else if; switch; nested if
Complete and debug code that performs input validation
- Case; string comparisons; Not-A-Number (NaN)

Readings

Multimedia

Examples

Activities

Complete one of the following activities for each type of condition using external JavaScript code. Apply JavaScript best practices, including comments, indentations, naming conventions, and constants. Use input elements for input and respond to input or change events or add buttons and respond to click events. Use HTML elements for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Create test data to validate the accuracy of each program. Add comments at the top of the program and include references to any resources used.

If Conditions

Create a program to prompt the user for hours and rate per hour to compute gross pay (hours * rate). Include a calculation to give 1.5 times the hourly rate for any overtime (hours worked above 40 hours).^[2]
Create a program that asks the user how old they are in years. Then ask the user if they would like to know how old they are in (M)onths, (D)ays, (H)ours, or (S)econds. Use if/else conditional statements to display their approximate age in the selected timeframe. Do not perform any unnecessary calculations.
Review MathsIsFun: US Standard Lengths. Create a program that asks the user for a distance in miles, and then ask the user if they want the distance in US measurements (yards, feet, and inches) or in metric measurements (kilometers, meters, and centimeters). Use if/else conditional statements to determine their selection and then calculate and display the results.
Review MathsIsFun: Area of Plane Shapes. Create a program that asks the user what shape they would like to calculate the area for. Use if/else conditional statements to determine their selection and then gather the appropriate input and calculate and display the area of the shape.
Create a program that helps the user determine what sock size to order based on their shoe size:
    < 4 = extra small
    4 to 6 = small
    7 to 9 = medium
    10 to 12 = large
    13+ = extra large
Use if/else conditional statements to determine their selection and then display the results. Round half-sizes up to the next whole size. One option for rounding is to add 0.5 and then convert to an integer.^[3]

Switch Conditions

Create a program that asks the user how old they are in years. Then ask the user if they would like to know how old they are in (M)onths, (D)ays, (H)ours, or (S)econds. Use switch conditional statements to display their approximate age in the selected timeframe. Do not perform any unnecessary calculations.
Review MathsIsFun: Area of Plane Shapes. Create a program that asks the user what shape they would like to calculate the area for. Use switch conditional statements to determine their selection and then gather the appropriate input and calculate and display the area of the shape.
Create a program that helps the user determine what sock size to order based on their shoe size:
    < 4 = extra small
    4 to 6 = small
    7 to 9 = medium
    10 to 12 = large
    13+ = extra large
Use switch conditional statements to determine their selection and then display the results. Round half-sizes up to the next whole size. One option for rounding is to add 0.5 and then convert to an integer.^[4]

Input Validation

Review Wikipedia: Is functions. Update one or more of the programs above to include input validation for all numeric input.
Extend one or more of the programs above by adding structured exception handling statements (try-catch) to handle any runtime errors caused by the user entering invalid values for the input.

Lesson Summary

Conditional statements are used to perform different actions based on different decisions.^[5]
The if statement is to specify a block of code to be executed, if a specified condition is true.^[6]
The else statement is to specify a block of code to be executed, if the same condition is false.^[7]
the else if statement is to specify a new condition to test, if the first condition is false.^[8]
The switch statement is used to perform different actions based on different conditions.^[9]
Switch cases use strict comparison (===). The values must be of the same type to match.^[10]
Switch statements are better to use over If/Else statements when you are aware of the exact data that can be input.[source?]
Break keyword is used to break down from the switch block. Once the match is found, and the associated code block is executed, the following cases are not being tested against the condition.^[11]
The switch statement may have an optional default case. It specifies the block of code that runs if there is no case match.^[12]
Conditional statements can be inside of other conditional statements, and can have multiple conditions to test.^[13]
When writing conditions based on equality, "==" is used rather than "=", which is the assignment operator.[source?]

Key Terms

boolean: A datatype that can only hold a value of either TRUE or FALSE.^[14]

break: Keyword that breaks out of the switch block. This will stop the execution of inside the block.^[15]

comparison operators: Comparison operators are used in logical statements to determine equality or difference between variables or values.^[16]

conditional statement: It is a condition that has to be fulfilled (true) to perform an action.^[17]

default: Keyword that specifies the code to run if there is no case match.^[18]

"else" statement: The else statement is to specify a block of code to be executed if the same condition is false.^[19]

"else if" statement: The else if statement specifies a new condition if the first condition is not met.^[20]

"if" statement: The if statement executes a statement if a specified condition is true. If the condition is false, the code within the If statement is ignored, and the code immediately after will run.^[21]

logical operators: Logical operators are used to determine the logic between variables or values.^[22]

nested if statement: An if statement inside another if statement (multiple if statements).^[23]

switch: Used to select one of many code blocks to be executed based on evaluation of a single expression.^[24]

References

← Events

JavaScript Programming

While Loops →

[1] Microsoft: Exam 98-382 Introduction to Programming Using JavaScript

[2] PythonLearn: Conditional Execution

[3] Wikibooks: Programming Fundamentals/Practice: Conditions

[4] Wikibooks: Programming Fundamentals/Practice: Conditions

[5] W3Schools: JavaScript if else and else if

[6] W3Schools: JavaScript if else and else i

[7] W3Schools: JavaScript if else and else i

[8] W3Schools: JavaScript if else and else i

[9] W3Schools: JavaScript switch Statement

[10] W3Schools: JavaScript switch Statement

[11] W3Schools: JavaScript switch Statement

[12] W3Schools: JavaScript switch Statement

[13] MDN | If... Else

[14] ttps://www.w3schools.com/js/js_booleans.asp

[15] ttps://www.w3schools.com/js/js_switch.asp

[16] ttps://www.w3schools.com/js/js_comparisons.asp

[17] ttps://www.w3schools.com/js/js_if_else.asp

[18] ttps://www.w3schools.com/js/js_switch.asp

[19] ttps://www.w3schools.com/js/js_if_else.asp

[20] ttps://www.w3schools.com/js/js_if_else.asp

[21] ttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else

[22] ttps://www.w3schools.com/js/js_comparisons.asp

[23] ttps://www.educba.com/nested-if-in-javascript/

[24] "JavaScript Switch Statement". www.w3schools.com. Retrieved 2019-09-27.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]

[24]