JS学习笔记

一. javascript简介

javascript三个部分组成
ECMAScript 标准
DOM 网页
BOM	浏览器

二. 输出

1.定义变量方式

(1).const 常量块作用域

(2).let 变量块作用域

(3).var 变量全局作用域

2.格式化输出

const word1 = "Hello";
const word2 = "World";

console.log(`${word1},${word2}`);
console.log('%s,%s',word1,word2);

3.一些基本的操作

1
2
3

document.write("Hello"); 输出到body中
alert("Hello!");	弹窗
prompt()输入框函数

三. 数据类型

typeof检查一个数据类型

1.String

1	let str = "Hello World!";

2.Number

let num = 123;
最大值是 Number.MAX_VALUE 超过了最大值则是 Infinity(正无穷)
大于0的最小值是 Number.MIN_VALUE 
不是一个数字 NaN

0.1+0.2=0.300000004
所以不要用js进行精确要求高的运算

3.Boolean

1	true false

4.Null

1 2	typeof null 返回object null表示一个空的对象

5.Undefined

1	声明一个变量不赋值则是undefined

6.Object

7.强制转化

(1).字符串

1
2
3

toString() 转化成字符串方法(null和undefined不行)
String() 转化成字符串函数(null和undefined行)
对于字符串和数字String函数会自动转化成字符串,而null和undefined会转化为"null"和"undefined"

(2).数字

Number()函数
字符串 and undefined转化为NaN
空字符串或空格转化为0
null 0 
true 1 
false 0

下面的方法可以对付"234px"这种
parseInt()
parseFloat()

16进制 0x
8进制 0
2进制 0b
parseInt(a,进制)

(3).Boolean

1 2	Boolean() 除了0 NaN 空字符串 null undefined都是true

四.对象

let obj = new Object();
let obj = {name:"ByLorin"}

obj.name = "ByLorin";
obj.maths = 123;
obj.temp = 1;
obj["temp"] = 123;

delete obj.temp;
console.log(obj);

1.方法


obj.getName = function(){
    
}

2.枚举


for (let i in obj) {
    console.log(i);
    console.log(obj[i]);
}

3.工厂模式

function createPerson(name, maths, temp) {
    let obj = new Object();
    obj.name = name;
    obj.maths = maths;
    obj.temp = temp;
    obj.fun = function () {
        alert(this.name);
    };
    return obj;
}
console.log(createPerson(1, 2, 3), createPerson(2, 3, 4));

4.构造函数

1.立刻创建一个新的对象
2.将新建对象设置为函数中的this,在构造函数中可以使用this来引用新的对象
3.执行函数的代码
4.将对象最为返回值返回

instanceof 检测一个对象是否是一个类的实例
所有的对象都是Object的后代

一.
function Person(name){
    this.name = name;
    this.fun = function () {
        alert(this.name);
    };
}
let per = new Person(123);
console.log(per);
二.
构造函数会为每一个对象创建不同的方法,这没有必要
function Person(name){
    this.name = name;
    this.fun = fun;
}
function fun () {
        alert(this.name);
    };

5.原型对象

上面的定义在全局作用域很不安全
 
 我们创建的每一个函数解析器都会增加prototype属性
 这个属性对应一个对象,这个对象就是我们所谓的原型对象
 如果作为普通函数调用,没作用
 当函数以构造函数调用时,它所创建的对象都会有一个隐藏的属性指向prototype
 可以通过__protot__来访问该属性
 Person.prototype == person.__protot__
 
 原型对象是一个公共区域,所有的类的实例都可以访问到这个原型对象
 访问对象的方法或者属性,对象自己找,找不到去原型对象找
function MyClass() {}
MyClass.prototype.a = 123;

let mc = new MyClass();
console.log(mc.a);

检测对象有没有属性
"a" in mc ->true
in原型里有也返回true
hasOwnProperty自己有才返回true

原型对象也是对象,也有原型
当我们使用一个对象的属性或方法时,会现在自身中寻找,
自身中如果有,则直接使用,
如果没有则去原型对象中寻找,如果原型对象中有,则使用
如果没有则去原型的原型中寻找,直到找到 Object象的原型,
Object对象的原型没有原型,如果在Objetct原型中依然没有找到,则返回undefined

