JavaScript与AJAX总结Word格式文档下载.docx

1、 onclick=calSum（） /body/html外部式:script src=文件名.js这种形式要注意的地方: 在script标签中不能写东西。在外部建一个.js结尾的文件事件处理：JS作为事件的处理代码onclick单击时，ondblclick双击,onkeydown键盘,按下去时等等eg: name=btn回车键 onkeydown=alert（回车键送你回家）4）JS的体系结构语言的定义:变量，数据类型，运算符，关键字，语句var 变量名称；var test;var 变量名称 = 值; var age = 10;2. javascript 数据类型（原始数据类型，引用数据类型）

2、原始数据类型：Undefined,Null,Boolean,Number,String用typeof来判断类型：Undefine:当声明变量未被初始话值，那么默认值是underfined，另外如果变量没有定义，就去进行计算，也是返回undefinedNull：空值Alert（null = undefined）; 返回trueJavascript把他们定义为true，尽管值相等，但是他们含义不一样：Underfined 定义变量未初始化值，null表示对象不存在Number：数字类型isNaN（）；函数，判断是否是数字 var a = 11; var b = a + 22; alert（b）;

3、/返回33 alert（isNaN（blue）; / 返回false alert（isNaN（123）; /返回true数据类型转换：String 类型转换成数字var num1 = parseInt（11qq）; /返回11 alert（num1）; var num2 = parseInt（sss /返回NaN alert（num2）; var num3 = parseFloat（xls alert（num3）;强制类型转换：Boolean（value）Number（value）;String（value）;当要转换的值至少有一个字符的字符串，非0的数字或者对象时，Boolean（）函数将返

4、回truevar d = Boolean（0 alert（d）; / 返回trueNumber（）;函数转换的是整个值，与paresInt不同var c = Number（222ll alert（c）;String（）函数：把任何值都转换成字符串 var a = String（123）; alert（a）; /返回123 var o = 井盖; alert（o.toString（）/返回井盖 核心对象：String，Array，Math,Boolean,Number,Date,Object,Function,ExpReg。Array类：var array1 = new Array（20）; a

5、rray10= red array11= alert（array1）; / 返回 red,blue, for，do while var person = new Array（one,twothree alert（person.length）; for（var i=0;iperson.length;i+） alert（personi）; / for in for（var s in person） alert（persons）; var t = 0; do t=t+1; alert（t）; while（tdocument对象属性如下：/h3 for（var i in document） docum

6、ent.write（i+br / 2、创建自定义的JavaScript类和对象1）工厂方式： 所谓工厂方式，就是先创建对象，然后往对象中添加属性和方法。 问题（缺点）：每个对象都有自己的函数。/自定义js对象 /1、工厂方式 function createPerson（name） var personObj = new Object（）;/工厂方式先创建对象，后添加属性与方法 personObj.name = name; /添加属性 personObj.say = function（） /匿名函数我叫：+this.name）; return personObj; /方法调用 var perso

7、n = createPerson（张三 person.say（）;王五2）构造函数方式： 选择类名，首字母大写 /2、构造函数方式 function Person（name） this.name = name; this.say = function（） var operson1 = new Person（ operson1.say（）; var operson2 = new Person（李四 operson2.say（）;3）原型方式： 定义一个空的构造函数Person，然后通过person的prototype属性来定义person的属性与方法，当new Person（）被调用时，所有的p

8、rototype的属性和方法立即被分配给创建的对象。这样所有的Person的实例都包含了指向相同的say（）函数 /3、原型方式 function Person（） Person.prototype.name = ook Person.prototype.say = function（） alert（ ; var oPerson1 = new Person（）; oPerson1.say（）; var oPerson2 = new Person（）; oPerson2.say（）;4）混合构造函数和原型方式： 指在创建对象时，使用构造函数方式定义对象的属性，使用原始方式定义对象的方法，好处在于

9、：函数只创建一次，同时每个对象都有自己的对象属性实例。 /* *使用构造函数方式定义对象的属性 *使用原始方式定义对象的方法 * */你叫： var per = new Person（李白 per.say（）;5）动态原型方式：首先判断Person.initialized（初始化）的类型是否等于underfined的条件表达式，这是最重要的部分，如果相等，构造函数继续使用原始类型方式定义对象的方法function Person（name） this.name = name ; alert（Person._initialized）; if（typeof Person._initialized =

10、 undefined） Person.prototype.say = function（）他叫: ; /Person._initialized = true; alert（Person._initialized）;6）混合工厂方式： 混合工厂方式通是在当前的方式不能用时，做为替代品。与工厂函数相似。function Person（） var oPerson = new Object（）; oPerson.name = 张不三 oPerson.say = function（）他叫： return oPerson; var per = new Person（）;7）JSON格式创建对象： Json

