In this lesson you are going to learn how to use:
- arithmetic operators;
- the + sign to concatenate text (concatenation operator);
- comparison operators;
- logical operators.
Also, you’ll get plenty of opportunities to practice coding with variables. Let’s get started!
As you might have guessed, arithmetic operators are used to perform arithmetic operations between values or variables. Here’s a table for your reference.
If x = 20, y = 5, and z = result, we have:
|Operator||Java Script Example||Result|
|Addition: +||z = x + y||z = 25|
|Subtraction: –||z = x – y||z = 15|
|Multiplication: *||z = x * y||z = 100|
|Division: /||z = x / y||z = 4|
|Modulus: %||z = x / y||z = 0|
|Increment: ++||z = ++x||z = 21|
|Decrement —||z = –x||z = 19|
I guess you’re quite familiar with most arithmetical operators. The odd ones might be the ( % ) modulus, the ( ++ ) increment, and the ( — ) decrement operators.
Modulus: the remainder left over after division.
Increment: take a number and add 1 to it.
Decrement: take a number and subtract 1 from it.
Time to get coding! Get your hands on the text editor and prepare a new HTML document like the one below:
Try out: add 2 values and print the result
“Hey browser, get the value within brackets and print it on the HTML document!”
In our case the value is a variable, therefore no ( ‘ ‘ ) quotes are used to enclose it. If you want to print some text instead, the command must be: document.write(‘some text.’);. It’s all very similar to the alert() command you’ve been using so far.
Now experiment with the code sample above by trying out all the other arithmetic operators and printing the result on the page.
If you want to add pieces of text together to form one long line of text, use the + sign. In Geeky talk a piece of text is called string, and it appears enclosed either in (‘ ‘) quotes or (” “) double-quotes (remember the ‘Hello World’ text you used in the alert() command? That is an instance of string).
Try out: concatenate strings and print a message on the page
If you typed your code correctly, you should see the famous Hello World! text smack on the web page. Notice: you separate Hello and World! by concatenating quotes (‘ ‘) in-between each piece of text or variable.
Now get some practice concatenating strings before moving on.
It’s here that comparison operators, such as equal to, less than, etc. enter the scene. Here below are listed all comparison operators for your reference.
If x = 10 we have:
|Operator||What is it?||Example|
|==||equal to||x == 5 is false|
|===||exactly equal to value and type||x === 10 is true|
x === “10” is false
|!=||not equal||x != 2 is true|
|>||greater than||x > 20 is false|
|<||less than||x < 20 is true|
|>=||greater than or equal to||x >= 20 is false|
|<=||less than or equal to||x <= 20 is true|
You use logical operators when you need to determine the logic between certain values.
Going back to the shopping cart script example, you might want your script to apply a 5% discount if the following 2 conditions are both true: a given product costs more than $20 and is purchased before the 31st of December.
Here come logical operators to the rescue. Given that x = 10 and y = 5:
|Operator||What is it?||Example|
|&&||and||(x < 20 && y > 1) is true|
both conditions must be satisfied
|||||or||(x == 5 || y == 5) is true|
at least 1 condition must be satisfied
|!||not||!(x == y) is true|
Questions, questions, questions
The tables above are self-explanatory, except for the following 2 questions:
- When you talk about === , what do you mean by equality of value and type?
- What’s the difference between ( = ), ( == ), and ( === ) ?
Answer to question 1.
var price = 5;
In the code snippet above, the variable price has value 5.
What’s the type?
Therefore, when you compare 2 values using ( === ), the 2 values are compared on the basis of both their value and their data type:
var firstNum = 4; var secondNum = 4; //this is true: both values are 4 //and both values are of type number firstNum === secondNum; //let's use a string data type. A string uses ' '. var stringNum = '4'; //Now === is false: 4 and '4' are different types firstNum === stringNum;
Answer to question 2.
The ( = ) operator is used to assign or give a value to a variable. It is not a sign for equality.
The ( == ) and ( === ) operators instead, do stand for equality. They do not assign values to variables. ( == ) compares only values, ( === ) compares both values and data type.
You’ve made it all the way through this lesson, congratulations! Now your scripts are not limited to just popping up messages. They start to be smart: they can make calculations, comparisons, and set truth conditions to evaluate their data.
Take a break and get ready for it!