《JavaScript入门经典 第五版》读书笔记

数据类型：1、数值型：包括整数和浮点数。实际上整数在js底层也是用浮点数表示的，只是转换时用了四舍五入，解释器隐藏了转换细节。
    2、文本数据：没有专门的char类型。用''或者""括起来表示字符串。
    3、布尔型：取值true或false
申明变量：var varName；变量没有固定类型，可以改变指向不同类型的数据。
js中的自增自减运算符和C++中相同。
解释器从做往右解释代码，所以在解释一串用'+'连接的字符和数字混合的语句时，如果'+'左右都是数字，则先进行加法运算，如果有一个是字符串，数字会被当做字符串进行拼接。
字符串转数字：parseInt(str, base)，parseFloat(str)，后者会识别字符串中的有效的小数点字符。整数转换一定要写基数，因为没有默认基数。转换失败返回NaN。
可以用isNaN(var)检查是否NaN，isNaN如果传入不能转为数字的字符串，则一定返回true，反之返回false。但是不能直接和NaN做比较，NaN是not a number的缩写，所有的值为NaN的对象比较时都返回false，所以
条件语句中返回false的情况：0，""空字符,null值,undefined微电影,[]空数组,false
typeof：运算符，返回一个值或对象的类型，如果对象未定义或类型未定义，则返回undefined。语法：typeof varObj/value;
数组：最多可以保存2e32个元素。和C++不同，定义数组不需要传递数组长度，而且任何变量都可以指向数组，数组本质是一个类。
    创建数组：var varArray = new Array();更简单的：var varArray = [];
    可以用索引定位数组元素。
    js只支持一维数组，所以如果要多维数组，需要为每个数组元素创建一个数组对象，层层嵌套。定位元素时和C++的多维数组语法相同。
js的逻辑运算符与、或采用短路模式。
switch支持字符串作为条件，而C++只支持数字。
for(item in items)是js的foreach语法。
声明函数：function funcName([varlist]){}
作用域：1、全局作用域：在网页上，任何在函数之外声明的变量，都可用于该页面的所有脚本，无论该脚本在函数内还是函数外。
    2、局部作用域：在函数内声明的变量和形参都是局部变量，函数返回后即释放。但是，如果函数把某个局部变量当做返回值来返回，则该局部变量不会被释放。
    当命名冲突时，解释器会从最小作用域开始一层层查找变量。
    和C++不同，大括号不能定义作用域。
String对象：内置对象。
    String对象和字符串比较时，比较的是实际值，但两个String对象比较时，比较的是对象引用。
    length：属性，返回字符串的长度
    indexOf(str,start),lastIndexOf(str,start):方法，在一个字符串中查找另一个字符串。返回子串的位置，如果没找到返回-1。前者从头向后查找，后者从后向前查找。
    substring(start,stop)：返回字符串的start到stop-1的子串，如果没有stop，就返回start到结尾的子串。
    substr(start, len)：返回字符串从start开始的len个字符的子串。
    toLowerCase(),toUpperCase()：转换大小写。
    charAt(pos)：返回字符串中在pos位置的字符
    charCodeAt(pos):返回字符串中在pos位置的字符的在Unicode编码集的十进制编号。比如A是65，a是97
        可以用charCode >= "A".charCodeAt(0)来进行单个字符的比较，但更简单的是C++式的语法：char >= "A"
    fromCharCode():静态方法，参数是一系列用逗号隔开的数字，每个数字代表一个Unicode字符集中的字符编码。
    trim(str):去掉字符串两头的空格。
    split(c/str)：用字符c或字符串str分隔本字符串，并返回分隔后的数组
    replace(src, dst):用dst的字符串替换本字符串中的src子串，并返回替换后的新字符串，不改变本字符串
    search(str)：在本字符串中查找str子串，找不到返回-1，和indexOf类似，但是str可以是一个正则表达式
    match(str):和search方法类似，但是返回的是每一个匹配的子串组成的数组
正则表达式：用'/'开始，用'/'结束的字符串就是正则表达式，类似于Python的r的功能，可以让字符串中的正则是字面量，而不需要转义。也可以用new RegExp(regstr)的方式创建正则对象，此时regstr中的正则表达式要注意转义。
    RegExp的属性：G：全局匹配，而不是匹配到一个结果后就停止；I：不区分大小写；M：多行标志，可以让^和$匹配多行的开始和结束。用法：即在//语法的后面加上属性。
    var myreg = /\w+/gi
