目录：

JSADV1-复习和细节补充.ppt

JSADV2-函数.ppt

JSADV3-闭包.ppt 

JSADV4-原型机制.ppt 

JSADV7-JSONP.ppt

一、单选多选框和下拉框

二、document的querySelector和querySelectorAll方法

三、表单验证以及表单自动提交和手动提交

四、事件对象和冒泡，动态绑定元素的事件

五、JSON.parse和eval

JSADV1-复习和细节补充.ppt START

JSADV

JS复习及细节补充

回顾

JS基本核心语法（ECMAScript）

文档对象模型（DOM）

浏览器对象模型（BOM）

本章目标

复习JS基础知识

补充一些JS的细节问题

输出语句

注释

数据类型

number

string

boolean

undefined

null

object

遍历的两种方式

for

foreach遍历

Dom操作获取元素

document.getElementById

getElementsByTagName

getElementsByClassName

getElementsByName

设置属性

元素对象.属性名 = ‘属性值’

DOM对象的属性和HTML的标签属性几乎是一致的，常用的有src、title、className、href和style，其中className对应就是标签的class属性，但是由于class在JS中是关键字，所以变成了className

设置样式：

    元素对象.style.样式属性 = ‘属性值’

事件绑定（一）

嵌入dom

注意：这样做很是不好，有下列两大缺点，这也是如今在开发中很难见到这样绑定事件的原因。（1）存在一个时差问题，因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件（比如js代码还没有下载下来），由此会引发错误。（2）HTML与js代码紧密耦合。如果要更换事件处理程序，就要改动两个地方:HTML代码和JS代码，这非常不利于后期代码的维护。所以这种方法在开发中基本不用。

事件绑定（二）

直接绑定

注意：这种方式只能给该元素绑定一个事件。不支持多播事件委托。

事件绑定（三）

事件监听

注意：addEventListener()添加事件，removeEventListener()删除事件。可添加多个，执行顺序与添加顺序相同。

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。

值类型和引用类型

JavaScript 中的值类型与引用类型的使用是有区别的。这和大部分的高级语言一样。

逻辑或和逻辑与运算符

JS中还包括另外一种逻辑运算，它的表达式结果类型是不确定的，他们是逻辑或(||)和逻辑与(&&)，这两个运算符支持短位运算，但是不会强制转换结果为布尔型的值。

两个引用类型的比较

引用类型的等值比较，将直接“比较引用（的地址） ”。也就是说：如果不是同一个变量或其引用，则两个变量不相等， 也不相同。

在对两个引用类型 的比较运算过程中，“==”与“===”并没有任何的不同。

运算优先级

void是一个运算符，所以我们可以计算void 1 + 2的值，void运算符的优先级比+高

,也是一种运算符。

变量的作用域

由于JS的变量作用域只能达到函数一级(而非语句块一级)，因此这里声明变量，与在for语句之外声明变量没有什么区别。

缺省对象的指定

JS提供with语句，以使得开发人员可以在一个代码块中显式地指定缺省对象。如果不指定缺省对象，则默认使用宿主程序在全局指定的缺省对 象（在浏览器环境中的缺省对象是 window）。

逗号的二义性

[]的二义性

总结

JS基本语法的复习

一些JS的细节问题

JSADV1-复习和细节补充.ppt END

JSADV2-函数.ppt START

JSADV

函数

回顾

JS的基础知识

JS的细节问题

本章目标

函数

函数概述

在JS中，函数包含一组语句，是JS的基础模块单元，用于代码复用、信息隐藏和组合调用。函数用于指定对象的行为。一般来说，所谓的编程，就是将一组需求分解成一组函数和数据结构的技能。注意：在JS中，函数就是对象，因此函数可以保存在变量、对象和数组中，也可以当作参数传递给其他的函数，函数的返回值也可以是函数。

创建函数的三种方法

在JS中，可以通过三种方式创建函数：

1、函数声明

2、函数字面量

3、构造函数

函数声明

这种方式定义的函数不属于任何对象，始终是默认的全局对象。

注意：这样声明的函数可以在函数定义前调用。因为在JS的最顶层，都有一个预编译处理机制

函数表达式

这样定义的函数会存储在一个变量中。不能在定义之前调用。

构造函数

通过new Function构造函数。

调用函数的方法

JS中的函数有四种调用方式：

1、方法调用模式2、函数调用模式3、构造器调用模式4、apply调用模式

方法调用

当一个函数保存为对象的一个属性时，我们称它为一个方法。当一个方法被调用时，this被绑定到该对象。

函数调用模式

当一个函数并非一个对象的属性时，它就被当作一个函数来调用，以这种方式调用函数时，this被绑定到了全局对象。

构造器调用模式

