bom笔记

总结bom笔记以前，先转载一篇大佬写的文章DOM和BOM操做

1、BOM简述

一、概念

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

二、用途

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

2、window对象

一、概述

BOM 的核心是window对象，全部在全局做用域中声明的变量、函数、对象都会做为window的属性和方法。
例如：document也是window的属性

3、window的经常使用属性

一、window.innerHeight，window.innerWidth

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

二、滚动scoll

• window.scrollX、window.scrollY 滚动条横向偏移长度/纵向偏移量
• scrollTo(x,y) 让滚动条滚动到坐标为(x,y)的位置
• scrollBy(x,y) 相对当前位置移动滚动条向右和向下滚动长度

举个特殊的栗子

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

三、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')
  }
}

四、screen属性

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

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

五、alert(message)

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

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

六、prompt(text[, default])

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

prompt('我是否是最帅的程序员','yes')

有两个参数，第二个是预设的回答值。不写第二个参数也能够

prompt方法的返回值是一个字符串（有可能为空）或者null，具体分红三种状况。

• 用户输入信息，并点击“肯定”，则用户输入的信息就是返回值。
• 用户没有输入信息，直接点击“肯定”，则输入框的默认值就是返回值。
• 用户点击了“取消”（或者按了Escape按钮），则返回值是null。

七、confirm(message)

除了提示信息以外，只有“肯定”和“取消”两个按钮，每每用来征询用户的意见

3、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()对应的解码方式