Array对象：内置对象
    length：返回数组中的索引长度，即数组最大索引等于length-1。比如 var a = [];a[10] = 10;则a.length=11
    push(element):向数组尾部添加元素，索引增加
    concat(Array):链接两个数组，返回新数组
    slice(start, end)：复制数组中start开始到end-1索引的子数组，如果不包含end，则复制start后的所有元素。把返回的子数组复制到新数组中。
    join(c)：用字符c把数组元素连接为一个字符串。
    sort()：按升序本排列数组
    reverse()：反转本数组的元素顺序
    indexOf和lastIndexOf：和String的作用相同。
    迭代数组：迭代数组的方法必须传入一个用户定义的函数，该函数原型如下：
        function myDeal(value, index, array){ do something}：value，元素的值，index，元素的索引，array，数组本身
    every(myDeal):迭代数组中的每个元素是否通过了函数的测试，自定义函数的返回值会被解释为布尔值，如果没有返回值，则其实返回undefined，会被转为false。如果所有元素通过测试，every返回true，否则返回false。
    some(myDeal):和every类似，只是如果有部分元素通过测试，则返回true，没有元素通过测试才返回false。
    filter(myDeal):返回所有通过测试的元素组成的数组。
    上面三个函数是迭代测试函数，下面两个是迭代执行函数，即迭代执行自定义函数，而不进行测试。
    forEach(myDeal):迭代数组中的每个元素执行myDeal，注意：此处的自定义函数不能有返回值
    map(myDeal)：和foreach类似，但是自定义函数必须返回结果，最终map返回每个元素执行结果组成的数组，索引序和元素对应
Math：内置对象，其方法都是静态的，可以不用生成对象，直接用类名.方法名(参数)来使用方法
    abs：求绝对值
    min，max：返回一列数字中的最小、最大值
    ceil：向上取整
    floor：向下取整
    round：四舍五入
    random：返回0-1之间的随机浮点数
    pow：返回一个数的指定幂，第一个参数是底数，第二个参数是指数
Number：内置对象，值是有效数字的变量都被识别为Number对象
    toFixed(n):四舍五入数值保留n位小数，返回新数值
Date对象：内置对象，创建方式有：
    1、var dt = new Date();创建一个时间对象，时间是运行脚本的PC机当前时间和日期
    2、var dt = new Date(949278000000):创建对象时指定从GMT的1970.01.01 00:00：00开始算起经过的毫秒数
    3、var dt = new Date("31 Jan 2014"):用可读字符串创建时间对象
    4、var dt = new Date(y,m,d,h,m,s,ms):传入一列数字代表时间，1-12月用0-11代表，也可以用英文单词或缩写
    获取日期：getDate():返回月份的第几天
        getDay():返回星期几，周日是0，周一到周六是1-6
        getMonth():返回月份，0-11代表1月-12月
        getFullYear():返回四位数字的年份
        toDateString():返回当前时区的日期字符串
    设置日期：setDate():设置为当月中1号开始往后数的n天
        setMonth():设置为本年1月开始往后数的第n+1月（n从0开始，代表1月）
        setFullYear():设置4位整数的年份
        注意：js无法修改运行脚本的PC上的日期和时间
        注意：设置日和月，如果超过了范围，会自动往后滚动增加日期，比如setDate(58),表示1号开始后的第58天，超过了一个月的长度，js会根据本月长度自动往后滚动到下个月的正确天数上，月的滚动与此相同。如果超过了年底，也会滚动到下一年。
        注意：设置也可以是一个负值，表示时间往回计算，滚动原则同上。
    获取时间：getHours(), getMinutes(), getSeconds(), getMilliseconds(), toTimeString(),和获取日期类似。
        注意：时间是24小时制
    设置时间：setHours(), setMinutes(), setSeconds(), setMilliseconds(),和设置日期类似。
        注意：设置时间也会有滚动，原则和日期一样。
定时器：window对象的方法。
    一次性定时器：setTimeout(myFun, delay)，myFun：回调函数，delay：多少时间后触发计时器，单位ms，返回值是定时器的ID
    clearTimeout(ID):在计时器触发前清除计时器。
    循环定时器：setInterval(myFun, delay)，这里的delay是时间间隔，单位ms，其他说明和setTimeout相同。
    clearInterval(ID):清除循环定时器。
自定义对象：之前js没有class，自定义对象可以通过创建object对象或者直接赋值{}来产生，如下：
    var myObj = new Object();
    var myObj = {};    //推荐
    为对象增加属性：直接为属性赋值，也可以为属性赋值为一个函数，如下：
    myObj.size = 1024*768; //为myObj对象增加size属性，值是1024*768
    但是js并不会检查属性名拼写是否正确，所以如果给属性赋值时拼写错误，只会产生一个新的属性而不会报错。
    可以通过{属性名:属性值或匿名函数或函数名[，属性名：属性值或匿名函数或函数名]}来创建对象，并分开单独添加对象的方式更便于阅读理解。
