JavaScript: Conditionals contd. Comparing for equality Logical And/Or

Learning Objectives By the end of this lecture, you should be able to: Describe the difference between the assignment operator = and the equality operator == Describe the use and application of the logical ‘OR’ operator: || Describe the use and application of the logical ‘AND” operator: &&

Relational operators The relational operators allow us to test the relationship between two items. Often this involves numbers (e.g. age>=65), but we also frequently may want to compare two Strings such as to see if a user’s password matches the password on file. Inequality >, >=, <, <= Not equal != Equal == We haven’t discussed these last two yet… 3

Comparing for ‘equality’ We’ve discussed several examples comparing items for greater than or less than. What about comparing two items to see if they are the same? Example: Prompt the user for the day of the week. If it’s a Sunday, print: “No need to pay the meter!” var day; day = document.getElementById('txtDay').value; //Note: No ‘parse’ here since 'day’is not a quantity! if (day == "Sunday") { alert("No need to pay the meter!"); } ***** Note the comparison operator ‘ == ‘ . If you want to compare two values, you need to use ‘==‘. Using one equals sign ‘=‘ will NOT work!

‘=‘ vs ‘==‘ Don’t confuse these! The equals symbol ‘=‘ is the operator used to assign some value to a variable. For example: var age = 34; //this is an “assignment” If we want to compare values, we can not use ‘=‘ because, again, the equals operator assigns. That is, the ‘=‘ operator does not compare! If we want to compare, we use the (very similar) operator: ‘==‘ if (name == “Bob”) …. if (age == 65) …. if (birthday == todayDate) ….

So, don’t forget… The moral is that whenever you are trying to compare a variable to a value, you should check carefully check to make sure your if and if-else statements only use the equality operator: == Typing = instead of == will nearly always produce unexpected behavior. In addition, in a lengthy and/or complex program, this error can sometimes be quite difficult to track down! 6

if (day == "Sunday") Why did we need quotes? Supposing we had instead written: if (day == Sunday) Can you spot the problem? In this case, JavaScript would think that Sunday was a variable. By placing the word ‘Sunday’ inside quotations, we are telling JavaScript that we are comparing the variable called ‘day’ with a String of text (value of ‘Sunday’)

day = document.getElementById('txtDay').value; if (day == "Sunday") { If the day is a Sunday, tell them they don’t have to feed the meter. If it is not Sunday, say: “Better get some quarters!” var day; day = document.getElementById('txtDay').value; if (day == "Sunday") { alert("No need to pay the meter!"); } else alert("Better get some quarters!");

Can your user spell? A top-notch programmer will go out of their way to make sure that their program will work regardless of the crazy kinds of things that a user might try to do. This can occupy lots of time and code, but the idea is important. For example, what if in our parking-meter example, a user types ‘sunday’ (no capital)? Answer: the conditional would evaluate to false since “sunday” does NOT equal “Sunday”. var day = "sunday"; // Note lower case ‘s’ if (day == "Sunday") // Will be FALSE

Anticipating different input Let’s re-write our conditional so that if the user enters “sunday” OR “Sunday” the conditional will hold true regardless. if (day == "Sunday" OR day == "sunday") … The word “OR” is not part of JavaScript. However, there IS a way of representing it: || The | (usually found above enter on your keyboard) is called the “pipe” character. Putting two pipes together (no space) is known as a “logical or”. When you have two or more comparisons separated by the “logical or” || , what has to happen for the conditional as a whole to evaluate to true? Answer: If *ANY* of the comparisons is true, the entire conditional will evaluate to true. if (day == "Sunday" || day == "sunday") If ANY of the above comparisons is true, the entire conditional will be true Incidentally, you don’t ned all the extra spaces. I just put them in there for teaching purposes. if (day == "Sunday" || day == "sunday" || day== "Domingo" || day== "Vendredi" || day== "Sondag") Again, if ANY of the above comparisons is true, the entire conditional will evaluate as true.

Slightly improved version: If the day is a Sunday, tell them they don’t have to feed the meter. If it is not Sunday, say: “Better get some quarters!” var day; day = document.getElementById('txtDay').value; if (day == "Sunday" || day== "sunday" ) { alert("No need to pay the meter!"); } else alert("Better get some quarters!");

Logical “AND” ( && ) Suppose you wanted to write a statement where two (or more) conditions must ALL be met for the entire conditional to be true. For example, suppose you wanted to see if a user was registered to vote. You might want to ask: Is the user 18 or older AND are they registered to vote? In other words, both conditions have to be true. The syntax follows: if ( age >= 18 && registered=="yes") { alert("You may vote") } else alert("You may not vote"); You can have as many conditions as you like inside the main conditional. When separated by logical AND ( && ), the rule is that ALL conditions must be true for the whole conditional to evaluate to true.

Logical “AND” ( && ) You can have as many conditions as you like inside the main conditional. When multiple conditions are separated by ‘&&’, all of them must be true for the whole expression to be true. if ( age >= 18 && registered=="yes" && notFelon=="yes") { alert("You may vote") } else alert("You may not vote");

Using braces for ‘if’ statements: If your ‘if’ statement has only one line of code, the braces are optional. if (condition) { statement 1 statement 2 } statement In general, I recommend that you ALWAYS use braces – even in those cases where your block is only one statement long. Only once you get very comfortable, should you use this shortcut. In fact, the only reason I’m showing it to you here is in case you see it elsewhere. For this course, you should always use braces. more than one statement – braces are required one statement only – braces are optional 14

File: vote_check.htm