JavaScript基础

最新推荐文章于 2022-11-23 17:32:46 发布

磊_csdn

最新推荐文章于 2022-11-23 17:32:46 发布

阅读量312

点赞数

分类专栏： javascript 文章标签： JavaScript基础

本文链接：https://blog.csdn.net/gonglei155/article/details/103397677

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Java Script基础

文章目录

- Java Script基础

JS标签

javascript,有 ECMAScript,BOM,DOM 组成；
ECMAScript： ECMA 通过的标准化语言；
BOM： Browse Object Model，
DOM: Document Object Model
DOM，document，文档，指整个文档，从<html>开始到</html>结束。

1、type=“type/javascript”说明当前script标签中文本的类型。
2、所有的JS代码都必须写在script标签里
3、JS代码可以放在任何地方，但是好的语法习惯，scirpt 标签放在head标签中。
4、可以引入多个script标签，多个script标签之间，顺序执行。
5、js代码可以外部引入，src引入外部文件。
6、如果当前script标签是引入外部文件。这个script标签中，就不能再写代码了。因为这个此时这个script中的代码不会执行。（想想，又要外部引用，又要在里面写代码，不会很乱吗）
7、关于输入的特殊内容

	<script type="text/javascript">
		document.write("</script>");
	</script>

此时，输出不是 “”，因为JS执行代码是，把document.write中的当成了JS代码的结束，因此输入出： “");”
解决方式是用特殊格式代替<>:
&lt 是“<”
&gt 是 “>”
document.write("&lt /script&gt ");
8、注释
单行注释： // ，快捷键: ctrl + /
多行注释： /* */ ，快捷键： ctrl + shift + /
【语法】

alert(“hello word!”)  //在页面上弹出警告框
document.write(“hello world”);  //在当前文本上输入内容

【注】好的习惯，每条JS语句后边加分号。

变量

1、基本数据类型
<1>、数字 number 100 3.14
<2>、字符串 string 所有带双引号/单引号 ‘hello’ “hello”，用单引号和双引号，没有区别
<3>、布尔值 boolean true false
<4>、特殊数据类型 null 空 undeffined 未使用
2、复合数据类型
<1>、声明变量，通过关键字 var
如果在什么变量时，同时给变量赋值，叫初始化。
<2>、变量的赋值
<3>、同时定义多个变量

var name=”XXX”,age=18,sex=”男”

标识符：用户自定义的所有名字叫做标识符。变量名也就是标识符。
标识符起的名字规律：
<1>、数字、字母、下划线和$（美元符号）组成。不能是这个符号之外的。
<2>、不能以数字开头。
<3>、标识符是区分大小写的。
<4>、标识符最好能见名思意，好的习惯。
输出当前变量的数据类型：
【格式】： typeof 变量/常量
【注】JS是弱语言，定义时不需要定义类型。变量被赋值成什么类型就是什么类型，可随赋值更改。一般好的习惯，不要再后续的代码改变变量的类型，容易引起歧义。

运算符

算数运算符、关系运算符、逻辑运算符、赋值运算符、自加；
1、任何类型的数据和字符串数据类型做相加操作的时候，其他类型会自动转换成字符串类型。所作的字符串拼接，此时相加不是数学意义的加法，而是表示字符串的拼接。
如果其中一个是字符串， + 号叫做字符串拼接符。
查看JS语法错误显示:
<1>、火狐 firebug软件（不自带，需要下载附加组件firebug。安装完后重启浏览器，右上角就能看到图标）
<2>、谷歌 chome控制台（右键，检查）
2、任何数据除了和字符串做相加运算外，先要将字符串转换成数字；
<1>、与 NaN做算数运算的结果，始终都是NaN。（NaN，not a number）
<2>、字符串如果是纯数字字符串，会转化成数字；否则转换成 NaN；

var tmp = 1 + “2”;     //输出是“-1”，字符串“2”，在做加法以外的运算，转成了数字2；
alert (tmp);

var tmp = 1 + “2a”;  //输出是 “NaN”；说明不是纯字符串的“2a”，转成数字时是“NaN”；
alert （tmp）；

3、任何其他数据类型，除了和字符串做相加运算外，与数字类型做算数运算时，其他数据类型都会自动给的转换成数字。
布尔值， ture 转成 1 ； folase 转成0；
特殊数据类型中，NaN 转成 0， undefiend在转成 NaN；
var tmp = 1 + true; // 传输“2”；

强制数据类型转换：
1、数字0转换成布尔值为 false。所有非0的数字转成布尔值都为true；
2、空字符串转成布尔值为 false，所有非空字符串转成布尔值为true；
3、null和undefined转成布尔值都是false；
【注】通过方法： boolean（），进行将别的数据类型强制转换成布尔值。

    var tmp = boolean(1);   //ture
	var tmp = boolean(0);   //false
	var tmp = boolean(-1);   //ture

	var tmp = boolean(“”);   //false
    var tmp = boolean(“hello”);   //ture

var tmp = boolean(null  );   //false
var tmp = boolean(undefind);   // false

number（），将别的数据类型转换成数字
1、布尔值； ture转换成1，false转换成0
2、字符串：纯数字字符串，转成对于数字；非纯数字都转换成NaN
3、特殊数据类型 null转换成0 ，undefined转换成NaN；

var tmp = number(ture);   // 1
var tmp = number(false);   // 0

var tmp = number(ture);   // 1

parseInt();    兼容number（）功能，用于取整。对于纯数字字符串有点区别；
var tmp = number(20a);   // NaN，因为“a”无法转换成数字
var tmp = parseInt(20a);   // 20.因为虽然“a”无法转换，但是parseIntshi取整操作，会提取数字20；

parseFloat（），取浮点数，可以带小数的数字。
var parseFloat(3,14);   //输出 3.14

关于除法；
JS中可以除以0，但是会显示 Infinity，无穷大。

var tmp = 1 / 0；   //infinity，无穷大
var tmp = -1 / 0；  //-infinity，无穷小

赋值运算

代码规范：
1、注意层级缩进 tab =四个空格
2、；，后面都会跟一个空格；运算符 = + 前后都应该空格；
3、每一条语句后面都添加；

表达式:
【概念】运算符和操作数组成的式子，就叫做表达式；
表达式根据运算的不同，可细分；

tmp +=5；   // tmp = tmp + 10

一元运算符

【注】只能操作一个值的运算符的，叫做一元运算符
a ++； //表达式的值：++后置，先取a的值，然后再进行加1操作；
++ a； //表达式的值：++前置，先进行加1操作，然后再去a的值；
由于表达式取值方式不同，导致这两种表达式最后的值不同。

var a = 5;
alert (a ++);   //输出5；
alert（a）；    //输出6； 

var a = 5;
alert (++a);   //输出6；
alert（a）；    //输出6； 

var a = 5;
alert (a --);   //输出5；
alert（a）；    //输出4； 

var a = 5;
alert (--a);   //输出4；
alert（a）；    //输出4；

关系运算符

关系运算符中操作数为非数字的时候，要遵循以下规律：
1、如果两个操作数都是数值，则数值比较；
2、如果两个操作数都是字符串，则比较两个字符串对于的字符编码值（ASCII值）；
多个字符时，逐位进行比较，直到比较出大小，终止比较。就是和长度没关系
3、两个操作数中有一个是数值，则将另一个转换成数值，再进行比较。

在等于和不等的比较上，如果操作数未非数值，则遵从以下规律：
1、一个操作数为布尔值，则比较之前，将其转换成数值，falser为0，true为1；
2、一个操作数为字符串，则比较之前，将其转换成数值再比较；
3、一个操作数为NaN，则 == 返回false。 != 返回true；
并且NaN与NaN自身是不等。
4、在全等（===）和全不等（!==），如果值和类型都相等，才返回true，否则返回false;
alert (1 != NaN); //true
alert(NaN != NaN); //true

逻辑运算符

一共3种：
与：表达式1 && 表达式2
【短路操作】当第一个表达式1为false的时候，第二个表达式2就不会去执行，直接判断整个与运算为fasle。

alter（5<3 && alert (a)）;   //只输出false

或：表达式1 || 表达式2
【短路操作】当第一个表达式1为true的时候，第二个表达式2就不会去执行，直接判断整个与运算为true。

alter（5>3 && alert (a)）;   //只输出true

非：！表达式
【注】逻辑非运算符可以用于任何值，无论数据类型，这个运算符都会返回一个布尔值。
流程是：先江这个值转换位布尔值，然后取反。
1、操作数是空字符串，非运算，返回true； alert（!””）; //true
2、操作数是非空字符串，返回false
3、操作数是0，返回true
4、操作数是任意非0的数值（包括infinity），返回false；