引用类型：类似于C++中的类。创建自定义对象时虽然有属性和方法，但是这些属性方法是对象特有的，不能共享，而且必须产生一个对象才可用。而引用类型是定义一个类型，并不产生对象。定义引用类型，必须定义一个构造函数，构造函数和引用类型名相同，参数可以有多个，语法和普通函数相同，如下：
    function MyObject(size, price){
        this.size = size;
        this.price = price;
    }
    说明：这里定义了一个引用类型MyObject的构造函数MyObject，this.size和this.price是他的两个属性，他们的值在各个类型对象之间不共享。这种语法和Python类似。
    定义方法：
    MyObject.prototype.calcPrice = function(){ return this.size*this.price; }
    说明：引用类型的prototype属性中添加的属性是所有对象共享使用的，所以引用类型的方法一般作为其prototype属性的子属性。
    使用引用类型：通过new来创建引用类型的对象，如下：
    var myObj = new MyObject(100, 20000);
    注意：如果不使用new，虽然不会报错，但是实际执行不正确，等于是给全局window对象添加了一个属性。
BOM：Browser Object Model，浏览器对象模型，由浏览器提供一组对象，这些对象有预定义好的方法和属性，在浏览器打开网页是被浏览器创建，不需要在js中显式创建。
    常见浏览器对象BOM（大部分浏览器都具有的对象及相同的方法和属性）层级关系如下：
    window对象----location对象
                |-history对象
                |-document对象----forms对象
                                |-images对象
                                |-links对象
                |-navigator对象
                |-screen对象            
    1、window对象：代表浏览器的框架和窗口，其中包含了网页（document），某种程度上代表了浏览器本身。通过window的属性，可以确定浏览器类型、用户访问历史、浏览器窗口大小、用户屏幕大小等，可以修改浏览器状态栏的文本、修改加载的页面甚至打开新窗口。
        window对象是全局对象，在浏览器中访问其属性和方法时不需要指定属性名和方法名。实际上，js代码中创建的全局函数和全局变量在浏览器中都被创建为window的属性和方向。
    2、history对象：该对象是window对象的属性，用于跟踪用户访问的每个页面。这个页面列表通常称为浏览器的历史栈，用户点击浏览器的前进、回退来重新访问页面。
    属性：length：代表历史栈的页面数量
    方法：back()：回退到前一个页面
        forward():前进到后一个页面
        go(n):指定回退（负数）多少个页面或前进（正数）多少个页面
    3、location对象：该对象是window对象的属性，包含当前页面的位置信息。
    属性：href：该页面的URL
        hostname：连接的主机名称
        port：连接的主机端口
        protocol：和主机交互的协议，如"https"
    修改location.href指向新URL，或者调用location.replace(url)方法都可以跳转到新页面，区别是前者把新URL加入历史栈顶部，后者用新URL替换历史栈中的当前页。
    4、navigator对象：该对象是window对象的属性，包含当前浏览器和当前电脑操作系统的信息。
    HTML5为其新增了一个属性：geolocation，用于获取用户电脑的经纬度等信息，用法：
        navigator.gellocation.getCurrentPosition(cbGetSuccess, cbGetError),两个函数分别是调用成功或失败的回调函数。cbGetSucc回调函数的参数是position对象，包含latitude、longitude、altitude、speed。cbGetError回调函数的参数是errorObj对象，包含code、message属性，描述了错误码和错误信息。
    5、screen对象：该对象是window对象的属性，包含当前屏幕的信息，属性包括height、width，单位像素。属性colorDepth代表屏幕的色彩位数。
    6、document对象：该对象是window对象的属性，代表当前页面。
    方法：write(str):向网页中输出str，str可以是普通字符串，也可以是可渲染的html代码段。
    属性：bgColor：代表页面的背景色。
    images集合：document的属性。页面的每个img标签都有一个img对象，img属性name就是对象的名称，每个对象都保存在iamges集合中。
    links集合：document的属性。页面上所有链接a标签的集合。
判断浏览器：特性检测，即用if语句判断当前浏览器是否定义了某个特性属性或方法。
    if (typeof 属性or方法 != "undefined"){ 使用该特性; }
    浏览器嗅探：通过navigator.userAgent属性，该属性字符串中包含了特定浏览器的字符串，但是这个字符串可能变动很大，所以不推荐该方法。
    
