JavaWeb JavaScript 7.BOM编程

L_cl

已于 2024-09-02 12:13:20 修改

阅读量582

点赞数 9

分类专栏：前端前端前端 JavaWeb 文章标签：前端 javascript java

于 2024-08-29 16:58:55 首次发布

本文链接：https://blog.csdn.net/m0_73983707/article/details/141683105

版权

前端前端前端同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

JavaWeb

13 篇文章 0 订阅

订阅专栏

别赌气，不然你会忘记初衷

—— 24.8.29

一、BOM编程

1.什么是BOM

① BOM是Browser Object Model的简写，即浏览器对象模型

② BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法(通过window对象及属性的一系列方法控制浏览器行为的一种编程）

③ BOM没有统一的标准(每种客户端都可以自定标准)。

④ BOM编程是将浏览器窗口的各个组成部分抽象成各个对象，通过各个对象的API操作组件行为的一种编程

⑤ BOM编程的对象结构如下：

window 顶级对象,代表整个浏览器窗口
        location对象           window对象属性之一，代表浏览器的地址栏
        history对象             window对象属性之一，代表浏览器的访问历史
        screen对象    window对象属性之一，代表屏幕
   navigator对象    window对象属性之一，代表浏览器软件本身

        document对象    window对象属性之一，代表浏览器窗口目前解析的html文档
        console对象 window对象属性之一，代表浏览器开发者工具的控制台
        localStorage对象                window对象属性之一，代表浏览器的本地数据持久化存储
        sessionStorage对象 window对象属性之一，代表浏览器的本地数据会话级存

2.BOM编程常见API的演示

window对象由浏览器提供给我们使用 ——> window.可以省略不写

三种弹窗方式

① alert() 普通信息提示框

② prompt() 信息输入对话框

③ confirm() 确认框

定时任务

① history对象记录用户浏览过的页面

② location对象记录当前页面的URL和其他信息

href：地址栏中的url

③ sessionstorage对象存储一些会话级数据 (浏览器关闭，数据自动清除)

④ localstorage对象存储一些长期数据(除非手动清除，否则永久保存

⑤ console对象 log()向控制台打印信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        /*
        window对象由浏览器提供给我们使用
            window.可以省略不写
            三种弹窗方式
                alert()
                prompt()
                confirm()

        定时任务
            history对象 记录用户浏览过的页面
            location对象 记录当前页面的URL和其他信息
            sessionStorage对象 存储一些会话级数据 （浏览器关闭，数据自动清除）
            localStorage对象 存储一些长期数据 （除非手动清除，否则永久保存）
            console对象 log() 向控制台打印信息
        */
       
        function fun1() {
            window.alert("Hello!")
        }

        function fun2() {
            var res = window.alert("请输入姓名：")
            console.log(res)
        }

        function fun3() {
            var res = window.confirm("你确定要删除吗？")
            console.log(res)
        }

        function fun4() {
            window.setTimeout(function() {
                console.log("hello")
            }, 2000)
        }

        // history对象 记录用户浏览过的页面
        function funA() {
            window.history.back()   // 回退到上一页
        }

        function funB() {
            window.history.forward()
            history.go(1)   // 向前翻一页
            history.forward()   // 向后翻一页
        }   

        // location对象 记录当前页面的URL和其他信息
        function funC() {
            location.href ="https://www.baidu.com"    // 修改地址栏的地址属性
        }

        // sessionStorage对象 存储一些会话级数据 （浏览器关闭，数据自动清除）
        function funD() {
            // 向sessionStorage对象存储数据
            window.sessionStorage.setItem("name", "张三")
            
            // 向localStorage对象存储数据
            window.localStorage.setItem("age", "20")
        }

        function funE() {
            console.log(window.sessionStorage.getItem("name"))  
            console.log(window.localStorage.getItem("age"))  
        }

        function funF() {
            // 清空sessionStorage对象
            window.sessionStorage.removeItem("name")

            // 清空localStorage对象
            window.localStorage.removeItem("age")
        }

        // localStorage对象 存储一些长期数据 （除非手动清除，否则永久保存）
    </script>
</head>
<body>
    <button onclick="funD()">存储数据</button>
    <button onclick="funE()">读取数据</button>
    <button onclick="funF()">清空数据</button>

    <hr>
    <button onclick="funC()">百度</button>
    
    <hr>
    <button onclick="funA()">上一页</button>
    <button onclick="funB()">下一页</button>

    <hr>
    <button onclick="fun1()">信息提示框</button>
    <button onclick="fun2()">信息输入框</button>
    <button onclick="fun3()">信息确认框</button>
    <button onclick="fun4()">两秒后向控制台打印hello</button>

</body>
</html>