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()對應的解碼方式