DOM:Document Object Model，文本对象模型。注意：和浏览器对象模型不同，BOM是由浏览器提供的对象，因为会有通用和不通用的对象、属性、方法，用于指定、修改浏览器提供的元素（包括网页本身和浏览器上的功能）而DOM是标准的文档对象模型，提供的也是通用的文档对象，用于设置网页本身节点树。
    基本DOM对象：Node：文档中的每个节点都对应一个Node对象；NodeList：Node对象的列表；NamedNodeMap：允许按名称而不是索引访问Node对象。
    高级DOM对象：
    Document引用对象及方法：只有Document对象的方法可以在页面上查找、创建和删除元素。
        查找元素：getElementById(idValue):根据元素的ID属性返回该元素（节点）的引用，返回节点类型对应的引用对象，如h1类型的元素对应的元素对象类型是HTMLHeadingElement，失败返回null
            getElementByTagName(tagName):根据标记名称（即标签名称如td）返回一组元素（节点列表）的引用，返回NodeList对象，可以用[]或者item()方法返回具体的列表元素（某个节点对象）
            querySelector(cssSelector):返回与给定的选择器匹配的第一个元素（节点）
            querySelectorAll(cssSelector):返回与给定的选择器匹配的所有元素（节点列表）
            注意：querySelector、querySelectorAll也可以在Element对象上使用
        创建元素和文本：createElement(elementName):使用指定的元素类型创建一个节点，返回创建的元素，Element引用类型，Node引用类型
            createTextNode(text):创建并返回包含text的文本节点（即元素的内容），Text引用类型，Node引用类型
        属性：documentElement，指向一个Element对象，该对象代表了DOM的根节点，一般是<html>元素节点
    Element对象及方法：
        属性：tagName：保存元素的类型名
        方法：getAttribute(attrName):获取元素某个属性的值，如果属性不存在则返回null或空字符串
            setAttribute(attrName, value):为元素添加或设置某个属性的值
            removeAttribute(attrName):删除属性的值，并用默认值代替
    Node对象：导航DOM
        通用属性：firstChild 、lastChild：返回元素子节点
            previousSibling、nextSibling：在同级节点中，返回本节点的兄弟节点，文本节点也是兄弟节点，即使文本节点内容是空，所以两个元素节点之间总是有至少一个文本节点
            ownerDocument：返回包含本节点的文档的根节点
            parentNode：返回本节点的父节点
            nodeName：返回本节点的名称
            nodeType：返回一个数字，代表本节点的元素类型，1是元素节点，3是文本节点
            nodeValue：用于设置或获取本节点的内容
        通用方法：可以添加和删除DOM节点
            appendChild(newNode):将一个Node对象添加到本节点的子节点末尾，返回新添加的Node对象
            cloneNode(cloneCHildren):返回当前节点的一个副本，参数是boolean，如果为True，则拷贝本节点及其所有子节点，如果为False，则只拷贝本节点
            hasChildNodes():是否有子节点
            insertBefore(newNode, referenceNode):在referenceNode前插入一个Node对象，返回新插入的Node节点
            removeChild(childNode):从本节点的子节点列表中删除一个子节点，并返回删除的节点对象
    注意：一般获取的DOM节点对象，都同时具有Element和Node引用对象类型的属性和方法，而document对象具有Document、Element、Node三种类型的属性和方法
    操作DOM元素：
        改变外观：1、访问对象的style属性：通过该属性可以直接访问修改元素的css属性，如果css属性名称包含’-‘，则把‘-’去掉，其后面的单词首字母大写，然后可以访问css属性、修改css属性。该属性值直接映射HTML中元素的style属性值，但是不能映射<style></style>或外联样式表文件中设定的css样式。
            2、访问对象的className属性，并修改其值为某个CSS类名。该方法可以减少js代码量，可以通过class属性直接引用<style>和外联文件中的css样式，便于引用和修改。
    其他有用的属性和方法：适用于所有元素对象
        1、offsetTop,offsetLeft:返回元素相对于父元素的上、左偏移量，便于确定当前元素的位置
        
