JavaScript學(xué)習(xí)筆記（十二）-BOM

OM

今天開(kāi)始我們開(kāi)始使用 js 去操作瀏覽器和頁(yè)面中的 html 元素了

BOM

BOM（Browser Object Model）：瀏覽器對(duì)象模型
其實(shí)就是操作瀏覽器的一些能力
我們可以操作哪些內(nèi)容
獲取一些瀏覽器的相關(guān)信息（窗口的大小）
操作瀏覽器進(jìn)行頁(yè)面跳轉(zhuǎn)
獲取當(dāng)前瀏覽器地址欄的信息
操作瀏覽器的滾動(dòng)條
瀏覽器的信息（瀏覽器的版本）
讓瀏覽器出現(xiàn)一個(gè)彈出框（alert/confirm/prompt）
BOM 的核心就是 window 對(duì)象
window 是瀏覽器內(nèi)置的一個(gè)對(duì)象，里面包含著操作瀏覽器的方法

獲取瀏覽器窗口的尺寸

innerHeight 和 innerWidth
這兩個(gè)方法分別是用來(lái)獲取瀏覽器窗口的寬度和高度（包含滾動(dòng)條的）

var windowHeight=window.innerHeight
console.log(windowHeight)
?
var windowWidth=window.innerWidth
console.log(windowWidth)

瀏覽器的彈出層

alert 是在瀏覽器彈出一個(gè)提示框

window.alert('我是一個(gè)提示框')

這個(gè)彈出層只是一個(gè)提示內(nèi)容，只有一個(gè)確定按鈕
點(diǎn)擊確定按鈕以后，這個(gè)提示框就消失了

confirm 是在瀏覽器彈出一個(gè)詢問(wèn)框

var boo=window.confirm('我是一個(gè)詢問(wèn)框')
console.log(boo)

這個(gè)彈出層有一個(gè)詢問(wèn)信息和兩個(gè)按鈕
當(dāng)你點(diǎn)擊確定的時(shí)候，就會(huì)得到 true
當(dāng)你點(diǎn)擊取消的時(shí)候，就會(huì)得到 false

prompt 是在瀏覽器彈出一個(gè)輸入框

var str=window.prompt('請(qǐng)輸入內(nèi)容')
console.log(str)

這個(gè)彈出層有一個(gè)輸入框和兩個(gè)按鈕
當(dāng)你點(diǎn)擊取消的時(shí)候，得到的是 null
當(dāng)你點(diǎn)擊確定的時(shí)候得到的就是你輸入的內(nèi)容

瀏覽器的地址信息

在 window 中有一個(gè)對(duì)象叫做 location
就是專(zhuān)門(mén)用來(lái)存儲(chǔ)瀏覽器的地址欄內(nèi)的信息的

location.href

location.href 這個(gè)屬性存儲(chǔ)的是瀏覽器地址欄內(nèi) url 地址的信息

console.log(window.location.href)

會(huì)把中文編程 url 編碼的格式
location.href 這個(gè)屬性也可以給他賦值

window.location.href='./index.html'
// 這個(gè)就會(huì)跳轉(zhuǎn)頁(yè)面到后面你給的那個(gè)地址

location.reload

location.reload() 這個(gè)方法會(huì)重新加載一遍頁(yè)面，就相當(dāng)于刷新是一個(gè)道理

window.location.reload()

注意： 不要寫(xiě)在全局，不然瀏覽器就會(huì)一直處在刷新?tīng)顟B(tài)

瀏覽器的歷史記錄

window 中有一個(gè)對(duì)象叫做 history
是專(zhuān)門(mén)用來(lái)存儲(chǔ)歷史記錄信息的

history.back

history.back 是用來(lái)會(huì)退歷史記錄的，就是回到前一個(gè)頁(yè)面，就相當(dāng)于瀏覽器上的 ?? 按鈕 window.history.back()
前提是你要有上一條記錄，不然就是一直在這個(gè)頁(yè)面，也不會(huì)回退

