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

文章	分类	评论
261	4	34

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>

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

什么是作用域链以及作用域链在javascript中的作用是什么？ - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]回顾如何定义作用域链如何定义'作用域'？说明不同类型的作用域作用域链Scope Chain是JavaScript中的一个基本概念，它属于确定当前执行代码的上下文变量的查找和访问机制。在作用域的构建基于词法作用域的解构，即变量和函数的可见性由它们在源代码中的位置决定。在JavaScript中，每个执行上下文如函数执行上下文都绑有一个与之关联的作用域链。这个作用域就是一个包含多个环境记录Environ[...]

Hary

哈喽，你的SSL好像过期喽

abzzp

@秋风于渭水确实 [[微笑]]

通常会采取哪些措施来确保网站或者应用在不同的浏览器上的兼容性? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]不同的浏览器存在兼容性问题的核心原因是不同的浏览器可能使用的是不同的浏览器内核。在现代化开发中，大多数的浏览器兼容性问题是可以通过工程化中的配置选项来解决的。1.比如browserslist可以配置目标的浏览器或者Node环境，然后在不同的工具中起作用，比如autoprefixer/babel/postess preset env等，在进行了正确的配置后，开发的Vue或者React项目在进行打包时[...]

BFC的作用是什么呢? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]在BFC中，box会在垂直方向上一个挨着一个的排布垂直方向的间距由margin属性决定在同一个BFC中，相邻两个box之间的margin会折叠(collapse)在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的然后我们再看一下官方文档中如何说明的？总结BFC是什么？W3C文档讲：在标准流中，我们所有的盒子，不管是块级盒子还是行内盒子，它们都属于某一个FC格式化上下文，块级盒子属于BFC`块级格[...]

什么是FC呢?他是用来干什么的？ - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]什么是FC呢这里我们给出W3C给出的文档，FC文档FC的全称是FormattingContext，元素在标准流里面都是属于一个FC的。那么什么又是IFC，BFC呢？IFC行内元素的布局都属于Inline Formatting,inline level box都是在IFC中布局的BFCBFC英文全称是Block Formatting Context,也就是block level box都是在BFC中[...]

秋风于渭水

这确实是一个盲点，这个还是很有必要的，处理不好会导致网页内的元素出现抖动问题。

defer属性在javascript标签中有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

[...]我们知道，当浏览器在执行到script标签的时候，首先会停止构建DOM树，然后下载Javascript文件并且执行，当JavaScript脚本执行完毕之后才会继续解析HTML标签构建DOM树。为什么Javascript程序会这样做呢？原因是我们的Javascript的作用就是操作DOM并且可以修改DOM。如果我们等到HTML执行完成之后再去执行JavaScript就会造成严重的回流和重绘，尤其是现[...]

async属性是什么？它有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

[...]async属性和defer属性目标一样它也是为了不让js阻塞DOM树的构建。不过他们两个还是有区别的。async让js脚本的下载和执行是独立的。浏览器不会因为async属性的script脚本的执行而阻塞，这一点和defer属性类似。然而async属性比较任性，只要脚本被浏览器下载完成之后就会立即执行，不会等待在DOMContentLoaded之前执行。所以它不能保证是在DOMContentLoad[...]

城市教堂

我热爱旅游专栏。令人惊艳了解路线。

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

程序员鸡皮

站点介绍