事件：JS可以监听和响应的事件包括：鼠标事件；键盘事件；进度事件（如网页加载过程）；表单事件（表单某个内容被改变）；突变事件（DOM节点发生改变）；触摸事件（触摸屏）；错误事件（出错时）。JS的内置对象并没有事件，事件是由BOM和DOM对象提供的。
    三种把代码关联到事件的方法：
    1、指定HTML属性；在HTML中为元素添加事件响应属性，如onclick属性。可以为事件属性设置一行JS表达式，或者是“ return fun()"，即设置一个响应函数，某些事件需要通过函数的返回值来判断是否继续执行，比如超链接<a>的onclick需要返回值判断是否要执行跳转，而有些事件不需要返回值，则可以直接给事件属性一个响应函数，而不需要return。
    例1：<a href="www.baidu.com" οnclick="alert('跳转到百度')"></a>
    例2：<a href="www.baidu.com" οnclick="return myFun()"></a>
        脚本中：function myFun(){return True;}
    例3：<body οnlοad="myLoad()" οnunlοad="myUnload()"></body>
    响应函数也可以传入参数，传入的参数有两种：this，event，如<a href="www.baidu.com" οnclick="return myFun(this)"></a>,如果事件属性的响应函数字符串中写的是this，那么响应函数内收到的参数直接指向了元素的对象，如果写的是event，那么响应函数内收到的就是一个Event对象，该对象包含了事件类型、发生事件的元素对象。所以一般写的是event。
    缺点：1）HTML和JS混写，不易维护；2）不修改HTML就不能修改关联的响应函数；3）只能为HTML中出现的元素关联响应函数，对于动态创建的元素无法关联。
    2、指定对象的特定属性（如事件属性）；
    例：document.getElementById("myLink").onclick = directPage;
    function directPage(e){ return e.type);
    即把函数对象赋值给ID是“mylink”的节点的onclick方法属性。如果οnclick=null，则删除响应函数。
    缺点：属性只能有一个响应函数，不能添加多个响应函数
    3、标准事件模型：每个DOM元素都有EventTarget对象的属性，该对象有两个方法，用于添加和删除事件监听器。
    addEventListener:为元素添加响应函数
    例：document.getElementById("myLink").addEventListener("click", function (e){ e.type; e.preventDefault()});
    e.preventDefault()可以阻止执行默认操作。
    该模型可以为同一个元素的同一个事件注册多个响应函数，函数将按注册的顺序执行。
    removeEventListener:如果注册时使用的是命名函数，那么可以用移除这个响应函数。
    Event对象：响应函数的入参，具有如下属性：
        bubbles：表示是否允许事件冒泡，即事件是否可以沿着DOM上传
        cancelable：表示是否可以取消事件的默认行为
        currentTarget：事件在DOM中传递时，指定事件的当前目标
        defaultPrevented：表示在事件上是否调用preventDefault
        eventPhase：表示事件当前处于事件流的哪个阶段
        target：表示引发事件的元素（文本节点也可以）
        timestamp：表示事件发生的时间
        type：表示事件的类型
    MouseEvent对象：鼠标相关的事件，属性如下：
        altKey：表示事件发生时，是否按下ALT键
        button：表示按下鼠标的哪个键
        clientX，clientY：表示事件发生时鼠标在浏览器窗口的水平、垂直坐标
        ctrlKey：表示事件发生时，是否按下CTRL键
        metaKey：表示事件发生时，是否按下META键
        relatedTarget：用于标识第二个事件目标。对于mouseover事件，该属性表示鼠标指针退出的元素；对于mouseout事件，该属性表示鼠标指针进入的元素
        screenX，screenY：表示事件发生时，鼠标相对于屏幕的水平、垂直坐标
        shiftKey：表示事件发生时，是否按下SHIFT键
    如果响应的事件是鼠标事件，那么响应函数的入参就可以同时访问到Event对象和MouseEvent对象的属性，但如果响应的事件不是鼠标事件，则响应函数不能访问到MouseEvent对象的属性
        可以产生MouseEvent对象的事件有：
            click：当指针位于某个元素或文本上时，单机鼠标触发
            mousedown：当指针位于某个元素或文本上时，按下鼠标触发
            mouseup：当指针位于某个元素或文本上时，弹起鼠标触发
            mouseover：指针移入某个元素或文本时触发
            mousemove：指针位于某个元素或文本上时触发
            mouseout：指针从某个元素或文本上移开时触发
    拖动事件：为元素设置draggable="true"，可以让元素变成可拖动元素。相关事件如下：
        1、dragstart：开始拖动时在元素上触发，从本地拖动到浏览器不能触发
        2、drag：拖动过程中一直触发
        3、dragend：拖动停止时触发，无论是否释放了该元素，从本地拖动到浏览器不能触发
        4、dragenter：当拖动本地文件或网页元素第一次进入另一个元素时，在另一个元素上触发，即由另一个元素响应，可以用于拖动任务的结束，即该元素可以接收拖动内容
        5、dragover：当拖动本地文件或网页元素时，移动到另一个元素，在另一个元素上触发
        6、dragleave：当拖动本地文件或网页元素时，移除另一个元素，在另一个元素上触发
        7、drop：释放鼠标时，在释放时鼠标所在的元素上触发
        事件（1）（2）（3）是事件源触发的事件，事件（4）（5）（6）（7）是目的元素触发的事件。
        注意：dragover在浏览器中会有默认行为，导致drop无法触发，所以如果想响应drop，需要响应dragover，并且e.preventDefault()禁止默认行为。drop在不同浏览器中也会有不同的默认行为，也可以通过e.preventDefault()禁止。
        可以通过DataTransfer对象在拖放过程中传递数据。DataTransfer对象可以通过event对象的dataTransfer属性访问。该对象有两个方法：
            setData(type, value):设置传递的数据，第一个参数是数据类型，IE支持“text”和“html”，其他浏览器同时支持MIME类型数据
            getData(type):根据setData时的type来读取数据。
            setData在dragstart时设置，getData在drop时读取。

