• 面向对象编程

JavaScript的所有数据都可以看成对象，不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。

1. 创建对象的几种方法

(1).使用对象字面量的方式{}创建一个对象
var Cat  = {};
 Cat.name="kity";//添加属性并赋值
 Cat.age=2;
 Cat.sayHello=function(){
  alert("hello "+Cat.name+",今年"+Cat["age"]+"岁了");//可以使用“.”的方式访问属性，也可以使用HashMap的方式访问
 }
 Cat.sayHello();//调用对象的（方法）函数

2. .用构造函数创建对象

function Person(){
}
var personOne=new Person();//定义一个function，如果有new关键字去"实例化",那么该function可以看作是一个类
personOne.name="dylan";
personOne.hobby="coding";
personOne.work=function(){
alert(personOne.name+" is coding now...");
}
personOne.work();
(3).使用原型模式创建对象
function Dog(){
 }
 Dog.prototype.name="旺财";
 Dog.prototype.eat=function(){
 alert(this.name+"是个吃货");
 }
 var wangcai =new Dog();
 wangcai.eat();
 

2. class继承

新的关键字class从ES6开始正式被引入到JavaScript中。class的目的就是让定义类更简单。
如果用新的class关键字来编写Student，可以这样写：
class Student {
       constructor(name) {
           this.name = name;
       }
 
       hello() {
           alert('Hello, ' + this.name + '!');
       }
}
 
用class定义对象的一个巨大的好处是继承更方便。现在，原型继承的中间对象，原型对象的构造函数等等都不需要考虑了，直接通过extends来实现：
class PrimaryStudent extends Student {
           constructor(name, grade) {
               super(name); // 记得用super调用父类的构造方法!
               this.grade = grade;
           }
           myGrade() {
               alert('I am at grade ' + this.grade);
           }
}
 
ES6引入的class和原有的JavaScript原型继承有什么区别呢？
实际上它们没有任何区别，class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之，用class的好处就是极大地简化了原型链代码。
 

• 浏览器

由于JavaScript的出现就是为了能在浏览器中运行，所以，浏览器自然是JavaScript开发者必须要关注的。

1. 浏览器对象

1. .window

window对象不但充当全局作用域，而且表示浏览器窗口。
(2).navigator
navigator对象表示浏览器的信息，最常用的属性包括：
navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。

3. .screen

screen对象表示屏幕的信息，常用的属性有：
screen.width：屏幕宽度，以像素为单位；
screen.height：屏幕高度，以像素为单位；
screen.colorDepth：返回颜色位数，如8、16、24。

4. .document

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

5. .history

history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。
 

2. 操作DOM

1. .更新DOM

一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：
 
// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的内部结构已修改
 
第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：
// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。
 

2. .插入DOM

如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。
如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。可以使用appendChild，把一个子节点添加到父节点的最后一个子节点。例如：
<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
       <p id="java">Java</p>
       <p id="python">Python</p>
       <p id="scheme">Scheme</p>
</div>
 
把<p id="js">JavaScript</p>添加到<div id="list">的最后一项：
Var js = document.getElementById('js'),
       list = document.getElementById('list');
list.appendChild(js);
 
现在，HTML结构变成了这样：
<!-- HTML结构 -->
<div id="list">
       <p id="java">Java</p>
       <p id="python">Python</p>
       <p id="scheme">Scheme</p>
       <p id="js">JavaScript</p>
</div>

3. .删除DOM

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：
 
// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true
 
3.操作表单
(1).获取值
如果我们获得了一个<input>节点的引用，就可以直接调用value获得对应的用户输入值：
var input = document.getElementById('email');
input.value; // '用户输入的值'
//这种方式可以应用于text、password、hidden以及select。
 

2. .设置值

设置值和获取值类似，对于text、password、hidden以及select，直接设置value就可以：
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新
 
4.操作文件
JavaScript可以在提交表单时对文件扩展名做检查，以便防止用户上传无效格式的文件：
var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:\fakepath\test.png'
if(!filename||!(filename.endsWith('.jpg')||filename.endsWith('.png') || filename.endsWith('.gif'))) {
    alert('Can only upload image file.');
    return false;
}
 

5. AJAX

AJAX不是JavaScript的规范，它是Asynchronous JavaScript and XML的缩写，意思就是用JavaScript执行异步网络请求。
用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。
 
在现代浏览器上写AJAX主要依靠XMLHttpRequest对象：
function success(text) {
    Var textarea = document.getElementById('test-response-text');
    textarea.value = text;
}
 
function fail(code) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = 'Error code: ' + code;
}
 
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
 
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}
 
// 发送请求:
request.open('GET', '/api/categories');
request.send();
 
alert('请求已发送，请等待响应...');
 

6. Promise

Promise是异步编程的一种解决方案，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
 
下面是一个Promise对象的简单例子。
function timeout(ms) {
         return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done');
         });
}
 
timeout(100).then((value) => {
        console.log(value);
});
 
上面代码中，timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。过了指定的时间（ms参数）以后，Promise实例的状态变为Resolved，就会触发then方法绑定的回调函数。
 
下面是异步加载图片的例子。
function loadImageAsync(url) {
     return new Promise(function(resolve, reject) {
      var image = new Image();
 
      image.onload = function() {
         resolve(image);
      };
 
      image.onerror = function() {
         reject(new Error('Could not load image at ' +         url));
      };
 
      image.src = url;
  });
}
上面代码中，使用Promise包装了一个图片加载的异步操作。如果加载成功，就调用resolve方法，否则就调用reject方法。