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

文章	分类	评论
60	3	9

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

十天看一部剧，还可以吧 [[呲牙]]

@梦不见的梦行，谢谢提醒,我优化一下

梦不见的梦

网站的速度有待提升，每次打开都要转半天还进不来呢

@React实战爱彼迎项目(二) - 程序员鸡皮哪里有问题了，报错了吗？ [[微笑]]

@Teacher Du 那是怕你们毕不了业，我大学那会儿给小礼品 [[发呆]]

Teacher Du

我们大学那会，献血还给学分~

夜

@ab 我想去学网安，比如网警，但分也贼高😕

@夜加油，你一样也可以成为程序员的，需要学习资料可以V我

佬发布的好多技术文章似乎我只能评论这篇，真正的程序员！！哇塞我也想去献血，过两年就成年了可以去献血了

日	一	二	三	四	五	六
					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

程序员鸡皮

站点介绍

重学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

日	一	二	三	四	五	六
					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

日	一	二	三	四	五	六
					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