Relational Operators are used to compare two primitive values to determine equality and/or order. Each of the following operators, when placed between two literals or variables, will produce a boolean value of TRUE or FALSE. The Java relational operators are:
< - less than
> - greater than
<= - less than or equal to
>= - greater than or equal to
!= - not equal to
== - equal to
Notice that the comparison for equality is two equals signs (==). Be careful not to confuse this with assignment (=), as the results will be unreliable.
let n1=5;
let n2=7;
console.log(n1>n2); //false;
console.log(n1<n2); //true;
console.log(6>=8); //false;
console.log(6<=8); //true;
console.log(n1!=5); //false;
console.log(n1==5); //true;
Basic Conditions
The keyword ‘if’ signifies a conditional statement in javascript. A condition in javascript can be written as a simple if or as an if/else statement.
A simple if statement provides a section of code that will run ONLY when the condition is true. Here is an example testing if a user has won a scholarship.
window.alert("Welcome to our site.");
if(scholarship=="yes"){
document.getElementById('output').innerHTML+="Congratulations, you have won a scholarship.";
}
document.getElementById('output').innerHTML+="Please feel free to navigate our site for information about paying for college.";
In this example, ALL viewers will see the output from lines 1 and 5. However, only users with a scholarship value of "yes" will see the output from line 3. This line is conditional, only output when the boolean expression in the parenthesis of the if statement evaluates to true.
Note that in line(2), there is no semi-colon at the end of the line AND that the conditional code is contained in a set of curly {} braces.
An if/else statement provide two conditional paths - one to be executed when the boolean expression is true and another for when it is false. Here is an example that checks a string to see if it is equal to “password”:
let input=document.getElementById('password').value;
if(input=="password")
document.getElementById("welcome").innerHTML="Welcome!!";
else
window.alert("Sorry, your password is incorrect!");
In this example, ALL users will see the prompt to enter their password. If they enter the correct password, they will see a Welcome message, otherwise they will see the Sorry message.
A few things to note here:
There are no curly braces. This is because each of the conditional sections of code is only one line. In this type of situation, the curly braces are optional. However, if either section had more than one line of conditional code, they would have to be contained in curly braces.
Still no semi-colon after the condition
The else portion of the code does not have a condition or parenthesis. This is because it is connected to the if statement. The if statement has a condition. When that expression is true, the if code runs; when it is false, the else code runs.
Logical Operators and Compound Conditions
The three logical operators we will focus on are AND(&&), OR(||), and NOT(!). These operators can be used to combine other boolean relations.
AND
Given two statements:
the world is round
grass is green
We qualify both of these statements with a boolean value of true. We can combine them with an AND to make this statement:
The world is round AND the grass is green.
Since both statements are true, the entire statement is TRUE.
Let's take a look at a few other examples of AND statements:
The world is round AND the grass is blue
The world is flat AND the grass is green.
The world is flat and the grass is red.
In line(1), the first part of the statement is true, but the second part is false. So, the whole statement evaluates to FALSE.
In line(2), the first part is false and the second part is true. The whole statement evaluates to FALSE.
In line(3), both parts are false so the statement is FALSE.
An AND statement evaluates to true if and only if BOTH parts of the statement is true.
Now, we will take a look at this in code. One of the most important things about writing an AND statement, also known as a conjunction, is that both sides of the statement MUST be able to stand alone as boolean statements. In other words, each side of the conjunction must, on its own, evaluate to true or false. So, if we want to check if a user age is equal to 18 and that their zip code is equal to 19446, we would write the following:
age==18 && zip==19446
Notice how age==18 will evaluate to true or false based on the value of age, as will zip==19446.
OR
We will keep the same two statements from our previous example and this time, we will combine them with an OR statement, also known as a disjunction. Here are several statements combined using OR:
The world is round OR the grass is green.
The world is round OR the grass is purple.
The world is a cube OR the grass is green.
The world is a pyramid OR the grass is orange.
In line(1), both parts are true so the statement evaluates to TRUE.
In line(2), the first part is true and the second part is false. But, because it is an or, the entire statements is TRUE.
In line(3), the first part is false and the second part is true. Again, the statement evaluates to TRUE.
It is only in the fourth example, line(4), that we find the statement to be false, because both parts are false.
An OR statement evaluates to true if either part is true.
When writing code, the same is true in a disjunction as in a conjunction, both parts MUST be able to evaluate to true or false on their own. Let's look at an example where we want to know if a user's input is a 4 or a 5:
input==4 || input==5
A common mistake is that students write input==4 || 5. This is NOT correct as the right side (5) DOES NOT evaluate to true or false as it is not a standalone condition.
NOT
The NOT operator (!), also known as negation, changes the boolean value of the expression. If the statement was true, it is now false, and vice-versa.
!(5==5)
In the above example, the value of the statement is false because 5==5 is true and the negation of that is false.
The negation operator can have a more interesting effect on compound conditions.
!(a&&b) => !a || !b
!(a||b) => !a && !b
Notice that the negation outside the parenthesis not only negates the boolean relations, but also changes a conjunction to a disjunction and a disjunction to a conjunction.
Nested Conditions
Sometimes, a more complex system of conditions is necessary. Nested conditions are when a condition is placed in another condition, either inside the if block or in the else block. Here is an example that checks to see if a senior has met their Government class requirement:
if(grade==12){
if(govmt>=60)
window.alert("Gov Req. Met");
else
window.alert("Need to re-take Gov.");
}
else{
window.alert("Make sure you take gov. before you graduate.");
}
See that in this example, there is a full if/else statement inside the if portion of another if/else statement. Any valid code is allowed to be written inside a condition, including other conditions. The code about the grade being >=60 will ONLY execute if the student is in 12th grade. Otherwise, control shifts directly to line(7) and 8
This type of nesting can go very deep, depending on the desired options for the user. Often times, when nesting in the else block, we find that we are generating a list of mutually-exclusive events (events where one or the other, but not both can occur). When this is the case, we use an else-if chain:
In this example, our options are mutually exclusive - it is not possible for a student to get an 8 AND a 9 at the same time. They can only get one or the other. So, we can use an else-if chain - a shorthand of nested conditions.
Don't be confused thinking that there are conditions with the else statements. Notice that everywhere there is a condition, there is an if statement as well.
Finally, the final else is the catch-all. If none of the conditions evaluate to true, then the final else will catch all other inputs and assign a value of 'F';