JavaScript与AJAX总结.docx

JavaScript与AJAX总结.docx

《JavaScript与AJAX总结.docx》由会员分享，可在线阅读，更多相关《JavaScript与AJAX总结.docx（40页珍藏版）》请在冰豆网上搜索。

JavaScript与AJAX总结

JavaScript与AJAX学习总结

第一章、JavaScript核心基础语法

本章目标：

●认识什么是JavaScript

●掌握如何在网页中使用JavaScript

●掌握JavaScript核心基础语法

1、javaScript是一种专门设计用来给网页增加交互性的编程语言，其代码通常嵌入在网页中。

它最初由Netscape公司发明，最后交给欧洲计算制造商协会（ECMA）。

1）使用范围：

增加网页的交互性

表单的验证，

动态菜单，

鼠标的特性，

联动效果。

2）特征：

解释性语言，不需要预先编译就可以执行，需要由web浏览器去完成解释和执行，所以javascript只能局限在浏览器环境中，与HTML结合起来使用。

3）js与HTML的整合共三中方式：

内嵌式:

eg：

functioncalSum（）{

vara=parseInt（document.getElementById（"num1"）.value）;

varb=parseInt（document.getElementById（"num2"）.value）;

document.getElementById（"num3"）.value=（a+b）;

}

加上

外部式:

这种形式要注意的地方:

在script标签中不能写东西。

在外部建一个.js结尾的文件

事件处理：

JS作为事件的处理代码

onclick单击时，ondblclick双击,onkeydown键盘,按下去时等等

eg:

4）JS的体系结构

语言的定义:

变量，数据类型，运算符，关键字，语句

var变量名称；vartest;

var变量名称=值;varage=10;

2.javascript数据类型（原始数据类型，引用数据类型）

原始数据类型：

Undefined,Null,Boolean,Number,String

用typeof来判断类型：

Undefine:

当声明变量未被初始话值，那么默认值是underfined，另外如果变量没有定义，就去进行计算，也是返回undefined

Null：

空值

Alert（null==undefined）;返回true

Javascript把他们定义为true，尽管值相等，但是他们含义不一样：

Underfined定义变量未初始化值，null表示对象不存在

Number：

数字类型

isNaN（）；函数，判断是否是数字

vara=11;

varb=a+22;

alert（b）;//返回33

alert（isNaN（"blue"））;//返回false

alert（isNaN（123））;//返回true

数据类型转换：

String类型转换成数字

varnum1=parseInt（"11qq"）;//返回11

alert（num1）;

varnum2=parseInt（"sss"）;//返回NaN

alert（num2）;

varnum3=parseFloat（"xls"）;//返回NaN

alert（num3）;

强制类型转换：

Boolean（value）

Number（value）;

String（value）;

当要转换的值至少有一个字符的字符串，非0的数字或者对象时，Boolean（）函数将返回true

vard=Boolean（"0"）;

alert（d）;//返回true

Number（）;函数转换的是整个值，与paresInt不同

varc=Number（"222ll"）;

alert（c）;//返回NaN

String（）函数：

把任何值都转换成字符串

vara=String（123）;

alert（a）;//返回123

varo="井盖";

alert（o.toString（））//返回井盖

核心对象：

String，Array，Math,Boolean,Number,Date,Object,Function,ExpReg。

Array类：

vararray1=newArray（20）;

array1[0]="red";

array1[1]="blue";

alert（array1）;//返回red,blue,,,,,,,,,,,,,,,

for，dowhile

varperson=newArray（"one","two","three"）;

alert（person.length）;

for（vari=0;i

alert（person[i]）;

}

//forin

for（varsinperson）{

alert（person[s]）;

}

vart=0;

do{

t=t+1;

alert（t）;

}while（t<=10）;

函数：

function函数名称（参数1，…n）{

}

如果在alert之前进行了return，那么后面的代码将不会执行

第二章、JavaScript面向对象编程

本章目标：

●理解JavaScript中面向对象的功能的理论解除

●掌握JavaScript中创建自定义类和对象的方法

●掌握JavaScript中继承机制实现的方法

1、JavaScript是一个基于原型的面向对象语言，即每个对象有一个原型，对象从原型中继承属性和方法。

1）对象的创建:

JavaScript中的对象使用一个new运算符和一个构造函数创建。

构造函数是一个特殊类型的函数，它通过初始化对象要占据的内存，来准备一个新对象的使用。

eg:

varcity=newString（）;//创建一个字符串对象city

varcity=newString（"长沙"）;//创建一个初始值为”长沙“的字符对象city

2）对象销毁与垃圾回收

varcity=newString（"长沙"）;

varcity=null;

注：

如果对相同的数据有多个引用，必须确保所有的引用为null。

否则，解释器将保留这些数据，以备再次需要。

3）动态添加对象属性

JavaScript对象属性的访问与Java语言一样，都是通过点运算符的方式。

varmyString=newString（"Hello,JS"）;

