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]                
        }
    }
    }
})()

BOM 对象 & localStorage & cookie & session