JavaScript(一)——变量、运算符
前言
JavaScript分为两种书写方式:一是在HTML页面中书写;二是在HTML页面外部创建一个.js
文件来书写JavaScript代码。这两种方式都需要在HTML页面引入对应的JavaScript标签<script></script>
。在HTML页面中书写的JavaScript代码需要写在标签里;如果是在HTML页面外,则需要在标签内引入对应的.js
文件的地址。
以上两种方式中,我们最常见的就是在外部创建.js
文件书写JavaScript代码,同时也建议大家这么去做。因为在前端中提倡结构、行为、样式分离的方式来开发前端项目。具体说明如下:
结构 | html | 表示页面中都包含什么元素 |
---|---|---|
行为 | JavaScript | 表示页面中的元素在某些情况下执行特定的操作 |
样式 | CSS | 表示页面中的元素都以什么样子展示给客户 |
上述分离的优点是可以更加方便的修改页面,曾经的JSP
就是因为页面中的HTML代码和Java代码混写导致耦合度过高,修改难度太大,所以才被淘汰掉(不是指.jsp
页面,指的是当时在.jsp
页面中书写在Java代码和前端代码段的行为)。
文章目录
JavaScript基本语法
首先详细说明JavaScript**(以后简称:js)**在HTML中的具体使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表示在页面中书写JavaScript代码-->
<!--<script type="text/javascript">-->
<!-- document.write('This is the first test page for JavaScript')-->
<!--</script>-->
<!--表示将外部书写的JavaScript文件引入到当前HTML文件中-->
<script type="text/javascript" src="../js/test_01.js"></script>
</body>
</html>
【注】:不能在引入外部JS
文件的<script></script>
标签中书写js代码,这种情况下会html内部书写的js代码会失效,只会执行引入文件的js代码。
<script type="text/javascript" src="../js/test_01.js">
document.write('这行代码不会被执行');
</script>
变量
一项技术(语言)可以被称为编程语言的基本要素是:变量。即:编程语言必然存在变量。
变量声明
js原生且最开始定义变量的关键字如下:
// 该语句表示定义一个变量名 num,该变量名指向一个系统内存中的一个空间,并将一个数据放入到该房间中,日后我们在使用变量名num进行操作的时候,默认使用num指向的变量空间中存放的数据。
// 变量声明
var num;
// 变量赋值
num = 100;
// 覆盖
变量命名规则
- 变量名可以包含数字、字母、下划线以及$(美元符号);
- 变量名必须以字母、下划线、$(美元符号)开头;
- 变量名不可以使用系统关键字(系统内部定义的变量或命令)、保留字(曾使用过或底层语言的关键字但现在不使用仅保留下来的关键字,还有一些系统保留下来用于计划版本升级使用的关键字)。
数据类型
在js中,数据值大体分为两种:原始值、引用值;
- 原始值:
- Number:数字类型,整型、浮点型
- Boolean:布尔值,只有两种状态,真或假(true、false),符合计算机底层中的二进制状态;
- String:字符串类型,可以使用单引号
''
或者双引号""
,同时不同的引号可以嵌套,相同的引号不可以嵌套; - undefined:该数据类型中只有一个值,与类型同名
undefined
,表示并没有进行赋值。 - null:表示空值,同时也表示一种占位的概念。可以通过null来解决保留字的问题。
- 引用值:
- 数组类型:在系统中开辟出多个存放数据的空间,空间之间有对应的联系。笼统解释:可以存放多个数据的数据类型。
- 对象类型:和Java语言的对象有相似之处,也有不太一样的地方;在js中的对象是一种
- 函数类型:
值传递和引用传递
在js中对数据类型区分为原始值和引用值的原因比较复杂,它主要为了解决程序在执行过程中的值传递和引用传递。先看如下例子:
var num1 = 100;
var num2 = num1;
num1 = 200;
document.write(num2); // 打印出的值为100
var arrs1 = [1];
var arrs2 = arrs1;
arrs1.push(2);
document.write(arrs2); // 打印出的值为[1,2]
具体原因如下:
编程语言在计算机内存中运行的时候对内存进行了划分,共分为:栈内存与堆内存(栈和堆是两种数据结构,感兴趣的同学可以自行学习数据结构与算法这本书,建议初学者看《大话数据结构》入门,已经入口的同学可以去看严蔚敏老师的《数据结构》第一版)。
js中的原始值是存放在栈内存中,栈内存中的赋值与使用是copy(复制),即定义两个原始值进行赋值操作的时候,这两个变量名不是同时指向同一个内存空间,而是将已有数据的内存空间中的值复制一份供另一个使用;
而引用值的数据是存放在堆内存之中,在使用的过程中是将数据所在的内存地址给另一个变量来使用。
运算符
运算规则符合数学计算规则(严格来说,数学的运算规则)
+运算符
- 该运算符有两种含义,用于数字的运算时是加法运算;用于字符串的运算时是字符串拼接;
- 同时,任何数据类型与字符串进行 + 运算后的结果都是字符串。
-运算符
- 该运算符的基本概念和加法一样。
*运算符
- 同上。
/运算符
- 同上。
%取余运算
-
按照出发计算,最终结果为余数(不要再问我取到小数点后几位了……各位,补补小学数学吧)
-
如果被除数小于除数,则结果为被除数。
=赋值运算符
- emm…就是赋值呗。
var num = num1 + num2;
()括号运算符
- 括号内部的算式先行计算。
++ 自增运算符
var num = 1;
num ++;
// 自增后的num结果为2
– 自减运算符
- 逻辑和自增运算符一样。
+= 运算符
var num1 = 1, num2 = 2;
num1 += num2;
// 该算式等价于 num1 = num1 + num2;
同样,**-=、*=、/=和+=**运算符一样。
补充数字运算细节
在数字运算的过程中可能会出现一下情况:
- 数字0作为除数;
- 误将其他数据类型与数字一起运算。
在这种情况下,可能会显示出一些不太常见的结果,在此做一个解释:
<script type="text/javascript">
let num;
num = 2 / 0;
document.write(num); // 结果为 Infinity(无穷大)
num = -2 / 0;
document.write(num); // 结果为 -Infinity(无穷小)
num = 'a' / 1;
document.write(num); // 结果为 NaN(not a number),表示不是一个数字
</script>
总结
本篇笔记中仅记录了变量以及数据运算方面的运算符,关于逻辑方面的比较运算以及逻辑运算符会在下一篇笔记中记录。
所有的编程语言中,运算符都是一样的,只是根据不同语言底层对于一些特殊值(边界值)有不同的处理方式(同样的语言也会因为版本、系统等原因而导致不同),这些大家感兴趣的话可以自行了解。