w3resource

JavaScript : Arithmetic Operators

Arithmetic Operators : +, -, *, /

In JavaScript, arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value. There are four standard  arithmetic operators, addition (+), subtraction (-), multiplication (*), and division (/).

These operators work as they do in other programming languages except the division (/) operator which returns a floating-point division in JavaScript, not a truncated division as it does in languages such as C or Java.
 
For example:
1/2  returns 0.5 in JavaScript.
1/2  returns 0 in Java.

In addition, JavaScript provides modules(%), increment(++), decrement(--) and unary negation(-) operators.

Example : ( + addition operator)

HTML Code:

<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript + operator example</title>
<meta name="description" content="This document contains
an example of JavaScript + operator" />
</head>
<body>
<script src="addition_example1.js"></script>
</body>
</html>

JS Code:

var var1 = 45;
var var2 = 78;
var var3 = 45.10;
var var4 = 178.12;
var newvar  = var1 + var2;
var newvar1 = var3 + var4;
var newParagraph3 = document.createElement("p");
var newText3 = document.createTextNode("var1 + var2 = "+newvar+" and var3 + var4 = "+newvar1);
newParagraph3.appendChild(newText3);
document.body.appendChild(newParagraph3);

View the example in the browser

Example: ( - subtraction operator)

HTML Code:

<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript subtraction operator example </title>
<meta name="description" content="This document contains an
example Using JavaScript subtraction operator"/>
</head>
<script src="subtraction-example1.js"></script>
</body>
</html>

JS Code:

var var1 = 45;
var var2 = 78;
var str1 = "w3resource";
var str2 = ".com";
var newvar = var1 - var2;
var newstr = str1 - str2;
var varstr = var1 - str2;
var newParagraph = document.createElement("p");
var newText = document.createTextNode("var1 -var2 = "+ newvar);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);
var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode("str1 - str2  = "+ newstr);
newParagraph1.appendChild(newText1);
document.body.appendChild(newParagraph1);
var newParagraph2 = document.createElement("p");
var newText2 = document.createTextNode("var1 - str2  = "+ varstr);
newParagraph2.appendChild(newText2);
document.body.appendChild(newParagraph2)

View the example in the browser

Example : ( * multiplication operator)

HTML Code:

<!doctype html><head>
<meta charset="utf-8">
<title>JavaScript multiplication operator (*) example with DOM
</title>
<meta name="description" content="This document contains an example
Using JavaScript multiplication operator (*) with dom"/>
</head>
<body>
<script src="multiplication-example1.js"></script>
</body>
</html>

JS Code:

var var1 = 45;
var var2 = 78;
var var3 = 45.10;
var var4 = 178.12;
var newvar  = var1 * var2;
var newvar1 = var3 * var4;

var newParagraph = document.createElement("p");
var newText = document.createTextNode("var1 * var2 = "+ newvar);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);

var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode("var3 * var4  = "+ newvar1);
newParagraph1.appendChild newText1);
document.body.appendChild(newParagraph1);

View the example in the browser

Example: ( / division operator)

HTML Code:

<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript / operator example </title>
<meta name="description" content="This document contains an example of JavaScript division operator" />
</style>
</head>
<body>
<script src="division-example1.js"></script>
</body>
</html>

JS Code:

var var1 = 45;
var var2 = 78;
var var3 = 1;
var var4 = 2;
var newvar  = var1 / var2;
var newvar1 = var3 / var4;

var newParagraph = document.createElement("p");
var newText = document.createTextNode ("var1 / var2 = "+ newvar);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);

var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode("var3 / var4  = "+ newvar1);
newParagraph1.appendChild(newText1);
document.body.appendChild(newParagraph1);

View the example in the browser

Practice the example online

See the Pen javascript-common-editor by w3resource (@w3resource) on CodePen.


Previous: Read from and write to HTML document
Next: JavaScript: Arithmetic Special Operators (%, ++, --, - )

Test your Programming skills with w3resource's quiz.



Share this Tutorial / Exercise on : Facebook and Twitter

JavaScript: Tips of the Day

Using the window.location object

JavaScript can access the current URL using the window.location object. Pretty neat, but even cooler is that this object contains certain parts of the URL as well.
Get access to the protocol/host/pathname/search/and more!

// JavaScript can access the current URL in parts. For this URL:
'https://thatsanegg.com/example/index.html?s=article'
window.location.protocol == 'https:'
window.location.host == 'thatsanegg.com'
window.location.pathname == '/example/index.html'
window.location.search == '?s=article'

Ref: https://bit.ly/2LBj213