alert(!infinity);  //false

5、操作数是NaN，返回true；
6、操作数是undefined，返回true

alert(!undefined);  //true

【注】NaN的布尔值位false； undefined的布尔值为false；infinity的布尔值为true。

流程语句

1、顺序流程
//题目：输入两个数，然后交换这两个数，再输出交换结果
var num = 20；
var num = 10;
var tmp = num1;
num1 = num 2;
num2 = tmp;
alert(“num1:” + num + “, num2: + num2);
//输出为 num1： 10，num2：20；这个是典型的顺序执行。熟记；
// + 是字符拼接
2、选择结构

单分支 if

【格式】
if（判断条件）
执行语句；
【过程】先去判断括号中的判断条件，如果成立，回去执行紧跟着if语句的一条语句。否则就不会取执行紧跟着if语句的一条语句。
【注】if语句，只能决定，紧跟着if语句后的一条语句是否执行。
【注】在JS中，我们把{ }括起来的所有语句，都当作是一条语句对待。

//判断一个数是否是偶数
var num = 10;
if (num %w == 0)
	alert(“这是一个偶数”);

双分支 if_else

【格式】
if(判断条件/表达式){
	执行语句1；
}else{
	执行语句2；
}
【规则】当括号内的判断条件/表达式 结果成立的时候，执行 执行语句1，否则执行 执行语句2；

多分支语句-if_else_else：

【格式】if(表达式1){
	执行语句1；
}else if（表达式2）{
	执行语句2；
}else if{
	执行语句3；
}
……
else{
	执行语句N；
}
【规律】从上往下，满足哪个条件就执行对应的语句，都不满足时，执行最后的else语句，只能进入其中之一。

多分支–Switch语句：

【格式】
switch(表达式){
	case 常量1；
		语句1；
		break；
	case 常量2；
		语句2；
		break；
	case 常量3：
		语句3；
		break；
	default；
		如果上述语句都不成立，执行这里；
		break；
}
【规律】表达式的结果等于哪个case的常量，则执行其后的语句，执行完break以后，就跳出switch结构，如果都不满足，执行default语句。
【注】break是一定不能省略的，如果省略就会造成事件穿透。不会跳出switch，会一直下面语句.

多分支—三目运算符

也叫条件运算符;

【格式】
	表达式1 ? 表达式2 : 表达式3;

【执行过程】先求解,表达式1,若为非0(真),则求表达式2,若表达式1为0(假),则求解表达式3;
//求两个数最大数

var num1 = 20;
var num2 = 10
var max = num1 > nume2 ? num1 : num2;

循环

while循环

【格式】
while(表达式){
	循环语句;
}
【注】
1、先判断表达式，表达式成立执行循环语句。
2、循环条件中使用的变量（循环变量）需要经过初始化；
3、循环体中，因有结束循环的条件，否则会造成死循环。
4、循环体内，可以写若干合法的js代码，包括if，也可以再套个循环。
var i = 1;
var sum = 0;
while(i<== 100){
	sum +=i;
	i ++;
}
alert(sum);

//1、打印100以内7的倍数
var i= 1;
while(i <= 100){
	if(i % 7 == 0){
		document.write(i + “<br />”)
	}
}

do…while:

【格式】
do{
	循环语句；
}while(表达式)；
【注】
1、最后的分号不要忘记；
2、循环条件中使用的变量需要经过初始化；
3、循环体中应有结束循环的条件。

while循环和do_while循环区别；
1、while循环是先判断表达式，然后再去执行循环语句；
2、do_while，先执行一次循环语句，再去判断一次表达式。不管表达式是否成立，都会执行一次。

	<script type="text/javascript">
		var i = 1;
		var sum = 0;
		do{
			sum += i;
			i ++;
		}while(i <= 100)
		document.write("sum="+ sum);
		document.write("<br>"+ "i="+ i);
	</script>
//输出： sum =5050 ；i=101

for循环：

【格式】for（表达式1；表达式2；表达式3）{
	循环语句；
}
【执行语句】
1、先求解表达式1（只求一次）
2、求解表达式2，若其值为真（非0），则执行for语句中的循环语句，然后再去求解表达式3；
再求解表达式2，若为假，则结束循环。
	<script type="text/javascript">
		var i = 1;
		var sum = 0;
		for (var i = 1; i <= 100; i++){
			sum +=i;
		}
		document.write("sum="+ sum);
	</script>

循环嵌套:
1、打印三角形

	<script type="text/javascript">
	for(var i= 1;i <= 5;i++){
		for(var b=1;b<=i;b++){
			document.write("*");
		}
		document.write("<br>");
	}
	</script>
输出;
\*
\*\*
\***
\****
\*****

break和continue

break语句；
1、在switch语句中，是流程跳出switch。
2、在循环语句中，使用流程跳出当前的循环。

continue语句；
1、只能在循环语句中使用，市本次循环结束，即跳过循环体中下面尚未执行的语句，接着进行下次是否执行循环语句。是跳过整个循环，如if语句中嵌套if，在嵌套if中执行continue，最外层的if语句内下面的执行语句也跳过了。

	<script type="text/javascript">
	for(var i= 1;i <= 5;i++){
		if(i == 3){
			continue;
		}
		document.write(i+"<br>");
	}
	</script>
输出：  1  2  4  5
	<script type="text/javascript">
	for(var i= 1;i <= 5;i++){
		if(i == 3){
			break;
		}
		document.write(i+"<br>");
	}
	</script>
输出： 1   2

函数

函数定义

在JS中，函数的概念:
函数是当它被调用时，执行的可重复使用的代码块。

函数定义：
【注】无函数的声明；
【格式】function 函数名){
	函数体；
}
【注】函数体内，外面怎么写JS代码，这里也如何去写JS代码。
函数可以封装任意多条语句，可以在任何地方，任何时候调用。

	<script type="text/javascript">
		//函数的声明，相当于写说明书，不会执行 执行语句
		function print(){
			for (var i = 0; i < 10; i++) {
				document.write("hello world!<br/>");
			}
		}
		// 函数的调用，告诉cpu，执行之前声明的函数。
		print();
		</script>

函数作用：
1、函数更加简短
2、有利于程序的维护
3、提供程序开发的效果，模块开发
4、提供代码复用性

有参函数

有参函数的封装过程：
function 函数名（形参,……){
函数体；
}

	<script type="text/javascript">
	    //n 形参， n =10
		function print(n){        
			for(var i = 0;i < n; i++){
				document.write("hello word!<br>");
			}
		}
		 //函数调用，实参给形参进行赋值，10 实参，n形参
		print(5);  
		</script>

arguments

定义函数，当没法确定形参个数的时候，就可以用arguments解决

计算所有传入参数的和，具体传入多少参数不确定。
【注】arguments 实现
在每一个函数内，都有一个内置的数组，是一个变量，叫做arguments
arguments可以存储当前函数传入的所有参数，而且是通过传参的顺序，进行排列的。
	<script type="text/javascript">
		function sum(){
			var sum = 0;
			for (var i = 0; i < arguments.length; i++) {
				sum += arguments[i];
			}
			alert(sum);
		}
		sum(1,2,3);
		</script>

函数的返回值

【注】如果我们要从外部获取到函数内运行的结果，可以通过return语句跟后面的要返回的值，来实现返回值。
【注】return后面所跟表达式的值，就是当前函数调用返回的值。无论函数中其他执行的结果。
【注】函数执行到return语句以后，就执行结束了。跟着return后面其他的语句执行不到。
函数分析：
1、函数值（return后面的表达式的值）
2、函数功能（函数名）

函数的作用域

作用域：就是起作用的范围，每个函数的声明，都会形成一个作用域。
调用函数，函数执行完成后，函数的空间会被释放掉，函数中定义的变量等待也都会被回收。

局部作用域，函数
局部作用域声明变量，是局部变量。局部变量的声明周期和生效范围，都是声明该变量的函数区域。当函数调用完成后，局部变量会直接销毁。
如果全局作用域和局部作用域中变量重名，采用就近原则，当前访问这个变量离哪个作用域近，就是哪个作用域中变量。

	<script type="text/javascript">
		var a = 10;
		function sum(){
			a = 5;   //此时全局就一个a，所以此时的修改，就是对全局a的修改；
		}
		alert (a);
		//输出10 
		sum();
		alert (a);
		//输出5 
		</script>

	<script type="text/javascript">
		var a = 10;
		function sum(){
			var a =5;   //在函数的内存中，生成一个a，存储在sum的运行空间，与全局的a没关系。
			alert(a);
		}
		alert (a);
		//输出10 
		sum();  
		//输出5，因此此时输出的是 函数sum中的a； 函数执行完成后，函数内的a会被回收，
		alert (a);
		//输出10 ，此时全局的a并不受函数的影响。
		</script>