console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));
原型的原型里有

(1).toString()

function Person(name, age) {
    this.name = name;
    this.age = age;
}
let per = new Person("lorin", 19);
console.log(per);

修改原型中的toString方法
per.prototype.toString = function {
    return "test";
}

6.三种对象

(1).内建对象

- 数组

数组 Array 性能比普通对象要好,我们在开发中常用数组来储存一些数据
let arr = new Array();
let arr[];

方法:
	push向末尾添加一个或多个元素,返回新数组的长度
    pop 删除末尾的元素,返回被删除的元素
    unshift 向开始添加一个或多个元素,返回新数组的长度
    shift 删除开始的元素,返回被删除的元素
    
	forEach: 
		第一个参数是value
        第二个参数是下标
        第三个是数组对象
    arr.forEach(function (value, index,arr_obj) {
    console.log(index);
});

	slice:
		可以从数组提取制定元素,类似python的切片
		arr.slice(0, 2)
	splice:
		删除数组的制定元素,会影响远数组,并将删除的元素返回
		第一个开始位置的index,
        第二个为删除的数量,
        第三个参数及以后可以传递新的元素会自动插入index之后
		arr.splice(0,2)
	concat:
		连接两个或多个数组,并将新数组返回
		不会影响远数组
	join:
		python一样
    sort:
		使用unicode进行排序,对数字进行排序可能会错误
			arr.sort(function (a, b) {});
		返回大于0元素交换位置
        小于0元素位置不变
        等于0元素相等,位置不变
            1.
            arr.sort(function (a, b) {
                if (a < b) {
                    return -1;
                }
                if (a > b) {
                    return 1;
                }

                return 0;
            });
            2.
            arr.sort(function (a, b) {
                return a - b;
            });
            3.
            arr.sort((a, b) => a - b);

            }

    reverse:

-Date

let date1 = new Date("12/03/2016 11:10:30");
console.log(date1);
格式:月份/日/年 时:分:秒

方法:
	getDate
    获取当前日期是几日
    
    getDay
    获取星期几 0-6周日开始
    
    getMonth
    获取月份 0-11一月开始
    
    getFullYear
    获取年份
    
    getTime
     time = Date.now();
    时间戳

-Math

PI 圆周率
abs绝对值
ceil 向上取整
floor 向下取整
round 四舍五入
random 随机数0-1
		Math.round(Math.round() * 10);

max
min
pow
sqrt

(2).宿主对象

(3).自定义对象

五.函数

function 函数名(){

}
立即执行函数
(function () {
    console.log(1);
})();

function fun() {
    alert(this);
}

fun.call();
fun.apply();
fun();
// 都会调用函数执行,调用call或者apply可以制定一个对象为第一个参数
// 这个时候对象会成为函数执行的this
// call形参依次传递 apply封装成数组 

在调用函数的时候,浏览器每次都会传递两个隐含的参数
1.this
2.arguments
类数组对象
传递的实参在arguments中保存,arguments.length可以获取实参的长度,也可以获取实参
属性callee对应函数对象

六.作用域

1 2	function()会在所有代码前被声明 var 也会,但是不会赋值

七.this

调用函数都会传递this
this指向的是一个对象
这个对象我们称为函数执行的上下文
根据函数的调用方式不同,this会指向不同的对象

1.函数形式调用,this指向windows
2.方法形式调用,this指向调用方法的对象
3.构造函数调用后,this就是新创建的那个对象
4.call apply调用,this是制定的对象
function fun() {
    console.log(this.name);
}
let obj = { name: "ByLorin", getName: fun };
let obj2 = { name: "ByCode", getName: fun };
obj.getName();
obj2.getName();

八.垃圾回收

当一个对象没有任何的变量或者属性对它进行引用,我们永远无法操作该对象,这种对象就是垃圾
JS中自动的垃圾回收机制,会自动将这些垃圾对象从内存从销毁
我们不需要也不能进行垃圾回收的操作

我们只要把不要用的对象设置为null
let obj = new Object();

obj = null

九.字符串

let str = "Hello World!";
在底层是以字符串数组储存的
length属性

