BOM objects

Object Browser related. Access to information related to the browser, the browser can be set and modify the properties.

Window

<! DOCTYPE HTML > 
< HTML > 
    < head > 
        < Meta charset = "{} the CHARSET" > 
        < title > </ title > 
    </ head > 
    < body > 
        < Script type = "text / JavaScript" > 
// window entire the most fundamental object page, will become the property of all the global window object 
var BOM = " browser object " 
console.log (BOM) 
console.log (window.bom) 
// as the result 

        </ Script > 
    </body>
</html>

Width and height information related to browser

setInterval

setTimeout

clearInterval

clearTimeout

Fetch: Future Learning ajax method can be used when

Open: open a new page

outerHeight: height browser

outerWidth: width of the browser

Alert: just a bomb box, only an OK button

Comfirm: a bomb block OK and Cancel buttons returns values of true and false

Prompt: This is one that will allow the user to enter content playing box. (Not recommended for use)

Scrollto: set the scroll bar to scroll what position, Syntax: the scrollTo ( horizontal position, vertical position )

Delay function: the setTimeout

Delayed for some time to execute a function , setTimeout return value, the value returned is setTimeout the id value.

Note: The delay function is executed asynchronously.

Syntax 1 : the setTimeout ( function object, how many milliseconds delay )

Syntax 2 : the setTimeout ( function object, the delay time, the parameters are all parameters of the latter function object )

Clear Delay function: clearTimeout

Syntax: the clearTimeout ( delay function 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 ( " the sister " ) 
    }, 1000 ) 
    
    
    var ID = (WAN, 4000 , " drink " ) 
        
        // clear the delay function 
        the clearTimeout (ID) 
    
</ Script > 
    
    </ body > 
</ HTML >

Interval function: setInterval

Every so often executed once, the first execution will be delayed. Interval function is executed asynchronously function, function object will intervals, and placed into the memory of the event queue, to the point of time, it will get the main thread execution, the main thread will execute the event according to the idle time points from the event queue.

Clear interval function: clearInterval

Syntax: the clearInterval ( interval function ID)

Asynchronous problem cases:

var jiuba = function(doSomething){

console.log ( " it's time to hit the bars .")

console.log ( " what to do: " + doSomething)

}

var interId1 = setTimeout(function(){

jiuba ( " the sister ")

},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 ( " the sister 2 " ) 
    }, 1000 ) 
    
    
    var ID = the setInterval (WAN, 4000 , " drink " ) 
        
        // clear the interval function 
        the clearInterval (ID) 
    
</ Script > 
    
    </ body > 
</ HTML >

Location

hash: "#hotspotmining" ---> page anchor position

host: "baike.baidu.com" ---> host domain name

hostname: "baike.baidu.com" ---> host name

href: "https://baike.baidu.com/item/%E8%BF%90%E5%8A%A8/2134938#hotspotmining" ---> this page link address

origin: "https://baike.baidu.com" ---> source domain

"/ item /% E8% BF % 90% E5% 8A% A8 / 2134938" --->: pathname project path server pages

port: "" ---> port number, did not write that according to protocol, the default port number

protocol: "https:" ---> protocol , typically http or https

You can modify the path, jump to the corresponding page

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

Assign: jump page:

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

Reload: reload the page

location.reload()

The replace : replace the current page

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

Note: ASSIGN and replace there is a difference. Assign equivalent to jump to the next page, so there will be the return key. Replace is to replace the current page, so can not return to the previous page.

Navigator

Navigator can obtain information about the browser and system-related.

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"

Typically by userAgent to obtain information about the browser, and the browser in accordance with information transmitted with respect to the page, for example, sending PC page or page the mobile terminal.

By navigator to determine browser

// By navigator to determine browser access

var userAgent = navigator.userAgent

console.log()

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

console.log ( " You're moving end ")

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

}else{

console.log ( " You're pc end ")

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

}

LocalStorage

Permanent preservation of data, as long as you do not delete the data, the data will be permanently retained.

How to use localstorage be CRUD

Growth , repair

Is not increased, there is a change

//localStorage.xx = assignment content

//localStorage.setItem("username "," next door to Pharaoh ")

localStorage [ "like"] = " c sing t jump rRapl basketball ."

delete

localStorage.removeItem("like")

//delete localStorage.like

Obtain

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>

js: BOM objects delay interval function, Location, Navigator, LocalStorage (SessionStorage), History, JSON