history.forword

history.forword 是去到下一個(gè)歷史記錄里面，也就是去到下一個(gè)頁(yè)面，就相當(dāng)于瀏覽器上的 ?? 按鈕 window.history.forward()
前提是你要之前有過(guò)回退操作，不然的話你現(xiàn)在就是最后一個(gè)頁(yè)面，沒(méi)有下一個(gè)

瀏覽器的版本信息（了解）

window 中有一個(gè)對(duì)象叫做 navigator
是專(zhuān)門(mén)用來(lái)獲取瀏覽器信息的

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 獲取的是瀏覽器的版本號(hào)

console.log(window.navigator.appVersion)

navigator.platform

navigator.platform 獲取到的是當(dāng)前計(jì)算機(jī)的操作系統(tǒng)

console.log(window.navigator.platform)

瀏覽器的 onload 事件

這個(gè)不再是對(duì)象了，而是一個(gè)事件
是在頁(yè)面所有資源加載完畢后執(zhí)行的

window.onload=function () {
    console.log('頁(yè)面已經(jīng)加載完畢')
}

在 html 頁(yè)面中把 js 寫(xiě)在 head 里面

<html>
  <head>
    <meta charset="UTF-8" />
    <script>
        // 這個(gè)代碼執(zhí)行的時(shí)候，body 還沒(méi)有加載
      // 這個(gè)時(shí)候我們就獲取不到 body 中的那個(gè) div
      
      // 就需要使用 window.onload 事件
      window.onload=function () {
        // 這個(gè)函數(shù)會(huì)在頁(yè)面加載完畢以后在執(zhí)行
        // 那么這個(gè)時(shí)候頁(yè)面的 DOM 元素都已經(jīng)加載了，我們就可以獲取 div 了
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

在 html 頁(yè)面中把 js 寫(xiě)在 body 最后面

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div></div>
    
    <script>
        // 這個(gè)代碼執(zhí)行的時(shí)候，body 已經(jīng)加載完畢了
      // 在這里就可以獲取到 div，寫(xiě)不寫(xiě) window.onload 就無(wú)所謂了
      
      window.onload=function () {
        // 這個(gè)函數(shù)會(huì)在頁(yè)面加載完畢以后在執(zhí)行
        // 那么這個(gè)時(shí)候頁(yè)面的 DOM 元素都已經(jīng)加載了，我們就可以獲取 div 了
      }
    </script>
  </body>
</html>

瀏覽器的 onscroll 事件

這個(gè) onscroll 事件是當(dāng)瀏覽器的滾動(dòng)條滾動(dòng)的時(shí)候觸發(fā)
或者鼠標(biāo)滾輪滾動(dòng)的時(shí)候出發(fā)

window.onscroll=function () {
 console.log('瀏覽器滾動(dòng)了')
}

注意：前提是頁(yè)面的高度要超過(guò)瀏覽器的可視窗口才可以

瀏覽器滾動(dòng)的距離

瀏覽器內(nèi)的內(nèi)容既然可以滾動(dòng)，那么我們就可以獲取到瀏覽器滾動(dòng)的距離
思考一個(gè)問(wèn)題？
瀏覽器真的滾動(dòng)了嗎？
其實(shí)我們的瀏覽器是沒(méi)有滾動(dòng)的，是一直在那里
滾動(dòng)的是什么？是我們的頁(yè)面
所以說(shuō)，其實(shí)瀏覽器沒(méi)有動(dòng)，只不過(guò)是頁(yè)面向上走了
所以，這個(gè)已經(jīng)不能單純的算是瀏覽器的內(nèi)容了，而是我們頁(yè)面的內(nèi)容
所以不是在用 window 對(duì)象了，而是使用 document 對(duì)象

scrollTop

獲取的是頁(yè)面向上滾動(dòng)的距離
一共有兩個(gè)獲取方式
document.body.scrollTop
document.documentElement.scrollTop

window.onscroll=function () {
 console.log(document.body.scrollTop)
 console.log(document.documentElement.scrollTop)
}

兩個(gè)都是獲取頁(yè)面向上滾動(dòng)的距離
區(qū)別：
IE 瀏覽器
沒(méi)有 DOCTYPE 聲明的時(shí)候，用這兩個(gè)都行
有 DOCTYPE 聲明的時(shí)候，只能用 document.documentElement.scrollTop
Chrome 和 FireFox
沒(méi)有 DOCTYPE 聲明的時(shí)候，用 document.body.scrollTop
有 DOCTYPE 聲明的時(shí)候，用 document.documentElement.scrollTop
Safari
兩個(gè)都不用，使用一個(gè)單獨(dú)的方法 window.pageYOffset

scrollLeft

獲取頁(yè)面向左滾動(dòng)的距離
也是兩個(gè)方法
document.body.scrollLeft
document.documentElementLeft

window.onscroll=function () {
 console.log(document.body.scrollLeft)
 console.log(document.documentElement.scrollLeft)
}

兩個(gè)之間的區(qū)別和之前的 scrollTop 一樣

定時(shí)器

在 js 里面，有兩種定時(shí)器，倒計(jì)時(shí)定時(shí)器 和 間隔定時(shí)器

倒計(jì)時(shí)定時(shí)器

倒計(jì)時(shí)多少時(shí)間以后執(zhí)行函數(shù)
語(yǔ)法： setTimeout(要執(zhí)行的函數(shù)，多長(zhǎng)時(shí)間以后執(zhí)行)
會(huì)在你設(shè)定的時(shí)間以后，執(zhí)行函數(shù)

var timerId=setTimeout(function () {
 console.log('我執(zhí)行了')
}, 1000)
console.log(timerId) // 1

時(shí)間是按照毫秒進(jìn)行計(jì)算的，1000 毫秒就是 1秒鐘
所以會(huì)在頁(yè)面打開(kāi) 1 秒鐘以后執(zhí)行函數(shù)
只執(zhí)行一次，就不再執(zhí)行了
返回值是，當(dāng)前這個(gè)定時(shí)器是頁(yè)面中的第幾個(gè)定時(shí)器

間隔定時(shí)器

每間隔多少時(shí)間就執(zhí)行一次函數(shù)
語(yǔ)法： setInterval(要執(zhí)行的函數(shù)，間隔多少時(shí)間)

var timerId=setInterval(function () {
 console.log('我執(zhí)行了')
}, 1000)

時(shí)間和剛才一樣，是按照毫秒進(jìn)行計(jì)算的
每間隔 1 秒鐘執(zhí)行一次函數(shù)
只要不關(guān)閉，會(huì)一直執(zhí)行
返回值是，當(dāng)前這個(gè)定時(shí)器是頁(yè)面中的第幾個(gè)定時(shí)器

定時(shí)器的返回值

設(shè)置定時(shí)器的時(shí)候，它的返回值是部分 setTimeout 和 setInterval 的
只要有一個(gè)定時(shí)器，那么就是一個(gè)數(shù)字

var timerId=setTimeout(function () {
 console.log('倒計(jì)時(shí)定時(shí)器')
}, 1000)
?
var timerId2=setInterval(function () {
 console.log('間隔定時(shí)器')
}, 1000)
?
console.log(timerId) // 1
console.log(timerId2) // 2

關(guān)閉定時(shí)器

我們剛才提到過(guò)一個(gè) timerId，是表示這個(gè)定時(shí)器是頁(yè)面上的第幾個(gè)定時(shí)器
這個(gè) timerId 就是用來(lái)關(guān)閉定時(shí)器的數(shù)字
我們有兩個(gè)方法來(lái)關(guān)閉定時(shí)器 clearTimeout 和 clearInterval

var timerId=setTimeout(function () {
 console.log('倒計(jì)時(shí)定時(shí)器')
}, 1000)
clearTimeout(timerId)

關(guān)閉以后，定時(shí)器就不會(huì)再執(zhí)行了

var timerId2=setInterval(function () {
 console.log('間隔定時(shí)器')
}, 1000)
coearInterval(timerId2)

關(guān)閉以后定時(shí)器就不會(huì)再執(zhí)行了
原則上是
clearTimeout 關(guān)閉 setTimeout
clearInterval 關(guān)閉 setInterval
但是其實(shí)是可以通用的，他們可以混著使用

互聯(lián)網(wǎng)高速發(fā)展的今天，我們通過(guò)瀏覽器可以看到各種各樣的網(wǎng)站，包含了各式不同的領(lǐng)域還有內(nèi)容，通過(guò)點(diǎn)擊網(wǎng)站上的標(biāo)簽和欄目我們就能夠很方便地看到網(wǎng)站上顯示的各種數(shù)據(jù)，而這些都是建立在HTML這種標(biāo)記語(yǔ)言的基礎(chǔ)上做到的。

HTML的英文全稱為Hyper Text Markup Language，中文稱作超文本標(biāo)記語(yǔ)言，是一種專(zhuān)門(mén)用來(lái)建立網(wǎng)站的標(biāo)識(shí)語(yǔ)言。其中包括了許多標(biāo)簽將分散的網(wǎng)絡(luò)數(shù)據(jù)連接到一起，聚合同一之后形成了我們現(xiàn)在所看到的網(wǎng)頁(yè)。

看到這里是不是有許多朋友想要知道這個(gè)HTML語(yǔ)言該怎么去學(xué)習(xí)呢？是需要找老師統(tǒng)一學(xué)，還是去圖書(shū)館找專(zhuān)業(yè)書(shū)籍自己學(xué)好呢？不用擔(dān)心，因?yàn)榻裉煲o大家推薦的就是一個(gè)專(zhuān)門(mén)為大家提供各種編程語(yǔ)言教程的學(xué)習(xí)網(wǎng)站。

