资讯专栏INFORMATION COLUMN

bom笔记

teren / 2088人阅读

摘要:不写第二个参数也可以方法的返回值是一个字符串有可能为空或者,具体分成三种情况。用户输入信息,并点击确定,则用户输入的信息就是返回值。用户点击了取消或者按了按钮,则返回值是。

总结bom笔记之前,先转载一篇大佬写的文章DOM和BOM操作

一、BOM简述 1、概念

BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

2、用途

javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器)。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

二、window对象 1、概述

BOM 的核心是window对象,所有在全局作用域中声明的变量、函数、对象都会作为window的属性和方法。
例如:document也是window的属性

三、window的常用属性 1、window.innerHeight,window.innerWidth

网页的CSS布局占据的浏览器窗口的高度和宽度,单位为像素
当放大和缩小网页的时候,浏览器窗口的宽高会改变

2、滚动scoll

window.scrollX、window.scrollY 滚动条横向偏移长度/纵向偏移量

scrollTo(x,y) 让滚动条滚动到坐标为(x,y)的位置

scrollBy(x,y) 相对当前位置移动滚动条向右和向下滚动长度

举个特殊的栗子


从图中可以看出,scrollTo(x,y)能偏移的位置是有限制的。图中scrollx最大能滚动34px,这就是window窗口和网页展示width的长度差。

3、navigator(导航)

Window对象的navigator属性,指向一个包含浏览器相关信息的对象。
其中的userAgent指向当前用的浏览器种类,你用什么设备看的浏览器。比如window的chrome或者是用mac的chrome之类的

判断用户的浏览器类型

第一种通过直接比较navigator.userAgent重是否含有/Android/,/iPhone/等字样
function isAndroid(){
return /Android/.test(navigator.userAgent);
}
function isIphone(){
return /iPhone/.test(navigator.userAgent);
}
function isIpad(){
return /iPad/.test(navigator.userAgent);
}
function isIOS(){
return /(iPad)|(iPhone)/.test(navigator.userAgent);
}
第二种,使用search()函数,通过检测navigator.userAgent重是否含有Android,iPhone等字样的下标,返回值是否大于0进行判断

function isAndroid(){
  if(navigator.userAgent.search("android") >0){
    console.log("用户的浏览器类型是android")
  }
}
isAndroid()
function isIphone(){
   if(navigator.userAgent.search("iphone") >0){
    console.log("用户的浏览器类型是iphone")
  }
}
function isIpad(){
   if(navigator.userAgent.search("ipad") >0){
    console.log("用户的浏览器类型是ipad")
  }
}
function isIOS(){
   if(navigator.userAgent.search("ios") >0){
    console.log("用户的浏览器类型是ios")
  }
}
4、screen属性

screen也是window的属性,表示的查看浏览器的设备(比如电脑屏幕)的信息
缩放网页不会改变screen.width和 screen.height

alert(),prompt(),confirm() (三种不常用的和网页交互的方式)它们会弹出不同的对话框,要求用户做出回应。需要注意的是,alert()、prompt()、confirm()这三个方法弹出的对话框,都是浏览器统一规定的式样,是无法定制的

5、alert(message)

alert(message),会让浏览器发送一条消息。用户只有点击“确定”按钮,对话框才会消失。在对话框弹出期间,浏览器窗口处于冻结状态,如果不点“确定”按钮,用户什么也干不了。

alert("hello,浏览器告诉我谁是世界上最美的女人,是我吗")

6、prompt(text[, default])

prompt方法弹出的对话框,在提示文字的下方,还有一个输入框,要求用户输入信息,并有“确定”和“取消”两个按钮。它往往用来获取用户输入的数据

prompt("我是不是最帅的程序员","yes")

有两个参数,第二个是预设的回答值。不写第二个参数也可以

prompt方法的返回值是一个字符串(有可能为空)或者null,具体分成三种情况。

