HTML Blox

Providing the building blox of the web.

  • HTML Blox Home
  • Blog
    • Design
    • Flash
    • General
    • HTML
    • Javascript
    • PHP
    • Programming
    • Web Servers
  • Forums
  • Where to Start?
  • Lessons
    • CSS
    • Design
    • HTML
    • Javascript
    • Programming
  • References
    • HTML
  • Resources
  • About
  • Contact
  • Go Green!

Javascript Lessons

  1. Lesson 1: The Basics
  2. Lesson 2: Hello World!
  3. Lesson 3: Variables
  4. Lesson 4.1: Arithmetic and Operators - Numeric Arithmetic
  5. Lesson 4.2: Arithmetic and Operators - Boolean and String Arithmetic

Javascript Reference

  1. No reference yet.

Links

  • W3C HTML 4.01 Strict Compliant
  • W3C CSS 2.1 Compliant
  • Web Standards Group Member
  • Follow us on Twitter
  • Number Overflow - Free Advanced Scripts and Tutorials
  • Azure Ronin Web Design - Professional Web Design and Development
  • XML Sitemap
  • U Comment, I Follow

Feeds

  • RSS 2.0 Feed
  • RDF/RSS 1.0 Feed
  • RSS 0.9 Feed
  • Atom Feed

Lesson 4.1: Arithmetic and Operators – Numeric Arithmetic

del.icio.us Digg Blinklist reddit

In our previous lesson, we took a look at variables in Javascript. In this lesson, we’ll take a look at how to do some arithmetic and the related operators.

What is Arithmetic?

Arithmetic is the most elementary branch of mathematics. Without it, computers wouldn’t be able to exist.

What are Operators?

Operators are symbols which have a specific meaning and cause a specific action. There are a handful of operators we will concern ourselves with for Javascript:

  • = (Assignment)
  • + (Addition or Concatenation)
  • - (Subtraction)
  • * (Multiplication)
  • / (Division)
  • % (Modulus)
  • == (Boolean EQUAL)
  • ! (Boolean NOT)
  • > (Boolean GREATER THAN)
  • < (Boolean LESSER THAN)
  • >= (Boolean GREATER THAN OR EQUAL TO)
  • <= (Boolean LESSER THAN OR EQUAL TO)
  • || (Boolean OR)
  • && (Boolean AND)

Basic Arithmetic

The first six operators listed above (=, +, -, *, /, %) are used in numeric arithmetic. All of this work just like you would expect them to in the real world. Unlike many other programming languages, Javascript doesn’t have a concept of “integer math”, meaning math where all decimals are truncated. This means that we’re mainly dealing with floating-point or real numbers. If you wanted to do integer math there are ways which we’ll discuss in future lessons.

Assignment

The assignment operator (the equals sign) is used to assign a value to a variable. In Javascript (and many other programming languages), the variable must always be on the left side, and the value is calculated on the right side of the assignment operator and sent to the variable on the left.

var a = 5; // a is now 5.
var b = a + 2; // b is now 7, a is still 5.
var c = a + b; // c is now 12, b is 7, a is 5.

Addition

Addition just takes two (or more) values, combines them, and sends them to the left-hand side (if there is an assignment operator):

var sum1 = 5 + 10; // 15
var sum2 = 5 + 10 + 15; // 30
var sum3 = sum1 + sum2; // 15 + 30 = 45

Subtraction

Subtraction takes two (or more) values, gets their difference, and sends it to the left-hand side (if there is an assignment operator):

var diff1 = 10 - 5; // 5
var diff2 = 20 - 30; // -10
var diff3 = diff1 - diff2; // 5 - (-10) = 5 + 10 = 15
var diff4 = 5 - 10 - 15; // (5 - 10) - 15 = -5 - 15 = -20

Multiplication

Multiplication takes two (or more) values, evaluates their product and sends it to the left hand side (if there is an assignment operator):

var prod1 = 5 * 5; // 25
var prod2 = 5 * -5; // -25
var prod3 = prod1 * prod2 * -1; // (25 * -25) * -1 = -625 * -1 = 625

Division

Division takes two (or more) values, evaluates their quotient, and sends it to the left-hand side (if there is an assignment operator).

var quo1 = 5 / 2; // 2.5
var quo2 = 100 / 5; // 20
var quo3 = 50 / 5 / 2; // (50 / 5) / 2 = 10 / 2 = 5
var quo4 = quo2 / quo1; // 20 / 2.5 = 8

Modulus

Modulus (%) will give you the remainder of integer division. If you aren’t familiar with integer division, take a look at the programming lesson on integer arithmetic.

Javascript will also allow real (decimal) numbers to be used in a modulus equation. When done like this, it will give you the remainder of what is has left over after it’s gotten as many whole denominators out of the numerator as it can. However, you may get rounding errors on occasion, so be careful. For example, if you did 32.5 / 6.2, this results in 5.241935483870968. The modulus of these numbers is 1.4999999999999991. If you work it out on paper you should have determined that the modulus would be 1.5. You can get this by taking the whole-number portion of the quotient and multiply it by the denominator (5 * 6.2 = 31) and subtracting that from the numerator (32.5 – 31 = 1.5). You get these odd numbers because of a slight rounding error since the quotient isn’t a rational number (a number that has a finite number of digits after the decimal point).

The point is, if you are going to use modulus with real numbers, proceed with caution. In most languages, you can only use modulus with integer number.

var mod1 = 6 % 5; // 1
var mod2 = 5.2 % 3.1 // 2.1

In this lesson we discussed how to use the operators for numeric arithmetic. In the next part of the lesson, we’ll talk about using the other operators we mentioned for boolean arithmetic as well as discussing how to use the + operator for concatenation of strings.

This entry was posted on Wednesday, September 16th, 2009 at 11:03 am and is filed under Javascript Lessons. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

Please Login or Register or fill out the following to leave a reply:

If you haven't posted an approved comment before, your comment will not show up until approved.

  • HTML Blox Home
  • Blog
  • Design Blog
  • Flash Blog
  • General Blog
  • HTML Blog
  • Javascript Blog
  • PHP Blog
  • Programming Blog
  • Web Servers Blog
  • Forums
  • Where to Start?
  • Lessons
  • CSS Lessons
  • Design Lessons
  • HTML Lessons
  • Javascript Lessons
  • Programming Lessons
  • References
  • HTMLReferences
  • About
  • Resources
  • Contact
  • Go Green!
  • Sitemap

Copyright © 2008 HTML Blox

Unless otherwise noted, all images created and copyright HTML Blox.

Operated by Azure Ronin Web Design