JS介绍
虽然是java作为前缀，但java和javascript的关系，就像老婆和老婆饼之间的关系，没有一毛钱关系
网景公司在Netscape2.0首先推出了JavaScript
JavaScript 的正式名称是"ECMAScript"，此标准由 ECMA 组织发展和维护，简称"js"
JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为
JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释
执行代码，不进行预编译
js的特点：
可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序 （后面会学习不用浏览器也能运行）
解释执行：事先不编译，逐行执行
基于对象：内置大量现成对象
适宜：
客户端数据计算
客户端表单合法性验证
浏览器事件的触发
网页特殊显示效果制作
一般网页都是在自己电脑上进行操作的，即服务器只提供网页，但显示还是自己电脑显示
这是为了防止多量数据的操作，使得服务器不好处理，就如数据库一样，其他电脑通过网络可以使用数据，但本身并没有数据存放
即其他电脑可以使用网页，但自己并没有这个网页，就如使用自己网页一样，需要加载，只不过其他电脑加载的不是自己的网页
但由于直接写js会被检查看到，所以基本上都是js文件的导入，即加载js文件，只不过加载的是通过网络加载的js文件
js的组成：
ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象，更有层次感的管理每一个节点
BOM：浏览器对象模型，是对浏览器窗口进行访问和操作
使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作
使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准：
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口大小
提供 Web 浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对 cookie 的支持
IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而实现ajax局部刷新技术
注意：js与浏览器元素的关系是不怎么联系的，js在确定之后
那么元素的改变基本不会影响js的确定
如onclick属性，只要元素还在，就会执行，因为他在识别时，直接保存节点对象进行操作的
即删除元素对应id，但任然会执行js，但是反过来，js需要元素的内容时，会受元素的修改关系，因为他是真正的需要对应属性，如得到对应id的内容，我们可以明显的看到js是底层操作，一般可以认为css和html是js的集成，或者说，他们都是集成（给浏览器操作），只不过js比较底层
HTML与javaScript结合方式---------------------------
使用js的三种方式：
行内脚本：
点击按钮（触发）
弹框（具体的操作）
<!--
<button οnclick="alert('弹框测试')">点我一下</button>
-->
内部脚本：
<!--
使用<script></script>
标准是写在head和body之间（脖子位置，不影响引入位置，在上一章博客也说明了这个），但其实只要写在html文件内部就可以
无论什么位置<html>外，<p></p>内部，都可以，与css的style的位置方式一样（导入也差不多一样（主要针对位置）），正确位置基本也是一样，所有浏览器都会补全或者移动错误位置
除了@import，他需要等html解释完才会导入
位置方式过后，执行方式是从上至下
即一般写在后面的会后执行
最好无论是css还是js，html，他们都是从上到下一路解释过去的，且是同步（除了js可以异步外）
<body>
<script>
alert("弹框");
</script>
</body>
-->
外部脚本：
在项目根目录下创建一个目录js
在js目录中创建一个文件，后缀名是.js
在html页面中，使用
<!--
<script src="js/xx.js"></script>
注意无论是css的导入，还是js的导入，都是从上到下的执行，因为html就是文档流的操作
link可以指定其他不是css的文件，所以需要注明rel，而script不需要，只指定js文件，所以就不需要指定
对于大多数的src都是指定具体文件路径的（frame没有），而href可以指定多种文件路径
-->
以上使用脚本的三种方式的优先级，谁在上，谁先执行
因为是解释性语言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script>
alert("hi,内部js！");
</script>
<!--
与style一样写js脚本，会直接执行，从上到下
-->
<script src="js/test01.js"></script>
<body>
<h2 onclick="alert('hello，行内js！')">点我试试</h2>
<!--
对于事件可以直接写函数体
onclick 英文意思：单击鼠标
alert 英文意思：警觉的
在h2标签上绑定一个点击事件使得
当你点击h2标签的内容时，就会弹出alert（框）的提示（内容），即hello，行内js!
注意使用行内脚本时，单引号和双引号注意交替使用，因为相同的会被当作分割作用
alert内容需要看对应类型，但alert后面的分号可以省略
-->
</body>
</html>
JavaScript的使用-----------------------
变量：
因为js是弱类型语言，所以，在定义变量的时候，所有的数据类型都是var，会根据值来判断类型
声明变量：
var x ;
var x,y;
也可以直接不写var
如x;
x,y;
其中没有写var的变量就是全局变量，任何地方都可使用，而使用var的变量就是局部变量，只能给当前局部和下局部使用
如方法里写var的变量只能给方法体或者其中的其他方法使用，若var的变量写在最外面，即刚刚好是script标签里面
那么就是范围最大，相当于全局变量，注意：我们说过他们是集成与操作浏览器的，也就是说，一般可能通过js这个比较底层来得到浏览器相关信息，而这些信息中就包括了浏览器的信息以及变量的操作，且符合浏览器的语法，很明显，js是一个非常庞大的操作，对比html和css庞大的多，这也是为什么js会有时候看成一个编程语言的原因，虽然可能会认为css更加的复杂，但是实际上css之所以复杂，只是因为集成的太多，比较混乱而已，而这个混乱可不能说成复杂的
值不能单纯为字母，不识别且一般不会执行后面的代码，类似于java一样，但只所以用识别，是因为html报错时，不停止执行，与html是不同的哦，既然开发人员编写出来js，那么自然也能实现报错的操作，二进制基本可以将你想象的都实现
数值类型：number
不区分整型数值和浮点型数值所有数字都采用 64 位浮点格式存储，类似于double 格式
字符串：string首尾由单引号或双引号括起
var aa=“欢迎来到"JavaScript世界”;
注意：一般情况下，转义只需要一个" \ "就可以了，但有些时候需要两个，如java的正则表达式的\d
对于java的正则表达式来说
虽然正则表达式本身就有" \ “，但其实相当于没有改变原来数据，而原来的正则表达式是字符串，然后再进行”\字符串"的
但要使得得到\d，必须要在字符串里使用\ \d来得到，所以使用两个\的原因就是字符串的原因，和正则表达式的\d的原因
使得正则表达式可以识别作用，当然，正常的\t可以不用再次转义
因为他不作用于正则表达式，而是直接字符串，所以第一次就使用了
而js若是先定义正则表达式（经过字符串），那么也有两个\，除非有直接使用的，不经过字符串
因为java的正则表达式，基本都是先定义的而不是直接使用（方法里使用），导致经过字符串操作
布尔类型：
仅有两个值：true和false，也代表1和0
实际运算中true=1,false=0
一般来说，在进行运算符操作时，如||，那么-1，1为true，而0为false，通常不为0的数字基本都是true，可以自行测试
并且在判断是否为真为假的操作时，并不是操作运算符，只是运算符最终的结果被判断了而已，所以会出现如下的这样的情况：
console.log(document.body==true)
if(document.body){
console.log(1)
}
/*
打印了：
false
1
即在判断这个层面，对象还是真值的，只是操作运算符时考虑的更多，所以为false
*/
自动类型转换：
<!--
要注意：js与java始终是由不同的开发人来开发的，既然二进制可以基本可以将你想象的都实现，那么自然是实现开发人的想象，那么无论是语法还是某些操作可能都不同，但是某些基础操作还是相同的，大多数的语言都是如此
数字 + 字符串：数字转换为字符串，10+"a" -> 10a
数字 + 布尔值：true转换为1，false转换为0，true+5->6，结果为number数值类型
字符串 + 布尔值：布尔值转换为字符串true或false，true+"a"->truea
布尔值 + 布尔值：布尔值转换为数值1或0，true+true->2，结果为number数值类型
即数值之间，除了非数字字符串（内容不全是数字，如有字母）的除加号的运算，结果都转化为number数值类型（数字字符串）
否则结果都为NaN（非数字值的特殊值，该属性用于指示某个值不是数字）
与java不同，java不能直接的将数值和字符串进行除了加法的运算，否则报错，而由于这是弱语言，在运算时
使得数字字符串可以看成数值类型，即就是number数值类型，且前后空格忽略
但本身并没有改变（进行操作），因为只有在运算中才会这样操作（看成）
与mysql一样，数字字符串可以进行除加法的运算操作，但mysql却可以进行加法运算
而无论是弱语言（不那么严谨），还是强语言（很严谨），加法在字符串之间基本都是连接的意思
在js中，数字字符串在除加法运算时，会看成number数值类型
一般的运算，要为字符串，要么为数值，没有其他，所以在输出时，那么为数值，要么为字符串
基本上所有的语言都是这样，因为底层基本上最后还是会变成字符串
注意：运算包括所有运算，如算术运算，关系运算，逻辑运算
上面说明了数字字符串和非数字字符串，这里给出区别：
其中"1a"就是非数字字符串，"1"就是数字字符串
-->
数据类型转换函数：
parseInt：强制转换成整数
如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊值，该属性用于指示某个值不是数字，特指数字操作出现的错误，一般不能用来进行计算，否则报错，也就是将错误保留，而不是直接的报错，有些弱语言（js）在某些情况下，是可以保留不怎么大的错误的，有些还是会的，一般不怎么大的错误，说明他一般不会造成数据破坏，就如这里，而如果像var s = kk，kk若不存在则会，因为若kk可以这样，那么若后面有相同变量的，又怎么操作或者又怎么保证js语法的规定好处呢，这样就使得初始化乱套，自然不能）
例如：parseInt(“6.32”)=6
parseFloat：强制转换成浮点数
如果不能转换，则返回 NaN
例如：parseFloat(“6.32”)=6.32
typeof：查询数值当前类型，返回 string / number / boolean / object，返回的是字符串
例如：typeof(“test”+3)==“string”
null 与 undefined：
null 在程序中代表"无值"或者"无对象"
可以通过给一个变量赋值 null 来清除变量的内容
undefined声明了变量但从未赋值或者对象属性不存在
即相当于null对于var a = null
undefined相当于var a，或者var b = new Array()，b[6]
即null也是一个值，与其他值一样，只不过代表空的，即没有类型，但有值
而undefined则代表什么都没有做，即没有该内容或者没有声明的东西，只是定义，因为var是需要值来进行确定的
没有值，就是不确定，可以理解为undefined就是没有确定或者对应有变量，但是变量等等内容不存在的值，即缺少值
但上述都会占据空间，如数组，由于数组可以随便定义值，当你设置一个下标很大的值时，中间没有值，即默认为undefined
这就是数组可以随便设置的原因
即null代表无对象（他也是值），undefined代表缺少值（缺少东西）
可以看到，实际上var a他是设置了数据的，也就初始化，只不过他的数据是undefined，很明显，在js中，他的每个值都非常有意义，但是正是因为这些杂乱无章的值，也确定了他的不严谨性，当然，有时候不严谨也是有好处的，因为对于浏览器来说，那么变化更多，更符合操作的人，所以若可以，实际上其他编程语言也能这样操作，但是在后端是需要数据保证的，自然严谨
算术运算：
加(＋)、 减(－)、 乘( * ) 、除( / ) 、余数( % )
- 可以表示减号，也可以表示负号，如：x = -y
+可以表示加法，也可以用于字符串的连接
递增( ++ ) 、递减( – )
i++ 相当于 i=i+1
i-- 相当于 i=i-1
这样的返回与java一样，其实也是原来的"i"，也可以" --i " 和 " ++i "
与java都是先后压入内存的方式，i++先压再加，++i先加再压
也可a+=2,a-=2，就是a=a+2,a=a-2
与java一样，也验证了之前说明的"某些基础操作还是相同的，大多数的语言都是如此"，之所以是某些，是因为存在如java中只能同类型比较，否则直接报错，而js没有这样的规定，等等非常多的不同的处理
关系运算：
严格相等：===
类型相同，数值相同
非严格相等：!==
<!--
var a = "10";
var b = 10;
if (a == b)
alert("equal");
if (a === b)
alert("same");
在java中在输出内容之前，会进行比较操作的，实际上最后都是字节来进行图案显示,也可以说明他们也是操作内部的编码操作的，因为他也是一个语言，也是操作实现的，只是浏览器可以直接识别js变成二进制，当然，可能内部也有其他功能，可以认为浏览器就如jvm一样，他们在我们电脑里面都是文件
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
var a = 10 + "a";
var b = true + 5;
var c = true + "a";
var d = true + true;
console.log(a +"|" + typeof(a) ); // 10a, string
console.log(b +"|" + typeof(b)); //6, number
console.log(c +"|" + typeof(c)); //truea , string
console.log(d +"|" + typeof(d)); //2 , number
var x = "6.32";
console.log( parseInt(x) +"|" + typeof(parseInt(x))); // number:6
console.log( parseFloat(x) +"|" + typeof(parseFloat(x))); // number:6.32
//注意js中数值的范围有限，大概只有16位，后面就不显示了，而字符串则没有限制
//parseInt()将参数字符串或者数值转化为整数
//parseFloat()将参数字符串或者数值转化为浮点数
//若字符串的数字是隔开的，只识别第一个数字，由于这是一个弱语言，即报错后，就不会执行后面代码
//与html解释型语言不同，若弱语言和强语言报错后，基本都会停止运行，mysql也一样
//只不过执行了多条语句，报错不影响其他语句，因为语句之间是不联系的，分离的
//就如不同的没联系的java代码一样互不影响
//其中js是区分大小写的，即var A不是var a,不同语言区分大小写不同
/*
parseInt 英文意思：解析整数
parseFloat 英文意思：解析浮点
typeof 英文意思：操作符，可以返回该变量的类型
*/
var y1 = "10";
var y2 = 10;
var b1 = y1 == y2; // 判断值
var b2 = y1 === y2; //严格判断
console.log( b1 ) ; // true
console.log( b2 ) ; // 虽然值相等，但类型不相等，所以false
/*
可以使用//注释，而style不可使用
其中console英文意思：控制台
log 英文意思：日志
即console.log
可以将该里面的内容打印到浏览器的控制台里
如
检查里的这两个
Elements 英文意思：要素，看真正的代码，其中可以修改body标签里的内容
当你指定一段代码时，代码最后面会出现$0，在控制台打出$0，就可以显示出，你指定的那一段代码，这也是之前说明的BOM，也是js的一员，那么自然在BOM的操作，实际上就是操作js的，并且还可以操作已经操作的js的内容，即在DOM操作后的补充（一般是浏览器的补充，因为需要浏览器），其中ECMAScript，DOM，BOM都是js，DOM也是js，这也是为什么html和css是js的集成的原因
Console 英文意思：控制台，可以操作浏览器，由于浏览器读取js文件后
不可再次读取了，那么控制台，就给了你再次操作js的一种机会，即也可以写js，当然也有其他的功能
如显示结果，即console的代码结果，或者操作属性，数据等等，相当于js的后续操作，有js操作过的内容
*/
</script>
</body>
</html>
逻辑运算：
逻辑非（!）、逻辑与（&&）、逻辑或（||）
逻辑运算的操作数均为 boolean 表达式
控制语句：
<!--
if（关系表达式） {
// 语句块 1
}else {
// 语句块 2
}
if (表达式1) {
// 语句1;
}else if (表达式2){
// 语句2;
}else if (表达式3){
// 语句3;
} else{
// 语句4;
}
switch (表达式) {
case 值1: // 语句1;
break;
case 值2: // 语句2;
break;
default: // 语句4;
}
for (var i=1 ; i<=5 ; i++){
alert(i);
}
while (条件){
// 语句1; ...
}
default 英文意思：默认
finally 英文意思：最后
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
if (10 > 5) {
console.log("ok");
} else {
console.log("no");
}
var money = 88;
if (money > 90) {
console.log("吃火锅");
} else if (money > 80) {
console.log("吃烧烤");
} else if (money > 60) {
console.log("拉面");
} else {
console.log("泡面");
}
var i = 11;
switch (i) {
case 1:
console.log("棒棒哒！");
break;
case 2:
console.log("好样的！");
break;
case 3:
console.log("优秀！");
break;
default:
console.log("回家挨板子！");
}
for (var i = 1; i <= 10; i++) {
console.log(i);
}
var j = 10;
while (j > 0) {
console.log(j);
j--;
}
</script>
</body>
</html>
上面的操作，除了===外，基本与java一样，当然还要大于，等于，小于等等也一样
常用字符串API：
length：获取字符串的长度（字符串中字符的个数） 属性，没有小括号
<!--
var str = "hello";
console.log( str.length );
-->
toUpperCase/toLowerCase ：转大小写
<!--
var name = "AngierSun";
console.log( "大写："+name.toUpperCase() );
console.log( "小写："+name.toLowerCase() );
-->
charAt(下标) ： 返回某个下标上的字符
<!--
var str1 = "javascript网页教程";
var str2 = str1.charAt(12);
// 下标12上的字符
console.log(str2); //教
var str3 = str1.charCodeAt(12);
console.log(str3); //25945:（汉字"教"在unicode编码中的编号）
-->
indexof(字符)：查找字符串中字符出现的首次下标
lastIndexof(字符)：查找字符串中字符最后一次出现的下标
<!--
var str1 = "javascript网页教程";
var str2 = str1.indexOf("a");
console.log(str2); // 1 , a字符在str1中第一次出现的下标
var str3 = str1.lastIndexOf("a"); //3,a字符在str1中最后一次出现的下标
console.log(str3);
-->
substring(开始,结束)：截取字符串中一部分（结束是不包含的）
<!--
var str1 = "abcdefgh";
var str2 = str1.substring(2,4);
console.log(str2); //cd，从2开始（包含），4结束（不包含）
-->
replace(旧的,新的)：将字符串中的旧字符替换成新字符
<!--
var str1 = "abcde";
var str2 = str1.replace("cd","XXX");
console.log(str2); // abXXXe，将str1中的cd替换成XXX，若有多个cd，那么只改变第一次找到的cd
-->
split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型
<!--
var str1 = "一,二,三,四,五";
var arr = str1.split(","); // 将str1 以逗号进行分割，分割成N份，所以返回的结果一定是数组结构
console.log( "共分割成："+arr.length+"份" );
console.log( "第三份是：" + arr[2] ); // 三
注意：若是var str1 = ",一,二,三,四,五,";，那么就是有7个，前后都有两个空格，而java则不是，当然，这是方法的原因，java自然也可以是
-->
最后，对于js的字符串，单引号和双引号都可以，也可交替使用，而java则表示不同含义
弱语言基本如此，js也是解释性语言，不是非常严谨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
// var str = "hello";
// console.log( str.length );
//注意length不是方法，仅仅代表长度
// var name = "AngierSun";
// console.log( "大写："+name.toUpperCase() );
// console.log( "小写："+name.toLowerCase() );
//toUpperCase 英文意思：将字符串转换成大写
//toLowerCase 英文意思：小写
// var str1 = "javascript网页教程";
// var str2 = str1.charAt(12); // 下标12上的字符，从0开始，没有特别的基本上都是从0开始
//也与java一样，左有，右没有
//charAt 一般指调用者字符串下标的值，并返回
// console.log(str2); //教
// var str3 = str1.charCodeAt(12);
// console.log(str3); //25945:（汉字"教"在unicode编码中的编号）
//charCodeAt般指调用者字符串下标的值的编号，并返回
// var str1 = "javascript网页教程";
// var str2 = str1.indexOf("a");
// console.log(str2); // 1 , a字符在str1中第一次出现的下标
//indexOf 一般指参数字符第一次在调用者字符串的位置，从左到右
// var str3 = str1.lastIndexOf("a"); //3,a字符在str1中最后一次出现的下标
// console.log(str3);
//lastindexOf 一般指参数字符最后一次在调用者字符串的位置，从左到右
// var str1 = "abcdefgh";
// var str2 = str1.substring(2,4);
// console.log(str2); //cd，从2开始（包含），4结束（不包含）
//也与大多数java的方法一样，左有，右没有
//substring 英文意思：截取子串，调用者字符串的截取
//与java不同，参数位置可以变化，java必须从左到右，依次变大，即必须2，4
//js可以4，2，即js的这个放大，是取他们之间的数，不包括他们之间右边的数，即大的4所对应的位置的数
// var str1 = "abcde";
// var str2 = str1.replace("cd","XXX");
// console.log(str2); // abXXXe，将str1中的cd替换成XXX
//replace 英文意思：代替，将调用者字符串左边参数所对应从左到右的第一个值被xxx替换掉
//与java不一样，java这个是替换所有对应的，而js是替换第一个对应的，都是从左到右找
var str1 = "一,二,三,四,五";
var arr = str1.split(","); // 将str1 以逗号进行分割，分割成N份，所以返回的结果一定是数组结构
console.log("共分割成：" + arr.length + "份");
console.log("第三份是：" + arr[2]); // 三
//split 英文意思：分离
//将调用者的字符串按照分割的参数，进行分离，并返回一个数组
//但是java这个方法，最后逗号的后面不算，但前面算，如,a,ab,，返回的数组，只有三个数，即长度为3
//即"",a,ab
//其中最后一个逗号后面的空值不算
//而js就会算空值，即长度为4
//"",a,ab,""
//基本上只要是对应的参数，都是字符串，不是对应的而是位置的参数，基本上是数值，java也是如此
</script>
</body>
</html>
数组--------------------------
创建数组：
<!--
var arr1 = new Array();
-->
初始化数组的三种方式：
<!--
// 第一种
var arr1 = new Array();
arr1[0] = 110;
arr1[1] = 119;
arr1[2] = 120;
// 第二种
var arr1 = new Array(10,"a",true);
// 第三种
var arr1 = [10,"a",true];
for (var i = 0; i < arr1.length; i++) {
console.log(arr1[i]);
}
-->
数组的常用方法：
tostring()：将数组转换成字符串
<!--
var arr = [1,2,3,4];
console.log("类型为：" + typeof( arr ) );
var str = arr.toString();
// 将数组转换成字符串
console.log( str +",类型为：" + typeof( str ) );
-->
join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串
<!--
var arr = [1,2,3,4];
var str = arr.join("-");
// 将数组中每个元素用-进行连接，并形成一个全新的字符串
console.log( str +",类型为：" + typeof( str ) );
-->
concat(新元素)：将原来的数组连接新元素，原数组不变
<!--
var arr = [1,2,3,4];
var arrnew = arr.concat(5,6);
// 在arr数组的后面添加新的元素，形成一个新数组，但是原数组是不变的
console.log( arrnew +",类型为：" + typeof( arrnew ) );
console.log("原数组：" + arr);
concat里面可以添加多个参数，也就是说，可以是var arrnew = arr.concat(5,); ，和var arrnew = arr.concat(5,5,5,5,5,5); ，其中在js中参数也是识别的操作，也就是说，如果后面只有","，那么直接的忽略，在大多数设置多个变量时，基本都可以看到保留","，这就是原因，这是js用来确认添加时可以直接添加，也就是大量的业余操作
-->
slice(开始，结束)：在数组中提取一部分，形成新的数组
<!--
1,2,3,4,5 slice(2,4) 结果：3,4
var arr = ['a','b','c','d','e','f','g','h'];
var arrnew = arr.slice( 2,4 );
// 在arr数组中截取，从2开始（包含），4结束（不包含）
console.log( arrnew ); // cd
-->
reverse()：数组的反转（倒序）
<!--
var arr = [31,12,111,444];
console.log( arr.toString() );
arr.reverse(); // 将数组中的元素倒置console.log( arr.toString() );
-->
sort()：数组排序
<!--
arr.sort() 字符排序
var arr = [31,12,111,444];
arr.sort(); // 字符排序（不会按照字面量的大小）
console.log( arr );
-->
<!--
arr.sort(func) 数值排序
var arr = [31,12,111,444];
arr.sort( laosun );
// 数字排序（会按照字面量的大小）
console.log( arr );
// 定义排序函数
function laosun(a,b){
return a-b;
}
//底层一般是操作方法，修改this
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
// var arr1 = new Array();
// arr1[0] = 110;
// arr1[1] = 119;
// arr1[2] = 120;
//这里说明一下，变量可以为中文，类似于java的变量命名
//Array 英文意思：数组
//new 英文意思：新的
//注意：js的数组创建只是定义一个初始的值（无论是定义有长度还是无长度），他的长度由最大下标来决定
//如上面的2，且最大，那么长度就是2+1=3，注意：他只是代表长度，js对于数组，他基本只会保留数据，而对于没有保留的，只会返回undefined，也就是说，就算你大于arr1[100000],他也会返回，实际上他并不存在，当然，他并不是不存在，只是会有个临时变量（若是长度里面的，那么就是隐藏的变量，这是数组内部的底层，与我们无关，实际上大多数的变量对象内容都是如此，包括window）
// var arr1 = new Array(10, "hello", true);
// var arr1 = [10,"sun",false];
//若设置var arr1 = [10,"sun",false,];后面加一个逗号，这个逗号可以加可以不加，结果都一样，java也一样
//可以直接给值，由于是弱类型，那么值的类型不做要求，只要是正确的值都可
//java是[]到{},js是()到[]
// for (var i = 0; i < arr1.length; i++) {
// console.log(arr1[i]);
// }
// var arr = [1,2,3,4];
// console.log("类型为：" + typeof( arr ) ); //类型object
//也可以像java一样，将new Array()和new Array()[]和[]当作参数，方便一点，实际上变量就是用来存放数据的
//基本对于所有语言都是如此，即他们都可以这样操作
// var str = arr.toString(); // 将数组转换成字符串
//toString 英文意思：转换为字符串，将调用者数组，转化为字符串，并返回
// console.log( str +",类型为：" + typeof( str ) );
// var arr = [1,2,3,4];
// var str = arr.join("-"); // 将数组中每个元素用-进行连接，并形成一个全新的字符串
// console.log( str +",类型为：" + typeof( str ) );
//前面我们有replace方法按照参数分割调用者字符串变为数组并返回
//而join则可以将调用者数组按照参数进行组成，返回字符串
// var arr = [1,2,3,4];
// var arrnew = arr.concat(5,6); // 在arr数组的后面添加新的元素，形成一个新数组，但是原数组是不变的
// console.log( arrnew +",类型为：" + typeof( arrnew ) );
// console.log("原数组：" + arr);
//concat方法，可以将调用者数组的参数与本身扩展，从左到右，下标也是依次变大赋值，并将改变的新数组返回
//原数组不变
//参数可以是数（所有正确的数，包括数值，和字符串），也可以是数组，他们可以结合
//对于大多数的方法，操作时，对调用者是没有改变的,，只有少部分会
//因为方法大多数是方便新的操作，即调用者的操作
// var arr = ['a','b','c','d','e','f','g','h'];
// var arrnew = arr.slice( 2,4 ); // 在arr数组中截取，从2开始（包含），4结束（不包含）
// console.log( arrnew ); // cd
//slice提取调用者数组的指定范围的值，并将其变为一个新的数组，并返回新的数组
//参数必须从小到大，否则返回的数组为空，结尾下标不包含
//必须从小到大，与substring不同，他只要求下标位置，进行移动
//而这里是要求左边位置向右移动，知道移动到右边参数停止，然后返回截取的值，否则不返回（即空的数组）
//前者数组（slice），后者字符串（substring）
// var arr = [31,12,111,444];
// console.log( arr.toString() );
// arr.reverse(); // 将数组中的元素倒置
// console.log( arr.toString() );
//reverse将调用数组进行反转，从右到左,可以返回调用者数组被其他变量获得，也可不返回，这里原数组变化了
//其实大多数对数组内容的增删改查或者操作等，都会修改原来数组的内容，像什么取值的，基本就是返回
// var arr = [31,12,111,444];
// arr.sort(); // 字符排序（不会按照字面量的大小），如111，12，111排前面
//结果为111，12，31，444，每个位置字符比较，只要小，则在前面，后面位置就不比较了
// console.log( arr );
var arr = [31,12,111,444];
arr.sort( laosun ); // 数字排序（会按照字面量的大小）
//与其他使用函数不同，这里直接传入函数名，就如java里的比较器传入变量一样，java传入变量是需要他变量的方法
//因为java的参数没有方法名的参数
//而这里js传入函数名，实际上是使用这个函数名的方法操作，一般情况下
//都是需要函数名()来调用的，他这里底层调用了这个函数名后
//将其中return后面的取出来，进行操作调用，这时底层的实现，一般调用都是直接使用函数名()
//没有取函数的数据，而是直接调用
//与一般调用不同的是，底层取东西了，就如取字符串一样
//所以大部分情况下都有函数名()来调用
console.log( arr );
// 定义排序函数
function laosun(a,b){
return a-b;
}
//function 英文意思：功能，定义函数（java叫做方法，方便的话也可以叫做方法）
</script>
</body>
</html>
Math数学对象------------------------
Math 对象用于执行数学任务
没有构造函数 Math()
无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法
Number对象------------------------
Number.fixed(2)；自带四舍五入技能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
// var i = Math.random();
// console.log(i);
//Math 英文意思：数学
//random 英文意思：随机的
//返回0到1之间的范围，0可以取，1不可以取
// 返回0-9之间任意一个随机数字
// var i = Math.random() * 10;
// var j = Math.floor(i);
//floor 英文意思：底
//Math.floor()对参数进行向下取整，即1.9就是1，向上取整，即1.9就是2，无视四舍五入，只取整数
//用parseInt方法也可以
// console.log(j);
// console.log( Math.sqrt(16) );
//sqrt 英文意思：求平方根函数
//对参数进行操作，并返回操作的数
var n = new Number( 12.345 );
var n1 = n.toFixed(2); // 12.35，固定两位小数，第三位小数四舍五入
console.log( n1 );
var x = new Number(12.3);
var n2 = x.toFixed(2); // 12.30，固定两位小数，位数不够，0来补齐
console.log( n2 );
//toFixed 英文意思：修理
//调用者数据不变，返回改变的数据
//从这里可以看出，无论是java还是js其实调用方法，并没有改变调用者指向地址，除非你重新赋值
//否则无论如何改变不了
//即只是改变指向地址里的数据
//从而输出时，发生改变，即是否改变调用者，就看是否改变调用者地址数据
</script>
</body>
</html>
正则表达式-------------------
对字符串执行模式匹配的强大工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
// var age = "18"; // 判断：1-3位纯数字
// var reg = /^\d{1,3}$/; // 以/^开始，中间写正则内容，以$/结束，正则也是可以直接的赋值，默认操作类型是object
// var b = reg.test(age); // 验证age变量的是否符合reg的匹配
// if (b == true) {
// console.log("验证通过！");
// } else {
// console.log("格式错误");
// }
//test 英文意思：测验，判断参数是否符合调用者的表达式，并将结果返回
var name = "abc123"; // 大小写字母和数字的组合（特殊字符不能出现）, 5~8位
var reg = new RegExp("^[a-zA-Z0-9]{5,8}$"); // 以^开始，中间写正则内容，以$结束
//可以再[]里连着写，或者其他的数，这是为后续的一起操作做一起的，如{5，8}，否则就分开了，且含义也会变化
//如[a-z][A-Z0-9]{5,8}$，就只有一个小写字母,这时就要a12123才会验证通过
//{a,b}最少a个，最多b个，a<=b，否则报错
//使用来对象，RegExp对象，那么参数就是字符串，需要两个\，且开始不算/^而是^.结尾不算$/，而是$
if (reg.test(name)) {
console.log("验证通过！");
} else {
console.log("格式错误");
}
//最后说明，无论是java的正则表达式，还是js的正则表达式，其实除了对应的方式含义，可以随便写具体数
//如/^ \d{1,3}$/，可以看出18是错误的，因为第一个要为空格，即方式含义其实就是一个参照写的
//省略了很多细节，具体的需要自己写
//RegExp 英文意思：正规表达式
//注意：使用这个就需要两个\了，因为在字符串里，而对应的var reg = /^\d{1,3}$/;他的类型是Object，要注意哦，内部可能直接操作的，具体，可以认为是慢慢的拿取内容，即将整个判断进行放入字符串的意思，从而解决\d，这里就是直接使用
//最后对于正则表达式的小括号，中括号和大括号来说，只要满足自己各自语法，就可以操作
//否则报错，如小括号(0-9)就报错
//那么就可以操作，java和js也是一样
//但js中括号不可包括中括号，java可以
</script>
</body>
</html>
日期对象------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var time = new Date();
console.log( time ); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间)
var year = time.getFullYear(); // 年份
var month = time.getMonth() + 1; //月份从0开，11结束，所以国内习惯要+1
var day = time.getDate(); // 几号
var hour = time.getHours(); // 几点
var mm = time.getMinutes(); // 分钟
var s = time.getSeconds(); //秒
var ms = time.getMilliseconds(); // 毫秒， 1000毫秒 = 1秒
var timestr = year+"年"+month+"月"+day+"号 "+hour+"点"+mm+"分"+s+"秒"+ms+"毫秒";
console.log( timestr );
//FullTear 英文意思：全年的
//Month 英文意思：月份
//Date 英文意思：日期
//Hours 英文意思：小时
//Minutes 英文意思：分钟
//Seconds 英文意思：秒
//Milliseconds 英文意思：毫秒
//new Date()新建一个日期对象，获得当前日期
//使用各自前缀为get的方法，返回各自对应含义的时间
</script>
</body>
</html>
函数------------------------
使用关键字 function 定义函数
<!--
function 函数名( 形参列表 ){
// 函数体
return 返回值;
}
注意：形参列表与java不同，因为js是弱语言，即类型由值确定，所以js规定，就不写类型，即var，底层会给他var类型
若写了的话，就会报错，因为var var a是一定会报错的，可以将这个代码错误和参数写var的错误进行对比来验证
违反规定了，就如你java不能给整型赋值字符串一样，这是规定，除非你厉害，可以改规定
-->
函数声明后不会立即执行，会在我们需要的时候调用到，与java方法类似，需要调用才可执行，否则不执行
注意：在js中，无论是变量还是方法，都属于他的变量，也就是说，可以直接的使用，虽然也是与java一样加上括号来使用，由于是变量，那么js使用方法的方式大有不同，他可以用来赋值，从而让别人操作，二进制可以将你的想法完成的，不要觉得疑惑
注意：
形参：一定不要带数据类型
分号是用来分隔可执行JavaScript语句
由于函数声明不是一个可执行语句，所以不以分号结束（当然也可以加分号）
而不加分号的情况是，不在同一行的语句可以不加，若
<!--
只所以分号是用来分隔可执行JavaScript语句，看如下
console.log(1) var a = 1
这里中间没有加分号，会以为这一行代码是一起的，即在操作时就会报错，若
console.log(1) ;var a = 1
和
console.log(1)
var a = 1
就不会报错了，所以若代码都是各占一行，即可以不写分号，但分号最好还是写，因为可以防止这种情况
所以可以知道分号就是用来当作分隔符的作用，使得代码分开，所以js里分号可以写很多个而不报错
如console.log(1) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;var a = 1，java也可以
上面是对于语句
若是函数
那么function f(){console.log(1) };f()和function f(){console.log(1) }f()
加不加分号都无所谓，正如java一样，方法是不用加分号的，会将{}外面的不当作一个语句，即{}相当于是一体的
-->
<!--
无返回值：
function qiuhe(a, b) {
var he = a + b;
console.log("两数之和：" + he);
}
qiuhe(3,4);
由于没有返回值，那么接收的变量就是undefined，这是必然的，因为无论是变量直接输出，还是没有被得到值，都是这样，因为并没有给值，这就是杂乱无章的操作，不严谨，而正是因为js是一个语言，自然与其他编程语言是不同的语法的，只是有相似之处，要看成他是一个新的知识，而不是别人的影子（java），所以在后面我尽量不提到java
有返回值:
function qiuhe(a, b) {
var he = a + b;
return "两数之和：" + he;
}
var s = qiuhe(3,4);
console.log( s );
返回值操作与java类似
但调用时，实参列表是数对应，且逗号(英文逗号，基本如此)隔开，否则没赋值，如qiuhe(1),qiuhe(1,)都是对a赋值
没有第二个数与b对应，即b没有赋值
在参数列表（包括形参和实参，有些没注明参数列表是因为实参和形参只有一个存在的解释）里逗号连接空数值时不会报错
但单独的就会报错
参数对象:
在函数内部，调用参数列表的属性
function func(a,b,c){
console.log( arguments.length ); // 获得参数的个数
console.log( arguments[1] ); // 获得下标为1的参数 }
前面我们说过，需要对应数才可赋值，那么我们可以通过操作来获得传入几个参数和对应的值
arguments 英文意思：参数
实际是你传入的参数，变成了数组，而该数组名就是arguments，底层操作的数组
构造函数:
函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义
var myFunction = new Function("a", "b", "return a * b"); //所以函数的类型都是这个，而我们创建的方法，实际上默认这样，只是变量名称是方法名称而已，就如java可以利用Lambda表达式一样，二进制自然可以实现
var x = myFunction(4, 3);
console.log(x);
使用Function对象来创建函数，前面的参数是对应函数的参数，最后一个是函数的函数体语句，都用引号包括
最后，无论是什么函数，只要用变量获得，那么该变量就是这个函数名，相当于将函数名赋值，平常没赋值时
就会自成空间（没函数名除外），就是使用Function函数
即可以使用该函数名调用，而赋值时，不会自成空间了
而是放在该变量空间（即将这个Function函数，不再默认给一个函数名的变量了），所以必须使用该变量来调用
那么无论怎么调用原来的函数名，都会报找不到函数的错误（因为没有默认时，就不创建变量）
与java有很大不同，因为是不同语言
就如java使用方法需要对象和静态，而这里直接用函数名
注： 上述函数以分号结尾，因为它是一个执行语句（在一行的情况下必须加，否则可以不加）
我们可以这样：new Function("alert(1)")();，很明显，js既然可以将方法给变量，那么自然就规定了可以利用变量和对象都可以调用，而java只是调用方法名称来执行内部（可能Function里面也是这样的，但是明面上不是），而这里可以通过变量使得使用对象来调用，即相当于java引用对象
匿名函数:
没有名称的函数
var fn = function(a, b) {
// 没有名字的函数，应该用一个变量来接收
return a * 10 + b;
};
console.log( fn(3, 4) );
没有名字，那么必须要有新的函数名，来有空间
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
function qiuhe(a, b) {
var he = a + b;
console.log(he); //这里可以输出本身，即console.log(qiuhe)，打印这个函数的内容
//函数类型都是function类型
//上面的函数设置，相当于这个 var qiuhe = new Function("a","b","var he = a + b;console.log(he);");
//赋值时，默认的var qiuhe，就不定义了，而是变成赋值的
}
// function qiuhe(a, b) {
// return a + b;
// }
// var he = qiuhe(1, 3);
// console.log( he );
// function test(a, b, c) {
// console.log("传入" + arguments.length + "个参数");
// console.log("第2个参数是：" + arguments[1]);
// }
// test(1, 2, 3);
// var fn = new Function("a","b","return a * b");
// var ji = fn(3,4);
// console.log(ji);
var fn = function(a, b) {
// 没有名字的函数，应该用一个变量来接收
return a * 10 + b;
};
console.log(fn(3, 4));
</script>
</body>
</html>
最后补充一下编码和解码的问题
编码：将字符转换为字节的方式，一般我们设置字符编码时（设置编码可以叫做转码），就是设置这个方式
解码：将字节转换为字符的方式
注意：编码和解码的最终结果是显示时的作用，就是给你看的
URI和URL
URL是URI的子集，即URL的功能多
如我们都可以唯一确定一个人，都是URl的一种实现，而URL就是用定位的方式实现的URI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// console.log( isNaN( 123 ) ); // 数字，false
// console.log( isNaN( "hello" ) ); // 非数字，true
// console.log( isNaN( 4-1 ) ); // 数字，false
// console.log( isNaN( 123 ) ); // 数字，false
// console.log( isNaN( -10 ) ); // 数字，false
// console.log( isNaN( "123" ) ); // 数字，false 这个参数会在底层比较，即会看成number类型
// console.log( isNaN( "1a23" ) ); // 非数字，true
//全局函数
//isNaN：检查其参数是否是非数字值
//isNaN 用于指定参数是不是非数字，若是，则返回true，否则返回false
//注意与java一样，会先算参数列表的运算，然后使用最终结果
// var str = "1+3";
// console.log( str ); // 1+3 , +会认定为一种字符符号而已，没有加法的作用
// console.log( eval( str ) ); // 让字符串中的运算符号生效
//eval：用来转换字符串中的运算，使得指定参数字符串的运算符合生效，并返回字符串内容的计算结果
//eval 英文意思：评价
var name = "拉勾网";
console.log( "转码前：" + name );
name = encodeURI(name);
console.log( "转码后：" + name );
name = decodeURI(name); //注意：不只是url浏览器自动转码，其中js从src中获取的数据，js可能也会将中文进行操作（即自动转码），可能还有其他方面，所以这里注意即可，最好测试后进行操作
console.log( "解码后：" + name );
//encodeURI 英文意思：编码uri，将该字符串按照一定的方式进行变化，把字符串作为 URI 进行编码
//参数是必需的，要一个字符串，含有 URI 或其他要编码的文本
//decodeURI 英文意思：解码uri，可对 encodeURI() 函数编码过的 URI 进行解码
//参数是必需的，要一个字符串，含有要解码的 URI 或其他要解码的文本
//上述两个是让该字符串当作URL进行操作，而当作URL操作时
//有些符号在URL中是不能直接传递的，如中文，如果要在URL中传递这些特殊符号
//那么就要使用他们的编码了，编码的格式为：%加字符的ASCII码，即一个百分号%
//后面跟对应字符的ASCII（16进制）码值，例如 空格的编码值是"%20"，在当前转化
//即是程序中变化，不是显示中变化，不要当成一起
//而这是执行时默认的，最后还是会受代码的编码和浏览器的解码
//这个解码是显示的时候的解码，代码里接收浏览器的数据时可能是编码（转码）的，而代码得到数据时有可能没有解码，即需要使用decodeURI来操作
//因为显示其实也是代码的操作，其中也有解码
//就如java的打印一样，和IO流之间的数据传输（相似导致解码时，解的字节不对），也会受代码的编码和解码
//实际上encodeURI也是这样的操作，所以可以不写encodeURI，但写这个可以实现让数据的显示不那么明显
//而decodeURI也是如此，就是看他的原来数据
//编码和解码的显示是给我们看的显示，底层有很多操作，其可能也会进行编码和解码
</script>
</body>
</html>
<!--
为了更加理解js的构成，实际上js在一开始就存在一个全局的，即this，里面包含很多信息，由于无论是方法还是变量都是变量，那么自然是在他里面操作的，那么js就是变量的操作，而并没有操作直接的调用（java调用方法，直接调用，并没有变量来得到方法，这是js和java操作二进制实现的不同结果，也是js和java的核心区别之一，虽然js里面可能也是一样的，但是明面上不是，而杂乱无章的代码，也是js与java的核心区别之一）
当然，js实际上只能是单线程，在以后会学习到如果操作类似的多线程操作（异步，同步），这里就不说明了
-->
闭包：
闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数
闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理
垃圾回收机制，可以理解为，在程序或者相关联程序的全部的代码中
没有一个代码会使用先前创建的对象，那么这个对象就会被回收，相当于没有变量指向该对象，当然，也包括后面代码从来没有使用过他（在编译时，自然会存在是否使用的标准，这种实现并不需要太多注意，只需要知道即可）
简单地说：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到，保证了数据的安全唯一性
想了解闭包，首先要了解什么是全局变量，什么是局部变量
需求：统计方法执行了多少次
<!--
var count = 0; // 总次数
function test1(){
count++; // 自增+1
}
test1();
test1();
test1();
console.log( count );
-->
谁都可以访问count，所以count变量并不安全，因为是全局变量
想要安全，就将count声明为局部变量
<!--
function test1(){
var count = 0; //局部变量
return count++;
//外部无法访问count，只能通过return才能将count变量返回，并输出
}
test1();
test1();
test1();
console.log( test1() ); // 每次调用方法，首先就是将变量还原为0
-->
结果一直是0，因为每次调用test1()，方法体的第一句代码就是还原，无论曾经的值是多少
突发奇想，如果在test1()函数里面，再嵌套一个函数，js是支持函数嵌套的
就与java一样可以方法里调用方法了，但java方法不可嵌套，因为始终不是一个语言，虽然有类似，但还是不同的
但是js是直接使用方法名（明面上），java是需要类或者对象来使用方法
<!--
function test1(){
var count = 0; //局部变量
function jia(){
return count++;
}
jia();
return count;
}
test1();
test1();
test1();
console.log( test1() ); // 每次调用方法，首先就是将变量还原为0
-->
如果每次只调用test1()里面的jia()就好了，ok，闭包帮你解决此问题
<!--
function test1(){
var count = 0; //局部变量
function jia(){
return count+=1;
}
return jia;
}
var fn = test1(); // fn => function jia(){return count+=1; }
fn();
fn();
console.log( fn() ); // 每次调用方法，首先就是将变量还原为0
-->
<!--我们可以看到，若将方法看成对象，那么对于java来说也是合理的，这也说明js方法只是明面上不同（直接调用），内部可能还是类似的操作-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// a = 10; // 全局变量，声明的时候可以不使用var
// function test1(){
// b = 20; // 不用var声明的变量，就是全局变量
// var c = 30; // 用var声明，并且在函数的内部，这样的变量叫做局部变量
//有效范围只能在其声明的函数内部
//若没有写在函数的内部，那么相当于是一个全部变量，但实际还是局部变量，只不过作用范围是最大的
// console.log(c);
// }
// function test2(){
// console.log(c); //c is not defined (c变量没有定义)
//c只作用于当前函数内部，即这个c是找不到的，即没有定义
//实际上与java方法的变量作用域类似
//js的全局变量就相当于java的静态变量，局部变量相当于方法的变量
// }
//对于全局变量和局部变量，都可以使用window.变量名来获得，window相当于所有对象（这也是js的核心区别之一，默认他的最上层是window，而不是this，即每次保留了window），而全部变量可以被delete删除
//局部变量不可，因为局部变量是设置不能删除的，除非你改变设置，当删除全局变量时
//全局变量只能通过window.变量名来访问了（虽然没有），因为全部变量和局部变量都占空间，全局变量占的大，因为生存期长
//且也会赋值给window，所以window可以获得，而删除时，原来的全局变量属性，就没了
//所以，就不可以获得全局变量了，必须要window.变量名获得数值（虽然没有，并没有隐藏变量）
//可以说window里的属性，基本都是全局变量，当你设置全局变量在最外时，可以在window里找到
//当然若局部变量是最外面的，那么也会有，相当于是全局变量了
//但是无论是全局变量还是局部变量，在方法里时，window不可直观的看到，因为他只显示当前
//而实际上他们的位置在不同属性里，即全局变量和局部变量的位置在不同属性里
//而全局变量的那个属性，他里面的全局变量可以给全局使用
//而局部变量的那个属性不可以将局部变量给全局用，只能局部用，但他不会删除，而全局会被删除，这是默认的
//除非你修改设置
// test1();
// test2();
function test1(){
var count = 0; //局部变量
function jia(){
return count+=1;
}
return jia;
}
var fn = test1(); // 0
fn();
fn();
console.log( fn() ); // 每次调用方法，首先就是将变量还原为0
//上面就是闭包
//由于作用域的存在，函数和局部变量只能给当前作用域和下级作用域使用，即外部作用域就不可使用这个方法
//而闭包，就是将函数返回出去的意思，就如java返回一个对象一样
//使得外部作用域可以使用这个内容
//即地址都是不变的（Function类型的地址）
//调用者的位置还是原来的位置，如java调用引用方法时，实际上是调用地址对象的方法一样
//而这里就是调用jia函数
//js这个对象与java的对象不同，js的这个对象就是方法（有当前方法的值），没有类这个概念
//只有一个window，即可以看成一个（对象）类
//java就是对象，可以调用方法（有类的值）
//所以方法方法值（无类嵌套，没有嵌套），方法类值（有类不嵌套，有嵌套）
//只有记住js方法嵌套，方法使用可使用当前位置作用域的值（js与java不同，不要当作一起）
</script>
</body>
</html>
闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不 受外界干扰
直观的说就是形成一个不销毁的栈环境
闭包的优点： 方便调用上下文中声明的局部变量 逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题
闭包的缺点： 因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中
如果大量使用闭包就会造 成内存泄露，内存消耗很大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// for(var i = 1;i<=5;i++){
// document.write( "<h1>hello,拉勾</h1>" );
// }
//document 英文意思：文档
//write 英文意思：写
//document.write将参数内容写入浏览器里，注意大多数参数可以是数值和字符串
//由于浏览器是会解释你写入的html文件，且一行一行解释（先放上之前，也会受编码影响，再解释）
//由于内容是写入到浏览器，那么浏览器也会解释这个，所以内容可以是html内容，最好用字符串包括起来
//最后注意一点：对于document.write这个方法其实我们在执行html时，最开始会有一个类似的文档document.open()调用（默认是window）
//即打开文档，然后执行html代码，一般来说可能没有关闭
//若执行完后，就会关闭掉，而document.write（对应文档里面的）在没有关闭掉时，会进行输出内容
//若你关闭掉了，则需要重新打开文档，然后输出，但也使得重新打开的文档没有原来的内容（这里针对窗口，窗口只会出现一次，浏览器的作用，即不能刷新了）
//操作地址：https://www.pipipi.net/questions/15089.html，注意，相关的操作可能不会起作用了，一般需要这个：https://zhidao.baidu.com/question/17689404.html，在窗口中单纯的document.write不会进行操作
//那个Element要素里，原来的标签和内容都没有了，只有输出的了，因为是一个新的文档流
//通常发生在方法里的调用，使得内容只有他的输出，可以刷新多次来验证
// var b = confirm("确定删除吗？");
// if(b){
// document.write( "<h1>删除成功！</h1>" );
// }else{
// document.write( "<h1>你取消了操作</h1>" );
// }
//confirm 英文意思：确认
//confirm会弹出显示内容的框，并加上自带的确认和取消，点击确认，返回true，点击取消，返回false
var name = prompt("请输入你的名字：");
document.write( "<h1>大名："+name+"！</h1>" );
//prompt 英文意思：提示
//当使用prompt时，会出现可以输入数据的内容提示框，并返回你输入的数据
//虽然输出参数可以是数值，但实际上最后都是字符打印的
</script>
</body>
</html>
<!--实际上浏览器的渲染又何尝不是js导致的数据文档的显示呢-->
DOM 操作------------------------
在一个html页面中，会使用很多标签来规划制作页面
每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值，那我们就需要在页面中查找到这个标签元素
如何查找到这个元素是个难题，W3C组织的工程师们，突然看到了一棵大树，我要是想找到某一片叶子，应该怎么做
“顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一片叶子都不是难事了
叶子和大树的一些启发，工程师们开会讨论就定了这个理论"文档对象模型"
文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子）
主树干定义为根节点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了
在节点树中，顶端节点就是根节点（root）
每个节点都有父节点（除了根节点）
任何一个节点都可以拥有任意数量的子节点
同胞是拥有相同父节点的节点
<html>
<head>
<meta charset="utf-8">
<title>DOM 教程</title>
</head>
<body>
<h1>第一节：HTML DOM</h1>
<p>Hello world!</p>
</body>
</html>
<!--
从上面的 HTML 中：
<html> 节点没有父节点，它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点
并且：
<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有两个子节点：<meta> 与 <title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"
<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点
并且：
<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点
js为我们提供了很多种方法来实现在页面找查找某个元素节点
-->
<!DOCTYPE html> <!-- ！是的声明的意思，doc是文档document，type是类型 ，即声明该文档类型为html-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<form action="xxx" onsubmit="return login()">
<!-- onsubmit当提交时，运行里面的方法，并返回结果，若为return true则提交，否则不提交
若没有return，则无论结果如何，都提交
-->
<p>帐号：<input id="username"/></p>
<p>电话：<input id="phone"/></p>
<p><button>登录</button></p>
</form>
<script>
//getElementById：通过id属性获得元素节点对象
//案例：当帐号为空时，阻止表单提交
function login() {
var name = document.getElementById("username").value ;
//一般情况下，没返回的，值一般为""，对象一般为null
if(name == ""){
alert("帐号不能为空！");
return false; // 阻止表单的提交
}
return true; // 放行，让表单提交
}
//注意：由于是一行一行执行，那么这个获得id的代码必须写对于有id的html后面，否则获取不到返回null
//文档对象的使用获取id的方法
//document.getElementById 获取已加载文档元素对应字符串id的第一个节点对应对象
//这里是[object HTMLInputElement]，一个输入框对象
//并返回，否则返回null
//其中document可以看作是整个html文档，很明显，的确在js里面，因为集成得到，最后提交渲染（一般解析完一个就会进行渲染，只是有些操作可能导致之前（到这里后面自然没有，所以是之前的）或者本来的渲染进行隐藏，如alert）
//大多数情况下，js的操作可能会阻塞渲染（这个渲染的意思代码js的处理，也就是包括交互，而不是单纯的渲染），但是也只是代表后面的阻塞（从上到下），有时候可能会阻塞前面的渲染（因为他可能操作前面的），如果出现了js会阻塞渲染的说明，那么说明的基本都是后面的（对应可能没有指定说明，导致理解错误），一般代表后面的内容，但是他的执行可能导致不显示，或者阻止其他js执行（如alert），具体可以看这个博客：https://www.zhihu.com/question/61309490/answer/2402372679?utm_id=0
//节点对象有很多属性，节点对象.value就是该节点的value属性的值
//自定义的不算，因为只会取对象的值并没有改变，即自定义的没在里面
//就如你定义一个类，那么这个类的结构，代码基本改变不了，因为文件没有变
//即写在前面，要加载的id节点在后面还没加载，即返回null
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<h2>我的购物车</h2>
<table border="1" cellspacing="0">
<tr>
<td><input type="checkbox" onchange="quan(this)" id="1"/> 全选</td>
<!-- 当元素的值发生改变时,会发生 onchange 事件,即改变当前元素值时，就执行quan函数
this就是当前元素对象，相当于这里的document.getElementById("1")返回的对象
//只不过可以直接代表，即不用这样的进行找到操作了
-->
<td>名称</td>
<td>单价</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />1</td>
<td>功能性饮料-尖叫</td>
<td>4.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />2</td>
<td>火腿肠</td>
<td>2.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />3</td>
<td>包子</td>
<td>1.5</td>
</tr>
</table>
<p>
<button>提交订单</button>
</p>
<script>
//getElementsByTagName：通过标签名称获得元素节点对象集
//案例：表格隔行变色
function quan(all) {
var arr = document.getElementsByName("one");
//由于id使用的话，只会取第一个id的对象（从上到下），而使用name来获取可以取多个
// 文档对象的使用获取name的方法
//所以document.getElementsByName中有个s
//表示取已加载文档字符串参数的name的多个对应节点对象
//并返回一个节点数组
//而之前说的使用id报错，其实一般情况下，不会报错，但对于大多数情况下会报错,而这种报错很难发现
//注意：0<undefined返回false，其中undefined和null在比较大小时，无论结果如何都为false
for (var i = 0; i < arr.length; i++) {
arr[i].checked = all.checked; // 将全选框的状态，赋值给每一个复选框
//checked在标签里表示选中，且必选择，与值无关（可以看成其实没有值）
//在js里选择为true，没选择为false
//all.checked=false,在设置的时候，只有true（其实是1）和false（其实是0）
//上面设置1和0也可
//除了false，其他的基本都是true（设置字符串的都是true),若不是字符串，且不是true和false（包括上面的）则报错，默认checked是false，在设置了他（html），那么就会变成true
//即没有进行改变
//alert(all.checked)
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td><input type="checkbox" onchange="quan(this)" /> 全选</td>
<td>名称</td>
<td>单价</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />1</td>
<td>功能性饮料-尖叫</td>
<td>4.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />2</td>
<td>火腿肠</td>
<td>2.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />3</td>
<td>包子</td>
<td>1.5</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />4</td>
<td>包子</td>
<td>1.5</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />5</td>
<td>包子</td>
<td>1.5</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />6</td>
<td>包子</td>
<td>1.5</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />7</td>
<td>包子</td>
<td>1.5</td>
</tr>
</table>
<script>
//getElementsByTagName：通过标签名称获得元素节点对象集
//案例：表格隔行变色
var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象集合
// 文档对象的使用获取元素的方法
//其中使用文档对象的getElementsTagName也有s
//即可以获得多个标签名的对应的节点对象，Tag 英文意思：标签
//使用这个函数，获取已加载文档字符串参数对应的标签名的所有对应节点对象，并返回集合数组
//与上面的数组不同，但内容相同
for (var i = 0; i < rows.length; i++) {
if(i % 2 == 1){ // 奇数
rows[i].style.backgroundColor = "pink";
//注意一个节点对象在前面说过，是有很多属性的，我们操作css时
//实际是也是操作对应的属性，而没有的就不识别
//而这里将对应节点对象的样式属性取出，即rows[i].style这是对应节点的样式属性
//样式属性里通常放的就是我们css操作的属性
//而对于样式属性，只有backgroundColor没有background-color
//但其实他们是绑定的，即改变一个另外一个就会改变，即虽然没有background-color，但其实还是改变了
//这样的绑定很多属性都有，实际上只是改变的底层都是一样的而已，设置的属性用字符串来操作，属性基本都是字符串
//除了个别的用数值（如checked）
}
}
</script>
</body>
</html>
<!--
是否感觉js可以处理html和css，css和html自身分开处理，只不过html和css处理时分优先（如内部或者外部）
所以才会说：一般可以认为css和html是js的集成，因为js底层，所以js优先处理，而html和css可以说是互相关系，或者css是html的一种关系（他html的标签，如style），所以html自身优先大
-->
DOM修改：
修改 HTML DOM 意味着许多不同的方面：
改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）
对应后缀，对应提示，工具的作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="test()">点我试试</button>
<button onclick="chou()">你瞅啥</button>
<script>
//改变一个 <h2> 元素的 HTML 内容 :
function test(){
document.getElementById("hello").innerHTML = "走哇，喝点去~！";
}
//innerHTML 英文意思：属性，innerHTMl是节点对象的一个文本属性，代表文本内容
//里面可以写html标签，来进行好的操作
//若需要内若，则innerText不识别html标签，即会打印上去
//即可以修改节点对象的文本内容
//改变一个<h2>的 HTML 样式
function chou(){
document.getElementById("hello").style.color = "red";
document.getElementById("hello").style.fontFamily = "华文彩云";
}
//修改样式属性的颜色属性和字体属性，一个属性里是可以有多个属性的
//color是字体颜色属性，fontFamily是字体的类型，与font-family绑定的
//就如java里类有类一样
</script>
<h2 id="hello">你好！</h2>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="add()">添加</button>
<button onclick="del()">删除</button>
<button onclick="rep()">替换</button>
<div>
</div>
<span id="b" style="color:red"></span>
<script>
//点击按钮，在页面中创建一张图片
function add(){
var img = document.createElement("img"); // <img>
img.setAttribute("src","../lagou-html/img/cat.gif");
// <img src="../lagou-html/img/cat.gif">
img.setAttribute("title","小猫咪");
// <img src="../lagou-html/img/cat.gif" title="小猫咪">
img.setAttribute("id","cat");
// <img src="../lagou-html/img/cat.gif" title="小猫咪" id="cat">
var divs = document.getElementsByTagName("div");
divs[0].appendChild(img);
//添加后，即操作完了，可以让img的对象地址的值变为空，没有值了，需要重新设置值，或者重新创建
//这样下次再操作时，是没有作用的
//实际上appendChild自带删除功能，在添加节点后，再删除节点的值，即自带remove和append作用，但前提是他改变了位置，即从这个子节点变成其他子节点，那么原来的子节点删除，注意：节点只是一个值，而并非地址，可以看这个博客：https://www.bbsmax.com/A/VGzl3YN8db/，但是他正是这样，所以看起来他在给自己操作时，并没有删除，实际上操作了，只是又添加了
var b = document.getElementById("b");
b.innerHTML=""
}
//我们不止可以对元素内容操作，也可在内容中在加一个元素
//可以定义一个节点对象，使用文档对象的createElement()，定义一个指定字符串参数的节点对象，并可以返回
//注意:一个有返回值的值1其实可以不用变量接收
//因为变量只是存放数值的，即无论java还是js，最终结果使用都是那个对象
//就如直接使用1一样，而变量只是一个新的指向罢了，因为你并没有改变这个对象，而是里面的值
//但对于基本数来说，就是一个值重新赋值，而对象就是地址赋值
//在定义完一个节点后，我们可以对该节点设置属性，就如我们自定义设置类似，只不过这里使用代码
//其中节点对象的setAttribute()，设置属性，有两个参数，其中由于底层缘故，该参数必须设置
//且为字符串，一般不与数值相关的
//都是字符串
//若存在属性，则可以写上存在的属性，即只设置值
//当你把属性设置好后，那么就可以将该元素放在某个元素内容里了
//如节点对象的appendChild()参数是节点对象，即将参数的节点对象添加到调用者节点对象的内容里
//createElement 英文意思：制造元素
//setAttribute 中文意思：设置属性
//appendChild 中文意思：附加子项
//点击按钮，把上面刚创建的图片从页面上删除
function del(){
var img = document.getElementById("cat");
if(img !=null){
img.parentNode.removeChild(img);
} else{
var b = document.getElementById("b");
b.innerHTML="没有要删除的"
}
// 必须通过父节点，才能删除子节点
}
//单独的节点没有删除本身的方法，但有删除子节点的方法，主要是防止删除body，所以没有删除本身的方法
//而节点可以使用他的parentNode属性，这个属性代表调用者节点的父节点
//再使用removeChild就可以删除调用者内容的指定参数的节点对象了，与appendChild相反的操作
//parentNode 英文意思：返回节点
//removeChild 英文意思：移除孩子
//点击按钮，把上面刚创建的图片替换成另一张
function rep(){
var imgold = document.getElementById("cat");
if(imgold !=null){
// 通过修改元素的属性，做的替换
// img.setAttribute("src","../lagou-html/img/2.jpg");
//推荐这一种，浪费空间少，且省事，但第二种，在有节点的情况下浪费空间更少，且更省事
var imgnew = document.createElement("img");
imgnew.setAttribute("src","../lagou-html/img/1.jpg");
imgnew.setAttribute("id","cat");
imgold.parentNode.replaceChild( imgnew, imgold );
}else{
var b = document.getElementById("b");
b.innerHTML="没有要替换的"
}
//我们也可以使用节点对象来替换调内容的节点
//使用节点对象的replaceChild方法，让两个参数的左边一个替换掉右边一个
//必须要有参数且位置必须是已经存在的放右边，即imgold是已经加上的节点,而imgnew加不加都没事
//底层只会判断，第二个参数的存在，若存在则替换，若不存在则报错
//使得新的节点替换已经加上的节点，就不用再操作appendChild方法了了
//replaceChild 英文意思：替换孩子
//注意：虽然appendChild和替换相似，但是appendChild是在移除时，追加到最后，而replaceChild移除后，放回原来移除的位置，这是他们的不同
}
</script>
</body>
</html>
事件：
js捕获某个动作而做出的反馈
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body onload="test()">
<script>
//onload 当文档被载入时执行脚本
//仅在 body 和 frameset 元素中有效
//即基本只会对有body的操作
//onload 英文意思：页面加载
function test() {
//document.write("哈哈哈哈");
}
function a() {
console.log("获得焦点==被激活");
}
function b() {
console.log("bbb");
}
//
</script>
<form action="">
<p>帐号：<input onfocus="a()" onblur="b()" /></p>
<p>密码：<input /></p>
<!--
仅在表单元素中有效
元素的属性中
onblur 当元素失去焦点时执行脚本
onfocus 当元素获得焦点时执行脚本
因为基本上只有内部对标签有焦点
其中onfocus代表鼠标的焦点，如操作该元素时会触发里面的操作（函数）
onblur代表移除焦点，如没有操作该元素时会触发里面的操作（函数）
这个操作代表很多，点击也算，最好不要用alert来测试，因为当你点击确定时
算作离开焦点，但这个弹出框的选择，并不会消除原来的焦点
即当你操作这个弹出框时时，焦点又会回去，使得再次操作，就造成了死循环
基本大多数的弹出框都是如此，会让焦点回去
onfocus 英文意思：聚焦事件
onblur 英文意思：失去焦点
这个焦点一般代表你点击后的|
-->
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
img{
width: 30%;
/*
这是图片元素不是背景，会受元素宽度变化（图片变成元素了）
背景则基本不会受元素宽度变化
*/
border: 5px solid white;
}
</style>
<body>
<img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" onclick="dan()">
<img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" ondblclick="shuang()">
<img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" >
<!--
元素的属性中
onclick 当鼠标在该元素单击时执行脚本
ondblclick 当鼠标在该元素双击时执行脚本
onmouseout 当鼠标指针移出该元素时执行脚本
onmouseover 当鼠标指针悬停于该元素之上时执行脚本
onclick 英文意思：单击鼠标
ondblclick 英文意思：鼠标双击
onmouseout 英文意思：鼠标移出时，移出一次，那么一般都是算移出了，一开始没有移出
onmouseover 英文意思：鼠标经过
-->
<script>
function dan(){
alert("点了一下");
}
function shuang(){
alert("连续快读点两下");
}
function shang(img){
img.style.border = "5px solid red";
}
function xia(img){
img.style.border = "5px solid white";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//onkeydown 按下去
//onkeyup 弹上来
window.onkeydown = function(){
// event：事件源（按键）
// console.log( "按键编码："+event.keyCode );
//上 38
//下 40
//左 37
//右 39
if(event.keyCode == "13"){
alert("登录成功！"); //alert会导致按键不触发任何操作，所以提示后，就没有了（后面不会打印），若你一直按住，那么他会一直触发，这也是一些网页游戏的关键功能
}
}
//在前面，那些操作，如点击操作，移动操作，焦点操作等等
//实际上我们触发他们的时候，他们就会调用他们内容的函数，没有对应的函数当然不会执行
//而不是函数，则会放在一个方法体里，来执行，所以可以直接写alert(1)，也会执行
//若有函数的话，就会执行函数
//而window也有一些属性，当你触发他们时，就会调用他们值的方法
//无论是标签还是window调用的都是对象的方法
//那么上述的window.onkeydown的值，是一个方法，当触发时，就会调用
//window 英文意思：窗口，在浏览器里，代表浏览器的对象
//onkeydown 按下键盘的键，使得触发这个属性的值调用
//event 英文意思：事件，当函数调用时，基本会有很多信息也会改变的，只是我们不知道，要不然浏览器怎么指定我们鼠标的移动或者点击呢
//而event则是用来存放该函数调用时的信息，就如java的this类似
//即不同调用操作的event不同
//注意：对于事件属性，若没有参数
//event会默认给形式参数的第一个参数为赋值，当然event和该参数都可以使用，但第二个就不会
//即使用时会报错，而有参数时，也是有keyCode的话，会返回undefined（即没有值返回）
//因为没有该函数给你调用
//而不是事件的属性，则event不会默认给赋值
//keyCode 英文意思：键值，函数调用信息中的键的位置信息，即键的编码
window.onkeyup = function(){
console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时，按键回弹则触发
}
//onkeyup 英文意思：击键，当键弹出来时，使得触发这个属性的值调用
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
#father {
width: 200px;
height: 200px;
background: black;
padding: 10px;
}
#child {
width: 100px;
height: 100px;
background: greenyellow;
}
</style>
<body> <!--如果这里给出一个调用οnlοad="test()"，由于方法不存在，他会报错，注意：集成的操作基本都是小错误，也就是说，不会导致后面不操作-->
<div id="father">
<div id="child"></div>
</div>
<script>
//创建两个div，一个大一些，一个小一些
//先子，后父，事件的触发顺序自内向外，这就是事件冒泡
// 代码不重要，重要是知道这个事件发生，是正常现象
document.getElementById("father").addEventListener("click", function() {
alert("父级元素的事件被触发：" + this.id);
});
document.getElementById("child").addEventListener("click", function(e) {
e.stopPropagation() //取消事件的冒泡机制，也就是不往外面进行冒泡操作了，这里点击后，父不操作
alert("子级元素的事件被触发：" + this.id);
});
//在冒泡之前，先说明一下捕获，我们在操作时，如点击，浏览器是需要找到你点击的地方，那么就会从根节点开始
//一直找过去，这就叫做捕获，即元素跳跃，注意兄弟不会，因为知道地方
//冒泡操作，其实也就是你点击时（捕获到时），这个点击底层会往外找节点（先子后父）
//只要在该节点里，那么就会有一样的点击
//addEventListener 英文意思：注册侦听器，节点对象一般在有对应的事件属性时，还需要再次调用才可运行
//而这个监听器，就可以自动帮节点对象调用，他虽然没有给你设置属性
//但他会给你观察是否有第一个参数所对应的的操作
//虽然不是onclick但该参数设置的操作与之一样，因为他也有对应相关监听
//就如属性也是监听一样，底层类似，然后执行第二个参数所对应的方法
//一般只有两个参数，其实还有第三个参数，而没有第三个参数，其实是默认为false
//基本所有的操作，基本都是从冒泡开始的操作（如点击），即冒泡过程中会触发操作
//而第三个参数设置为true，那么就是捕获操作开始，即捕获过程中会触发操作
//捕获加冒泡的完全过程就是一个完全的操作，基本所有的操作都是从冒泡开始的
//stopPropagation 英文意思：停止传播
//使用事件所对应的信息event调用，让该事件不会往外找节点所在的其他元素，当前元素不算
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
#father {
width: 200px;
height: 200px;
background: black;
padding: 10px;
}
#child {
width: 100px;
height: 100px;
background: greenyellow;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
<script>
//还是刚才创建两个div，一个大一些，一个小一些
//先父,后子，事件触发顺序变更为自外向内（先父后子），这就是事件捕获
document.getElementById("father").addEventListener("click",function(){
alert("父级：" + this.id);
},true);
document.getElementById("child").addEventListener("click",function(){
alert("子级：" + this.id);
},true);
//设置true，捕获过程中会触发操作，默认为false，也可设置false
//若是字符串，则都默认为true
//实际上捕获和冒泡是一个过程，而监听默认为冒泡，如果你设置了捕获，自然不会监听冒泡了（因为你监听的就是捕获的过程，而非冒泡过程），所以若要一起，需要都进行监听，也就是复制上面代码，然后不加上true，当然了捕获肯定是优先的，因为是从外开始的
//当然，若有多个监听，自然都打印，也就是说，复制上面的多几个，自然都会进行打印（同样的监听又不是不能打印）
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// var user = new Object();
// user.name = "吕布";
// user.age = 21;
// user.say = function(){
// console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
// }
// user.say();
//上面是自己定义一个方法，方法里面包含多个变量
// var dog = new Object();
// dog.nickname = "屎尿多";
// dog.wang = function(){
// console.log("我饿了，我要拆家了！");
// }
// dog.wang();
//-----------------------------------------------------------
//Object 英文意思：对象
//可以创建对象，设置的值可以随便设置，当作该对象的属性，这就是js定义一个新的对象的操作，很明显，他直接给对象设置值，就如外面之前手动创建方法一样，这是js的语法，其实对于语法，各种编程语言互不相关，就如可能以后还会给出
/*
a(
this.name=name
)
这样的操作也不奇怪
*/
// function userinfo(name , age){
// this.name = name;
// this.age = age;
// this.say = function(){
// console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
// }
// }
//我们要时刻记住，this是调用者（不同的编程语言基本都是如此），很明显，若我们直接写在script里面，那么this就一点是window来调用了，虽然我们调用时不用写，但是实际上是隐藏的，就如java在方法里操作时也是隐藏this一样，当然，无论是否隐藏起来的打印，一般会给出具体的显示出来，自己看打印就知道了，即Window {window: Window, self: Window, document: document, name: 'undefined', location: Location, …}
//但是我们知道他是一个方法对象，他一般只能进行调用，因为对象并不是变量，所以不能这样的操作userinfo.say()，那么我们如何将他的结果定义为一个对象呢，这也是js的核心区别(js一般只能变量操作，特别的new除外，js自己想这样操作你能怎么样呢)，看如下，
// var user = new userinfo("詹姆斯",35);
// user.say();
//实际上将方法看成Function即可，记得使用``来包括，注意一般全局可能包含了name，默认为""
//-----------------------------------------------------------
//与java不同，js可以将方法对象的结果和参数再次的变为对象，原来对象的方法就是设置的自己的属性
//这里的this就是对象变量，如this.name其实就是设置一个属性，与java有很大不同
//js的this代表对象变量，可以设置属性，且可以当成对象使用
//而java的this代表该调用者引用，基本只能使用数据
//最后注意：为了进行设置，那么在创建对象时，他必须执行方法，然后进行改变，注意：这个执行方法是userinfo {}来执行的，也就是说是当前对象执行，所以是先创建好在执行的，具体如何实现，那这是js的语法，与我们并没有什么关系，二进制会满足你的想象的
var user = {
username : "孙悟空",
age : 527,
say : function(){
console.log("大家好，我叫："+this.username+"，我今年"+this.age+"岁了！");
}
};
user.say();
//user不算方法对象，不可以当作对象，他是一个数组，且是键值对形式，这样的形式可以理解为
//左边为属性，右边为值，可以使用该属性来使用值，就如
// var say = function(){
// console.log("大家好，我叫："+this.username+"，我今年"+this.age+"岁了！");
// }
//一样
//这也验证了say就是类似于java中的引用变量一样而已，变量都是这样
</script>
</body>
</html>
JSON-----------------------
大家在互联网上来回传递数据，如果没有一个统一的格式，解析起来的难度很大（每个人的编码喜好不一样）
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式
易于人阅读和编写，同时也易于机器解析和生成
<!--
{
属性1：值1，
属性2：值2，
。。。。
}
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
var json1 = { username: "吕布", age: 31 };
console.log("姓名：" + json1.username + "，年龄：" + json1.age + "岁");
//json调用：变量.左边的名称，来得到右边的值
//注意值必须要符合才可，即不能直接一个字母，而名称可以随便，加引号和不加一样
//因为引号里的，最后也是设置成属性了
//所以调用时可以使用不加引号的获得加引号的值
//注意：名称最好不要是数值，因为不好调用，若要调用，则需要变量名[对应名称]，由于是数值
//那么该对应名称可以是数值也可以是字符串（数字字符串）
//但最后还是引号里的
//对于数组，变量名基本要可以识别，否则基本上是undefined，如单纯的字母（一般对对应名称说明的，null和undefined基本不能作为调用方这是大错误，后续操作失败），这里还要明确注意：虽然我说大错误后面不能操作，但是也只是针对当前的script标签来说的，如果是其他的不影响，也就是说window会给每个script标签一个平台，而错误只是结束该平台，其他平台不影响，但数据共享（window共享的）
//这里需要注意一个细节，若没有设置值，那么基本不能操作两个参数以上的数据，所以单纯的{ username: "吕布", age: 31 };会报错，因为看成单纯的代码块了，所以需要;来进行分开
// json数组
var josnarr = [{ name: "貂蝉", age: 18 }, { name: "小乔", age: 17 }];
console.log("貂蝉" + josnarr[0].age + "岁了");
console.log("小乔" + josnarr[1].age + "岁了");
// 复杂的json对象
var long = {
name: "赵云",
sex: "男",
hobby: ["玉兰白龙驹", "龙胆亮银枪", "青釭剑"]
};
console.log(long.name + "的主攻武器：" + long.hobby[1]);
</script>
</body>
</html>
BOM操作--------------------
就是javascript对浏览器的一些常规操作的方法
window对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="kai()">极速入职</button>
<script>
function kai(){
window.open("http://lagou.com" , "拉勾网" , "width=500px,height=300,left=400","true");
// window.open("http://lagou.com" , "拉勾网" , "fullscreen=yes"); //IE才生效
//大多数的代码使用斜杠时，基本都是/，因为没有转义的含义，基本不会有错误，而\有时会出错
//所以最好还是/，特殊情况下使用\，如正则表达式
}
//使用浏览器对象的open方法，打开一个新的窗口
//第一个参数是打开的窗口的显示地址，第二个参数是窗口名称
//没有设置名称的话，则新打开页面（在当前显示），而不是窗口
//第三个参数是对该窗口的一些设置，如宽度，高度，和位置等等
//用逗号隔开，可以有px单位，其中em和%不起作用
//相当于px，可以有小数，负数的话，就是默认值，具体多少可以百度
//如果没有设置参数的话，则新打开页面，而不是一个窗口
//当然还有一个参数
//这个参数设置true和false，可以是字符串，不是true的话，字符串都是默认false，包括他们两个的字符串
//对浏览历史的是否替换，但好像没起作用）
//这些参数可以不写，只是用来设置的
//open 英文意思：打开
//注意：他们的打开页面都不是当前页面替换，而是弹出页面，也不是新开窗口，自己测试就知道了
</script>
</body>
</html>
screen屏幕对象
我想知道我的电脑屏幕多大，实际上，得到的就是分辨率
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="test()">获取</button>
<script>
function test(){
console.log("宽:"+ screen.width +"px，高:"+screen.height+"px");
}
//使用屏幕对象，screen的属性得到屏幕的宽度和高度
//实际上window是顶层对象，即有screen对象，而他是最顶层的
//而screen这类对象，基本是全局的对象，当然他里面的对象可以叫做子对象
//screen 英文意思：屏幕
//相当于他们操作的是显示框
//他代表真实电脑屏幕大小，而不是分辨率
</script>
</body>
</html>
location定位：
包含有关当前 URL 的信息，通常用来做页面跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="test()">测试</button>
<script>
function test(){
//除了a标签，js这里也可跳转地址
console.log( "当前页面的URL路径地址："+ location.href );
location.reload(); // 重新加载当前页面（刷新）
location.href = "http://lagou.com"; // 跳转页面，既然跳转了说明改变并执行了，而不是单纯的改变
//也就说明，地址与页面是互相改变的，地址改变页面会发生改变，而不是单纯的修改地址名称（当然，自然有操作只改变地址而不跳转的，具体可以百度，一般可以考虑history的pushState操作，虽然他通常不考虑本地协议如file://的情况下，通常需要服务器（可以考虑远程或者自身计算机里连接）处理）
}
//前面学了屏幕和窗口，这里可以操作页面的URL
//可以获得当前页面的url（底层会进行编码和解码），location.href获取当前页面地址
//我们也可以刷新页面，使用location对象（也可叫做URL对象）的reload()方法来刷新当前页面
//我们也可以将当前页面的URL进行修改，直接输出location.href可以获得URL地址
//也可以对他将进行设置，即修改，因为他也是一个属性
//而地址就是他这个属性，修改后，页面是的地址由于是绑定的，那么也会改变
//大多数自带的页面同步的代码，都是绑定的
//location 英文意思：位置
//reload 英文意思：重新加载
</script>
</body>
</html>
history浏览器历史：
history对象会记录浏览器的痕迹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="b.html">去b页面</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="hui()">返回</button>
<script>
function hui(){
history.go(-1); //上一级页面
//可以一个负数代表上一级，实际上就是上一个页面
//一个正数代表下一级，实际上就是下一个页面
//上面的最终解释其实就是记录浏览器的痕迹，谁到他这一页面，谁就是上一页
//但下一页一开始基本不可能做到，即一般为负数
// history.back(); 与history.go(-1)等价
//也是上一页
//history 英文意思：历史
//back 英文意思：向后，即上一页
//go 英文意思：去
}
</script>
</body>
</html>
navigator 导航（了解）：
window.navigator 对象包含有关访问者浏览器的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var str = "";
str += "<p>浏览器的代号："+ navigator.appCodeName +"</p>";
str += "<p>浏览器的名称："+ navigator.appName+"</p>";
str += "<p>浏览器的版本："+ navigator.appVersion+"</p>";
str += "<p>硬件平台："+ navigator.platform+"</p>";
str += "<p>用户代理："+ navigator.userAgent +"</p>";
str += "<p>启用Cookies："+navigator.cookieEnabled+"</p>";
document.write(str);
//使用导航对象，即navigator对象得到浏览器的相关信息
</script>
</body>
</html>
存储对象：
用起来和我们在java中map很相似，都是键值对的方式存数据
本地存储 localStorage：
关闭浏览器（实际上也是清除缓存，若设置不会清除，那么关闭浏览器也是存在的，但通常会设置清除）或者清除缓存
将会删除这些数据，否则基本一直存在
绑定与那个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
console.log("11");
// localStorage.setItem("name1", "吕布");
// localStorage.setItem("name2", "赵云");
// localStorage.setItem("name3", "典韦");
// console.log(localStorage.getItem("name1"));
// console.log(localStorage.getItem("name2"));
// console.log(localStorage.getItem("name3"));
// console.log("英年早逝");
// localStorage.removeItem("name1");
// localStorage.removeItem("name3");
// console.log(localStorage.getItem("name1")); //没有就返回null，一般设置值后，且没有手动的设置undefined或者NaN等等无效的数据，基本都是null
// console.log(localStorage.getItem("name2"));
// console.log(localStorage.getItem("name3"));
//上述，参数都会变成字符串，而在设置时，若直接写不符合的，如name，基本报错，经过测试，var a =a;不会报错，即自身给自身为undefined，这里就说明在js的赋值中，是从左到右的，java特别点是从右到左（class字节码的顺序就是这样）
//那么就会先判断他的字符串有没有，有的话，则修改该字符串的值
//没有的话，看有没有变量，没有，则报错
//且要注意：在设置时，若是对象，一般是直接取得对象类型当参数，这里要注意
//所以最好是先变成对应的具体字符串，然后再进行转换操作，使得得到对象
//对于js大多数方法来说，没有关于数值的，基本都会变成字符串
//即只要看是否为不符合的就可（其中可以观察变量）
//变量类型只与对象或者值有关，这是js的核心区别，虽然java也行，但是并不能是所有，具体可以看31章博客差不多最后的位置
//localStorage存储对象
//localStorage 英文意思：局部存储器
//localStorage.getItem获得localStorage中设置的数据，返回字符串，大多数没有关于数值的，基本返回的是字符串
//localStorage.setItem设置数据，第一个参数是名称，第二个参数是数据
//localStorage.removeItem删除设置的数据
// 三种方式保存数据
localStorage["a"] = 1;
localStorage.b = 2;
localStorage.setItem("c",3);
//这里可以看出，localStorage是json数据形式
//该数据形式与数组不同，他能在赋值时，顺便创建名称来获得值
// 查看数据类型
console.log( typeof (localStorage["a"] ))
console.log( typeof localStorage["b"] )
console.log( typeof localStorage["c"] )
//可以用typeof写在要操作的数值前面，也可用方法包括起来
// 第一种方式读取
var a = localStorage.a;
console.log(a);
// 第二种方式读取
var b = localStorage["b"];
console.log(b);
// 第三种方式读取
var c = localStorage.getItem("c");
console.log(c);
</script>
</body>
</html>
会话存储 sessionStorage：
会话，就是保持浏览器别关闭
关闭浏览就等于结束了一次会话
开启浏览器就意味着创建了一次会话
即该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
不影响其他窗口，数据只在当前窗口作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="dian()">点我</button>
<h3 id="result"></h3>
<script>
// sessionStorage.setItem("name","貂蝉");
// console.log( sessionStorage.getItem("name") );
// //sessionStorage.removeItem("name");
// sessionStorage.clear();
// console.log( sessionStorage.getItem("name") );
//与localStorage类似的操作
//只不过local变成了session了
//sessionStorage 英文意思：会话存储
//他还有可以清空全部数据的方法，clear放，即sessionStorage.clear()清空全部数据
//clear 英文意思：清理
//案例：记录点击了几下按钮
function dian(){
if( sessionStorage.getItem("clickCount") ){
//在判断中，单纯的大于0的整数，为true
sessionStorage.setItem("clickCount", Number(sessionStorage.getItem("clickCount")) +
1);
//new Number(1)和Number的打印是一样的，但是Number(1)，实际作用就是1，你可以看成java中的类似的包装类即可，要不然1的类型为什么是number呢，而new Number(1)是对象，即object
//这里返回字符串，需要变为数值
//对象返回的数据，是数值类型，平常赋值给var是数据都是自动的变成对应类型
//类似于java的装箱和拆箱
}else{
sessionStorage.setItem("clickCount", 1);
}
document.getElementById("result").innerHTML = "已经点击了"+
sessionStorage.getItem("clickCount") +"次！"
}
</script>
</body>
</html>
计时操作------------------------
周期性定时器 setInterval：
setInterval(1,2)：周期性触发代码exp （常用）
1：执行语句
2：时间周期，单位为毫秒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<h1 id="title"></h1>
<script>
//案例：闪烁的字体 （1秒1变色）
var colors = ["red","blue","yellow","pink","orange","black"];
var i = 0;
function bian(){
document.getElementById("title").style.color = colors[i++];
if(i == colors.length){
i = 0; // 颜色重新开始
}
}
//案例：在闪烁字体的基础上扩展，闪烁的电子时钟
function time(){
var d = new Date();
var str = d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"号
"+d.getHours()+"点"+d.getMinutes()+"分"+d.getSeconds()+"秒";
document.getElementById("title").innerHTML = str;
}
setInterval(bian,100); // 每隔0.1秒，执行一次变色函数bian
setInterval(time,1000); // 每隔1秒，执行一次时间函数time
//前面都需要我们自己来调用函数，这里可以循环调用
//我们可以循环调用函数
//第一个参数，为函数名，若不是函数名，则当成函数体来操作，因为给参数赋值，反正都是传递地址（包装存在）
//即可以为"alert(1)"，第二个参数是等待执行时间（循环调用），开始从0计算，即页面开始进行等待执行
//但他们也会受到等待，如在他们上面加一个大循环
//他们也要等待执行，只要他们执行时，那么除非有关闭程序的操作（如关闭窗口，关闭浏览器，代码关闭等等）
//否则不会停止
</script>
</body>
</html>
停止定时器 clearInterval：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<img id="tu" src="../lagou-html/img/1.jpg" width="50%" />
<br />
<button onclick="begin()">开始</button>
<button onclick="stop()">停止</button>
<script>
//案例：模拟年会抽奖
var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
function begin() {
timer = setInterval(bian, 100); // 没有使用var，所以timer是全局变量
//定时器不止可以循环，也可返回一个定时器对象，我们可以停止这个对象
//实际上是停止他对象的操作，即值的操作
}
function stop() {
clearInterval(timer); // 停止定时器，注意：这里就需要考虑是否是对应的相同的调用者了，这是一个重要细节
//clearInterval 停止参数定时器
}
function bian() {
var i = Math.floor(Math.random() * arr.length); // 0-4
document.getElementById("tu").src = "../lagou-html/img/" + arr[i];
}
</script>
</body>
</html>
一次性定时器 setTimeout：
相当于延迟的效果，只执行一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div></div>
<script>
function bian(){
document.body.style.backgroundColor = "red";
//前面我们说过，document就是代表这个文档，之前我们只是用这个文档来使用方法
//其实他也有属性的，如body就是他的属性
//可以设置body的背景色
}
//3秒之后调用
setTimeout(bian,3000);
//前面我们都是在规定时间内循环调用，而在规定时间内只需要调用一次的话
//就使用setTimeout方法，第一个参数是函数，第二个是等待时间（只调用一次）
//setTimeout 英文意思：延时
</script>
</body>
</html>
当然，js还会有很多的细节，这里给出一个，其中：
let a = [];
function fa(a){
a.push("2")
}
fa(a);
console.log(a)
let a = [];
function fa(a){
a = [2]
}
fa(a);
console.log(a)
扫一扫
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