myString.simpleExample=true;//或myString.simpleExample="word";

deletemyString.simpleExample;//实例属性添加后，我们可以通过delete运算符移除

alert（myString.simpleExample）;

4）动态添加对象的方法

方法就是一个对象自己所属的函数。

如同属性一样，方法一般通过点运算符访问。

下面的示例演示如何调用String对象的toUpperCase（）方法:

varmyString=newString（"Hello,JS"）;

alert（myString.toUpperCase（））;//toUpperCase（）--转换为大写返回HELLO,JS

设置实例方法与设置实例属性的方法相同，例如：

varmyString=newString（"说什么就是什么"）;

myString.sayNo=function（）{//匿名函数

alert（"不有说"）;

};

myString.sayNo（）;//方法调用

5）对象运算符与语句

JavaScript中包含两个运算符和两条语句，专门用于对象操作，它们是：

new运算符，delet运算符、with语句和for..in语句。

使用语法与java相当：

for（变量in对象）{

………JavaScript语句……..

｝

eg:

document.write（"

document对象属性如下：

for（variindocument）{

document.write（i+"
"）;

}

2、创建自定义的JavaScript类和对象

1）工厂方式：

所谓工厂方式，就是先创建对象，然后往对象中添加属性和方法。

问题（缺点）：

每个对象都有自己的函数。

//自定义js对象

//1、工厂方式

functioncreatePerson（name）{

varpersonObj=newObject（）;//工厂方式先创建对象，后添加属性与方法

personObj.name=name;//添加属性

personObj.say=function（）{//匿名函数

alert（"我叫：

"+this.name）;

};

returnpersonObj;

}

//方法调用

varperson=createPerson（"张三"）;

person.say（）;

varperson=createPerson（"王五"）;

person.say（）;

2）构造函数方式：

选择类名，首字母大写

//2、构造函数方式

functionPerson（name）{

this.name=name;

this.say=function（）{

alert（"我叫：

"+this.name）;

};

}

varoperson1=newPerson（"张三"）;

operson1.say（）;//方法调用

varoperson2=newPerson（"李四"）;

operson2.say（）;

3）原型方式：

定义一个空的构造函数Person，然后通过person的prototype属性来定义person的属性与方法，当newPerson（）被调用时，所有的prototype的属性和方法立即被分配给创建的对象。

这样所有的Person的实例都包含了指向相同的say（）函数

//3、原型方式

functionPerson（）{

}

Person.prototype.name="ook";

Person.prototype.say=function（）{

alert（"我叫：

"+this.name）;

};

varoPerson1=newPerson（）;

oPerson1.say（）;

varoPerson2=newPerson（）;

oPerson2.say（）;

4）混合构造函数和原型方式：

指在创建对象时，使用构造函数方式定义对象的属性，使用原始方式定义对象的方法，好处在于：

函数只创建一次，同时每个对象都有自己的对象属性实例。

/**

*使用构造函数方式定义对象的属性

*使用原始方式定义对象的方法

*

*/

functionPerson（name）{

this.name=name;

}

Person.prototype.say=function（）{

alert（"你叫：

"+this.name）;

};

varper=newPerson（"李白"）;

per.say（）;

5）动态原型方式：

首先判断Person.initialized（初始化）的类型是否等于underfined的条件表达式，这是最重要的部分，如果相等，构造函数继续使用原始类型方式定义对象的方法

functionPerson（name）{

this.name=name;

alert（Person._initialized）;

if（typeofPerson._initialized=="undefined"）{

Person.prototype.say=function（）{

alert（"他叫:

"+this.name）;

};

//Person._initialized=true;

}

alert（Person._initialized）;

}

varper=newPerson（"王五"）;

per.say（）;

6）混合工厂方式：

混合工厂方式通是在当前的方式不能用时，做为替代品。

与工厂函数相似。

functionPerson（）{

varoPerson=newObject（）;

oPerson.name="张不三";

oPerson.say=function（）{

alert（"他叫：

"+this.name）;

};

returnoPerson;

}

varper=newPerson（）;

per.say（）;

7）JSON格式创建对象：

Json是一种javascript对象的表示法，用大括号括起来，逗号分隔的属性/值对

varpersonObj={

firstname:

"张本",

lastname:

"李四",

age:

20,

info:

function（）{

alert（"信息：

"+this.firstname+this.age）;

}

};

personObj.info（）;

3、对象继承实现

创建的子类将继承超类的所有属性和方法，包括构造函数及方法的实现，所有的属性和方法都是公用的，因此子类可以直接访问这些方法，子类还可以添加超类中没有的新属性和方法，也可以覆盖超类中的属性和方法

1）对象冒充：

新的类冒充旧的类，（旧的类必须采用构造函数方式）,从而达到继承的目的

原理：

构造函数使用this关键字给所有属性和方法赋值

//对象冒充

functionAnimal（name）{

this.name=name;

this.sayHi=function（）{

alert（this.name+"动物叫"）;

};

}

//冒充方式继续动物类

functionDog（naem）{

this.inherit=Animal;//冒充

this.inherit（name）;//继续

deletethis.inherit;//删除继续

}

varit=newAnimal（"tis"）;

it.sayHi（）;

实例化子类对象，调用方法

2）Call（）方式：

call（）方式：

封装的对象冒充的一个函数，要与冒充方法一起使用该方法，只需要将前三行的赋值，调用，删除代码替换下。

functionAnimal（name）{

this.name=name;

this.sayHi=function（）{

alert（this.name+"动物叫"）;

};

}

//冒充方式继续动物类

functionDog（naem）{

//this.inherit=Animal;//冒充

//this.inherit（name）;//继续

//deletethis.inherit;//删除继续

Animal.call（this,name）;

this.yy=function（）{

alert（naem+"在看天"）;

};

}

functionmain（）{

vardog=newDog（"yy"）;

dog.sayHi（）;

dog.yy（）;

}

main（）;

第三章、JavaScript事件模型

本章目标：

●了解JavaScript事件模型

●掌握Event对象

●掌握常用的事件类型

●编写事件处理程序

1、事件流的形式

根据浏览器类型的不同，表现形式会有一定的区别

比如:

IE是冒泡的形式

非IE大部分是捕获的形式。

事件冒泡：

事件从事件发生的目标最内部开始触发，向上触发到外部（document对象）

">

head;"onclick="alert（'PPPPPPP'）">OOOOOOOOOOO

事件捕获：

与冒泡相反，他的事件触发顺序是从最外层的对象（document对象）到最里层的对象，例如：

NetscapeNavigator浏览器

2、事件处理程序的指派形式（重点）

指派:

将JS函数与HTML的标签中的事件绑定在一起。

绑定方式：

传统

现代

传统:

JS脚本实现

注意:

用来绑定事件的js脚本一定要放在被绑定标签的后面，且被绑定的语句中JS函数不能带括号。

直接与HTML标签的事件绑定

优点：

兼容性比较好

缺点:

一个事件只能绑定一个函数（事件处理程序）

100px;height:

100px;background-color:

red">

document.getElementById（"div1"）.onclick=function（）{

alert（"JS事件"）;

};

现代

非IE指派的方式addEventListener（事件名称,事件处理程序（JS函数）,boolean）firefox支持

这种方式还可以绑定多次事件

removeEventListener（事件名称,事件处理程序（JS函数）,boolean）

1、IE指派的方式

Window对象有两个方法：

attachEvent（事件名称,事件处理程序（JS函数））

detachEvent（事件名称,事件处理程序（JS函数））

解决兼容性问题：

IE与DOM下对于现代处理程序指派方式不同，为了保证代码在IE和DOM浏览器下都能用

优点：

一个事件同时可以指定多个事件处理程序（JS函数）

缺点：

要专门写兼容性代码

事件处理程序的返回值

例如：

一个Submit按钮默认行为是提交表单，当一个表单的submit处理程序返回false，表单提交被取消。

主要用途：

能影响事件的默认行为。

eg:

阻止超链接，表单的提交

这里有个表单：

submit直接提交

通过返回值阻止表单提交

阻止超链接:

'）;">超链接

阻止表单提交以及超链接案例：

functionclosewd（）{

alert（'你关掉了浏览器窗体'）;

}

3、Event对象

1、IE中，event对象时window对象的一个属性，只有事件发生时才可以访问，所有事件处理程序执行后，event对象就被销毁了。

2、Onfocus聚集焦点

Onchange文本框的值发生改变时触发

4、常用的事件类型

鼠标事件

键盘事件

HTML事件

鼠标事件：

click,dblclick,mouseover,mouseout

键盘事件：

keydow键盘按下去的时候

Keypress按下字符键

Keyup释放按下去的键

Html事件:

Load,窗口中页面加载时

Unload页面全部卸载时，如：

窗口关闭

Change事件，文本框text或者textarea中，失去焦点，并且值改变触发

Focus获取焦点

Blur失去焦点onblur="move（）;"

第四章、浏览器对象模型BOM

本章目标：

●理解BOM

●学习使用常用的BOM对象

BOM主要处理浏览器窗口和框架。

打开浏览器后，javascript就默认创建了一个window对象，所有能代表整个浏览器窗口

Window对象

History历史

location位置

document文档对象

1、window对象

窗口操作：

移动浏览器窗体

moveBy（移动到相对的位置）

moveTo（移动到具体位置）

resizeTo重新设置窗体大小，具体的大小

resizeBy重新设置窗体相对大小

1）弹出窗口：

Window.open（“url地址”,”名称”,”窗口设置信息”）

备注：

窗口设置信息详情见P64表4-1

functionwindowOpen（）{

vararr="height=150,width=300,top=10,left=10";

window.open（"MyJsp.jsp","test",arr）;

}

2）对话框