JavaScript Operators and Functions PDF

Document Details

Uploaded by Deleted User

11 ICT A - Adviser

Ms. Christine Jane B. Gozon

Tags

javascript programming operators computer science

Summary

These notes cover JavaScript operators and functions, including arithmetic, assignment, comparison, logical, increment/decrement, ternary, and conditional operators, and functions. The notes are part of a Computer Programming 1 course.

Full Transcript

COMPUTER PROGRAMMING 1 Home About Content Others JavaScript Operators MS. CHRISTINE JANE B. - GOZON 11 ICT A - ADVISER COMPUTER PROGRAMMING 1 Home About Content Others JAVASCRIPT OPERATORS JavaScript operators are special symbols used to perform...

COMPUTER PROGRAMMING 1 Home About Content Others JavaScript Operators MS. CHRISTINE JANE B. - GOZON 11 ICT A - ADVISER COMPUTER PROGRAMMING 1 Home About Content Others JAVASCRIPT OPERATORS JavaScript operators are special symbols used to perform operations on values or variables. These operations can be mathematical, logical, assignment-based, or related to object properties. Understanding operators is fundamental for writing efficient and functional JavaScript code. COMPUTER PROGRAMMING 1 Home About Content Others COMPUTER PROGRAMMING 1 Home About Content Others ARITHMETIC OPERATORS These operators perform basic mathematical operations like addition, subtraction, multiplication, and division. COMPUTER PROGRAMMING 1 Home About Content Others ASSIGNMENT OPERATORS Assignment operators are used to assign values to variables. COMPUTER PROGRAMMING 1 Home About Content Others Comparison Operators These operators are used to compare two values and return a Boolean value (true or false). COMPUTER PROGRAMMING 1 Home About Content Others Comparison Operators These operators are used to compare two values and return a Boolean value (true or false). COMPUTER PROGRAMMING 1 Home About Content Others Logical Operators Logical operators are used to perform logical operations, often in conditional statements. COMPUTER PROGRAMMING 1 Home About Content Others Increment and Decrement Operators These operators are used to increase or decrease the value of a variable by 1. COMPUTER PROGRAMMING 1 Home About Content Others Ternary (Conditional) Operator A shorthand way of performing conditional operations. It evaluates a condition and returns one of two values based on whether the condition is true or false. COMPUTER PROGRAMMING 1 Home About Content Others Why is it important to understand the difference between == and ===? - COMPUTER PROGRAMMING 1 Home About Content Others What happens if you try to use the logical OR (||) operator with false values? COMPUTER PROGRAMMING 1 Home About Content Others How does the ternary operator help in simplifying conditional logic in code? COMPUTER PROGRAMMING 1 Home About Content Others JavaScript Functions MS. CHRISTINE JANE B. - GOZON 11 ICT A - ADVISER COMPUTER PROGRAMMING 1 A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it). COMPUTER PROGRAMMING 1 Home About Content Others JavaScript Function Syntax A JavaScript function is defined with the function keyword, followed by a name and parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas: (parameter1, parameter2,...) The code to be executed, by the function, is placed inside curly brackets: {} COMPUTER PROGRAMMING 1 Home About Content Others JavaScript Function Syntax Function parameters are listed inside the parentheses () in the function definition. Function arguments are the values received by the function when it is invoked. Inside the function, the arguments (the parameters) behave as local variables. COMPUTER PROGRAMMING 1 Home About Content Others Function Invocation The code inside the function will execute when "something" invokes (calls) the function: When an event occurs (when a user clicks a button) When it is invoked (called) from JavaScript code Automatically (self invoked) COMPUTER PROGRAMMING 1 Home About Content Others Function Return When JavaScript reaches a return statement, the function will stop executing. If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement. Functions often compute a return value. The return value is "returned" back to the "caller": COMPUTER PROGRAMMING 1 Home About Content Others Functions Used as Variable Values COMPUTER PROGRAMMING 1 Home About Content Others Local Variables COMPUTER PROGRAMMING 1 Home About Content Others JavaScript Conditional Statements (If, If Else, Ifs) MS. CHRISTINE JANE B. - GOZON 11 ICT A - ADVISER COMPUTER PROGRAMMING 1 Home About Content Others Conditional Statements In JavaScript, we have the following conditional statements: Use if to specify a block of code to be executed, if a specified condition is true Use else to specify a block of code to be executed, if the same condition is false Use else if to specify a new condition to test, if the first condition is false Use switch to specify many alternative blocks of code to COMPUTER PROGRAMMING 1 Home About Content Others In JavaScript, the if-else statement is used to make decisions in your code based on conditions. It allows you to execute certain blocks of code when a condition is true and another block when the condition is false. This is fundamental for controlling the flow of your COMPUTER PROGRAMMING 1 Home About Content Others Basic if Statement The if statement allows you to execute a block of code only if a specified condition is true. If the value of age is greater than or equal to 18, the message "You are an adult." will be printed. If the condition is COMPUTER PROGRAMMING 1 Home About Content Others if-else if-else Statement When you have multiple conditions to check, you can use the if-else if-else statement to handle multiple scenarios. The first condition checks if the temperature is greater than 30. If not, the else if checks if the temperature is between 20 and 30 (inclusive). If none of these conditions are true, the else block will run, COMPUTER PROGRAMMING 1 Home About Content Others Activity: Decision-Making Application Let’s build a simple program that evaluates a student’s exam score and provides feedback based on the following criteria: If the score is 90 or above, the student gets an "A". If the score is 70 to 89, the student gets a "B". - If the score is 50 to 69, the student gets a "C". COMPUTER PROGRAMMING 1 Home About Content Others The JavaScript Switch Statement MS. CHRISTINE JANE B. - GOZON 11 ICT A - ADVISER COMPUTER PROGRAMMING 1 Home About Content Others Switch Statement The switch statement is a control flow structure in JavaScript that is used to perform different actions based on different conditions. It provides a more readable and efficient alternative to multiple if-else if statements when you have many conditions to check. COMPUTER PROGRAMMING 1 Home About Content Others Basic Syntax of switch The basic syntax of the switch statement is as follows: expression: The value you want to compare against the cases. case valueX: Each case represents a possible value of the expression. break: The break statement ends the switch block. If omitted, the program will continue to the next case (known as "fall- through"). default: This is optional. If none of the COMPUTER PROGRAMMING 1 Home About Content Others Example: Basic switch Statement In this example, we use a switch statement to evaluate a day of the week and print a message based on the day. The day variable is compared against each case. Since day is "Monday", the first case will be executed, and "Start of the work week." will be logged. The break statement ensures that the program stops checking further case values once a match is found. COMPUTER PROGRAMMING 1 Home About Content Others switch with break and fall- through If the break statement is omitted, the program continues executing the next case statements, even if they don’t match. This behavior is called fall-through. Since there is no break statement after the case "apple", the program continues to execute the code for "banana", "orange", and default—even though they don't match the fruit variable. To prevent this, always use break unless you want fall- COMPUTER PROGRAMMING 1 Home About Content Others switch with Multiple Cases You can also group multiple case values together to handle them in the same block. The cases for "red", "blue", and "green" are grouped together. If color is any of these three values, the message "It's a primary color." will be logged. COMPUTER PROGRAMMING 1 Home About Content Others switch with Expressions You can also use expressions within the switch statement. The switch expression is true, and each case evaluates a boolean expression. The first condition that evaluates to true will execute, so for age = 25, it will print "You are an adult." COMPUTER PROGRAMMING 1 Home About Content Others Comparison Between if-else if and switch Both if-else if and switch can be used to evaluate multiple conditions. However, switch is more readable and efficient when you have many specific conditions to check. Here's a comparison: COMPUTER PROGRAMMING 1 Home About Content Others Comparison Between if-else if and When to use if-elseswitch if: If you need to check complex conditions (e.g., using logical operators, ranges, or functions), if-else if is better. When to use switch: When you have multiple possible exact matches for a variable and need to perform COMPUTER PROGRAMMING 1 Home About Content Others Example: Using switch for Calculator Operations The switch checks the value of operation and performs the corresponding mathematical operation. It adds, subtracts, multiplies, or divides based on the value of COMPUTER PROGRAMMING 1 Home About Content Others switch Best Practices Use switch for clear, predictable values: switch works best when you have discrete, known values that the expression can match against. Use break to prevent fall-through: Always include break after each case, unless you intend to use fall-through for specific cases. Avoid complex conditions in case: If conditions are more complex (e.g., using logical operators), it COMPUTER PROGRAMMING 1 Home About Content Others Conclusion The switch statement is a powerful tool in JavaScript for handling multiple conditions in a clean and readable way. It’s especially useful when you have many specific, constant values to compare against. Here's a quick recap of when to use switch: Use switch for matching specific values (like strings, numbers, or boolean expressions). Use if-else if when you have complex conditions or ranges COMPUTER PROGRAMMING 1 Home About Content Others PRACTICE EXERCISE: Create Age Checker webpage application using Switch case statement. -

Use Quizgecko on...
Browser
Browser