<span style="background-color:#f7f7f7"><span style="color:#777777">typora-copy-images-to: media
</span></span>
基本语法
JavaScript的历史:
在95年以前,就有很多上网的用户了,当时的带宽只有28.8kb/s,用户要进行表单的验证时,点击提交按钮,直接就将数据发送到服务器了,受限于带宽的关系,浏览器和服务器的通信很慢,大概一次通信需要30s的时间。
这样,问题就出现了,我们平常注册一个用户,需要填写很多信息,当我们将所有信息填写好,点击提交按钮后,等待30s以后,提示我们用户名被占用了,修改,提交,等待30s,提示用户名不符合规范,修改,提交,等待30s,密码不符合规范,修改,等待。。。这样的用户体验感很差,给网民造成很大的烦恼。随着上网的用户越来越多,问题越来越严重。
这时候,网景公司(Netscape ,这是一家浏览器公司)下定决心要解决这个问题,并将这个问题交给布兰登·艾奇(Brendan Eich,1964年~,当时在网景公司工作的一个程序员)来解决,他用了10个工作日的时间,设计了一个门语言,叫做LiveScript,专门用来解决客户端上的问题。网景公司和Sun公司合作,在发布的时候,改名为Javascript,目的是为了利用 Java 这个因特网时髦词汇。JavaScript 从此变成了因特网的必备组件。
因为 JavaScript 1.0 如此成功,微软推出了JScript脚本语言,后来陆续有好几家公司都创建了自己的客户端脚本语言。
此时,JavaScript 并没有一个标准来统一其语法或特性,随着互联网的发展,分久必合的趋势越来越有必要,最终,1997年,ECMA(欧洲计算机制造商协会)邀请了Netscape、Sun、微软、Borland等公司的一些程序员组成了TC39,定义了标准,名为ECMAScript。
ECMAScript是一个标准,而javascript是语言。
js概念
理解:
-
脚本语言:依赖别的语言才能运行
html必须在浏览器中才能运行,js嵌套在html中才能运行
-
跨平台:可以在不同的平台上运行
windows、linux、安卓。。。
-
支持面向对象
使用面向对象的思想编程
应用场景:
-
表单验证:规范用户输入数据,和后台数据进行交互
-
网页特效:给页面内容加行为,让页面动起来
-
游戏开发:飞机大战、打砖块
-
物联网:JavaScript与物联网 - 知乎
JS和H5的关系
我们现在所说的H5,其实指的是大前端,主要技术包含:html+css+html5+css3+javascript+前端框架(vue+react+angular)+app+小程序+......
html5是html的下一个版本,就目前而言,我们知道的h5只是一些标签,并不能完美的展示出他的强大之处,有很多高端功能需要使用js来激活,例如:多媒体标签自定义控制多媒体的各种场景;canvas标签用js来绘制图形等。
随着h5应用越来越多,js的使用方式和各种框架及插件也越来越多,甚至已经从前端语言可以实现后台服务器的功能。js的发展已经成为一种潮流。
js的组成
js的组成示意图 |
---|
![]() |
ECMAScript:语法标准
BOM:操作浏览器的标准
DOM:操作html文档的标准
JS在html中
js的书写位置
js的不能独立运行,需要依赖html,html是由标签组成的,所以js在html中就体现为一个script双标签。js的代码就写在这个标签中。
这个标签可以放在html文档的任意位置,但在不同的位置,对于代码的执行有一定的影响,对于初学者,建议将script标签放在body结束之后。
当浏览器在执行html代码的时候,就会解析其中的script标签,并运行js代码。
js的注释
单行注释:
<span style="background-color:#f8f8f8"><span style="color:#aa5500">// js的单行注释是双斜杠</span></span>
多行注释:
<span style="background-color:#f8f8f8"><span style="color:#aa5500">/*</span>
<span style="color:#aa5500">js的多行注释:</span>
<span style="color:#aa5500">开头是斜杠星号</span>
<span style="color:#aa5500">结尾是星号斜杠</span>
<span style="color:#aa5500">*/</span></span>
js的输出
-
以弹窗的形式显示
<span style="background-color:#f8f8f8"><span style="color:#000000">alert</span>(<span style="color:#116644">11</span>);</span>
这种输出通常适用于给用户做提示,例如:登录成功;删除失败;用户名被占用等......
-
以文本的形式显示
<span style="background-color:#f8f8f8"><span style="color:#000000">document</span>.<span style="color:#000000">write</span>(<span style="color:#116644">123456</span>);</span>
这种输出方式通常用于动态改变或增加body标签中的内容,有些网页,我们在查看源代码的时候发现body中是没有代码的,但是在网页中会显示出很多内容,其实就是用js显示上的。这个中输出方式,显示的内容会自动添加到body标签中。
-
可输入内容的弹窗
<span style="background-color:#f8f8f8"><span style="color:#000000">prompt</span>(<span style="color:#116644">12345</span>)</span>
这种弹窗通常在项目使用较少,项目中要提示用户输入内容的时候通常都会使用表单。
-
询问用户是否确认操作的弹窗
<span style="background-color:#f8f8f8"><span style="color:#000000">confirm</span>(<span style="color:#116644">12345</span>)</span>
这种弹窗通常在项目中用户进行某些敏感操作时,提示用户是否继续进行下去,例如:用户点击了删除按钮之后,用户点击了退出按钮之后,需要让用户确认是否继续操作,可以取消。
-
浏览器控制台输出
<span style="background-color:#f8f8f8"><span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#116644">123</span>);</span>
这种输出方式在开发过程中很常用,通常用于调试代码时,在浏览器的控制台查看调试结果,不会影响到整体项目的逻辑和效果。
注意:在js代码中,每行结束可以加分号,也可以不加分号,但是建议加上。
变量
在实际项目中,很多情况下,需要在一个初始数据的基础上进行多次累加操作,例如:
<span style="background-color:#f8f8f8"><span style="color:#aa5500">// 第一次输出数字1</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#116644">1</span>)
<span style="color:#aa5500">// 第二次需要在第一次的结果基础上添加2</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#116644">1</span><span style="color:#981a1a">+</span><span style="color:#116644">2</span>)
<span style="color:#aa5500">// 第三次需要在第二次的结果基础上添加3</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#116644">1</span><span style="color:#981a1a">+</span><span style="color:#116644">2</span><span style="color:#981a1a">+</span><span style="color:#116644">3</span>)
<span style="color:#aa5500">// 如果有100次累加,我们就需要在后面写100个加,可想而知其中的繁琐</span></span>
解决方案:我们可以将初始数据放在一个容器中,第二次累加的时候,就将第二个数据放在容器中,输出容器中的内容,第三次累加的时候,就将第三个数据继续放在容器中,继续输出容器中的内容,......
这样,我们只需要每次将数据放在容器中,容器中的数据随着每次放入,会逐渐增多。
这种容器,在js中就是变量。
也就是说,变量其实就是内存中存放数据的容器。
当这个容器不会自动出现在内存中,需要手动进行创建,也就是变量,不会自动产生,需要定义。
定义变量
语法:
<span style="background-color:#f8f8f8"><span style="color:#770088">var</span> <span style="color:#0000ff">变量名</span>;</span>
var是一个关键字,也就是js内部指定有特殊作用的单词。
变量名的规则
变量名由字母、数字、下划线、美元符号组成,不能用数字开头
<span style="background-color:#f8f8f8"><span style="color:#000000">m</span>
<span style="color:#000000">m2</span>
<span style="color:#000000">mp3</span>
<span style="color:#116644">3</span><span style="color:#000000">m</span>
<span style="color:#000000">user_id</span>
<span style="color:#000000">_start</span>
<span style="color:#116644">2_</span><span style="color:#000000">m</span></span>
不能使用关键字作为变量名,关键字指的就是js内部有特殊作用所使用的单词,如下:
此外,尽量不要使用name
,start
等单词作为变量名。
变量定义的过程
定义变量的过程,就是在内存开辟了一个空间,名字是变量名,如下图:
定义多个变量的时候,可以使用一个简短的表达式,一次性定义多个变量:
<span style="background-color:#f8f8f8">var 变量1,变量2;</span>
赋值
定义好变量就是在内存开辟好了空间,但空间中什么也没有,是一个空的空间。但正常情况下我们是要给其中放入数据的,给变量中放数据的过程,我们称之为赋值。
赋值需要用到一个符号叫赋值符:=
这个符号在编程中,不代表相等的意思,他有自己的使用特点:
-
赋值符左边的一定是一个变量,准备接收数据
-
赋值符右边的一定是一个值或者能得到值的一个表达式
-
赋值符的唯一作用就是将右边得到的值放在左边的变量容器中
例:
<span style="background-color:#f8f8f8">var a;
a = 10;
var b;
b = 20;
var c;
c = a + b;</span>
定义变量,给变量赋值的两行代码,可以合并为一行:
<span style="background-color:#f8f8f8">var a = 10;
var b = 20;
var c = a + b;</span>
定义多个变量,也可以在定义的时候赋值,每个变量之间使用逗号隔开:
<span style="background-color:#f8f8f8">var a = 10,b = 20;
var a,b = 20;
var a = 10,b;</span>
数据类型
在js中,NaN用来表示一个非数字的特殊值,当发现无法进行运算时,js不会报错,而是会返回一个NaN
NaN的注意事项:
-
NaN的类型是number类型的,表示一个非数字
-
NaN不等于任何值,包括NaN本身
-
通过isNaN()可以判断是否是一个数字,返回false的时候,表示是一个数字。
<span style="background-color:#f8f8f8">var a = 123;
var b = "abc";
console.log(isNaN(a)); // false
console.log(isNaN(b)); // true</span>
结果:
示意图 |
---|
![]() |
小数
计算机中的小数在进行运算的时候,有时会碰到小数点精度不准确的现象
<span style="background-color:#f8f8f8">//在进行浮点数运算的时候,可能会出现精度丢失的问题
0.1 + 0.2 = 0.30000000000000004;
0.2 + 0.2 = 0.4;</span>
原因:
计算机内部所能识别的数据只有二进制,当我们进行10进制数字运算的时候,在计算机内部需要先将数据转为2进制,然后运算,再将结果转为10进制给出来。10进制的小数进行2进制转换的时候,根据转换规则,有些小数会进行无限死循环,最终在后面数字太多的时候只能四舍五入,所以其实最终并没有很精确的转为2进制,所以只能给出一个大概的值。有时候会有两个大概的值相加,在转换10进制的时候正好能转换了,也会计算的比较精准。
<span style="background-color:#f8f8f8">consoloe.log(0.2 + 0.2) // 0.4</span>
也不绝对,如果小数是2的n次方分支m的话,计算机内部存储的就比较准确。
<span style="background-color:#f8f8f8">console.log(0.125 + 0.5) // 0.625</span>
解决办法:
<span style="background-color:#f8f8f8">// 解决办法 :
// 1.根据小数点后面的位数量 乘以对应的整数;
0.1 + 0.2 ==> (0.1*10+0.2*10) / 10 = 0.3
// 2.使用toFixed工具强制保留小数点后位数
var a = 0.1 + 0.2
console.log(a.toFixed(3)) // 0.300</span>
字符串类型
字符串所使用的引号,在js中,单引号和双引号是没有区别的,使用哪个都一样。
字符串中的字符是任意字符,即只要在键盘上能输入的字符都是可以的。
单引号和双引号也是字符串的字符:
<span style="background-color:#f8f8f8">var str = '"' // 一个双引号字符的字符串
var str1 = "'" // 一个单引号字符的字符串</span>
引号问题
但是双引号中不能包含双引号,单引号中不能包含双引号,因为引号对于字符串来讲是有特殊含义的,就是给字符串做边界,双引号定义的字符串,在字符串中碰到第一个双引号,就认为将前面的双引号结束了,单引号同理。
但在某些特殊情况下,双引号就需要嵌套双引号,单引号就需要嵌套单引号:
<span style="background-color:#f8f8f8">var str = '爷爷正在的给孙子讲<<西游记>>的故事,爷爷说:"唐僧害怕被孙悟空打死,所以对孙悟空说:'你回花果山吧'"';
console.log(str)</span>
这个字符串在输出的时候是会报错的,因为,浏览器是这样解析这个字符串:
<span style="background-color:#f8f8f8">'爷爷正在的给孙子讲<<西游记>>的故事,爷爷说:"唐僧害怕被孙悟空打死,所以对孙悟空说:' 你回花果山吧 '"';</span>
中间的汉字和两边的字符串之间并没有拼接,不符合js的语法,所以报错。
此时,关键的原因就是单引号字符串中碰到了第一个单引号,就将前面的单引号结束了,因为引号对于字符串是有特殊含义的。
解决方案:
给字符串中的引号转义,也就是将引号对于字符串的特殊含义去掉,就剩下普通字符的含义即可。转义是给引号前加反引号\
。
<span style="background-color:#f8f8f8">var str = '爷爷正在的给孙子讲<<西游记>>的故事,爷爷说:"唐僧害怕被孙悟空打死,所以对孙悟空说:\'你回花果山吧\'"';
console.log(str)</span>
js输出标签
js可以输出标签,让页面中的元素具备标签的特性,但是在输出标签的时候一定要将标签当做字符串输出。
js输出标签 |
---|
![]() |
输出标签可以看出,每次输出,其实就是在body内容原本的基础上直接追加了,也就是说,一个标签可以分多次输出,结果和输出一次是一样的。
字符串的拼接
用变量代替每一次的输出:
<span style="background-color:#f8f8f8">var a = '<i>';
var b = '文字倾斜';
var c = '</i>';
document.write(a)
document.write(b)
document.write(c)</span>
如果我们在此时希望能一次输出的话,就需要将多个变量连接在一起,组成一个更大的字符串才行,字符串之间的连接使用拼接符:+
<span style="background-color:#f8f8f8">var a = '<i>';
var b = '文字倾斜';
var c = '</i>';
document.write(a + b + c)</span>
也就是说,字符串和字符串之间的 +
是可以将两个字符串连接在一起组成大字符串的。
对象类型
object类型,在js中有3种表现形式,分别是:
-
null
-
用[]定义的数据
-
用{}定义的数据
undefined类型
当一个变量定义好了,但是没有给这个变量赋值,也就是没有给这个容器中放入数据,这个变量的默认值就是undefined,类型也是undefined。
运算符
算术运算
运算符 | 示例 | 备注 |
---|---|---|
+(求和) | var a = 1; var b = 2; var c = a + b; | 数学中的加法 |
-(求差) | var a = 2; var b = 1; var c = a - b; | 数学中的减法 |
*(求积) | var a = 1; var b = 2; var c = a * b; | 数学中的乘法 |
/(求商) | var a = 1; var b = 2; var c = a / b; | 数学中的除法 |
%(求余) | var a = 5; var b = 2; var c = a % b; | 数学中的求余数 |
求余运算,通常用于判断一个数字是奇数或偶数。因为所有奇数对2求余的结果都是1,所有偶数对2求余的结果都是0。
关系运算(比较运算)
运算符 | 描述 |
---|---|
> | 大于 |
>= | 大于等于 |
< | 小于 |
<= | 小于等于 |
== | 等于(主要用于判断两边的值是否相等) |
=== | 全等于(先判断两边的类型是否相等,类型相等再判断值是否相等) |
!= | 不等于,等于的反义词,等于为false的时候,不等于就为true |
!== | 不全等,全等的反义词,全等为false的时候,不全等就为true |
关系运算最后的结果只有两种,一种是真,一种是假,也就是布尔型的true
和false
<span style="background-color:#f8f8f8"><span style="color:red">console.log(2>3); // false
var a = 2>1;
console.log(a); // true</span></span>
结果
运行结果 |
---|
![]() |
等于和全等于
<span style="background-color:#f8f8f8"><span style="color:red">var a = 123;
var b = "123";
console.log(a==b); // true
console.log(a===b); // false</span></span>
结果
运行结果 |
---|
![]() |
引号只能代表数据的类型不同,字符串在内存中存储的时候不会将引号存进去的,所以字符串在内存中的真是存储其实是不带引号的,所以a变量和b变量在内存中存的内容也一样,所以是相等的
但类型不一样,所以不全等。
赋值运算
符号 | 描述 | 示例 |
---|---|---|
+= | 自己先加后,再赋值给自己 | var a = 1; a += 2; 相当于a先加2,结果赋值给a |
-= | 自己先减后,再赋值自己 | var a = 1; a -= 1; 相当于a先减1,结果赋值给a |
*= | 自己先乘后,再赋值自己 | var a = 1; a *= 3; 相当于a先乘3,结果赋值给a |
/= | 自己先除后,再赋值自己 | var a = 4; a /= 2; 相当于a先除2,结果赋值给a |
%= | 自己先余后,再赋值自己 | var a = 5; a %= 2; 相当于a先余2,结果赋值给a |
代码:
<span style="background-color:#f8f8f8"><span style="color:red">var a = 1;
a += 2; // 将a先加2,得到结果3,再将3赋值给a
console.log(a); // 3</span></span>
要理解上面的代码,首先理解给变量重新赋值。
<span style="background-color:#f8f8f8"><span style="color:red">var a = 1; // 先声明,给a赋值为1
a = 3; // 给变量a重新赋值为3
console.log(a); // 3</span></span>
然后理解自己运算后再赋值给自己(回想一下:赋值符左边是变量,右边是值)
<span style="background-color:#f8f8f8"><span style="color:red">var a = 1;
a = a + 2; // 自己加2后再赋值给自己
console.log(a); // 3</span></span>
练习:最后的a变量是多少?
<span style="background-color:#f8f8f8"><span style="color:red">var a = 5;
a %= 3;
console.log(a); // 2</span></span>
逻辑运算
逻辑运算一般用于判断多个关系运算,得出最后结果。
运算符 | 描述 |
---|---|
&&(与,并且) | 左右两边都为true,最后结果才为true,否则就是false |
||(或者) | 左右两边只要有一个true,最后结果就为true,否则就是false |
!(非,取反) | 将true处理为false,将false处理为true |
逻辑运算最后得出的结果也是布尔型。
例题:
模特的要求:年龄在18岁以上,30岁以下。小红今年20岁,看看小红是否满足条件。
<span style="background-color:#f8f8f8"><span style="color:red">var age = 20; // 小红的年龄
var result = age > 18 && age < 30;
console.log(result); // true 说明小红满足条件了</span></span>
如果小红今年31岁呢?
<span style="background-color:#f8f8f8"><span style="color:red">var age = 20; // 小红的年龄
var result = age > 18 && age < 30;
console.log(result); // false 说明小红不满足条件</span></span>
小红嫁人:小红想嫁给小明。小明说:除非你身高160cm以上,或者你有50000元的嫁妆。小红身高155cm,做模特攒了100000元。看看小红是否满足小明的条件。
<span style="background-color:#f8f8f8"><span style="color:red">var height = 155; // 小红的身高
var money = 100000; // 小红的钱
var result = height > 160 || money > 50000;
console.log(result); // true 说明小红满足了小明的条件</span></span>
如果小红只攒了30000元呢?
<span style="background-color:#f8f8f8"><span style="color:red">var height = 155; // 小红的身高
var money = 30000; // 小红的钱
var result = height > 160 || money > 50000;
console.log(result); // false 说明小红不满足小明的条件</span></span>
双重否定等于肯定。
年龄小于18或年龄大于30都不满足小红嫁人的条件。
<span style="background-color:#f8f8f8"><span style="color:red">var age = 20; // 小红的年龄
var result = !(age < 18 || age > 30); // 不满足条件,再取反就满足了
console.log(result); // true 说明这种表达方式也是可以的</span></span>
小红身高小于160cm,并且钱财小于50000元,就不满足小明的条件。
<span style="background-color:#f8f8f8"><span style="color:red">var height = 155; // 小红的身高
var money = 100000; // 小红的钱财
var result = !(height < 160 && money < 50000); // 不满足条件再取反表达满足
console.log(result); // true 说明小红还是满足条件的</span></span>
自增自减运算
符号:++ 表示让一个数字递增1
<span style="background-color:#f8f8f8"><span style="color:red">var a = 1;
a++
console.log(a); // 2</span></span>
++可以放在后面,也可以放到前面,表示的意思是一样的
<span style="background-color:#f8f8f8"><span style="color:red">var a = 1;
++a;
console.log(a); // 2</span></span>
当递增运算碰到赋值或者输出的时候,++放在前面和后就有了区别:
放在后面
<span style="background-color:#f8f8f8"><span style="color:red">var a = 1;
console.log(a++); // 1
console.log(a); // 2
var b = 1;
var c = b++;
console.log(c); // 1
console.log(b); // 2</span></span>
当++放在后面的时候,就最后进行递增运算,先进行输出或者赋值。
放在前面
<span style="background-color:#f8f8f8"><span style="color:red">var a = 1;
console.log(++a); // 2
console.log(a); // 2
var b = 1;
var c = ++b;
console.log(c); // 2
console.log(b); // 2</span></span>
当++放在前面的时候,就先进行递增运算, 后进行输出或赋值。
符号:-- 表示让一个数字递减1
使用方法和注意事项与递增一样。
递增递减运算需要使用变量,不能使用具体数字
类型转换
强制转换
-
转换为布尔型
<span style="background-color:#f8f8f8"><span style="color:red">语法: Boolean(arg)</span></span>
-
非0数字转换为布尔型为true,0转换为布尔型为false
-
非空字符串转换为布尔型为true,空字符串转换为布尔型为false
-
undefined转换为布尔型为false
-
null转换为布尔型为false
-
-
转换为字符串
<span style="background-color:#f8f8f8"><span style="color:red">语法: String(arg)</span></span>
-
true转换为字符串仍为 true,false转换为字符串仍为false
-
null转换为字符串扔为null
-
undefined转换为字符串仍为undefined
-
-
转换为数字
<span style="background-color:#f8f8f8"><span style="color:red">语法: Number(str)</span></span>
-
NaN代表不是数字,但是他是数字类型(没有意义的数字)
-
非数字字符串转换后都是NaN(NaN是一个不是数字的数字类型)
-
true转为数字为1,false转为数字为0
-
undefined转换为数字为NaN
-
null转化为数字为0
-
-
使用函数强制转换为数字
<span style="background-color:#f8f8f8"><span style="color:red">语法: parseInt(arg) # 强制转换为整数 parseFloat(arg) # 强制转换为小数</span></span>
-
小数转换为整数只取整数,向下取整
-
首位非数字的字符串强转为整数为NaN,首位是数字的字符串强转为整数是首位的数字
-
布尔型强转为数字为NaN
-
undefined强转为数字为NaN
-
null强转为数字为NaN
-
-
使用
toString()
方法强制转换为字符串,转换结果和String()函数一样<span style="background-color:#f8f8f8"><span style="color:red">var a = 123456; b = true; var c = a.toString(); var d = b.toString(); console.log(c); console.log(typeof c); console.log(d); console.log(typeof d);</span></span>
注意:这个方法不能给undefined和null使用
隐形转换
数学运算时转换为数字型,例:
<span style="background-color:#f8f8f8"><span style="color:red">var str = "100"
var a = str%10; // 乘和除以及求余都行
var b = true + 1
console.log(a);
console.log(b);</span></span>
比较运算时发生隐形转换,例:
-
如果两个值都是字符串,则进行比较编码值
-
如果有一个值为数字或布尔型,则转换为数字进行比较
-
字符串进行比较的时候首字符进行比较,相等再进行后面的字符比较。参照阿斯克码表。
拼接运算时发生字符串转换,例:
<span style="background-color:#f8f8f8"><span style="color:red">var a = "1";
console.log(a+12); // 112</span></span>
扩展
进制介绍
我们平常使用的数字是十进制的,由0~9这10个数字组成,没有一个单独的数字代表10,要表示10,需要向前进一位,所以是10进制。
计算机内部还会使用二进制、八进制和十六进制。
二进制由0和1两个数字组成,没有一个数字表示2,要表示2,需要向前进一位。
同理八进制由0~7这8个数字组成。表示8的时候要向前进一位。
十六进制由0~9和a~f这16个数字组成,使用f来表示15,表示1要向前进一位。
进制转换:
转成10进制:以进制为底,幂从右往左依次为0次方,1次方,2次方…,乘以当前当前数字在10进制中的结果,所有乘积相加
例:
1.16进制的FF转为10进制:
示意图 |
---|
![]() |
2.2进制的11011转为10进制
示意图 |
---|
![]() |
3.10进制的11转2进制-----反向取余数
示意图 |
---|
![]() |