1、判断一个年份是否为闰年

	<script type="text/javascript">
		function leapYear(year){
			if (year % 400 == 0 || year % 4 == 0 && year %100 !=0){
				return "这是闰年";
			}else{
				return "这不是闰年" ;	
			}
		}
		alert(leapYear(2017));
		</script>

2、判断一个数是否是素数
// 素数：只能被1和他本身整除的数

	<script type="text/javascript">
		function prime(num){
			for (var i = 2; i < num; i++){
				if(num % i == 0){
					return "这不是素数";
				}else{
					return "这是素数";
				}
			}
		}
		alert(prime(8));
	</script>

函数的递归

函数的递归；
1、面试官为递归相关的知识，说明面试官水平不错；
2、正常在工作中，一般情况下禁止你使用递归；

递归概念：
函数可以自己调用自己；
【注】我们可以写出递归，但是我们并不知道他是如何得出结果的
方法
1、首先找临界值，即无需计算，得到的值；
2、找这一次和上一次的关系；
3、假设当前的函数已经可以使用，调用自身计算上次的运行结果，再写出这次的运行结果；
【特点】
1、必须有参数；
2、必须有return；

求1加到N的和：

	<script type="text/javascript">
		function sum(n){
			if(n == 1){
				return 1;
			}
			return sum(n-1) + n;
		}
		alert(sum(100));
	</script>

递归调用的原理：

当n =100 时，函数会创建空间，会有单独的空间，存放sum（100），计算sum（100）=sum（99）+100；
但sum(99)不知道为多少，所以需要通过函数计算sum(99),创建空间存放sum(99)，但是sum（99）不符合n=1的情况，所以执行语句 sum(99)=sum(98)+99, 然后计算sum(98)，……，
直到计算出 sum(2)=sum(1)+1 , sum(1)调用函数知道为 1；然后就计算出sum(2)，sum(3)…… ，sum(100) ；
【注】
递归会在短时间内调用多个函数，使内存剧增。因为只有计算出临界值后，才能逐一将之前函数释放，不想平常一样，一边执行函数，一边释放。

使用递归完成，打印N个“hello word”

	<script type="text/javascript">
		function print(n){
			if (n == 0) {
				return;
			}
			document.write("hello word !<br>");
			return print(n-1);
		}
		print(5);
	</script>

斐波那契数列

兔子繁殖问题，设有一对新生兔子，从第4个月开始他们每个月月初都生一对兔子，
新生的兔子从第4个月月初开始，又每个月生一对兔子，
按此规律，并假设兔子没有死亡，n （n <= 20）个月末共有多少对兔子？

	<script type="text/javascript">
	/*
			一月兔	二月兔	三月兔	成熟兔
		1		1		0		0		0	1
		2		0		1		0		0	1
		3		0		0		1		0	1
		4		1		0		0		1	2   //成为成熟兔同时，生出1月兔，
		5		1		1		0		1	3
		6		1		1		1		1	4
		7		2		1		1		2	6  
		 //新的1月兔，3年后，成为成熟兔，同时生1月兔，其实之后3月一周期，不是4月。
		8		3		2		1		3	9
		9		4		3		2		4	13
		10		6		4		3		6	19
		可以看出，4月开始生新的1月兔，4月份的兔子，等于三月兔+新的一月兔
	  */
		function rabbit(mouth){
			if(mouth < 4){
				return 1;
			}
			return rabbit(mouth -3) + rabbit(mouth -1);
		}
		alert (rabbit(9));
	</script>

事件驱动函数

在和页面进行交互过程中调用的函数，叫做事件驱动函数；
和页面进行交互的行为，称作事件。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		var oBtn= document.getElementById("btn")
		/* 我们通过document.getElementById 找到符合条件的标签节点。
		然后就可以通过事件驱动函数，给当前的按钮绑定一系列的操作，完成用户交互。
		*/
		alert(oBtn);
	</script>
	<body>
		<input type="button" id="btn" value="按钮" />
	</body>
</html>

此时输出是： NULL，为什么呢？  因为程序是自上而下顺序执行，当script中获取 “btn”标点的节点时，此时这个节点还没有创建出来，所以显示为 null
但是按习惯，script一般都写在head标签中，不推荐将script标签写在<body>标签之后。那么修改如下：
修改：
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		window.onload = function(){   
			var oBtn= document.getElementById("btn")
			/* window.onload = function(){}，根据指定的 id 属性值得到对象。
			获取函数内的代码，在页面加载完成后执行。 */
			alert(oBtn);
			oBtn.onclick = function(){
			//oBtn.onclick函数，时在按钮被点击以后，才会触发。
				alert("单击");
				return;
			}
		}
	</script>
	<body>
		<input type="button" id="btn" value="按钮" />
	</body>
</html>

清空文本：
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		window.onload = function(){   
				var oBtn = document.getElementById("btn");
				var oTxt = document.getElementById("txt")
				oBtn.onclick = function(){
					oTxt.value = "";  
				//oTxt.value,是字符串，如果要计算，就要转成数字。
				}
		}
	</script>
	<body>
		<input type="test" id="txt" value="默认文字" />
		<input type="button" name="" id="btn" value="清空" />
	</body>
</html>

此处有个疑问，为什么 alert(oBtn); 在执行时，浏览器反复出现了3次？？？？？

数组

数组概念

基本数据类型：数字，字符串，布尔值，特殊数据类型（null，undefined）；
复合数据类型：
数组，存储大量数据，一般存放同类型数据类型，但是也可同时存放不通数据类型。
【注】数组就是数据类型，声明过程一样
【注】如果当前参数，只有一个，并且这个参数是数字10的话，意思是数组长度为10的数组。 var arr =new Array(10); 表示创建长度为10的数组，数组里面内容是空的。

var arr = new Array(1,true,"hello");

【注】数组就一个参数，数组长度。 length

var arr = ["red","blue","green"];
alert(arr.lenth);   //输出3
arr.length = 2;
alert(arr);   //此时，只输出2个，red和blue；

Math.random() ，可以随机 0~1 之间任意的数；

遍历


for循环
var arr = ["red","blue","green"];
	for(var i = 0; i <arr.length;i++){
		document.write(arr[i]+ "<br />");
	}
for …… in，进行遍历，叫做快速遍历，执行效率比for循环 高；
【格式】
for(var 变量 in 数组){
}

for(var i in arr){
		document.write(arr[i]+"<br />");
	}

栈和队列

栈是古代的木盆；
栈结构，从一个口进，从一个口出；
【特点】：先进后出。
push是从数组尾部插入，pop是从数组尾部取出；这就形成了栈结构，最先插入的数据，最后才能取出来。

push()
【格式】数组.push(元素……)
参数：是要添加的元素，参数的个数随意；
push的返回值，是这个数组的长度。

	<script type="text/javascript">
		var arr=["钢铁侠","蚁人","绿巨人"];
		var res = arr.push("蜘蛛侠","快银");
		alert (arr);
		// 输出是： 钢铁侠,蚁人,绿巨人,蜘蛛侠,快银
		alert (res);
		//输出的 5
	</script>

pop()
【格式】数组.pop();
功能：移除数组末尾的最后一个元素
返回值：移除的元素

	<script type="text/javascript">
		var arr=["钢铁侠","蚁人","绿巨人"];
		var res = arr.pop("绿巨人");
		alert (arr);
		// 输出是： 钢铁侠,蚁人
		alert (res);
		//输出的 绿巨人
	</script>
另外测试：
	<script type="text/javascript">
		var arr=["钢铁侠","蚁人","绿巨人"];
		var res = arr.pop("abc");
		alert (arr);
		// 输出是： 钢铁侠,蚁人，发现随便输入abc，也一样会删除数组尾部数值。
		alert (res);
		//输出的 绿巨人
	</script>
	
	<script type="text/javascript">
		var arr=["钢铁侠","蚁人","绿巨人"];
		var res = arr.pop();
		alert (arr);
		// 输出是： 钢铁侠,蚁人。 测试发现，甚至pop后面留空，也可以删除数组尾部数据；
		alert (res);
		//输出的 绿巨人
	</script>
	但是发现，填写: arr.pop("a","a");  输出还是：钢铁侠,蚁人 ；  说明pop一次只能删除数组末尾一个数值；

队列：从一头近，从另一头出
先进先出；
push()从数组尾部插入，shift()从数组头部取下元素。

shift()
【格式】数组.shitf()
功能：从数组的头部取下一个元素。
返回值：取下的元素；

