JavaScript基础——BOM基础

程序员文章站 2022-07-15 15:46:55

...

写在前面的反思

BOM笔记

写在前面的反思

用了大概一个星期的时间吧，把DOM的基础知识点和对应的一些案例过了一遍。其实我也没有严格要求自己在多长多长时间内去学完多少多少知识或者看完哪部分知识。我都是看视频、记笔记，然后再整理整理笔记，练习练习视频里面的案例，敲敲代码，整理思路。就是在敲代码的过程中要试着去复述案例的思路，核心点这些，不然也会忘记的。

反正在练习案例敲代码的过程中，尽量自己去完成，如果遇到不懂得点或者案例出问题了，再回头看看视频，然后看看自己哪些地方没有考虑到，再去纠正。我的整个学习过程就是这样，前期肯定是去模仿别人得代码，慢慢的时间长了，就有手感了，渐渐的就可以自己去实现一些好玩的效果了。

对我自己来说吧，我还是在模仿别人的效果，看别人写代码，看别人的页面效果，然后自己去做一些小部分功能的实现。总的来说，目前还是挺好的，都是一些基础问题，也是我认为前端人员必须要走的过程。还是有很多东西要学要去搞明白的。加油鸭！！

反思结束。。。。。。

BOM笔记

暂时结束DOM的学习，因为还是接触的是基础部分，一些高级操作目前还没有涉及到。紧接着就开始了BOM的学习。

先附上我的笔记吧。emmmmmmmm...... 可能有点白话文，还有点草，但是结合案例的话，是很好理解的。

###BOM
BOM概述
浏览器对象模型，浏览器是一个对象。
BOM提供了独立于内容而与浏览器窗口进行交互的对象，核心是window
BOM构成
BOM由document、location、navigation、screen、history构成。
window是浏览器的*对象，有双重身份
a.是js访问浏览器窗口的一个接口
b.是一个全局对象，定义在全局作用域中的变量和函数都会变成window对象的属性和方法
window对象在调用时可以省略
###window
常用事件
窗口加载事件
onload事件：当文档内容完全加载完成后会触发事件(所有内容包括图片、脚本文件等)
DOMContentLoaded事件：当DOM加载完成后会触发事件(这里不包括图片等文件)
DOMContentLoaded加载速度会比onload加载速度稍快
使用这些窗口加载事件，script标签就不用刻意放在body的最后了，可以放在任意位置
窗口大小事件
onresize事件：使用window.innerWidth和innerHeight来控制触发事件的。
当浏览器的宽度或者高度变化1px就会触发事件

###定时器(两个方法)
setTimeout(调用函数[,延时时间])
window.setTimeout(),在调用定时器方法时，可以省略window
调用函数就是我们的执行函数，也叫回调函数。
回调函数：就是先执行其他事情，当时间到了，再回头调用函数，就叫回调函数(callback)
延时时间：单位ms，不写默认是0ms，要是写时间的话必须是ms。这个参数是指定什么时间触发事件。
setInterval(调用函数，间隔时间)
调用函数：回调函数
间隔时间：数值，单位ms。间隔多久调用一次回调函数
倒计时效果
两种方法的区别
setTimeout是调用一次回调函数，setInterval是不断调用回调函数

停止定时器
clearTimeout(timeID) 参数是定时器的标识符(名字)
clearInterval(intervalID) 参数是定时器的标识符(名字)
通常一个文档中定时器比较多，为了方便管理应用这些定时器，
一般会给定时器起名字也是标识符(赋值给一个变量保存)。
var time = setTimeout(function(){},2000) 页面加载完成后2s触发
var timer = setInterval(function(){},1000) 页面加载完成后，每间隔1s就触发

###JS执行机制
JS是单线程，同一时间只能做一件事，这就意味着，所有任务都需要排队，前一个任务结束后才会执行后一个
任务。这样所导致的问题是：如果js执行的时间过长，就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

解决上述问题：同步和异步——允许js创建多个线程
同步：主线程执行栈
同步是指，程序执行顺序与任务排列顺序一致
举例：做饭时，要烧水-洗菜-炒菜，执行顺序：烧水(必须稍晚水才进行下一步)——洗菜——炒菜
异步(回调函数实现)：任务队列(回调函数是异步进行)
异步是指：同时可以做多个任务
举例：做饭，烧水时，同时可以洗菜炒菜一起进行。

js代码执行过程
程序先从主线程的执行栈执行，然后去任务对列找异步任务，把异步任务放到执行栈的最后。
当主线程执行栈中的所有同步任务执行完毕后，再执行异步任务。直至完毕后，异步的任务队列清空
主线程执行栈还会检测异步任务队列是否还有任务的存在。

由于主线程不断重复获得任务、执行任务、再获得任务、再执行任务，所有这样的机制成为事件机制(Event Loop)

###this的指向问题
this的指向在函数定义时是决定不了的，只有函数执行时才能确定this到底指向谁。
一般情况下this最终指向的是那个调用它的对象。
1.全局作用域、普通函数、定时器的this——> window
2.方法调用中，this指向，调用方法的对象。谁调用方法this指向谁
3.构造函数：this指向构造函数的实例化