方法:
	charAt();
	获取指定位置的字符
    
    charCodeAt();
	获取指定位置unicode
    
    fromCharCode(); 
    unicode 到字符
    
    concat();连接字符串
	indexOf();有该内容会返回第一次出现的索引
    		  如果没有则返回-1
			  第二个参数为开始查找的位置
    lastIndexOf()
			从后往前找其他和上面一样
    slice()&substring()截取
    
    substring()不接受负值,-值变为0

	split()
    toUpperCase()
    toLowerCase()

10.正则表达式

let reg = new RegExp("正则表达式","匹配模式");
let reg = /正则表达式/匹配模式
i 忽略大小写
g 全局匹配

正则表达式
[^]除了
/^/开头
/$/结尾
 
正则表达式的方法:
test()
使用这个方法可以用来检查一个字符串是否符合正则表达式的规则
如果符合则返回true,否则返回fa1se


split
replace
search
match

练习:
	手机号
    1 3 467891234
	/^1[3-9][0-9]{9}$/
        
    /^\s*|\s*$/
	开头或结尾的空格
    
    邮箱
  	^\w{3,}(\.\w+)*@[A-z0-9]+(\[A-z]{2,5}){1,2}$

11.DOM

1.简介

D-document
O-Object
M-Model

let btn = document.getElementById("btn");
btn.innerHTML = "Hello World!";

2.事件

let btn = document.getElementById("btn");
btn.click = function () {
                //
};
点击事件
onclick="js代码"
双击事件
ondbclick
鼠标移动
onmousemove
页面记载完成

3.文档的加载

自上而下加载

页面记载完成
window.onload = function(){
}

4.获取元素节点

1.文档
getElementById
getElementsByTagName
getElementsByName

innerHTML用于获取元素内部的HTML代码
对于自结束标签,这个属性没有意义

innerText获取内部的文本内容,会去除HTML代码

如果需要读取元素节点属性
直接使用元素,属性名
例子:元素.id元素,name元素.value

注意:class属性不能采用这种方式
读取class属性时需要使用元素.className


2.元素节点的子节点
方法
(1).getElementsByTagName
let city = document.getElementById("city");
let lis = city.getElementsByTagName("li");
属性
(2).childNodes
会获取文本节点在内的全部子节点
标签间的空白也会计算
(3).firstchlid
第一个子节点
(4).lastchlid
最后一个子节点
(5).children
子元素
(6).firstElementChild;
第一个子元素
(7).lastElementChild;
最后一个子元素

3.父节点或者兄弟节点
parentNode
父节点
previousSibling
前一个兄弟节点
nextSibling
后一个兄弟节点

previousElementSibling
前一个兄弟元素

4.补充
document.body
document.documentElement
document.all
document.getElementsByClassName

css选择器
document.querySelector
document.querySelectorAll

5.增删改

// 添加一个li元素
let li = document.createElement("li");
// 添加一个文本节点
let gzText = document.createTextNode("广州");
// 把文本设置成li的子节点
li.appendChild(gzText);

以上可以最优成:
let li = document.createElement("li");
li.innerHTML = "广州";

//获取city
let city = document.getElementById("city");

//插入li到city的后面
city.appendChild(li);

//插入li到bj的前面
city.insertBefore(li, bj);

//li替换bj
city.replaceChild(li, bj);

//city中删除bj
city.removeChild(bj);
最优:
bj.parentNode.removeChild(bj);

6.操作css

