0021 JavaScript BOM的详解

目录

js三大组成部分 ecma标准语法 BOM DOM ，BOm是控制游览器操作的， js封装了window这个对象，调用window的方法完成游览器的操作指令。

bom 之弹窗

window的弹窗方式提醒式 window.alert('欢迎登录')
window的弹窗方式判断式 window.confirm('是否还原初始配置？')   弹窗后的值返回是布尔值 ，确定是ture ，取消是false
弹窗方式 自定义键入式 window.prompt('删除主机，请输入主机名: 172@MySQL')  弹窗后的值是输入的字符串，。

image-20230310010435010

image-20230310010448381

image-20230310010506416

关闭游览器当前窗口 window.close(); 
打开游览器的标签页window.open()

bom之定时器的运用

6.循环定时器的应用setInterval是window的方法，参数1是要执行的函数，参数2执行间隔的时间毫秒级。
结束循环定时器是clearinterval() 参数是setiterval的返回值
延时定时器，setTimeout，多长时间后才执行函数。只执行一次就结束。

定时器综合使用 
1.button按钮 onclick 绑定事件,事件本身是js代码所实现的功能，一般是调用函数。
2.在js两个不同的函数涉及数据传输时，要合理使用全局变量，局部函数使用完变量后，要及时的初始化。
3、在html中标签就是对象，标签的属性可以通过.形式引用出来
4、js传输给标签值，使用 关键字document方法获取id值，class值或者tag值，找到标签，对标签的属性赋值。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script>

    function show_time() {
        var date = new Date()
        var date_str = date.toLocaleString()
        var obj_input  = document.getElementById('123')

        obj_input.value = date_str
    }

    var ID ;

    function start() {
        if (ID=== undefined){
                show_time()
                ID = setInterval(show_time,1000);

        }



    }
    function stop() {
        clearInterval(ID);
        ID = undefined
    }




    </script>
</head>
<body>

<input type="text" id="123" value="" >
<button onclick="start()">开始</button>
<button onclick="stop()">结束</button>



</body>
</html>

location对象

1、location是地址栏的对象，对location的属性值获取到地址栏的信息，协议，域名 端口号 目录路径 参数等信息。

   <script>
        // URL: 协议  域名 端口 路径 ？作为分割符

        // 获取地址栏的全部信息
        console.log(location)
        // href: "http://localhost:63342/openAI/js-%20location.html?_ijt=pg6cohhe6qjs213rb2mno2ifk3&_ij_reload=RELOAD_ON_SAVE"

        // 获取 网络地址
        console.log(location.origin)
        // origin: "http://localhost:63342"

        console.log(location.host)
        // 获取ip+端口
        // host: "localhost:63342"

        // 协议
        console.log(location.protocol)
        // protocol: "http:"



        // 获取主机地址
        console.log(location.hostname)
        // hostname: "localhost"



        // 获取端口号
        console.log(location.port)
        // port: "63342"


        // 获取目录路径
        console.log(location.pathname)
        // pathname: "/openAI/js-%20location.html"

        // 获取参数
        console.log(location.search)
        // search  : ?_ijt=pg6cohhe6qjs213rb2mno2ifk3&_ij_reload=RELOAD_ON_SAVE



        // location url跳转的的功能 herf属性 赋值地址
        // location  assing的方法把url作为参数 传入，跳转url


        function foo() {
            // location.href= "http://www.baidu.com";
            location.assign("http://www.baidu.com")
        }


    </script>

本地存储对象

2. 游览器是父继承，每个标签页都是一个进程，js代码在标签页的进程内运行，
local本地数据存储落到游览器的文件内，游览器为每个站点分配一个存储空间，
session 存储作为进程的临时变量存储在进程内，而相同站点的标签页共享一个进程。

总结 本地存储不删除就一直存在，会话存储，当相同的站点标签页均被关闭，会话存储数据被释放.

localStorage
sessionStorage
posted @ 2023-03-13 15:49  mmszxc  阅读(29)  评论(0)    收藏  举报