当前位置: 首页 > 开发杂谈 >

追求JS小姊姊系列 Day27 -- 从哪里BOM出来的青梅竹马!

前情提要:

工具人揭露了残酷事实,JS有一个青梅竹马的存在!

: 到底是怎麽样的人物?
工具人们:他叫刘览气,比我们强多了,拥有更多的能力。


简单认识 刘览气

JavaScript本身并没有提供网页的操作方法,也就是说网页的操作都是由浏览器本身所提供

浏览器内的JavaScript包含了:

  1. JavaScript核心
  2. BOM
  3. DOM

其中BOM DOM的部分是由浏览器执行环境提供,所以两者在node环境下不会存在。


BOM

全名为:Browser Object Model,中文译名为:浏览器物件模型

BOM也是一个物件,它提供了许多properties让我们去跟浏览器沟通与操作

在浏览器里 window扮演两种角色:

  1. ECMAScript标准的全域物件
  2. JavaScript与浏览器的沟通窗口

作为沟通窗口,这件事怎麽说呢?
让我用promt,confirm,alert沟通给你看:

alert 单纯跳出讯息

confirm 跳出有选项的讯息

promt 跳出输入选项的讯息

那除了作为窗口外,BOM是以window物件作为核心,包含了:

以下会简单带到几个语法:

navigator

用来存取使用者的浏览器资讯。

例如可以使用language 查询使用者偏好的语言,它是一个唯读的属性,回传值为字串。

navigator.language()

location

跳转到特定页面可以用href或是replace

使用href

window.location.href = "https://diarysophie.gitbooks.io/web-development/content/chapter5.html"

使用replace

window.location.replace = "https://diarysophie.gitbooks.io/web-development/content/chapter5.html"

两者的差异

使用replace来换页,虽然在document.referrer会纪录前一页的网址,但无法使用history的方式来返回。

history

常用的方法 -- 页面移动

  1. 移动(往前往後皆可): window.history.go()
    当你输入负值(-1),等於是往前一页
window.history.go(-1) === window.history.back()
// true

因此类推,当你输入正值(1),就等於是往下一页

  1. 往前一页: window.history.forward()
  2. 往下一页: window.history.back()

虽然我们透过history在不同页面移动,但基於隐私问题,无法取得详细网址。


screen

会回传当前萤幕的各种资讯,包含萤幕宽高、甚至是色彩深度(colorDepth)

window.screen()

色彩深度数字代表的是可包含的色彩种类以及色彩呈现的准确度。
越高的越准确,以笔者的笔电来说,回传值为24,可包含1600万种色彩。

-- to be continued --


那今天就到这边搂!
每天的休息,是为了後面的追求,明天见。


reference:

008
浏览器物件模型 BOM


相关文章:

  • 【Day 21】Go 基础小笔记 II(pointer / array / slice / map / struct)
  • 【Day 26】SwiftUI - Drawing and Animation
  • Prime Day期间约20%美国购物者计划支出300美元以上
  • 废文好多,来搞个粉丝专页吧!
  • lazada直播间成功因素——人
  • [Day12]ISO 27001 标准:验证范围
  • 跨境电商提前布局掌握五大战略品类
  • Day06:【TypeScript 学起来】资料型别那些事 : 总览
  • NIST风险管理框架(RMF)-系统分类
  • Day-19: 咩啊抓产生假资料,让我们来使用factory_bot
  • 抓住这4点要领,助你愉快与老外邮件沟通
  • 跨境物流坑太多?迷茫中不知如何选择?
  • 买菸赔菸 - 零股买卖
  • 亚马逊的长描述究竟该如何写?
  • Lazada客服技巧-快速回复
  • SiteGround主机评测和推荐
  • WordPress 通过代码实现 Ajax 自动完成搜索
  • Python安装教程:怎么安装Python
  • WordPress 5.7 引入新钩子,用于过滤单个区块的内容
  • 国外抗攻击服务器推荐:DDOS高防服务器推荐
  • 软件分享:xshell6/xftp6个人版下载,无需破解,永久免费使用
  • Monzo Bank教程:英国银行卡申请教程【教你国内注册申请欧洲银行卡】
  • DNS是什么?DNS有什么用?为什么要用DNS解析域名
  • 香港电话卡怎么在内地使用: CSL Hello/Three/CMHK/Smartone电话卡内地使用方法
  • 简单做WordPress网站的方法:最快最便宜的做外贸网站的方法
  • 建网站要多少钱?企业和个人建站费用分析和建站注意事项
  • 俄取消商品知识产权限制 盗版游戏、电影等商标合法化
  • 如何引导用户快速购买下单的冲动?引导用户购买行为的方法(Call To Action)
  • 日本虚拟信用卡预付卡礼品卡大全
  • VPS优惠:搬瓦工香港VPS补货/G口/KVM/月付9.9美元