【JavaScript】JavaScript开篇基础（6）

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。

如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。

当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区jj指正🗨️🗨️。让我们共同努力，一起进步！

加油，一起CHIN UP！💪💪

🔗个人主页：E绵绵的博客
📚所属专栏：

1. JAVA知识点专栏

深入探索JAVA的核心概念与技术细节

2.JAVA题目练习

实战演练，巩固JAVA编程技能

3.c语言知识点专栏

揭示c语言的底层逻辑与高级特性

4.c语言题目练习

挑战自我，提升c语言编程能力

5.Mysql数据库专栏

了解Mysql知识点，提升数据库管理能力

6.html5知识点专栏

学习前端知识，更好的运用它

7. css3知识点专栏

在学习html5的基础上更加熟练运用前端

8.JavaScript专栏

在学习html5和css3的基础上使我们的前端使用更高级

📘 持续更新中，敬请期待❤️❤️

2. BOM

BOM（Browser Object Model）是浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM 是由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

3.窗口加载事件

window.onload，是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、css文件等），就调用处理函数。

因为js是由上到下依次执行的，一般来说，我们需要按照先写标签，然后将script标签写在标签的下面的方式，但是我们可以通过window.onload来改变script标签的位置，将其放在标签上面，因为这个方法会在页面加载完毕之后才执行，所以执行这个方法的时候，页面中的DOM元素已经全部被渲染了。
<body>
    <script>
        window.onload = function () {
            var btn = document.querySelector('button');
            btn.addEventListener('click',function () {
                alert('你点我？');
            })
        }
    </script>
    <button>点击</button>
</body>
在以上代码中，我们没有按照之前的标准，将script标签写在button标签下面，但是依旧是可用的。

如果页面中存在多个window.onload，会以最后一个为准（最后一个会覆盖前面的事件）

这是传统事件存在的弊端，为了解决这一问题，我们可以使用监听事件替换window.onload
window.addEventListener('load',function () {
  
            }
这样就可以添加多个事件。

如果页面的图片非常多，那么用原来的onload要等很久等图片加载完才能执行该行为，这就会造成错误了。那么推荐使用以下方式。
document.addEventListener('DOMContentLoaded',function () {})
DOMContentLoaded 事件触发时，仅当html中元素加载完成，不包括css中代码、图片、flash等，这样就很快了。

`4.setTimeout` 定时器和`setInterval()` 定时器

window.setTimeout(调用函数,延迟的毫秒数);

window在调用的时候可以省略
单位是毫秒，省略是0秒，也就是立马执行
这个调用函数可以直接写函数，还可以写函数名（不需要带括号）

window.setInterval(调用函数,间隔毫秒数)

语法规则上与上述很相似，但与setTimeout()不同的是，setTimeout只会执行一次，但是setInterval会循环执行

5.清除定时器`setTimeout()`和`setInterval()`

使用clearTimeout(定时器名称)函数可以清除setTimeout定时器，请看如下代码
<body>
    <button>点我清除定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer1 = setTimeout(function () {
            alert('我是Jim.kk');
        },5000);
        btn.onclick = function () {
            clearTimeout(timer1);
        }
    </script>
</body>
注意在执行settimeout时给定时器名称很重要，因为当要清除它时，我们需要用到名称，执行setinterval时同理。

使用clearInterval(定时器名称)函数可以清除setInterval定时器。这里同理

6.同步与异步

JavaScript是单线程，所以同个时间只能处理同个任务，所有任务都需要排队，前一个任务执行完，才能继续执行下一个任务，但是，如果前一个任务的执行时间很长，后一个任务就不得不等着，当用户向后台获取大量的数据时，不得不等到所有数据都获取完毕才能进行下一步操作，用户只能在那里干等着，严重影响用户体验。
因此，JavaScript在设计的时候，就已经考虑到这个问题，主线程可以完全不用等待时间长的任务，可以先挂起处于等待中的任务，先运行排在后面的任务，再回过头执行挂起的时间长的任务。因此，任务就可以分为同步任务和异步任务。

其实同步和异步，
无论如何，做事情的时候都是只有一条流水线（单线程），
同步和异步的差别就在于这条流水线上各个流程的执行顺序不同。

同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务

异步任务是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程

注意如果要进入异步任务中，必须为回调函数，一般而言，回调函数有以下三种类型:

1、普通事件，如click、resize等
2、资源加载，如load、error等

3、定时器，包括setlnterval、setTimeout等

 <script>
      setTimeout(function(){
         console.log(3);
        },5000)
      console.log(1);
      console.log(2);
 </script>
执行顺序是这样的，先输出1和2等待5秒后输出3.

1. 先执行执行栈中的同步任务
2. 遇到异步任务（回调函数）就放入任务队列中
3. 一旦执行栈中的同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，被读取的异步任务结束等待状态，进入执行栈开始执行。

总的来说，JavaScript的异步机制包括以下几个步骤：

1. 所有同步任务都在主线程上执行，形成一个执行栈。
2. 主线程之外，还存在一个任务队列，只要异步任务有了结果，就会在任务队列中放置一个事件
3. 一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，然后执行。
4. 主线程不断的重复上面的第三步

7.窗口大小变化事件

window.onresize = functoin(){}
或者
window.addEventListener('resize',function () {} )
只要文档页面大小发生变化，就会触发里面的处理函数。
<body>
    <button>当宽度小于900px的时候，我就消失啦</button>
    <script>
        window.addEventListener('resize',function () {
            // console.log('变化了');
            // console.log('内高：'+window.innerHeight+'\t内宽' + window.innerWidth);
            var btn = document.querySelector('button');
            if ( window.innerWidth < 900 ) {
                btn.style.display = 'none';
            } else {
                btn.style.display = 'block';
            }
        })
    </script>
</body>
以上代码的执行效果：当我们改变浏览器框的大小的时候，当宽度小于900px，这个button按钮就会消失。

这种效果常用在一些页面元素渲染上，比如原本有四个列的某种元素，但是当页面较窄的时候，我们会隐藏其中某个列，以保证页面的正常显示。

注意innerheight指的是文档页面的高度，innerwidth指的是文档页面的宽度。

8.location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL.

以下是它属性：

这里我们只需要记住href和search 。

http://127.0.0.1:8848/testshare/location.html?lang=en&name=zhangsan#test/most

这是一个url地址。

href得到的就是这个全部url，而我们search得到的便是？后面的字符串。