spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / javascript / diaries / 3

[previous] [next]

Web Project Manager
Aquent
US-PA-Collegeville

Justtechjobs.com Post A Job | Post A Resume
Developer News
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source

The JavaScript Diaries: Part 3

Multiplication Operator (*)

This operator is used to multiply the value on the right of the operator by the value on the left, i.e., "7 * 2" would read "seven times two."

  var newNum=7;
  var newNum2=2;
  var result=newNum*newNum2;
  alert(result);

By now this script should be self-explanatory. Try it in your template.

Division Operator (/)

This operator is used to divide the value on the left of the operator by the value on the right, i.e., "8 / 2" would read "eight divided by two."
  var newNum=8;
  var newNum2=2;
  var result=newNum/newNum2;
  alert(result);

Be careful that you do not divide by zero. The result will be either infinity or undefined, depending on the browser you are using. Try the following in your template and see what answer you get:

  var newNum=8;
  var newNum2=0;
  var result=newNum/newNum2;
  alert(result);
Calculation Conversions

An integer added to a floating point number will result in a floating point number. It's important to remember that JavaScript treats all numbers as floating point numbers (numbers that have a decimal point). This is important because if you add 13 and 27.235, you will get a floating point number as the result: 40.235. (There is a way to control the display of numbers after a decimal point which we will look at later.)

If you add a number to another number which is in quotes (which is actually a string and not a number), it will return a string as there is no way to add a "non-number" to a number:

  var myNum=10;
  var noNum="13";
  var theSum=myNum+noNum;
  alert(theSum);

The result here would be 1013 as the script would convert the variable myNum to a string due to the other variable, noNum, already being a string. It would then place the two together, just as when we added text to a string:

  var dylan="Bob Dylan";
  document.write("I like music by "+dylan);

(The processing of joining two or more strings together is called "concatenating".)

These calculation conversions apply to addition, subtraction, multiplication, and division operators.

Modulus (aka 'Modulo') Operator (%)

This operator is used to divide the value on the left of the operator by the value on the right, and then give the result of the remainder of the calculation:

  var newNum=11;
  var newNum2=2;
  var result=newNum%newNum2;
  alert(result);

This script declares three variables, newNum, newNum2, and result. The first two variables are given the values of 11 and 2, respectively. The third variable is instructed to divide the first variable, newNum, by the second variable, newNum2, and return the remainder. An alert window is then called to display the results, which in this case would be 1.

Increment/Decrement Operator (++/--)

The increment and decrement operators are used to either increase or decrease the value of a variable, element, or property, usually within a loop (more on those later). Basically, an increment/decrement operator is a kind of shorthand. For instance, using the increment operator ++, we could say that x++ is the same as x = x + 1 and, using the decrement operator --, then x-- is the same as x = x - 1.

It's important to note that it does make a difference where you put the operator. If the operator is put before the value, it increases the value by 1, returns that value to the variable and then performs the rest of the operation:

  var theNum=4;
  alert(++theNum);

The variable theNum is declared and initialized with a value of 4. An alert window is then given a parameter which will increase the value of the variable theNum by 1, return it to (reset) the variable, and then display the result of the variable, which now has a value of 5. Try it in your template.

The same would be true if we used a decremental operator:

  var theNum=4;
  alert(--theNum1);

The parameter sent to the alert window here would decrease the value of the variable theNum by 1, reset the variable to a value of 3, and then finish the process, in this case an alert window would be displayed. The variable has now been assigned (reset to) a new value of 3.

To put it in plain English, when the operator is in front of the value it is read as: "add/subtract 1 to/from the value of the named variable, reset the variable to the new value, then continue to process the script."

On the other side (literally), if the operator is put after the value, the calculation returns the value of the variable to the script, then it increases/decreases the value of the variable (resets it) by 1, and resets the variable:

  var theNum=4;
  alert(theNum++);
In this case, the alert window will display a value of 4, and the incremental operator will then increase (reset) the value of the variable theNum to 5. The next time the variable theNum is used, its value will be 5. Try this again, only add the last line below to the script and see what happens:
  var theNum=4;
  alert(theNum++);
  alert(theNum);

You should get an alert window with a value of 4, then another alert window with a value of 5.

The same would be true if we used a decremental operator:

  var theNum=4;
  alert(theNum--);

This script would return a value of 4, and then decrease the value of the variable theNum by 1 to 3.

Here is another way of looking at it (with thanks to Danny Goodman):

  var a = 10;   // initialize a to 10
  var x = 0;   // initialize x to 0
  x = a;   // a = 10, so x = 10
  x = ++a;   // a becomes 11 before assignment, so a = 11 and x becomes 11
  x = a++;   // a is still 11 before assignment, so x = 11; then a becomes 12
  x = a++;   // a is still 12 before assignment, so x = 12; then a becomes 13

To recap: if the incremental/decremental operator is before the variable, it will increase its value by 1 and return the value to the script; if the incremental/decremental operator is after the variable, it will return its value to the script and then increase its value by one.

home / programming / javascript / diaries / 3

[previous] [next]

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks

Symantec Whitepaper: Converging System and Data Protection for Complete Disaster Recovery
Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms
PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008
  Go Parallel Article: Q&A with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Symantec Whitepaper: Comprehensive Backup and Recovery of VMware Virtual Infrastructure
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Fixing MySQL Replication · Firewall Guide: First Steps to Securing the Enterprise · VoxOx Tames the Tumultuous Communications Tangle

Created: May 13, 2005

URL: