一2
1.js由来
由网景公司程序员布兰登·艾奇(Brendan Eich)开发脚本语言：LiveScript,这门语言在后面发布的时候，希望能蹭到Java的热度，将LiveScript改名为JavaScript。简称JS。 在版本更新迭代的官方称呼中，叫做ECMAScript。
2.js的概念
支持面向对象的跨平台脚本语言.
概念理解：
脚本语言：依赖别的语言才能运行
html必须在浏览器中才能运行，js嵌套在html中才能运行
跨平台：可以在不同的平台上运行
windows、linux、安卓。。。
支持面向对象
使用面向对象的思想编程
3.js和H5的关系
广义的H5，指的是大前端，内容包括HTML+CSS+HTML5+CSS3+JavaScript+前端框架（Vue+React+Angular）+移动端开发（App+小程序）+NodeJS后端技术+跟JavaScript相关的其他技术。。。
狭义的H5，特指HTML的第5个版本，新增了一些语义化标签，新增了一些input的type属性，新增了一些选择器。。。
HTML5的强大之处，不在于新语法，而在于很多HTML5的标签，支持了JS的操作，例如：自定义多媒体布局并控制多媒体播放、canvas标签做画布绘图。。。
4、JS的应用场景
-
表单验证：对用户输入数据进行验证，数据验证通过后，进行提交
-
网页特效：实现用户跟网页的交互，并展示有趣的效果，例如：轮播图、放大镜
-
游戏开发：网页游戏，例如4399小游戏、网页贪吃蛇、。。。
-
物联网：门禁、摄像头监控、自动售货机。。。
5.js的组成
| js的组成示意图 |
|---|
 |