unshift()
【格式】数组.unshift(参数……)
功能：从数组头部插入元素，参数的个数随意；
返回值：插入元素后，数组的长度；

	<script type="text/javascript">
		var arr=["钢铁侠","绿巨人","黑寡妇"];
		var res = arr.shift();
		alert (res);
		//输出的 钢铁侠
		alert (arr);
		// 输出是： 绿巨人,黑寡妇
	</script>

	<script type="text/javascript">
		var arr=["钢铁侠","绿巨人","黑寡妇"];
		var res = arr.unshift("蚁人","黑豹","美国队长");
		alert (res);
		//6
		alert (arr);
		// 蚁人,黑豹,美国队长,钢铁侠,绿巨人,黑寡妇
	</script>

数组其他函数

concat()
【格式】数组1.contack(数组2);
功能：将两个数组，合并成一个新数组，源数组并不会被改变；
返回值：合并好的新数组；

	<script type="text/javascript">
		var arr=["钢铁侠","绿巨人","黑寡妇"];
		var arr2 = ["蚁人","黑豹","美国队长"];
		alert (arr.concat(arr2))
		// 钢铁侠,绿巨人,黑寡妇,蚁人,黑豹,美国队长
	</script>

slice()
【格式】数组.slice(start,end);
功能：基于当前数组获取指定区域元素，并创建一个新数组；源数组不改变。 //理解成切片
参数： start，开始区域下标； end，结束获取区域的下标；不包括end 下标位置的元素。
返回值：指定元素生出的新数组；

	<script type="text/javascript">
		var arr=["钢铁侠","绿巨人","美国队长","黑豹"];
		var res = arr.slice(1,2);
		alert (res)
		// 绿巨人； 不包括end下标 2  的元素；
	</script>

splice 可以完成删除，插入，替换操作；这些功能有它的参数决定；
【格式】数组.splice(start,length,元素……)
参数：
参数1，截取的开始下标；
参数2，截取的长度；
参数3，在截取的开始下标位置，要插入的元素，插入的个数是随意的。
【注】会对源数组进行修改

 /删除功能
 	<script type="text/javascript">

		var arr=["钢铁侠","绿巨人","美国队长","黑豹","蜘蛛侠"];
		arr.splice(3,1)
		alert (arr)
		// 钢铁侠,绿巨人,美国队长,蜘蛛侠 ;  已经删除了“黑豹”
	</script>


插入功能
	<script type="text/javascript">

		var arr=["钢铁侠","绿巨人","美国队长","黑豹","蜘蛛侠"];
		arr.splice(3,0,"超人")
		alert (arr)
		// 钢铁侠,绿巨人,美国队长,超人,黑豹,蜘蛛侠 ; 在“黑豹”前面插入了“超人”
	</script>

替换功能
	<script type="text/javascript">
		//替换功能
		var arr=["钢铁侠","绿巨人","美国队长","黑豹","蜘蛛侠"];
		arr.splice(3,1,"超人")
		alert (arr)
		// 钢铁侠,绿巨人,美国队长,超人,蜘蛛侠 ; 在“黑豹”替换为了“超人”
	</script>

join()
【格式】数组.join(拼接符)
功能：使用拼接符将数组中的元素拼接成字符串。
参数：拼接符
返回值：拼接好的字符串

	<script type="text/javascript">
		var arr=["10","20","30"];
		alert(arr.join("+"))
		//输出为： 10+20+30
	</script>

二维数组

通过循环按顺序为5*5的二维数组a，赋值1到25的自然数，然后输出该数组的左下半三角。试编程：

输出应该是：
1 ，2 ，3 ，4 ，5
6， 7， 8， 9， 10
……
【注】所谓二维数组，就是在数组中，元素还是数组；
	<script type="text/javascript">
		var arr = [];
		var b = 1;
		for(var i=0;i < 5;i++){
			var newArr = [];
			for(var j=0;j < 5 ;j++){
				newArr.push(b++);
			}
			arr.push(newArr);
			for(var k = 0; k <= i;k++){
				document.write(arr[i][k]+"&ensp;&ensp;");
			}
			document.write("<br>")
		}
		alert(arr);
	</script>

系统排序

revers()
【格式】数组.revers();
【注】revers默认是按照字符串排序的。
是逆向排序

	<script type="text/javascript">
		var arr = [10,30,20，50,40];
		arr.reverse();
		alert(arr);
		//输出：50,40,30,20,10
	</script>
	但
		<script type="text/javascript">
		var arr = [10,1,15,6,20];
		arr.reverse();
		alert(arr);
		//输出：20,6,15,1,10
	</script>
可以看到，排序出现了问题；这是因为revers 是按照字符串进行排序的。并且逐个比较；

sort()
【格式】数组.sort()
是升序排序
【注】sort默认是按照字符串排序的。
【注】一般情况下，我们需要自己去编写排序算法，系统提供给我们的排序函数，用的比较少；

	<script type="text/javascript">
		var arr = [10,30,20,50,40];
		arr.sort();
		alert(arr);
		//输出：10,20,30,40,50
	</script>
但是
	<script type="text/javascript">
		var arr = [10,1,15,6,20];
		arr.sort();
		alert(arr);
		//输出：1,10,15,20,6 
	</script>
	会发现输出出现了问题，这是因为sort是安装字符串进行排序的，

冒泡排序

【原理】前后两个数，两两进行比较，如果符合交换条件，就交换位置；直到所有数据排序完成，结束比较；

	<script type="text/javascript">
		var arr = [9,8,6,7,4,5,2,3,1]
		for(var i=arr.length-1; i > 0 ;i--){
			for(var j = 0;j <i;j++){
				var tmp = 0;
				if(arr[j] > arr[j+1]){
					tmp = arr[j+1];
					arr[j+1] = arr[j];
					arr[j] = tmp;
				}
			}
		}
		document.write(arr);
	</script>
输出: 1,2,3,4,5,6,7,8,9

选择排序

【原理】通过比较，选出最小的数，放在第一个位置，然后在其余位置，选出次小的数放在第二个位置，一次类推，直到所有的数成为有序序列；
【注】打擂台法

 	<script type="text/javascript">
		var arr = [9,8,6,7,4,5,2,3,1]
		for ( var i = 0; i < arr.length-1;i++){  //循环 （arr.length -1） 次
			for(j = i+1; j < arr.length;j++){    //arr[i] 跟 arr[i]后面的所有数比较
				if(arr[i] > arr[j]){
					var tmp = 0;
					tmp = arr[i];
					arr[i] = arr[j];
					arr[j]= tmp;
				}
			}
		}
		document.write(arr);
	</script>

引用

声明在当前函数中的变量和当前函数的形参，作用域都限制在该函数内，
当函数调用结束以后，这些变量和形参，会被释放。

	<script type="text/javascript">
		var a = 10;
		function show(a){
			a = 5;
			alert(a);
		}
		alert(a);   //10
		show (a);    //5
		alert(a);   //10
	</script>
函数中，即使变量重名，也不会影响全局变量； 函数中的a，与全局中的a，不是同一个； 这就是作用域。

数组是复合数据类型，也叫引用数据类型。

【注】函数的运行空间，是预先分配好的，一旦被分配好内存空间，就不能在进行改变了。
所有想到了一个办法：

	<script type="text/javascript">
		var arr = [10,20];
		function show(arr){
			arr.push(30,40);
			alert (arr);
		}
		alert(arr);    //10,20
		show(arr);     //10,20,30,40
		alert(arr);    //10,20,30,40
	</script>

【注】所有的复合数据类型都不直接存储在我们的函数中，存储在堆段。（内存中有一块地方叫堆）
【注】在堆段，我们可以想要使用多少内存，就分配多少内存。
arr数组，数组内存放的数据其实实在堆段中，当访问arr数组时，其实时访问的一个引用链接。
当执行show函数时，对数组赋值，其实是对数组中堆段的数据进行了更新。所以当show函数执行完成，所有变量释放，但是函数的空间中的数组arr只是一个引用，堆段中时另外一块空间，函数空间释放不影响堆段中数据。再去访问arr中的引用，找到堆段中的数时，里面的数已经被修改了。

数组相当与一个门牌号钥匙，堆段相当与房间。调用函数相当于拿门牌号，函数修改数组，相当于往房间里放了东西。当函数把门牌号交还给前台后，前台再把门牌号钥匙给其他人用时，房间里的东西已经被修改了。
【注】所有的复合数据类型，存储的都是门牌号，也就是地址。所有这类型的数据，我们叫做引用数据类型。
之所以这样用，也是无奈之举，因为函数的空间都是预先分配好的，没有办法修改。而复合数据类型中的数据会随时被修改。

字符串

概念

【注】在JS中，将所有单引号或者双引号括起来的，都叫做字符串；
字符串创建的方法，一共三种；

