笔记

typeof null    // -> object

console.log(null == undefind)   // -> true

parseInt('070');  // -> 70 not 56

var num = 10;
console.log(num.toString(2));  // -> '1010'

var num1 = 2;
var num2 = 20;
var num3 = --num1 + num2;   // 21
var num4 = num1 + num2;        // 21
var num5 = 2;
var num6 = 20;
var num7 = num5-- + num6;   // 22
var num8 = num5 + num6;        // 21

function setName(obj) {
   obj.name = "Nicholas";
}
var person = new Object();
setName(person);
alert(person.name); //"Nicholas"

function setName(obj) {
 obj.name = "Nicholas";
  obj = new Object();
 obj.name = "Greg";
}
var person = new Object();
setName(person);
alert(person.name); //"Nicholas"

if (value instanceof Array) {
}

if (Array.isArray(value)) {
}

var values = [0, 1, 5, 10, 15];
values.sort();
alert(values); //0,1,10,15,5

function compare(value1, value2) {
 if (value1 < value2) {
       return -1;
  } else if (value1 > value2) {
        return 1;
   } else {
        return 0;
   }
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //0,1,5,10,15

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue
alert(removed); // red，返回的数组中只包含一项
removed = colors.splice(1, 0, "yellow", "orange"); // 从位置1 开始插入两项
alert(colors); // green,yellow,orange,blue
alert(removed); // 返回的是一个空数组
removed = colors.splice(1, 1, "red", "purple"); // 插入两项，删除一项
alert(colors); // green,red,purple,orange,blue
alert(removed); // yellow，返回的数组中只包含一项

var pattern1 = /[bc]at/i;
// 等价于
var pattern2 = new RegExp('[bc]at', 'i');

var text = "mom and dad and baby";
var pattern = /mom( and dad( and baby)?)?/gi;
var matches = pattern.exec(text);
alert(matches.index); // 0
alert(matches.input); // "mom and dad and baby"
alert(matches[0]); // "mom and dad and baby"
alert(matches[1]); // " and dad and baby"
aler t(matches[2]); // " and baby"

var text = "000-00-0000";
var pattern = /\d{3}-\d{2}-\d{4}/;
if (pattern.test(text)){
   alert("The pattern was matched.");
}

var pattern = new RegExp("\\[bc\\]at", "gi");
alert(pattern.toString()); // /\[bc\]at/gi
alert(pattern.toLocaleString()); // /\[bc\]at/gi

// ok
alert(sum(10,10));
function sum(num1, num2){
    return num1 + num2;
}
// unexpected identifier(意外标识符)
alert(sum(10,10));
var sum = function(num1, num2){
    return num1 + num2;
};

function factorial(num){
    if (num <=1) {
       return 1;
   } else {
        return num * factorial(num-1)
   }
}

function factorial(num){
  if (num <=1) {
       return 1;
   } else {
        return num * arguments.callee(num-1)
    }
}

function outer(){
    inner();
}
function inner(){
  alert(inner.caller);
}
outer();

function outer() {
  inner();
}
function inner() {
 alert(arguments.callee.caller);
}
outer();

var value = '25';
var number = Number(value);  // 转型函数
console.log(typeof number);  // 'number'
var obj = new Number(value); // 构造函数
console.log(typeof obj); // 'object'

var num = 10;
alert(num.toString()); //"10"
alert(num.toString(2)); //"1010"
alert(num.toString(8)); //"12"
alert(num.toString(10)); //"10"
alert(num.toString(16)); //"a"

var stringValue = "hello world";
alert(stringValue.charAt(1)); //"e"
alert(stringValue.charCodeAt(1)); //输出字符编码"101"

var stringValue = "hello ";
var result = stringValue.concat("world", "!");
alert(result); //"hello world!"
var stringValue = "hello world";
alert(stringValue.slice(3)); //"lo world"
alert(stringValue.substring(3)); //"lo world"
alert(stringValue.substr(3)); //"lo world"
alert(stringValue.slice(3, 7)); //"lo w"
alert(stringValue.substring(3,7)); //"lo w"
alert(stringValue.substr(3, 7)); //"lo worl"
// 参数是负值的情况下，它们的行为就不尽相同了。
// 其中，slice()方法会将传入的负值与字符串的长度相加，
// substr()方法将负的第一个参数加上字符串的长度，而将负的第二个参数转换为0。
// 最后，substring()方法会把所有负值参数都转换为0。
alert(stringValue.slice(-3)); //"rld"
alert(stringValue.substring(-3)); //"hello world"
alert(stringValue.substr(-3)); //"rld"
alert(stringValue.slice(3, -4)); //"lo w"
alert(stringValue.substring(3, -4)); //"hel"
alert(stringValue.substr(3, -4)); //""（空字符串）

var text = 'cat, bat, sat, fat';
var pattern = /.at/;
// 等价于 pattern.exec(text)
var matches = text.match(pattern);
alert(matches.index); //0
alert(matches[0]); //"cat"
alert(pattern.lastIndex); //0

var text = "cat, bat, sat, fat";
var pos = text.search(/at/);
aler t(pos); //1

var text = "cat, bat, sat, fat";
var result = text.replace("at", "ond");
alert(result); //"cond, bat, sat, fat"
result = text.replace(/at/g, "ond");
aler t(result); //"cond, bond, sond, fond"

var text = "cat, bat, sat, fat";
result = text.replace(/(.at)/g, "word ($1)");
alert(result); //word (cat), word (bat), word (sat), word (fat)

var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(","); //["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",", 2); //["red", "blue"]
var colors3 = colorText.split(/[^\,]+/); //["", ",", ",", ",", ""]

var stringValue = "yellow";
alert(stringValue.localeCompare("brick")); //1
alert(stringValue.localeCompare("yellow")); //0
alert(stringValue.localeCompare("zoo")); //-1

alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"

var person = {};
Object.defineProperty(person, 'name', {
  writable: false,
    value: 'Yeaseon'
});

var book = {
  _year: 2004,
    edition: 1
};
Object.defineProperty(book, "year", {
   get: function(){
        return this._year;
  },
  set: function(newValue){
        if (newValue > 2004) {
           this._year = newValue;
          this.edition += newValue - 2004;
        }
   }
});
book.year = 2005;
alert(book.edition); //2

function createPerson(name, age, job){
    var o = new Object();
   o.name = name;
  o.age = age;
    o.job = job;
    o.sayName = function(){
     alert(this.name);
   };
  return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

function Person(name, age, job){
 this.name = name;
   this.age = age;
 this.job = job;
 this.sayName = function(){
      alert(this.name);
   };
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
  alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"

alert(Person.prototype.isPrototypeOf(person1)); //true

alert(Object.getPrototypeOf(person1) == Person.prototype); //true
alert(Object.getPrototypeOf(person1).name); //"Nicholas"

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
  alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg"; //实质是在实例上增加一个name属性
alert(person1.name); //"Greg"——来自实例
alert(person2.name); //"Nicholas"——来自原型

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
   alert(this.name);
};
var person1 = new Person();
person1.name = "Greg";
alert(person1.name); //"Greg"——来自实例
delete person1.name;
alert(person1.name); //"Nicholas"——来自原型

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
   alert(this.name);
};
var keys = Object.keys(Person.prototype);
alert(keys); //"name,age,job,sayName"
var p1 = new Person();
p1.name = "Rob";
p1.age = 31;
var p1keys = Object.keys(p1);
alert(p1keys); //"name,age"

var keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys); //"constructor,name,age,job,sayName"

