JavaScript 学习总结

JavaScript 能够做什么？能够改变 HTML 内容、改变 HTML 属性、改变 HTML 样式 (CSS)、隐藏 HTML 元素、显示 HTML 元素。
JavaScript 数据类型

1字符串值，2数值，3布尔值，4数组，5对象。
var length = 7;                                // 数字
var lastName = "Gates";                         // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象 
typeof 运算符
您可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型：
Undefined：   在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。   var person;       //值是 undefined，类型是 undefined
空值与 undefined 不是一回事。空的字符串变量既有值也有类型。                                  var car = "";     // 值是 ""，类型是 "string"
Null：在 JavaScript 中，null 是 "nothing"。它被看做不存在的事物。                          var person = null; // 值是 null，但是类型仍然是对象
Undefined 与 null 的值相等，但类型不相等：




外部脚本：如需使用外部脚本(外部脚本具有优势)请在 <script> 标签的 src (source) 属性中设置脚本的名称：
<script src="myScript.js"></script>

JavaScript 显示方案以不同方式“显示”数据：
使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出、仅用于测试。
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台  f12

JavaScript 错误
try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。
finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。
try {
     供测试的代码块
}
 catch(err) {
     处理错误的代码块
} 
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "是空的";
        if(isNaN(x)) throw "不是数字";
         x = Number(x);
        if(x >  10) throw "太大";
        if(x <  5) throw "太小";
    }
    catch(err) {
        message.innerHTML = "错误：" + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

JavaScript 字符串
var x = "Bill Gates"  
var sln = x.length;  //  length 属性返回字符串的长度10：
特殊字符需要使用 \ 转义字符。
字符串也可通过关键词 new 定义为对象：  var firstName = new String("Bill")

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");     indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：  //首次出现
var pos = str.lastIndexOf("China"); lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：//最后出现
var pos = str.search("locate");     search() 方法搜索特定值的字符串，并返回匹配的位置：         //17
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。   两种方法都接受作为检索起始位置的第二个参数。     str.indexOf("China", 18);
lastIndexOf() 方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点。
提取部分字符串：有三种提取部分字符串的方法：slice(start, end)      substring(start, end)       substr(start, length)
slice() 方法 提取字符串的某个部分并在新字符串中返回被提取的部分。该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。
var str = "Apple, Banana, Mango"; //这个例子裁剪字符串中位置 7 到位置 13 的片段：
var res = str.slice(7,13);     Banana
var res = str.slice(-13,-7);    如果某个参数为负，则从字符串的结尾开始计数。这个例子裁剪字符串中位置 -12 到位置 -6 的片段：  //从右往左 
var res = str.slice(7);         Banana, Mango      如果省略第二个参数，则该方法将裁剪字符串的剩余部分：
var res = str.substring(7,13);  Banana      substring() 方法 类似于 slice()。不同之处在于 substring() 无法接受负的索引。 
var res = str.substr(7,6);      Banana      substr() 方法  类似于 slice()  不同之处在于第二个参数规定被提取部分的长度。
替换字符串内容   replace() 方法用另一个值替换在字符串中指定的值：  replace() 方法不会改变调用它的字符串。它返回的是新字符串。 大小写敏感
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");
转换为大写和小写： 通过 toUpperCase() 把字符串转换为大写： 通过 toLowerCase() 把字符串转换为小写：
var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1
var text3 = text1.toLowerCase();  // text2 是被转换为小写的 text1
concat() 方法 连接两个或多个字符串：
var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);
concat() 方法可用于代替加运算符。下面两行是等效的：
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");
String.trim() 方法删除字符串两端的空白符：
var str = "       Hello World!        ";
alert(str.trim());
charAt() 方法返回字符串中指定下标（位置）的字符串：
var str = "HELLO WORLD";
str.charAt(0);            // 返回 H
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：
var str = "HELLO WORLD";
str.charCodeAt(0);         // 返回 72
把字符串转换为数组
split() 将字符串转换为数组：
var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔
如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串。如果分隔符是 ""，被返回的数组将是间隔单个字符的数组：
var txt = "Hello";       // 字符串
txt.split("");           // 分隔为字符

JavaScript 数组用于在单一变量中存储多个值。
  var cars = ["Saab", "Volvo", "BMW"];
访问数组元素:我们通过引用索引号（下标号）来引用某个数组元素。
  var name = cars[0];这条语句访问 cars 中的首个元素的值：
  cars[0] = "Opel";这条语句修改 cars 中的首个元素：
  document.getElementById("demo").innerHTML = cars[0];    saab
改变数组元素
  cars[0] = "Opel";这条语句修改了 cars 中第一个元素的值：
访问完整数组:通过 JavaScript，可通过引用数组名来访问完整数组：
  document.getElementById("demo").innerHTML = cars;   saab,volvo,bmw