1、通过 new 运算符创建
	var str = new String("我们");
	alert(str);
	alert(typeof str);    //但是显示是，object，对象。  对象有属性和函数。
2、new 可以省略
	var str = String("我们");
	alert(str);
	alert(typeof str);   //但是显示是，object，对象。  对象有属性和函数。

3、通过常量创建字符串；
var = "hello";
alert(str);
alert(typeof str);     //string

字符串属性：
length，返回的是当前字符串的个数；
访问字符串中的字符：
charAt()
【格式】字符串.chaAt(下标)
【返回值】对应下标的字符
【注】上述方法比较繁琐，可以直接通过字符下标访问该字符；

var = "hello";
alert(str.length);  //5
alert(str.charAt(1));   //e , 字符串下标从 0 开始；
alert(str[1]);  //e

【注】ECMAScript中字符串是不可能变的，也就是说，字符串一旦创建，它们就的值就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个新值的字符串填充该变量。

var str =  "hello";
str[1]= "x";
alert(str);    //还是hello，字符串声明后，无法修改

如果要改变，只能修改字符串的值；
<script type="text/javascript">
	var str =  "hello";
	str= "hxllo";
	alert(str);    //hxllo
</script>

【注】 + 号可以作为字符串拼接符存在

方法

sub()，把字符串显示为下标；
sup()，把字符串显示为上标；

<script type="text/javascript">
	document.write("hello".sub()+5+"hello".sup());  
</script>

charAt(3)，获取下标为3的字符
charCodeAt(3)，获取下标为3的字符的编码

<script type="text/javascript">
	document.write("hello".charAt(1)+"<br />");   //e
	document.write("hello".charCodeAt(1));   //101
</script>

String.fromCharCode();
【格式】String.fromCharCode(ASCII码值，……);
参数: ASCII码值，个数任意
返回值：ASCII码值对应的字符组成的字符串

<script type="text/javascript">
	document.write(String.fromCharCode(97,98,99,100));   //abcd
</script>

concat()
【格式】字符串1，concat(字符串2)
返回值，拼接成功的字符串；
【注】一般情况下，很少用cancat，而是直接使用 + 号拼接符。

<script type="text/javascript">
	document.write("hello ".concat("word!"));   //hello word!
</script>

查找方法

indexof()
【格式】字符串.indexof(字串，开始查找的位置)
返回值：如果在字符串中查到到字串第一次出现的位置，返回字串出现的位置；否则没有查到到，返回 -1；
lastIndexOf()
查找字符串最后一次出现的位置；返回字串出现的位置；

search()
参数可以是正则匹配，返回出现的位置；
【注】正则表达式，不用双引号或单引号，需要用 /字符串/ 表示；
【注】正则表达式可以添加修饰符； i，代表忽略大小写， g 代表全局匹配
如 /abc/ig

<script type="text/javascript">
		document.write("abcabcabc".indexOf("abc"));   //输出0
		document.write("abcabcabc".indexOf("abcd"));   //输出-1
		document.write("abcabcabc".indexOf("abc",1));   //输出3
		
		document.write("abcabcabc".lastIndexOf("abc"));   //输出6
		document.write("abcabcabc".lastIndexOf("abcd"));   //输出 -1
		
		document.write("abcabc".search("bc"));  //输出1
		
		document.write("ABCabcabc".search("abc"));  //输出3
		document.write("ABCabcabc".search(/abc/i));  //输出0
		document.write("ABCabcabc".search(/abc/ig));  //输出0
	</script>

字符串分割

replace()
【格式】字符串.replace(匹配的字符串或者正则表达式，替换成的新字符串)

<script type="text/javascript">
		document.write("how are you , how are you".replace("are","old are")+ "<br>");    //how old are you , how are you
	替换完成，如果有多个are，也也只能匹配第一个；
	如果想匹配说要 are， 需要使用正则表达式；
		document.write("how are you , how are you".replace(/are/,"old are")+ "<br>");  //how old are you , how are you
	直接 /abc/ 只能匹配一个；  需要 /abc/g  才能匹配全局的are
		document.write("how are you , how are you".replace(/are/g,"old are")+ "<br>");  //how old are you , how old are you
	匹配了所有的 are
	</script>

substring()
【格式】字符串.substring(strat，end);
作用：字符串提取，在指定范围内，提取字符串，生成新的字符串。
【注】不包含结束位置。
返回值：新的字符串。

<script type="text/javascript">
	document.write("hello word!".substring(2,5));     //llo
</script>

字符串分割：
split
【格式】字符串.split(分隔符，生出的数组的长度)；
返回值：通过分隔符，分割成的装有字串的数组；
【注】
1、分隔符，是个整体；
如以两个空格为分隔符，那么一个空格的字符串就不会被分割；
2、会分割出空的字符串；
如，有两个空格，以一个空间为分割符，就会出现空的字符串；
3、如果分隔符是空的字符串“”，那么字符串会分割成单个字符；
4、字符串到数组，是通过split 。那么从数组到字符串，可以通过jion完成；

	document.write(arr);     //how,are,you  这是一个数组内的内容
	document.write("how are you".split(" ",2));     //how,are
	document.write("how  are you".split("  ",2));   
	  //how,are you  如以两个空格为分隔符，那么一个空格的字符串就不会被分割；
	document.write("how are you".split(""));   //h,o,w, ,a,r,e, ,y,o,u 
</script>

	<script type="text/javascript">
		var arr = "how are you".split("");
		alert(arr);
		alert(arr.join(""));    //输出： how are you
	</script>

字符串大小写：
toLowerCase()，把字符串换换成小写
toUpperCase()，把字符串转换成大写

	<script type="text/javascript">
		var str = "HOW are you";
		alert(str.toLowerCase());   //how are you
		alert(str.toUpperCase());   //HOW ARE YOU
	</script>

ECMA5

ECMA
严格模式
【注】从字面意思理解，在这种模式下，浏览器会对JS的要求更加严苛；
“use = strict”; ：写在哪个作用域下，这个作用域所有代码都会严格遵从严格模式；
【注】不要轻易的在全局范围开头，增加"use = strict"; 建议在作用域内使用；

function m1(){
	max = 10； 
	//如果在给变量赋值的时候，没有使用var 声明该变量，那么会对当前变量，当作全局变量处理；
	}
	m1()
	alert(max);

function m1(){
		"use = strict";    //声明严格模式
		max = 10；
	}
	m1()
	alert(max);
此时运行，浏览器会直接报错，显示max是非法的。

新增数组方法

indexOf() 数组
【格式】数组.indexOf(元素，index)；
【注】使用的方式和字符串一致；

var arr= [10,20,30,40,50,30];
alert(arr.indexOf(30));  //2
alert(arr.indexOf(30,3));  //5

forEach()
【格式】数组.forEach(function(item，index，array))
item：当前遍历到的元素
index：当前遍历到的下标
array：当前数组
功能: 遍历数组

	var arr= [10,20,30];
	arr.forEach(function(item,index,array){
		alert(item+","+index+","+array);   
		/* 
		10,0,10,20,30
		10,1,10,20,30
		30,2,10,20,30
		 */
	})
	arr.forEach(alert);       //10  20  30  ,遍历数组也可以通过这种方式

map 映射，
原理：先遍历数组，对每个元素操作，再将结果返回

<script type="text/javascript">
	var arr= [10,20,30];
	var arr2 = arr.map(function(item,index,array){
		return item + 2;
	})
	alert (arr2);   //12,22,32 每个元素都加2；  
</script>

reduce 归并
【格式】数组.reduce(function(item,index,array){ 操作 returen; })
pre：上一次遍历return后面的值；
next：当前遍历到的元素

<script type="text/javascript">
	var arr= [10,20,30,40];
	var arr2 = arr.reduce(function(pre,next,index,array){
		alert(pre + "," + next);      //显示10，20 显示上一个数和当前的数
		return pre + next;
		/* 
		输出:
		30,30       //第一个30，是10+20
		60,40        //60 是 30 + 30
		100         // 100是 60 + 40
		 */
	})
	alert(arr2);
</script>
因为reduce是循环遍历，所有 redue中如果写了 alert(pre + "," + next);  会导致多次出现弹窗；

filter 过滤

<script type="text/javascript">
	var arr= [10,20,30,40];
	var arr2 = arr.filter(function(item,index,array){
		return item > 30;   //找出所有大于30的数
	})
	alert(arr2);     //40
</script>

some 判断return后面的条件是否成立，如果成立，返回true，否则返回false；
【注】如果匹配成功，就返回ture，后面就不再进行遍历了。就是判断是否有一个成功就行；

