js（JavaScript）：BOM對象，延遲、間隔函數，Location，Navigator，LocalStorage（SessionStorage），History，JSON

時間 2019-12-20

標籤 javascript bom 對象延遲間隔函數 location navigator localstorage sessionstorage history json 欄目 JavaScript 简体版

原文原文鏈接

BOM對象

瀏覽器相關的對象。獲取瀏覽器相關的信息，能夠設置和修改瀏覽器屬性。javascript

Windowhtml

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
//window是整個頁面最根本的一個對象,全部的全局都會成爲window對象的屬性
var bom="瀏覽器對象"
console.log(bom)
console.log(window.bom)
//結果同樣

        </script>
    </body>
</html>

瀏覽器相關的寬高信息java

setIntervalajax

setTimeout編程

clearIntervaljson

clearTimeout瀏覽器

Fetch:將來學習ajax的時候能夠用到的方法服務器

Open:打開一個新的頁面異步

outerHeight: 瀏覽器的高度編程語言

outerWidth: 瀏覽器的寬度

Alert:僅僅只是一個彈框，只有一個肯定按鈕

Comfirm:有肯定和取消按鈕的彈框，返回值分別爲true和false

Prompt：這是一個可讓用戶輸入內容的彈框。（不建議使用）

Scrollto:設置滾動條，滾動到什麼位置，語法：scrollTo(水平位置，垂直位置)

延遲函數：setTimeout

延遲一段時間執行某個函數,setTimeout有返回值，這個返回值便是setTimeout的id值。

注意：延遲函數是異步執行的。

語法1：setTimeout(函數對象，延遲多少毫秒執行)

語法2：setTimeout(函數對象，延遲時間，後面的參數皆爲函數對象的參數)

清除延遲函數：clearTimeout

語法：clearTimeout(延遲函數的ID)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
    </head>
    <body>
<script type="text/javascript">
    var wan=function(d){
        console.log("該出去玩了")
        console.log("玩"+d)
    }
    
    
    setTimeout(function(){
        wan("把妹")
    },1000)
    
    
    var id=(wan,4000,"喝酒")
        
        //清除延遲函數
        clearTimeout(id)
    
</script>
    
    </body>
</html>

間隔函數：setInterval

每隔一段時間執行一次，第一次執行也會延遲。間隔函數也是異步執行函數，會將間隔執行的函數對象，放置到內存的事件隊列裏，到了時間點，就會從事件隊列拿到主線程進行執行，主線程會根據在空閒時間點執行事件。

清除間隔函數：clearInterval

語法：clearInterval(間隔函數的ID)

異步問題案例：

var jiuba = function(doSomething){

console.log("是時候去酒吧了")

console.log("去作什麼："+doSomething)

}

var interId1 = setTimeout(function(){

jiuba("把妹")

},0)

console.log(123456)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
    </head>
    <body>
<script type="text/javascript">
    var wan=function(d){
        console.log("該出去玩了")
        console.log("玩"+d)
    }
    

    setInterval(function(){
        wan("把妹2")
    },1000)
    
    
    var id=setInterval(wan,4000,"喝酒")
        
        //清除間隔函數
        clearInterval(id)
    
</script>
    
    </body>
</html>

Location

hash: "#hotspotmining" --->頁面錨點的位置

host: "baike.baidu.com" --->主機域名

hostname: "baike.baidu.com" --->主機名稱

href: "https://baike.baidu.com/item/%E8%BF%90%E5%8A%A8/2134938#hotspotmining" --->這個頁面連接地址

origin: "https://baike.baidu.com" --->來源的域名

pathname: "/item/%E8%BF%90%E5%8A%A8/2134938" --->服務器頁面的項目路徑

port: "" --->端口號，沒有寫就是根據協議，默認的端口號

protocol: "https:" --->協議,通常是http或者是https

能夠修改路徑，跳轉至相對應的頁面

location.href = "http://www.taobao.com"

Assign:跳轉頁面：

location.assign("http://www.qq.com")

Reload:從新加載頁面

location.reload()

Replace：替換掉當前頁面

location.replace('http://www.qq.com')

注意：assign和replace是有區別的。Assign至關於跳轉到下一個頁面，因此會有返回鍵。Replace是替換掉當前頁面，因此不能返回以前的頁面。

Navigator

Navigator能夠獲取瀏覽器和系統相關的信息。

userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"

通常經過userAgent來獲取瀏覽器的信息，而且根據瀏覽器信息，發送相對於的頁面，例如是發送PC頁面仍是移動端頁面。

經過navigator判斷瀏覽器

//經過navigator來判斷訪問的瀏覽器

var userAgent = navigator.userAgent

console.log()

if(userAgent.indexOf("iPhone")!=-1 || userAgent.indexOf("Android")!=-1 || userAgent.indexOf("iPad")!=-1){

console.log("你是移動端")

//location.assign("http://m.taobao.com")

}else{

console.log("你是pc端")

//location.assign("http://www.taobao.com")

}

LocalStorage

永久性保存數據，只要你不刪除數據，數據就會永久保留。

如何使用localstorage進行增刪改查

增,修

沒有就是增，有就是修改

//localStorage.xx = 賦值內容

//localStorage.setItem("username","隔壁老王")

localStorage["like"] = "c唱t跳rRapl籃球"

刪除

localStorage.removeItem("like")

//delete localStorage.like

獲取

console.log(localStorage.username)

console.log(localStorage['username'])

console.log(localStorage.getItem('username'))

刪除全部

localStorage.clear()

SessionStorage

當次會話有效，關閉瀏覽器以後就失效了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
    </head>
    <body>
        
<script type="text/javascript">
    //如何使用localstorage進行增刪改查
    //增,修改，沒有就是增，有就是修改
    //localStorage.xx(隨便索引) = 賦值內容
    localStorage.t=("老王2")
    localStorage["like"] = "c唱t跳rRapl籃球"
    //獲取
    console.log(localStorage.t)
    console.log(localStorage['like'])
     
     
     //刪除
        localStorage.removeItem("t")
    //刪除全部
    localStorage.clear()
    
    
</script>
    
    </body>
</html>

History

只能對頁面前進後退，不能真正獲取用戶的瀏覽記錄。

history.back()

後退1個頁面

history.forward()

前進1個頁面

history.go()

語法：history.go(前進或後退的數)

正數是前進，負數是後退。

JSON

JSON(JavaScript Object Notation, JS 對象簡譜) 是一種輕量級的數據交換格式。它基於 ECMAScript (歐洲計算機協會制定的js規範)的一個子集，採用徹底獨立於編程語言的文本格式來存儲和表示數據。

Javascript obj<===>文本

案例：

var obj = {

name:"蔡徐坤",

like:["唱","跳","rap","打代碼"]

}

//將js對象轉換成json格式的字符串

var strJson = JSON.stringify(obj)

console.log(strJson)

//json字符串轉換成js對象

var jsonObj = JSON.parse(strJson)

console.log(jsonObj)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
    </head>
    <body>
        
<script type="text/javascript">
    var obj = {
        name:"楊超越",
        like:["唱","跳","rap","打代碼"]
    }
    //將js對象轉換成json格式的字符串
    var yang=JSON.stringify(obj)
    console.log(yang)
    
    //json字符串轉換成js對象
    var json=JSON.parse(yang)
    console.log(json)
    
</script>
    
    </body>
</html>