length 属性返回数组的长度（数组元素的数目）。
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.length;                       // fruits 的长度是 4
访问第一个数组元素 var first = fruits[0];
访问最后一个数组元素 var last = fruits[fruits.length - 1];
遍历数组元素的最安全方法是使用 "for" 循环：
向数组添加新元素的最佳方法是使用 push() 方法：也可以使用 length 属性向数组添加新元素：
  fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon)
  fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)
toString() 把数组转换为数组值（逗号分隔）的字符串。
  document.getElementById("demo").innerHTML = fruits.toString();  Banana,Orange,Apple,Mango
join() 方法也可将所有数组元素结合为一个字符串。它的行为类似 toString()，但是您还可以规定分隔符：
  document.getElementById("demo").innerHTML = fruits.join(" * ");   Banana * Orange * Apple * Mango
pop() 方法从数组中删除最后一个元素：
  fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）
push() 方法（在数组结尾处）向数组添加一个新的元素：   
  fruits.push("Kiwi");       //  向 fruits 添加一个新元素
shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。 
  fruits.shift();            // 从 fruits 删除第一个元素 "Banana"
unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：
  fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"  lemon在数组第一个
通过使用它们的索引号来访问数组元素：
  fruits[0] = "Kiwi";        // 把 fruits 的第一个元素改为 "Kiwi"
  delete fruits[0];           // 把 fruits 中的首个元素改为 undefined
splice() 方法可用于向数组添加新项：
  fruits.splice(2, 0, "Lemon", "Kiwi");     Banana,Orange,Lemon,Kiwi,Apple,Mango
  fruits.splice(2, 2, "Lemon", "Kiwi");     Banana,Orange,Lemon,Kiwi//  Apple,Mango删除了
  fruits.splice(0, 1);        // 删除 fruits 中的第一个元素  不留“空洞”的情况下移除元素：
concat() 方法通过合并（连接）现有数组来创建一个新数组：
  var myGirls = ["Cecilie", "Lone"];
  var myBoys = ["Emil", "Tobias", "Linus"];
  var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys
slice() 方法用数组的某个片段切出新数组。
  var citrus = fruits.slice(1);   Orange,Lemon,Apple,Mango
  var citrus = fruits.slice(1, 3);  Orange,Lemon选取了 1 2元素      从开始参数选取元素，直到结束参数（不包括）为止。
数组排序  sort() 方法以字母顺序对数组进行排序：
  var fruits = ["Banana", "Orange", "Apple", "Mango"];  
  fruits.sort();            // 对 fruits 中的元素进行排序  Apple,Banana,Mango,Orange
reverse() 方法反转数组中的元素。  您可以使用它以降序对数组进行排序： 
  fruits.reverse();         // 反转元素顺序Orange,Mango,Banana,Apple
不过，如果数字按照字符串来排序，则 "25" 大于 "100"，因为 "2" 大于 "1"。正因如此，sort() 方法在对数值排序时会产生不正确的结果。
  var points = [40, 100, 1, 5, 25, 10];
  points.sort(function(a, b){return a - b}); 
以随机顺序排序数组  points.sort(function(a, b){return 0.5 - Math.random()}); 
  function myArrayMax(arr) {
    return Math.max.apply(null, arr);   对数组使用 Math.max()  您可以使用 Math.max.apply 来查找数组中的最高值：
    return Math.min.apply(null, arr);   对数组使用 Math.min() 您可以使用 Math.min.apply 来查找数组中的最低值：
  } 
  Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。
最快的解决方法是使用“自制”方法。此函数遍历数组，用找到的最高值与每个值进行比较：
  function myArrayMax(arr) {
    var len = arr.length
    var max = -Infinity;
    while (len--) {
        if (arr[len] > max) {   <
            max = arr[len];      min=arr[len]
        }
    }
    return max;
}
排序对象数组
  var cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}];
  cars.sort(function(a, b){return a.year - b.year});

JavaScript 对象：对象是包含很多数据的数属性和值的集合，定义在{....属性+值}内
var person = {
  firstName: "Bill",   firstname是属性  "bill"是值
  lastName : "Gates",
  id       : 678,
  fullName : function() {    对象方法
    return this.firstName + " " + this.lastName;
  }
};
创建带有四个属性的新的 JavaScript 对象：   var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"}; 
  var x = person;  // 这不会创建 person 的副本。对象 x 并非 person 的副本。它就是 person。x 和 person 是同一个对象。对 x 的任何改变都将改变 person，因为 x 和 person 是相同的对象。
JavaScript 属性:访问对象属性的语法是：  对象.属性或者对象["属性"]
  person.firstname + " is " + person.age + " years old.";   person["firstname"] + " is " + person["age"] + " years old.";
  JavaScript for...in 循环遍历对象的属性。
  for (x in person) {
    txt += person[x];
  }