<script type="text/javascript">
	var arr= [10,20,30,40];
	var arr2 = arr.some(function(item,index,array){
		return item == 30;  //判断数组中是否存在30
		//判断return后面的表达式，在当前数组是否成立，如果成立true，否则false；
	})
	alert(arr2);   //true
</script>

every
与some一样，但是是要求每一项都符合，才返回true；有一项不符合，就返回false；
【注】如果判断有元素不符合条件，返回false；直接中断循环

<script type="text/javascript">
	var arr= [10,20,30,40];
	var arr2 = arr.every(function(item,index,array){
		return item > 20;  
	})
	alert(arr2);   //false
</script>

Math对象

Math对象用于执行数学任务；
Math常用的属性， Math.PI 约等于3.14159
Math对象常用的函数；

Math.round(数字)； //四舍五入
Marh.random(); //随机 0~1 之间的随机数
Math.max(); //返回较大的数；
Math.min(); //返回较小的数；
Math.abx(数字)； //返回当前数的绝对值
Math.ceil(); //向上取整
Math.floor(); //向下取整
Math.pow(x,y); //求x的y次方； x是底数，y是指数；
Math.sqrt(x); //求x的开平方；

【注】计算机有bug，计算小数的时候，会出错；
银行的计数单位是分，所有全都是整数，没有小数；
Math对象下的勾股函数；
参数都应该是弧度；
Math.PI = 180 弧度 //因为圆对于 2 PI;
1弧度 = Math.PI / 180;
Math.sin() //正弦
Math.cos(); //余弦
Math.tan(); //正切

alert(Math.sin(30*Math.PI / 180));    //计算 sin(30°)；

对象

对象也是引用数据类型；
分析：数据存储的历程
变量（单个数据），随着数据量的增大，单个变量无法满足； =》出现了数组；==》随着数据复杂度的增加，出现了对象；对象不仅存储数据，还可以存储函数；
ECMAScript中引用类型是一种 数据结构 ，用于将 数据和功能 组织在一起。

对象的创建；
对象中存储的数据，我们叫做对象的属性；
对象中存储的函数，我们叫做对象的方法；
1、使用new运算符 
new person = new Object();
//给该对象添加数据/属性
person.name = "XXX";
person.age = 18;
//给该对象添加函数/方法
person,showNmae = function(){
	alert(person.name);
}
如果想要访问，上述对象的属性和函数；
alert(person.name);    //和访问变量没有区别；

如果想要访问: 调用对象的方法
person.showName();

2、new运算符可以省略；
var person = Object();

1，2两种方式用的较少
3、使用常量/字面量 来创建对象
var person= {};
person.name = "XXX";
person.age = 18;
person.showName = function(){
	alert(person.name);
}
person.showName();

对于对象的赋值，也可以通过下标方式进行； 两种方法通用
person["name"]= "XXX";   //此时name需要叫双引号，因为是充当下标；

关于函数的声明补充：

function show(){	
	}
	
//其实上述 函数的声明，可以改成： 
	var show = function(){	
	}
	//就是把 函数 当成 变量 来进行声明；
	//等号右边，由于没有名字，所有也叫 匿名函数

delete 删除对象的属性；

alert(person.name);
delete person.name;
alert(person.name);   //undefined

函数 function()，也是复合数据类型，也就是引用数据类型

函数名 == 函数所在地址；

日期对象

在JS中，日期也是复合数据类型，是对象；
对象的属性
对象的方法；

日期对象 Date;
创建方式只有一种：

var d = new Date();
alert (d);   //Sun Dec 08 2019 11:23:39 GMT+0800 (中国标准时间)

参数： 如果不传参数，默认获取的当前系统的时间；
【注】我们所用的时间，都是根据格林尼治时间，中国北京处于东八区，所以 为格林尼治时间加8 小时，就是： GMT+8；
中国标准时间： CST
参数类型可以是： 
Date("2015/08/22");     //Sat Aug 22 2015 00:00:00 GMT+0800 (中国标准时间)
Date("2015-08-22");     //Sat Aug 22 2015 08:00:00 GMT+0800 (中国标准时间)
Date(2016,04,13,14,24); //Fri May 13 2016 14:24:00 GMT+0800 (中国标准时间)

参数可以是毫秒数，会计算从1970年开始+ 毫秒数； 计算出时间；
var d = new Date(1000);    
alert(d);  //Thu Jan 01 1970 08:00:01 GMT+0800 (中国标准时间)
1秒 == 1000 毫秒，  所以此时加了1秒；
为什么是以1970年0时0分0秒 为参照物， 是因为 1970年为Unix诞生日；

日期对象方法

日期对象格式化方法：
调用方式都是：
【格式】日期对象.方法();

Date 类型还有一些专门用于将日期格式化为字符串的方法，这些方法如下。
toDateString()——以特定于实现的格式显示星期几、月、日和年；
toTimeString()——以特定于实现的格式显示时、分、秒和时区；
toLocaleDateString()——以特定于地区的格式显示星期几、月、日和年；
toLocaleTimeString()——以特定于实现的格式显示时、分、秒；
toUTCString()——以特定于实现的格式完整的UTC 日期。
//UTC,代表格林尼治时间，没有加8小时；

<script type="text/javascript">
	var d = new Date();
	alert(d.toDateString());   //Sun Dec 08 2019
	alert(d.toTimeString());   //12:07:09 GMT+0800 (中国标准时间)
	alert(d.toLocaleDateString());   //2019/12/8
	alert(d.toLocaleTimeString());   //下午12:07:09
	alert(d.toUTCString());   //Sun, 08 Dec 2019 04:07:09 GMT
</script>

时间函数中；
set 系列函数，是设置值；
get 系列函数，是获取值；

<script type="text/javascript">
	var d = new Date();  // Sun Dec 08 2019 12:16:10 GMT+0800 (中国标准时间)
	alert(d);
	alert(d.getDate());   //8  ,获取日，8号的意思
	d.setDate(4);   //把8号 改成 4号
	alert(d);   //Wed Dec 04 2019 12:16:10 GMT+0800 (中国标准时间)
</script>

获取一周中的某一天，是从 0 开始的，星期 0 代表的是 周日； 只能获取，不能设置；
获取月份，也是从 0 开始的；第 0 月，就是我们所说的 第 1 月； 
因此计算月份，记得 + 1；

日期函数中，
设置毫秒，参照物都是1970年
d.set/getTime(); 设置/获取当前日志距离1970年的毫秒数；
Date.parse();
参数：是一个日期格式的字符串；
功能：返回日期距离1970年的毫秒数

日期练习

1、显示当前的时间
<script type="text/javascript">
	function showDate(){
		var d = new Date();
		var year = d.getFullYear();
		var month = d.getMonth() +1 ;
		var day = d.getDate();     //获取几号
		var week = d.getDay();   //获取星期几
		if (week == 0){
			week = "日"
		}
		var hour = d.getHours();
		var min = d.getMinutes();
		var sec = d.getSeconds();
		return year + "年" + month + "月 " + day + "日 星期" + week + " " + hour + ":" +  min + ":" + sec;
	}
	alert(showDate());   //2019年12月 8日 星期8 12:49:1
</script>

2、setDat(),getdate()
封装一个函数，可以根据输入的天数n，显示n天后的时间;
<script type="text/javascript">
	function numOfDate(n){
		var d = new Date();
		var date = d.getDate();
		d.setDate(date + n);
		alert(d);
	}
	numOfDate(1);   //Mon Dec 09 2019 13:18:11 GMT+0800 (中国标准时间)
</script>

定时器

setInterval()
【格式】
setInterval(函数，毫秒数);
功能：每隔所传参数的毫秒数，就调用一次所传参数的函数；
返回值：当前页面上，对于这个定时器的唯一标识；相当于的定时器的id；

<script type="text/javascript">
	var i = 0;
	function show(){
		document.write(i++ + "<br />")
	}
	window.onload = function(){
		var oBtn = document.getElementById("btn");  //首先把按钮获取到；
		oBtn.onclick = function(){
			setInterval(show,1000);   //每隔1 s 执行一次 show 函数;  
			
这里函数不要带()。因为这里是函数传参，不是调用show函数，所以只写函数名，一定不能写 ();   
如果带了(),就相当于没有传参，调用show()函数，只执行一次；
		}
	}
</script>
<body>
	<input type="button" id= "btn" value="按钮"/>
</body>

因为function show(){
		document.write(i++ + "<br />")
	}
也可以写成:
var show = function(){
		document.write(i++ + "<br />")
	}
	
所以： setInterval(show,1000); 
也可以也成：
setInterval(function(){
		document.write(i++ + "<br />")
	},1000);

setInterval的常用格式是：

setInterval(function(){
		//想要去执行的代码；
	},毫秒数);

clearInterval() ，取消定时器；
参数：定时器ID

