JavaScript与AJAX总结.docx

1、JavaScript与AJAX总结JavaScript与AJAX学习总结第一章、 JavaScript核心基础语法本章目标：认识什么是JavaScript掌握如何在网页中使用JavaScript掌握JavaScript核心基础语法1、javaScript是一种专门设计用来给网页增加交互性的编程语言，其代码通常嵌入在网页中。它最初由Netscape公司发明，最后交给欧洲计算制造商协会（ECMA）。1）使用范围：增加网页的交互性表单的验证，动态菜单，鼠标的特性，联动效果。2）特征：解释性语言，不需要预先编译就可以执行，需要由web浏览器去完成解释和执行，所以javascript只能局限在浏览器环境

2、中，与HTML结合起来使用。3）js与HTML的整合共三中方式： 内嵌式: Js脚本 eg：加法 function calSum() var a = parseInt(document.getElementById(num1).value); var b = parseInt(document.getElementById(num2).value); document.getElementById(num3).value=(a+b); 加上 外部式:这种形式要注意的地方: 在script标签中不能写东西。在外部建一个.js结尾的文件事件处理：JS作为事件的处理代码onclick单击时，ondb

3、lclick双击,onkeydown键盘,按下去时等等eg: 4）JS的体系结构语言的定义:变量，数据类型，运算符，关键字，语句var 变量名称；var test;var 变量名称 = 值; var age = 10;2. javascript 数据类型(原始数据类型，引用数据类型)原始数据类型：Undefined,Null,Boolean,Number,String用typeof来判断类型：Undefine:当声明变量未被初始话值，那么默认值是underfined，另外如果变量没有定义，就去进行计算，也是返回undefinedNull：空值Alert(null = undefined); 返

