Web APIs-Window对象

最新推荐文章于 2024-08-05 22:43:05 发布

风之形h

最新推荐文章于 2024-08-05 22:43:05 发布

阅读量116

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_75160723/article/details/134080201

版权

1.window对象介绍

（1）在JavaScript中window 对象表示浏览器窗口或标签页。

（2）window对象是一个全局对象，也可以说是JavaScript中的顶级对象。

（3）document、alert()、console.log()都是window的属性，基本BOM的属性和方法都是window的。

(4) window对象下的属性和方法调用的时候可以省略window

BOM对象（浏览器对象模型）

window的省略：

<body>
  <script>
    console.log(document === window.document)
    function fn() {
      alert('欢迎光临')
    }
    window.fn()  //此处window可省略

    var n = 10
    console.log(window.n)   //此处window可省略
  </script>
</body>

打开游览器窗口

打开控制台

此时会发现document 和window.document 是等价的

2.定时器延时函数

setTimeout 是 JavaScript 内置的一个用来让代码延迟执行的函数

语法：

setTimeout(回调的函数,等待的毫秒数)

setTimeout只执行一次，可以理解为把一段代码延迟执行

 <script>
    // setTimeout(回调的函数,等待的毫秒数)
    setTimeout(function () {
      //三秒之后显示
      alert('时间到了')
    }, 3000)
  </script>

三秒后自动关闭广告

<img src="./ad.png" alt="">
  <script>
    const img = document.querySelector('img')
    setTimeout(function () {
      img.style.display = 'none'
    }, 3000)
  </script>

清除延时函数：

let time = setTimeout(回调函数,等待的毫秒数)
clearTimeot(timer)

setInterval和 setTimeout的比较：

执行的次数不同：

延时函数：只执行一次

间歇函数：每隔一段时间执行一次，除非手动清除

3.JS执行机制

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

这就意味着执行的所有任务需要排队，执行完前一个任务之后，才能执行下一个任务。

如果js执行时间过长，就会导致页面渲染不连贯，于是JS中出现了同步和异步

同步：

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

比如用洗衣机洗衣服时等衣服洗好后再去拖地。

异步：

在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事

情。比如在用洗衣机中洗衣服时可以拖地。

同步任务：

同步任务都是在主线程上执行，形成一个执行栈

异步任务：

异步任务时通过调用回调函数实现的。异步任务添加到任务队列中

一般情况下，异步任务有三种类型：

普通事件，如click
加载事件，load,error
定时器，setInterval,setTimeout

执行步骤：

先执行执行栈中的同步任务
异步任务放进任务队列中
待执行完毕执行栈中的同步任务，系统会按次序读取任务队列中的异步任务，于是被读取的异步任务会结束等待状态，进入执行栈中执行。


    console.log(1)

    setTimeout(function () {
      console.log(2)
    }, 0)

    console.log(3)

 console.log(111)

    setTimeout(function () {
      console.log(222)
    }, 3000)

    console.log(333)

由此可以看出，JS会先执执行栈中的同步任务，再执行任务队列中的异步任务

在此代码中，如果在运行的三秒钟内先点击，那么此时的输出结果为：1 3 2 4

如果在运行三秒钟之后点击，那么输出结果为：1 2 4 3

4.location对象

location的数据类型是对象，它拆分并保存了URL地址的各个组成部分

常见属性和方法:

href	获取完整的地址，对其赋值时用于地址的转换
search	获取地址中携带的参数，符号？后面的部分
hash	获取地址中的哈希值，符号#后面的部分
reload	用来刷新当前的页面，传入参数true时表示强制刷新

href:

//1.href 经常用href 利用js的方法去跳转页面
    location.href = 'http://www.baidu.com'

运行之后会直接跳转到百度页面

reload:

const button = document.querySelector('button')
    button.addEventListener('click', function () {
      //相当于f5 刷新页面
      location.reload()
      //强制刷新  相当于CTRL+f5
      location.reload(true)
    })

当点击按钮时，就相当于点了浏览器上方的刷新标志。

5.navigator对象

navigator的数据类型是对象，该对象记录了浏览器自身的相关信息

常用属性和方法：

userAgent

检测浏览器的版本及平台

<script>
    // 检测 userAgent（浏览器信息）
    !(function () {
      const userAgent = navigator.userAgent
      // 验证是否为Android或iPhone
      const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
      const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
      // 如果是Android或iPhone，则跳转至移动站点
      if (android || iphone) {
        location.href = 'http://m.itcast.cn'
      }
    })()
    // (function(){})()
    // !(function(){})()
    // +function(){}()  前面可以是+ ~ !

  </script>

如果修改平台该成此时的状态该为Android，再刷新，此时会由上面的网址跳转至相应的网页

6.history对象

history对象的数据类型是对象，主要管理历史记录。

该对象与浏览器地址栏中的操作相对于，如前进、后退。

常见的属性和方法：

back()

可以后退的功能

forward()

可以前进的功能

go()

前进后退功能

参数为1 是前进参数为-1是后退

<body>
  <button>后退</button>
  <button>前进</button>

  <script>
    const back = document.querySelector('button:first-child')
    const forward = back.nextElementSibling
    back.addEventListener('click', function () {
      // history.back()
      history.go(-1)
    })

    back.addEventListener('click', function () {
      // history.forward()
      history.go(1)
    })
  </script>

此处的后退和浏览器网页中的该标志作用是一样的

风之形h

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web APIs-Window对象

（1）在JavaScript中window 对象表示浏览器窗口或标签页。（2）window对象是一个全局对象，也可以说是JavaScript中的顶级对象。（3）document、alert()、console.log()都是window的属性，基本BOM的属性和方法都是window的。(4)window对象下的属性和方法调用的时候可以省略windowBOM对象（浏览器对象模型）
复制链接

扫一扫