這個(gè)網(wǎng)站名叫 runoob，直接在瀏覽器上搜索即可找到。

圖片來(lái)自RUNOOB網(wǎng)頁(yè)截圖

在首頁(yè)可以看到該欄目的第二個(gè)就是關(guān)于HTML的學(xué)習(xí)教程，點(diǎn)擊左邊的方框可以調(diào)整你的課程進(jìn)度，在第一章節(jié)的教程中很清晰地講解了什么是HTML，以及告訴了你一些關(guān)于網(wǎng)站建立的小知識(shí)。

下方的提示框會(huì)給你提供一些對(duì)HTML零基礎(chǔ)新手的科普，關(guān)于這種標(biāo)記語(yǔ)言應(yīng)該如何進(jìn)行保存，如何查看文件后輟名，如何打開(kāi)代碼文件等等，還會(huì)提供一些專(zhuān)用工具供你學(xué)習(xí)使用。同時(shí)網(wǎng)站會(huì)給你簡(jiǎn)單介紹一些網(wǎng)頁(yè)編程語(yǔ)言的區(qū)別，還有各種用途上的區(qū)分，非常地詳細(xì)。

圖片來(lái)自RUNOOB網(wǎng)頁(yè)截圖

在第三章節(jié)的編輯器一欄里，會(huì)提供給你一些HTML的專(zhuān)用編輯器，例如VS Code，還有sublime text 等實(shí)用工具，在后面會(huì)教你如何將這些HTML必備編輯器下載并安裝，然后在瀏覽器上面運(yùn)行。

