Tips：这个只是作者的学习笔记，仅作参考。
目录
一.JS是什么
(一).JS的由来
在90年代初，浏览器技术并不发达，浏览器上展示的网页只能以浏览为主，没有用户的交互功能，就像我们现在看到的新闻网页，只能浏览，没有动效，无法通过点击或拖拽实现有趣的效果。网络技术也不发达，数据传送很慢，网速仅有28.8kb/s，不像我们现在的网络，动辄百兆千兆。
基于这样一个背景，用户在进行注册账号的时候，输入的账号等信息，点击提交把数据发送到服务器的时候，传送速度慢，用户需要等待很长时间，才能得到服务器的反馈。例如在表单中输入账号等信息，点击提交后，用户需要耐心等待大概30s的时间，才能知道注册是否成功，关键像两次密码输入不一致、用户名被占用、用户名不合法、密码长度不合法等校验工作，都需要将数据传送给服务器进行验证，每次传送都需要耗费流量，当时的流量费用特别高，给用户操作网页带来了极大的烦恼。
为了解决这个问题，作为当时最受欢迎的浏览器公司网景（Netscape）公司，率先提出了解决方案：将数据校验工作放在浏览器上进行，当浏览器上数据验证通过没有问题之后，再将数据发送给服务器处理，可以减少数据传送次数，节省流量，也节省了传送验证的时间，大大的提高用户体验感。但这需要在浏览器上运行一些脚本才可以实现。
1995年5月，网景公司委派公司程序员布兰登·艾奇（Brendan Eich）开发一些脚本来实现公司的这一创举。在网景公司的设计理念中，这些脚本要使用Java语言来写，因为公司的高管都是Java语言的脑残粉。可是布兰登·艾奇对Java语言完全不感兴趣，所以他用了10个工作日的时间，抱着应付交差的态度匆匆设计出了一门脚本语言：LiveScript。这门语言在后面发布的时候，希望能蹭到Java的热度，将LiveScript改名为JavaScript。简称JS。
JS完美解决了浏览器和服务器交互时间长的问题，也实现了用户和浏览器的交互功能和动态效果，网景公司风头无俩，笑傲江湖。微软看到网景公司的风光，也进军浏览器领域，并借鉴JS开发了属于自己IE浏览器的脚本语言JScript，并捆绑在自己的windows系统产品中，给网景造成了很大的冲击。
于是，网景公司上书IT界的龙头老大欧洲计算机制造商协会（ECMA）公司，要求主持公道，ECMA出面，将JavaScript改名为ECMAScript，简称ES，并制定了浏览器脚本语言的操作标准。不过在IT界，我们把这门语言还称之为JavaScript，只有在版本更新迭代的官方称呼中，叫做ECMAScript。
(二).JS的概念
支持面向对象的跨平台脚本语言。
概念理解：
脚本语言：依赖别的语言才能运行
html必须在浏览器中才能运行，js嵌套在html中才能运行
跨平台：可以在不同的平台上运行
windows、linux、安卓。。。
支持面向对象
使用面向对象的思想编程
(三).JS和H5的关系
广义的H5，指的是大前端，内容包括HTML+CSS+HTML5+CSS3+JavaScript+前端框架（Vue+React+Angular）+移动端开发（App+小程序）+NodeJS后端技术+跟JavaScript相关的其他技术。。。
狭义的H5，特指HTML的第5个版本，新增了一些语义化标签，新增了一些input的type属性color time data range，新增了一些选择器。。。
HTML5的强大之处，不在于新语法，而在于很多HTML5的标签，支持了JS的操作，例如：自定义多媒体布局并控制多媒体播放 pause(暂停)play(开始)、canvas标签做画布绘图
(四).JS的应用场景
-
表单验证：对用户输入数据进行验证，数据验证通过后，进行提交
-
网页特效：实现用户跟网页的交互，并展示有趣的效果，例如：轮播图、放大镜
-
游戏开发：网页游戏，例如4399小游戏、网页贪吃蛇、。。。
-
物联网：门禁、摄像头监控、自动售货机。。。
-
网页开发、app、小程序开发 。
(五).JS的组成
| js的组成示意图 |
|---|
|
|
ECMAScript：语法标准
DOM：操作HTML文档的标准
BOM：操作浏览器的标准
二.JS的基本使用
(一).JS的书写方式
跟css样式一样,JS书写方式也有三种,内联,外联以及行内
1.内联式
JS是脚本语言，运行需要依赖HTML，HTML是由标签组成的，所以JS在HTML中就体现为一个script双标签。JS的代码就写在这个标签中。
这个标签可以放在HTML文档的任意位置，但在不同的位置，对于代码的执行有一定的影响，因为HTML的解析是按照顺序执行的，对于初学者，建议将script标签放在body结束之后。
当浏览器在执行HTML代码的时候，就会解析其中的script标签，并运行JS代码。
2.外联式
将JS代码放进一个名为.js后缀的文件中,通过script标签的src属性个将文件导入
Tips:一个script标签,只能作为内联或外联使用,不可以同时使用
3.行内式
将JS代码写在标签上，作为属性的值使用。
<!-- 2.内嵌式的js -->
<script>
// alert('靓仔正')
document.write('HelloWorld')
</script>
<!-- 3.外联式的js 双标签内部不能写代码-->
<script src="./01.js"></script>
</head>
<body>
<!-- 1.行内式的js 直接写到元素内部 -->
<!-- <input type="button" value="靓仔正" onclick="alert('鸿蒙')"> -->
<a href="javascript:alert('靓仔正')">莫挨老子</a>
</body>js在html中以script双标签表现，可以放在网页任何一个地方，内联/外联/行内。建议初期放在body结束之后。
(二).JS的注释
<script>
// 1.单行注释 ctrl + /
/*2.多行注释 默认快捷键:shift + alt + a
2.多行注释 修改后:ctrl + alt +/ */
</script>(三).JS的输出
所谓输出，其实就是将内容显示在网页中，和HTML不同，JS代码不会主动显示在网页中。要显示指定的内容，需要特殊方法指定才能显示在网页中，这个指定显示的方式就叫做输出。
1.可输入内容的弹窗:
2.弹窗: 一般用作提示:
3. 文本输出:
4.控制台输出:
5.询问是否确认:
代码如下：
<script>
// 输入框 - prompt
prompt('请输入你的手机号')
//alert 弹出警示框 输出的 展示给用户的
alert('你号没了')
// document.write 文本输出
document.write('Hello World')
// console 控制台输出,给码农测试用的
console.log('敲成这样还学什么?')
// 询问用户是否确认操作
confirm('芝士雪豹?')
</script>Tips：在js代码中，没刚结束可以加分号，也可以不加
三.变量
(一).概念
在JS中，我们把存储数据用的容器，称之为变量。变量这种容器，处于内存中。
也就是说，一个变量就是内存中存储数据用的一个内存空间。
(二).定义变量
变量不是一打开网页就直接存在的 - 需要我们指定创建
语法：
var 变量名;
var是一个关键字，也就是JS内部指定有特殊作用的单词
(三).变量名的规则
变量名由字母、数字、下划线、美元符号组成，不能用数字开头，不能使用关键字作为变量名。
关键字如下：
(四).变量本质
定义变量的过程，就是在内存开辟了一个空间，名字是变量名，如下图：
(五).赋值
定义好变量就是在内存开辟好了空间，但空间中什么也没有，是一个空的空间。
我们定义变量的目的是给其中放入数据，给变量中放数据的过程，我们称之为赋值。
赋值需要用到一个符号叫赋值符：=
这个符号在编程中，不代表相等，代表赋值
赋值重点：
-
赋值符左边的一定是一个变量，准备接收数据
-
赋值符右边的一定是一个具体的值或者能得到值的一个表达式
-
赋值符的唯一作用就是将右边得到的值放在左边的变量容器中
(六).常用操作
<script>
// 累加操作
// 平常-如果要加的次数很多就很累很麻烦
console.log(1)
console.log(1 + 2)
console.log(1 + 2 + 3)
// 解决方案 将得到的数据放入容器,输出容器内容即可
a = 1
document.write(a)
b = a + 2
document.write(b)
c = b + 3
document.write(c)
// 定义变量并赋值
var d = 10;
var e = 20;
var f = d + e;
// 也可以定义多个变量,在定义时负值,每个变量之间用逗号隔开;
// 定义变量a=10,b=20
var a = 10, b = 20;
// 定义变量a和b都是20
var a, b = 20;
// 定义变量a和b,但a=10
var a = 10, b;
</script>四.数据类型
(一).如何输出?
<script>
// 错误示范 - 文本输入没带引号
document.write(10010)
// 数字可以,输出文字不行,会报错.因为不加引号会被识别为变量名,该变量名还未被定义
document.write(靓仔正)
// 由上可知，中文可以用作变量名(但是最好别用)
var 靓仔正 = 888;
console.log(靓仔正)
// 正确案例 - 中文文本输出
document.write('靓仔正');
</script>从上面的示例中，可以看到，输出数字不需要加引号，但是输出一段话就需要加引号，也就是说，数据有时候不需要加引号，但有时候就需要加引号，这是因为数据的类型不一致造成的。
js中可以输出数字，输出一段带引号的话，还可以输出哪些数据？
数字、带引号的数据、没有赋值的变量、true、false、[]数据、{}数据、null
根据他们的用途和特性，可以将数据分为以下几类：
| 类型 | 示例 | 备注 |
|---|---|---|
| 数字型（number） | 1 -2 3.14 300 | 包括整数、小数、负数 |
| 字符串型（string） | "你很帅吗？" '收皮' | 用引号引起来的任意多任意字符，单引号和双引号都行 |
| 布尔型（boolean） | true false | 代表事物的两面性，真和假,描述判断的两种结果的数据 |
| 未定义型（undefined） | var a | 代表定义过未赋值的变量 |
| 对象（object） | null [1,2,3] {name:张三} | 代表一个集合 |
(二).类型检测
使用typeof(被检测的内容)可以得出一个内容的类型。
<script>
// typeof可以检测内容的类型
// 但其实typeof不是非得括号框柱,直接空格也行
//数字型
console.log(typeof(-1233456));
// 字符串型
console.log(typeof"靓仔正真帅")
// 布尔型
console.log(typeof(true));
console.log(typeof(x));
// 对象
console.log(typeof([1,2,3]));
console.log(typeof {name:"靓仔正",age:12});
console.log(typeof(null));
</script>效果如下:
Tips:typeof(x)可以谢伟typeof x,用小括号or空格都可以
(三).数字类型
1.不同进制的数
我们一般使用使用的数字是十进制的，但是在js中我们还可以使用八进制和十六进制。
10进制：由10个数字组成，0123456789组成，没有一个单独的数字代表10
8进制：由8个数字组成，01234567组成，没有一个单独的数字代表8
十六进制：由16个数字组成，0123456789ABCDEF组成,没有一个单独的数字代表16
<script>
// 八进制 - 1234567,现在版本建议前缀不要直接用0,而是0o
var a = 0o10;
console.log(a);
// 十六进制
var b = 0xA;
var c = 0xb;
console.log(b)
console.log(c)
</script>效果如下:
2.科学计数法
数字的表达当中，有一种叫科学记数法，js中的数字也可以使用科学记数法来表示
<script>
// 当一次数字很大的时候,可以用科学计数法表示
// 3*10的5次方
var num = 3e+5
// 5*10的-3次方
var num = 5e-3
</script>3.数值范围
内存大和小有什么区别呢？存储的数据多和少的区别。
那计算机存储数据是没有限制的吗？不是，计算机能表达的数字也有极限值：
最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity 1/0
无穷小：-Infinity -1/04.NaN
在js中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，js不会报错，而是会返回一个NaN
NaN的注意事项：
-
NaN的类型是number类型的，表示一个非数字
-
NaN不等于任何值，包括NaN本身
-
通过isNaN()可以判断是否是一个数字，返回false的时候，表示是一个数字。
// 先将变量a定义为字符串
var a = "abc";
// 再定义b=数字
var b = 2;
// 定义c=a减去b
var c = a - b;
// 输出到控制台 结果为NaN,意为非数字(not a number)
console.log(c);//Nan
// 判定类型 是否不是数字,
// 也就是如果是数字就会返回false,如果不是数字就会返回true
console.log(isNaN(a));
console.log(isNaN(b));效果如下:
5.小数
计算机中的小数在进行运算的时候，有时会碰到小数点精度不准确的现象
计算机内部所能识别的数据只有二进制，当我们进行10进制数字运算的时候，在计算机内部需要先将数据转为2进制，然后运算，再将结果转为10进制给出来。10进制的小数进行2进制转换的时候，根据转换规则，有些小数会进行无限死循环，最终在后面数字太多的时候只能四舍五入，所以其实最终并没有很精确的转为2进制，所以只能给出一个大概的值。有时候会有两个大概的值相加，在转换10进制的时候正好能转换了，也会计算的比较精准。
// 因为计算机内部识别的数据只有二进制,我们进行十进制运算时
// 计算机内部需要将十进制转为二进制进行计算再转回十进制,所以会有计算误差
// 例如:以下计算的结果值为0.300000000000000004
console.log(0.1 + 0.2)
// 解决方法:
// 方法一:小数点后有多少位就乘以相应整数,再除去该整数
console.log((0.01*100+0.02*100)/100)
// 方法二:使用toFixed工具强行保留小数点后位数
var a = 0.01 + 0.02
console.log(a.toFixed(3))效果如下:
(四).字符串类型
字符串所使用的引号，在js中，单引号和双引号是没有区别的，使用哪个都一样。
字符串中的字符是任意字符，即只要在键盘上能输入的字符都是可以的。
单引号和双引号也是字符串的字符：
<script>
// 单双引号本身就是一种字符串
var str1 = " ' "//一个单引号字符的字符串
var str2= ' " '//一个双引号字符的字符串
/* !注意:双引号中不能包含双引号,单引号中也不能包裹双引号
因为浏览器解析字符串时,遇到出开头外的第一个引号时就会默认引号结束了 */
// 错误示范
// var str = '钟大帅说:"整个教室只有一个靓仔,那个靓仔说:'我不是靓仔'"';
//解决方案:将引号转义成普通字符,去掉引号对于字符串的特殊含义
//转义就是给引号前面加反引号\
var str = '钟大帅说:"整个教室只有一个靓仔,那个靓仔说:\'我不是靓仔\'"';
// js输出标签
// js可以输出标签,让页面元素具有标签特性,但输出时一定要将标签当成字符串输出
document.write("<b>靓仔正</b>");
document.write("<i>");
document.write("我倾斜了");
document.write("</i>");
// 字符串拼接
// 可以用变量代替每一次输出
var a = '<i>';
var b = '文字倾斜';
var c = '</i>'
document.write(a)
document.write(b)
document.write(c)
// 还可以用+字拼成大字符串输出
document.write(a + b + c)
</script>(五).对象类型
object类型，在js中有3种表现形式，分别是：
-
null
-
用[]定义的数据
-
用{}定义的数据
(六).undefined类型
当一个变量定义好了，但是没有给这个变量赋值，也就是没有给这个容器中放入数据，这个变量的默认值就是undefined，类型也是undefined。
五.运算符
(一).关系运算(比较运算)
| 运算符 | 描述 |
|---|---|
> | 大于 |
>= | 大于等于 |
< | 小于 |
<= | 小于等于 |
== | 等于（主要用于判断两边的值是否相等） |
=== | 全等于（先判断两边的类型是否相等，类型相等再判断值是否相等） |
!= | 不等于，等于的反义词，等于为false的时候，不等于就为true |
!== | 不全等，全等的反义词，全等为false的时候，不全等就为true |
关系运算最后的结果只有两种，一种是真，一种是假，也就是布尔型的true和false
<script>
var a = 8;
var b = "8";
// > - 大于
console.log(a>3);//true
// >= - 大于等于
console.log(a >= 4);//true
// < - 小于
console.log(a < 8);//false
// =< - 小于等于
console.log(a <= 8);//true
// == - 等于(主要用于判断两边的值是否相等)
console.log(a == 7);//false
// === - 全等于(先判断两边类型是否相等,类型相等再判断值是否相等)
// 虽然a的值等于8等于b,但是b的8加了双引号,类型不一样了,一个是数字一个是字符串
console.log(a === b)//false
// != - 不等于,等于的反义词,等于false时,不等于就为true
console.log(a != 8)//false
// !== - 不全等,全等的反义词,全等为flase,不全等为true
console.log(a !== 8);//false
</script>(二).赋值运算
| 符号 | 描述 | 示例 |
|---|---|---|
| += | 自己先加后，再赋值给自己 | 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 |
<script>
var a = 8;
// += - 先给自己添加,在赋值给自己
a += 2;//a+2 = a
console.log(a);
// -= - 先自减再赋值给自己
a -= 3;//a-3 = a
console.log(a);
// *= - 先自乘再赋值给自己
a *= 4;//a*4 = a
console.log(a);
// /= - 先自除在赋值给自己
a /= 5;// a/5 = a
console.log(a);
// %= - 先自余再赋值给自己
a %= 6;// a%6 = a
console.log(a);
</script> (三).逻辑运算
逻辑运算一般用于判断多个关系运算，得出最后结果。
| 运算符 | 描述 |
|---|---|
| &&（与，并且） | 左右两边都为true，最后结果才为true，否则就是false |
| ||（或者） | 左右两边只要有一个true，最后结果就为true，否则就是false |
| ！（非，取反） | 将true处理为false，将false处理为true |
逻辑运算最后得出的结果也是布尔型。
// 先定义一个变量,并赋值任意数
var age = 24;
// && - 与,并且 要求两边都为true结果就会为true,否则为flase
var result = age > 18 && age < 30;
console.log(result);
// || - 或者 左右两边只要有一个true,最后结果就为true,否则为flase
result = age < 18 || age > 30;
console.log(result);
// ! - 非,取反 将true处理为false,将false处理为true
result = !(age < 30);
console.log(result);(四).自增自减运算
<script>
var a = 1
// ++ 表示让一个数字递增1
a++
console.log(a);
++a
console.log(a);
// 但是当递增运算遇到赋值或者输出的时候,++放在前面和后面就有区别了
// +号放后面
var a = 1
// 此时是先输出,再递增
console.log('此时a的值为:' + a++);
console.log('此时a的值为:' + a);
var b = 1
var c = b++
console.log('此时b的值为:' + b);
console.log('此时c的值为:' + c);
// +号放前面
var a = 1
// 此时是先递增再输出
console.log('此时a的值为:'+ ++a);
console.log('此时a的值为:'+a);
var b = 1
var c = ++b
console.log('此时c的值为:'+c);
console.log('此时b的值为:'+b);
</script>当++放在前面的时候，就先进行递增运算， 后进行输出或赋值。
符号：-- 表示让一个数字递减1
使用方法和注意事项与递增一样。
递增递减运算需要使用变量，不能使用具体数字
六.类型转换
(一).强制转换
1.转换为布尔型
语法： Boolean(arg)
Boolean(arg)-
非0数字转换为布尔型为true，0转换为布尔型为false
-
非空字符串转换为布尔型为true，空字符串转换为布尔型为false
-
undefined转换为布尔型为false
-
null转换为布尔型为false
2.转换为字符串
语法： String(arg)
-
true转换为字符串仍为 true，false转换为字符串仍为false
-
null转换为字符串扔为null
-
undefined转换为字符串仍为undefined
3.转换为数字
语法：
Number(str)-
NaN代表不是数字，但是他是数字类型（没有意义的数字）
-
非数字字符串转换后都是NaN（NaN是一个不是数字的数字类型）
-
true转为数字为1，false转为数字为0
-
undefined转换为数字为NaN
-
null转化为数字为0
使用函数强制转换为数字
语法：
parseInt(arg) # 强制转换为整数
parseFloat(arg) # 强制转换为小数-
小数转换为整数只取整数，向下取整
-
首位非数字的字符串强转为整数为NaN，首位是数字的字符串强转为整数是首位的数字
-
布尔型强转为数字为NaN
-
undefined强转为数字为NaN
-
null强转为数字为NaN
补充：使用toString()方法强制转换为字符串，转换结果和String()函数一样
<script>
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);
</script>
注意：这个方法不能给undefined和null使用
(二).隐形转换
比较运算时发生隐形转换，例：
-
如果两个值都是字符串，则进行比较编码值
-
如果有一个值为数字或布尔型，则转换为数字进行比较
-
字符串进行比较的时候首字符进行比较，相等再进行后面的字符比较。参照阿斯克码表。
数字运算时会转换为数字型,例如:
var str = "100"
var a = str % 10
// true转数字默认为1,flase默认为0
var b = true + 1
console.log(a);
console.log(b);
拼接运算时也会发生字符串转换
var a = "1"
console.log(a + 12);
七.进制
我们平常使用的数字是十进制的，由0~9这10个数字组成，没有一个单独的数字代表10，要表示10，需要向前进一位，所以是10进制。
计算机内部还会使用二进制、八进制和十六进制。
二进制由0和1两个数字组成，没有一个数字表示2，要表示2，需要向前进一位。
同理八进制由0~7这8个数字组成。表示8的时候要向前进一位。
十六进制由0~9和a~f这16个数字组成，使用f来表示15，表示1要向前进一位。
(一)其他进制转10进制
转成10进制：以进制为底，幂从右往左依次为0次方，1次方，2次方…，乘以当前当前数字在10进制中的结果，所有乘积相加
例：
1.16进制的FF转为10进制：
示意图
2.2进制的11011转为10进制
示意图
(二).10进制转其他进制
10进制的11转2进制
反向取余数
示意图
1153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
