转码日记——Javascript笔记（14）BOM对象

BOM（browser object model）浏览器对象模型

在BOM中，为我们提供了一组对象，用来帮助我们完成对浏览器的操作。

BOM对象：Window（代表整个浏览器的窗口，同时也是网页中的全局对象）, Navigator（代表当前浏览器的信息，通过该对象可以识别不同的浏览器）, Location（代表当前浏览器的地址栏信息，可以获得地址栏信息并操纵浏览器跳转页面）, History（代表浏览器的历史记录，可以用来操纵历史记录，由于隐私问题，不能获得到具体的历史记录，只能操作网页向前或向后跳转，而且该操作只在当次访问时有效）, Screen（代表用户的屏幕的信息，获取用户显示器的信息）

BOM的这些对象在浏览器中都是作为window的属性存在，可以通过window对象使用，也可以直接使用。

Navigator 

可以使用userAgent属性识别不同的浏览器，其是一个字符串，包含有用来描述浏览器信息的内容。

//使用正则表达式协助判断
var uB = navigator.userAgent;
if(/chrome/i.test(uB)){
    alert("你是谷歌浏览器");
}

History

length — 属性，可以获取到当次防伪链接的数量。

back( ) — 方法，可以用来退回到上一个页面，和浏览器最上栏的回退按钮功能一样。

forward ( ) — 和back（ ）差不多，可以跳转到下一个页面，和浏览器的前进功能一样。

//点击按钮前进到上一个页面
var btn = document.getElementById("btn");
btn.onclick = function (){
    history.back();
};

go( ) — 可以用来跳转到指定页面，需要一个整数作为参数，1表示向前跳转一个页面，2表示向前跳转两个页面，-1表示向后跳转一个页面，-2向后跳转两个页面。

//向后跳转两个页面
btn.onclick = function (){
    history.go(-2);
}; 

Location

如果直接将location的属性修改为一个完整的路径，或者相对路径，则我们页面会自动跳转到该路径，并且会生成相应的历史记录。

 var btn01 = document.getElementById("btn01");
        btn01.onclick = function () {
            location = "http://www.baidu.com";
        }

//asign( ) 方法和直接修改location属性差不多
location.asign("http://www.baidu.com");

//reload( )方法，重新加载当前页面
location.reload(true); 
//如果在方法中传递一个true，就会强制清空缓存刷新页面，不传true则不清除缓存

//replace( )方法，可以使用新的页面替换当前页面，调用完毕后跳转页面
location.replace("ex10.html");
//和asign( )的区别就是不能生成历史记录，因此也无法回退

Window

setInterval( ); — 定时调用，可以控制一个函数每隔一段时间执行一次；参数：1.回调函数，该函数会每隔一段时间调用一次  2. 每次调用间隔的时间，单位是毫秒；返回值：返回一个number类型的值作为该定时器的唯一标识

//每隔1000毫秒加1
 var clock = document.getElementById("clock");
        var num = 1;
        setInterval(function () {
            clock.innerHTML = num++;
        }, 1000);

clearInterval( ); — 关闭定时器，该方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器。

//数字增加到10停止 
var timer = setInterval(function () {
            clock.innerHTML = num++;
            if (num == 11) {
                clearInterval(timer);
            }
        }, 1000);

练习：切换图片

var img = document.getElementById("img");
        //创建数组保存不同的图片
        var imgArr = ["img/img1.jpg", "img/img2.jpg", "img/img3.jpg", "img/img4.jpg"];
        //使用index变量
        var index = 0;
        //定义新的变量timer
        var timer;
        //获取按钮
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function () {
            //因为每次点击开始都会开启一次定时器，叠加之后速度非常快，并且只能关闭最后一次开启的定时器
            //所以防止多次开启定时器，要在开始之前把已经开启的关闭
            clearInterval(timer);
            //设置定时器
            timer = setInterval(
                function () {
                    index++
                    img.src = imgArr[index];
                    //如果到最后一张，则返回第一张开始轮播
                    if (index >= imgArr.length) {
                        index = 0;
                    }
                }, 1000
            );

        };
        //获取结束按钮
        var btn02 = document.getElementById("btn02");
        btn02.onclick = function () {
            clearInterval(timer);
        };