通過(guò)插件還有語(yǔ)言編程的格式我們就能夠?qū)W會(huì)如何制作第一步的標(biāo)題了，剛開(kāi)始的一步比較簡(jiǎn)單，相信大家很快就能學(xué)會(huì)如何在網(wǎng)頁(yè)上顯示自己打入的文字了。之后進(jìn)一步的學(xué)習(xí)就是關(guān)于如何調(diào)整文字段落，還有各種標(biāo)識(shí)的使用。

圖片來(lái)自RUNOOB網(wǎng)頁(yè)截圖

在如何進(jìn)行文字排版編輯的方面，教程中也講述得很詳細(xì)，包括一些用戶們常犯的錯(cuò)誤，還有一些網(wǎng)頁(yè)的實(shí)例，甚至是這個(gè)教學(xué)網(wǎng)站上的排版示范都會(huì)進(jìn)行一一講解。

更深入的章節(jié)會(huì)對(duì)如何進(jìn)行圖像排列，傳輸?shù)确矫孢M(jìn)行細(xì)講，教程中把大部分網(wǎng)站會(huì)使用到的技巧還有排版方式都分成了許多個(gè)小片段，方便大家能夠?qū)γ總€(gè)方面針對(duì)性地學(xué)習(xí)。這些內(nèi)容并不多，幾乎每一個(gè)片段都是用很直白的語(yǔ)言進(jìn)行講解，方便所有人都能夠看懂，并且在下方都會(huì)有更詳細(xì)的術(shù)語(yǔ)解析，還有一些比較難懂的點(diǎn)會(huì)舉例解釋。

