BOM浏览器对象和json格式

知识点：
1.window对象
2.history对象
3.location对象
4.json格式

一、window对象
Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

1.弹框
（1）alert（）警告框

 alert("提示！");

（2）prompt 带输入框的提示框，点击确定，返回值是输入的值或者默认值

var x=prompt("请输入您的价格：",1)//1为设定的默认值

（3）confirm 提示信息框，返回值true/false

confirm("确定删除？");

2.网页的打开关闭方法
打开指定的网页：open()
关闭当前网页：close()

open("https://www.baidu.com","baidu");

close();

3.获取非行内样式 ：getComputedStyle()

4.获取用户选择的内容 ：getSelection()

5.window相关尺寸
（1）宽高的含义
网页可是区域的宽和高： innerwidth 、 innerheight
屏幕对象screen：
不包含任务栏：availHeight 、availWidth
实际的宽和高：height 、width
（2）宽高的其他获取方式
①获取的可视区域的值

 console.log(document.documentElement.clientHeight);
 console.log(document.documentElement.clientWidth);

②documentElement 获取实际的宽和高使用offset

console.log(document.body.offsetHeight);
console.log(document.body.offsetWidth);

获取不包含边框的宽和高：

console.log(document.body.clientHeight);
console.log(document.body.clientWidth);

③获取当前设备的相关信息
navigator 对象是获取当前设备的相关信息，对象包含有关浏览器的信息

 console.log(navigator);

6.window对象的计时器
window对象的计时器分为一次性计时器，循环计时器和帧计时器。
（1）一次性计时器 setTimeout ：延长时间执行，返回值是数字。

var time=setTimeout(function (){
     console.log(1);
     },1000); //延长1秒执行
     console.log(time);

计时器中的this指针指向的是window

setTimeout(function () {
     console.log(this);  //window
     }, 1000);

计时器传值：计时器传值调用的方法需要传递实参，直接在计时器后写值。

setTimeout(function (data){
     console.log(data); //10
     },1000,10);

setTimeout改为循环计时器：使用函数递归实现

var count = 0;
    var time;
    loadtime();
    function loadtime() {
        count++;
        console.log(count);
        if (count > 10) {
            //return;  //满足条件 直接跳出，也可以终止计时器
            //关闭计时器
            clearTimeout(time);
            return;
        }

        time = setTimeout(loadtime, 1000);
        console.log("time:" + time);
    }

（2）循环计时器setInterval :使用方法与setTimeout一致

var count=0;
    var time=setInterval(function (){
        count++;
        console.log(count);
        if(count>5)
        {
            clearInterval(time);
        }
    },1000);

（3）帧计时器：requestAnimationFrame（按照电脑刷新频率执行）时间不可设置，为1000/60，
类似于setTimeout，使用递归做循环计时器。
关闭计时器：cancelAnimationFrame

var count=0;
     var time;
     loop();
     function loop(){
     count++;
     console.log(count);
     if(count>50)
     {
     cancelAnimationFrame(time);
     return;
     }
     time=requestAnimationFrame(loop);
     }

requestAnimationFrame 兼容性写法

var requestAnimation = requestAnimationFrame || webkitRequestAnimationFrame || mozRequestAnimationFrame || msRequestAnimationFrame
            || function (callback) {
                setTimeout(callback, 1000 / 60);
            }
var cancelAnimation = cancelAnimationFrame || webkitCancelAnimationFrame || mozCancelAnimationFrame || msCancelRequestAnimationFrame
            || function (number) {
                clearTimeout(number);
            }

（4）3种计时器的区别
requestAnimationFrame帧计时器，在浏览器失去焦点时会自动暂停。而其余两个计时器不会。

7.window转码解码
（1）转码：btoa
解码：atob
注：不能直接对汉字进行转码解码

var str="abc123";
    var s=window.btoa(str);
    console.log(window.atob(s));  //abc123

（2）汉字转码解码
解码：unescape
转码：escape

console.log(window.unescape("张三")); //解码
console.log(window.escape("张三"));//转码

（3）汉字转base64位转码解码

var s="李四";
    var b64=btoa(encodeURIComponent(s));  //中间转码
    console.log(decodeURIComponent(atob(b64)));  //李四

8.window事件
①加载完成事件

window.οnlοad=function (){

   }

②浏览器窗口放生变化事件

    window.οnresize=function (){

   }

③关闭事件

    window.onclose=function (){

   }

④加载失败事件

window.οnerrοr=function (){

}

⑤滚动条事件

 window.onsroll=function (){

   }

 window.onmouewheel=function (){

   }

二、history历史对象
history对象保存着从窗口被打开起的历史记录，每个浏览器窗口、标签页、框架都有自己的history对象。

//倒退
  history.back();
//前进
  history.forward();
  
//数字表示跳转几个路径 
 //前进一步 
   history.go(1);
 //倒退一步
   history.go(-1);

三、location对象
location对象提供了与当前窗口中加载的文档有关的信息以及一些导航功能。
常用属性：

    console.log(location.host);  返回服务器名称和端口号
    console.log(location.hostname);  返回服务器名称
    console.log(location.pathname);  返回URL中的目录和文件名
    console.log(location.href);  返回当前完整的URL地址
    console.log(location.port);  返回URL中指定的端口号，如果没有，返回空字符串
    console.log(location.protocol);  返回页面使用的协议

reload() ：重新加载页面地址。
replace(): 重新定向URL,不会在历史记录中生成新纪录。

setTimeout(function (){
       location.reload();//重新加载
    },2000);
        //replace  替换路径加载页面
        location.replace(路径);

四、json格式
json指的是 JavaScript 对象表示法。
1.json数据的书写格式：名称/值对。
名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

"name" :" 教程"

2.json对象
（1）JSON 对象使用在大括号({})中书写。
（2）对象可以包含多个 key/value（键/值）对。key 必须是字符串，value 可以是字符串, 数字, 对象, 数组, 布尔值或 null
（3）key 和 value 中使用冒号隔开。
（4）每个 key/value 对使用逗号隔开。
3.json值：
值可以是：
数字（整数或浮点数），字符串（在双引号中），逻辑值（true 或 false），数组（在中括号中），对象（在大括号中），null
4.json对象
JSON 对象在大括号（{}）中书写，对象可以包含多个名称/值对：

{ "name":"百度" , "url":"www.baidu.com" }

5.json数组：
数组在中括号中书写，数组可包含多个对象：

{
"sites": [
{ "name":"百度" , "url":"www.baidu.com" }, 
{ "name":"google" , "url":"www.google.com" }, 
{ "name":"微博" , "url":"www.weibo.com" }
]
}

6.json数组嵌套使用：

list=[
        {
            "id":"10001",
            "name":"陕西省",
            "child":[
                {
                    "id":"100011",
                    "name":"宝鸡市"
                },
                {
                    "id":"100012",
                    "name":"西安市"
                }
            ]
        },
        {
            "id":"10002",
            "name":"甘肃省",
            "child":[
                {
                    "id":"100021",
                    "name":"酒泉市"
                },
                {
                    "id":"100022",
                    "name":"兰州市"
                }
            ]
        }
    ];

7.字符串json和json 对象转化
在接收服务器数据时一般是字符串。使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
在向服务器发送数据时一般是字符串。使用JSON.stringify() 方法将 JavaScript 对象转换为字符串。

 var str=JSON.stringify(list);
    console.log(JSON.parse(str));