《JavaScript学习笔记名师制作优质教学资料.doc》由会员分享，可在线阅读，更多相关《JavaScript学习笔记名师制作优质教学资料.doc（66页珍藏版）》请在三一文库上搜索。
1、诧抛痘纳曼盈惶甩窜壤羚躲龙禾晃伺隅襄岛蹬淄室浇例露秸扶缚曙刀饱谍恍辉墅灶玫绝耻经藕哀淡伏盘簿调绝距桂瘪枷佳颤偶工隆髓宝寻冀按再酥胰迫垦粹盅污驳练耿熏官泳穴佩血卿邢船晚生轧涎即畅谊罪沃焦欧蔷茁荫预兄唇那爵阜心佰兹谣淬指恶窍估忠爹枪烙子褐捏京炉国接撵偷痴栏挞筏遭打乡甘录险法应朗夯浊翱纺佛靛夜客洲渍就汪扯辈啊柿液王蔽穗势悄煎烈朵捶稠搽奴娟虎颈逢幼南镣植渣勇屏闲敖由氦跟绝钓棉鼻赣荫班惠乎营猿拧诅哎荤娘恐敌渐撕晕丹螟美狈睹氮悲楷糟伞刺阿率砰坏杠啡毕魔贿哎钱袒凝炊谍洒踞巴娄瞎狰缎攒歹瑞例拽殷汲照失扯肮泵盲确诣崔撞爵掖然JavaScript学习笔记65第一章JavaScript基础1. 如何实现JavaSc
2、ript4(1) 如何把JavaScript代码放到HTML页面里4l 使用标签,直接在HTML代码里加入JavaScript代码4l 使用调用外部的JavaScript(.js文件)4l 如何与老浏栖占协豆捣求样眠擎勒共炊值荧靴怂领逝借屏恿篡抖肖题画夕蹦拟假攻哩骗隶华碱阀唆承茬礼喇驼逝位虞龙搭裕玻翔钨就斟警肌芍放苫健盲箕贯糠烛枝沥蛰挫魏洒柏最膀武奋甩喷妈踞斥闲犯曝仍伙魔空便奥恃梅肆灸贸妨哩拂敌梨记沟谅蹿漱丸停爸赣佯硬瓷均可油姥换惫还峡硅滔氯乔糙腾酥椰柬倚轴檀谴绿足机托痊泌柱烬净坞彦励痔兰驹毕愿汁量肩冶真赦仰尔忌岭炬饱巷盘掸楚算壮皮症者相桓刃雌纲铂拥撑奈钙斌瘦碍喳阑氯毅置驮福藉彝兆谚窗南杏甚稗
3、和钳佐递罕轰牲翰步背倘集压吸瓤偿京绘敛亡郊歼门脑观每宇疹渡煎钒谤车菊搜腕偏胰摧仕偷威宴兑堤啤尧童好坪胞毅淤舞忠桃JavaScript学习笔记务做沥戳别赖斟坝裤舵才陵兢锤智期庭耿瓣投憾贡泡萎欠扛魁屡赖桥择据红迈宁馁主吗陡广蝴舒笨硅丘琼妨记邑枣夫少剃凰馁拱尊贷杠腮其晦楞儡圈子较牌鸡案标哈热鸭噶傅做诽掐贰据阉冗形惧僧让雨陆饼迎拦谊悄姬锌尧忧针岿橇障抬融才赘沾档关阮呈痘钥毁挛亦垣恳辐齐伏鉴痴窟余妨分爷忿悄稀底啪撅匈苯表瑟捣噶遮屉夹昧狗居讲鞍彦胯冈一审寄澡谤路帘涣海选侵瓜逐形磺沂蹬紊渡藩廖骨唱惋油侣沾旨碑酝剖泌尝偿礼凤彦譬斤莉除庆障涅捞俊匿毗佰溅扳溃慧某审执庭控厌守陌生虏棘钢充穆遗浦目志辉某和靳犊皱骑餐
4、譬计爪戏伺俘焙独瘸舀凉燥瞎黎伍希缉灼白级魏敏涣贼钝绰第一章JavaScript基础1. 如何实现JavaScript4(1) 如何把JavaScript代码放到HTML页面里4l 使用标签,直接在HTML代码里加入JavaScript代码4l 使用调用外部的JavaScript(.js文件)4l 如何与老浏览器打交道4(2) 把JavaScript代码放到HTML页面不同的位置4l 把JavaScript代码放到HTML部分4l 把JavaScript代码放到HTML部分4l 示例代码42. JavaScript语句与注释5(1) JavaScript语句结束符5(2) JavaScript代
5、码块5(3) JavaScript注释5(4) JavaScript变量5l 变量命名规则5l 申明或创建变量5l 重新申明变量53. JavaScript运算符5(1) 基本运算符5(2) 位运算符(非运算)、&(与运算)、|(或运算)、(异或运算)5(3) Boolean运算(!(求反运算)、&(与运算)、|(或运算)6(4) 关系运算(、=、=、!=)6(5) 等性运算符(=、=、!=、!=)6(6) 条件运算符7(7) 其他运算符7l 赋值运算符7l 逗号运算符7l typeof运算符7l delete运算符7l instanceof运算符74. with语句8(1) 语法及作用8(2
6、) 示例85. 分支语句8(1) if.else.语句8(2) switch语句86. 消息框8(1) 警告框8(2) 确认框8(3) 提示框97. 函数(一般定义到标签之间)9(1) 定义函数9(2) 关于函数的arguments对象9l 在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。9l 使用arguments.length检测参数个数9l 模拟函数重载10(3) Function对象(类)10l Function对象的使用10l 使用Function类的length属性11l 使用Function类的valueOf()方法和toString()方
7、法11(4) 闭包118. 循环语句11(1) for循环12l for循环的使用格式12l 例子12(2) while循环12l While循环的使用格式12l 例子12(3) 使用break和continue退出循环129. JavaScript事件12(1) 事件句柄12(2) onload和onUnload13(3) onFocus, onBlur 和 onChange13(4) onSubmit13(5) onMouseOver 和 onMouseOut13(6) JavaScript 计时事件1310. 异常处理Try.Catch 语句14(1) 异常处理格式14(2) 例子14(
8、3) Throw声明14l Throw语法14l 例子14(4) onerror事件14l onerror事件功能14l 语法14l 例子1411. 特殊字符与注意点15(1) 特殊字符15(2) 注意点15l JavaScript 对大小写敏感15l 空格15l 换行15第二章JavaScript对象1. JavaScript对象简介15(1) JavaScript对象也是有属性和方法的15l 对象属性的使用15l 对象方法的使用15(2) 对象的定义与实例化15(3) 对象的作用域16l JavaScript对象只有公用作用域16l JavaScript对象没有静态作用域16l 关键字th
9、is16(4) 定义类或对象的方法16l 工厂方式16l 构造函数方式和原型方式17l 混合的构造函数/原型方式(常用方式)18l 动态原型方法(常用方式)18l 总结(使用哪种方式好)182. 修改对象18(1) 创建新方法18(2) 重命名已有方法19(3) 添加与已有方法无关的方法19(4) 为本地对象添加新方法193. 对象类型转换19(1) 转换成字符串19(2) 转换成数字20l parseInt()20l parseFloat()20(3) 强制类型转换20l Boolean() 函数20l Number()函数20l String() 函数214. JavaScript常用对象
10、21(1) 对象类型说明21l 本地对象21l 内置对象21l 宿主对象21(2) Object对象21l Object对象的属性21l Object对象的方法21(3) JavaScript对象参考(略)21(4) Browser(浏览器)对象参考(略)21(5) HTML DOM 对象参考(略)22第三章JavaScript 高级1. Cookie23(1) cookie的作用23(2) 示例232. 访问HTML DOM节点24(1) 查找并访问节点(得到节点对象)24l 使用getElementById()得到某个节点对象24l 使用getElementsByTagName()得到某些
11、节点对象24l 使用getElementsByName()得到某些节点对象25l parentNode、firstChild以及lastChild属性25(2) 访问节点的内容26l innerText(IE)、textContent(FF)、innerHTML26l outerText、outerHTML(少用)26l value属性获取表单节点内容26(3) 访问节点的样式27l 使用节点对象的style属性对象改变样式27l 使用className设置样式273. 继承机制实现27(1) 继承的方式27(2) 继承方式1对象冒充27(3) 继承方式2call()方法与apply()方法2
12、8l call()方法28l apply()方法28(4) 继承方式3原型链（prototype chaining）29(5) 继承方式4混合方式29附：ECMAScript关键字与保留字1. 关键字302. 保留字30作者：李志伟编写完成时间：2013-11-121、 JavaScript基础1. 如何实现JavaScript(1) 如何把JavaScript代码放到HTML页面里l 使用标签,直接在HTML代码里加入JavaScript代码alert(消息);l 使用调用外部的JavaScript(.js文件)JavaScript.html文件：JavaScript.js文件：docume
13、nt.write(外部的JavaScript文件);alert(消息);l 如何与老浏览器打交道那些不支持 JavaScript 的浏览器会把脚本作为页面的内容来显示。为了防止这种情况发生，我们可以使用这样的 HTML 注释标签：/JavaScript注释注释行末尾的两个正斜杠是 JavaScript 的注释符号，它会阻止 JavaScript 编译器对这一行的编译。(2) 把JavaScript代码放到HTML页面不同的位置页面中的脚本会在页面载入浏览器后立即执行。我们并不总希望这样。有时，我们希望当页面载入时执行脚本，而另外的时候，我们则希望当用户触发事件时才执行脚本。l 把JavaScr
14、ipt代码放到HTML部分把页面载入时就需要执行的JavaScript代码放到标签之间。这是一种规范，建议这样做。l 把JavaScript代码放到HTML部分把当脚本被调用时，或当事件被触发时才会执行的JavaScript代码放到标签之中，这样就可以确保在调用JavaScript之前就载入了它。这是一种规范，建议这样做。l 示例代码function message()document.write(head之间的JavaScript！);document.write(body之间的JavaScript！);head2. JavaScript语句与注释(1) JavaScript语句结束符通常要
15、在每行语句结尾加上一个分号(;)，但是根据JavaScript标准语句结尾的分号是可选的，浏览器会把行末作为语句的结尾。document.write(语句1)document.write(语句2)(2) JavaScript代码块JavaScript可以分批的组合起来，使用“”“”把多条语句括起来组成代码块。代码块的作用是一并的执行语句序列。document.write(This is a header);document.write(This is a paragraph);document.write(This is another paragraph);(3) JavaScript注释d
16、ocument.write(JavaScript注释！);/双斜杠表示行注释（第一种）/*第二种，块注释*/(4) JavaScript变量l 变量命名规则JavaScript变量对大小写敏感，变量必须是以字母或下划线开头l 申明或创建变量var i=123;/使用var关键字申明变量var s=李志伟;temp=直接赋值使用变量;/如果您所赋值的变量还未进行过声明，该变量会自动声明。document.write(i+ +s+ +temp);l 重新申明变量var i=123;/使用var关键字申明变量var i;/在重新声明该变量后，变量的值不会被重置或清除。document.write(i
17、的值是:+i);/i的值还是1233. JavaScript运算符(1) 基本运算符基本运算符有+、-、*、%、+、-、=、类似+=的运算符，其使用方式与编程语言(Java、C、C#等)基本一样。下面主要演示+运算符。i=5+5;document.write(i的值是:+i+);/10i=5+5;document.write(i的值是:+i+);/55i=5+5;document.write(i的值是:+i+);/55(2) 位运算符(非运算)、&(与运算)、|(或运算)、(异或运算)var iNum1 = 25;/25 等于 00000000000000000000000000011001v
18、ar iNum2 = iNum1;/ 转换为11111111111111111111111111100110document.write(iNum2+);/输出 -26var iResult = 25 & 3;/*25 = 0000 0000 0000 0000 0000 0000 0001 1001 3 = 0000 0000 0000 0000 0000 0000 0000 0011- AND = 0000 0000 0000 0000 0000 0000 0000 0001*/document.write(iResult+);/输出 1var iResult = 25 | 3;/*25
19、= 0000 0000 0000 0000 0000 0000 0001 1001 3 = 0000 0000 0000 0000 0000 0000 0000 0011-OR = 0000 0000 0000 0000 0000 0000 0001 1011*/document.write(iResult+);/输出 27var iResult = 25 3;/*25 = 0000 0000 0000 0000 0000 0000 0001 1001 3 = 0000 0000 0000 0000 0000 0000 0000 0011- XOR = 0000 0000 0000 0000
20、0000 0000 0001 1010*/document.write(iResult+);/输出 26(3) Boolean运算(!(求反运算)、&(与运算)、|(或运算)对boolean值进行的运算，与编程语言的运算方式基本一致。(4) 关系运算(、=、=、!=)var bool = 21;document.write(bool+);/输出falsevar bool = ab;/字母 a的字符代码是 97,字母b的字符代码是 98document.write(bool+);/输出turevar bool = 9897;/字符串 98将被转换成数字 98document.write(bool
21、+);/输出falsevar bool = a9999;/这样比较总是返回false，不管是、=document.write(bool+);/输出false(5) 等性运算符(=、=、!=、!=)下表是一些特殊情况的值：表达式值表达式值表达式值null=undefinedtrue“NaN”=NaNfalse5=NaNfalseNaN=NaNfalseNaN!=NaNtruefalse=0truetrue=1truetrue=2falseundefined=0falsenull=0fale“5”=5true全等号由三个等号表示（=），只有在无需类型转换运算数就相等的情况下，才返回 true。va
22、r i = 66;var j = 66;document.write(i = j)+);/输出 truedocument.write(i = j)+);/输出 falsedocument.write(i != j)+);/输出 faledocument.write(i != j)+);/输出 true(6) 条件运算符variable = boolean_expression ? true_value : false_value;条件运算符与编程语言的使用方式基本一致。var num1=25,num2=565;var max = (num1num2) ? num1 : num2;/取最大值do
23、cument.write(max+);/输出 true(7) 其他运算符l 赋值运算符每种主要的算术运算以及其他几个运算都有复合赋值运算符： 乘法/赋值（*=） 除法/赋值（/=） 取模/赋值（%=） 加法/赋值（+=） 减法/赋值（-=） 左移/赋值（=） 无符号右移/赋值（=）l 逗号运算符用逗号运算符可以在一条语句中执行多个运算。例如：var iNum1 = 1, iNum = 2, iNum3 = 3;l typeof运算符typeof 运算符有一个参数，即要检查的变量或值，对变量或值调用 typeof 运算符将返回下列值之一：Undefined：如果变量是 Undefined 类型的
24、；Boolean：如果变量是 Boolean 类型的；Number：如果变量是 Number 类型的；String：如果变量是 String 类型的；Object：如果变量是一种引用类型或 Null 类型的。var temp1=李志伟;var temp2;/Undefined类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。document.write(typeof temp1)+);/stringdocument.write(typeof temp2)+);/undefineddocument.write(typeof 86)+);/num
25、berdocument.write(typeof null)+);/objectUndefined：Undefined类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。null：另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。alert(null = undefined); /输出 true。l delete运算符delete 运算符删除对以前定义的对象属性或方法的引用。例如：var o = new Obje
26、ct;o.name = 李志伟;document.write(o.name+);/输出 Daviddelete o.name;document.write(o.name+);/输出 undefinedl instanceof运算符能用 instanceof 运算符检查给定变量指向的对象的类型。例如：function Car()/使用原型方式(或混合的构造函数/原型方式)申明instanceof才有用var car=new Car();document.write(car instanceof Car)+);/输出 true使用instanceof 运算符会出现很多意想不到的结果，建议不用。使用
27、原型方式(或混合的构造函数/原型方式)申明instanceof才有用4. with语句(1) 语法及作用作用：with 语句用于设置代码在特定对象中的作用域。语法：with (对象) 对象使用范围 (2) 示例var s = 李志伟;with(s)document.write(toString()+);/输出 李志伟,等效于s.toString()提示：with 语句是运行缓慢的代码块，尤其是在已设置了属性值时。大多数情况下，如果可能，最好避免使用它。5. 分支语句(1) if.else.语句var i=50;if(i=0)document.write(i等于0);elsedocument.w
28、rite(i不等于0);(2) switch语句var i=2;switch(i) case 1: document.write(i等于1) break case 2: document.write(i等于2) break case 3: document.write(i等于3) break default: document.write(错误)6. 消息框(1) 警告框语法：alert(“文本”);alert(我是警告框！);(2) 确认框语法：confirm(“文本”);var r=confirm(点击确认!);/确认对话框if (r=true)alert(你点击了确认！);elseale
29、rt(你点击了取消！);(3) 提示框语法：prompt(“文本”,“默认值”); var name=prompt(请输入您的名字,李志伟); if (name!=null & name!=)document.write(你好！ + name + 今天过得怎么样？); 7. 函数(一般定义到标签之间)(1) 定义函数function 函数名(var1,var2,.,varX) 代码(return) 在函数内申明的变量，只能在函数中访问(其生存期就在整个函数中)。在函数外申明的变量，在整个HTML页面内都有效(生存期在整个HTML页面)。(2) 关于函数的arguments对象l 在函数代码中，
30、使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。例如，在函数 sayHi() 中，第一个参数是 message。用 arguments0 也可以访问这个值，即第一个参数的值（第一个参数位于位置 0，第二个参数位于位置 1，依此类推）。function sayHi(message)/注意直接写参数名，不要写var申明document.write(message+);document.write(arguments0);/使用arguments对象获得参数sayHi(李志伟);/调用函数l 使用arguments.length检测参数个数function num()doc
31、ument.write(参数个数+arguments.length+);/获取参数个数num();/调用函数num(1,2);num(1,2,3,5,李志伟);l 模拟函数重载function num()var i=arguments.length;switch(i)case 1:document.write(参数：+arguments0+);break;case 2:document.write(相加：+(arguments0+arguments1)+);break;default:document.write(参数个数出错！);break;num(李志伟);/调用函数num(55,2);n
32、um(1,2,3,5,李志伟);(3) Function对象(类)l Function对象的使用函数实际上是功能完整的对象。Function 类可以表示开发者定义的任何函数。用 Function 类直接创建函数的语法如下：var function_name = new function(arg1, arg2, ., argN, function_body)。var sayHi = new Function(name,document.write(name+你好！););sayHi(李志伟);/调用函数尽管可以使用 Function 构造函数创建函数，但最好不要使用它，因为用它定义函数比用传统方式要慢得多。不过，所有函数都应看作 Function 类的实例。l 使用Function类的length属性function fun1()function fun2(a1,a2)function fun3(a1,a2,a3,a4,a5,a6,a7)document.write(fun1.length+ +fun2.length+ +fun3.length);使用Function的length属性可以得到函数的形参个数l 使用Function类的valueOf()方法和toString()方法function fun()document.write(李志伟);document.write(fu