JavaScript编程语言.ppt

JavaScript编程语言 参考教材 JavaScriptTheDefinitiveGuide5th chmOReilly JavaScript The Good Parts May 2008 chmMcGraw Hill Osborne JavaScript 2 0 The Complete Reference Second Edition eBook LiB chm 因为JavaScript是世界上最受误解的计算机编程语言语言名称 与Java和JavaApplet无关 内置于浏览器中 JavaScript还用于其它场合 ECMAScript的标准 其子集的标准 函数型语言 面向对象的语言 世界上最不容易学习的编程语言 历史 1992Sun公司的Oak语言1995HotJavaNetscape公司浏览器中的LiveScript1996Microsoft公司浏览器中的JScript1998ECMAScript标准出台 应用JavaScript的平台 BrowsersYahoo WidgetsDreamWeaver和PhotoshopEmbedded JavaScript不是Web玩具 面向对象的编程语言 精悍 但复杂 不是Java语言的子集 为什么要学习和使用JavaScript 有两个原因 第一 别无选择 Web已经成为应用开发的重要平台 在所有的Web浏览器中 JavaScript是唯一的编程语言 第二 无可奈何 Java及其JavaApplet在Web平台上早已溃败 而JavaScript则日益兴盛 坏消息 传统OOP技术 不能直接应用于Web客户端 好消息 mootools框架可将JavaScript的 原型OOP技术 转化为 传统OOP技术 主要思想 装载后即可运行宽松的类型声明和定义对象被看成一个无所不包的 通用容器 原型继承 方式的OOP可 匿名地 生成对象通过全局变量 globalvariables 联接所有变量 程序注释方式 单行注释 slashslashlinecomment多行注释 slashstarblockcomment 基本数据类型 NumbersStringsBooleansObjectsnullundefined Numbers 只有一种数据类型 实数型 没有整数型数据 64位的浮点实数IEEE 754 常被有些语言称为 double 型 任何浮点实数计算都有一定的误差 例如 0 1 0 2 0 30000000000000004 NaN 特殊的数 NotaNumber 未定义 或 错误操作 的结果NaN的连锁反应 NaN参与的算术运算结果都为NaNNaN不等于任何东西 甚至不等于NaN 与Number有关的函数function Number value 将value转化为number 如果value转化过程中有问题将产生NaN类似于后面将讲到的 前缀操作符 parseInt函数 parseInt value 10 将value转化为number在转化过程中 当碰到第一个非数字字符时停止转化操作第二个参数 进制数 10 一般都需要列出parseInt 08 0parseInt 08 10 8 Math Math对象内置于JavaScript中Math对象包含有以下函数 absabsolutevaluefloorintegerloglogarithmmaxmaximumpowraisetoapowerrandomrandomnumberroundnearestintegersinsinesqrtsquareroot Strings 0个或多个 16位字符 的序列无 字符型 类型类似C语言中的字符型被JavaScript看成长度为1的StringsStrings中的字符是不能被操纵的相同的strings可用等号 进行比较Strings中的字符序列可用单引号 或双引号 引用 String长度 string lengthlength属性表示string的字符数目 String函数 String value 将value转化为string String对象的方法 charAtconcatindexOflastIndexOfmatchreplacesearchslicesplitsubstringtoLowerCasetoUpperCase Booleans truefalse Boolean函数 Boolean value 如果value为真返回true如果value为假返回false类似于 前缀操作符 null null是一个特殊的value 它表示某变量中不是JavaScript有效的valuenull是一个特殊的对象 它表示某对象中不是JavaScript有效的属性当一个变量内有null时 表示这个变量内没有任何有效的JavaScript对象 undefined undefined是变量或函数参数的默认值当JavaScript对象中没有属性时返回undefined当变量或函数参数被声明但未赋值时返回undefined注意 undefined不同于null 当某变量中有null时 该变量不是undefined 逻辑假 falsenullundefined 空string 0NaN所有的其它值 包括所有的其它对象 为逻辑真 0 false 类型强制转换 TypeCoercion 后面会提到 为避免强制转换可用 代替 EverythingElseIsObjects万物皆对象 JavaScript的对象 概念上 对象 Object 和哈希表 Hashtable 相一致newObject 产生一个空的 通用容器 该 通用容器 可存放多个 名字 值 对 name valuepairs 名字 name 为字符串 string 值 value 可为任何除undefined以外的JavaScript对象 包括null 对象中的属性 property 或成员 member 可用 点符号 dotnotation 或 下标符号 subscriptnotation 操作 例如 a p或a p 对于JavaScript来说 Hash表优化算法和代码是低层的 不可见的 JavaScript的对象 哈希表 Hashtable 理论基础 课程 数据结构 的哈希表提高目录查询的存取速度 宽松的类型声明的定义 一个变量可以存放任何类型的值或对象一个变量不受 类型定义 的约束vara 159vara myname 类C语言 从语法上看 JavaScript属于 类C语言 JavaScript不同于C的地方主要在于数据类型的管理上JavaScript甚至允许某个函数被赋值成其它对象或常数 标识名Identifiers 由一个英文字母 或 开头后面可跟随0个或多个英文字母 数字 或 良好的程序设计习惯是 将所有的变量 variable 函数参数 parameter 成员 member 函数 function 的名称以 小写 的英文字母开头对象构造器 constructor 的名称以 大写 的英文字母开头对于普通程序员来说 以 或 开头的方式命名标识名一般保留不用 保留字ReservedWords abstractbooleanbreakbytecasecatchcharclassconstcontinuedebuggerdefaultdeletedodoubleelseenumexportextendsfalsefinalfinallyfloatforfunctiongotoifimplementsimportininstanceofintinterfacelongnativenewnullpackageprivateprotectedpublicreturnshortstaticsuperswitchsynchronizedthisthrowthrowstransienttruetrytypeofvarvolatilevoidwhilewith 操作符Operators 数值运算Arithmetic 比较运算Comparison 逻辑运算Logical 位运算Bitwise 极少使用 三重操作符Ternary 数值加法 Addition 或者字符串连接 concatenation Ifbothoperandsarenumbers thenaddthemelseconvertthembothtostringsconcatenatethem 3 4 34 一元操作符可用于将string转化为number 42 42或者Number 42 42或者parseInt 42 10 42 3 4 7 两个整数相除会得到一个非整数的结果10 3 3 3333333333333335因为JavaScript压根就没有整数类型 相等 和 不相等 这两个比较运算操作符会自动将操作数进行 强制类型转换 typecoercion 可用 代替 以避免typecoercion建议使用 逻辑与 logicalandIffirstoperandistruthythenresultissecondoperandelseresultisfirstoperand可用于防止null值出现if a returna member else returna 上面可写为returna 逻辑或 logicalorIffirstoperandistruthythenresultisfirstoperandelseresultissecondoperand可用于填写默认值varlast input nr items Ifinputistruthy thenlastisinput otherwisesetlasttonr items 前缀操作符表示逻辑非 logicalnotIftheoperandistruthy theresultisfalse Otherwise theresultistrue 两个连续的逻辑非 产生 否定之否定 位运算符Bitwise 位操作符在内部先将64位实数转化为32位有符号的整数 再进行位运算操作 之后再将结果还原为64位实数 结构化语句Statements expressionifswitchwhiledoforbreakcontinuereturntry throw 类型强制转换 TypeCoercion false 逻辑假 ture 逻辑真 varx 0 if x alert xistruthy 永远不会打印xistruthy 类型强制转换为逻辑假的值 空对象 undefined null NaN NotaNumber 是false0 true false 0 true false true 类型强制转换为逻辑真的值 非空的对象 3 3 逻辑真 false false 逻辑真 类型强制转换 TypeCoercion 类型强制转换的其它操作 求反 false 逻辑真 false 逻辑假 mystr 逻辑假如何避免类型强制转换 强烈推荐使用 varx 0 if x alert xisfalsy if x false alert xisNOT false 实例example12 类型强制转换 TypeCoercion FireFox的DOM参考文档网上资源https developer mozilla org en Gecko DOM Reference有关window对象的文档 https developer mozilla org en DOM window例如 函数window alert 的用法有关document对象的文档 https developer mozilla org en DOM document例如 函数document write 的用法 Break语句 Break语句可将程序运行指针转向语句体之外 例如 循环和Switch的语句体之外 loop label for if breakloop label For语句 将一个数组对象array中的所有元素按下标顺序进行处理 for vari 0 i array length i 1 withintheloop iistheindexofthecurrentmember array i isthecurrentelement For语句 将一个对象object中的所有属性 成员 按下标顺序进行处理 for varnameinobject if object hasOwnProperty name withintheloop nameisthekeyofcurrentmember object name isthecurrentvalue Switch语句 多分枝选择各分枝值不一定非要是数值 number 也可为字符串 string 各分枝值也可为运算结果为数值 number 或字符串 string 的表达式 expression Switch语句 switch expression case case case punctuation break default noneOfTheAbove Throw语句 thrownewError reason throw name exceptionName message reason Try语句 try catch e switch e name case Error break default throwe Try语句 JavaScript内置并能产生如下例外对象 Error EvalError RangeError SyntaxError TypeError URIError 参看 JavaScript2 0 TheCompleteReference SecondEdition AppendixA CoreSyntaxQuickReference中的Exceptions With语句 一般用于调试程序with o foo null 等价于 o foo null 不同于foo null 在正式程序中 不要使用with语句实例example13 函数语句 JavaScript语言中最常用 最有用的语句 用于生成和定义函数对象functionname parameters statements Var语句 在一个function中定义变量变量类型不用指定变量的初始值是可选择的varname varnrErrors 0 vara b c 变量范围Scope 在JavaScript中 语句块 没有变量范围只在函数对象中有变量范围 因为只在对象中有变量范围 在一个function中Var语句定义的变量在这个function之外是不可见 不可引用操作的 Return语句 returnexpression 或者return 如果没有expression 那么return返回的值是undefined除非是对象的构造子 因为它返回的默认值是this 下面谈Object 实例example14 example15 对象Object Everythingelseisobjects 万物皆对象 Object就象一个无所不包的容器 它里面可装数据data和方法method一个object可从其它的object 继承 而生成 对象的杂物箱 一个对象由一些无序的 成对的 name value构成name是字符串string类型value可以是任何类型 包括其它的对象object对象就象一个小数据库 记录一些树状的数据 对象的数据表示 对象的数据用成对的 来表示name用字符串表示value可以是任何类型的表达式expression 符号将name和value分隔区分 符号将成对的name value分隔区分 对象的数据表示 varmyObject name JackB Nimble goto Jail grade A level 3 vartheName myObject name vardestination myObject goto 对象的定义工具 function functionmaker name where grade level varit it name name it goto where it grade grade it level level returnit myObject maker JackB Nimble Jail A 3 对象的定义工具 function varmyObject name JackB Nimble goto Jail grade A format type rect width 1920 height 1080 interlace false framerate 24 对象的定义工具 function varmyObject name JackB Nimble goto Jail grade A format type rect width 1920 height 1080 interlace false framerate 24 对象的定义工具 function functionmyFunction para myFunction type rect width 1920 height 1080 throw name error message outofbounds 对象的定义工具 Function functionSuperDiv width height left top zIndex position color visibility html cssClass functionSuperDiv spec 对象内容的增加 对象可通过简单的赋值操作增加对象成员没有必要象C Java那样定义一个新的继承类classmyObject format colorModel YCgCb myObject name value 对象的继承关系 Link链 对象由一条 隐藏的link链 从其它对象继承生成如果在当前对象中找不到一个成员的属性名name 那么就通过这条 隐藏的link链 到父对象中去找但是 在当前对象增加新成员时 这条 隐藏的link链 不会被使用Object o 函数 用于生成一个新的空对象 这个空对象有一条 隐藏的link链 指向对象o 对象的继承关系 Link链 varmyNewObject Object myOldObject myNewObject myOldObject 对象的继承关系 Link链 myNewObject name TomPiperson myNewObject level 1 myNewObject crime pignapping 对象的继承 Link链提供了一个简单的对象继承关系一个对象可继承另一个对象中的所有成员 原型继承PrototypalInheritance C Java等语句有类class 方法method 构造子constructor和模块module的概念 而JavaScript的函数function就实现了这些概念与传统继承ClassicalInheritance不同 JavaScript是原型继承 原型继承PrototypalInheritance 与其从其它旧对象中重新组织新对象 还不如充分利用现有对象 对其进行定制定制对象比建立新的类所花开销要小关键在于Object o 函数其它的关键也在于函数 对象的方法Method 所有对象都直接或间接地被链接到Object prototype所有对象都从它身上继承到一些基本的方法但是 这些基本方法只对JavaScript语言的内部系统有用 对程序员来说几乎无用hasOwnProperty name Isthenameatruememberofthisobject 对象的建立 以下三种方式产生同样的效果 建立一个新的空对象newObject Object Object prototype 和newObject 是较常用的方式 引用Reference 对象既可作为函数的参数使用 又可作为函数返回的值Objectsarepassedbyreference Objectsarenotpassedbyvalue 操作符用于比较对象的引用reference而不是valuetrueonlyifbothoperandsarethesameobject 对象的删除Delete 对象成员可用delete操作符从对象中删除掉deletemyObject name 实例example16 数组Arrays 数组Array继承Object而生成数组标号Indexe被转化为string类型 作为成员name来获取相应的value优点 在建立数组时 不用定义数组类型 数组长度 数组长度length 数组Array与一般的对象object不同 它有一个属性成员lengthLength数值比数组最大的整数号大1常用于for语句中for i 0 i a length i 1 请勿用于for in结构中 数组的数据表示 用 表示数组的数据 中可放置任意多的表达式 用半角逗号 分隔区分myList oats peas beans 新的数据的增加方式为myList myList length barley 可用点引用方式 dotnotation 读取数据 优于等价的方式newArray 数组的常用方法 concatjoinpoppushslicesortsplice Deleting数组元素 deletearray number 删除元素后 留下number所指的空位array splice number 1 删除无素后 不留下number所指的空位 Deleting数组元素 myArray a b c d deletemyArray 1 a undefined c d myArray splice 1 1 a c d 数组与对象 当属性名name是任意的字符串时 选用对象当属性名name是整数时 选用数组数组是一种特殊的对象一般来说 勿将数组当成父对象用于原型继承实例example17 区分数组 value constructor ArrayvalueinstanceofArray如果value不是数组 以上两个语句都不会运行 函数 对于JavaScript来说 函数最常用的对象一个函数可作为另一个函数的参数 可作为另一个函数返回的对象 可作为其它对象的属性值同数组一样 函数源于Object 它可以象其它对象一样存放name value对 函数操作符 函数的定义方式 函数的定义由一个可选的函数名 一个参数表 一个语句块组成 在语句块中有return语句返回作为运行结果的对象functionname parameters statements 函数 可出现在任何允许 对象 存在的地方 匿名函数lambda 以下两种函数定义的方式等效functionfoo 等价于varfoo function 匿名函数 function 函数嵌套 函数中可以定义其它函数 一个函数中的函数被称为 子函数 相应地 包含了子函数的函数被称为 父函数 因为 对象中可以包含其它函数 变量范围 在JavaScript语言中 语句块 blocks 不决定变量范围 只有对象才决定变量范围函数作为对象 只有函数才决定变量范围var操作符定义的变量在函数对象之外是无效的 不可见的因此 与C等语言不同 子函数对象之内可引用父函数对象的变量 闭包Closure 子函数 有权操纵定义在 父函数 中的参数 变量和对象 即使当父函数返回结果后 父函数的变量范围对子函数来说 仍然有效 以上两点表明的这一特性称为闭包closure这类似于C 中的Static定义的静态成员或Java中的PublicStatic定义的静态成员实例example18 Function对象 Function是一种特殊的对象 注意 首字母大写 不是function语句 它继承自Object对象 同Object对象一样也可包含有成对的name valueFunction生成函数的原型对象 Function与function不同 前者是 对象名 后者是定义函数的 关键字 或 操作符 方法Method 既然函数可以被看成是某个对象的一个值 那么函数中也可以被存放于某个对象中一个函数作为某个对象的成员 此函数被称为该对象的 方法 成为对象的一个功能 调用Invocation 如果调用函数的参数多于其声明的数量 多余的参数将被忽略掉 如果调用函数的参数少于其声明的数量 缺少的参数将默认为undefined 对于函数参数来说 不用说明其类型 调用Invocation 有四种方式调用函数 函数形式FunctionformfunctionObject arguments 方法形式MethodformthisObject methodName arguments thisObject methodName arguments 构造器形式ConstructorformnewfunctionObject arguments 内置应用函数形式ApplyformfunctionObject apply thisObject arguments 方法形式调用 thisObject methodName arguments 当以方法形式调用函数时 this对象被设置为thisObject 这个对象包含有此函数 this对象向方法提供了一个引用该方法所在对象的手段 函数形式调用 functionObject arguments 当以函数形式调用函数时 this对象被设置为全局对象 globalobject 在Web环境下 全局对象就是浏览器内置的window对象 构造器形式调用 newfunctionObject arguments 当以构造器形式调用函数时 new操作符将生成一个新的对象 并将这个新对象设置为this对象 内置应用函数形式调用 functionObject apply thisObject arguments 等价值于 函数形式调用 thisObject methodName arguments 不同之处只在于 内置应用函数apply 的使用 this this是方法调用时一个额外附加