重学Javascript基础（十二) BOM相关对象学习

文章	分类	评论
102	3	28

01.BOM-window对象的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <a href="http://www.baidu.com" target="_blank"></a>
    <button>百度一下</button>

    <button class="close">关闭窗口</button>

    <script>
        // 1.window的查看角度
        // ECMAScript规范：全局对象 -> globalThis
        // 对于浏览器 -> window
        // 对于Node -> global
        console.log(window)
        console.log(globalThis === window)

        // 浏览器窗口
        console.log(window.outerHeight)

        // 2.补充的方法
        var openBtnEl = document.querySelector("button")
        var closeBtnEl = document.querySelector(".close")
        openBtnEl.onclick = function(){
            window.open("./page/new.html","_blank")
        }
        closeBtnEl.onclick = function(){
            window.close()
        }

        // 3.常见的事件
        window.onfocus = function(){
            console.log("窗口获取到焦点")
        }
        window.onblur = function(){
            console.log("窗口失去了焦点")
        }

        window.onhashchange = function(){
            console.log("hash值发生改变")
        }
    </script>  
</body>
</html>

02.BOM-location对象的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>打开新的网页</button>
    <button>替换新的网页</button>
    <button>网页重新加载</button>

    <script>
        // 1.完整的URL
        console.log(location.href)
        // 2.获取URL信息
        console.log(location.hostname)
        console.log(location.host)
        console.log(location.protocol)
        console.log(location.port)
        console.log(location.pathname)
        console.log(location.search)
        console.log(location.hash)

        // 3.location方法
        var btns = document.querySelectorAll("button")
        btns[0].onclick = function(){
            location.assign("http://www.baidu.com")
        }
        btns[1].onclick = function(){
            location.replace("http://www.baidu.com")
        }
        btns[2].onclick = function(){
            location.reload()
        }

        // 4.URLSearchParams
        var urlSearString = "?name=why&age=1&height=1.88"
        var searchParams = new URLSearchParams(urlSearString)
        console.log(searchParams.get("name"))
        console.log(searchParams.get("age"))
        console.log(searchParams.get("height"))

        searchParams.append("address","广州市")
        console.log(searchParams.get("address"))
        console.log(searchParams.toString())
    </script>
</body>
</html>

03.BOM-history对象的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>修改history</button>
    <button class="back">返回上一级</button>
    <script>
        // 前端路由核心：修改了URL，但是页面不刷新
        // 1.修改hash值
        // 2.修改history

        // 1.history对应的属性
        console.log(history.length)
        console.log(history.state)

        // 2.修改history
        var btnEl = document.querySelector("button")
        btnEl.onclick = function(){
            // history.pushState({name:"why",age:18},"","/why")
            history.replaceState({name:"why",age:18},"","/why")
        }

        var backBtnEl = document.querySelector(".back")
        backBtnEl.onclick = function(){
            // history.back()
            // history.forward()
            // 类似于上面的两个方法,只是传入层级
            // history.go(-2)
        }
    </script>
</body>
</html>

04.BOM-navigator对象的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(navigator.userAgent)
        console.log(navigator.vendor)
        console.log(navigator.platform)
        console.log(navigator.oscpu)
    </script>
</body>
</html>

05.BOM-screen对象的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(screen.width,screen.height)
    </script>
</body>
</html>

06.JSON的文件格式-简单值

07.JSON的文件格式-数组

[
    "123",
    123
]

08.JSON的文件格式-对象

{
    "name":"why",
    "age":123,
    "friend":{
        "name":"kobe",
        "age":null
    }
}

09.JSON-JSON的序列化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var obj = {
            name:"why",
            age:18,
            friend:{
                name:"kobe"
            }
        }

        console.log(obj.name,obj.age)

        // 1.将obj对象进行序列化
        var objJSONString = JSON.stringify(obj)
        console.log(objJSONString)

        // 2.将对象存储到localStorage
        localStorage.setItem("info",objJSONString)

        var item = localStorage.getItem("info")
        console.log(item,typeof item)

        // 3.将字符串转回到对象（反序列化）
        var newObj = JSON.parse(item)
        console.log(newObj)
    </script>
</body>
</html>

10.JSON-stringify方法的补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var obj = {
            name:"why",
            age:18,
            friend:{
                name:"kobe"
            },
            toJSON:function(){
                return "123"
            }
        }

        // // 1.replacer 参数
        // var objJSONString = JSON.stringify(obj,function(key,value){
        //     if(key === "name"){
        //         return "coderwhy"
        //     }
        //     return value
        // },"") 
        // console.log(objJSONString)

        // // 2.space参数
        // var objJSONString = JSON.stringify(obj,null,4)
        // console.log(objJSONString)

        // 3.如果对象本身有显示toJSON方法，那么直接调用同JSON方法
        var objJSONString = JSON.stringify(obj)
        console.log(objJSONString);

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

11.JSON-parse方法的补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var obj = {
            name:"why",
            age:18
        }
        var objJSONString = JSON.stringify(obj)
        console.log(objJSONString)

        var newObj = JSON.parse(objJSONString,function(key,value){
            if(key === "age"){
                return value + 2
            }
            return value
        })
        console.log(newObj)
    </script>
</body>
</html>

感谢大家观看，我们下次见

abzzp

以后焦虑了或者迷茫了记得回来看看 [[流泪]]

三十三瀑布

我非常喜欢出行博客。鼓舞人心查看路线。

天星碼頭

你们的博客百分百帮助选择路线。坚持!

日落鼓掌

信息丰富的出行资源! 越来越棒!

digital banking

My brother suggested I might like this blog. He was entirely right. This post actually made my day. You cann't imagine just how much time I had spent for this information! Thanks!

碧海藍灣

我热爱, 写得很实在。你的博客就是最好的例子。很出色。

I've learn several good stuff here. Certainly price bookmarking for revisiting. I surprise how so much effort you put to make such a great informative website.

fintechbase

It's not my first time to pay a visit this web page, i am visiting this website dailly and get good facts from here every day.

Hello, i think that i saw you visited my site so i got here to go back the want?.I'm trying to find things to improve my web site!I suppose its adequate to use a few of your concepts!!

Touche. Outstanding arguments. Keep up the great effort.

日	一	二	三	四	五	六
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

程序员鸡皮

站点介绍

重学Javascript基础（十二) BOM相关对象学习

01.BOM-window对象的使用

02.BOM-location对象的使用

03.BOM-history对象的使用

04.BOM-navigator对象的使用

05.BOM-screen对象的使用

06.JSON的文件格式-简单值

07.JSON的文件格式-数组

08.JSON的文件格式-对象

09.JSON-JSON的序列化

10.JSON-stringify方法的补充

11.JSON-parse方法的补充

评论(0)

热门文章

最新评论

日历

标签云

友情链接

文章目录

赞赏作者

日	一	二	三	四	五	六
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

日	一	二	三	四	五	六
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

日	一	二	三	四	五	六
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31