SetTimeout( ); 延时调用：一个函数不马上执行，而是隔一段时间后再执行，而且只会执行一次。定时调用可以执行多次，但是延时调用只执行一次。

 var num = 1;
var timer= setTimeout(function () {
      console.log(num);
}, 3000);
//关闭延时调用
clearTimeout(timer);

定时器的应用

 //定义一个盒子移动的函数

        //定义一个盒子移动的函数
        function move(obj, speed, target, attr) {
            clearInterval(obj.timer);
            //判断速度的正负值
            //获取当前盒子的位置
            var current = parseInt(getComputedStyle(box1, null).attr);
            //永远传正值的话就要在target是0的时候是负值
            if (current > target) {
                speed = -speed;
            }

            //各自使用各自的计时器，所以将计时器作为obj的属性保存起来
            obj.timer = setInterval(function () {
                //获取盒子的位置
                var oldValue = parseInt(getComputedStyle(obj, null).attr);
                var newValue = oldValue + speed;
                //获取box1
                var box1 = document.getElementById("box1");
                //判断newvalue是否在设置的0-800之间移动
                if (speed < 0 && newValue < target || speed > 0 && newValue > target) {
                    newValue = target;
                }
                obj.style.[attr] = newValue + "px";
                //当移动到target值时停止
                if (newValue == target) {
                    clearInterval(obj.timer);
                }
            }, 30);


        };

类的操作

通过修改元素的class属性来间接修改样式，这样修改时浏览器只需要渲染一次，并且这种方式可以使表现和行为进一步分离

 var btn = document.getElementById("btn");
        var b1 = document.getElementById("box");
        btn.onclick = function () {
            box.className = "b2"; //b2全部覆盖掉b1
        };

//如果要结合b1和b2的属性
box.className += "\t"+"b2"; //b2前面要有一个空格

 //定义一个函数来专门修改classname
        function addClass(obj, cn) {
            obj.className += "\t" + cn;
        };
//定义一个函数来判断一个元素中是否含有一个class属性
        function hasClass(obj, cn) {
            //判断obj中是否有cn class
            //创建一个正则表达式,前后加\b作为单词边界
            var reg = new RegExp("\\b" + cn + "\\b");
            return reg.test(obj.className);
        };

        //创建一个删除元素class属性的函数
        function remClass(obj, cn) {
            var reg = new RegExp("\\b" + cn + "\\b");
            obj.className = obj.className.replace(reg, "");

        }

        //创建一个切换类的函数，如果原类中含有则删除，不含有则添加
        function toggleClass(obj, cn) {
            if (hasClass(obj, cn)) {
                remClass(obj, cn);
            } else {
                addClass(obj, cn);
            }
        };

JSON — Javascript Object Notation JS对象表示法

JSON就是一个特殊格式的字符串，该字符串可以被任意语言识别，并且可以转换为任意语言中的对象，主要用于不同语言之间数据的交互。

JSON的属性名必须加双引号，不可以不加，也不可以是单引号，其他语法和js都一样。

分类：1.对象 { }  2.数组[ ]

//json对象
var obj = '{"name":"david","age":"30"}';
var arr = '[1,2,3,true,"hello"]';

JSON中允许的值：字符串、数值、布尔值、null、对象、数组 （不能是函数对象）

var obj2 = '{"arr":"[1,2,3]"}';
var arr2 ='[{"name":"david","age":"30"}]';

将JSON字符串转换为JS中的对象

在JS中，为我们提供了一个工具类就叫JSON,可以帮助我们实现JS和JSON之间的相互转换。

JSON ---> JS：使用JSON.parse(JSON对象);

JSON.parse(obj2); //将json转换为js对象

JS对象 ---> JSON: 使用JSON.stringify(JS对象);

JSON.stringify(arr);

终于学完JS初级了，要开JS高级咯～