JavaScript高级5天学会教程分析

Javascript高级编程Day1大纲：1.Js基础2.事件编程3.Dom操作4.BOM模型5.面向对象6.正则表达式7.贪食蛇一、简介1、什么是javascriptJavaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。

2、为什么要使用javascript表单验证网页特效小游戏Ajax3、快速入门在程序中，如果想编写js代码，有两种办法：1）在html文件中，在一对script标记中，直接编写<script language='javascript'>document.write('hello');</script>2）在js中，直接编写，在html中，使用一对script标记直接引用以上两种不能在一对script标记中重复使用二、基础语法1、基本格式JavaScript区分大小写变量a和变量A是两个变量JavaScript脚本程序须嵌入在HTML文件中JavaScript脚本程序中不能包含HTML标记代码<script>document.write(…<table></table>‟);</script>每行写一条脚本语句语句末尾可以加分号JavaScript脚本程序可以独立保存为一个外部文件2、关于script标签<script>Language：引用的语言javascript、php、c#、VBSCRIPTSrc：引用一个外部的js文件3、关于变量变量是用来临时存储数值的容器，变量存储的数值是可以变化的变量必须要先声明才能使用，使用var声明变量使用var声明：局部变量没有使用var声明：全局变量变量的命名规则：第一个字符必须是英文字母，或者是下划线(_)；其后的字符，可以是英文字母，数字，下划线；变量名不能是JavaScript的保留字变量的作用域:全局变量、局部变量4、数据类型String ：字符串…‟“”Number ：数字10、10.01、100Boolean ：布尔型true、falseUndefined ：未定义Null ：空Object ：对象5、运算符算术运算符+、-、*、/、%、++、--i++++i比较运算符>、<、>=、<=、!=、==、===、!====和===有何区别？== ：判断值是否相等===：判断值相等类型也相同逻辑运算符&&、||、!赋值运算符=、+=、-=、*=、/=、%=将运算符左边的与右边的进行计算，再赋值给左边的字符串运算符+、+=三、流程结构顺序结构分支结构循环结构1、顺序结构代码是一行接着一行执行2、分支结构If、else、else if、switch3、循环结构For、while、do....while、for.....in小游戏：猜数游戏：进入到页面之后、随机一个数1--500、弹出输入框，由用户输入一个数字，如果这个数字大于随机数，提示：大了，反之提示，小了。

如果相等，提示：猜对了，然后程序结束四、函数1、函数的功能代码重复性使用模块化编程2、语法：使用函数前要先定义才能调用函数定义有三个部分:函数名,参数列表,函数体定义函数的格式function 函数名([参数1,参数2...]){函数执行部分;return 表达式;}调用语法：函数名(实参1,实参2,......,);3、代码示例例1：关于函数的定义和调用例2：关于函数的参数问题在上题中，first,second是形参，i,j是实体在函数执行过程，形参值的改变不会影响实参按值传递按地址传递原理图：在js中，对象类型默认就是按地址传递例3：关于函数的返回值问题例4：关于匿名函数Var i=10; 变量可以保存数据，也可以保存地址Function display(){} 在window对象下添加一个叫display的变量，它指向了这个函数的首地址Window.i=display 我们让window对象下的i指向这个函数的首地址display() ======= i();Function(){} ：相当于返回首地址(Function(){}) ：把这部分看做一个整体(function(){})()：相当于找到这个地址并执行以上这种写法：可以避免代码库中的函数有重命问题，并且以上代码只会在运行时执行一次，一般用做初始化工作。

例6：全局变量与局部变量在函数内部定义的就是局部的，否则就是全局的如果函数内的变量没有var声明会直接影响全局的为什么没有var是全局的？是因为，在js中，如果某个变量没有var声明，会自动到上一层作用域中去找这个变量的声明语句，如果找到，就使用，如果没有找到，继续向上查找，一直查找到全局作用域为止，如果全局中仍然没有这个变量的声明语句，那么会自动在全局作用域进行声明，这个就是js中的作用域链局部访问全局使用作用域链全局访问局部可以使用闭包进行模拟五、arugments的使用在一个函数内部，可以使用arguments属性，它表示函数的的形参列表，它是以数组形式体现的例1：在定义display函数时，它的实参个数必须要与形参个数保持一致，有时，我们定义函数时，形参数目不能固定，如何解决？例2：如果定义时，参数个数不确定，可以通过arguments来保存所有实参例3：使用js函数来计算每个公司的员工工资总额六、javascript中的词法分析Js中的script是分段执行的例1：在之前script语句段定义的变量和函数可以在其它script语句段使用。

