【零基础】学JS之APIS!!!

码喽小郑

于 2024-07-16 00:28:41 发布

阅读量944

点赞数 22

分类专栏：零基础学JS 文章标签： javascript

本文链接：https://blog.csdn.net/m0_74948742/article/details/140408386

版权

零基础学JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

前言

本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习web APIS的过程，俗话说，好记性不如烂笔头，小郑喜欢在学习的过程中记笔记，记下自己在学习过程中难以理解的知识点，反复练习，加深印象，希望广大网友一起监督学习，互相进步!

1. Window对象

1.1 BOM

BOM(Browser Object Model ) 是浏览器对象模型

window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的

window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模

型）

document 是实现 DOM 的基础，它其实是依附于 window 的属性。

注：依附于 window 对象的所有属性和方法，使用时可以省略 window

1.2 定时器-延时函数

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

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

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window

let timer = setTimeout(回调函数，等待的毫秒数)
clearTimeout(timer)

两种定时器的区别

setInterval 的特征是重复执行首次执行会延时

setTimeout 的特征是延时执行，只执行1次

setTimeout 结合递归函数，能模拟setnterval重复执行

clearTimeout 清除由 setTimeout 创建的定时任务

2. JS 执行机制(面试常见)

结果都是 1 3 2

JS 是单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问

题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

同步和异步

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许

JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。

同步

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

做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

异步

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

情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

他们的本质区别：这条流水线上各个流程的执行顺序不同

JS 执行机制

1. 先执行执行栈中的同步任务。

2 . 异步任务放入任务队列中。

3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务

结束等待状态，进入执行栈，开始执行。

如果有点击事件的话，会先执行点击的，再执行例如set Timeout 网络请求ajax等

3. location对象

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

常用属性和方法：

href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

search 属性获取地址中携带的参数，符号？后面部分

hash 属性获取地址中的啥希值，符号 # 后面部分

reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

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

常用属性和方法：

href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

 console.log(location.href)  // 得到 url地址   可读写
        // 给的地址是字符串  可以利用js 的方式跳转页面
        location.href = 'http://www.itcast.cn'

3.1支付跳转页面案例

需求：用户点击可以跳转，如果不点击，则5秒之后自动跳转，要求里面有秒数倒计时

分析：

①：目标元素是链接

②：利用定时器设置数字倒计时

③：时间到了，自动跳转到新的页面

<body>
    <a href="http://www.itcast.cn">支付成功，<span>5</span> 秒之后跳转首页</a>
    <script>
        let a = document.querySelector('a')
        let num = 5
        let timer = setInterval(function () {
            num--
            a.innerHTML = `支付成功，<span>${num}</span> 秒之后跳转首页`
            if (num === 0) {
                clearInterval(timer)
                // 跳转页面
                location.href = 'http://www.itcast.cn'
            }
        }, 1000)
    </script>
</body>