JavaScript脚本语言

简介

W3C参考资料

基础入门

初探JavaScript

什么是JS？

JS是通过事件给网页添加交互、修改样式

onmouseover="one.style.display='block'"
.：可以理解是汉语中的的
=：可以理解是赋值

编写JS的流程

1. 布局：HTML+CSS
2. 属性：确定修改哪些属性
3. 事件：确定用户做哪些操作
4. 编写JS：在事件中，用JS来修改页面元素样式

函数定义

function 函数名(){
       代码
}

变量定义

"上双宝剑"，就是别名。

基础应用

DOM应用

JS运动技术

JS事件

Ajax

什么是服务器

网页浏览过程分析；如何配置自己的服务器程序（AMP-WAMP）

什么是Ajax

无刷新

缓存

解决缓存的方式：'aaa.txt?t='+new Date().getTime()

读取动态数据

数组、json

eval()；函数

HTTP请求方式

面向对象

什么是面向对象

1. 对象：黑盒子，不了解内部的结构，知道表面的各种操作（遥控器按钮）。
2. 面向对象：不了解原理的情况下，会使用提供的功能。面向对象是一种通用的思想（电视机）。

JS中的面向对象

1. 抽象：抽取核心内容，把最主要的特征、跟问题相关的特征抽取处理。
2. 封装：看不到里面的东西，用好表面的功能就行。
3. 继承：从父类上继承出一些方法和属性，子类又有一些自己的特征。（多重继承、多态）

对象组成

1. 函数（自由的，不属于任何人）、方法（属于对象的，方法是作为对象的属性的函数）
2. 变量（自由的，不属于任何人）、属性（属于对象的，属性是作为对象的属性的变量）

第一个面向对象的程序

1. this：当前发生事件的对象。当前的方法、属性属于谁！使用该方法、属性的对象的引用。
2. Object对象：是一个空白对象。
3. 原型（prototype）

标签	功能	JS
CSS	一次给一组元素加样式	原型
Class	一次给一个元素加样式	给对象加东西

4. 类：模子，不具备实际功能。
5. 对象：产品（成品），具有实际的功能。

创建对象的七种方式

1. 工厂模式（原料-加工-出厂）

function createPerson(name, job) { // 构造函数就是普通函数
    var o = new Object(); // 原料
    o.name = name; // 加工
    o.job = job;
    o.sayName = function() {
        console.log(this.name);
    }
    return o; // 出厂
}
var person1 = createPerson('Jiang', 'student');
var person2 = createPerson('X', 'Doctor');

可以无数次调用这个工厂函数，每次都会返回一个包含两个属性和一个方法的对象，工厂模式虽然解决了创建多个相似对象的问题，但是没有解决对象识别问题，即不能知道一个对象的类型。①没有new；②函数的重复—资源浪费，即person1.sayName()==person2.sayName()是不相等的函数。

2. 构造函数模式

function Person(name, job) {
    this.name = name;
    this.job = job;
    this.sayName = function() {
        console.log(this.name)
    }
}
var person1 = new Person('Jiang', 'student');
var person2 = new Person('X', 'Doctor');

没有显示的创建对象，使用new来调用这个构造函数，使用new后会自动执行如下操作（创建一个新对象（object）、这个新对象会被执行[[prototype]]链接、这个新对象会绑定到函数调用的this、返回这个对象）；使用这个方式创建对象可以检测对象类型（person1 instanceof Object // true； person1 instanceof Person //true）

3. 原型模式

function Person() {

    Person.prototype.name = 'Jiang';
    Person.prototype.job = 'student';
    Person.prototype.sayName = function() {
        console.log(this.name);
    }
    var person1 = new Person();
}

将信息直接添加到原型对象上。使用原型的好处是可以让所有的实例对象共享它所包含的属性和方法，不必在构造函数中定义对象实例信息。原型是一个非常重要的概念，在一篇文章看懂proto和prototype的关系及区别中讲的非常详细。

4. 组合使用构造函数加属性模式和原型模式加方法（重点）

function Person(name, job) {
    this.name = name;
    this.job = job;
    Person.prototype.sayName = function() {
        console.log(this.name)
    }
    var person1 = new Person("guo", "student");
}

构造函数加属性，原型加方法！

5. 动态原型模式

function Person(name, job) {
    // 属性
    this.name = name;
    this.job = job;

    // 方法
    if (typeof this.sayName !== 'function') {
        Person.prototype.sayName = function() {
            console.log(this.name);
        }
    }

}
var person1 = new Person('Jiang', 'Student');
person1.sayName();

动态原型模式将所有信息都封装在了构造函数中，初始化的时候，通过检测某个应该存在的方法时候有效，来决定是否需要初始化原型。只有在sayName方法不存在的时候，才会将它添加到原型中。这段代码只会初次调用构造函数的时候才会执行。此后原型已经完成初始化，不需要在做什么修改了，这里对原型所做的修改，能够立即在所有实例中得到反映，其次，if语句检查的可以是初始化之后应该存在的任何属性或方法，所以不必用一大堆的if语句检查每一个属性和方法，只要检查一个就行。

6. 寄生构造函数模式

function Person(name, job) {
    var o = new Object();
    o.name = name;
    o.job = job;
    o.sayName = function() {
        console.log(this.name);
    }
    return o;
}
var person1 = new Person('Jiang', 'student');
person1.sayName();

这个模式，除了使用new操作符并把使用的包装函数叫做构造函数之外，和工厂模式几乎一样。构造函数如果不返回对象，默认也会返回一个新的对象，通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值。

7. 稳妥构造函数模式

function Person(name, job) {
    var o = new Object();
    o.name = name;
    o.job = job;
    o.sayName = function() {
        console.log(name);
    }
    return o;
}
var person1 = Person('Jiang', 'student');
person1.sayName();

首先明白稳妥对象指的是没有公共属性，而且其方法也不引用this。稳妥对象最适合在一些安全环境中（这些环境会禁止使用this和new），或防止数据被其他应用程序改动时使用，稳妥构造函数模式和寄生模式类似，有两点不同:一是创建对象的实例方法不引用this，而是不使用new操作符调用构造函数。和寄生构造函数模式一样，这样创建出来的对象与构造函数之间没有什么关系，instanceof操作符对他们没有意义。

面向过程到面向对象

1. 不能有函数的嵌套，但是可以有全局变量。
2. 将onload变成构造函数
3. 将全局变量改为属性
4. 函数改为方法