BOM对象
- 几个其他概念
ESMAscript
ES3
ES5
ES6
- 学的是语法，es指的是es5，es6，es3
- 不光可以放到浏览器里面运行，也可以放到单片机，node.js上运行
- 和我们的浏览器不相关
DOM 文档对象模型
- js换了个环境，放到浏览器上，和数组产生了一些关联，使用js操作浏览器之间的一些元素，dom
BOM
指浏览器对象模型 用于描述这种对象与对象之间层间，指打开页面的元素
- 浏览器的页面
- 浏览器的宽高
- 和我们的window有关
window
- BOM的核心是window对象
- 全局变量都是window的属性
window对象属性
window.innerHegiht window.innerWIth
返回浏览器内部的宽高
scrollX、scrollY
我们也可以通过window.scrollto移动滚动条
window.scroll(0,200)
window.frames
navgitor
存储浏览器的相关信息
useragent 判断浏览器的类型 看是什么设备
online 表示是否在线
screen
表示当前的屏幕
window.getComputedStyle
获取当前元素所有最终使用的css属性值
window.getComputedStyle('元素'，'伪类')
URL的编码/解码方式
- decodeURL()
- decodeUELComponent()
- encodeURL()
- encodeURLComponent()
encodeURL不会对下列字符编码
ASCII字母
数字
- 浏览器不可以分辨特殊符号，这时使用encodeURLCompnent对url进行编码
alert() prompt() confirm()
localStorage & cookie & session
cookie
- 在当前域名下存的一点数据，用来记录某些当页面关闭或者刷新猴仍然需要记录的信息
- 可以使用js在浏览器直接设置，或者再http上直接种下cookie
- 任何请求都会带上cookie
- 设置cookie的参数，path：表示 cookie 影响到的路径，匹配该路径才发送这个 cookie。
expires 和 maxAge：告诉浏览器 cookie 时候过期，maxAge 是 cookie 多久后过期的相对时间。不设置这两个选项时会产生 session cookie，session cookie 是 transient 的，当用户关闭浏览器时，就被清除。一般用来保存 session 的 session_id。
secure：当 secure 值为 true 时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效
httpOnly：浏览器不允许脚本操作 document.cookie 去更改 cookie。一般情况下都应该设置这个为 true，这样可以避免被 xss 攻击拿到cookie。
作用
- 记录用户名
- 可以去修改documnet.cookie
- 把购物车的信息存储在cookie上
很多网站的静态资源使用CDN地址而是使用当前网站域名，从cookie的角度说说这对性能有何影响?
很多静态资源都设置成baidu.com可以换个域名，可以把js换一个域名，cookie只对一个域名生效，而对另一个域名不生效
section
登陆淘宝后，刷新页面后，可以分辨出请求用户的刚才登陆的用户呢？这里就需要使用session的保存状态了
- 创建session后，会把关联的session_id 通过setCookie 添加到http响应头部中。
- 浏览器在加载页面时发现响应头部有 set-cookie字段，就把这个cookie 种到浏览器指定域名下。
- 当下次刷新页面时，发送的请求会带上这条cookie， 服务端在接收到后根据这个session_id来识别用户。
Local Storage
- 只能存的是字符串
- 可以存很多东西，可以存5兆或10兆的东西
- 没有控制的地方，只能存进去的东西
localStorage['name']
- 需要将对象转化为字符产的时候才存放进去
Question
window.onload 和 document.onDOMContentLoaded 有什么区别？
window.onload
当一个资源及其依赖资源已完成加载时，将触发load事件。document.onDOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。
如何获取图片真实的宽高？
等待imgeonload完所有的有关参数之后，取宽高
img.onload = function(){
alert(img.width,img.height)
}
如何获取元素的真实宽高？
window.getComputedStyle(document.getElementById("id")).height;
window.getComputedStyle是一个可以获取当前元素使用的css属性值，返回一个css样式声明
var style = window.getComputedStyle("元素", "伪类");
例如：
var dom = document.getElementById("test"),
var style = window.getComputedStyle(dom , ":after");
URL 如何编码解码？为什么要编码？
- URL 编码的原则就是使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。
- 浏览器不可以分辨特殊符号，这时使用encodeURLCompnent对url进行编码
补全如下函数，判断用户的浏览器类型。
function isAndroid(){
return /Android/.test(navigiter.userAgent)
}
function isIphone(){
return /iPhone/.test(navigiter.userAgent)
}
function isIpad(){
return /iPad/.test(navigiter.userAgent)
}
function isIOS(){
return /(ipad)|(iphone)|(mac)/i.test(navigitor.userAgent)
}
cookie & session &localStorage 分别是什么？
- cookie是存储在浏览器的一小段数据，用来记录某些页面关闭或者刷新之后仍然需要储存的数据
- session保存状态 ，用户输入用户名或者密码到服务器的时候，服务器验证后会创建一个session用于记录用户的相关信息，这个session可以保存在服务器内存，也可以保存在数据库当中
- localStorage localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用 js手动清除。
该JSON.parse()方法解析JSON字符串，构造字符串描述的JavaScript值或对象。可以提供可选的reviver函数，以在返回结果对象之前对其进行转换。
var Storage = (function(){
return {
set: function(key,value,expiredSeconds){
localStorage[key] = JSON.stringify({
value: value,
expired: expiredSeconds===undefined?undefined:Date.now()+1000*expireSeconds
})
},
get: function(key){
if(localStorage[key] === undefined){
return
}
var o = JSON.parse(LocalStorage[key])
if(o.expired === undefined || Date.now() < o.expired){
return o.value
}else{
delete localStorage[key]
}
}
}
})()
