Home arrow JavaScript arrow Page 2 - The Power of Javascript: Operators concluded
JAVASCRIPT

The Power of Javascript: Operators concluded


This is the last article in "The Power of Javascript" series covering operators. In this part, we discuss the logical operators, the operator typof, the void operator, the ternary operator :?, and operators' precedence and Associativity. You may not realize the power and usefulness of operators yet, but when we discuss how you can control your script flow of execution with if/else statements and loop statements, you will realize what operators can do for you, especially the logical operators and the comparison operators.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
August 02, 2005
TABLE OF CONTENTS:
  1. · The Power of Javascript: Operators concluded
  2. · Logical Operators Example
  3. · The Operator typeof
  4. · The Void Operator
  5. · Operator Precedence and Associativity

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
The Power of Javascript: Operators concluded - Logical Operators Example
(Page 2 of 5 )

Here's an example that explains the logical operators for now (we will use it all the time with if/else statements and loop statements, but for now a simple example is in order). Copy the following code (or write it) to an HTML document and save it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Hello World</title>
    <script language="JavaScript" type="text/javascript">
      var x = 5;
      var y = 8;
      var z = 13;

      var result = (y > x && z == (x + y));
      alert("y > x && z == (x + y) is " + result);
      var result = (y < x || z == (x + y));
      alert("y < x || z == (x + y) is " + result);
      var result = 0;
      alert(!result); 
    </script>
  </head>
  <body>
  </body>
</html>

Load the document with your browser and you will get the following three message boxes, respectively.

We have declared x and assigned it the value 5, then y was assigned the value 8, then z received the value 13. The statement var result = (y > x && z == (x + y)); declared and assigned the value true to the variable result by evaluating the expression to the right of the assignment operator. In this expression we have used the comparison operators greater than and equal to to state the relationship between x, y and z. We also combined the logical AND operator (&&) to form a somewhat more complex expression which evaluates to true only if the first operand and the second operand (of the AND Operator) evaluate to true.

In this example, y is greater than x, so it produces true, and z equals x + y, so it also produces true. Therefore the whole expression evaluates to true. This boolean value is assigned to the variable result and displayed in the message box using the statement alert ("y > x && z == (x + y) is " + result); which concatenates a string value with the value of the variable result.

There's nothing special about the next statement that uses the logical OR || operator. It just evaluates its left operand, which produces the value false, then it evaluates its right operand which produces the value true. Because the operator || produces the value true if any of its operands evaluate to true, we see true displayed in the message box. The statement var result = 0; assigns the numerical value 0 to the variable result (which means false), then alert (!result); displays a message box that inverts the value of the result variable. The value was false so !false means true. I think that it should be easy by now.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 9 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials