JavaScript笔记

JavaScript学习笔记

一、JS

JS的第一行代码

alert(): 发出警告

//弹出一个对话框
alert("这是我的第一行JS代码");

docuemnt.write() :向body标签中添加内容

//js单行注释
/*
* js里面的多行注释
* document.write()  往body标签里面写内容
* 
*/
document.write("看我出不出来");

console.log() :向控制台输出内容

console.log("你看我在哪里出来？");

prompt用法：

<script type="text/javascript">
		prompt("请输入您的姓名");
	</script>

<script type="text/javascript">
		prompt("请输入您的姓名？","小明");
</script>

confirm用法：

<script type="text/javascript">
		//选择确认框
		confirm("确定还是取消？");
</script>

循环输出：

<script type="text/javascript">
		document.write("循环输出helloworld！！！<br>")
		
		//js里面变量声明统一使用var
		for(var i=0;i<3;i++){
			document.write("<h1>hello world!!!"+i+"</h1>");
		}
</script>

JS代码的编写位置

可以将JS代码编写到标签的属性onclick中，只有当鼠标点击时，js代码才会执行

<button onclick="alert('讨厌你点我干嘛？');">你点我一下</button>

也可以写在a标签的href属性中：

<a href="javascript:alert('让你点你就点？？？');">那你点我这里</a>

注：虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用！

也可以编写到script标签里或者在外部创建一个JavaScript文件，通过script标签在html中引入即可

<script src="./script.js"></script>

script标签一旦引入外部文件就不能在其内部编写代码了，即是编写了浏览器也会忽略不会执行，如果需要可以在创建一个script标签用于编写内部js代码

二、JS基本语法

js注释： // 单行注释 /* 多行注释*/

JS中的一些基本编写语法特点：
1、JS中严格区分大小写！！
2、JS每一条语句以；结尾，如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候浏览器可能会加错分号，所以开发时必须写分号。
3、JS中会忽略多个空格和换行，所以可以利用空格和换行对代码进行格式化。

字面量和变量

字面量都是可以直接使用，但是一般都不会直接使用字面量。
变量：变量可以用来保存字面量，而且变量是可以任意改变的。变量更加方便我们使用，所以在开发中都是通过变量去保存字面量的。
声明变量：在js中使用关键字var来声明一个变量。

var a;
a=123;
var b=789;

标识符
命名一个标识符的规则：
1、标识符中可以含有字母、数字、_、$
2、标识符不能以数字开头
3、标识符不能是ES中的关键字或保留字。
4、标识符一般用驼峰法命名（首字母小写，每个单词的开头字母大写，其余小写）

JS底层保存标识符实际上是采用的Unicode编码，所以理论上所有的utf-8中含有的内容都可以作为标识符，但不建议使用。

变量的声明：

	<script type="text/javascript">
		//变量的声明统一使用var来声明
		//注意变量的命名规则： 可以由字母，数字，_和$组成，不能以数字开头，不能是关键字
		//声明变量未赋初始值
		var i;//声明某个变量
		var m,n; //同时声明多个变量
		//声明一个变量 并且赋值
		var name="张三";
		//同时声明多个变量并且赋值
		var age=23,address="北京";
		
		console.log(name,age,address);
		//i=3;
		console.log(i);//undefined 未定义  声明变量但是没有初始值
	</script>

变量的使用：

<script type="text/javascript">
		var x=4,y=5,z;//声明多个变量，有些有初始值，有些没有
		z=x+y;
		alert(z);//9
		
		m=12;
		alert(m);//js里面呢的变量是弱类型语言，不经过声明也可以直接使用
	</script>

数据类型

JS中的数据类型：string、Number、Boolean、Null、Undefined、Object（对象）

字符串

声明一个字符串：使用双引号或单引号都可以，但是不要混着用！

<script type="text/javascript">
		//String定义和声明 值必须有引号
		//js里面""和''都表示字符串。他们只是区分作用
		var str1="hello world";
		var str2='hello world';
		var str3="hello world';//报错
		console.log(str1,str2,str3);
</script>

在字符串中可以使用\作为转义字符。
\t：表示制表符。
\：表示\

Number数值

在JS中所有的数值都是Number类型，包括整数和浮点数。
可以使用typeof来检查一个变量的类型

var a="123";
console.log(typeof a);

Boolean布尔值

布尔值只有两个，true和false。
true表示逻辑上的真
false表示逻辑上的假
使用typeof检查时，返回boolean。

var bool=true;

NULL和Undefined

Null：NULL

var a=null;

类型的值只有一个就是null。专门用来表示一个为空的对象。
使用typeof来检查一个NULL时，返回的是object

Undefined：Undefined类型的值只有一个就是undefined。当声明一个变量，但是并不给变量赋值时它的值就是Undefined。
使用typeof来检查时，返回的是undefined。

<script type="text/javascript">
		var i;//undefined
		var j=null;
		console.log(i,j);
		//undefined派生自null值，相等的
		alert(undefined==null);//true
	</script>

typeof方法

<script type="text/javascript">
		var b1=false,a="abcde",b=null,i=12,m;
		//通过typeof()可以判断某变量的类型
		console.log(typeof(b1));//Boolean
		console.log(typeof(a));//String
		console.log(typeof(b));//Object
		console.log(typeof(i));//Number
		console.log(typeof(m));//Undefined
	</script>

强制类型转换

将一个数据类型强制转换成其他的数据类型。
类型转换主要指将其他的数据类型转换为 String、Number、Boolean

转换为String的方法：
1、调用被转换数据类型的toString（）方法。
注：该方法不会影响到原变量，他会将转换的结果返回。a=a.toString();
局限性：null和undefined这两个值没用toString（）方法，使用时会报错。

2、调用String（）函数。使用String（）函数做强制类型转换时，对于Number和Boolean实际上就是调用toString（）方法；而对于null和undefined就不会调用调用toString（）方法，会将null直接转换成字符串"null"

转换为Number的方法：
1、使用Number（）函数将其它数据类型转换成Number类型。
若原始为字符串，如果是纯数字的字符串，则直接转换成数字；如果有非数字的字符串，则转换成NaN；如果字符串是个空串或全为空格的字符串，则转换成0；如果为布尔类型，则true转换成1，false转换成0；Null转换成0；undefined转换成NaN。

2、parseInt（）：可以将一个字符串中有效的整数内容取出来然后转换成Number
例如：a=“123.456”，调用parseInt（）函数最终只能得到123.
parseFloat（）：作用和parseInt（）类似，不同的是取出的是有效的小数。
例如：a=“123.456.789px”,调用parseFloat（）得到的数是123.456
注：这两种函数专门用来针对于字符串转Number。对于非字符串使用这两种函数，它会将其先转换成String再操作。

3、可以对一个其它数据类型的前面使用+（正号），来将其转换成Number

转换为Boolean的方法：
1、使用Boolean（）函数将其它数据类型转换成Boolean类型。
对于原始数据类型为数字的情况，除了0和null转换成false，其余都转换成true
对于原始数据类型为字符串的情况，除了空串其余都转换成true
对于原始数据类型为Null和Undefined，都是转换成false
对于原始数据类型为object，都是转换成true

2、隐式类型转换：使用！取反操作，可以将任意数据类型做两次非运算
，转换成布尔值。

三、运算符：

运算符也叫作操作符。通过运算符可以对一个或多个值进行运算，并获取运算结果。
typeof就是一个运算符，作用是获取一个值的数据类型，它的返回值是一个字符串类型

var a=123;
var result=typeof a;
console.log(typeof result);

算术运算符

+、-、*、/、%等
当对非Number类型的值进行运算时，会将这些值转换为Number然后进行运算。任何值和NaN运算都得NaN。
+:
如果对两个字符串进行+运算就是将两个字符串相拼接！任何值和字符串进行+运算都会先转换成字符串再进行拼接！也可以利用这一种特点将任意数据类型转换成string类型，只需要将任意数据类型加上一个空串即可！

任何值做-、*、/运算时都会自动转换成Number，可以利用这一特点做隐式的强制类型转换，-0、*1、/1将其转换成Number。

%：取模运算（去余数）

<script type="text/javascript">
		var j=12+13;//25
		var m="12"+10;//1210拼接
		var i=10+true;//true对应的1 false 对应的是0 会自动转换
		//alert(i);
		var k=6-null;//null值对应的0，会自动转化
		//alert(k);
		
		var h=12*3;//36
		var  d=10/3;//正常整除取整数部分
		//alert(d);
		alert(10%3);// % 取余 取两个数相除的余数部分
	</script>

一元运算符

+（正号）、-（负号）：当对非Number类型的值进行运算时，会将这些值转换为Number然后进行运算。可以对一个其它数据类型使用+，来将其转换成Number，它的原理和Number（）函数一样

++ –

<script type="text/javascript">
		var i=23;
		/*
		 * 对于i的值没有影响
		 * i++ 变量在前，运算在后。表示先赋值后运算
		 * ++i 运算再前，变量再后；表是先运算后赋值
		 */
		//var j=i++;//i=24 j=23
		var j=++i;// i=24 j=24
		console.log("i="+i,"j="+j);
		
		var m="16" ;
		//var n=m--; //m =15 n=16
		var n=--m;//m=15 n=15
		console.log("m="+m,"n="+n);
		
	</script>

逻辑运算符

！：非运算符。取反操作。
&&：与运算符。
||：或运算符。
对于非布尔值的数据类型，会先将其转换成布尔值，再进行逻辑运算。返回的值：
在与运算中：如果第一个值为true，则返回第二个值；如果第一个值为false，则直接返回第一个值。
在或运算中：如果第一个值为true，则直接返回第一个值；如果第一个值为false，则直接返回第二个值

<script type="text/javascript">
		
		// &&两个条件必须同时满足
		console.log("true&&true="+(true&&true))//true
		console.log("true&&false="+(true&&false))//false
		//"aaa"当成boolean类型了运算，值为true
		console.log("aaa&&false="+("aaa"&&false))//false  
		
		// || 两边满足一个即可
		console.log("true||true="+(true||true))//true
		console.log("false||true="+(false||true))//true
		console.log("false||false="+(false||false))//false
		
		// ! 对原值取反
		console.log("!true="+(!true))//false
		console.log("!false="+(!false))//true
		// 0代表false 1代表true
		console.log("!0="+(!0))//true
	</script>

关系运算符

：大于号关系成立返回true，否则返回false
**>=**大于等于
<: 小于号关系成立返回true，否则返回false
<=:小于等于
对于非数字的类型，会先将其转换成数值在进行比较。
任何值和NaN做任何比较都是false。
如果关系运算符两侧都是字符串，则不会将其转换成数值，而是会比较Unicode字符编码，在比较字符编码时是一位一位进行比较的，如果两位一样，则比较下一位，所以可以借用它来对英文进行排序。

<script type="text/javascript">
		
		console.log(5>=3);//true
		
		//== 只比较值
		console.log("100"==100);//true
		//=== 先比较值 再比较类型
		console.log("100"===100);//false
	</script>

相等运算符

相等运算符“==”用来比较两个值是否相等。相等返回true，否则返回false。
当用相等运算符来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换成相同的类型，然后再比较。
注：1、undefined是衍生于null，所以这两个值做相等判断时，返回的是true
2、NaN和任何值做相等判断都为false，包括他本身。
可以通过isNaN()函数来检查一个值是否是NaN。

不相等运算符!=：用来比较两个值是否不相等。当用不相等运算符来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换成相同的类型，然后再比较。

全等===：判断两个值是否全等，与相等运算符类似，不同的是不会自动进行类型转换。

不全等！==：判断两个值是否不全等，与不相等运算符类似，不同的是不会自动进行类型转换。

相等运算符：

<script>
		var s="100";//String
		var n=100;//Number类型
		// == 只比较值，不比较类型   ===比较值和类型
		alert(s==n);//true
		alert(s===n);//false
	</script>

条件运算符（三元运算符）

语法：条件表达式？语句1：语句2；
首先对条件表达式进行求值，若为true则执行语句1，若为false则执行语句2.
如果条件表达式的求值结果是一个非布尔值，则会将其转换为布尔值，然后再运算

补充：代码块：
在JS中可以使用{}来为语句进行分组，同一个{}中的语句我们称为是一组语句，要么都执行，要么都不执行。一个{}中的语句我们称为一个代码块，在代码块的后边就不用加；了
JS中的代码块只有分组的作用，代码块中的内容在外部是完全可见的。

<script type="text/javascript">
		//  条件表达式? 表达式1：表达式2
		//当条件表达式为true时，返回表达式1；否则返回表达式二
		var res=13>12?"第一个数比较大":"第二个数比较大";
		alert(res);
	</script>

四、流程控制语句

条件判断语句

if语句：if（条件表达式）语句

<script type="text/javascript">
		var grade=75;
		if(grade>=60){
			alert("及格");
		}
</script>

if-else语句：if（条件表达式）{语句一；} else {语句二；}

	<script type="text/javascript">
		var grade=prompt("请输入您的考试成绩：");
		
		if(grade>=60){
			alert("及格");
		}else{
			alert("不及格");
		}
	</script>

补充：
prompt（）：可以弹出一个提示框，该提示框中会带有一个文本框，用户可以在文本框只能怪输入一段内容，该函数需要一个字符串作为参数，该字符串将会作为提示框的提示文字

if …else if …else if…else

<script type="text/javascript">
		var grade=prompt("请输入您的考试成绩：");
		if(grade>=0&&grade<=100){
			if(grade>=90){
				alert("优秀");
			}
			else if(grade>=80){
				alert("良好");
			}
			else if(grade>=70){
				alert("中等");
			}else if(grade>=60){
				alert("及格");
			}else if(grade<60){
				alert("不及格");
			}
		}else{
			alert("成绩无效");
		}
	</script>

判断偶数：

<script type="text/javascript">
		var num=prompt("请输入一个数值：");
		if(num%2==0){
			alert("偶数");
		}else{
			alert("奇数");
		}
	</script>

条件分支语句

switch:条件分支语句
switch(条件表达式){
case 表达式一：
语句一
break；
case 表达式二：
语句二
break；
case 表达式三：
语句三
break；
default：
语句
break；
}

	<script type="text/javascript">
		var num1=23,num2=5;
		var num=prompt("请选择您要执行的操作1.加法 2.减法 3.乘法 4.除法");
		console.log(num);
		//必须是整型或字符型的表达式
		switch(Number(num)){
			case 1: alert(num1+num2);break;
			case 2: alert(num1-num2);break;
			case 3: alert(num1*num2);break;
			case 4: alert(num1/num2);break;
			default: alert("输入非法");
		}
	</script>

循环语句

while：先判断再执行
while（条件表达式）{
语句；
}

<script type="text/javascript">
		var i=0;
		while(i<5){
			
			document.write("<h1>我是循环体"+i+"</h1>");
			i++;
		}
	</script>

do…while：先执行循环体，再进行判断
do{
}while（条件表达式）

<script type="text/javascript">
		var i=0;
		do{
			document.write("<h1>我是循环体"+i+"</h1>");
			i++;
		}while(i<0);
		/*
		 * do。。while和while都表示循环，do..while即使条件不满足，也会执行一次
		 */
	</script>

<script type="text/javascript">
		var i=0;
		do{
			document.write("<h1>我是循环体"+i+"</h1>");
			i++;
		}while(i<5);
		/*
		 * do。。while和while都表示循环，do..while即使条件不满足，也会执行一次
		 */
	</script>

for循环：
for（初始表达式；条件表达式；更新表达式）{
}

<script type="text/javascript">
		for (var i=1;i<=100;i++) {
			document.write(i+"&nbsp;")
		}
	</script>

<script type="text/javascript">
		for(var i=100;i>=1;i--){
			document.write(i+"&nbsp;");
		}
	</script>

break,continue

break跳出当前循环；continue跳出本次循环

break:

<script type="text/javascript">
		for(var i=1;i<=10;i++){
			if(i==5){
				//break 跳出当前循环 
				break;
			}
			document.write(i+"&nbsp;");// 1 2 3 4 
		}
	</script>

continue:

<script type="text/javascript">
		for(var i=1;i<=10;i++){
			if(i==5){
				//break 跳出当前循环   continue 跳出本次循环
				continue;
			}
			document.write(i+"&nbsp;");// 1 2 3 4 6 7 8 9 10
		}
	</script>

九九乘法口诀表：

<script type="text/javascript">
		for(var i=1;i<=9;i++){
			for(var j=1;j<=i;j++){
				
				document.write(j+"*"+i+"="+(i*j)+"\t");
			}
			document.write("<br>");
		}
	</script>

累加：

<script type="text/javascript">
		var num=prompt("请输入一个正整数：");
		num=Number(num);
		var sum=0;//和
		for(var i=1;i<=num;i++){
			sum+=i;
		}
		alert(num+"的累加是："+sum);
	</script>

五、函数

函数也是一个对象。函数中可以封装一些功能（代码），在需要时可以执行这些功能。函数中可以保存一些代码在需要是被调用。

创建函数对象

1、使用new关键字（很少用，几乎不用）

var fun=new Function();

调用函数对象：语法：函数对象（）

fun();

2、使用函数声明来创建一个函数：语法：
function 函数名[形参1，形参2，…]{
语句；
}

3、使用函数表达式创建一个函数
var 函数名=function（[形参1，形参2，…]）{ 语句； }

	<script type="text/javascript">
		//没有返回值的函数
		//无参的函数  没有参数 使用function来声明
		function test1(){
			alert("hello world!!!");
		}
		//函数必须被调用
		//test1();
		
		//有参的函数 参数的传递不需要写类型
		function add(num1,num2){
			alert(num1+num2);
		}
		//add(12,23);
		
		//有返回值的函数 有参的
		function sub(num1,num2){
			return num1-num2;
		}
		var res=sub(45,12);
		//alert("result: "+res);
		
		function test2(){
			return "hello world";
		}
		alert(test2());
		
		
	</script>

立即执行函数

立即执行函数：函数立即被调用，这种函数被叫做立即执行函数。立即执行函数往往只会执行一次。

(function(a,b){
            console.log("a="+a);
            console.log("b="+b);
        })(123,456);

方法

对象的属性值可以是任何数据类型，函数也可以称为对象的属性，如果一个函数作为一个对象的属性保存，那么我们称这个函数是对象的方法，调用这个函数就说调用对象的方法。

枚举：枚举对象中的属性，使用for… in语句
语法：for（var n in 对象名）{}

var obj={
    name:"周深",
    age: 29,
    address: "贵阳"
};
for(var n in obj){
    console.log("属性名："+n);
    console.log("属性值："+obj[n]); //调用属性值
}

作用域
作用域指一个变量的作用的范围。在JS中有两种作用域：全局作用域和函数作用域。

全局作用域
全局作用域：直接编写在script标签中的JS代码，都在全局作用域中。全局作用域在页面打开是创建，页面关闭时销毁。
在全局作用域中有一个全局对象window，他代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用。在全局作用中，创建的变量都会作为window对象的属性保存，创建的函数都会作为window对象的方法保存。

函数作用域
函数作用域：调用函数时创建函数作用域，函数执行完毕函数作用域销毁。
没调用一次函数就会创建一个新的函数作用域，它们之间是相互独立。
在函数作用域中可以可以访问到全局作用域变量，在全局作用域中无法访问到函数作用域的变量。
如果在函数中想访问全局中的变量，可以使用window。

如果在函数中没有使用var声明变量，则该变量为全局变量，在函数外也可以访问该变量！！！！
定义形参就相当于在函数作用域中声明了变量
如果定义了形参，在函数中声明变量没有使用var那么这个变量就不是全局变量。

this
解析器在调用函数时每次都会向函数内部传递一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式不同，this会指向不同的对象。
1、以函数的形式调用时，this永远都是window
2、以方法的形式调用时，this就是调用方法的那个对象。
3、使用构造函数的形式调用时，this就是新创建的那个对象
4、使用call（）和apply（）方法调用时，this就是传递的第一个参数

匿名函数：

	<script type="text/javascript">
		//匿名函数  无参的
		var test=function(){
					alert("hello world!!!");
				}
		//typeof  查看变量属于什么类型
		//在js里面，function也是一个数据类型
		//alert(typeof(test));//function类型
		//test();
		
		//有参的
		var add=function(num1,num2,num3){
			alert(num1+num2+num3);
		}
		//add(12,23,12);
		
		//有参的有返回值的匿名函数
		var mul=function(a,b){
			return a*b;
		}
		alert(mul(12,23));
		
	</script>

arguments对象：

<script type="text/javascript">
		function test(){
			alert(arguments[0]+" "+arguments[1]);
		}
		
		//test(22,23);
		
		function args(){
			//arguments.length 值得是实参的个数
			alert(arguments.length);
		}
		args();//0
		args(12);//1
		args(23,45);//2
		args(1,2,3);//3
	</script>

获取参数的最大值：

	<script type="text/javascript">
		
		//获取所有参数的最大值
		function getMax(){
			var max=arguments[0];
			for(var i=0;i<arguments.length;i++){
				//如果这个值比最大值还大，将它赋值给最大值
				if(max<arguments[i]){
					max=arguments[i];
				}
			}
			alert("最大值是："+max);
		}
		getMax(12,23,34,12,45,1,34,5);
		//思考？ 如何求最小值
	</script>

六、对象

不是以上五种基本数据类型的都为对象。基本数据类型都是单一的值，值和值之间没有任何联系。如果使用基本数据类型，我们所创建的变量都是独立的不能成为一个整体。
对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。
对象的分类：
1、内建对象：由ES标准中定义的对象，在任何的ES的实现中都可以使用
2、宿主对象：由JS的运行环境提供的对象，目前来讲主要是指由浏览器提供的对象，比如DOM、BOM
3、自定义对象：有开发人员自己创建的对象。

对象的基本操作
1、创建对象
使用new关键字调用的函数，是构造函数constructor，构造函数是专门用来创建对象的函数。
在对象中保存的值称为属性，向对象中添加属性。语法：对象.属性名=属性值。
读取对象中的属性：语法：对象.属性名
删除对象的属性：语法：delete 对象.属性名；

对象的创建：

<script type="text/javascript">
		//第一种创建方式
		var stu={
			name: "张三",
			age:23,
			address:"北京",
			sayHi: function(){
				alert("say Hi");
			}
			
		};//{} 表示对象[] 表示数组
	</script>

通过Object来创建对象：

<script type="text/javascript">
		//通过Object对象来创建
		var xiaoming=new Object();
		xiaoming.name="小明";
		xiaoming.age=23;
		xiaoming.address="上海";
		xiaoming.sayHi=function(){
			alert("hello world!!!");
		}
	</script>

通过构造方法来创建对象：

	<script type="text/javascript">
		//有参你的构造方法
		function Student(name){
			//将参数赋值给属性 this表示当前对象
			this.name=name;
			//普通方法
			this.hello=function(){
				alert(this.name+"hello world!!!");
			}
		}
		var xiaoming=new Student("小明");
		xiaoming.hello();
		
		var xiaohua=new Student("小花");
		xiaohua.hello();
	</script>

2、属性名和属性值
属性名：对象的属性名不强制要求遵守标识符的规范，但使用时尽量按照标识符的规范。如果要使用特殊的属性名，不能采用.的方式，需要使用另一种方式：对象[“属性名”]=属性值，读取也要采取这种方式。
使用[]这种形式去操作属性，更加的灵活，在[]中可以直接传递一个变量，这种变量值是多少就会读取那个属性。

属性值：JS对象的属性值可以是任意的数据类型。甚至也可以是一个对象。

in运算符：通过该运算符可以检查一个对象中是否含有某个属性。语法：“属性名” in 对象

3、基本数据类型和引用数据类型
JS的变量都是保存到栈内存的，基本数据类型的值直接在栈内存中存储。值与值之间是相互独立存在的，修改一个变量不会影响其他的变量。
对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间。而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一对象的引用，当一个通过变量修改属性值时，另一个也会受到影响。
当比较两个基本数据类型时，就是比较他们的值；而比较两个引用数据类型时，他是比较对象的内存地址，如果两个对象是一模一样但内存地址不同，会返回false。

对象字面量
可以使用对象字面量{}来创建对象。可以在创建对象时，直接指定对象中的属性。语法：{属性名：属性值，属性名：属性值；}，其中对象的属性名可加可不加双引号，但是如果要命名一些特殊的属性名最好加上双引号。属性名和属性值是一组一组的名值对结构，名和值之间使用：隔开多个名值对之间用，隔开，最后一个名值对就不用再加，了

对象的调用：

<script type="text/javascript">
		//第一种创建方式
		var stu={
			name: "张三",
			age:23,
			address:"北京",
			sayHi: function(){
				alert("say Hi");
			}
			
		};//{} 表示对象[] 表示数组
		//通过对象名打点调用
		console.log(stu.name+" "+stu.age+" "+stu.address);
		stu.sayHi();
		//通过[]方式来调用属性
		console.log(stu["name"]+" "+stu["age"]+" "+stu["address"]);
	</script>

循环遍历对象的每个属性：

	<script type="text/javascript">
		//第一种创建方式
		var stu={
			name: "张三",
			age:23,
			address:"北京",
			sayHi: function(){
				alert("say Hi");
			}
			
		};//{} 表示对象[] 表示数组
		
		for(var i in stu){
			console.log(stu[i]);
		}
	</script>

使用js实现全选全不选效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        select{
            margin-left: 100px;
        }
    </style>
</head>
<body>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<button type="button" onclick="selectAll()">全选</button>
<button type="button" onclick="unSelectAll()">全不选</button>
<button type="button" onclick="converSelectAll()">反选</button>
<script type="text/javascript">
    var inputs =  document.getElementsByTagName("input");
    function selectAll(){
        for(var i = 0;i<inputs.length;i++){
            inputs[i].checked = true;
        }
    }
    function unSelectAll(){
        for(var i = 0;i<inputs.length;i++){
            inputs[i].checked = false;
        }
    }
    function converSelectAll(){
        for(var i = 0;i<inputs.length;i++){
            if(inputs[i].checked){
                inputs[i].checked = false;
            }else{
                inputs[i].checked = true;
            }
        }
    }

</script>
</body>
</html>

七、数组

数组的基本操作

数组（Array）：也是一个对象。
1、创建数组对象：

var arr=new Array();

向数组中添加元素

arr[0]=10

读取数组中的元素：

console.log(arr[0]);

获取连续数组的长度：

console.log(arr.length);

修改length的长度：如果修改后的长度大于原长度，则多出部分会空出来，如果修改后的长度小于原长度，则多出的元素会被删除。

向数组的最后一个位置添加元素：

arr[arr.length]=20;

2、使用字面量创建一个数组，可以在创建时就指定数组中的元素。

var arr=[1,2,3,4];

使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递元素之间用，隔开

var arr=new Array(1,2,3);

数组的方法

push（）：向数组的末尾添加一个或多个元素，并返回数组的长度

var result=arr.push("周深",29,"贵阳");
console.log(arr);
console.log("result="+result);

pop()：可以删除数组最后一个元素，并将删除的元素作为返回值返回

unshift（）：向数组的开头添加一个或多个元素，并返回数组的长度。其他元素的索引会依次调整。

shift（）：可以删除数组第一个元素，并将删除的元素作为返回值返回

forEach（）：用来遍历数组（只支持IE8以上的浏览器）forEach（）方法需要一个函数作为参数。像这种函数，由我们自己创建，但是不由我们调用的，我们称之为回调函数。数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以用来定义形参，来读取这些内容。

<script type="text/javascript">
		var arr=[12,23,234,43,23,56,27];
		// for in循环
		for(var i in arr){
			console.log(arr[i]);
		}
	</script>

var arr=[1,2,3,4];

arr.forEach(function(value,index,obj){
    console.log();
})

浏览器会在回调函数中传递三个参数：
第一个参数：就是当前正在便利的元素
第二个参数：就是当前元素的索引
第三个参数：就是正在遍历的数组

slice（）：从数组中提取指定元素

arr.slice(start,end);

该方法不会影响到原数组，而是将截取到的元素封装到一个新的数组中并返回。包含开始索引，不包含结束索引索引也可以是负值，如果是负值，则表示从后往前计算。

splice（）：用于删除数组中的指定元素，并添加新的元素
使用该方法会影响到原数组，会将指定元素从原数组中删除，并将删除的元素作为返回值返回.第二个参数表示删除元素的个数，第三个元素及以后可以传递一些新的元素，这些元素将会自动插入到开始位置索引的前边

arr.splice(start,n,"a");

concat（）：连接两个或多个数组，并将新的数组返回（该方法不会影响到原数组）

arr.concat(arr2);

join（）：可以将数组转换成一个字符串，并将新的字符串返回（该方法不会影响到原数组）可以在join（）中指定一个字符串作为参数，这个字符串将会作为数组中元素之间的连接符，如果不指定连接符，则默认为，作为连接符

arr.join("-");

reverse（）：用来反转数组（该方法会直接影响到原数组）

sort（）：用来对数组中的元素进行排序（该方法会直接影响到原数组）会默认按照Unicode编码进行排序。如果为纯数字使用sort方法进行排序可能会发生错误，所以需要自己制定排序。规则：
在sort（）中添加一个回调函数，来制定排序规则。浏览器会根据回调函数的返回值来决定元素的排序：
如果返回一个大于0的值，则元素会交换位置
如果返回一个小于0的值，则元素不会交换位置
如果返回0，则默认元素相等，也不交换位置

如果需要升序排列，则返回a-b；降序返回b-a：

var arr=[11,4,6,2,8,5];

arr.sort(function(a,b){
    return a-b;
})
console.log(arr);

函数对象的方法
call（）和apply（）：需要通过函数对象来调用，当对函数调用call（）和apply（）都会执行调用函数。在调用call（）和apply（）可以将第一个对象指定为第一个参数，此时这个对象将会成为函数执行的this；
call（）方法可以将实参在对象之后依次传递
apply（）方法需要将实参封装到一个数组中统一传递
arguments
arguments是一个类数组对象，他也可以通过索引来操作数据，也可以获取长度，在调用函数时，我们所传递的实参都会在arguments中保存。arguments.length可以用来获取实参的长度。也可以使用arguments[]来使用实参。其中还有个属性叫callee，这个属性对应一个函数对象，就是当前正在使用的函数的对象。

数组的常用方法：

<script type="text/javascript">
		var arr=[23,34,67,22,13,56,36,27];
		console.log(arr.length);
		//indexOf()   返回指定元素的索引，当没找到时，返回-1
		console.log(arr.indexOf(67));//2
		console.log(arr.indexOf(66));//-1
		
		//concat()  拼接2个数组,返回的时新数组，原数组不会发生改变
		var arr1=[1,2,3,4,5];
		var arr2=[6,7,8];
		console.log(arr1.concat(arr2));
		console.log(arr1);
		console.log(arr2);
		
		//join()  将数组元素拼接成字符串
		console.log(arr.join());
		console.log(arr.join("-"));
		
		//pop() 删除并返回数组的最后一个元素  
		console.log(arr1.pop());
		console.log(arr1);//[1,2,3,4]
		
		//push()  向末尾添加一个或多个元素，并返回新的长度
		console.log(arr1.push(5,6,7));//7
		console.log(arr1);
		
		//slice()  从数组中提取一个子集
		console.log(arr1.slice(2,6));
		
		//array.splice(index,howmany,item1,item2……,itemX)
		//再数组里面添加或删除指定的一个或多个元素
		//console.log(arr.splice(1,3));
		//console.log(arr.splice(1,3,100,200,300));
		console.log(arr);
		
		//sort() 排序
		
		//console.log(arr.sort());
		//降序排序
		//console.log(arr.sort(function(a,b){return b-a}));
		//升序排序
		//console.log(arr.sort(function(a,b){return a-b}));
		
		//reverse()  数组反转
		console.log(arr.reverse());

	</script>

常用方法2：

<script>
		//shift() 吧数组中的第一个元素删除，并返回第一个元素
		var arr=[1,2,3,4,5];
		//console.log(arr.shift());
		console.log(arr);
		//unshift() 往数组的开头添加一个或多个元素，返回的是添加后的长度
		console.log(arr.unshift(-1,0));//7
		console.log(arr);
		
	</script>

Date对象

1、创建Date对象：
在JS中使用Date对象来表示一个时间。
如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间：

var d=new Date();

如果想要创建一个指定的时间对象，需要在构造函数中传递一个表示时间的字符串作为参数

var d2=new Date("05/11/1999 00:00:00");

2、Date方法：
getDate（）：获取当前日期对象是几日。

getDay（）：获取当前日期是周几。会返回一个0-6的值，0表示周日

getMonth（）：获取当前日期是月份，0表示1月，1表示2月

getFullYear（）：获取当前日期对象的年份

getTime（）：获取当前日期对象的时间戳。时间戳是从格林威治标准时间的1970年1月1日，0时0分0秒到当前日期所花费的毫秒数（1秒=1000毫秒）
计算机底层在保存时间时使用的都是时间戳

Date.now（）：获取当前的时间戳，利用时间戳来测试代码的执行的性能。

Math
Math和其他的对象不同，他不是一个构造函数，他属于一个工具类不用创建对象，他里边封装了数学运算相关的属性和方法。
比如：Math.PI表示圆周率
Math的方法：
Math.ceil（）：可以对一个数进行向上取整

Math.floor（）：可以对一个数进行向下取整

Math.round（）：可以对一个数进行四舍五入

**Math.random（） **：可以用来生成一个0-1之间的随机数；如果想生成0-10之间的随机数可以直接乘10：

Math.random()*10

如果想生成0-10之间的整数可以：

Math.round(Math.random()*10);

如果想生成x-y之间的随机数：

Math.round(Math.random()*(y-x)+x);

max()：最大值
min（）：最小值
pow（x，y）：返回x的y次幂
sqrt（）：用于对一个数进行开方计算

包装类
在JS中提供了三种包装类：
String（）：可以将基本数据类型的字符串转换为String对象
Number（）：可以将基本数据类型的数字转换成Number对象
Boolean（）：可以将基本数据类型的布尔值转换成Boolean对象
注：我们在实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象在做一些比较时可能会带来一些错误
字符串的方法
在计算机底层字符串是以字符数组的形式储存的。
比如一个字符串“Hello”，在计算机底层：[“H”,“e”,“l”,“l”,“o”]

字符串的方法：
1、charAt（）：可以返回字符串中指定位置的字符，根据索引获取指定的字符。str.charAt(6);
2、charCodeAt（）：获取指定位置字符的字符编码（Unicode编码）str.charCodeAt(6)
3、formCharCode（）：根据字符编码去获取字符。

String.formCharCode(200);

4、concat（）：可以连接两个或多个字符串，作用和+一样（不会对原字符串产生影响）

5、indexof（）：可以检索一个字符串是否含有指定内容，并返回该内容第一次出现的索引，如果没有找到则返回-1.第二个参数表示从第几个位置开始查找。str.indexof(“a”,3);

6、lastIndexOf（）：从后往前找，和上面indexof类似。

7、slice（）：可以从字符串中截取制定的内容。不影响原字符串，将截取内容返回。参数：包括开始位置不包括结束位置。

8、substring（）：可以用来截取一个字符串。第一个参数表示开始位置截取，第二个参数表示截取的结束位置，包括开始不包括结束位置。与slice不同的是，该方法不可以传递负数，如果传递了负数则默认为0，如果第二个参数值小于第一个参数，则会自动调整位置。

9、substr（）：用来截取字符串。第一个参数表示截取的开始位置，第二个参数表示截取的字符串的长度。

10、split（）：可以将一个字符串拆分为一个数组。参数：需要一个字符串作为参数，将会根据该字符串进行拆分。如果传递的参数为空串，则会将原字符串中的每一个字符拆分为数组的元素。

11、toUpperCase（）：将字符串转换为大写

12、toLowerCase（）：将字符串转换为小写

正则表达式

创建正则表达式
1、创建正则表达式对象：
语法：
var 变量=new RegExp（“正则表达式”，“匹配模式”）；
var var=new RegExp(“a”);这个正则表达式可以来检查一个字符串中是否含有a。
在构造函数中可以传递第二个参数用来表示匹配模式：
其中i表示忽略大小写，g表示全局匹配模式

正则表达式的方法：
test（）：使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，如果符合返回true

2、使用字面量来创建正则表达式：
语法：var 变量=/正则表达式/匹配模式

正则语法

1、使用|表示或的意思：

reg=/a|b|c/;

2、使用[]里的内容也是或的意思：[ab]表示a或b；[A-Z]表示任意大写字母

reg=/[a-z]/;

3、检查一个字符串中是否含有abc或adc或aec

reg=/a[bde]c/;

4、[^ ]表示除了后边的内容

reg=/[^0-9]/; //除了数字

字符串和正则相关

split（）：可以将正则表达式作为参数进行字符串的拆分：

var str="1a2b3d4e";
var result=str.split("/[A-z]/");

search（）：可以将正则表达式作为参数进行指定字符串的搜索

match（）：可以将正则表达式作为参数

电子邮件的正则表达式

规则：
任意字母下划线 .任意字母下划线（可出现也可不出现） @ 任意字母数字 .任意字母（2-5位） .任意字母（2-5位）（可有可无）

\w{3,}  (\.\w+)*  @  [A-z0-9]+   (\.[A-z]{2,5}){1,2}

var emailReg=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;

常用的正则表达式大全可以在网上搜下

八、DOM

DOM的简介

DOM：Document Object Model 文档对象模型(用来操作网页的)
文档：一个网页就是一个文档
对象：表示将网页的每一个部分都转换为一个对象。
模型：使用模型来表示对象之间的关系

节点：是构成网页的最基本的组成部分

分为四类：
1、文档节点：整个html文档
2、元素节点：html文档中的html标签
3、属性节点：元素的属性
4、文本节点：html标签中的内容

文档节点：浏览器已经为我们提供文档节点对象，这个对象是window属性，可以在页面中直接使用，文档节点代表的使整个网页。
例如获取button对象：

<body>
    <button id="btn">我是一个按钮</button>
    <script>
        var btn=document.getElementById("btn");//获取button对象
        btn.innerHTML="I'm Button";//修改button中的文字
    </script>
</body>

获取元素的节点：
1、getElementById（）：通过id属性获取一个元素节点的对象
2、getElementsByTagName（）：通过标签名获取一组元素节点对象
3、getElementsByName（）：通过name属性获取一组元素节点对象。

节点类型：

<body>
		<div id="demo">
			
		</div>
	</body>
	<script type="text/javascript">
		
		var obj=document.getElementById("demo");
		alert(obj.nodeType);//1 元素节点
	</script>

childNodes属性：

<body>
		<div id="aa">
			<p>段落1</p>
			<p>杜纳罗2</p>
			<h1>标题</h1>
		</div>
	</body>
	<script type="text/javascript">
		var obj=document.getElementById("aa");
		var arr=obj.childNodes;
		for(var i in arr){
			//输出所有子标签中的元素标签
			if(arr[i].nodeType==1){
				console.log(arr[i].nodeName);
			}
		}
	</script>

firstchild节点和lastchild节点：

<body>
		
		<div id="demo">
			<div>
				节点1
			</div>
			<div>
				节点2
			</div>
			<div>
				节点3
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var obj=document.getElementById("demo");
		console.log("大儿子： "+obj.firstChild);
		console.log("大儿子： "+obj.firstChild.nodeType);
		
		console.log("小儿子： "+obj.lastChild);
		console.log("小儿子： "+obj.lastChild.nodeType);
	</script>

获取parentNode

<body>
		<div id="demo">
			
		</div>
	</body>
	<script type="text/javascript">
		var obj=document.getElementById("demo");
		console.log("父节点是："+obj.parentNode);
		console.log("父节点类型是："+obj.parentNode.nodeType);
	</script>

事件

就是文档或浏览器窗口中发生的一些特定的交互瞬间。用户和浏览器之间的交互行为。
1、我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行。但这种写法不方便维护，不推荐使用！

<button id="btn" ondblclick="alert('讨厌，你点我干嘛？');">我是一个按钮</button> <!--双击是出现alert警示-->

2、可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用。

        //获取对象
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            alert('讨厌，你点我干嘛？');
        }

像这种为单击事件绑定的函数称为单击响应函数

文档的加载

浏览器加载页面的顺序是自上向下的顺序，读取一行运行一行。如果将script标签的内容写到上面去，在代码执行时，页面还没有加载。将js代码编写到页面的下面是为了可以在页面加载完毕后再执行js代码。

如果想把代码卸载head标签里但又不想先执行，可以使用onload事件。
onload事件会在整个页面加载完成之后才触发。
为window绑定一个onload事件，该事件对应的响应函数会在页面加载完成后执行，这样就可以确保我们的代码执行时所有的DOM对象已经加载完毕了。

DOM 查询

1、通过document对象调用来获取元素的节点：
getElementById（）：通过id属性获取一个元素节点的对象
getElementsByTagName（）：通过标签名获取一组元素节点对象
getElementsByName（）：通过name属性获取一组元素节点对象。

2、通过具体的元素节点调用，获取元素的子节点：
getElementsByTagName（）：返回当前节点指定标签名后代节点
childNodes：是属性，表示当前节点的所有子节点。会获取包括文本节点在内的所有节点，根据DOM标签间空白也会被当成文本节点
注意：在IE8及以下的浏览器中，不会将空白当成子节点

children：是属性，可以获取当前元素的所有子元素。

firstchild：是属性，表示当前节点的第一个子节点（包括空白文本节点！）

firstElementChild：获取当前元素的第一个子元素。（不支持IE8及以下浏览器，不推荐使用）

lastchild：是属性，表示当前节点的最后一个子节点

3、通过具体的元素节点调用，获取元素的父节点和兄弟节点
parentNode：是属性，获取当前节点的父节点

previousSibling：是属性，获取当前节点的前一个兄弟节点（包括空白文本节点！）

previousElementSibling：获取当前节点的前一个兄弟元素。（不支持IE8及以下浏览器，不推荐使用）

nextSibling：是属性，获取当前节点的后一个兄弟节点（包括空白文本节点！）

innerHTML：获取到元素内部的文本内容（包括标签）
innerText：获取到元素内部的文本内容，和上面类似，不同的是会自动去除掉html标签

4、DOM查询的其他方法：
document.body：是属性，在document中有一个属性body，他保存的就是body的引用。

document.documentElement:获取html根标签

document.all：代表页面中的所有元素（html、body、head等）

getElementsByClass（）：根据元素的class属性值获取一组元素节点对象，但是该方法不支持IE8及以下的浏览器

querySelector（）：需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象。（IE8既然好使）。使用该方法总会返回唯一的一个元素如果满足条件的元素有多个，那么它只会返回第一个

var li=document.querySelector(".box1 li");

querySelectorAll（）：与上面类似，不同的是他会将符合条件的元素封装到一个数组中返回。即使符合条件的元素只有一个，也会封装到数组中返回。

DOM的增删改
document.createElement（）：可以用于创建一个元素节点对象。它需要一个标签名作为参数，将根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回。

document.createTextNode（）：可以用来创建一个文本节点对象，它需要一个文本内容作为参数，将根据该文本内容创建文本节点，并将创建好的新的节点返回。

appendChild（）：向父节点中添加一个新的子节点。
用法：父节点.appendChild（子节点）；

insertBefore（）：在指定的子节点前面插入新的子节点
语法：父节点.insertBefore(新节点，旧节点)

replaceChild（）：可以使用指定的子节点替换已有的节点。
语法：父节点.replaceChild(新节点，旧节点)

removeChild（）：可以删除一个子节点
语法：父节点.removeChild(子节点)；或
子节点.parentNode.removeChild(子节点)

使用innerHTML也可以实现DOM增删改的相关操作：（例如添加一个li）

city.innerHTML+="<li>广州</li>";

一般是两种方式结合使用：(推荐使用这种方式！)

var li=document.createElement("li");
li.innerHTML="广州";
city.appendChild(li);

confirm（）：用于弹出一个带有确认和取消按钮的提示框，需要一个字符串作为参数，该字符串将会作为提示文字显示出来，用户点确认则返回true，点取消则返回false

通过id来获取标签对象：

<body>
		<div id="demo">
			aaaa
		</div>
	</body>
	<script type="text/javascript">
		var obj=document.getElementById("demo");
		console.log("节点类型："+obj.nodeType+" 节点名称："+obj.nodeName);
	</script>

通过标签名获取元素对象：

<body>
		<div id="aa">
			
			<ul id="uls">
				
				<li>英雄本色</li>
				<li>红海行动</li>
				<li>三少爷的剑</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var uls=document.getElementById("uls");
		var lis=document.getElementsByTagName("li");
		for(var i in lis){
			console.log(lis[i].firstChild.nodeValue+" "+lis[i].firstChild.nodeType);
			
		}
	</script>

通过类名获取元素对象：

<body>
		<div id="aa">
			
			<ul id="uls">
				
				<li class="movie">英雄本色</li>
				<li class="movie">红海行动</li>
				<li class="movie">三少爷的剑</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		//返回值是数组 一个class对应多个元素对象
		var lis=document.getElementsByClassName("movie");
		for(var i in lis){
			console.log(lis[i].firstChild.nodeValue+" "+lis[i].firstChild.nodeType);
			
		}
	</script>

设置属性和获取属性值：

<body>
		<p id="pp" title="HELLO">hello hello hello </p>
	</body>
	<script type="text/javascript">
		var obj=document.getElementById("pp");
		console.log(obj.getAttribute("title"));//HELLO
		
		console.log(obj.getAttribute("name"));//null
		obj.setAttribute("name","zhangsan");
		console.log(obj.getAttribute("name"));//zhangsan
		obj.setAttribute("name","lisi");
		console.log(obj.getAttribute("name"));//lisi
	</script>

使用DOM操作CSS

语法：元素.style.样式名=样式值

操作css:

	<style type="text/css">
		#div1{
			width:200px;
			height:200px;
			background-color: yellow;
		}
	</style>
	<body>
		<div id="div1" onclick="change();">
			aaa
		</div>
	</body>
	<script>
		function change(){
			var obj=document.getElementById("div1");
			obj.style.backgroundColor="green";
			
		}
	</script>

标签中间的文本：

<body>
		<p id="pp">
			标题
		</P>
	</body>
	<script type="text/javascript">
		var obj=document.getElementById("pp");
		console.log("innerHTML"+obj.innerHTML);
		console.log("innerText"+obj.innerText);
		
		//obj.innerHTML="<h1>hello</h1>";//标签有修饰效果
		obj.innerText="<h1>world</h1>";//标签没有修饰效果，直接显示
	</script>

九、BOM

BOM：浏览器对象模型。BOM可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作
BOM对象有：
window：代表的是整个浏览器窗口，同时window也是网页中的全局对象

Navigator：代表当前浏览器信息，通过该对象可以识别不同的浏览器

Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录。由于隐私的原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效

Screen:代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关信息。

这些对象（除了window）在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用,例如：window.navigator或location
定时器
如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用。

setInterval（）：定时调用，可以将一个函数每隔一段时间执行一次。
参数：
1、回调函数，该函数每隔一段时间调用一次
2、每次调用间隔的时间，单位是毫秒
返回值：返回一个Number类型的数据，这个数字用来作为定时器的唯一标识。

clearInterval（）：可以用来关闭一个定时器，该方法需要传递定时器的唯一标识作为参数，这样将关闭标识对应的定时器。
clearInterval（）可以接收任意参数，如果参数是一个有效的定时器标识，则停止对应的定时器，如果参数不是一个有效的标识，则什么也不做。
练习：定时器数字从1-7，每一秒变一次

<script>
    var num=1;
    var timer=setInterval(function(){
        count.innerHTML=num++;
        if(num ==8){
            clearInterval(timer);
        }
    },1000);
</script>
<body>
    <h1 id="count"></h1>
</body>

延时调用
setTimeout（）：延时调用。延时调用一个函数不马上执行，而是隔一段时间后再执行，而且只会执行一次
延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次。

clearTimeout（）：用来关闭一个延时调用。

Location对象：

<script type="text/javascript">
		function toUrl(){
			location.href="http://www.baidu.com";
		}
		function tihuanUrl(){
			location.replace("http://www.baidu.com");
		}
		function reload(){
			window.reload();
		}
	</script>
	<body>
		
		<button onclick="toUrl()">百度一下</button>
		<button onclick="tihuanUrl()">替换百度</button>
		<button onclick="reload()">重载</button>
	</body>

History对象：

	<script type="text/javascript">
		function qianjin(){
			history.forward();
		}
		function houtui(){
			history.back();
		}
		function tiaozhuan(){
			history.go(-2);
		}
	</script>
	<body>
		
		<a href="http://www.baidu.com">百度一下</a>
		
		<a href="http://www.jd.com">京东</a>
		
		<button onclick="qianjin()">前进</button>
		<button onclick="houtui()">后退</button>
		<button onclick="tiaozhuan()">跳转</button>
	</body>

Navigation对象：

<script type="text/javascript">
		document.write("浏览器名称："+navigator.appName+"<br>");
		document.write("浏览器版本："+navigator.appVersion+"<br>");
		document.write("用户代理报头："+navigator.userAgent+"<br>");
		document.write("平台："+navigator.platform+"<br>");
	</script>

十、JSON

JSON：就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要是用来数据的交互。
JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须要加双引号，其他的和JS语法一致

JSON的分类：
1、对象{ }
2、数组 [ ]

JSON中允许的值：字符串、数值、布尔值、null、对象、数组

将JSON字符串转换为JS中的对象：
在JS中，提供了一个工具类叫JSON，这个对象可以将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON

JSON.parse（）：可以将JSON字符串转换为JS对象。他需要一个JSON字符串作为参数

JSON.stringify（）：可以将JS对象转换为JSON字符串，需要一个JS对象作为参数

eval（）：这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回。如果这个字符串中含有{ },它会将{ }当成是代码块，如果不想当成代码块，需要将字符串前后各加“（）”。尽量在开发中不要使用，首先它的执行性能比较差，还有安全隐患。