1.内联样式
元素名.style.width = "300px";
2.读样式
getStyle()
元素.currentStyle.样式名->IE
getComputedStyle()这个方法来获取元素当前的样式
这个方法是window的方法，可以直接使用,返回一个css对象
需要两个参数
第一个：要获取样式的元素
第二个：可以传递一个伪元素，一般都传null
getComputedStyle(box1,null).backgroundColor

            /*
             * 定义一个函数，用来获取指定元素的当前的样式
             * 参数：
             * 		obj 要获取样式的元素
             * 		name 要获取的样式名
             */

            function getStyle(obj, name) {
                if (window.getComputedStyle) {
                    //正常浏览器的方式，具有getComputedStyle()方法
                    return getComputedStyle(obj, null)[name];
                } else {
                    //IE8的方式，没有getComputedStyle()方法
                    return obj.currentStyle[name];
                }
                
3.其他样式属性的操作

7.事件对象

1.
/*
                 * onmousemove
                 * 	- 该事件将会在鼠标在元素中移动时被触发
                 *
                 * 事件对象
                 * 	- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,
                 * 		在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标  键盘哪个按键被按下  鼠标滚轮滚动的方向
                 */

                a.onmousemove = function (event) {
                    //解决事件对象的兼容性问题

                    event = event || window.event;

                    /*
                     * clientX可以获取鼠标指针的水平坐标
                     * cilentY可以获取鼠标指针的垂直坐标
                     */
                    var x = event.clientX;
                    var y = event.clientY;

                    //alert("x = "+x + " , y = "+y);

                    //在showMsg中显示鼠标的坐标
                    showMsg.innerHTML = "x = " + x + " , y = " + y;}
2.
                document.onmousemove = function (event) {
                    //解决兼容问题
                    event = event || window.event;

                    //获取滚动条滚动的距离
                    /*
                     * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
                     * 火狐等浏览器认为浏览器的滚动条是html的，
                     */
                    var st = document.body.scrollTop || document.documentElement.scrollTop;

                    var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
                    //var st = document.documentElement.scrollTop;

                    //获取到鼠标的坐标
                    /*
                     * clientX和clientY
                     * 	用于获取鼠标在当前的可见窗口的坐标
                     * div的偏移量，是相对于整个页面的
                     *
                     * pageX和pageY可以获取鼠标相对于当前页面的坐标
                     * 	但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
                     */
                    var left = event.clientX;
                    var top = event.clientY;

                    //设置div的偏移量
                    box1.style.left = left + sl + "px";
                    box1.style.top = top + st + "px";
                    
3.事件的冒泡

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
     event.cancelBubble = true;
                    
4.事件的委派

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
解决新添加类型的元素在之前已经绑定好事件
                //为ul绑定一个单击响应函数
                u1.onclick = function (event) {
                    event = event || window.event;

                    /*
                     * target
                     * 	- event中的target表示的触发事件的对象
                     */
                    //alert(event.target);

                    //如果触发事件的对象是我们期望的元素，则执行否则不执行
                    if (event.target.className == "link") {
                        alert("我是ul的单击响应函数");
                    }
                };
 5.事件的绑定
 可以绑定多个
 btn01.addEventListener("click",function(){
					alert(1);
				},false);
 第一个参数:事件
 第二个参数:回调函数
 第三个函数:是否捕获触发事件
 
 6.事件的传播
 微软认为事件应该是由内向外传播
 事件在冒泡阶段执行
 网景应该应该从外向内传播
 
W3C综合了两个公司的方案，将事件传播分成了三个阶段
1.捕获阶段
在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false

8.事件

1.拖拽

function drag(obj){
			//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
			obj.onmousedown = function(event){
				
				//设置box1捕获所有鼠标按下的事件
				/*
				 * setCapture()
				 * 	- 只有IE支持，但是在火狐中调用时不会报错，
				 * 		而如果使用chrome调用，会报错
				 */
				/*if(box1.setCapture){
					box1.setCapture();
				}*/
				obj.setCapture && obj.setCapture();
				
				
				event = event || window.event;
				//div的偏移量 鼠标.clentX - 元素.offsetLeft
				//div的偏移量 鼠标.clentY - 元素.offsetTop
				var ol = event.clientX - obj.offsetLeft;
				var ot = event.clientY - obj.offsetTop;
				
				
				//为document绑定一个onmousemove事件
				document.onmousemove = function(event){
					event = event || window.event;
					//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
					//获取鼠标的坐标
					var left = event.clientX - ol;
					var top = event.clientY - ot;
					
					//修改box1的位置
					obj.style.left = left+"px";
					obj.style.top = top+"px";
					
				};
				
				//为document绑定一个鼠标松开事件
				document.onmouseup = function(){
					//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
					//取消document的onmousemove事件
					document.onmousemove = null;
					//取消document的onmouseup事件
					document.onmouseup = null;
					//当鼠标松开时，取消对事件的捕获
					obj.releaseCapture && obj.releaseCapture();
				};
				
				/*
				 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
				 * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
				 * 	如果不希望发生这个行为，则可以通过return false来取消默认行为
				 * 
				 * 但是这招对IE8不起作用
				 */
				return false;
				
			};

2.滚轮

//获取id为box1的div
               var box1 = document.getElementById("box1");

               //为box1绑定一个鼠标滚轮滚动的事件
               /*
                * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
                * 	但是火狐不支持该属性
                *
                * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
                * 	注意该事件需要通过addEventListener()函数来绑定
                */

               box1.onmousewheel = function (event) {
                   event = event || window.event;

                   //event.wheelDelta 可以获取鼠标滚轮滚动的方向
                   //向上滚 120   向下滚 -120
                   //wheelDelta这个值我们不看大小，只看正负

                   //alert(event.wheelDelta);

                   //wheelDelta这个属性火狐中不支持
                   //在火狐中使用event.detail来获取滚动的方向
                   //向上滚 -3  向下滚 3
                   //alert(event.detail);

                   /*
                    * 当鼠标滚轮向下滚动时，box1变长
                    * 	当滚轮向上滚动时，box1变短
                    */
                   //判断鼠标滚轮滚动的方向
                   if (event.wheelDelta > 0 || event.detail < 0) {
                       //向上滚，box1变短
                       box1.style.height = box1.clientHeight - 10 + "px";
                   } else {
                       //向下滚，box1变长
                       box1.style.height = box1.clientHeight + 10 + "px";
                   }

                   /*
                    * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
                    * 需要使用event来取消默认行为event.preventDefault();
                    * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
                    */
                   event.preventDefault && event.preventDefault();

                   /*
                    * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
                    * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
                    */
                   return false;
               };

3.键盘

		
/*
 * 键盘事件：
 * 	onkeydown
 * 		- 按键被按下
 * 		- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
 * 		- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
 * 			这种设计是为了防止误操作的发生。
 * 	onkeyup
 * 		- 按键被松开
 * 
 *  键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
 */

document.onkeydown = function(event){
	event = event || window.event;
	
	/*
	 * 可以通过keyCode来获取按键的编码
	 * 	通过它可以判断哪个按键被按下
	 * 除了keyCode，事件对象中还提供了几个属性
	 * 	altKey
	 * 	ctrlKey
	 * 	shiftKey
	 * 		- 这个三个用来判断alt ctrl 和 shift是否被按下
	 * 			如果按下则返回true，否则返回false
	 */
	
	//console.log(event.keyCode);
	
	//判断一个y是否被按下
	//判断y和ctrl是否同时被按下
	if(event.keyCode === 89 && event.ctrlKey){
		console.log("ctrl和y都被按下了");
	}
	
	
};

/*document.onkeyup = function(){
	console.log("按键松开了");
};*/

//获取input
var input = document.getElementsByTagName("input")[0];

input.onkeydown = function(event){
	
	event = event || window.event;
	
	//console.log(event.keyCode);
	//数字 48 - 57
	//使文本框中不能输入数字
	if(event.keyCode >= 48 && event.keyCode <= 57){
		//在文本框中输入内容，属于onkeydown的默认行为
		//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
		return false;
	}
	
	
};

12.BOM

/*
 * BOM
 * 	- 浏览器对象模型
 * 	- BOM可以使我们通过JS来操作浏览器
 * 	- 在BOM中为我们提供了一组对象，用来完成对浏览器的操作
 * 	- BOM对象
 * 		Window
 * 			- 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
 * 		Navigator
 * 			- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
 * 		Location
 * 			- 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
 * 		History
 * 			- 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
 * 				由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
 * 				而且该操作只在当次访问时有效
 * 		Screen
 * 			- 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
 * 
 * 
 * 		这些BOM对象在浏览器中都是作为window对象的属性保存的，
 * 			可以通过window对象来使用，也可以直接使用

navigator:

navigator.userAgent


history:
				//获取按钮对象
				var btn = document.getElementById("btn");
				
				btn.onclick = function(){
					/*
					 * length
					 * 	- 属性，可以获取到当成访问的链接数量
					 */
					//alert(history.length);
					
					/*
					 * back()
					 * 	- 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
					 */
					//history.back();
					
					/*
					 * forward()
					 * 	- 可以跳转下一个页面，作用和浏览器的前进按钮一样
					 */
					//history.forward();
					
					/*
					 * go()
					 * 	- 可以用来跳转到指定的页面
					 * 	- 它需要一个整数作为参数
					 * 		1:表示向前跳转一个页面 相当于forward()
					 * 		2:表示向前跳转两个页面
					 * 		-1:表示向后跳转一个页面
					 * 		-2:表示向后跳转两个页面
					 */
					history.go(-2);
				};


location:

				//获取按钮对象
				var btn = document.getElementById("btn");
				
				btn.onclick = function(){
					
					//如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
					//alert(location);
					
					/*
					 * 如果直接将location属性修改为一个完整的路径，或相对路径
					 * 	则我们页面会自动跳转到该路径，并且会生成相应的历史记录
					 */
					//location = "http://www.baidu.com";
					//location = "01.BOM.html";
					
					/*
					 * assign()
					 * 	- 用来跳转到其他的页面，作用和直接修改location一样
					 */
					//location.assign("http://www.baidu.com");
					
					/*
					 * reload()
					 * 	- 用于重新加载当前页面，作用和刷新按钮一样
					 * 	- 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
					 */
					//location.reload(true);
					
					/*
					 * replace()
					 * 	- 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
					 * 		不会生成历史记录，不能使用回退按钮回退
					 */
					location.replace("01.BOM.html");
					
				};

13.定时器

/*
				 * setInterval()
				 * 	- 定时调用
				 * 	- 可以将一个函数，每隔一段时间执行一次
				 * 	- 参数：
				 * 		1.回调函数，该函数会每隔一段时间被调用一次
				 * 		2.每次调用间隔的时间，单位是毫秒
				 * 
				 * 	- 返回值：
				 * 		返回一个Number类型的数据
				 * 		这个数字用来作为定时器的唯一标识
				 */
				var num = 1;
				
				var timer = setInterval(function(){
					
					count.innerHTML = num++;
					
					if(num == 11){
						//关闭定时器
						clearInterval(timer);
					}
					
				},1000);
				
				//console.log(timer);
				
				//clearInterval()可以用来关闭一个定时器
				//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
				//clearInterval(timer);



			//开启一个定时器
			/*setInterval(function(){
				console.log(num++);
			},3000);*/
			
			
			/*
			 * 延时调用，
			 * 	延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
			 * 
			 * 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
			 * 
			 * 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择
			 */
			var timer = setTimeout(function(){
				console.log(num++);
			},3000);
			
			//使用clearTimeout()来关闭一个延时调用
			clearTimeout(timer);

14.JSON

	
/*
 * JSON
 * 	- JS中的对象只有JS自己认识，其他的语言都不认识
 * 	- JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，
 * 		并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
 * 	- JSON
 * 		- JavaScript Object Notation JS对象表示法
 * 		- JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号
 * 			其他的和JS语法一致
 * 		JSON分类：
 * 			1.对象 {}
 * 			2.数组 []
 * 
 * 		JSON中允许的值：
 * 			1.字符串
 * 			2.数值
 * 			3.布尔值
 * 			4.null
 * 			5.对象
 * 			6.数组
 */

//创建一个对象


var arr = '[1,2,3,"hello",true]';

var obj2 = '{"arr":[1,2,3]}';

var arr2 ='[{"name":"孙悟空","age":18,"gender":"男"},{"name":"孙悟空","age":18,"gender":"男"}]';

/*
 * 将JSON字符串转换为JS中的对象
 * 	在JS中，为我们提供了一个工具类，就叫JSON
 * 	这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON
 */

var json = '{"name":"孙悟空","age":18,"gender":"男"}';

/*
 * json --> js对象
 * 	 JSON.parse()
 * 		- 可以将以JSON字符串转换为js对象
 * 		- 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回
 */

var o = JSON.parse(json);
var o2 = JSON.parse(arr);

//console.log(o.gender);
//console.log(o2[1]);

var obj3 = {name:"猪八戒" , age:28 , gender:"男"};


/*
 * JS对象 ---> JSON
 * 	JSON.stringify()
 * 		- 可以将一个JS对象转换为JSON字符串
 * 		- 需要一个js对象作为参数，会返回一个JSON字符串
 */

var str = JSON.stringify(obj3);
//console.log(str);

/*
 * JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错
 */


var str3 = '{"name":"孙悟空","age":18,"gender":"男"}';

JSON.parse(str3);