js（JavaScript）：BOM对象，延迟、间隔函数，Location，Navigator，LocalStorage（SessionStorage），History，JSON
BOM对象
浏览器相关的对象。获取浏览器相关的信息，可以设置和修改浏览器属性。
Window
<!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>
浏览器相关的宽高信息
setInterval
setTimeout
clearInterval
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>
