整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript学习笔记(十二)-BOM

JavaScript学习笔记(十二)-BOM

OM

  • 今天开始我们开始使用 js 去操作浏览器和页面中的 html 元素了

BOM

  • BOM(Browser Object Model): 浏览器对象模型
  • 其实就是操作浏览器的一些能力
  • 我们可以操作哪些内容
  • 获取一些浏览器的相关信息(窗口的大小)
  • 操作浏览器进行页面跳转
  • 获取当前浏览器地址栏的信息
  • 操作浏览器的滚动条
  • 浏览器的信息(浏览器的版本)
  • 让浏览器出现一个弹出框(alert/confirm/prompt)
  • BOM 的核心就是 window 对象
  • window 是浏览器内置的一个对象,里面包含着操作浏览器的方法

获取浏览器窗口的尺寸

  • innerHeight 和 innerWidth
  • 这两个方法分别是用来获取浏览器窗口的宽度和高度(包含滚动条的)
var windowHeight=window.innerHeight
console.log(windowHeight)
?
var windowWidth=window.innerWidth
console.log(windowWidth)

浏览器的弹出层

  • alert 是在浏览器弹出一个提示框
window.alert('我是一个提示框')
  • 这个弹出层只是一个提示内容,只有一个确定按钮
  • 点击确定按钮以后,这个提示框就消失了

  • confirm 是在浏览器弹出一个询问框
var boo=window.confirm('我是一个询问框')
console.log(boo)
  • 这个弹出层有一个询问信息和两个按钮
  • 当你点击确定的时候,就会得到 true
  • 当你点击取消的时候,就会得到 false



  • prompt 是在浏览器弹出一个输入框
var str=window.prompt('请输入内容')
console.log(str)
  • 这个弹出层有一个输入框和两个按钮
  • 当你点击取消的时候,得到的是 null
  • 当你点击确定的时候得到的就是你输入的内容

浏览器的地址信息

  • 在 window 中有一个对象叫做 location
  • 就是专门用来存储浏览器的地址栏内的信息的

location.href

  • location.href 这个属性存储的是浏览器地址栏内 url 地址的信息
console.log(window.location.href)
  • 会把中文编程 url 编码的格式
  • location.href 这个属性也可以给他赋值
window.location.href='./index.html'
// 这个就会跳转页面到后面你给的那个地址

location.reload

  • location.reload() 这个方法会重新加载一遍页面,就相当于刷新是一个道理
window.location.reload()
  • 注意: 不要写在全局,不然浏览器就会一直处在刷新状态

浏览器的历史记录

  • window 中有一个对象叫做 history
  • 是专门用来存储历史记录信息的

history.back

  • history.back 是用来会退历史记录的,就是回到前一个页面,就相当于浏览器上的 ?? 按钮 window.history.back()
  • 前提是你要有上一条记录,不然就是一直在这个页面,也不会回退

history.forword

  • history.forword 是去到下一个历史记录里面,也就是去到下一个页面,就相当于浏览器上的 ?? 按钮 window.history.forward()
  • 前提是你要之前有过回退操作,不然的话你现在就是最后一个页面,没有下一个

浏览器的版本信息(了解)

  • window 中有一个对象叫做 navigator
  • 是专门用来获取浏览器信息的

navigator.userAgent

  • navigator.userAgent 是获取的浏览器的整体信息
console.log(window.navigator.userAgent)
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

navigator.appName

  • navigator.appName 获取的是浏览器的名称
console.log(window.navigator.appName)

navigator.appVersion

  • navigator.appVersion 获取的是浏览器的版本号
console.log(window.navigator.appVersion)

navigator.platform

  • navigator.platform 获取到的是当前计算机的操作系统
console.log(window.navigator.platform)

浏览器的 onload 事件

  • 这个不再是对象了,而是一个事件
  • 是在页面所有资源加载完毕后执行的
window.onload=function () {
    console.log('页面已经加载完毕')
}

在 html 页面中把 js 写在 head 里面