因为JS是一门基于原型继承的语言，因此可以在创建对象时直接从其他对象继承属性。如果在一个函数前面带上了new关键字来调用，那么将会创建一个连接到该函数的prototype成员的新对象，同时this会被绑定到这个新对象上。

Apply调用模式

在JS中，函数也是对象，因此函数也可以拥有方法。调用函数的apply方法，需要传入两个参数，第一个参数是绑定到函数中this变量的对象，第二个参数是原函数的参数值列表。

JS函数中的内置对象arguments

  每个JS函数都有一个内置对象，它的作用是：

调用该函数时可以传递任意参数！

arguments对象是一个类似于数组的对象。

arguments对象的length属性：获取函数的实参个数！

利用arguments对象特性,实现模拟函数的重载的效果.

JS函数中的内置对象arguments

arguments.callee

arguments.callee 在哪一个函数中运行，它就代表哪个函数。 一般用在匿名函数中。

在匿名函数中有时会需要自己调用自己，但是由于是匿名函数，没有名字，无名可调，这时就可以使用arguments.callee来调用。

总结

函数

      

JSADV2-函数.ppt END

JSADV3-闭包.ppt START

JSADV

闭包

回顾

函数的三种创建方式

函数的四种调用方法

本章目标

闭包

什么是闭包

闭包是指有权访问另一个函数作用域变量的函数，创建闭包的通常方式，是在一个函数内部创建另一个函数

一个闭包的例子

当在一个函数中定义内部函数时，内部的函数可以访问外部函数的上下文环境，这就被称为闭包。

闭包的难点

判断作用域指向的变量对象是否相同

闭包的难点

判断变量对象中变量的值

执行环境和变量对象在运行函数时生成

一个糟糕的例子

假设在以后的项目中，我们需要对所有的input表单元素绑定一个点击事件。如下所示：

解决这个问题

构造一个帮助函数，对事件处理中的动态的i值进行处理。

闭包的用途

匿名自执行函数

闭包的用途

实现封装

闭包的用途

实现面向对象中的对象，传统的对象语言都提供类的模板机制

总结

闭包的使用

JSADV3-闭包.ppt END

JSADV4-原型机制.ppt START

JSADV

原型机制

回顾

闭包的概念

闭包的作用

本章目标

JS中的原型机制

普通对象和函数对象

凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。

JS中的构造函数

实例的构造函数属性（constructor）指向构造函数

原型对象（一）

在JS中，每当定义一个对象（函数也是对象）时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。

原型对象（二）

实质上，函数对象的prototype属性就是一个对象，这个对象会自动带有一个constructor属性，该属性就是Stu函数本身。即Stu.prototype.constructor == Stu（有点绕了）

原型对象（三）

我们可以发现：

但是Function.prototype 除外，它是函数对象，但它很特殊，他没有prototype属性

__proto__属性

JS 在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__ 的内置属性，用于指向创建它的构造函数的原型对象。

new关键字的作用

在JS中new出一个对象的过程分为三步：

1、var s1={}; 初始化一个对象s1。

2、s1._proto_=Stu.prototype;将对象s1的 __proto__ 属性设置为 Stu.prototype。

3、Stu.call(s1);调用构造函数Stu来初始化s1。

总结

原型的理解和运用

      

JSADV4-原型机制.ppt END

JSADV7-JSONP.ppt START

JSADV

JSONP

本章目标

JSONP原理

为什么要使用JSONP（一）

ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，请求执行完后一律不准再次运行回调函数中的js代码。但是我们发现，web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有src这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>

为什么要使用JSONP（二）

如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理。

解决跨域问题的方式

通过jsonp跨域

document.domain + iframe跨域

location.hash + iframe

window.name + iframe跨域

postMessage跨域

跨域资源共享（CORS）

nginx代理跨域

nodejs中间件代理跨域

WebSocket协议跨域

JSONP客户端实现（一）

假设远程服务器eclipse上有一个名为demo的项目，项目的WebContent目录下有一个js/remote.js的脚本文件。

JSONP客户端实现（二）

在本地服务器HBuilder上有一个index.html页面，运行该页面，可以发现脚本顺利运行。

JSONP客户端实现（三）

在index.html页面添加一个函数。

JSONP客户端实现（四）

修改远程服务器eclipse中remote.js的代码：

JSONP客户端实现（五）

如果本地函数很多，那么怎么才能让remote.js知道它应该调用的本地函数名呢？

JSONP客户端实现（五）

在远程服务器eclipse中创建一个servlet，代码入下：

JSONP客户端实现（六）

为了避免每次调用都要写一个<script>标签，我们将本地的js代码修改为动态调用js。

jQuery中的JSONP调用

JSADV7-JSONP.ppt END