This chapter is from the book
This chapter is from the book
This chapter is from the book
Operators
The values we have stored in our variables aren’t going to be much use to us unless we can manipulate them in calculations.
Arithmetic Operations
First, JavaScript allows us to carry out operations using the standard arithmetic operators of addition, subtraction, multiplication, and division.
var theSum = 4 + 3;
As you’ll have guessed, after this statement has been executed the variable theSum will contain a value of 7. We can use variable names in our operations too:
var productCount = 2; var subtotal = 14.98; var shipping = 2.75; var total = subtotal + shipping;
We can use JavaScript to subtract (-), multiply (*), and divide (/) in a similar manner:
subtotal = total – shipping; var salesTax = total * 0.15; var productPrice = subtotal / productCount;
To calculate the remainder from a division, we can use JavaScript’s modulus division operator. This is denoted by the % character:
var itemsPerBox = 12; var itemsToBeBoxed = 40; var itemsInLastBox = itemsToBeBoxed % itemsPerBox;
In this example, the variable itemsInLastBox would contain the number 4 after the last statement completes.
JavaScript also has convenient operators to increment (++) or decrement (--) the value of a variable:
productCount++;
is equivalent to the statement
productCount = productCount + 1;
Similarly,
items--;
is just the same as
items = items – 1;
A more comprehensive list of JavaScript’s arithmetic operators appears in Appendix B, “JavaScript Quick Reference.”
Operator Precedence
When you use several operators in the same calculation, JavaScript uses precedence rules to determine in what order the calculation should be done. For example, consider the statement
var average = a + b + c / 3;
If, as the variable’s name implies, you’re trying to calculate an average, this would not give the desired result; the division operation would be carried out on c before adding the values of a and b to the result. To calculate the average correctly, we would have to add parentheses to our statement, like this:
var average = (a + b + c) / 3;
If you have doubts about the precedence rules, I would recommend that you always use parentheses liberally. There is no cost to doing so, it makes your code easier to read (both for you and for anyone else who later has to edit or decipher it), and it ensures that precedence issues don’t spoil your calculations.
Using the + Operator with Strings
Arithmetic operators don’t make much sense if the variables they operate on contain strings rather than numeric values. The exception is the + operator, which JavaScript interprets as an instruction to concatenate (join together sequentially) two or more strings:
var firstname = “John”; var surname = “Doe”; var fullname = firstname + “ “ + surname; // the variable fullname now contains the value “John Doe”
If you try to use the + operator on two variables, one of which is a string and the other numeric, JavaScript converts the numeric value to a string and concatenates the two:
var name = “David”; var age = 45; alert(name + age);
Figure 2.2 shows the result of using the + operator on a string and a numeric value.
){kind=link}
Figure 2.2 Concatenating a string and a numeric value
We talk about JavaScript data types, and string operations in general, much more in Hour 5, “Numbers and Strings.”
TRY IT YOURSELF: Convert Celsius to Fahrenheit
To convert a temperature in degrees Celsius to one measured in degrees Fahrenheit, we need to multiply by 9, divide by 5, and then add 32. Let’s do that in JavaScript:
var cTemp = 100; // temperature in Celsius // Let’s be generous with parentheses var hTemp = ((cTemp * 9) /5 ) + 32;
In fact, we could have omitted all of the parentheses from this calculation and it would still have worked fine:
var hTemp = cTemp*9/5 + 32;
However, the parentheses make the code easier to understand, and help prevent errors caused by operator precedence.
Let’s test the code in a web page, as shown in Listing 2.2.
Listing 2.2 Calculating Fahrenheit from Celsius
<!DOCTYPE html>
<html>
<head>
<title>Fahrenheit From Celsius</title>
</head>
<body>
<script>
var cTemp = 100; // temperature in Celsius
// Let’s be generous with parentheses
var hTemp = ((cTemp * 9) /5 ) + 32;
document.write(“Temperature in Celsius: “ + cTemp + “ degrees<br/>”);
document.write(“Temperature in Fahrenheit: “ + hTemp + “ degrees”);
</script>
</body>
</html>
Save this code as a file temperature.html and load it into your browser. You should get the result shown in Figure 2.3.
)
Figure 2.3 The output of Listing 2.2
Edit the file a few times to use different values for cTemp, and check that everything works OK.