HTML表单：不论页面有几个独立表单，每次只能向向web服务器提交一个表单的信息。<form/>标记内的元素就是一个独立表单区域，可以设置的属性有：action：表单提交到哪里；method：如何提交信息put/post；target：表单的响应加载到哪个框架上。
    <form/>表单对应的元素对象是HTMLFormElement对象，可以用forms集合来引用表单对象，也可以用元素查找函数来查找表单，如果表单有name属性，也可以通过docment.form_name访问表单对象。表单的其他属性对映射到了关联的对象属性。
    HTMLFormElement对象的elements对象也是集合，保存了表单内所有交互元素的对象（除了<input type=images/>）,可以用form[n]或form.elements[n]选取元素。elements的length长度和Form对象的length长度相同。
    Form对象有submit()方法和submit事件、事件监听器，但是，用submit()方法提交表单时，不会触发submit事件和监听器。
    Form对象有reset()方法，可以清空表单或还有默认值（如果有）。
    submit事件也支持e.preventDefault来取消默认操作（即向服务器提交表单），因为可以在事件响应中检查数据进而决定是否提交到服务器。
    表单中的交互元素：所有<input/>创建的元素都对应于HTMLInputElement对象
        1、文本元素：<input type="text"/>,普通文本/<input type="password"/>,密码输入/<textarea></textarea>,大块文本显示/<input type="hidden"/>，隐藏文本框，当需要把多个页面的信息提交给服务器时，可以把前面页面的数据放到隐藏文本框中，最后统一发送给服务器。
        2、选择按钮：<input type="checkbox"/>复选框/<input type="radio"/>单选按钮
        3、列表框：<select><option></option></select>下拉列表框（combobox)/<select size="4"><option></option></select>列表显示框（listview）
        4、按钮：<input type="button"/>或者<button></button>普通按钮/<input type="submit"/>提交按钮/<input type="reset"/>重置按钮
    表单交互元素对象共有的属性和方法：
        1、name属性：提交表单信息到服务器时，name会和value一起提交
        2、value属性：交互元素的值。但是不同元素的value的含义不同，需要区别对待
        3、form属性：交互元素所属的表单对象。对于submit元素，可以通过该属性来检索表单下的交互元素的值，进行数据检验，而无需特别指定表单对象。
        4、type属性：交互元素的类型
        5、focus()：调用该方法使该对象成为焦点对象，调用该方法或通过交互获得焦点，则触发该对象的focus事件，onfocus事件处理属性进行响应
        6、blur()：调用该方法使该对象失去焦点，调用该方法或通过交互获得焦点，则触发该对象的blur事件，onblur事件处理属性进行响应
        注意：如果若干元素在自身的onfocus和onblur中设置了其他元素的focus和blur，则可能引起死循环。
        7、readonly属性:元素只读。
    交互元素独有的属性和方法：
        1、按钮button：value属性的含义是在按钮上显示的文字。
            特殊事件：mouseup，mousedown，鼠标在按钮上按下或回车时触发
            submit和reset有自己的功能，一般不需要修改。
        2、文本框text：value含义是文本框中的文字，可以读取和显示。文本框的值一般都会当做字符串，需要数字时可以用Number()或parseInt()、parseFloat()进行转换
            特殊属性：size，可以容纳的文本字符宽度；maxlength，最长输入字符长度；readOnly，文本框只读，防止修改文本框内容。
            特殊方法：select():选择或加亮文本框中的所有文本
            特殊事件：select：用户选择文本框中的文本时触发
                change：当且仅当文本框失去焦点时的值和获取焦点的值不同时触发该事件，即该事件可
                以在文本框的值发生了改变时才进山数据校验。
                keypress,keydown,keyup：按键、按下、弹起时触发
        3、文本域textarea：元素没有value属性，但是对于的HTMLTextareaElement对象有value属性，含义是<textarea></textarea>标签之间的文本。元素属性和text类似，但是没有maxlength。
            特殊属性：cols，显示区每行显示的文本字符数；rows，显示区可显示多少行；wrap，是否启动自动换行，off是关闭，soft是启动，向服务器提交消息时不带换行符，hard是启动，向服务器提交消息时每个自动换行的地方都添加操作系统的换行符（Windows是\r\n，Linux是\n）。
            特殊事件：keydown、keyup、keypress、change
        4、单选框radio和复选框checkbox：对应的是HTMLInputElement对象。value是HTML或js预定义的，与用户交互无关，每次返回相同的值。
            特点：创建radio，一组name相同的radio就是一组单选框，只能为其中一个设置元素属性：checked="checked"，多个设置则只取最后一个。创建单选框组后，在js中用name引用时就是一组单选框，可以像数组一样访问。
            特殊属性：checked：检查按钮是否被选中，对于radio，需要循环变量每个radio找到选中的那个。
        5、下拉列表和列表框：下拉列表其实是列表框的特殊情况。<select>元素对应HTMLSelectElement对象。该对象有一个options属性，对应<select>元素内部的<option>组。<option>元素对应HTMLOptionElement对象。
            特殊属性：<select>标签的size属性：定义列表框可见行数，如果是1，就是下拉列表框；<option>标签的selected属性：定义该项是否被选中，选中值selected
            特殊属性：HTTPSelectElement：selectIndex，返回索引值表示哪些option被选择，结合options属性可以获取被选择的HTTPOptionElement；length，返回被选option的数量
            特殊属性：HTTPOptionElement：index，返回该option在select的options属性中的索引；text，该元素显示的文本；value，为option定义的值，提交表单时会发给服务器
            特殊方法：在脚本中添加和删除option选项
                1、创建新的option对象：new Option(text, value);参数1要显示的文本，参数2绑定的值
                2、添加option对象/元素：theSelectElement.options[n]=newOption;把新option对象赋予select对象的索引n的位置，该位置如果之前有元素，则会被取代
                3、删除option对象/元素：theSelectElement.options[n]=null;删除索引位置n的option元素，options会自动重新排列，n之后如果有其他元素，则他们的索引都减1
            标注方法添加新选项：1、创建新的option对象（同上）；2、用Select对象的add(newOpt, pos)插入新option，参数1是新option对象，参数2是插入的option前一个位置的option，如果是null，则放到options末尾，该方法会自动调整options数组，插入元素不会取代其他元素
            特殊事件：blur，focus，change，当用户改变选择触发change
    HTML5中<input/>新增的属性：1、autocomplete，控件的值可以由浏览器自动填充；2、autofocus，页面加载控件时是否有焦点；3、form，相关表单的ID，如果指定则控件可以放在源文件的任意地方，否则只能放在<form/>元素内；4、maxLength，为text、email、search、password、tel、url指定最大输入字符数；5、pattern，用该正则表达式检查控件输入的值；6，placeholder，提示字符用于说明控件该输入什么；7、required，指定在提交表单前用户必须给控件输入值；8、type="range"，滑块的特殊属性：min，滑块最小值；max，滑块最大值；step，滑块步进值
    HTML5中<input/>新增的事件：input，当元素的值发生改变时触发（change是失去焦点并且值发生变化时触发）
    HTML5新增的表单控件：
        <output/>:用于显示输出值，需要个form关联。属性：for=""，关联的显示其值的元素，与渲染无关，用于语义说明；form="formXXX"，关联的form表单的id；value，在<output></output>直接显示的文本。如果用form关联了表单，就可以通过Form对象按name引用该元素。
        <meter/>:用于图形化的显示范围值。属性：min,max,最大最小值；optimum，low，high会影响元素的颜色（语义说明）；value，显示的值。如果不支持该元素，则显示标签中间的文本
        <progress/>:表示任务完成的进度。属性：value，表示控件的值；max，控件可显示的最大值。如果不支持该元素，则显示标签中间的文本