function Person(){
}
Person.prototype = {
  name : "Nicholas",
  age : 29,
   job: "Software Engineer",
   sayName : function () {
     alert(this.name);
   }
};

function Person(){
}
Person.prototype = {
  constructor : Person,
   name : "Nicholas",
  age : 29,
   job: "Software Engineer",
   sayName : function () {
     alert(this.name);
   }
};

function Person(){
}
Person.prototype = {
   name : "Nicholas",
  age : 29,
   job : "Software Engineer",
  sayName : function () {
     alert(this.name);
   }
};
Object.defineProperty(Person.prototype, "constructor", {
 enumerable: false,
  value: Person
});

function Person(){
}
var friend = new Person();
Person.prototype = {  //重写
   constructor: Person,
    name : "Nicholas",
  age : 29,
   job : "Software Engineer",
  sayName : function () {
     alert(this.name);
   }
};
friend.sayName(); //error

function Person(name, age, job){
 this.name = name;
   this.age = age;
 this.job = job;
 this.friends = ["Shelby", "Court"];
}
Person.prototype = {
    constructor : Person,
   sayName : function(){
       alert(this.name);
   }
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

function SuperType () {
  this.property = true;
}
SuperType.prototype.getSuperValue = function () {
 return this.property;
};
function SubType () {
    this.subproperty = false;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
 return this.subproperty;
};
var instance = new SubType();
console.log(instance.getSuperValue());  // true

alert(instance instanceof Object); //true
alert(instance instanceof SuperType); //true
alert(instance instanceof SubType); //true

alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperType.prototype.isPrototypeOf(instance)); //true
alert(SubType.prototype.isPrototypeOf(instance)); //true