圖片來(lái)自RUNOOB網(wǎng)頁(yè)截圖

經(jīng)過(guò)十幾章節(jié)的教學(xué)之后，基本上能夠掌握HTML語(yǔ)言的基本用法，還有一些簡(jiǎn)單的操作了，這個(gè)時(shí)候如果想要進(jìn)階學(xué)習(xí)的話還可以在網(wǎng)站上查找其他的進(jìn)階語(yǔ)言用法，例如CSS, JavaScript等等復(fù)雜一些的語(yǔ)言，相應(yīng)的你也會(huì)學(xué)到更多如何運(yùn)營(yíng)網(wǎng)頁(yè)的方法。

當(dāng)然如果想要自己建立一個(gè)網(wǎng)站的話，還需要更多資源還有設(shè)備，例如高速的網(wǎng)絡(luò)連接保持網(wǎng)頁(yè)的穩(wěn)定性，以及穩(wěn)定的服務(wù)器，用來(lái)保證自己的網(wǎng)頁(yè)24小時(shí)都能保持流暢可用。不過(guò)這些都是在學(xué)會(huì)了如何建立網(wǎng)頁(yè)之后才考慮的事了。

現(xiàn)在網(wǎng)上也有許多編程教學(xué)，在網(wǎng)上自學(xué)一門(mén)知識(shí)一門(mén)語(yǔ)言變得非常方便，但是僅僅是擁有資源還是不夠的。學(xué)習(xí)如何建立自己的網(wǎng)站還需要大量的努力以及知識(shí)的積累，通過(guò)不斷的練習(xí)還有實(shí)踐才能自如地使用，只有基礎(chǔ)扎實(shí)，建立出來(lái)的網(wǎng)站才能夠長(zhǎng)久。但還需要大家能夠行動(dòng)起來(lái)，只有去學(xué)習(xí)去實(shí)踐才能夠真正學(xué)會(huì)東西，希望這個(gè)教學(xué)網(wǎng)站推薦能夠幫到更多人！

tml代碼里，表示顏色一般用兩種方法，一種是直接寫(xiě)出顏色的英文，另一種是前面寫(xiě)個(gè)“#”后面再寫(xiě)6個(gè)數(shù)字字母。

先說(shuō)第一種表示方法，這個(gè)很簡(jiǎn)單，如果要表示黑色直接就是black，紅色就red，藍(lán)色就blue。具體的我們看下面圖1，圖2

圖1

圖2