JSON:js中可以用JSON对象处理js对象的串行化和反串行化。
    串行化：JSON.stringify(js对象);把js对象串行化为json字符串
    解析json：JSON.parse(json语句);把json字符串解析为js对象
    例：在可拖动元素中，可以通过dataTransfer传递数据，但是只能传递字符串，不能传递js对象，此时可以把js对象串行化为json字符串。

Web存储：Web存储分为本地存储(localStorage对象)和会话存储(sessionStorage对象)
    会话存储在关闭浏览器后就被删除。
    特点：数据保存在浏览器上，不传递给服务器；存储空间更大，Chrome和Firefox是5M，IE是10M；本地存储的数据不会过期，除非开发人员或用户主动删除；数据按键值对存储
    方法：setItem(key, value);设置键值对，如果key含有空格等特殊字符可以使用
        localStorage.key = value;设置键值对
        value = getItem(key);获取数据
        localStorage.removeItem(key):删除数据
        localStorage.key = null;删除数据
        localStorage.clear();删除所有数据
        使用：本地存储只能存字符串的键值对，所以对于js对象，可以用JSON.stringify串行化为字符串后保存，使用的时候JSON.parse解析出来

AJAX：可以通过js直接和服务器进行HTTP交互，发送获取数据，实现网页的局部刷新
    XMLHttpRequest：浏览器内置对象，所有浏览器都支持，封装了AJAX功能
        创建：var request = new XMLHttpRequest();
        使用：1、request.open(requestType, url, async);初始化XMLHttpRequest对象。参数1是请求类型字符串，可选值"GET"/"POST"；参数2该请求要发往的URL；参数3取true/false，表示是否异步模式请求，同步模式会阻塞浏览器，所以默认是true
            2、request.send(msgbody);open创建了请求的HTTP包，send传入的是请求包附带的请求体，如果没有传入null
        属性：status，该属性表示服务器返回的状态码；readyState，数值，代表当前的请求状态，用于异步请求，状态码0=已创建对象，未调用open，1=已调用open，未发送请求，2=请求已发送，标题和状态已接收到并可用，3=接收到服务器的响应，4=接收完请求数据；responseXML，把接收到的数据加载到XML DOM对象中；responseText，返回纯文本
        注意：即使readyState返回了4，但是仍需要检查status
        事件：readystatechange，处理方法：request.onreadystatechange=cbfun;
    iframe技术：在网页中内嵌隐藏的iframe用于网页ajax请求和跳转，这样当用户回退网页时，其实还在本页，而且能保留之前的交互数据
    