if (condition) {
   function sayHi () {
     console.log('Hi');
  }
} else {
   function sayHi () {
     console.log('Yo');
  }
}

var sayHi;
if (condition) {
   sayHi = function () {
       console.log('Hi');
  }
} else {
   sayHi = function () {
       console.log('Yo');
  }
}

function createFunctions () {
  var result = new Array();
   for (var i=0; i < 10; i++){
      result[i] = function(){
         return i;
       };
  }
   return result;
}

function createFunction () {
  var result = new Array();
   for (var i = 0; i < 10; i++) {
       result[i] = function (num) {
            return function () {
                return num;
         };
      }(i);
   }
   return result;
}

var name = 'The window';
var obj = {
   name: 'my object',
  getNameFunc: function () {
      return function () {
            return this.nam;
        }
   }
}
console.log(obj.getNameFunc()());  // The Window (非严格模式)

(function () {
    // 这里是块级作用域
})();

var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY;

var pageWidth = window.innerWidth,
   pageHeight = window.innerHeight;
if (typeof pageWidth != 'number') {
 if (document.compatMode == 'CSS1Compat') { // 浏览器标准模式
       pageWidth = document.documentElement.clientWidth;
       pageHeight = document.documentElement.clientHeight;
 } else {  // IE6 混杂模式
       pageWidth = document.body.clientWidth;
      pageHeight = document.doby.clientHeight;
    }
}

var newWindow = window.open('https://www.google.com.hk', '_blank');
if (newWindow == null) {
  console.log('The popup was blocked!');
}

var blocked = false;
try {
    var newWindow = window.open('https://www.google.com.hk', '_blank');
 if (newWindow == null) {
        blocked = true;
 }
} catch (ex) {
 blocked = true;
}
if (blocked) {
  console.log('The popup was blocked');
}

if (someNode.nodeType == 1) {
  console.log('Node is an element');
}

var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); //true
alert(someNode.lastChild == newNode); //true

//someNode 有多个子节点
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true

//插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild); //true
//插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstChild); //true
//插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true

//替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
//替换最后一个子节点
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

//移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);
//移除最后一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);

var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3（IE < 9）或7（其他浏览器）
var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); //0

// 通过`documentElement`属性访问<html>元素
var html = document.documentElement;
// 访问 <body> 元素
var body = document.body;
// <!DOCTYPE>
var doctype = document.doctype;
// <title>
var title = document.title;
// 完整 url
var url = document.URL;
// domain 域名
var domain = document.domain;
// 取得来源页面的URL(也就是导航到这页的页面)
var referrer = document.referrer;

<script type="text/javascript">
   document.write("<script type=\"text/javascript\" src=\"file.js\">" + "<\/script>");
</script>

<div id="myDiv"></div>
var div = document.getElementById("myDiv");
alert(div.tagName); //"DIV"
alert(div.tagName == div.nodeName); //true

var id = element.attributes.getNamedItem('id').nodeValue;
// 简写
var id = element.attributes['id'].nodeValue;

var div = document.createElement('div');

var textNode = document.createTextNode("<strong>Hello</strong> world!");