用户输入信息,并点击“确定”,则用户输入的信息就是返回值。

用户没有输入信息,直接点击“确定”,则输入框的默认值就是返回值。

用户点击了“取消”(或者按了Escape按钮),则返回值是null。

7、confirm(message)

除了提示信息之外,只有“确定”和“取消”两个按钮,往往用来征询用户的意见

三、URL的编码/解码方法

先看一下若愚老师写的博客聊一聊编码与乱码

1:URL 编码的原因

URL 只能使用 ASCII 字符集来通过因特网进行发送,也就是说URL只能使用英文字母、阿拉伯数字和某些标点符号,不能使用其他文字和符号,所以需要对URL里面的特殊字符进行编码

2:编码方式

1)、encodeURI()
主要针对整个url编码,对于url本身有些的特殊字符不会进行编码。比如~!@#$&*()=:/,;?+" 和ASCII字母、数字不会编码
2)、encodeURIComponent()
用于对URL的组成部分COMponent(成分)进行个别编码,而不用于对整个URL进行编码。编码范围比encodeURI()宽,只有~!*()"和ASCII字母、数字不会编码

3:解码方式

1)、decodeURI()
和encodeURI()对应的解码方式,不能解encodeURIComponent()的码
2)、decodeURIComponent()
和encodeURIComponent()对应的解码方式

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99530.html

相关文章

  • JavaScript 一些有关 BOM笔记

    摘要:但是如果你在别的页面比如在百度搜索结果页面上,运行上面的代码,会发现窗口不会被移动位置,也不会被改变宽度高度。 JavaScript 一些有关 BOM 的笔记 原文链接 浏览器窗口 参看我以前的文章: 一些窗口滚动和窗口、元素宽度高度的 Web APIs window.open() var win = window.open(URL,name,specs,replace) // wi...

    PrototypeZ 评论0 收藏0
  • 《JavaScript高级程序设计》笔记BOM(八)

    摘要:浏览器对象模型提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。对象基本上只用来表明客户端的能力。 BOM(浏览器对象模型)提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。 window对象 全局作用域 定义全局变量与在window对象上直接定义属性还是有一点差别:全局变量不能通过delete操作符删除,而直接在window对象上的定义的属性可以。 v...

    mushang 评论0 收藏0
  • JavaScript高级程序设计学习笔记一(JavaScript简介)

    摘要:在上百种语言中算是命好的一个,还有就是最近纳入高考体系的。由以下三个部分构成。就是对实现该标准规定的各个方面内容的语言的描述。是针对但经过扩展的用于的应用程序编程接口。将页面映射为由节点构成的树状结构。 JavaScript的历史这里就不再赘述了,当然JavaScript的历史还是比较有意思的。在上百种语言中JavaScript算是‘命’好的一个,还有就是最近纳入高考体系的python...

    supernavy 评论0 收藏0
  • JS学习笔记(第8章)(BOM

    摘要:间歇调用和超时调用超时调用表示在指定时间后执行代码要执行的代码,以毫秒表示的时间超时调用注意经过一定时间后改代码也不一定执行,因为是一个单线程解释器,任务会按照队列执行,经过该时间将任务添加到队列中。 1、window对象 BOM的核心对象是window,它表示浏览器的一个实例。window既是通过Javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global...

    Cruise_Chan 评论0 收藏0
  • 基础笔记——JS简介和如何在HTML中使用JavaScript

    摘要:作用提供访问和操作网页内容的方法和接口浏览器对象。部分就好像基于地基设计整座房子的布局,则是房子的装修。如何在中使用方法一直接在网页中嵌入代码你的代码方法二通过外部文件链接进文档中推荐,并且常用注标签中还有其他属性,如有需要可查询手册。 JavaScript是一门编程语言,编程语言,编程语言! JavaScript实现的组成部分 ECMAScript:语言核心。 组成部分:语法,...

    khlbat 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<