JavaScript与AJAX总结Word格式文档下载.docx
《JavaScript与AJAX总结Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《JavaScript与AJAX总结Word格式文档下载.docx（40页珍藏版）》请在冰豆网上搜索。
onclick="
calSum（）"
/body>
/html>
外部式:
scriptsrc="
文件名.js"
这种形式要注意的地方:
在script标签中不能写东西。
在外部建一个.js结尾的文件
事件处理：
JS作为事件的处理代码
onclick单击时，ondblclick双击,onkeydown键盘,按下去时等等
eg:
<
name="
btn"
回车键"
onkeydown="
alert（'
回车键送你回家~~~'
）"
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"
alert（num3）;
强制类型转换：
Boolean（value）
Number（value）;
String（value）;
当要转换的值至少有一个字符的字符串，非0的数字或者对象时，Boolean（）函数将返回true
vard=Boolean（"
0"
alert（d）;
//返回true
Number（）;
函数转换的是整个值，与paresInt不同
varc=Number（"
222ll"
alert（c）;
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]="
alert（array1）;
//返回red,blue,,,,,,,,,,,,,,,
for，dowhile
varperson=newArray（"
one"
"
two"
three"
alert（person.length）;
for（vari=0;
i<
person.length;
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运算符和一个构造函数创建。
构造函数是一个特殊类型的函数，它通过初始化对象要占据的内存，来准备一个新对象的使用。
varcity=newString（）;
//创建一个字符串对象city
varcity=newString（"
长沙"
//创建一个初始值为”长沙“的字符对象city
2）对象销毁与垃圾回收
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（"
alert（myString.toUpperCase（））;
//toUpperCase（）--转换为大写返回HELLO,JS
设置实例方法与设置实例属性的方法相同，例如：
说什么就是什么"
myString.sayNo=function（）{//匿名函数
alert（"
不有说"
};
myString.sayNo（）;
//方法调用
5）对象运算符与语句
JavaScript中包含两个运算符和两条语句，专门用于对象操作，它们是：
new运算符，delet运算符、with语句和for..in语句。
使用语法与java相当：
for（变量in对象）{
………JavaScript语句……..
｝
document.write（"
h3>
document对象属性如下：
/h3>
"
for（variindocument）{
document.write（i+"
br/>
}
2、创建自定义的JavaScript类和对象
1）工厂方式：
所谓工厂方式，就是先创建对象，然后往对象中添加属性和方法。
问题（缺点）：
每个对象都有自己的函数。
//自定义js对象
//1、工厂方式
functioncreatePerson（name）{
varpersonObj=newObject（）;
//工厂方式先创建对象，后添加属性与方法
personObj.name=name;
//添加属性
personObj.say=function（）{//匿名函数
我叫：
+this.name）;
returnpersonObj;
//方法调用
varperson=createPerson（"
张三"
person.say（）;
王五"
2）构造函数方式：
选择类名，首字母大写
//2、构造函数方式
functionPerson（name）{
this.name=name;
this.say=function（）{
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（"
};
varoPerson1=newPerson（）;
oPerson1.say（）;
varoPerson2=newPerson（）;
oPerson2.say（）;
4）混合构造函数和原型方式：
指在创建对象时，使用构造函数方式定义对象的属性，使用原始方式定义对象的方法，好处在于：
函数只创建一次，同时每个对象都有自己的对象属性实例。
/**
*使用构造函数方式定义对象的属性
*使用原始方式定义对象的方法
*
*/
你叫：
varper=newPerson（"
李白"
per.say（）;
5）动态原型方式：
首先判断Person.initialized（初始化）的类型是否等于underfined的条件表达式，这是最重要的部分，如果相等，构造函数继续使用原始类型方式定义对象的方法
functionPerson（name）{
this.name=name;
alert（Person._initialized）;
if（typeofPerson._initialized=="
undefined"
）{
Person.prototype.say=function（）{
他叫:
};
//Person._initialized=true;
alert（Person._initialized）;
6）混合工厂方式：
混合工厂方式通是在当前的方式不能用时，做为替代品。
与工厂函数相似。
functionPerson（）{
varoPerson=newObject（）;
oPerson.name="
张不三"
oPerson.say=function（）{
他叫：
returnoPerson;
varper=newPerson（）;
7）JSON格式创建对象：
Json是一种javascript对象的表示法，用大括号括起来，逗号分隔的属性/值对
varpersonObj={
firstname:
张本"
lastname:
age:
20,
info:
function（）{
信息：
+this.firstname+this.age）;
personObj.info（）;
3、对象继承实现
创建的子类将继承超类的所有属性和方法，包括构造函数及方法的实现，所有的属性和方法都是公用的，因此子类可以直接访问这些方法，子类还可以添加超类中没有的新属性和方法，也可以覆盖超类中的属性和方法
1）对象冒充：
新的类冒充旧的类，（旧的类必须采用构造函数方式）,从而达到继承的目的
原理：
构造函数使用this关键字给所有属性和方法赋值
//对象冒充
functionAnimal（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（）方式：
封装的对象冒充的一个函数，要与冒充方法一起使用该方法，只需要将前三行的赋值，调用，删除代码替换下。
//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对象）
htmlonlick="
HTML~~~~~~'
head>
basehref="
%=basePath%>
JS03.jsp<
bodyonclick="
DODY'
formonclick="
FORM'
pstyle="
cursor:
head;
PPPPPPP'
OOOOOOOOOOO<
/p>
/form>
事件捕获：
与冒泡相反，他的事件触发顺序是从最外层的对象（document对象）到最里层的对象，例如：
NetscapeNavigator浏览器
2、事件处理程序的指派形式（重点）
指派:
将JS函数与HTML的标签中的事件绑定在一起。
绑定方式：
传统
现代
传统:
JS脚本实现
注意:
用来绑定事件的js脚本一定要放在被绑定标签的后面，且被绑定的语句中JS函数不能带括号。
直接与HTML标签的事件绑定
优点：
兼容性比较好
缺点:
一个事件只能绑定一个函数（事件处理程序）
divid="
div1"
style="
width:
100px;
height:
background-color:
red"
document.getElementById（"
）.onclick=function（）{
JS事件"
非IE指派的方式addEventListener（事件名称,事件处理程序（JS函数）,boolean）firefox支持
这种方式还可以绑定多次事件
removeEventListener（事件名称,事件处理程序（JS函数）,boolean）
1、IE指派的方式
Window对象有两个方法：
attachEvent（事件名称,事件处理程序（JS函数））
detachEvent（事件名称,事件处理程序（JS函数））
解决兼容性问题：
IE与DOM下对于现代处理程序指派方式不同，为了保证代码在IE和DOM浏览器下都能用
优点：
一个事件同时可以指定多个事件处理程序（JS函数）
缺点：
要专门写兼容性代码
事件处理程序的返回值
例如：
一个Submit按钮默认行为是提交表单，当一个表单的submit处理程序返回false，表单提交被取消。
主要用途：
能影响事件的默认行为。
阻止超链接，表单的提交
这里有个表单：
submit直接提交
通过返回值阻止表单提交
阻止超链接:
ahref="
index.jsp"
returnconfirm（确定?
'
超链接<
/a>
阻止表单提交以及超链接案例：
functionclosewd（）{
alert（'
你关掉了浏览器窗体'
bodyonunload="
closewd（）"
3、Event对象
1、IE中，event对象时window对象的一个属性，只有事件发生时才可以访问，所有事件处理程序执行后，event对象就被销毁了。
2、Onfocus聚集焦点
inputid="
txt2"
onfocus="
this.value='
请输入信息"
Onchange文本框的值发生改变时触发
txt3"
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）;
打开窗口"
windowOpen（）"
/>
2）对话框
升级会员 