4、回trueJavascript把他们定义为true，尽管值相等，但是他们含义不一样：Underfined 定义变量未初始化值，null表示对象不存在Number：数字类型isNaN()；函数，判断是否是数字 var a = 11; var b = a + 22; alert(b); /返回33 alert(isNaN(blue); / 返回false alert(isNaN(123); /返回true 数据类型转换：String 类型转换成数字var num1 = parseInt(11qq); /返回11 alert(num1); var num2 = parseInt(sss); /返回N

5、aN alert(num2); var num3 = parseFloat(xls); /返回NaN alert(num3);强制类型转换：Boolean(value)Number(value);String(value);当要转换的值至少有一个字符的字符串，非0的数字或者对象时，Boolean()函数将返回truevar d = Boolean(0); alert(d); / 返回trueNumber();函数转换的是整个值，与paresInt不同var c = Number(222ll); alert(c); /返回NaNString()函数：把任何值都转换成字符串 var a = Str

6、ing(123); alert(a); /返回123 var o = 井盖; alert(o.toString()/返回井盖 核心对象：String，Array，Math,Boolean,Number,Date,Object,Function,ExpReg。Array类：var array1 = new Array(20); array10= red; array11=blue; alert(array1); / 返回 red,blue, for，do while var person = new Array(one,two,three); alert(person.length); for(

7、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(t=10); 函数： function 函数名称(参数1，n) 如果在alert之前进行了return，那么后面的代码将不会执行第二章、JavaScript面向对象编程本章目标：理解JavaScript中面向对象的功能的理论解除掌握JavaScript中创建自定义类和对象的方法掌握JavaScript中继承机制实现的方法1、JavaScript是

8、一个基于原型的面向对象语言，即每个对象有一个原型，对象从原型中继承属性和方法。1）对象的创建: JavaScript中的对象使用一个new运算符和一个构造函数创建。构造函数是一个特殊类型的函数，它通过初始化对象要占据的内存，来准备一个新对象的使用。eg:var city = new String(); /创建一个字符串对象city var city = new String(长沙); / 创建一个初始值为”长沙“的字符对象city2)对象销毁与垃圾回收 var city = new String(长沙); var city = null ; 注：如果对相同的数据有多个引用，必须确保所有的引用为

9、null。否则，解释器将保留这些数据，以备再次需要。3）动态添加对象属性 JavaScript对象属性的访问与Java语言一样，都是通过点运算符的方式。var myString = new String(Hello,JS); myString.simpleExample = true; / 或 myString.simpleExample = word; delete myString.simpleExample; / 实例属性添加后，我们可以通过delete运算符移除 alert(myString.simpleExample);4）动态添加对象的方法 方法就是一个对象自己所属的函数。如同属性

10、一样，方法一般通过点运算符访问。下面的示例演示如何调用String对象的toUpperCase()方法: var myString = new String(Hello,JS); alert(myString.toUpperCase(); /toUpperCase()-转换为大写 返回HELLO,JS设置实例方法与设置实例属性的方法相同，例如： var myString = new String(说什么就是什么); myString.sayNo = function() /匿名函数 alert(不有说); ; myString.sayNo();/方法调用5）对象运算符与语句 JavaScrip

11、t中包含两个运算符和两条语句，专门用于对象操作，它们是：new运算符，delet运算符、with语句和for.in语句。使用语法与java相当： for(变量 in 对象) JavaScript语句.eg:document.write(document对象属性如下：); for(var i in document) document.write(i+); 2、创建自定义的JavaScript类和对象1）工厂方式： 所谓工厂方式，就是先创建对象，然后往对象中添加属性和方法。 问题（缺点）：每个对象都有自己的函数。/自定义js对象 /1、工厂方式 function createPerson(nam

12、e) var personObj = new Object();/工厂方式先创建对象，后添加属性与方法 personObj.name = name; /添加属性 personObj.say = function() /匿名函数 alert(我叫：+this.name); ; return personObj; /方法调用 var person = createPerson(张三); person.say(); var person = createPerson(王五); person.say(); 2）构造函数方式： 选择类名，首字母大写 /2、构造函数方式 function Person(n

13、ame) this.name = name; this.say = function() alert(我叫：+this.name); ; var operson1 = new Person(张三); operson1.say();/方法调用 var operson2 = new Person(李四); operson2.say();3）原型方式： 定义一个空的构造函数Person，然后通过person的prototype属性来定义person的属性与方法，当new Person()被调用时，所有的prototype的属性和方法立即被分配给创建的对象。这样所有的Person的实例都包含了指向相同

14、的say()函数 /3、原型方式 function Person() Person.prototype.name = ook; Person.prototype.say = function() alert(我叫：+this.name); ; var oPerson1 = new Person(); oPerson1.say(); var oPerson2 = new Person(); oPerson2.say(); 4）混合构造函数和原型方式： 指在创建对象时，使用构造函数方式定义对象的属性，使用原始方式定义对象的方法，好处在于：函数只创建一次，同时每个对象都有自己的对象属性实例。 /*

15、*使用构造函数方式定义对象的属性 *使用原始方式定义对象的方法 * */ function Person(name) this.name = name; Person.prototype.say = function() alert(你叫：+this.name); ; var per = new Person(李白); per.say();5）动态原型方式：首先判断Person.initialized(初始化)的类型是否等于underfined的条件表达式，这是最重要的部分，如果相等，构造函数继续使用原始类型方式定义对象的方法function Person(name) this.name =

16、name ; alert(Person._initialized); if(typeof Person._initialized = undefined) Person.prototype.say = function() alert(他叫:+this.name); ; /Person._initialized = true; alert(Person._initialized); var per = new Person(王五); per.say();6）混合工厂方式： 混合工厂方式通是在当前的方式不能用时，做为替代品。与工厂函数相似。function Person() var oPerso

17、n = new Object(); oPerson.name = 张不三; oPerson.say = function() alert(他叫：+this.name); ; return oPerson; var per = new Person(); per.say();7）JSON格式创建对象： Json是一种javascript对象的表示法，用大括号括起来，逗号分隔的属性/值对var personObj = firstname:张本, lastname:李四, age:20, info:function() alert(信息：+this.firstname+this.age); ; pe

18、rsonObj.info();3、对象继承实现创建的子类将继承超类的所有属性和方法，包括构造函数及方法的实现，所有的属性和方法都是公用的，因此子类可以直接访问这些方法，子类还可以添加超类中没有的新属性和方法，也可以覆盖超类中的属性和方法1） 对象冒充：新的类冒充旧的类，(旧的类必须采用构造函数方式),从而达到继承的目的原理：构造函数使用this关键字给所有属性和方法赋值 /对象冒充 function Animal(name) this.name = name; this.sayHi=function() alert(this.name+动物叫); ; /冒充方式继续动物类 function D

19、og(naem) this.inherit=Animal;/冒充 this.inherit(name);/继续 delete this.inherit;/删除继续 var it = new Animal(tis); it.sayHi();实例化子类对象，调用方法 2） Call()方式：call()方式：封装的对象冒充的一个函数，要与冒充方法一起使用该方法，只需要将前三行的赋值，调用，删除代码替换下。 function Animal(name) this.name = name; this.sayHi=function() alert(this.name+动物叫); ; /冒充方式继续动物类

20、function Dog(naem) / 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、事

21、件流的形式 根据浏览器类型的不同，表现形式会有一定的区别 比如: IE 是冒泡的形式 非IE 大部分是捕获的形式。 事件冒泡： 事件从事件发生的目标最内部开始触发，向上触发到外部(document对象) base href= JS03.jsp OOOOOOOOOOO 事件捕获：与冒泡相反，他的事件触发顺序是从最外层的对象（document对象）到最里层的对象，例如：Netscape Navigator浏览器2、事件处理程序的指派形式(重点)指派:将JS函数与HTML的标签中的事件绑定在一起。 绑定方式： 传统 现代 传统: JS脚本实现 注意:用来绑定事件的js脚本一定要放在被绑定标签的后面，

22、且被绑定的语句中JS函数不能带括号。直接与HTML标签的事件绑定 优点：兼容性比较好 缺点:一个事件只能绑定一个函数(事件处理程序) document.getElementById(div1).onclick=function() alert(JS事件); ; 现代 非IE指派的方式 addEventListener(事件名称,事件处理程序(JS函数),boolean) firefox支持这种方式还可以绑定多次事件removeEventListener(事件名称,事件处理程序(JS函数),boolean) 1、IE指派的方式Window对象有两个方法： attachEvent(事件名称,事件处

23、理程序(JS函数)detachEvent(事件名称,事件处理程序(JS函数)解决兼容性问题：IE与DOM下对于现代处理程序指派方式不同，为了保证代码在IE和DOM浏览器下都能用优点：一个事件同时可以指定多个事件处理程序（JS函数） 缺点：要专门写兼容性代码 事件处理程序的返回值例如：一个Submit按钮默认行为是提交表单，当一个表单的submit处理程序返回false，表单提交被取消。 主要用途：能影响事件的默认行为。eg: 阻止超链接，表单的提交这里有个表单：submit直接提交通过返回值阻止表单提交 阻止超链接: 超链接阻止表单提交以及超链接案例：function closewd() al

24、ert(你关掉了浏览器窗体);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

25、中，失去焦点，并且值改变触发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-1function windowOpen() var arr=height=150,width=300,top=10,left=10; window.open(MyJsp.jsp,test,arr);2)对话框