ECMAScript：语法标准
BOM: 操作浏览器的标准
DOM:操作HTML文档的标准
二、JS的基本使用
1、JS的书写方式
跟css样式一样，JS的书写也有3种方式，内联、外联和行内。
1.1、内联
JS是脚本语言，运行需要依赖HTML，HTML是由标签组成的，所以JS在HTML中就体现为一个script双标签。JS的代码就写在这个标签中。
这个标签可以放在HTML文档的任意位置，但在不同的位置，对于代码的执行有一定的影响，因为HTML的解析是按照顺序执行的，对于初学者，建议将script标签放在body结束之后。
当浏览器在执行HTML代码的时候，就会解析其中的script标签，并运行JS代码。
1.2、外联
将JS代码放在一个后缀为.js的文件中，通过script标签的src属性，将文件引入进来即可。
注意：一个script标签，只能作为内联或外联使用，不可以同时使用。
1.3、行内
将JS代码写在标签上，作为属性的值使用。
2、JS的注释
注释代码不会被执行，仅仅起到一个提示的作用。注释可以对复杂的代码进行解释，方便后期的维护和开发。
-
单行注释：
// js的单行注释是双斜杠
-
多行注释：
/* js的多行注释： 开头是斜杠星号 结尾是星号斜杠 */
3、JS的输出
1.以弹窗的形式显示
alert(11);
2.以文本的形式显示
document.write(123456);
3.可输入内容的弹窗
prompt(12345)
4.询问用户是否确认操作的弹窗
confirm(12345)
5.浏览器控制台输出
console.log(123);
三、变量
a = 1
document.write(a)
b = a + 2
document.write(b)
c = b + 3
document.write(c)
1、概念
在JS中，我们把存储数据用的容器，称之为变量。变量这种容器，处于内存中。
也就是说，一个变量就是内存中存储数据用的一个内存空间。
2、定义变量
语法：
var 变量名;
var是一个关键字，也就是JS内部指定有特殊作用的单词。
3、变量名的规则
变量名由字母、数字、下划线、美元符号组成，不能用数字开头，不能使用关键字作为变量名。
4、变量本质
定义变量的过程，就是在内存开辟了一个空间，名字是变量名
5、赋值
赋值重点：
-
赋值符左边的一定是一个变量，准备接收数据
-
赋值符右边的一定是一个具体的值或者能得到值的一个表达式
-
赋值符的唯一作用就是将右边得到的值放在左边的变量容器中
例：
var a; a = 10; var b; b = 20; var c; c = a + b;
6、常用操作
定义变量，给变量赋值的两行代码，可以合并为一行：
var a a = 10; var b = 20; var c = a + b;
定义多个变量，也可以在定义的时候赋值，每个变量之间使用逗号隔开：
var a = 10,b = 20; var a,b = 20; var a = 10,b; c = 10 // 强烈不建议写法
四、数据类型
1、引入
| 类型 | 示例 | 备注 |
|---|---|---|
| 数字型（number） | 1 -2 3.14 300 | 包括整数、小数、负数 |
| 字符串型（string） | "你好吗？" '今天嫁给我' | 用引号引起来的任意多任意字符，单引号和双引号都行 |
| 布尔型（boolean） | true false | 代表事物的两面性，真和假 |
| 未定义型（undefined） | var a | 代表定义过未赋值的变量 |
| 对象（object） | null [1,2,3] {name:张三} | 代表一个集合 |
2、类型检测
使用typeof(被检测的内容)可以得出一个内容的类型。
console.log(typeof(-123456)); // 数字型
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)); // 对象
多学一招：typeof(x) 可以写成 typeof x 。使用小括号和空格都可以。
3、数字类型
在结果中可以看到使用number来代表数字类型
3.1、了解内容
3.1.1、不同进制的数字
我们一般使用使用的数字是十进制的，但是在js中我们还可以使用八进制和十六进制。
var a = 010; // 8进制 var b = 0xA; // 16进制 var c = 0xb; // 小写字母和大写字母都可以 console.log(a); // 8 console.log(b); // 10 console.log(c); // 11
3.1.2、科学计数法
数字的表达当中，有一种叫科学记数法，js中的数字也可以使用科学记数法来表示
//当一次数字很大的时候，可以用科学计数法来表示 var num = 3e+5; //3乘以10的5次方 var num = 5e-3;//5乘以10的-3次方
3.1.3、数值范围
内存大和小有什么区别呢？存储的数据多和少的区别。那计算机存储数据是没有限制的吗？不是，计算机能表达的数字也有极限值：
最小值：Number.MIN_VALUE，这个值为： 5e-324 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308 无穷大：Infinity 1/0 无穷小：-Infinity
3.2、需要掌握的内容
3.2.1、NaN
var a = "abc";
var b = 2;
var c = a - b;
console.log(c); // NaN
NaN: not a number, 表示一个非数字
在js中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，js不会报错，而是会返回一个NaN
NaN的注意事项：
-
NaN的类型是number类型的，表示一个非数字
-
NaN不等于任何值，包括NaN本身
-
通过isNaN()可以判断是否是一个数字，返回false的时候，表示是一个数字。
var a = 123; var b = "abc"; console.log(isNaN(a)); // false console.log(isNaN(b)); // true
3.2.2、小数
计算机中的小数在进行运算的时候，有时会碰到小数点精度不准确的现象
//在进行浮点数运算的时候，可能会出现精度丢失的问题 0.1 + 0.2 = 0.30000000000000004; 0.2 + 0.2 = 0.4;
原因：
计算机内部所能识别的数据只有二进制，当我们进行10进制数字运算的时候，在计算机内部需要先将数据转为2进制，然后运算，再将结果转为10进制给出来。10进制的小数进行2进制转换的时候，根据转换规则，有些小数会进行无限死循环，最终在后面数字太多的时候只能四舍五入，所以其实最终并没有很精确的转为2进制，所以只能给出一个大概的值。有时候会有两个大概的值相加，在转换10进制的时候正好能转换了，也会计算的比较精准。
consoloe.log(0.2 + 0.2) // 0.4
也不绝对，如果小数是2的n次方分支m的话，计算机内部存储的就比较准确。
console.log(0.125 + 0.5) // 0.625
解决办法：
// 解决办法 : // 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
4、字符串类型
单引号和双引号也是字符串的字符：
var str = '"' // 一个双引号字符的字符串 var str1 = "'" // 一个单引号字符的字符串
4.1、引号问题
但是双引号中不能包含双引号，单引号中不能包含双引号，因为引号对于字符串来讲是有特殊含义的，就是给字符串做边界，双引号定义的字符串，在字符串中碰到第一个双引号，就认为将前面的双引号结束了，单引号同理。
但在某些特殊情况下，双引号就需要嵌套双引号，单引号就需要嵌套单引号：
解决方案：
给字符串中的引号转义，也就是将引号对于字符串的特殊含义去掉，就剩下普通字符的含义即可。转义是给引号前加反引号\。
4.3、字符串的拼接
如果我们在此时希望能一次输出的话，就需要将多个变量连接在一起，组成一个更大的字符串才行，字符串之间的连接使用拼接符：+
var a = '<i>'; var b = '文字倾斜'; var c = '</i>'; document.write(a + b + c)
也就是说，字符串和字符串之间的 + 是可以将两个字符串连接在一起组成大字符串的。
5、对象类型
object类型，在js中有3种表现形式，分别是：
-
null
-
用[]定义的数据
-
用{}定义的数据
6、undefined类型
当一个变量定义好了，但是没有给这个变量赋值，也就是没有给这个容器中放入数据，这个变量的默认值就是undefined，类型也是undefined。
五、运算符
1、算术运算
2、关系运算（比较运算）
| 运算符 | 描述 |
|---|---|
> | 大于 |
>= | 大于等于 |
< | 小于 |
<= | 小于等于 |
== | 等于（主要用于判断两边的值是否相等） |
=== | 全等于（先判断两边的类型是否相等，类型相等再判断值是否相等） |
!= | 不等于，等于的反义词，等于为false的时候，不等于就为true |
!== | 不全等，全等的反义词，全等为false的时候，不全等就为true |
关系运算最后的结果只有两种，一种是真，一种是假，也就是布尔型的true和false
等于和全等于
var a = 123; var b = "123"; console.log(a==b); // true console.log(a===b); // false
引号只能代表数据的类型不同，字符串在内存中存储的时候不会将引号存进去的，所以字符串在内存中的真是存储其实是不带引号的，所以a变量和b变量在内存中存的内容也一样，所以是相等的
但类型不一样，所以不全等。
3、赋值运算
| 符号 | 描述 | 示例 |
|---|---|---|
| += | 自己先加后，再赋值给自己 | 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 |
代码：
var a = 1; a += 2; // 将a先加2，得到结果3，再将3赋值给a console.log(a); // 3
要理解上面的代码，首先理解给变量重新赋值。
var a = 1; // 先声明，给a赋值为1 a = 3; // 给变量a重新赋值为3 console.log(a); // 3
然后理解自己运算后再赋值给自己（回想一下：赋值符左边是变量，右边是值）
var a = 1; a = a + 2; // 自己加2后再赋值给自己 console.log(a); // 3
4、逻辑运算
逻辑运算一般用于判断多个关系运算，得出最后结果。
| 运算符 | 描述 |
|---|---|
| &&（与，并且） | 左右两边都为true，最后结果才为true，否则就是false |
| ||（或者） | 左右两边只要有一个true，最后结果就为true，否则就是false |
| ！（非，取反） | 将true处理为false，将false处理为true |
逻辑运算最后得出的结果也是布尔型。
5、自增自减运算
符号：++ 表示让一个数字递增1
++可以放在后面，也可以放到前面，表示的意思是一样的当递增运算碰到赋值或者输出的时候，++放在前面和后就有了区别：
放在后面
当++放在后面的时候，就最后进行递增运算，先进行输出或者赋值。
放在前面
当++放在前面的时候，就先进行递增运算， 后进行输出或赋值。
符号：-- 表示让一个数字递减1
使用方法和注意事项与递增一样。
递增递减运算需要使用变量，不能使用具体数字
六、类型转换
1、强制转换
1.1、转换为布尔型
语法：
Boolean(arg)
-
非0数字转换为布尔型为true，0转换为布尔型为false
-
非空字符串转换为布尔型为true，空字符串转换为布尔型为false
-
undefined转换为布尔型为false
-
null转换为布尔型为false
1.2、转换为字符串
语法：
String(arg)
-
true转换为字符串仍为 true，false转换为字符串仍为false
-
null转换为字符串扔为null
-
undefined转换为字符串仍为undefined
1.3、转换为数字
语法：
Number(str)
-
NaN代表不是数字，但是他是数字类型（没有意义的数字）
-
非数字字符串转换后都是NaN（NaN是一个不是数字的数字类型）
-
true转为数字为1，false转为数字为0
-
undefined转换为数字为NaN
-
null转化为数字为0
1.3.1、使用函数强制转换为数字
语法：
parseInt(arg) # 强制转换为整数
parseFloat(arg) # 强制转换为小数
-
小数转换为整数只取整数，向下取整
-
首位非数字的字符串强转为整数为NaN，首位是数字的字符串强转为整数是首位的数字
-
布尔型强转为数字为NaN
-
undefined强转为数字为NaN
-
null强转为数字为NaN
补充：使用toString()方法强制转换为字符串，转换结果和String()函数一样
注意：这个方法不能给undefined和null使用
2、隐形转换
2、隐形转换
数学运算时转换为数字型，
比较运算时发生隐形转换，例：
-
如果两个值都是字符串，则进行比较编码值
-
如果有一个值为数字或布尔型，则转换为数字进行比较
-
字符串进行比较的时候首字符进行比较，相等再进行后面的字符比较。参照阿斯克码表。
拼接运算时发生字符串转换
108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