案例说明

常用事件

窗口加载事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // window是BOM的*对象
        // 常用事件　窗口加载事件　window.onload \ window.DOMContentLoaded
        // onload事件是在文档所有内容(包括图片、脚本、css文件等)都加载完成之后，才执行的
        // DOMContentLoaded事件是在所有DOM标签加载完成后执行，不包括图片等
        // 简单来说，就是一个是把网页中的所有信息加载完成后，在执行js代码，用户体验差。另一个是
        // 只需把标签加载完成，js代码就会执行，就算图片之类加载慢的元素没有出来，但是功能还是能用的。
        window.onload = function () {
            console.log(11);
        }
        var div = document.querySelector('div');
        window.onresize = function () {
            if (window.innerWidth < 900) {
                div.style.display = 'none';
            } else {
                div.style.display = 'block';
            }
        }
    </script>
</body>

</html>

定时器

主要是讲解两个方法的使用。

<!DOCTYPE html>
<html lang="en">

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

<body>
    <button class="btn">点击暂停定时器</button> <br> <br>
    <script>
        setTimeout(function () {
            console.log('定时2s，弹出此文字');
        }, 2000);
        // textChange 是回调函数的名称
        var timer = setInterval(textChange, 1000);

        function textChange() {
            console.log('每隔1s，就会重复出现此文字');

        }
        // 点击按钮时，清除定时器
        var btn = document.querySelector('.btn');
        btn.addEventListener('click', function () {
            clearInterval(timer); // 清除定时器时，参数是定时器的名字
        })
    </script>
</body>

</html>

点击按钮，停止定时器

JavaScript基础——BOM基础

停止定时器的应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发送消息</title>
</head>

<body>
    请输入手机号：<input type="tel"> <button>发送</button>
    <script>
        // 点击发送后，按钮禁用，并且内容变为倒计时的内容
        // 按钮点击后，内容是变化的，所以需要用到定时器
        // 倒计时时间到了，按钮恢复原状
        var btn = document.querySelector('button');
        var sec = 3; // 定义倒计时的时间
        btn.addEventListener('click', function () {
            btn.disabled = true;
            // 添加倒计时效果
            var time = setInterval(function () {
                if (sec == 0) {
                    // 倒计时时间到了，需要停止倒计时，并且按钮回复原状态
                    clearInterval(time);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还有' + sec + '秒才能发送';
                    sec--;
                }
            }, 1000);

        })
    </script>
</body>

</html>

效果：里面的秒数是变化的

JavaScript基础——BOM基础

this指向问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this指向</title>

</head>

<body>

    <script>
        // 1.全局作用域(window)、普通函数、定时器
        console.log(this); // window
        function text() {
            console.log(this); // window
        }
        window.text();
        var time = setTimeout(function () {
            console.log(this); // window

        }, 2000)
        // 2.方法的调用
        var obj = {
            sayHi: function () {
                console.log(this); // this指向调用次方法的obj对象
            }
        };
        obj.sayHi(); // obj
        // 3.构造函数
        function Only() {
            console.log(this); // this指向 Only的实例对象 

        }
        var person = new Only();
    </script>
</body>

</html>

输出结果：

JavaScript基础——BOM基础

JS执行机制

同步：主线程执行栈

异步：任务队列

    <script>
        // 问题1
        console.log(1);
        setTimeout(function () {
            console.log(4);
        }, 1000)
        setTimeout(function () {
            console.log(3);
        }, 1000)
        console.log(2);
        // 1 2 4 3
        // 问题2
        console.log(1);
        setTimeout(function () {
            console.log(4);
        }, 0)
        setTimeout(function () {
            console.log(3);
        }, 0)
        console.log(2);
        // 1 2 4 3
        // 问题3
        console.log(1);
        // 没有触发点击事件时，异步的任务队列中是没有这个事件的
        document.onclick = function () {
            console.log('click');
        }
        console.log(2);

        setTimeout(function () {
            console.log(3);
        }, 3000)
    </script>

输出结果：

问题1和问题2

JavaScript基础——BOM基础

问题3：

JavaScript基础——BOM基础

一定要深入理解JS执行机制！！！

相关标签： Web—第一阶段 # Javascript基础 BOM JS执行机制定时器 javascript

上一篇： Struts2-052漏洞分析

下一篇： JavaScript 立即执行函数

JavaScript基础——BOM基础

写在前面的反思

BOM笔记

案例说明

常用事件

定时器

this指向问题

JS执行机制

vuex state及mapState的基础用法详解

python基础篇之day01

JavaScript之Vue.js【入门基础】

Javascript基础-变量和数据类型

通过提前bake Docker镜像加快基础设施的启动速度

Linux基础之正则表达式，用户、组管理命令介绍

php基础学习之变量的使用

Java基础部分学习day1_HelloWord

pandas1:pandas基础

大四学长教你利用Python写一款超级玛丽！零基础也会！超级装逼！