例2：在一个js程序中，可以有多个script语句段，那么它们如何工作？1、读入第一个代码段2、编译声明变量、声明函数、语法检查、语义检查、代码优化、分析并得到代码树.......Var i=10;Var i;3、执行i=10;4、读入下一个代码段5、编译6、执行7、……8、结束首先，对上面这个script语句段进行编译，这时已经声明了变量i,这时它是undefind 例3：js中的错误类型编译错误：是指在编译时发生的错误，如：语法错误运行错误：是指在运行时发生的错误无论是哪种错误，当前代码段中的后面的代码都不执行编译时，如果发生错误，那么当前代码会停止执行，而执行后面代码段的内容运行时，如果发生错误，但前面的代码已经执行完毕，所以不会影响前面的内容无论是哪种错误，不会影响后面的代码的执行编译错误和运行错误出现时，对各自代码段的影响Script 执行流程图：Day2一、数组1、什么是数组数组就是一组数据的集合其表现形式就是内存中的一段连续的内存地址数组名称其实就是连续内存地址的首地址2、关于js中的数组定义数组定义时无需指定数据类型数组定义时可以无需指定数组长度数组可以存储任何数据类型的数据创建数组的语法：var arr=[值1,值2,值3]; //隐式创建var arr=new Array(值1,值2,值3); //直接实例化var array=new Array(size); //创建数组并指定长度3、关于数组长度数组对象.length在js中，每一个数组对象都可以调用length属性，它表示数组对象下共有几个数组元素示例：4、for...in语句在js中，数组不是数据类型，数组的数据类型其实就是对象Js中的For.....in语句可以实现对一个对象的所有属性的遍历也可以使用for...in语句实现对一个数组的所有元素的遍历语法：for( var i in array ){}数组中有几个元素，for..in语句就循环执行多少次每次执行时，将当前数组元素的下标存放到变量i中5、文本下标格式:arr[‘key’]例1：创建带有文本下标的数组例2：在js中，文本下标的数组元素，不计入数组长度上题输出结果为：3通过观察，后添加的first和second是以属性形式添加到数组对象中的例3：数组对象可以能过”.”来引用文本下标的数组元素例4：如何遍历带有文本下标的数组元素因为js中，文本下标不计入长度，所以不仍赖length属性来进行遍历文本下标的数组必须通过for.....in语句进行遍历文本下标的数组元素不计入数组长度需要使用for...in语句进行遍历可以使用对象名.调用文本下标元素6、关于多维数组7、案例：代码见：demo06.html二、事件编程●事件处理程序●常用事件●绑定事件方式●事件冒泡●默认行为●事件对象示例1、事件处理程序例1：点击按钮，弹出一个消息框例2：点击按钮，弹出一百个消息框在以上程序中，函数display就是按钮点击事件的事件处理程序2、常用事件onLoad：页面加载完毕后一般用于body元素onUnload ：页面关闭后一般用于body元素onBlur：失去焦点onFocus ：获得焦点onClick：点击onMouseOver ：当鼠标经过时onMouseOut ：当鼠标离开时onMouseDown ：当鼠标按下时onMouseUp ：当鼠标抬起时onMouseMove ：当鼠标移动时onChange：当内容改变时onSelect ：当内容被选中时onkeypress ：当键盘点击时onkeydown ：当键盘按下时onkeyup：当键盘抬起时触发顺序：onkeydown、onkeypress、onkeyupOnkeypress事件无法捕获功能键代码见：demo08.html onSubmit ：当表单提交时onReset ：当表单重置时3、绑定事件方式1）行内绑定语法：<元素事件=”事件处理程序”>2）动态绑定结构+样式+行为分离的页面语法：对象.事件=事件处理程序行内绑定和动态绑定的重要区别：以上程序是不可用的，点击div时，执行test函数，这时，test中的this表示window对象因为：我们定义test函数，实际上相应于在window对象下定义了test属性test(); 相当于window.test();所以test函数在执行时，里面的this指向window“谁”调用了函数，this指向“谁”以上程序是可用的，对象.onclick 在执行test函数时，test函数指向div1元素3）事件监听我们能不能为一个dom对象的同一个事件指定多个事件处理程序例1：通过这题，我们发现，如果为一个对象的同一个事件指定多个事件处理程序，那么，后面指定的程序会覆盖前面的。

Var i=10;i=20;Alert(i);如果我们想为一个对象的某个事件指定多个事件处理，可以考虑使用事件监听。

事件监听语法：IE：attachEvent(type,callback)type：事件名如：onclick、onsubmit、onchange等callback：事件处理程序基于W3C模型：addEventListener(type,callback,capture)Type：事件名，没有“on”前缀如：click、submit、changeCallback：事件处理程序Capture：事件模型（可选参数）（冒泡模型、捕捉模型）true：捕捉模型false：冒泡模型（默认值）代码示例：IE：W3c：总结：IE和W3C事件监听的不同：监听方法不同：IE attachEvent 、W3C addEventListener监听参数不同：IE 没有模型参数、W3C 有模型参数触发顺序：IE 8及以下的浏览器触发时是先绑定、后触发W3C浏览器是先绑定、先触发事件名称不同：IE 事件需要”on”前缀，W3C不需要‟on‟前缀解决事件监听的兼容性问题：通过script引用上面的js文件，可以使用下面代码进行调用：4、事件模型事件模型分为两种：1）冒泡模型2）捕捉模型目前，IE只支持冒泡模型5、冒泡模型事件冒泡是指事件响应时会上水冒一样上升至最顶级元素<div><div><div>click</div></div><div>代码示例：大多数情况下，程序需要对事件冒泡进行取消如何取消事件冒泡：IE：window.event.cancelBubble=true;W3C：function(event){event.stopPropagation();}解决兼容性问题：public.js代码：包含以上js文件，执行以下代码6、默认行为有些html元素，有自己的行为，如，提交按钮、超链接有些时候，我们需要对默认行为进行取消，如表单按钮点击时，用户资料添写不完整，我们这时需要将按钮的默认行为取消。