JavaScript Programming/Conditions

This lesson introduces JavaScript conditions.

Objectives and Skills

edit

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

edit
  1. Wikipedia: Structured programming
  2. Wikipedia: Conditional (computer programming)
  3. Wikibooks: JavaScript/Control structures
  4. Mozilla: if...else

Multimedia

edit
  1. YouTube: How to Create Conditions in JavaScript | Conditional Statements | JavaScript Tutorial
  2. YouTube: Introduction to Conditional Statements - p5.js Tutorial
  3. YouTube: JavaScript if - else Statement
  4. YouTube: How to use if/else conditions in JavaScript
  5. YouTube: JavaScript Tutorial for Beginners - 13 - Function and if statement
  6. YouTube: JavaScript Tutorial - Switch Statement
  7. YouTube: Switch - How to Use the JavaScript Switch Statement
  8. If Else Conditional Statements & Switch In JavaScript | JavaScript Tutorial For Beginners

Examples

edit

Activities

edit

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

edit
  1. 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]
  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.
  3. 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.
  4. 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.
  5. 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

edit
  1. 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.
  2. 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.
  3. 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

edit
  1. Review Wikipedia: Is functions. Update one or more of the programs above to include input validation for all numeric input.
  2. 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

edit
  • 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

edit
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]

See Also

edit

References

edit
  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. https://www.w3schools.com/js/js_booleans.asp
  15. https://www.w3schools.com/js/js_switch.asp
  16. https://www.w3schools.com/js/js_comparisons.asp
  17. https://www.w3schools.com/js/js_if_else.asp
  18. https://www.w3schools.com/js/js_switch.asp
  19. https://www.w3schools.com/js/js_if_else.asp
  20. https://www.w3schools.com/js/js_if_else.asp
  21. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else
  22. https://www.w3schools.com/js/js_comparisons.asp
  23. https://www.educba.com/nested-if-in-javascript/
  24. "JavaScript Switch Statement". www.w3schools.com. Retrieved 2019-09-27.