一、window對(duì)象
（一）常見方法
a. 打印方法
1) log() 以日志形式
window.console.log( ' 日志 ' ) // 以 日志 形式打印
2) error 以 錯(cuò)誤 的形式
window.console.error( ' 錯(cuò)誤 ' ) // 以 錯(cuò)誤 形式打印
3) warn 以 警告 的形式
window.console.warn( ' 警告 ' ) // 以 警告 形式打印
4) info 以 消息 的形式
window.console.info( ' 消息 ' ) // 以 消息 形式打印
5) debug 以 測(cè)試 的形式
window.console.debug( ' 測(cè)試 ' ) // 以 測(cè)試 形式打印
b. 彈窗方法
1) alert() 提示窗
alert( ' 提示窗 ' ) // 彈出提示窗
2) confirm() 交互窗
var isTrue = confirm( ' 交互窗 ' ) // 彈出交互窗( Boolean類型 ) ，用戶確認(rèn)是 true，取消是 false；
console.log( isTrue ) // true/false
3) prompt() 輸入窗
var str = prompt( ' 輸入窗 ' ) // 輸入窗口，返回的字符串
console.log( typeof str ) // string類型
c. 打開/關(guān)閉窗口
window.open ( url , name , [ options ] ); // 地址，title， 設(shè)置的參數(shù)（窗口的高度 寬度...）target(打開方式 _blank _self _parent)
window.close( ); // 關(guān)閉自己
eg:
open( 'http://www.baidu.com' , '百度' , 'width=100,hright=200' ) // 打開一個(gè)百度官網(wǎng)( 寬100，高200 )
close()； // 關(guān)閉了自己這個(gè)窗口
// open 還要很多其他options選項(xiàng)
// height=100 窗??度；
// width=400 窗?寬度；
// top=0 窗?距離屏幕上?的象素值；
// left=0 窗?距離屏幕左側(cè)的象素值；
// toolbar=no 是否顯??具欄，yes為顯?；
// menubar，scrollbars 表?菜單欄和滾動(dòng)欄。
// resizable=no 是否允許改變窗???，yes為允許；
// location=no 是否顯?地址欄，yes為允許；
// status=no 是否顯?狀態(tài)欄內(nèi)的信息（通常是?件已經(jīng)打開），yes為允許；
d. 移動(dòng)窗口
1) moveBy() / moveTo()
// movaBy(x: number, y: number)
moveBy( 100, 100 ) // x,y 都移動(dòng)自身的100；增加量！！
movaTo( 100, 100 ) // x,y 都移動(dòng)至100；坐標(biāo)??！
e. 設(shè)置窗口大小
1) resizeBy() / resizeTo()
//改變對(duì)應(yīng)的窗口大小
window.resizeBy(200,200) //width+200 height+200
//resizeTo
window.resizeTo(200,200) //width=200 height=200
f. 打印方法
1) print()
//print打印方法
window.print()
g. 聚焦與失焦方法
1) focus() / blur()
//focus 聚焦 blur 失去焦點(diǎn)
window.focus()
window.blur()
h. 查找方法
1) find() 相當(dāng)于ctrl+f
//find查找
window.find()
i. 滾動(dòng)欄位置改變
1) scrollBy() / scrollTo()
//滾動(dòng)欄位置改變 初始位置 x:0,y:0
// window.scrollBy( options ? : ScrollToOptions )
window.scrollBy(100,100) //原本的位置 x+100，y+100
window.scrollTo(500,500) //到達(dá)位置 x=500 y=500 //回到頂部
- window在調(diào)用方法時(shí)，通?？梢允÷詗indow，如：alter()，open()……
- 彈窗方法中，注意各個(gè)方法的返回值類型。
- 注意 By 和 To 的區(qū)別。
二、history對(duì)象
（一）屬性
a. length 歷史頁(yè)面?zhèn)€數(shù)
// 歷史頁(yè)面?zhèn)€數(shù) (本頁(yè)操作)
console.log(history.length) // 1,2,3……
b. state 狀態(tài)存儲(chǔ)的對(duì)象
// state 狀態(tài)值 null(默認(rèn))
console.log(history.state) // null
c. scrollRestoration 滾動(dòng)欄恢復(fù)
// 滾動(dòng)條恢復(fù)屬性 auto(默認(rèn)) manual(手動(dòng))
console.log(history.scrollRestoration); // auto
（二）方法
a. forward() 前進(jìn)
<button onclick=fnForward()>前進(jìn)</button>
<script>
function fnForward() {
history.forward()
}
</script>>
b. back() 后退
<button onclick=fnBack()>后退</button>
<script>
function fnBack() {
history.back()
}
</script>>
c. go() 去任意頁(yè)面 0(自己)、小于零后退，大于零前進(jìn)
<button onclick=fnGo()>GO</button>
<script>
function fnGo() {
history.go(-1)
}
</script>>
d. pushState()
<button onclick=pushState()>Push</button>
<script>
function pushState() {
// pushState( data: any, unused: string, url?: string | URL ) state數(shù)據(jù)，第二個(gè)填''，第三個(gè)地址( 跨域問(wèn)題 )
history.pushState('111','')
}
</script>>
e. replaceState()
<button onclick=replaceState()>replace</button>
<script>
function replaceState() {
// replaceState( data: any, unused: string, url?: string | URL ) state數(shù)據(jù)，第二個(gè)填''，第三個(gè)地址( 跨域問(wèn)題 )
history.replaceState('222','')
}
</script>>
三、location對(duì)象
（一）屬性
console.log(location);
// 相關(guān)屬性
console.log(location.hash); // hash #號(hào)后面的內(nèi)容(#)
console.log(location.search); // search ?號(hào)后面的內(nèi)容(?) 不與hash同時(shí)使用
console.log(location.protocol); // 協(xié)議: http: 80 https: 443
console.log(location.host); // ip號(hào) + 端口號(hào) 127.0.0.1:5500
console.log(location.hostname); // ip號(hào) 127.0.0.1
console.log(location.port); // 端口號(hào) 5500
console.log(location.pathname); // 路徑名(后面的內(nèi)容)
console.log(location.href); // 跳轉(zhuǎn)地址 (全稱) 可以設(shè)置
console.log(location.origin); // 跨域
（二）方法
a. assign() 跳轉(zhuǎn) 可以返回
function fn() {
location.assign('http://www.baidu.com')
}
b. replace() 替換 直接替換，無(wú)法返回
function fn() {
location.replace('http://www.4399.com')
}
c. reload() 重新加載(相當(dāng)于刷新)
function fn() {
location.reload(true) // true 為服務(wù)器加載 false為本地緩存加載
}
四、frames、screen、navigator
- frames與第三方框架有關(guān)
- screen為屏幕對(duì)象
- navigator為瀏覽器以及系統(tǒng)對(duì)象
（一）screen 對(duì)象
a. 屬性 (記得即可)
avaliHeight // 可占用的最大高度
avaliWidth // 可占用的最大寬度
avaliLeft // 離屏幕左側(cè)的距離
avaliTop // 離屏幕上方的距離
（二）navigator對(duì)象
a. 屬性
userAgent // 用戶瀏覽器設(shè)置信息
五、路由（拓展）
路由分為：前端路由和后端路由
前端路由：根據(jù)不同的訪問(wèn)路徑(path),渲染不同的內(nèi)容(組件)
- 頁(yè)面路由
- hash路由
- H5
