JavaScript 入门教程

JavaScript是一门Web编程语言，用来实现网页的交互功能，它和HTML、CSS共同组成了个Web开发的基础工具集合，也是前端开发者必备的技能；学习JavaScript教程可以了解它在网页开发中的所有特性和相关概念，让我们能够更加快速的去开发Web应用。

W3CAPI

2020-06-18 07:05:48

文档目录

我的书签

请登录

算术运算符（取模%，自增++，自减--，减法-）

JavaScript：算术特殊运算符（取模%，自增++，自减--，一元负号-）

算术特殊运算符

除四个标准算术运算符（+、-、*、/）外，JavaScript还提供了：求余运算符%、求幂运算符**、递增++/递减--运算符，以及一元取反(-)和一元加法(+)运算符。算术运算符.

JavaScript 模运算符（%）

取模运算符的使用方式如下：

var1 % var2

取模运算符返回第一个操作数对第二个操作数取模的结果，即上述语句中的var1取模var2，其中var1和var2为变量。取模运算是将var1除以var2所得的整数余数。结果的符号与var1保持一致。

Example:

HTML代码

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

执行一下

JS代码

var var1 = 45;
var var2 = 78;
var var3 = 545.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);

执行一下

在浏览器中查看示例

JavaScript 递增运算符（++）

递增运算符的使用方式如下：

var1++? ? (后置递增)

++var1（前置递增）

在第一种情况下（即后置递增），该运算符会将变量var1的值增加1，但返回的是递增操作之前的值。

在第二种情形（即前置递增）中，该运算符会将变量 var1 的值增加 1，但返回递增后的值。

Example?:

HTML代码

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

执行一下

JS代码

var var1 = 45;
var X = 45;

var newParagraph = document.createElement("p"); 
var newText = document.createTextNode("Initial value of var1 = "+var1+" and X = "+X);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);

var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode("Lets apply the following fourmula X = var1++ [ i.e. Post increment of a variable ]"); 
newParagraph1.appendChild(newText1); 
document.body.appendChild(newParagraph1); 

X=var1++;

var newParagraph2 = document.createElement("p");
var newText2 = document.createTextNode("After post-increment value of var1 = "+var1+" and X = "+X); 
newParagraph2.appendChild(newText2); 
document.body.appendChild(newParagraph2); 

var var1 = 45;
var X = 45;

var newParagraph3 = document.createElement("p"); 
var newText3 = document.createTextNode("Initial value of var1 = "+var1+" and X = "+X); 
newParagraph3.appendChild(newText3); 
document.body.appendChild(newParagraph3); 

var newParagraph4 = document.createElement("p"); 
var newText4 = document.createTextNode("Lets apply the following fourmula X =++var1 [ i.e. Pre increment of a variable ]"); 
newParagraph4.appendChild(newText4); 
document.body.appendChild(newParagraph4); 
X=++var1;

var newParagraph5 = document.createElement("p"); 
var newText5 = document.createTextNode("After pre-increment value of var1 = "+var1+" and X = "+X); //creates text along with ouput to be displayed 
newParagraph5.appendChild(newText5); 
document.body.appendChild(newParagraph5);

执行一下

在浏览器中查看示例

JavaScript：递减运算符（--）

递减运算符的用法如下：

var1--（后自减）

--var1 （前置递减）

第一种情况（即后置递减运算符）中，该运算符将变量var1的值减1，但返回递减前的原始值。

在第二种情况下（即前置递减），该运算符将变量var1递减1，但返回递减后的值。

Example:

HTML代码

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

执行一下

JS代码

var var1 = 45;
var X = 0;

var newParagraph = document.createElement("p");
var newText = document.createTextNode("Initial value of var1 = "+var1+" and X = "+X);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);

var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode("Lets apply the following fourmula X = var1-- [ i.e. Post decrement of a variable ]"); 
newParagraph1.appendChild(newText1);
document.body.appendChild(newParagraph1);
X=var1--;

var newParagraph2 = document.createElement("p"); 
var newText2 = document.createTextNode("After post-decrement value of var1 = "+var1+" and X = "+X);
newParagraph2.appendChild(newText2);
document.body.appendChild(newParagraph2); 

var var1 = 45;
var X = 0;

var newParagraph3 = document.createElement("p");
var newText3 = document.createTextNode("Initial value of var1 = "+var1+" and X = "+X);
newParagraph3.appendChild(newText3);
document.body.appendChild(newParagraph3); 

var newParagraph4 = document.createElement("p"); 
var newText4 = document.createTextNode("Lets apply the following fourmula X = --var1 [ i.e. Pre decrement of a variable ]"); 
newParagraph4.appendChild(newText4); 
document.body.appendChild(newParagraph4);
X=--var1;

var newParagraph5 = document.createElement("p"); 
var newText5 = document.createTextNode("After pre-decrement value of var1 = "+var1+" and X = "+X); 
newParagraph5.appendChild(newText5);
document.body.appendChild(newParagraph5);

执行一下

在浏览器中查看示例

JavaScript：一元取负运算符

-var1

一元取反运算符会改变var1的符号。当对变量执行取反操作时，变量的实际值保持不变，但运算符返回的是取反后的值。

Example:

HTML代码

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

执行一下

JS代码

var var1 = 45;
var X = 0;
var newParagraph = document.createElement("p");
var newText = document.createTextNode('Initial value of var1 = '+var1+' and X = '+X);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);

var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode('Lets apply the unary negation operator in var1 i.e.  X = -var1');
newParagraph1.appendChild(newText1);
document.body.appendChild(newParagraph1);

X=-var1;
var newParagraph2 = document.createElement("p");
var newText2 = document.createTextNode('After negating the value of var1 = '+var1+' and X ='+X); 
newParagraph2.appendChild(newText2);
document.body.appendChild(newParagraph2);

执行一下

在浏览器中查看示例

在线练习示例

上一篇：JavaScript：算术运算符
下一篇：JavaScript：赋值运算符

作者文档