学编程,来源栈;先学习,再交钱
当前系列: Javascript入门 修改讲义
除了HTML文档,JavaScript还可以和浏览器进行交互。

BOM

Browser Object Model,浏览器对象模型。

实质上就是为浏览器建立一个对象模型,该对象提供了一系列的方法(又称API)供开发人员使用。比如:alert()方法。

观察:不同的浏览器调用alert()会有不同的呈现效果,这就是因为alert()的实现效果是由浏览器决定的原因。

目前BOM还没有统一的标准(所以有浏览器兼容性问题),但常用的大部分对象/方法/属性都是相同的。


window对象

alert()实际上也是window对象的方法:
window.alter('天上地下,唯我独尊!')
在BOM中,window就代表浏览器,是JavaScript运行环境中“最顶级”的对象,所以调用window对象的方法和属性,都可以直接省略前面的window。

弹出窗口

alert(message):单纯显示message

confirm(message):要求用户确认,返回bool值

prompt(message):返回值接收用户输入

导航

open(url)

打开一个新窗口

open('http://17bang.ren')    //默认_blank,新页面打开
open('http://17bang.ren', '_self')    //当前页面打开

location

href属性:

location.href   //获取当前url/href的值
//跳转到“一起帮”
location.href='http://17bang.ren' 
注意这种模式,在BOM/DOM中都非常常见:给属性赋值之后就立即自动执行。以下url部分(segment)也是可以获取和改变的:
location.host    //含port,如"localhost:57210"
location.hostname    //不含port,如"localhost"
//端口,如"57210",注意仅根据href解析,不会显示隐藏的默认端口location.port    
location.pathname    //路径,如"/htmlpage.html"
location.search    //url参数,如"?id=3"

reload([true|false]) 方法:重新加载当前页面

location.reload(true);    //清除缓存
location.reload();    //不清除缓存,同reload(false);
其他不常用的,页面“跳转”方法:
  • replace(url) :用指定的url替换当前页面,所以当前页面会被记录在“浏览历史”中
  • assign(url):区别:是否会被记录在“浏览历史”中
演示:
 

history

浏览历史对象

  • back() :后退
  • forward() :前进
  • go(n):跳转到某一个历史页,n用正负整数:
    • 正数向前,go(1) 同 forward(),还可以go(2),go(3)
    • 负数向后,go(-1) 同 back(),还可以go(-2),go(-3)

其他

navigator:查看浏览器信息,常用的有:

navigator.language    //如:"zh-CN"
//以前有开发人员用userAgent判断浏览器,但这是不可靠的……
navigator.userAgent    //如:"Mozilla/5.0 (Windows NT 10.0;…… 

screen:显示器相关信息,如width/height……


定时器

观察我们“一起帮”导航栏上有一个闪烁的铃铛,它实际上是每隔若干时间(比如100毫秒)改变一次铃铛的颜色实现的。

这就需要用到两个非常类似的方法:

  • setTimeout(handler, milionseconds) :过多久(milionseconds)之后开始执行handler
  • setInterval(handler, milionseconds):每隔多久(milionseconds)执行一次handler

这里面的handler不是一个数据,而是一个回调函数复习

并进一步#理解#为什么需要回调:

  1. 在定义(是“定义”)setTimeout()时,(定义该函数的)开发人员不知道:以后要调用该函数的开发人员究竟要计时器做什么;
  2. 所以,他只能在setTimeout()中定义一个函数参数handler,然后在setTimeout()方法中再调用handler()。
function smart() {
    console.log(`飞哥帅呆了`);
}

setTimeout(smart, 2000);
//setInterval(smart, 500);

注意:在setTimeout()中的smart是没有括号的!@想一想@:如果加了括号会怎样?

setTimeout()实现间隔

有时候你会看到这样的写法:

function smart() {
    setTimeout(() => {
        console.log(`飞哥帅呆了`);
        smart();
    }, 500);
}

smart();

@想一想@

  1. 这样运行之后会是怎么样的一种效果?(类似于setInterval)
  2. 这算不算递归?(我个人认为不算)

这样做和setInterval()的区别在哪里呢?可以为每一次执行设置不同的时间间隔:

function smart() {
    let interval = Math.random()*1000;
    console.log(interval);
    setTimeout(() => {
        console.log(`飞哥帅呆了`);
        smart();
    }, interval);
}
#试一试#:用setInterval()能不能实现?

参数传递

假如回调函数需要参数:

function smart(sname) {
    console.log(sname + '帅呆了');
}
@想一想@:怎么办?

首先是可以使用匿名函数包裹复习):

setInterval(function () {
    smart('飞哥')
}, 100);
还可以引入一个(#试一试#:传入两个?会toggle轮换)额外的参数:
setInterval(smart, 1000, '廖光银');

异步

复习并演示执行顺序

setTimeout(() => {    //①
    console.log(`我在setTimeout中`);    //③
}, interval);
console.log(`我在setTimeout之后`);    //②

这种异步执行的方式很容易让初学者的代码产生bug:

let i= 0;
setTimeout(() => {
    i++;
}, 100);
console.log(i);    //输出的i值是多少?

#理解#:JavaScript是单线程可异步的语言,JavaScript处理异步的方法简单粗暴,把所有的异步方法扔最后面执行

#体会#:线程和异步没有直接关系

停止执行

有时候我们需要停止定时器的执行,怎么办呢?控制台演示

  1. setTimeout()和setInterval()都有一个返回值,代表这个定时器的id
  2. 调用clearTimeout()或clearInterval()方法,传入其id,就可以终止

注意这个停止执行何时触发/被调用?

let i = 0;
let timerId = setInterval(function () {
    i++;
    console.log('小伙子帅呆了……');
}, 200)

// if (i > 5) {
    clearInterval(timerId);
// }
演示定时器
  1. 来不及执行就被停止
  2. 不会被停止
  3. 被正确停止

定时器还可以配合Ajax实现短轮询。


作业

本章作业名为:bom.html

  1. 一个“前一页”按钮,点击可以跳到上一页;一个“下一页”按钮,点击可以跳到下一页;
  2. 一个a标签,点击不会跳转到href指定页面,而是将href的值赋值给下面的一个文本框(学习事件之后完成)
  3. 一个“转到”按钮,点击该按钮页面可跳转到文本框指定的网址页面

  4. 实现铃铛闪烁效果
  5. 实现n张图片每隔1秒切换,自动播放的效果(能有“滑动”效果更佳)
  6. 实现源栈课堂首页的代码自动显示效果,注意每个单词显示间隔的时间应该是随机的。


学习笔记
源栈学历
键盘敲烂,月薪过万作业不做,等于没学

作业

觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

在当前系列 Javascript入门 中继续学习:

多快好省!前端后端,线上线下,名师精讲

  • 先学习,后付费;
  • 不满意,不要钱。
  • 编程培训班,我就选源栈

更多了解 加:

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧

公众号:源栈一起帮

二维码