11、是一种javascript对象的表示法，用大括号括起来，逗号分隔的属性/值对var personObj = firstname:张本, lastname: age:20, info:function（）信息：+this.firstname+this.age）; personObj.info（）;3、对象继承实现创建的子类将继承超类的所有属性和方法，包括构造函数及方法的实现，所有的属性和方法都是公用的，因此子类可以直接访问这些方法，子类还可以添加超类中没有的新属性和方法，也可以覆盖超类中的属性和方法1） 对象冒充：新的类冒充旧的类，（旧的类必须采用构造函数方式）,从而达到继承的目的原理：构造函数

12、使用this关键字给所有属性和方法赋值 /对象冒充 function Animal（name） this.sayHi=function（） alert（this.name+动物叫 /冒充方式继续动物类 function Dog（naem） this.inherit=Animal;/冒充 this.inherit（name）;/继续 delete this.inherit;/删除继续 var it = new Animal（tis it.sayHi（）;实例化子类对象，调用方法2） Call（）方式：call（）方式：封装的对象冒充的一个函数，要与冒充方法一起使用该方法，只需要将前三行的赋值，调

13、用，删除代码替换下。 / this.inherit=Animal; / this.inherit（name）; / delete this.inherit; Animal.call（this,name）; this.yy = function（） alert（naem+在看天 function main（） var dog = new Dog（yy dog.sayHi（）; dog.yy（）; main（）;第三章、 JavaScript事件模型了解JavaScript事件模型掌握Event对象掌握常用的事件类型编写事件处理程序1、事件流的形式 根据浏览器类型的不同，表现形式会有一定的区别 比

14、如: IE 是冒泡的形式 非IE 大部分是捕获的形式。 事件冒泡： 事件从事件发生的目标最内部开始触发，向上触发到外部（document对象）html onlick=HTMLheadbase href=%=basePath%JS03.jspbody onclick=DODYform onclick=FORMp style=cursor:head;PPPPPPPOOOOOOOOOOO/form事件捕获：与冒泡相反，他的事件触发顺序是从最外层的对象（document对象）到最里层的对象，例如：Netscape Navigator浏览器2、事件处理程序的指派形式（重点）指派:将JS函数与HTML的标

15、签中的事件绑定在一起。 绑定方式： 传统 现代 传统: JS脚本实现 注意:用来绑定事件的js脚本一定要放在被绑定标签的后面，且被绑定的语句中JS函数不能带括号。直接与HTML标签的事件绑定 优点：兼容性比较好 缺点:一个事件只能绑定一个函数（事件处理程序）div id=div1 style=width:100px;height:background-color: red document.getElementById（）.onclick=function（）JS事件 非IE指派的方式 addEventListener（事件名称,事件处理程序（JS函数）,boolean） firefox支持这

16、种方式还可以绑定多次事件removeEventListener（事件名称,事件处理程序（JS函数）,boolean） 1、IE指派的方式Window对象有两个方法：attachEvent（事件名称,事件处理程序（JS函数）detachEvent（事件名称,事件处理程序（JS函数）解决兼容性问题：IE与DOM下对于现代处理程序指派方式不同，为了保证代码在IE和DOM浏览器下都能用优点：一个事件同时可以指定多个事件处理程序（JS函数） 缺点：要专门写兼容性代码 事件处理程序的返回值例如：一个Submit按钮默认行为是提交表单，当一个表单的submit处理程序返回false，表单提交被取消。 主要用

17、途：能影响事件的默认行为。 阻止超链接，表单的提交这里有个表单：submit直接提交通过返回值阻止表单提交阻止超链接:a href=index.jspreturn confirm（确定? 超链接阻止表单提交以及超链接案例：function closewd（） alert（你关掉了浏览器窗体body onunload=closewd（）3、Event对象1、IE中，event对象时window对象的一个属性，只有事件发生时才可以访问，所有事件处理程序执行后，event对象就被销毁了。2、Onfocus聚集焦点input id=txt2 onfocus=this.value=请输入信息Onchan

18、ge文本框的值发生改变时触发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主要处理浏览

19、器窗口和框架。打开浏览器后，javascript就默认创建了一个window对象，所有能代表整个浏览器窗口Window 对象 History 历史location 位置document 文档对象1、 window 对象窗口操作：移动浏览器窗体moveBy （移动到相对的位置） moveTo（移动到具体位置） resizeTo 重新设置窗体大小，具体的大小resizeBy 重新设置窗体相对大小1）弹出窗口：Window.open（“url地址”,”名称”,”窗口设置信息”）备注：窗口设置信息详情见 P64 表4-1function windowOpen（） var arr=height=150,width=300,top=10,left=10 window.open（MyJsp.jsptest,arr）;打开窗口windowOpen（）/2）对话框