添加新属性:您可以通过简单的赋值，向已存在的对象添加新属性。
  person.nationality = "English";     假设 person 对象已存在 - 那么您可以为其添加新属性：
删除属性:delete 关键词从对象中删除属性：
  delete person.age;   // 或 delete person["age"];
  this 关键词:指的是拥有该 JavaScript 代码的对象。
访问 person 对象的 fullName() 方法：               name = person.fullName();
访问 fullName 属性时没有使用 ()，则将返回函数定义：  name = person.fullName;
使用内建方法
     此例使用 String 对象的 toUpperCase() 方法，把文本转换为大写：var message = "Hello world!";     var x = message.toUpperCase();
    JavaScript 访问器（Getter 和 Setter）:    JavaScript Getter（get 关键词）使用 lang 属性来获取 language 属性的值，使用get和set可以将访问对象方法变成对象属性的方式即object.fullname;
     get lang() {
    return this.language;
  }
  document.getElementById("demo").innerHTML = person.lang;
  JavaScript Setter（set 关键词）:  使用 lang 属性来设置 language 属性的值。
   set lang(lang) {
    this.language = lang;
  }
      person.lang = "en";
          document.getElementById("demo").innerHTML = person.language; 
为什么使用 Getter 和 Setter？   它提供了更简洁的语法,它允许属性和方法的语法相同,它可以确保更好的数据质量,有利于后台工作
对象构造器: 您无法为对象构造器添加新属性,您无法为对象构造器添加新方法
    function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
    this.name = function() {return this.firstName + " " + this.lastName;};
}
通过 new 关键词调用构造器函数可以创建相同类型的对象：
  var myFather = new Person("Bill", "Gates", 62, "blue");
  var myMother = new Person("Steve", "Jobs", 56, "green");
prototype 属性：
  允许您为对象构造器添加新属性：   Person.prototype.nationality = "English";  //person是上面的对象构造器
  允许您为对象构造器添加新方法：   Person.prototype.name = function() {    return this.firstName + " " + this.lastName;   };
JavaScript 提供原始数据类型字符串、数字和布尔的对象版本。但是并无理由创建复杂的对象。原始值快得多！
  var x1 = {};            // 新对象
  var x2 = "";            // 新的原始字符串
  var x3 = 0;             // 新的原始数值
  var x4 = false;         // 新的原始逻辑值
  var x5 = [];            // 新的数组对象
  var x6 = /()/           // 新的正则表达式对象
  var x7 = function(){};  // 新的函数对象

JavaScript this 关键词
方法中的 this：在对象方法中，this 指的是此方法的“拥有者”。上例中的this 指的是 person 对象。
  fullName : function() {   //person 对象是 fullName 方法的拥有者。
  return this.firstName + " " + this.lastName;
  }
单独的 this,在单独使用时，拥有者是全局对象，因此 this 指的是全局对象。在浏览器窗口中，全局对象是 [object Window]：
  var x = this;
在严格模式中，如果单独使用，那么 this 指的是全局对象 [object Window]：
  "use strict";
  var x = this;
函数中的 this（默认）在 JavaScript 函数中，函数的拥有者默认绑定 this。因此，在函数中，this 指的是全局对象 [object Window]。
  function myFunction() {
  return this;
  }
函数中的 this（严格模式）JavaScript 严格模式不允许默认绑定。因此，在函数中使用时，在严格模式下，this 是未定义的（undefined）。
  "use strict";
  function myFunction() {
   return this;
  }
事件处理程序中的 this,在 HTML 事件处理程序中，this 指的是接收此事件的 HTML 元素：
  <button onclick="this.style.display='none'">点击来删除我！</button>
对象方法绑定,在此例中，this 是 person 对象（person 对象是该函数的“拥有者”）：实例
  var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
    fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
显式函数绑定详情见下面的 js call()和js apply();

JavaScript Let(块内变量声明)
在块 {} 内声明的变量无法从块外访问：    
  var  x = 10;// Here x is 10
  {  
   let x = 2; // Here x is 2 
  }
  // Here x is 10
通过 let 关键词定义的全局变量不属于 window 对象：
  let carName = "porsche";   // 此处的代码不可使用 window.carName
在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的，反之亦然。  相同作用域不能重复申请重复变量。
  var声明的变量会被提升至顶端，而let不行，就是无法在let声明之前使用该变量