function loadScript(url) {
 var script = document.createElement('script');
  script.type = 'text/javascript';
    script.src = url;
   document.body.appendChild(script);
}
loadScirpt('xx.js');

// create table
var table = document.createElement('table');
table.border = 1;
table.width = '100%';
// create tbody
var tbody = document.createElement('tbody');
table.appendChild(tbody);
// create row1
var row1 = document.createElement('tr');
tbody.appendChild(row1);
var cell1_1 = document.createElement('td');
cell1_1.appendChild(document.createTextNode('Cell 1,1'));
row1.appendChild(cell1_1);
var cell2_1 = document.createElement('td');
cell2_1.appendChild(document.createTextNode('Cell 2,1'));
row1.appendChild(cell2_1);
// create row2
var row2 = document.createElement('tr');
tbody.appendChild(row2);
var cell1_2 = document.createElement('td');
cell1_2.appendChild(document.createTextNode('Cell 1,2'));
row1.appendChild(cell1_2);
var cell2_2 = document.createElement('td');
cell2_2.appendChild(document.createTextNode('Cell 2,2'));
row1.appendChild(cell2_2);
document.body.appendChild(table);

// 节点版本
var i,
 len,
    child = element.firstChild;
while(child != element.lastChild){
   if (child.nodeType == 1){ //检查是不是元素
     processChild(child);
    }
   child = child.nextSibling;
}
// 元素版本
var i,
    len,
    child = element.firstElementChild;
while(child != element.lastElementChild){
 processChild(child); //已知其是元素
   child = child.nextElementSibling;
}

div.classList.remove("user");

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true

var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true

if (document.readyState == 'complete') {
   // 加载完成
}

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";

//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");

// 让元素可见
document.form[0].scrollIntoView();

//在当前元素不可见的时候，让它进入浏览器的视口
document.images[0].scrollIntoViewIfNeeded();
//将页面主体往回滚动1 页
document.body.scrollByPages(-1);

// 元素上偏移
function getElementLeft (ele) {
    var actualLeft = ele.offsetLeft;
    var current = ele.offsetParent;
 while (current !== null) {
      actualLeft += current.offsetLeft;
       current = current.offsetParent;
 }
   return actualLeft;
}
// 元素左偏移同理

function getViewport(){
   if (document.compatMode == "BackCompat"){  // IE7之前
         return {
                width: document.body.clientWidth,
               height: document.body.clientHeight
          };
      } else {
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
           };
      }
}

function scrollToTop(element){
 if (element.scrollTop != 0){
        element.scrollTop = 0;
  }
}

var btn = document.getElementById('myBtn');
btn.onclick = function () {
  console.log('clicked');
}

var btn = document.getElementById('myBtn');
btn.onclick = function () {
 console.log(this.id);  // 'myBtn'
}

btn.addEventListener('click', function () {  //匿名函数
 ...
})

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
  alert("Clicked");
});

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
   alert("Clicked");
});
btn.attachEvent("onclick", function(){
  alert("Hello world!");
});

document.body.onclick = function(event){
  alert(event.currentTarget === document.body); //true
    alert(this === document.body); //true
   alert(event.target === document.getElementById("myBtn")); //true
};

var link = document.getElementById("myLink");
link.onclick = function(event){
 event.preventDefault();
};

var EventUtil = {
    addHandler: function(element, type, handler){
       //省略的代码
 },
  getEvent: function(event){
      return event ? event : window.event;
    },
  getTarget: function(event){
     return event.target || event.srcElement;
    },
  preventDefault: function(event){
        if (event.preventDefault){
          event.preventDefault();
     } else {
            event.returnValue = false;
      }
   },
  removeHandler: function(element, type, handler){
        //省略的代码
 },
  stopPropagation: function(event){
       if (event.stopPropagation){
         event.stopPropagation();
        } else {
            event.cancelBubble = true;
      }
   }
};

<input type="submit" value="Submit Form">

<input type="reset" value="Reset Form">

var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;

EventUtil.addHandler(textbox, 'keypress', function (event) {
    event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    if (!/\d/.test(String.fromCharCode(charCode))) {
        EventUtil.preventDefault(event);
    }
})

<input type="text" pattern="\d+" name="count">