現(xiàn)在來(lái)說(shuō)第二種，這也是我們這個(gè)文章要重點(diǎn)說(shuō)的，因?yàn)檫@個(gè)也是最經(jīng)常用的表示方法，很多人看到這個(gè)又是字?jǐn)?shù)又是字母的就糊涂了，今天我們來(lái)詳細(xì)的把它講清楚。先用圖片來(lái)說(shuō)明一下，先看下面圖3

圖3

圖3里的#000000表示的是黑色，#ff0000表示紅色，#00ff00表示綠色，所以說(shuō)這個(gè)效果是和圖1一樣的。那要怎么理解這種表示顏色的方法呢，我們?cè)賮?lái)列出幾個(gè)顏色和它的表示法：

紅色：#ff0000，綠色：#00ff00，藍(lán)色：#0000ff，大家仔細(xì)看一下就可發(fā)現(xiàn)，這個(gè)和我們平常說(shuō)的RGB格式來(lái)表示顏色是一樣的，相當(dāng)于紅綠藍(lán)三個(gè)光，而f是十六進(jìn)制中的0,1,2,.....e,f中的f了。f是里面的最大值了，ff代表該顏色光的值達(dá)到最大，所以#ff0000是紅色，#880000表示的也是紅色，只是沒(méi)有#ff0000這個(gè)那么紅了。其他的也是同理。所以#000000代表三個(gè)顏色光的值都為0，沒(méi)有任何光了，那就是黑色了，相反#ffffff代表三個(gè)顏色光的值都達(dá)到最大，混合在一起就成白色。我們也知道紅光和藍(lán)光混在一起是紫色的，所以#ff00ff表示的是紫色，同樣#ffff00表示的是黃色。講到這里相信大家應(yīng)該都明白了怎樣用這種方法表示顏色了吧，如果要表示一種顏色，只要把相應(yīng)的值增加或減小或者添加另一個(gè)顏色，這樣就可以得到千千萬(wàn)萬(wàn)種顏色了。

這兩種表示顏色的方法都講完了，尤其是第二種方法，大部分情況都是用這種方法來(lái)表示html里面的顏色的。如果大家有什么更好的更容易理解的想法，可以點(diǎn)擊關(guān)注【點(diǎn)點(diǎn)有你】一起來(lái)討論一下哦

最后，如果您覺(jué)得我寫(xiě)的這些文章對(duì)您有幫助的話，您可以根據(jù)您的情況隨意給點(diǎn)賞金，我相信一分也是愛(ài)也是支持，下面兩圖是我的支付寶和微信收款碼。當(dāng)然寫(xiě)文章不是一定要讓您給賞金的，有您的支持和贊助，我會(huì)有更多動(dòng)力來(lái)寫(xiě)文章和大家分享的，再次感謝您的支持和理解！

在線咨詢

上一篇：「新消息」Node.js v14 官方發(fā)布說(shuō)明來(lái)了
下一篇：HTML表格標(biāo)簽打造微信朋友圈九宮格愛(ài)心圖

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

JavaScript學(xué)習(xí)筆記（十二）-BOM

OM

BOM

獲取瀏覽器窗口的尺寸

瀏覽器的彈出層

瀏覽器的地址信息

location.href

location.reload

瀏覽器的歷史記錄

history.back

history.forword

瀏覽器的版本信息（了解）

navigator.userAgent

navigator.appName

navigator.appVersion

navigator.platform

瀏覽器的 onload 事件

在 html 頁(yè)面中把 js 寫(xiě)在 head 里面

在 html 頁(yè)面中把 js 寫(xiě)在 body 最后面

瀏覽器的 onscroll 事件

瀏覽器滾動(dòng)的距離

scrollTop

scrollLeft

定時(shí)器

倒計(jì)時(shí)定時(shí)器

間隔定時(shí)器

定時(shí)器的返回值

關(guān)閉定時(shí)器

您的項(xiàng)目需求