JavaScript Const（常量的声明，声明时赋值且不能改变，数组对象可以值改变，但不能整体修改）
通过 const 定义的变量与 let 变量类似，块内作用且有效，但不能重新赋值：JavaScript const 变量必须在声明时赋值：
var x = 10;// 此处，x 为 10
{ 
  const x = 6;  // 此处，x 为 6
}
// 此处，x 为 10
常量对象可以更改，您可以更改常量对象的属性：
const car = {type:"porsche", model:"911", color:"Black"};// 您可以创建 const 对象：
car.color = "White";// 您可以更改属性：
car.owner // 您可以添加属性：= "Bill";
但是您无法重新为常量对象赋值：
const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR
常量数组可以更改，您可以更改常量数组的元素：
const cars = ["Audi", "BMW", "porsche"];// 您可以创建常量数组：
cars[0] = "Honda";// 您可以更改元素：
cars.push("Volvo");// 您可以添加元素：
但是您无法重新为常量数组赋值：
const cars = ["Audi", "BMW", "porsche"];
cars = ["Honda", "Toyota", "Volvo"];      // ERROR

JavaScript 随机
Math.random  返回 0（包括） 至 1（不包括） 之间的随机数：  总是返回小于 1 的数。
document.getElementById("demo").innerHTML = Math.random();
JavaScript 随机整数
Math.random() 与 Math.floor() 一起使用用于返回随机整数。
Math.floor(Math.random() * X);		// 返回 0 至 X-1 之间的数 x应是一个具体的数字
一个适当的随机函数，正如你从上面的例子看到的，创建一个随机函数用于生成所有随机整数是一个好主意。这个 JavaScript 函数始终返回介于 min（包括）和 max（不包括）之间的随机数：
function getRndInteger(min, max) {   //不包括边界数字
    return Math.floor(Math.random() * (max - min) ) + min;
}
function getRndInteger(min, max) {   //包括边界数字
    return Math.floor(Math.random() * (max - min + 1) ) + min;
}

JavaScript 逻辑
Boolean() 函数，您可以使用 Boolean() 函数来确定表达式（或变量）是否为真：
Boolean(10 > 9)        // 返回 true ， 或者甚至更简单：
(10 > 9)       10 > 9              // 也返回 true       
所有具有“真实”值的即为 True  100，3.14，-15，"Hello"，"false"，7 + 1 + 3.14，5 < 6 
所有不具有“真实”值的即为 False 0，-0 ，""），undefined ，null，false，NaN

JavaScript 比较和逻辑运算符
var voteable = (age < 18) ? "太年轻":"足够成熟";   <18 太年轻 >=18足够成熟
比较不同的类型：如果将字符串与数字进行比较，那么在做比较时 JavaScript 会把字符串转换为数值。空字符串将被转换为 0。非数值字符串将被转换为始终为 false 的 NaN。


二：JavaScript HTML DOM(文档对象模型)  当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
①查找 HTML 元素（id、标签名、类名）
document.getElementById(id)            通过元素 id 来查找元素   最常用的方法   var myElement = document.getElementById("intro");  如果未找到元素，myElement 将包含 null。
document.getElementsByTagName(name)    通过标签名来查找元素                   var x = document.getElementsByTagName("p");
document.getElementsByClassName(name)  通过类名来查找元素                     var x = document.getElementsByClassName("intro");
 返回 class="intro" 的所有 <p> 元素列表,如果您需要查找匹配指定CSS 选择器的 HTML 元素，请使用 querySelectorAll() 方法。   var x = document.querySelectorAll("p.intro"); 
②改变 HTML 元素：获取元素内容最简单的方法是使用 innerHTML 属性。
element.innerHTML = new html content     改变元素的 inner HTML    document.getElementById(id).innerHTML = new text    document.getElementById("p1").innerHTML = "hello kitty!";
element.attribute = new value            改变 HTML 元素的属性值    document.getElementById(id).attribute = new value   document.getElementById("myImage").src = "landscape.jpg";
element.setAttribute(attribute, value)   改变 HTML 元素的属性值    
element.style.property = new style       改变 HTML 元素的样式   document.getElementById(id).style.property = new style  document.getElementById("p2").style.color = "blue";

③添加和删除元素
document.createElement(element)     创建 HTML 元素      createElement
document.removeChild(element)       删除 HTML 元素      removeChild
document.appendChild(element)       添加 HTML 元素      appendChild
document.replaceChild(element)      替换 HTML 元素      replaceChild
document.write(text)                写入 HTML 输出流    write

④添加事件处理程序
document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序   <button type="button" onclick="document.getElementById('id1').style.color = 'red'">
<h1 onclick="this.innerHTML = 'Hello!'">点击此文本！</h1>