if (document.forms[0].elements[0].checkValidity()){
    //字段有效，继续
} else {
   //字段无效
}

if(document.forms[0].checkValidity()){
    //表单有效，继续
} else {
   //表单无效
}

<form method="post" action="signup.php" novalidate>
    <!--这里插入表单元素-->
</form>

// 注意：所有支持XDM的浏览器也支持iframe的`contentWindow`属性
var iframeWindow = document.getElementById('myframe').contentWindow;
iframeWindow.postMessage('A secret', 'https://yeasoenzhang.github.io');

EventUtil.addHandler(window, "message", function(event){
  //确保发送消息的域是已知的域
 if (event.origin == "https://yeasonzhang.github.io"){
       //处理接收到的数据
      processMessage(event.data);
     //可选：向来源窗口发送回执
      event.source.postMessage("Received!", "http://p2p.wrox.com");
   }
});

<!-- 让这个图像不可以拖动 -->
<img src="smile.gif" draggable="false" alt="Smiley face">
<!-- 让这个元素可以拖动 -->
<div draggable="true">...</div>

try {
   // 可能出错的代码
} catch (err) {
   // 处理发生的错误
}

try {
 someFunction();
} catch (error) {
    if (error instanceof TypeError) {
       //...
   } else {
        //
  }
}

throw 12345;
throw "Hello world!";
throw true;
throw { name: "JavaScript"};

function CustomError (message) {
   this.name = 'CustomError';
  this.message = message;
}
CustomError.prototype = new Error();
throw new CustomError('Error msg');

window.onerror = function(message, url, line){
 alert(message);
};

window.onerror = function (message, url, line) {
    console.log(message);
   retrun false;
}

var book = {
  title: "Professional JavaScript",
   authors: [
      "Nicholas C. Zakas"
 ],
  edition: 3,
 year: 2011
};
var jsonText = JSON.stringify(book);

{"title":"Professional JavaScript","authors":["Nicholas C. Zakas"],"edition":3,"year":2011}

var book = {
   "title": "Professional JavaScript",
 "authors": [
        "Nicholas C. Zakas"
 ],
  edition: 3,
 year: 2011
};
var jsonText = JSON.stringify(book, ["title", "edition"]);

{"title":"Professional JavaScript","edition":3}

var book = {
   "title": "Professional JavaScript",
 "authors": [
        "Nicholas C. Zakas"
 ],
  edition: 3,
 year: 2011
};
var jsonText = JSON.stringify(book, function(key, value){
   switch(key){
        case "authors":
         return value.join(",")
      case "year":
            return 5000;
        case "edition":
         return undefined;
       default:
            return value;
   }
});

xhr.open("get", "example.txt", false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.responseText);
} else {
    alert("Request was unsuccessful: " + xhr.status);
}

var xhr = createXHR();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
       if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
       }
   }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

var xhr = createXHR();
xhr.onreadystatechange = function(){
   // ...
};
xhr.open("get", "example.php", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);

function addURLParam(url, name, value) {
  url += (url.indexOf("?") == -1 ? "?" : "&");
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
  return url;
}
var url = "example.php";
//添加参数
url = addURLParam(url, "name", "Nicholas");
url = addURLParam(url, "book", "Professional JavaScript");
//初始化请求
xhr.open("get", url, false);

function submitData(){
    var xhr = createXHR();
  xhr.onreadystatechange = function(){
        if (xhr.readyState == 4){
           if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                alert(xhr.responseText);
            } else {
                alert("Request was unsuccessful: " + xhr.status);
           }
       }
   };
  xhr.open("post", "postexample.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  var form = document.getElementById("user-info");
    xhr.send(serialize(form));
}

var data = new FormData();
data.append('name', 'Yeaseon');

var data = new FormData(document.form[0]);

var xhr = createXHR();
xhr.onreadystatechange = function(){
   // ...
};
xhr.open("get", "timeout.php", true);
xhr.timeout = 1000; //将超时设置为1 秒钟
xhr.ontimeout = function(){
    alert("Request did not return in a second.");
};
xhr.send(null);

var xhr = createXHR();
xhr.open("get", "text.php", true);
xhr.overrideMimeType("text/xml");
xhr.send(null);