HTML5多媒体：新增了<video>和<audio>标签
    <video>：属性：src="a.mp4"，用于加载服务器本地视频文件；controls，显示浏览器默认的视频控制控件；preload，预先加载视频文件可解码的第一幅图作为网页中视频预览的画面；poster="b.jpg"，把preload的画面换成自定义图片。
        <source>：子元素，放在<video/>之间，属性：src="a.mp4"，当服务端有多个格式的视频文件时，用多个该元素可以让浏览器选择加载某个可解码的视频；type="video/mp4"，该视频文件的格式，也支持MIME字符串；codecs=“ssss”，该视频文件具体的编码信息
    当浏览器不支持video属性时，显示标签的文本内容。
    video和audio元素对应HTMLMediaElement对象。
        创建：var obj = document.createElement("video");
        方法：canPlayType(mimeType):支持参数指定的格式的可能性，返回值：probably，可以播放；maybe，不播放视频无法判断；""，无法播放。
            load():开始从服务器上加载视频
            pause():暂停媒体播放
            play():开始或继续媒体的回放
        属性：autoplay,表示获得足够显示的媒体数据后，是否子欧诺个开始播放；controls，对应媒体元素的controls属性；currentTime，当前播放的时间，修改时间会把媒体设置为新时间；duration，获取媒体的长度，单位秒，如果没有可用媒体，返回0，如果无法确定时长，返回NaN；ended，是否要结束播放；loop，对应媒体元素的loop属性，是否循环播放；muted，是否静音；paused，是否暂停；playbackRate，播放速率，1.0是常速；poster，对应元素的poster属性；src，对应元素的src属性；preload，对应元素的preload属性；volume，音频音量0.0~1.0
        注意：如果用obj.src="a.mp4"修改了播放的视频，那么一定要obj.load();来加载视频，然后obj.play();，否则直接play无法播放视频
    常用事件："abort"，中止媒体播放时触发；"canplay"，媒体数据足够播放时触发；"canplaythrough"，整个媒体文件可以回放；"durationchange"，媒体的时长发生变化；"ended"，回放完成时触发；"error"，发生错误时触发；"loadstart"，开始下载媒体文件；"pause"，暂停时触发；"playting"，开始播放或继续播放；"progress"，正在下载媒体文件;"ratechange"，播放速率发生变化；"seeked"，播放位置偏移时触发；"seeking"，播放位置开始偏移时触发；"timeupdate"，修改了currentTime属性;"volumechange",改变了volume或muted属性