1.BOM objects
1) concept
Object Browser related. Access to information related to the browser, the browser can be set and modify the properties.
2）Window
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 )
3）Location
4）Navigator
5）History
6）Localstorage
7）sessionStorage
2. The delay function and the interval function
1) 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)
2) spacer function: the 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:
. 1 var jiuba = function (doSomething) { 2 . 3 the console.log ( "time to go to the bar") . 4 . 5 the console.log ( "what to do:" doSomething +) . 6 . 7 } . 8 . 9 10 . 11 var = interId1 the setTimeout ( function () { 12 is 13 is jiuba ( "the sister") 14 15 }, 0) 16 . 17 the console.log (123456)
3.location and navigator
1）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.
2）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
1 // navigator determines accessed through browser 2 . 3 . 4 . 5 var = the navigator.userAgent the userAgent . 6 . 7 . 8 . 9 the console.log () 10 . 11 12 is 13 is //userAgent.indexOf("iPhone")=-1 means that the apparatus the PC 14 15 16 . 17 IF (useragent.indexOf ( "the iPhone") = -!. 1 || useragent.indexOf ( "the Android") = -!. 1 || useragent.indexOf ( "the iPad") = -!. 1) { 18 is . 19 the console.log ( "you are moving end") 20 is 21 is //location.assign("http://m.taobao.com ") 22 is 23 is } the else { 24 25 the console.log (" you are the pc " ) 26 27 //location.assign("http://www.taobao.com") 28 29 30 31 }
4.history
1) concept
Only a page forward and back, can not really obtain the user's browsing history.
2）history.back()
Back 1 pages
3）history.forward()
Forward 1 pages
4）history.go()
Syntax: history.go ( forward or backward number )
Forward is positive, negative is back.
5.localstorage和sessionstorage
1）LocalStorage
Permanent preservation of data, as long as you do not delete the data, the data will be permanently retained.
[1] 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 ."
[2] Delete
localStorage.removeItem("like")
//delete localStorage.like
[3] Gets
console.log(localStorage.username)
console.log(localStorage['username'])
console.log(localStorage.getItem('username'))
[4]删除所有
localStorage.clear()
2）SessionStorage
当次会话有效，关闭浏览器之后就失效了，其它的与localStorage的方法一样
6.json
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
Javascript obj<===>文本
案例：
1 var obj = { 2 3 name:"蔡徐坤", 4 5 like:["唱","跳","rap","打代码"] 6 7 8 9 } 10 11 12 13 14 15 //将js对象转换成json格式的字符串 16 17 var strJson = JSON.stringify(obj) 18 19 console.log(strJson) 20 21 22 23 //json字符串转换成js对象 24 25 var jsonObj = JSON.parse(strJson) 26 27 console.log(jsonObj)