var xdr = new XDomainRequest();
xdr.onload = function () {
 console.log(xdr.responseText);
};
xdr.onerror = function(){
   alert("An error occurred.");
};
xdr.open('get', 'http://..../xxx/');
xdr.send(null);

xdr.abort();

var xdr = new XDomainRequest();
xdr.onload = function(){
    alert(xdr.responseText);
};
xdr.onerror = function(){
 alert("An error occurred.");
};
xdr.timeout = 1000;
xdr.ontimeout = function(){
    alert("Request took too long.");
};
xdr.open("get", "http://www.somewhere-else.com/page/");
xdr.send(null);

var xdr = new XDomainRequest();
xdr.onload = function () {
    //
}
xdr.onerror = function () {
  //
}
xdr.open('post', 'http://www.somewhere-else.com/page/');
xdr.contentType = 'application/x-www-form-urlencoded';
xdr.send('name1=value1&name2=value2');

var xhr = createXHR();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
       if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
       }
   }
};
xhr.open("get", "http://www.somewhere-else.com/page/", true);
xhr.send(null);

var img = new Image();
img.onload = img.onerror = function(){
    alert("Done!");
};
img.src = "http://www.example.com/test?name=Nicholas";

callback({"name": "Yeaseon"});

http://freegeoip.net/json/?callback=handleResponse

