Account Log In - Home/Outlines - Books - Contact Us - Support - Employment -

Select your course... Course Outlines     Advanced Flash     Advanced JavaScript and CSS     CSS     Dreamweaver     Dynamic HTML     Flash     JavaScript     Photoshop     XHTML

Select your theme... Canada-ehHalloween_JheryllChristmas_JheryllPrintBeach_StevePresentationHalloween_KhalWol_Tad

DHTML

JavaScript Programming Fundamentals

Operators, Assignments and Comparisons

One thing we need to talk about before we can go much further in our JavaScript tutorial is operators and assignments. Without these, complex logical operations cannot take place. This lecture will talk about operators, assignments, and comparisons. First, we will discuss operators, and we don't mean the kind that work at the phone company.

This lecture might seem a bit like math class all over again, and it might make your head hurt, but it is important to know how these operators, assignments and comparisons work before we can get to the good stuff.

Expressions

Before we get heavy into operators, we should explain what an expression is. An expression is a JavaScript statement that assigns or evaluates a value. For example, z = y + x is an expression. x = 5 is also an expression. When JavaScript looks at the expression and figures out what to do with it, that is called evaluating the expression.

What are Operators?

You've already seen one operator in action so far in this course. That would be the plus operator (+). The plus operator really has two purposes in JavaScript, as we have observed. In can add numeric values, and it can also concatenate strings.

The basic operators in JavaScript are:

+	x + y	Adds numeric or concatenates string values together.
-	x - y	Subtracts
*	x * y	Multiplies
/	x / y	Divides
%	x % y	Modulus
++	x++	Increments by 1
--	x--	Decrements by 1

(Note: One operator most people might not have seen before is the modulus operator. In the example of x % y, the remainder of x divided by y is returned.)

These operators are also sometimes referred to as connubial operators. The first 4 operators in the chart are fairly straightforward math operators that almost everyone learned in math class. (modulus is described above.) The last two operators may be unfamiliar to most though.

The ++ operator works by incrementing the value before it by one. It is usually used it the form of x++. This is essentially the same as writing x = x + 1. Basically, it can save you a bit of typing. The -- operator works the same way, just subtracting one from x instead of adding one.

One thing that needs mentioning is that x++ is not exactly the same as ++x. x++ will add one to x after an assignment is complete, and ++x adds one before an assignment is complete. This can be illustrated in the following way, assuming x is already equal to 1:

y = X++;

In this example, y will be equal to 1, and x will be set to 2. (x is incremented after y is already set to x)

y = ++x;

In this example, y will be equal to 2, and x will also be equal to 2. (x is incremented before y is set to x)

The -- operator works in exactly the same way, but by decrementing instead of incrementing the value.

Assignment Operators

Assignment operators are operators that assign values. We have already seen one assignment operator in action quite a lot in this course so far. That would be the equals (=) operator. We have been using this assignment operator to assign values to variables. There are a few different assignment operators in JavaScript.

=	x = y	Assigns a value
+=	x += y	Short for x = x + y
-=	x -= y	Short for x = x - y
*=	x *= y	Short for x = x * y
/=	x /= y	Short for x = x / y
%=	x %= y	Short for x = x%y

We have already talked about the equals assignment operator. The other assignment operators in the above table are most often used as shortcuts. For example, instead of having to write x = x + y, you can just write x+=y. The others work in a similar fashion.

Comparison Operators

Comparison operators compare one value against another. They can be used not only to compare numeric values, but they can also compare many other things, including strings. Here is a list of comparison operators in JavaScript:

==	x == y	Returns True if x equals y
!=	x != y	Returns true if x does not equal y
>	x > y	Returns true if x is greater than y
>=	x >= y	Returns true if x is greater than or equal to y
<	x < y	Returns true if x is less than y
<=	x <= y	Returns true if x is less then or equal to y
&&	x && y	Returns true if both x and y are true
||	x || y	Returns true if either x or y are true.
!	!x	Returns true if x is false.

These are operators that we haven't seen yet, so let's discuss them a bit.

The == comparison operator is used to check if two values are the same. This is one that you will see quite often when scripting. For example:

todays_date == "thursday" would be true if todays_date contained a value of "thursday".

The != comparison operator is used to determine if two values are not the same. For example:

If todays_date was equal to "thursday" then todays_date != "friday" would return true.

The > operator is used to determine if one value is greater than another. For Example:

5 > 4 would be true.

The >= operator is very similar to the > operator, but the expression is also true if the two values are equal. For Example:

5 >= 4 is true, and so is 5 >= 5.

The < and <= operators work the same way as the > and >= operators, but use less than instead of greater than.

The && (or AND) operator says that two statements have to be true before the entire expression will be true. For example:

(todays_date == "thursday") && (tomorrows_date == "friday") would return true if todays_date contained a value of "thursday" AND tomorrows_date contained the value of "friday".

The || (OR) operator says that one of two statements must be true for in order to return true. For Example:

(todays_date == "thursday") || (tomorrows_date == "tuesday") would return true even if tomorrows_date was not equal to "tuesday", but really equal to "friday".

Parentheses

This is probably a really good time to talk about parentheses. JavaScript places great importance, or precedence on expressions that are contained in parentheses. In the case of the two above examples, parentheses were necessary in order to use the comparison operators && and ||.

JavaScript will always evaluate the contents of the parentheses first before it evaluates the entire statement. So in the aforementioned examples, both expressions in the parentheses are evaluated, then they are compared. This can be illustrated by showing how JavaScript will handle this simple math expression.

x = 10 + 5 * 2;

In this example, x will be equal to 20, because JavaScript will always give precedence to the multiply operator before the plus operator. So the expression is evaluated first as 5 x 2, which is 10, then 10 is added, giving 20.

x = (10 + 5) * 2;

In this example, we get quite a different result, because now JavaScript will give precedence to the contents of the parentheses. So this expression will be evaluated first as 10 + 5, which is 15, then multiplied by 2, giving 30.

We will be seeing more uses of parentheses in the next lecture, but for now keep in mind that good use of parentheses will make your coding adventures less troublesome.

Comparing VS Assigning

One common mistake made by beginning JavaScript programmers is to forget that assignment operators are not the same as comparison operators. They might make the mistake of writing something like:

(todays_date = "thursday") && (tomorrows_date = "tuesday") which will still end up true no matter what the values are, because you are really giving each of those variables new values. So this comparison is rather pointless in this form. The correct form of the expression is:

(todays_date == "thursday") && (tomorrows_date == "tuesday") which would return false if tommorows_date was really equal to "friday".

Operators, Assignments and Comparisons Summary

• Expressions JavaScript statements that assign or evaluate values.
• The three main types of operators in JavaScript are: Connubial, Assignment, and Comparison.
• Connubial operators perform basic mathematical functions, or in the case of the plus (+) sign, also concatenate strings.
• Assignment operators assign values.
• x += y is the same as saying x = x + y
• x++ is increments x by 1, and x-- decrements x by one.
• x++ evaluates after an assignment, and ++x evaluates before and assignment.
• Comparison operators are used to compare different values.
• JavaScript will give precedence to the contents of parentheses when evaluating expressions.
• It is important to remember to use comparison operators when comparing, not assigning operators.

---

DHTML - TOC - Introduction - Books -
JavaScript Programming Fundamentals - Links - Questions - Quiz -
1 - 2 - 3 - 4 - 5 - [ 6 ] - 7 - 8 - 9 -

DHTML - TOC - Introduction - Books -
JavaScript Programming Fundamentals - Links - Questions - Quiz -
1 - 2 - 3 - 4 - 5 - [ 6 ] - 7 - 8 - 9 -