<html>
  <head>
    <meta charset="UTF-8" />
    <script>
        // 这个代码执行的时候,body 还没有加载
      // 这个时候我们就获取不到 body 中的那个 div
      
      // 就需要使用 window.onload 事件
      window.onload=function () {
        // 这个函数会在页面加载完毕以后在执行
        // 那么这个时候页面的 DOM 元素都已经加载了,我们就可以获取 div 了
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

在 html 页面中把 js 写在 body 最后面

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div></div>
    
    <script>
        // 这个代码执行的时候,body 已经加载完毕了
      // 在这里就可以获取到 div,写不写 window.onload 就无所谓了
      
      window.onload=function () {
        // 这个函数会在页面加载完毕以后在执行
        // 那么这个时候页面的 DOM 元素都已经加载了,我们就可以获取 div 了
      }
    </script>
  </body>
</html>

浏览器的 onscroll 事件

  • 这个 onscroll 事件是当浏览器的滚动条滚动的时候触发
  • 或者鼠标滚轮滚动的时候出发
window.onscroll=function () {
 console.log('浏览器滚动了')
}

  • 注意:前提是页面的高度要超过浏览器的可视窗口才可以

浏览器滚动的距离

  • 浏览器内的内容既然可以滚动,那么我们就可以获取到浏览器滚动的距离
  • 思考一个问题?
  • 浏览器真的滚动了吗?
  • 其实我们的浏览器是没有滚动的,是一直在那里
  • 滚动的是什么?是我们的页面
  • 所以说,其实浏览器没有动,只不过是页面向上走了
  • 所以,这个已经不能单纯的算是浏览器的内容了,而是我们页面的内容
  • 所以不是在用 window 对象了,而是使用 document 对象

scrollTop

  • 获取的是页面向上滚动的距离
  • 一共有两个获取方式
  • document.body.scrollTop
  • document.documentElement.scrollTop
window.onscroll=function () {
 console.log(document.body.scrollTop)
 console.log(document.documentElement.scrollTop)
}
  • 两个都是获取页面向上滚动的距离
  • 区别:
  • IE 浏览器
  • 没有 DOCTYPE 声明的时候,用这两个都行
  • 有 DOCTYPE 声明的时候,只能用 document.documentElement.scrollTop
  • Chrome 和 FireFox
  • 没有 DOCTYPE 声明的时候,用 document.body.scrollTop
  • 有 DOCTYPE 声明的时候,用 document.documentElement.scrollTop
  • Safari
  • 两个都不用,使用一个单独的方法 window.pageYOffset

scrollLeft

  • 获取页面向左滚动的距离
  • 也是两个方法
  • document.body.scrollLeft
  • document.documentElementLeft
window.onscroll=function () {
 console.log(document.body.scrollLeft)
 console.log(document.documentElement.scrollLeft)
}
  • 两个之间的区别和之前的 scrollTop 一样

定时器

  • 在 js 里面,有两种定时器,倒计时定时器间隔定时器

倒计时定时器

  • 倒计时多少时间以后执行函数
  • 语法: setTimeout(要执行的函数,多长时间以后执行)
  • 会在你设定的时间以后,执行函数
var timerId=setTimeout(function () {
 console.log('我执行了')
}, 1000)
console.log(timerId) // 1
  • 时间是按照毫秒进行计算的,1000 毫秒就是 1秒钟
  • 所以会在页面打开 1 秒钟以后执行函数
  • 只执行一次,就不再执行了
  • 返回值是,当前这个定时器是页面中的第几个定时器

间隔定时器

  • 每间隔多少时间就执行一次函数
  • 语法: setInterval(要执行的函数,间隔多少时间)
var timerId=setInterval(function () {
 console.log('我执行了')
}, 1000)
  • 时间和刚才一样,是按照毫秒进行计算的
  • 每间隔 1 秒钟执行一次函数
  • 只要不关闭,会一直执行
  • 返回值是,当前这个定时器是页面中的第几个定时器

定时器的返回值

  • 设置定时器的时候,它的返回值是部分 setTimeout 和 setInterval 的
  • 只要有一个定时器,那么就是一个数字
var timerId=setTimeout(function () {
 console.log('倒计时定时器')
}, 1000)
?
var timerId2=setInterval(function () {
 console.log('间隔定时器')
}, 1000)
?
console.log(timerId) // 1
console.log(timerId2) // 2

关闭定时器

  • 我们刚才提到过一个 timerId,是表示这个定时器是页面上的第几个定时器
  • 这个 timerId 就是用来关闭定时器的数字
  • 我们有两个方法来关闭定时器 clearTimeout 和 clearInterval
var timerId=setTimeout(function () {
 console.log('倒计时定时器')
}, 1000)
clearTimeout(timerId)
  • 关闭以后,定时器就不会再执行了
var timerId2=setInterval(function () {
 console.log('间隔定时器')
}, 1000)
coearInterval(timerId2)
  • 关闭以后定时器就不会再执行了
  • 原则上是
  • clearTimeout 关闭 setTimeout
  • clearInterval 关闭 setInterval
  • 但是其实是可以通用的,他们可以混着使用

互联网高速发展的今天,我们通过浏览器可以看到各种各样的网站,包含了各式不同的领域还有内容,通过点击网站上的标签和栏目我们就能够很方便地看到网站上显示的各种数据,而这些都是建立在HTML这种标记语言的基础上做到的。

HTML的英文全称为Hyper Text Markup Language,中文称作超文本标记语言,是一种专门用来建立网站的标识语言。其中包括了许多标签将分散的网络数据连接到一起,聚合同一之后形成了我们现在所看到的网页。

看到这里是不是有许多朋友想要知道这个HTML语言该怎么去学习呢?是需要找老师统一学,还是去图书馆找专业书籍自己学好呢?不用担心,因为今天要给大家推荐的就是一个专门为大家提供各种编程语言教程的学习网站。

这个网站名叫 runoob,直接在浏览器上搜索即可找到。


图片来自RUNOOB网页截图

在首页可以看到该栏目的第二个就是关于HTML的学习教程,点击左边的方框可以调整你的课程进度,在第一章节的教程中很清晰地讲解了什么是HTML,以及告诉了你一些关于网站建立的小知识。

下方的提示框会给你提供一些对HTML零基础新手的科普,关于这种标记语言应该如何进行保存,如何查看文件后辍名,如何打开代码文件等等,还会提供一些专用工具供你学习使用。同时网站会给你简单介绍一些网页编程语言的区别,还有各种用途上的区分,非常地详细。


图片来自RUNOOB网页截图

在第三章节的编辑器一栏里,会提供给你一些HTML的专用编辑器,例如VS Code,还有sublime text 等实用工具,在后面会教你如何将这些HTML必备编辑器下载并安装,然后在浏览器上面运行。

通过插件还有语言编程的格式我们就能够学会如何制作第一步的标题了,刚开始的一步比较简单,相信大家很快就能学会如何在网页上显示自己打入的文字了。之后进一步的学习就是关于如何调整文字段落,还有各种标识的使用。


图片来自RUNOOB网页截图

在如何进行文字排版编辑的方面,教程中也讲述得很详细,包括一些用户们常犯的错误,还有一些网页的实例,甚至是这个教学网站上的排版示范都会进行一一讲解。

更深入的章节会对如何进行图像排列,传输等方面进行细讲,教程中把大部分网站会使用到的技巧还有排版方式都分成了许多个小片段,方便大家能够对每个方面针对性地学习。这些内容并不多,几乎每一个片段都是用很直白的语言进行讲解,方便所有人都能够看懂,并且在下方都会有更详细的术语解析,还有一些比较难懂的点会举例解释。


图片来自RUNOOB网页截图

经过十几章节的教学之后,基本上能够掌握HTML语言的基本用法,还有一些简单的操作了,这个时候如果想要进阶学习的话还可以在网站上查找其他的进阶语言用法,例如CSS, JavaScript等等复杂一些的语言,相应的你也会学到更多如何运营网页的方法。

当然如果想要自己建立一个网站的话,还需要更多资源还有设备,例如高速的网络连接保持网页的稳定性,以及稳定的服务器,用来保证自己的网页24小时都能保持流畅可用。不过这些都是在学会了如何建立网页之后才考虑的事了。



现在网上也有许多编程教学,在网上自学一门知识一门语言变得非常方便,但是仅仅是拥有资源还是不够的。学习如何建立自己的网站还需要大量的努力以及知识的积累,通过不断的练习还有实践才能自如地使用,只有基础扎实,建立出来的网站才能够长久。但还需要大家能够行动起来,只有去学习去实践才能够真正学会东西,希望这个教学网站推荐能够帮到更多人!

tml代码里,表示颜色一般用两种方法,一种是直接写出颜色的英文,另一种是前面写个“#”后面再写6个数字字母。

先说第一种表示方法,这个很简单,如果要表示黑色直接就是black,红色就red,蓝色就blue。具体的我们看下面图1,图2

图1

图2

现在来说第二种,这也是我们这个文章要重点说的,因为这个也是最经常用的表示方法,很多人看到这个又是字数又是字母的就糊涂了,今天我们来详细的把它讲清楚。先用图片来说明一下,先看下面图3

图3

图3里的#000000表示的是黑色,#ff0000表示红色,#00ff00表示绿色,所以说这个效果是和图1一样的。那要怎么理解这种表示颜色的方法呢,我们再来列出几个颜色和它的表示法:

红色:#ff0000,绿色:#00ff00,蓝色:#0000ff, 大家仔细看一下就可发现,这个和我们平常说的RGB格式来表示颜色是一样的,相当于红绿蓝三个光,而f是十六进制中的0,1,2,.....e,f中的f了 。f是里面的最大值了,ff代表该颜色光的值达到最大,所以#ff0000是红色,#880000表示的也是红色,只是没有#ff0000这个那么红了。其他的也是同理。所以#000000代表三个颜色光的值都为0,没有任何光了,那就是黑色了,相反#ffffff代表三个颜色光的值都达到最大,混合在一起就成白色。我们也知道红光和蓝光混在一起是紫色的,所以#ff00ff表示的是紫色,同样#ffff00表示的是黄色。讲到这里相信大家应该都明白了怎样用这种方法表示颜色了吧,如果要表示一种颜色,只要把相应的值增加或减小或者添加另一个颜色,这样就可以得到千千万万种颜色了。

这两种表示颜色的方法都讲完了,尤其是第二种方法,大部分情况都是用这种方法来表示html里面的颜色的。如果大家有什么更好的更容易理解的想法,可以点击关注【点点有你】一起来讨论一下哦

最后,如果您觉得我写的这些文章对您有帮助的话,您可以根据您的情况随意给点赏金,我相信一分也是爱也是支持,下面两图是我的支付宝和微信收款码。当然写文章不是一定要让您给赏金的,有您的支持和赞助,我会有更多动力来写文章和大家分享的,再次感谢您的支持和理解!