2021.1.21
文章目录
学习笔记(十)
BOM浏览器对象模型
BOM 概述
什么是BOM
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape(网景)浏览器标准的一部分。
DOM:
- 文档对象模型
- DOM 就是把「文档」当做一个「对象」来看待
- DOM 的顶级对象是 document
- DOM 主要学习的是操作页面元素
- DOM 是 W3C 标准规范
BOM:
- 浏览器对象模型
- 把「浏览器」当做一个「对象」来看待
- BOM 的顶级对象是 window
- BOM 学习的是浏览器窗口交互的一些对象
- BOM 是浏览器厂商在各自浏览器上定义的,兼容性较差
BOM的构成
BOM比DOM更大,它包含DOM。
window 对象是浏览器的顶级对象,它具有双重角色。
- 它是 JS 访问浏览器窗口的一个接口。
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
- 在调用的时候可以省略 window,前面学习的对话框都属于 window 对象方法,如 alert()、prompt() 等。
<body>
<script>
//window.document.querySelector()
var num = 10;
console.log(num);
console.log(window.num);
function fn() {
console.log(11);
}
fn();
window.fn();
alert(11);
window.alert(11);
console.dir(window);
//var name = 10; 最好不要用name给变量命名,因为window下有个属性就叫name
console.log(window.name);
</script>
</body>
Note:name 是 window下的一个特殊属性 window.name
window 对象的常见事件
窗口加载事件
1.window.onload = function(){} 或者
window.addEventListener(“load”,function(){});
window.onload 是窗口(页面)加载事件,当文档内容完全加载完成(包括图像、脚本文件、CSS 文件等)会触发该事件, 就调用的处理函数。
Note:
1.有了 window.onload 就可以把 JS 代码写到页面元素的上方,因为 onload 是等页面内容全部加载完毕,再去执行处理函数。
2.window.onload 传统注册事件方式 只能写一次,如果有多个,会以最后一个 window.onload 为准。
3.如果使用 addEventListener 则没有限制,可以写多个。
2.document.addEventListener(‘DOMContentLoaded’,function(){})
DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。Ie9以上才支持
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现,必然影响用户的体验,此时用 DOMContentLoaded 事件比较合适。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('点击我');
})
}
window.addEventListener('load', function() {
alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
alert(33);
})
//load 等页面内容全部加载完毕,包含页面DOM元素,图片,flash,css 等等
//DOMContentLoaded 是DOM加载完毕,不包括图片,flash,css 等就可以执行
//因此,DOMContentLoaded加载速度比load更快一些
</script>
</head>
<body>
<button>点击</button>
</body>
</html>
Note:DOMContentLoaded加载速度比load更快一些
调整窗口大小事件
window.onresize = function(){} 或者
window.addEventListener(“resize”,function(){});
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
<!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>
<script>
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
console.log(window.innerWidth); //打印屏幕宽度
//console.log('变化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<div></div>
</body>
</html>
Note:
1.只要窗口大小发生像素变化,就会触发这个事件。
2.我们经常利用这个事件完成响应式布局。 window.innerWidth 可以得到当前屏幕的宽度
定时器
两种定时器
window 对象给我们提供了 2 个非常好用的方法-定时器。
- setTimeout()
- setInterval()
1.setTimeout()定时器
语法规范:window.setTimeout(调用函数,[延迟的毫秒数]);
Note:
1.window 可以省略。
2.这个调用函数可以直接写函数,或者写函数名或者采取字符串’函数名()'三种形式。第三种不推荐
3.延迟的毫秒数省略默认是 0,如果写,必须是毫秒。
4.因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
setTimeout()这个调用函数我们也称为回调函数callback。
普通函数是按照代码顺序直接调用。
而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。
简单理解:回调,就是回头调用的意思。上一件事干完,再回头再调用这个函数。
以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的函数也是回调函数。
案例:五秒钟自动关闭广告
案例分析:
- 核心思路:5秒之后,就把这个广告隐藏起来//所有的关闭都不是消失而是看不见=>隐藏起来
- 用定时器setTimeout
<body>
<img src="图片素材/ad.jpg" alt="" class="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function() {
ad.style.display = 'none';
}, 5000)
</script>
</body>
停止setTimeout()定时器
语法规范:window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。
<body>
<button>点击停止计时器</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function() {
console.log('爆炸了');
}, 3000)
btn.addEventListener('click', function() {
clearTimeout(timer);
})
</script>
</body>
Note:
1.window 可以省略。
2.里面的参数就是定时器的标识符。
2.setInterval()定时器
语法规范:window.setInterval(回调函数, [间隔的毫秒数]);
setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。
<body>
<script>
setInterval(function() {
console.log('一秒到了');
}, 1000);
//setTimeout 延时时间到了,就去调用这个回调函数,只调用一次,就结束了这个定时器
//setInterval 每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数
</script>
</body>
Note:
1 window 可以省略。
2.这个调用函数可以直接写函数,或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
3.间隔的毫秒数省略默认是 0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。
4.因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
5.第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次。
案例:倒计时
案例分析:
- 这个倒计时是不断变化的,因此需要定时器来自动变化(setInterval)
- 三个黑色盒子里面分别存放时分秒
- 三个黑色盒子利用innerHTML 放入计算的小时分钟秒数
- 第一次执行也是间隔毫秒数,因此刚刷新页面会有空白
- 最好采取封装函数的方式, 这样可以先调用一次这个函数,防止刚开始刷新页面有空白问
题
停止setInterval()定时器
语法规范:window.clearInterval(intervalID);
clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。
<body>
<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; //全局变量 null是一个空对象
begin.addEventListener('click', function() {
timer = setInterval(function() {
console.log('一秒又一秒');
}, 1000)
})
stop.addEventListener('click', function() {
clearInterval(timer);
})
</script>
</body>
Note:
1.window 可以省略。
2.里面的参数就是定时器的标识符 。
案例:发送短信
点击按钮后,该按钮60秒之内不能再次点击,防止重复发送短信。
案例分析:
- 按钮点击之后,会禁用。disabled 为true
- 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改
- 里面秒数是有变化的,因此需要用到定时器
- 定义一个变量,在定时器里面,不断递减
- 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态。
<body>
手机号码:<input type="number"><button>发送</button>
<script>
var btn = document.querySelector('button');
var i = 10;
btn.addEventListener('click', function() {
btn.disabled = true;
btn.innerHTML = '还剩' + i + '秒';
var timer = setInterval(function() {
if (i == 1) {
//清楚定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '再次发送';
i = 10; //这个定时需要重新开始。
} else {
i--;
btn.innerHTML = '还剩' + i + '秒';
}
}, 1000)
})
</script>
</body>
this
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象。
现阶段,我们先了解一下几个this指向:
- 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
- 方法调用中谁调用this指向谁
- 构造函数中this指向构造函数的实例
JS 执行机制
JS是单线程
JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
同步和异步
为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程。于是,JS 中出现了同步和异步。
同步–执行与任务排列一致
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。
异步–执行与任务排列不一致
你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
他们的本质区别:这条流水线上各个流程的执行顺序不同。
同步任务:
同步任务都在主线程上执行,形成一个执行栈。
异步任务:
JS 的异步是通过回调函数实现的。
一般而言,异步任务有以下三种类型:
- 普通事件,如 click、resize 等
- 资源加载,如 load、error 等
- 定时器,包括 setInterval、setTimeout 等
异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。
JS执行机制
- 先执行执行栈中的同步任务。
- 异步任务(回调函数)放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event loop)。
location 对象
什么是location对象
window对象给我们提供了一个location属性用于获取或设置窗体的 URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
URL
统一资源定位符(Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL 的一般语法格式为:
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
location对象的属性
- location.href //获取或者设置整个URL
- location.host //返回主机(域名) www.itheima.com
- location.port //返回端口号。如果未写,返回空字符串
- location.pathname //返回路径
- location.search //返回参数
- location.hash //返回片段 #后面内容,常见于链接、锚点。
Note:
1.重点记住 href 和 search。
2.按F12,打开控制台可以直接输入查询。//打开jd时发现惊喜⭐️
案例:5秒钟之后自动跳转页面
<body>
<button>点击</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function() {
//console.log(window.location.href); //window可省略直接location.href
location.href = 'http://www.baidu.com';
})
var timer = 5;
div.innerHTML = '您将在' + timer + '秒终之后跳转到首页';
timer--;
setInterval(function() {
if (timer == 0) {
location.href = 'http://www.baidu.com';
} else {
div.innerHTML = '您将在' + timer + '秒终之后跳转到首页';
timer--;
}
}, 1000)
</script>
</body>
案例:获取URL参数数据
主要练习数据在不同页面中的传递。
案例分析:
- 第一个登录页面,里面有提交表单,action 提交到 index.html页面
- 第二个页面,可以使用第一个页面的参数,这样实现了一个数据不同页面之间的传递效果
- 第二个页面之所以可以使用第一个页面的数据,是利用了URL 里面的 location.search参数
- 在第二个页面中,需要把这个参数提取
- 第一步去掉? 利用 substr(‘起始的位置’,截取几个字符)
- 第二步 利用=号分割 键 和 值 split(’=’)
- 第一个数组就是键 第二个数组就是值
<!-- login.html -->
<body>
<form action="index.html">
<!-- 所有的表单要放在表单域中才可以提交要用form -->
<!-- 提交到哪个地方?提交到另外一个页面所以action='index.html'; -->
用户名:<input type="text" name="uname">
<input type="submit" value="登录">
</form>
</body>
<!-- index.html -->
<body>
<div></div>
<script>
console.log(location.search); // ?uname=andy
//1.先去掉? 用substr('起始的位置',截取几个字符)//第二个参数省略就是默认截取到最后一个
var parms = location.search.substr(1); //uname=andy
//console.log(parms);
//2.利用=把字符串分割为数组 split('=')
var arr = parms.split('=');
console.log(arr); //["uname", "andy"]
var div = document.querySelector('div');
//3.把数据写入div中
div.innerHTML = '欢迎你,' + arr[1];
</script>
</body>
location对象的方法
- location.assign() // 跟href一样,可以跳转页面(也称重定向页面)记录历史,可以后退
- location.replace() // 替换当前页面,因为不记录历史,所以不能后退页面
- location.reload() // 重新加载当前页面,相当于刷新按钮或者 f5 ,如果参数为 true ,则强制刷新 ctrl+f5
<body>
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
//记录浏览历史,所以可以实现后退功能
//location.assign('http://www.baidu.com');
//替换页面,不记录历史不可以后退
//location.replace('http://www.baidu.com');
//不加参数,是f5刷新,加参数true是ctrl+f5强制刷新(不用缓存直接服务器读取)
location.reload(true);
})
</script>
</body>
navigator 对象
navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转:
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS
|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手机
} else {
window.location.href = ""; //电脑
}
history 对象
window 对象给我们提供了一个 history 对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的 URL。
- back() // 可以后退功能
- forward() // 前进功能
- go(参数) // 前进后退功能,参数如果是1,前进一个页面;如果是-1,后退一个页面
<!-- index2.html -->
<body>
<a href="list.html">点击我去往列表</a>
<button>前进</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
history.forward();
})
</script>
</body>
<!-- list.html -->
<body>
<a href="index2.html">点击我去往首页</a>
<button>后退</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
history.back();
})
</script>
</body>
history 对象一般在实际开发中比较少用,但是会在一些 OA 办公系统中见到。
JavaScript基础阶段小结
那么,基础阶段可能暂时告一段落。10天时间学习了JavaScript的基础语法,DOM还有BOM,我不知道算入门没有,前面还有很长的路要走。其实是有一点点后悔的,大学花了很多的时间所谓感受生活,人文主义精神,体验上流,读书,看电影,喝咖啡,品尝贵腐,闻香水,看画展,玩钢笔,骑行,旅游,看世界,谈恋爱,现在看来那些小资生活对自己多少有点不合时宜,才华撑不起梦想,更现在应该做的还是应该踏踏实实一点一点学习,学习新的技术,不断进步。今天走在路上,闪过这样的想法,如果你看到这段文字才刚刚大一或者大二,你可能不懂或是不明白这样的压力,这是我追悔莫及的两年时间,我做了这样一个换算,如果要想毕业的时候工资有一万块,请在这四年里敲十万行代码。你每敲的十行代码就将会是你工资里的一块钱,而且这是永久叠加。想起茨威格的话:“命中的所有馈赠,都在暗中标好了价格。”大三下大四上的半年,认真准备考研,英语、政治、数学都倾尽全力,结果还未知,但对自己满意,可是计算机专业课却只花了很少的时间。2020年12月27号考完研,休息了十多天的时间,但会感到不踏实,压力很大,就要开始准备毕业设计,开题报告和任务书都被驳回,觉得甚是惭愧,不知道要怎样做好。但还是决定,一步一步走好。今天就是1月22日了,考研已经过去快一个月的时间,学完了JS基础,也算是除了看电影读书之外做出一点东西。下个阶段可能去学习Vue或者是Canvas,也可能是Ajax。毕设的题目是基于canvas做一个图形渲染框架,都是未知,不知道可以做到哪一步,很彷徨,很怕失望。学习前端的路算是开始了,希望可以一直坚持下去,坚持下去,我希望相信,只要开始了,永远不晚,剩下的就是每天的坚持和汗水。