function handleResponse(response){
  alert("You’re at IP address " + response.ip + ", which is in " +
        response.city + ", " + response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

var source = new EventSource('myevents.php');

var socket = new WebSocket("ws://www.example.com/server.php");

var socket = new WebSocket('ws:// www.example.com/server.php');
socket.send('Hello World');

var message = {
 time: new Date(),
   text: 'Hello world',
    clientId: 'adfalsf39'
};
socket.send(JSON.stringify(message));

socket.onmessage = function (event) {
 var data = event.data;
 // ....
}

var socket = new WebSocket("ws://www.example.com/server.php");
socket.onopen = function(){
   alert("Connection established.");
};
socket.onerror = function(){
 alert("Connection error.");
};
socket.onclose = function(){
   alert("Connection closed.");
};

function isArray(value){
   return Object.prototype.toString.call(value) == "[object Array]";
}
function isFunction(value){
   return Object.prototype.toString.call(value) == "[object Function]";
}
function isRegExp(value){
  return Object.prototype.toString.call(value) == "[object RegExp]";
}

function Person (name, age, job) {
 if (this instanceof Person) {
       this.name = name;
       this.age = age;
     this.job = job;
 } else {
        return new Person(name, age, job);
  }
}

function createXHR(){
    if (typeof XMLHttpRequest != "undefined"){
      return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined"){
        if (typeof arguments.callee.activeXString != "string"){
         var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
              i,len;
          for (i=0,len=versions.length; i < len; i++){
             try {
                   new ActiveXObject(versions[i]);
                 arguments.callee.activeXString = versions[i];
                   break;
              } catch (ex){
                   //跳过
                }
           }
       }
       return new ActiveXObject(arguments.callee.activeXString);
   } else {
        throw new Error("No XHR object available.");
    }
}

function createXHR () {
  if (typeof XMLHttpRequest != 'undefined') {
     createXHR = function () {
           return new XMLHttpRequest();
        };
  } else if (typeof ActiveXObjext != 'undefined') {
       createXHR = function () {
           if (typeof arguments.callee.activeXString != 'string') {
                var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                  i,len;
              for (i = 0; len = versions.length; i < len; i++) {
                   try {
                       new ActiveXObject(versions[i]);
                     arguments.callee.activeXString = versions[i];
                       break;
                  } catch (e) {
                       // skip
                 }
               }
           }
           return new ActiveXObject(arguments.callee.activeXString);
       };
  } else {
        createXHR = function () {
           throw new Error('No XHR object available.');
        }
   }
   return createXHR();
}

var createXHR = (function () {
 if (typeof XMLHttpRequest != 'undefined') {
     return function () {
            return new XMLHttpRequest();
        };
  } else if (typeof ActiveXObjext != 'undefined') {
       return function () {
            if (typeof arguments.callee.activeXString != 'string') {
                var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                  i,len;
              for (i = 0; len = versions.length; i < len; i++) {
                   try {
                       new ActiveXObject(versions[i]);
                     arguments.callee.activeXString = versions[i];
                       break;
                  } catch (e) {
                       // skip
                 }
               }
           }
           return new ActiveXObject(arguments.callee.activeXString);
       };
  } else {
        return function () {
            throw new Error('No XHR object available.');
        }
   }
})();

function bind (fn, context) {
    return function () {
        return fn.apply(context, arguments);
    }
}

EventUtil.addHandler(window, 'online', function () {
   console.log('online');
});
EventUtil.addHandler(window, 'offline', function () {
  console.log('offline');
});

//使用方法存储数据
sessionStorage.setItem("name", "Nicholas");
//使用属性存储数据
sessionStorage.book = "Professional JavaScript";
//使用方法读取数据
var name = sessionStorage.getItem("name");
//使用属性读取数据
var book = sessionStorage.book;
//使用delete 删除一个值——在WebKit 中无效
delete sessionStorage.name;
//使用方法删除一个值
sessionStorage.removeItem("book");

for (var i = 0, len = sessionStorage.length; i < len; i++) {
 var key = sessionStorage.key(i);
    var value = sessionStorage.getItem(key);
    console.log(key + ' = ' + value);
}

for (var key in sessionStorage) {
   var value = sessionStorage.getItem(key);
    console.log(key + ' = ' + value);
}

// 保存数据
globalStorage['wrox.com'].name = 'Yeaseon';
// 获取数据
var name = globalStorage['wrox.com'].name;

globalStorage["www.wrox.com"].name = "Yeaseon";
globalStorage["www.wrox.com"].book = "Professional JavaScript";
globalStorage["www.wrox.com"].removeItem("name");
var book = globalStorage["www.wrox.com"].getItem("book");

//使用方法存储数据
localStorage.setItem("name", "Nicholas");
//使用属性存储数据
localStorage.book = "Professional JavaScript";
//使用方法读取数据
var name = localStorage.getItem("name");
//使用属性读取数据
var book = localStorage.book;

var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;

var request, database;
request = indexedDB.open('admin');
request.onerror = function (event) {
  console.log(event.target.errorCode);
};
request.onsuccess = function (event) {
    database = event.target.result;
};

if (database.version != '1.0') {
  request = database.setVersion('1.0')；
   request.onerror = function (event) {
        console.log(event.target.errorCode);
    };
  request.onsuccess = function (event) {
      console.log(''Database name: ' + database.name + ', Version: ' + database.version);
 }
} else {
   console.log(''Database name: ' + database.name + ', Version: ' + database.version);
}

var user = {
  username: '007',
    firstname: 'James',
 lastname: 'Bond',
   password: 'foo'
}

var store = db.createObjectStore('users', { keyPath: 'username' });

//users 中保存着一批用户对象
var i=0,
 request,
    requests = [],
  len = users.length;
while(i < len){
   request = store.add(users[i++]);
    request.onerror = function(){
       //处理错误
  };
  request.onsuccess = function(){
     //处理成功
  };
  requests.push(request);
}

// 创建事务
var transaction = db.transaction();

var transaction = db.transaction('users');
var transaction = db.transaction(['users', 'anotherStore']);

var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;

var transaction = db.transaction('users', IDBTransaction.READ_WRITE);

var request = db.transaction('users').objectStore('users').get('007');
request.onerror = function (event) {
 console.log('Did not get the object!');
};
request.onsuccess = function (event) {
 var result = event.target.result;
   console.log(result.firstName);  // 'James'
};

transaction.onerror = function (event) {
  // 整个事务都被取消了
}
transaction.oncomplete = function (event) {
    // 整个事务都成功完成了
}

var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;

var onlyRange = IDBKeyRange.only("007");
//从键为"007"的对象开始，然后可以移动到最后
var lowerRange = IDBKeyRange.lowerBound("007");
//从键为"007"的对象的下一个对象开始，然后可以移动到最后
var lowerRange = IDBKeyRange.lowerBound("007", true);
//从头开始，到键为"ace"的对象为止
var upperRange = IDBKeyRange.upperBound("ace");
//从头开始，到键为"ace"的对象的上一个对象为止
var upperRange = IDBKeyRange.upperBound("ace", true);
//从键为"007"的对象开始，到键为"ace"的对象为止
var boundRange = IDBKeyRange.bound("007", "ace");
//从键为"007"的对象的下一个对象开始，到键为"ace"的对象为止
var boundRange = IDBKeyRange.bound("007", "ace", true);
//从键为"007"的对象的下一个对象开始，到键为"ace"的对象的上一个对象为止
var boundRange = IDBKeyRange.bound("007", "ace", true, true);
//从键为"007"的对象开始，到键为"ace"的对象的上一个对象为止
var boundRange = IDBKeyRange.bound("007", "ace", false, true);

navigator.geolocation.getCurrentPosition(function (position) {
  drawMapCenteredAt(position.coords.latitude, position.coords.longitude);
});

navigator.geolocation.getCurrentPosition(function (position) {
   drawMapCenteredAt(position.coords.latitude, position.coords.longitude);
}, function (error) {
    console.log('Error code:' + error.code);
    console.log('Error message:' + error.message);
});

navigator.geolocation.getCurrentPosition(function (position) {
  drawMapCenteredAt(position.coords.latitude, position.coords.longitude);
}, function (error) {
    console.log('Error code:' + error.code);
    console.log('Error message:' + error.message);
}, {
  enableHighAccuracy: true,
   timeout: 5000,
  maximumAge: 25000
});

var filesList = document.getElementById('files-list');
EventUtil.addHandler(filesList, 'change', function (event) {
  var info = '',
      output = document.getElementById('output'),
     progress = document.getElementById('progress'),
     files = EventUtil.getTarget(event).files,
       type = 'default',
       reader = new FileReader();
  if (/image/.test(files[0].type)) {
      reader.readAsDateURL(files[0]);
     type = 'image';
 } else {
        reader.readAsText(files[0]);
        type = 'text';
  }
   reader.onerror = function () {
      output.innerHTML = 'Could not read file, error code is ' + reader.error.code;
   };
  reader.onprogress = function () {
       if (event.lengthComputable) {
           progress.innerHTML = event.loaded + '/' + event.total;
      }
   };
  reader.onload = function () {
       var html = '';
      switch (type) {
         case 'image':
               html = '<img src=\"' + reader.result + '\">';
             break;
          case 'text':
                html = reader.result;
               break;
      }
       output.innerHTML = html;
    };
});

var droptarget = document.getElementById('droptarget');
function handleEvent(event) {
 var info = '',
      output = document.getElementById('output');
     files, i, len;
  EventUtil.preventDefault(event);
    if (event.type == 'drop') {
     files = event.dataTransfer.files;  //转换成File对象
      i = 0;
      len = files.length;
     while (i < len) {
            info += files[i].name + ' (' + files[i].type + ', ' + files[i].size + ' bytes)<br>';
          i++;
        }
       output.innerHTML = info;
    }
}
// 阻止默认事件，只有 drop 事件会被处理
EventUtil.addHandler(droptarget, "dragenter", handleEvent);
EventUtil.addHandler(droptarget, "dragover", handleEvent);
EventUtil.addHandler(droptarget, "drop", handleEvent);

var droptarget = document.getElementById('droptarget');
function handleEvent(event) {
  var info = '',
      output = document.getElementById('output'),
     data, xhr,
      files, i, len;
  EventUtil.preventDefault(event);
    if (event.type == 'drop') {
     data = new FormData();
      files = event.dataTransfer.files;
       i = 0;
      len = files.length;
     while (i < len) {
            data.append('file' + i, files[i]);
          i++;
        }
       xhr = new XMLHttpRequest();
     xhr.open('post', 'FileAPIExapleUpload.php', true);
      xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
              console.log(xhr.responseText);
          }
       };
      xhr.send(data);
 }
}
EventUtil.addHandler(droptarget, "dragenter", handleEvent);
EventUtil.addHandler(droptarget, "dragover", handleEvent);
EventUtil.addHandler(droptarget, "drop", handleEvent);