⑤查找 HTML 对象
属性 描述 DOM
document.anchors 返回拥有 name 属性的所有 <a> 元素。 1
document.applets 返回所有 <applet> 元素（HTML5 不建议使用） 1
document.baseURI 返回文档的绝对基准 URI 3
document.body 返回 <body> 元素 1
document.cookie 返回文档的 cookie 1
document.doctype 返回文档的 doctype 3
document.documentElement 返回 <html> 元素 3
document.documentMode 返回浏览器使用的模式 3
document.documentURI 返回文档的 URI 3
document.domain 返回文档服务器的域名 1
document.domConfig 废弃。返回 DOM 配置 3
document.embeds 返回所有 <embed> 元素 3
document.forms 返回所有 <form> 元素 1
document.head 返回 <head> 元素 3
document.images 返回所有 <img> 元素 1
document.implementation 返回 DOM 实现 3
document.inputEncoding 返回文档的编码（字符集） 3
document.lastModified 返回文档更新的日期和时间 3
document.links 返回拥有 href 属性的所有 <area> 和 <a> 元素 1
document.readyState 返回文档的（加载）状态 3
document.referrer 返回引用的 URI（链接文档） 1
document.scripts 返回所有 <script> 元素 3
document.strictErrorChecking 返回是否强制执行错误检查 3
document.title 返回 <title> 元素 1
document.URL 返回文档的完整 URL 1
JavaScript HTML DOM 事件(具体事件看下表）
onclick 事件：当点击按钮时将执行函数。
//onload 和 onunload 事件
当用户进入后及离开页面时，会触发 onload 和 onunload 事件, onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本,onload 和 onunload 事件可用于处理 cookie。 	
<body onload="checkCookies()">
//onchange 事件     onchange 事件经常与输入字段验证结合使用。
<input type="text" id="fname" onchange="upperCase()">
//onmouseover 和 onmouseout 事件       onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：//实例1
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
点击鼠标</div>
function mDown(obj) {   //mdown
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerHTML = "松开鼠标";
}
function mUp(obj) {  //mup
  obj.style.backgroundColor="#D94A38";
  obj.innerHTML="谢谢您";
}

JavaScript HTML DOM 事件监听器(addEventListener(第一个参数事件类型在下面的事件表中，第二个是需要条用的函数，第三个是true/false)
addEventListener() 方法： 添加当用户点击按钮时触发的事件监听器：    document.getElementById("myBtn").addEventListener("click", displayDate);
方法为指定元素指定事件处理程序，为元素附加事件处理程序而不会覆盖已有的事件处理程序。您能够向一个元素添加多个事件处理程序,您能够向一个元素添加多个相同类型的事件处理程序，
例如两个 "click" 事件,您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。使我们更容易控制事件如何对冒泡作出反应。
当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。
您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。
 语法：element.addEventListener(event 第一个参数是事件的类型（如 "click" 或 "mousedown"）,function第二个参数是当需要调用的函数,useCapture第三个参数是布尔值，指定使用事件冒泡还是事件捕获);   
。此参数  true/false 注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。
事件传播:是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？
在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。 从内到外    true
在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。从外到内    false
在 addEventListener() 方法中，你能够通过第三个参数来规定传播类型： addEventListener(event, function, false/true);默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。
document.getElementById("myP").addEventListener("click", myFunction, true);//冒泡先内
document.getElementById("myDiv").addEventListener("click", myFunction, false); //捕获先外后内
例子1：当用户点击某个元素时提示 "Hello World!"：<button id="myBtn">试一试</button>     
document.getElementById("myBtn").addEventListener("click", function() { alert("Hello World!");});
document.getElementById("myBtn").addEventListener("click", myFunction);   function myFunction() {  alert ("Hello World!");}
向相同元素添加多个事件处理程序addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件：
//实例1
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
//实例2
var x = document.getElementById("myBtn");   
x.addEventListener("mouseover", myFunction); //鼠标移入  moused over
x.addEventListener("click", mySecondFunction);//鼠标点击  clicked
x.addEventListener("mouseout", myThirdFunction);//鼠标移出  moused out
function myFunction() {    document.getElementById("demo").innerHTML += "Moused over!<br>";}
function mySecondFunction() {   document.getElementById("demo").innerHTML += "Clicked!<br>";}
function myThirdFunction() {     document.getElementById("demo").innerHTML += "Moused out!<br>";}
//实例3    添加当用户调整窗口大小时触发的事件监听器：
window.addEventListener("resize", function(){  document.getElementById("demo").innerHTML = Math.random();});
removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：
element.removeEventListener("mousemove", myFunction);

事件句柄　(Event Handlers)  HTML 4.0 新特性之一是能够使 HTML 事件触发浏览器中的行为，当用户点击某个 HTML 元素时启动一段 JavaScript。
属性 此事件发生在何时...
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。
JavaScript HTML DOM 导航
通过 JavaScript，您可以使用以下节点属性在节点之间导航：parentNode/childNodes[nodenumber]/firstChild/lastChild/nextSibling/previousSibling
DOM 根节点:有两个特殊属性允许访问完整文档：
document.body - 文档的 body                  alert(document.body.innerHTML);   输出body标签下的所有内容
document.documentElement - 完整文档          alert(document.documentElement.innerHTML); 整个文档

nodeName 属性 ： 规定节点的名称。,是只读的
元素节点的 nodeName 等同于标签名， nodeName 总是包含 HTML 元素的大写标签名,属性节点的 nodeName 是属性名称,文本节点的 nodeName 总是 #text,文档节点的 nodeName 总是 #document
document.getElementById("id02").innerHTML  = document.getElementById("id01").nodeName;   输出H!

nodeValue 属性 :规定节点的值。
元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本文本
属性节点的 nodeValue 是属性值

nodeType 属性:返回节点的类型,是只读的。返回1,2,3,8,9,10,
 document.getElementById("id01").nodeType;

JavaScript HTML DOM 元素（节点）
var para = document.createElement("p");               创建一个新的 <p> 元素：	
var node = document.createTextNode("这是一个新段落。"); 创建文本节点。
para.appendChild(node);                                向 <p> 元素追加这个文本节点：
var element = document.getElementById("div1");         查找一个已有的元素：
  element.appendChild(para);                             向这个已有的元素追加新元素：    appendChild() 方法，追加新元素作为父的最后一个子。
insertBefore() 方法：
  var child = document.getElementById("p1");        这两句替换上面最后一句
  element.insertBefore(para, child);         
删除已有 HTML 元素：
var parent = document.getElementById("div1");   查找 id="div1" 的元素，命名为parent.
var child = document.getElementById("p1");      查找 id="p1" 的 <p> 元素,命名为child.
parent.removeChild(child);                      从父<div>中删除子<p>：
或者
var child = document.getElementById("p1");       查找 id="p1" 的 <p> 元素,命名为child.
child.parentNode.removeChild(child);      通过p元素的父节点删除p
替换 HTML 元素:replaceChild() 方法：
var para = document.createElement("p");            创建一个新的 <p> 元素：	
var node = document.createTextNode("这是新文本。"); 创建文本节点。
para.appendChild(node);                            向 <p> 元素追加这个文本节点：
var parent = document.getElementById("div1");      查找 id="div1" 的元素，并且命名为parent
var child = document.getElementById("p1");         查找 id="p1" 的 <p> 元素，并且命名为child.
parent.replaceChild(para, child);                  替换p1为p

JavaScript HTML DOM 集合(HTML collection对象） getElementsByTagName()方法
HTML Collection 对象是类数组的 HTML 元素列表（集合）。
getElementsByTagName() 方法返回 HTMLCollection 对象。
var x = document.getElementsByTagName("p");   下面的代码选取文档中的所有 <p> 元素，并且命名为x
该集合中的元素可通过索引号进行访问。
如需访问第二个 <p> 元素，您可以这样写：
y = x[1];  索引从 0 开始。
HTML HTMLCollection 长度:length 属性定义了 HTMLCollection 中元素的数量：
var myCollection = document.getElementsByTagName("p");   下面的代码选取文档中的所有 <p> 元素，并且命名为myCollection
document.getElementById("demo").innerHTML = myCollection.length; 
改变所有 <p> 元素的背景色：
  var myCollection = document.getElementsByTagName("p");    下面的代码选取文档中的所有 <p> 元素，并且命名为myCollection
  var i;
  for (i = 0; i < myCollection.length; i++) {   对mycollection进行循环  0-length
    myCollection[i].style.backgroundColor = "red";
 }

JavaScript HTML DOM 节点列表  （HTML nodelist对象）   getElementsByTagName()方法
HTML DOM NodeList 对象:从文档中提取的节点列表（集合）,与 HTMLCollection 对象几乎相同。
使用 getElementsByClassName() 方法，某些浏览器会返回 NodeList 对象而不是 HTMLCollection,所有浏览器都会为childNodes 属性返回 NodeList 对象。
大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。
var myNodeList = document.querySelectorAll("p");  下面的代码选取文档中的所有 <p> 节点,命名为mynodelist,NodeList 中的元素可通过索引号进行访问。
y = myNodeList[1];  注释：索引从 0 开始,访问第二个 <p> 节点
HTML DOM Node List 长度:length 属性定义节点列表中的节点数：
var myNodelist = document.querySelectorAll("p");              创建所有 <p> 元素的列表
document.getElementById("demo").innerHTML = myNodelist.length;显示该列表的长度,length 属性在您希望遍历节点列表中的节点时很有用：
改变节点列表中所有 <p> 元素的背景色：
var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}
HTMLCollection 与 NodeList 的对比：HTMLCollection是HTML元素的集合。NodeList是文档节点的集合。NodeList和HTML 集合几乎完全相同。都是类数组的对象列表（集合），
都有定义列表（集合）中项目数的 length 属性， 都可以通过索引 (0, 1, 2, 3, 4, ...) 像数组那样访问每个项目。
访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号,访问 NodeList 项目，只能通过它们的索引号,只有 NodeList 对象能包含属性节点和文本节点,节点列表不是数组！
节点数组看起来像数组，但并不是,您能够遍历节点列表并像数组那样引用其节点,不过，您无法对节点列表使用数组方法(如果需要查看数组方法看上面)，比如  valueOf()、push()、pop() 或 join()。

三：JS Browser BOM 浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。
   window.document.getElementById("header");   等同于：    document.getElementById("header");
窗口尺寸：两个属性可用用于确定浏览器窗口的尺寸。这两个属性都以像素返回尺寸：
   window.innerHeight - 浏览器窗口的内高度（以像素计）
   window.innerWidth - 浏览器窗口的内宽度（以像素计）
其他窗口方法：
  window.open() - 打开新窗口
  window.close() - 关闭当前窗口
  window.moveTo() -移动当前窗口
  window.resizeTo() -重新调整当前窗口
window.screen 对象包含用户屏幕的信息。  //屏幕相关
  document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;                 显示以像素计的屏幕宽度：   screen.width
  document.getElementById("demo").innerHTML = "Screen Height: " + screen.height;               显示以像素计的屏幕高度：   screen.height
  document.getElementById("demo").innerHTML = "Available Screen Width: " + screen.availWidth;  显示以像素计的屏幕可用宽度：screen.availWidth
  document.getElementById("demo").innerHTML = "Available Screen Height: " + screen.availHeight;显示以像素计的屏幕可用高度：screen.availHeight
  document.getElementById("demo").innerHTML = "Screen Color Depth: " + screen.colorDepth;      显示以位计的屏幕色彩深度：  screen.colorDepth
  document.getElementById("demo").innerHTML = "Screen Pixel Depth: " + screen.pixelDepth;      显示以位计的屏幕像素深度：  screen.pixelDepth
window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。
  document.getElementById("demo").innerHTML = "页面位置是 " + window.location.href;        显示当前页面的 href (URL)： window.location.href
  document.getElementById("demo").innerHTML = "页面主机名是 " + window.location.hostname;  显示主机的名称：            window.location.hostname
  document.getElementById("demo").innerHTML = "页面路径是 " + window.location.pathname;    显示当前 URL 的路径名：     window.location.pathname
  document.getElementById("demo").innerHTML = "页面协议是 " + window.location.protocol;    显示 web 协议              window.location.protocol
  document.getElementById("demo").innerHTML = "端口号是： " + window.location.port;        显示主机的端口号：          window.location.port
                                                              window.location.assign()    方法加载新文档。
window.history 对象包含浏览器历史。history.back() 方法加载历史列表中前一个 URL。  这等同于在浏览器中点击后退按钮。
Window History Forward           history forward() 方法加载历史列表中下一个 URL。这等同于在浏览器中点击前进按钮。
Window Navigator 对象包含有关访问者的信息。
浏览器 Cookie        document.getElementById("demo").innerHTML = "cookiesEnabled is " +   navigator.cookieEnabled;      navigator.cookieEnabled;
浏览器应用程序名称    document.getElementById("demo").innerHTML = "navigator.appName is " + navigator.appName;           navigator.appName;   
浏览器应用程序代码名称document.getElementById("demo").innerHTML = "navigator.appCodeName is " + navigator.appCodeName;   navigator.appCodeName;
浏览器引擎           document.getElementById("demo").innerHTML = "navigator.product is " + navigator.product;           navigator.product;
浏览器版本           document.getElementById("demo").innerHTML = navigator.appVersion;                                  navigator.appVersion;
浏览器代理           document.getElementById("demo").innerHTML = navigator.userAgent;                                   navigator.userAgent;
浏览器平台           document.getElementById("demo").innerHTML = navigator.platform;                                    navigator.platform;
浏览器语言           document.getElementById("demo").innerHTML = navigator.language;                                    navigator.language;
浏览器是否在线？     document.getElementById("demo").innerHTML = navigator.onLine;                                       navigator.onLine;
Java 是否启用？     document.getElementById("demo").innerHTML = navigator.javaEnabled();                                navigator.javaEnabled();
JavaScript 有三种类型的弹出框：警告框、确认框和提示框。
window.alert("sometext");警告框，window.confirm("sometext");确认框，window.prompt("sometext","defaultText");提示框
JavaScript Timing 事件：    JavaScript 可以在时间间隔内执行。这就是所谓的定时事件（ Timing Events）。
setTimeout() 方法 window.setTimeout(function第一个参数是要执行的函数, milliseconds第二个参数指示执行之前的毫秒数);   
myVar = setTimeout(function, milliseconds);   clearTimeout(myVar); // clearTimeout() 方法停止执行 setTimeout() 中规定的函数。
setInterval() 方法在每个给定的时间间隔重复给定的函数。       
window.setInterval(function。第一个参数是要执行的函数, milliseconds第二个参数每个执行之间的时间间隔的长度);  可以不带 window 前缀来写,
<p id="demo"></p>        <button onclick="clearInterval(myVar)">停止时间</button>      // clearInterval(myVar); 点击按钮停止计时器
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
JavaScript Cookies相关  Cookie 让您在网页中存储用户信息。   //cookie组合实例
function setCookie(cname, cvalue, exdays) {          参数是：cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 过期的天数（exdays）。
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";    通过把 cookie 名称、cookie 值和过期字符串相加，该函数就设置了 cookie。
}

function getCookie(cname) {               cookie 作为参数（cname）。
    var name = cname + "=";               创建变量（name）与要搜索的文本（CNAME”=”）。解码 cookie字符串，处理带有特殊字符的 cookie，
    var ca = document.cookie.split(';');   例如 “$”。用分号把 document.cookie 拆分到名为 ca（decodedCookie.split(';')）的数组中。
    for(var i = 0; i < ca.length; i++) {  遍历 ca 数组（i = 0; i < ca.length; i++），然后读出每个值 c = ca[i]。
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        if (c.indexOf(name)  == 0) {     如果找到 cookie（c.indexOf(name) == 0），则返回该 cookie 的值（c.substring(name.length, c.length）。
            return c.substring(name.length, c.length);
         }
    }
    return "";     如果未找到 cookie，则返回 ""。
}

function checkCookie() {    如果已设置 cookie，将显示一个问候。如果未设置 cookie，会显示一个提示框，询问用户的名字，并存储用户名 cookie 365 天，通过调用 setCookie 函数：
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

提升性能的几种方案
减少循环中的活动    循环每迭代一次，循环中的每条语句，包括 for 语句，都会被执行。能够放在循环之外的语句或赋值会使循环运行得更快。
差的代码：
var i;
for (i = 0; i < arr.length; i++) {
更好的代码：
var i;
var l = arr.length;
for (i = 0; i < l; i++) {
循环每次迭代时，坏代码就会访问数组的 length 属性。好代码在循环之外访问 length 属性，使循环更快。

减少 DOM 访问，缩减 DOM 规模
与其他 JavaScript 相比，访问 HTML DOM 非常缓慢。假如您期望访问某个 DOM 元素若干次，那么只访问一次，并把它作为本地变量来使用：
保持 HTML DOM 中较少的元素。这么做会提高页面加载，并加快渲染页面显示，每一次试图搜索 DOM（比如 getElementsByTagName）都将受益于一个较小的 DOM。
var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello"; 

避免不必要的变量
请不要创建不打算存储值的新变量。通常您可以替换代码：
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName; 
用这段代码：
document.getElementById("demo").innerHTML = firstName + " " + lastName

延迟 JavaScript 加载
请把脚本放在页面底部，使浏览器首先加载页面。脚本在下载时，浏览器不会启动任何其他的下载。此外所有解析和渲染活动都可能会被阻塞。HTTP 规范定义浏览器不应该并行下载超过两种要素。一个选项是在 script 标签中使用 defer="true"。defer 属性规定了脚本应该在页面完成解析后执行，但它只适用于外部脚本。
如果可能，您可以在页面完成加载后，通过代码向页面添加脚本：
<script>
window.onload = downScripts;

function downScripts() {
    var element = document.createElement("script");
    element.src = "myScript.js";
    document.body.appendChild(element);
}
</script>

避免使用 with
请避免使用 with 关键词。它对速度有负面影响。它也将混淆 JavaScript 作用域。严格模式中不允许 with 关键词。
JavaScript call() 方法（字符串）
call() 方法是预定义的 JavaScript 方法。它可以用来调用所有者对象作为参数的方法。通过 call()，您能够使用属于另一个对象的方法。本例调用 person 的 fullName 方法，并用于 person1：
var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}    //fullname方法属于 person对象
var person1 = {
    firstName:"Bill",
    lastName: "Gates",
}
var person2 = {
    firstName:"Steve",
    lastName: "Jobs",
}
person.fullName.call(person1);  // 将返回 "Bill Gates"
person.fullName.call(person2); //返回 steve jobs
person.fullName.call(person1, "Seattle", "USA");  //Bill Gates,Seatle,USA

JavaScript 函数 Apply(接收数组）
方法重用
通过 apply() 方法，您能够编写用于不同对象的方法。JavaScript apply() 方法,apply() 方法与 call() 方法非常相似：
在本例中，person 的 fullName 方法被应用到 person1：
var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person.fullName.apply(person1);  // 将返回 "Bill Gates"
call() 和 apply() 之间的区别
不同之处是：
call() 方法分别接受参数。
apply() 方法接受数组形式的参数。
如果要使用数组而不是参数列表，则 apply() 方法非常方便。
带参数的 apply() 方法,apply() 方法接受数组中的参数：
var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);  //john,doe,Oslo,Norway
与 call() 方法对比：
实例
var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");