var timer = setInterval(function(){
		document.write(i++ + "<br />")
			if (I == 5){
			clearInterval(timer);   //当i 等于5时，取消定时器；
			}
		},1000);

innerHTML，标签间的所有内容；
如果在innerHTML包含标签，标签会被识别，并且会解析，呈现对应的效果；

<script type="text/javascript">
	window.onload = function(){
		var oBtn = document.getElementById("btn");
		var oDiv = document.getElementById("div1");
		oBtn.onclick = function(){}
		//获取div标签间的内容
		alert(oDiv.innerHTML);    
		//输出：<em>斜体</em>  ，不仅仅时“斜体”两字，而是这个包括标签在内的内容
		oDiv.innerHTML = "<h1>我是替换文本</h1>";   
		//发现“斜体”文字，被替换成了“我是替换文本”
	}
</script>
	<body>
		<div id="div1">
			<em>斜体</em>
		</div>
		<input type="button" id="btn" value="按钮" />
	</body>

秒表的实现

<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>秒表的实现</title>
		<script type="text/javascript">
			//可以将查找标签节点的操作进行简化
			function $(id){    //定义名为$ 的函数
				return document.getElementById(id);
			}
			window.onload = function(){
				var count = 0;    //记录总秒数
				var timer = null;
				$("start").onclick = function(){ //点击开始键，开始计数
					timer = setInterval(function(){
						count ++;
						//同时需要改变页面上 时，分，秒的值；
						$("id_S").innerHTML = showNum(count % 60);
						$("id_M").innerHTML = showNum(parseInt(count / 60) % 60);
						$("id_H").innerHTML = showNum(parseInt(count / 3600));
					},10);
				}
				//写暂停键
				$("pause").onclick = function(){
					clearInterval(timer);
				}
				//停止计数   ，1、数据清零； 2、页面展示清零
				$("stop").onclick = function(){
					clearInterval(timer);   //取消定时器
					count = 0;   //数据清零
					$("id_S").innerHTML = "00";
					$("id_M").innerHTML = "00";
					$("id_H").innerHTML = "00";
				}
			}
			
			
			//处理单个数字函数
			function showNum(num){
				if(num < 10){
					return "0" + num;
				}else{
					return num;
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<div id="count">
				<span id="id_H">00</span> :
				<span id="id_M">00</span> :
				<span id="id_S">00</span>
			</div>
			<input id="start" type="button" value="开始" />  

			<input id="pause" type="button" value="暂停" />
			<input id="stop" type="button" value="停止" />
		</div>
	</body>
</html>

重复点击，如连续点击两次”开始“按钮，会导致两个计时器；出现问题；

BOM

系统对话框

BOM，Browser Object Model，浏览器对象模型。当打开浏览器时，整个浏览器就是一个BOM；
我们通过window对象来控制BOM；在客户端的JS中，window对象时一个全局对象，所有表达式都在当前环境中计算；
window 对象，就是浏览器上打开的一个页面窗口。

    <script type="text/javascript">
		alert(window);   //[object Window]
	</script>

window对象下的属性和方法；
浏览器可以通过调用系统对话框，向用户显示信息；
系统提供了三个函数，可以完成系统对话框的操作；
【注】window下的函数，都可以省略window直接去调用。

alert(”警告框“);
window.alert("警告框");   //作用时一样的

直接弹出警告框’
参数：警告框上显示的内容；

confirm()
【功能】弹出一个带有确定和取消按钮的警告框；
【返回值】：选择”确认“，返回true；
选择”取消“，返回false；

 var res= confirm("请选择确定和取消");  
 alert(res);
 先会出现弹窗；  因为confirm 就会执行弹窗；
 选择”确认“，返回true；
 选择”取消“，返回false；

prompt()
【功能】弹出一个带输入的提示框；
【参数】第一个参数：要在提示框上显示的内容；
第二个参数：输入框内默认的值；
【返回值】点击确定：返回值时输入的内容
点击取消：返回值是 null

var res = prompt("请输入一个数",9);  
     //会弹出输入框，默认值是9；此处的默认是可以任何其他类型；
alert(res);

window下的open方法

open();
1、要加载的URL
2、窗口的名称或者窗口的目标
3、一串具有特殊意义的字符串

		<script type="text/javascript">
			window.onload = function(){
				var oBtn = document.getElementById("btn");
				oBtn.onclick = function(){
					open("http://www.baidu.com");  
					
				}
			}
		</script>
【注】，如果只有一个参数，调用open会打开了新窗口，加载url；
	    如果反复点击按钮，会不停的打开 新的窗口

如果改成：
open("http://www.baidu.com","百度"); 
第二个参数，是给打开的新的窗口起一个名字，然后以后，再去加载url，就在这个已经起好名字的目标窗口，加载url；
此时反复按钮，不会再不停的打开新的窗口，只保留会在第一次打开的窗口。

如果添加第3个参数：
open("http://www.baidu.com","百度",width = 400,heigh=400,top=200,left=200);
第三个参数，设置打开的窗口参数；

openr，打开当前窗口的父窗口的window对象。
IE不支持该对象；

父窗口：index2.html
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			body{
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oBtn = document.getElementById("btn");
				oBtn.onclick = function(){
					open("index1.html","子窗口",width = 400,heigh=400,top=200,left=200);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="打开子窗口" />
	</body>
</html>

子窗口：index1.html
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			body{
				background-color: blue;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oBtn = document.getElementById("btn");
				oBtn.onclick = function(){
					alert(opener);
					opener.document.write("子窗口让父窗口输出的");
				}
			}
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="按钮" />
	</body>
</html>

在父窗口，黄色背景，点击 ”打开子窗口“按钮， 会打开 子窗口 ，蓝色背景。
然后在子窗口上的index1.html上，可以通过opener.document.write("子窗口让父窗口输出的");  在父窗口上，输入字符；

BOM location对象

window下面有location对象；
document下面也有location对象；
BOM下面也有location对象；
其实这三个location对象是同一个，都是等效的；
location：我们浏览器上的地址栏输入框；

<script type="text/javascript">
		alert(location);  //http://127.0.0.1:8848/htmlCSS/js/index1.html ，当前的url
		alert(window.document.location);
		alert(window.location ==window.document.location );   //true
	</script>

location中属性：
url，统一资源定位符；包括
protocol：host：port / pathname ？ search(查询字符串) # hash(锚点)
http://www.baidu.com:8080/code/xxx.html?username=xxxx&age=18#1

location.hash  ， 锚点，就是url 地址后面的# 后部分，如 #1， 作用是实现页内跳转。
		window.onload = function(){ 	
			document.onclick = function(){
				location.hash = "#3";   //对锚点赋值		
			}
		}  
host，主机名：端口号， 浏览器的端口号，默认是8080；

hostname 主机名，域名/IP
alert(location.hostname);   //输出：127.0.0.1

href，整个url
alert(location.href);   //输出：http://127.0.0.1:8848/htmlCSS/js/index1.html

pathname ， 路径名
alert(location.pathname);   //输出：/htmlCSS/js/index1.html

port， 端口号

protocal，协议
alert(location.protocol);   //输出：http:

search， 查询字符串
跟在 ？ 号后面的部分；
window.onload = function(){ 	
			document.onclick = function(){
				location.search = "?xxx=yyy&age=18";   //对锚点赋值		
			}
		}

location对象的方法

一共3个；

assign(); 跳转到指定的url；

 
reload(); 重载当前的url
如果进行传参，参数为true的时候，强制加载；就是从服务器源头重新加载；（就是清除缓存）

replace();
用新的url 替换当前页面；
与assign区别，用replace 替换页面，跳转完成后，没有后退键跳转到上一个页面；
用replace，替换，可以避免产生跳转前的历史记录；

		<script type="text/javascript">
			window.onload = function(){
				var oBtn = document.getElementById("btn");
				oBtn.onclick = function(){
					/* location.assign("http://www.baidu.com");
					location.reload();
					location.reload(true); */
					location.replace("http://www.baidu.com");
				}
			}
		</script>

BOM history对象；

history对象是window对象下的属性；
保存这用户上网的记录，从窗口被打开的那一刻算起；
在浏览器上，就是那个返回和前进的箭头按键；

属性：
history.length  , 返回当前history对象中的记录数，历史记录条数；
history.back();  返回上一条历史记录，类似与后退；
history.forward();  前进到吓一跳历史记录，类似前进；
history.go();    
	参数是0 ，重载当前页面；
	正数，前进对应数量记录；
	负数，后退对应数量记录；
	
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oBtn = document.getElementById("btn");
				oBtn.onclick = function(){
					alert(history.length);   
				}
				var oForward = document.getElementById("forward");
				oForward.onclick = function(){
					history.forward();
				}
				var oBack = document.getElementById("back");
				oBack.onclick = function(){
					history.back();    //功能按键，不需要alert包括起来
				}
				var oGo - document.getElementById("go")
				oGO.onclick = function(){
					history.go(0);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="历史记录" />
		<input type="button" id="forward" value="前进" />
		<input type="button" id="back" value="后退" />
		<input type="button" id="go" value="go" />
	</body>
</html>

BOM 练习

在web开发中，我们经常需要获取诸如?id=5&search=ok这种类型的URL键值对，那么通过location，可以写一个函数，来一一获取；
封装函数，解析search；
获取url中search，通过传入对应key，返回key对应的value；
例子： 传入id，返回5；
?id=5&search=ok

		<script type="text/javascript">
			function getValue(content,key){
				//1、找出key第一次出现的位置, key是要查找的字符
				var start = content.indexOf(key);
				if(start == -1){
					return;
				}else{
					//2、找出键值对，结束位置；  每个key和对应value之间，都是以& 分开；
					var end = content.indexOf("&",start);
					if(end == -1){
						end = content.length;   //如果是最后一个键，end就是整个字符串长度
					}
				}
				//3、将这个键值对提取出来
				var str = content.substring(start,end);
				//4、根据key，查找后面的value，获取value；
				var arr= str.split("=");
				return arr[1];   //arr[0],是key；  arr[1]是value
			}
			var content = "?id=5&search=ok";
			alert(getValue(content,"search"));   //输出： ok
		</script>

DOM

dom概念

Document Object Model，文档对象模型；
document，代表从开始，从结束；
【注】DOM不是JS的语法，是”W3C“的概念。允许程序和脚本动态的访问和更新文档的内容、结构和样式；

网页中：
html，组成了页面的结构；
css组成了页面的样式；
JS 组成了页面行为的操作；
如果需要通过 JS 去操作 html和css 中的数据的话，就需要通过DOM 来连接；

【注】DOM是打通”html，css“ 与 JS 之间壁垒的工具；
D：文档，可以理解为整个web加载的网页文档；
O：对象，可以立即为类似window对象之类的东西，可以调用属性和方法，这里说的是document对象；
M：模型，理解为网页文档的树形结构；

所有的标签，都成为节点；DOM中的节点，一共有3种；
在JS种，所有节点都是对象；

以

测试Div

举例：
元素节点：

属性节点：title = “属性节点”；这部分；
文本节点：测试Div；就是标签间的这部分内容；

dom属性和方法

查找元素节点的方法：
document.getElementById(id);
【功能】通过当前元素节点的id，获取对应元素的节点；

获取到元素节点之后
1、可以访问元素节点中的属性；
通过这个节点对象，访问它的一系列属性；
tagName，获取元素节点的标签名；
innerHTML，获取元素节点标间间的内容； 如果内容含有标签，会解析标签；

2、除了有元素节点属性之外，还有html属性 的属性：
id；
title；
style；
className;
访问这些属性，是通过：
	元素节点 . 属性名；  或者
	元素节点[属性名]；

 stytle样式中，backupgroup-color, 凡是使用了“-”链接的属性；
				访问时，需要将 “-” 去掉，然后将后续单词首字母大写；
				
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
		</style>
		<script type="text/javascript">
			window.onload = function(){     //在页面加载完成以后执行的函数；
				var oDiv = document.getElementById("div1");
				//通过当前元素节点id，获取对应的元素节点
				alert(oDiv); //输出：[object HTMLDivElement]
				alert(oDiv.tagName);   //DIV
				alert(oDiv.innerHTML);   //测试Div
				alert(oDiv.id);   //div1
				alert(oDiv.title);   //hello
				alert(oDiv.className);   //box， 获取class，只能直接使用class，需要使用className
				alert(oDiv.style);   //[object CSS2Properties]，是css样式对象；
				alert(oDiv.style.width);   //300px
				alert(oDiv.style.backgroundColor);  //red,
				/* stytle样式中，backupgroup-color, 凡是使用了“-”链接的属性；
				访问时，需要将 “-” 去掉，然后将后续单词首字母大写； */
				
				//html属性的赋值
				oDiv.title = "word";
				oDiv.className= "oxb";
				oDiv.style.width = "400px";  //会看到网页的div stytle值已经变了
				//此时查看网页的html代码，会发现里面值已经被替换了
			}
		</script>
	</head>
	<body>
		<div id="div1" title="hello" class="box" style="width:300px;height: 300px;background-color: red;">测试Div</div>
	</body>
</html>

ByTagName

document.getElementsByTagName();
参数: 标签名；
功能：获取当前页面上所有符合改标签名标准的元素节点；
返回值：一个装有所有符合条件的元素节点的数组；

<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var aLis = document.getElementsByTagName("li");
				alert(aLis);   //[object HTMLCollection],是一个数组
				alert(aLis.length);  //12
				//获取ul下的li标签
				var oUl = document.getElementById("ul1");
				var content = oUl.getElementsByTagName("li");
				alert(content[3].innerHTML);  //44
				alert(content.item(3).innerHTML);  //44
				for(var i =0; i < content.length;i++ ){
					document.write(content[i].innerHTML+ "<br>");
				}
				
			}
		</script>
	</head>
	<body>
		<ul id="ul1">
			<li>11</li>
			<li>22</li>
			<li>33</li>
			<li>44</li>
			<li>55</li>
			<li>66</li>
		</ul>
		<ol>
			<li>11</li>
			<li>22</li>
			<li>33</li>
			<li>44</li>
			<li>55</li>
			<li>66</li>
		</ol>
		
	</body>
</html>

ByName

document.getElementsByName()
【参数】name的值；
【返回值】装有符合条件的元素节点的数组；
【注】name属性一般情况下，只有文本输入框的元素节点才有；

		<script type="text/javascript">
			window.onload = function(){
				var nodes = document.getElementsByName("hello");
				alert(nodes);    //[object NodeList] 
				alert(nodes.length);  //3
				alert(nodes[1]);  //[object HTMLSpanElement]
				alert(nodes[1].innerHTML);   //Span 
			}
		</script>
	</head>
	<body>
		<div name="hello"> Div </div>
		<span name="hello"> Span </span>
		<input name="hello"/> Input
	</body>

第二种情况：
		<script type="text/javascript">
			window.onload = function(){
				var nodes = document.getElementsByName("hello");
				alert(nodes.length);  //4
			}
		</script>
	</head>
	<body>
		<div name="hello"> Div </div>
		<span name="hello"> Span </span>
		<input name="hello"/> Input
		<div id="Div1">
			<span name= "hello"></span>
		</div>
	</body>

第三种情况：
		<script type="text/javascript">
			window.onload = function(){
				var oDiv = document.getElementById("div1");
				var nodes = oDiv.getElementsByName("hello");
				alert(nodes.length); 
				//会提示报错，不支持用元素节点开始查，只能从document开始查
			}
		</script>
	</head>
	<body>
		<div name="hello"> Div </div>
		<span name="hello"> Span </span>
		<input name="hello"/> Input
		<div id="Div1">
			<span name= "hello"></span>
		</div>
	</body>

byclassname

node.getElementsByClassName(“box”);
【功能】：获取node节点下，所有符合条件的元素节点；
【参数】：class
【返回值】：所有符合添加的元素节点组成的数组；
【注】getElementsByClassName在低版本的IE上不支持；

		<script type="text/javascript">
			window.onload = function(){
				var nodes = document.getElementsByClassName("box");
				alert(nodes);   //[object HTMLCollection
				alert(nodes.length);  //4
				alert(nodes[3].innerHTML);  //888
				
				//获取ul下，class为box的元素节点
				var oUl = document.getElementById("ul1");
				var aLis = oUl.getElementsByClassName("box");
				alert(aLis.length);  //2
				alert(aLis[1].innerHTML);  //444
			}
		</script>
	</head>
	<body>
		<ul id= "ul1" >
			<li>111</li>
			<li class = "box">222</li>
			<li>333</li>
			<li class = "box">444</li>
		</ul>
		<ol id="ol1">
			<li>555</li>
			<li class = "box">666</li>
			<li>777</li>
			<li class = "box">888</li>
		</ol>
	</body>

【注】getElementsByClassName在低版本的IE上不支持；
兼容的方法：封装一个函数
function getElementsByClassName(parent,classStr){
	var nodes = parent.getElementsByTagName("*");  //找到parent下所有元素节点
	var result = [];    //用于记录符合条件的元素节点
	for(var i = 0; i < nodes.length; i++){
		if(nodes[i].className == classStr){
			result.push(nodes[i]);  //如果符合条件，添加到数组
		}
	}
	return result;
}