Tag Archives: false

Using AND/OR operators in ‘If’ statements with JavaScript.

You can specify more than one condition in an IF statement. You can specify whether several conditions must evaluate to true for code to run or whether one of several possible conditions must evaluate to true for code to run. This involves using AND and OR operators. The AND operator in JavaScript is && and the OR operator in JavaScript is II. The NOT operator is a single ! (exclamation mark).

You can watch the video below or click here to view it on YouTube. Make sure you also have a look at the sample code further below and feel free to use and modify it.

So after watching the video, let’s recap what logical operators are all about. Using logical operators such as and/or allow a programmer to write complex if statements. For example, you can check if a number is greater than 10 AND is also less than 20 (both conditions have to evaluate to true for the code to run inside the if statement). Or, you can check if a number is less than 5 OR greater than 10 (only one condition has to evaluate to true for the code to run inside the if statement)

Logical operators:

  • The symbols && are used for the and operator in JavaScript
  • The || symbols are used for the or operator in JavaScript
  • A single exclamation mark ! can also be used as a not operator.

Check out the sample code below to see how these logical operators can be used to form complex if statements in JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Nesting If Statements</title>
 <script type="text/javascript">
 
 // This is a better way than using nested if statements
 // You can use and/or operators in JS (known as logical operators)
 // The AND operator is &&
 // The OR operator is ||
 
 var firstName = "John";
 var lastName = "Smith";
 
 if(firstName=="John" && lastName=="Smith"){
 document.write("Hello, John Smith!");
 // The message above will only be displayed if firstName is John AND lastName is Smith.
 // Try using || instead of && and change the value of one of the variables. What happens?
 }
 
 </script>
 
</head>
<body>
 
</body>
</html>

Next tutorial: Switch statements

Nested ‘If’ Statements in JavaScript

This tutorial explains how to create nested IF statements in JavaScript. A nested IF statement is an IF statement that is inside another IF statement. Also known as…ifception 😉 Using nested IF statements is not always the best way to code but it is handy to know them anyway.

The sample code below shows how to use if statements inside other if statements (nested if statements).

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Nesting If Statements</title>
 <script type="text/javascript">
 
 var age = 21;
 var maxAge = 30;
 var minAge = 18;
 
 // Below is an example of using if statements inside other if statements
 // This is called nested if statements.
 
 if(age>=minAge){
 if(age<=maxAge){
 document.write("You are within the accepted age range.");
 }
 else{
 document.write("You are above the accepted maximum age.");
 }
 }
 else{
 document.write("You are under the accepted minimum age.");
 }
 
 </script>
 
</head>
<body>
 
</body>
</html>

Next tutorial: Using and/or operators in a complex If statement

‘If’ Statements in JavaScript

This tutorial explains how to use IF statements for conditional programming in JavaScript. An IF statement can be used to make decisions based on whether a condition evaluates to true or false. Watch the video below or click here to view it on YouTube.

An ‘if statement’ is used to test a condition. If the test condition evaluates to true (Eg. x is less than y), then the code inside the if statement will run. If the test condition evaluates to false, then the code inside the if statement won’t run and the program will continue on.

Operators that you can use in JavaScript to make comparisons include:

Equal to ==
Not equal to !=
Greater than >
Less than <
Greater than or equal to >=
Less than or equal to <=

Take a look at the sample code of an if statement below.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - If Statements</title>
 <script type="text/javascript">
 
 /* For an 'if' statement, the syntax should look like:
 
 if(condition to be tested){
 //run code here
 }
 
 */
 
 var age = 20 // declare the variable age
 
 if(age>=18){
 document.write("You are old enough to vote."); // this message only displays if age is greater than or equal to 18
 }
 
 /* Operators you can use include:
 == equal to
 != not equal to
 > greater than
 < less than
 >= greater than or equal to
 <= less than or equal to
 */
 
 </script>
 
</head>
<body>
 
</body>
</html>

Often when using if statements, you will want to test more than just one condition. The sample code below explains how to do this.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - If Else Statements</title>
 <script type="text/javascript">
 
 // You can have a single if statement (tests one condition)...
 // However, you can also have an IF statement that tests multiple conditions
 // Eg. You can have an if and an else statement (tests two conditions)
 // You can have an if statement, else if statements, and an else statement (tests several conditions)
 
 // if - is the first condition to test
 // else if - is used to test other conditions
 // else - will run a piece of code only if none of the other condition tests have evaluated to true
 
 var age = 16
 
 if(age>=18){
 document.write("You are old enough to vote.");
 }
 else if(age==17){
 document.write("You can vote after your next birthday.");
 }
 else{
 document.write("You cannot vote yet.");
 }
 
 // Make sure you don't confuse the = sign (used for assigning values to variables) for == (used for comparisons)
 
 </script>
 
</head>
<body>
 
</body>
</html>

Next tutorial: Nested if statements