1、1,应用系统开发导论,Java Script （上）,2,内容,JavaScript概述 JavaScript核心 小结,3,JavaScript概述,4,JavaScript的基本概念,JavaScript 是一种脚本语言 增强功能和表现 客户端脚本 使得页面动态和交互 也可以作为服务端的脚本语言,5,JavaScript溯源,由Netscape公司于1995年在它的Navigator 2.0产品上设计并实现，原名LiveScript 但是在LiveScript发布三个月后，出于销售策略上的考虑，Netscape公司与Sun公司发表联合声明将LiveScript改名为JavaScript 所
2、以尽管JavaScript与Java在名称，语法结构，关键字方面都有相似之处，但实际上他们是完全不相干的。 目前，JavaScript的标准化进程还不够完善。尽管早在1997年ECMA就通过第一个版本的JavaScript标准，JavaScript在其中被称为ECMAScript，至今已有三个版本的标准（ECMA-262）问世 Microsofts JScript,6,一个样例,7,代码,Welcome ,8,/ Function for Finding Object Reference by ID function getObj(nameId)if(document.all) / IE an
3、d Opera Browsersreturn document.allnameId;else if(document.getElementById) / Mozilla Series Browsersreturn document.getElementById(nameId);elsealert(“unsupported browser!“ + navigator.userAgent);return null; / Global Data Section var cx = 150; var cy = 150; var radius = 36;,9,/ Main Functions Sectio
4、n function trackMouse(e)if(!e) e = window.event; / Fixing for IE Event Modelvar obj = getObj(“point“); / Finding Object Reference by ID, “point” var nx, ny;if(ie) / IE and Opera Browsernx = e.clientX + document.body.scrollLeft;ny = e.clientY + document.body.scrollTop;else if(ns) / Mozilla Series Bro
5、wsernx = parseInt(e.pageX) + parseInt(window.pageXOffset);ny = parseInt(e.pageY) + parseInt(window.pageYOffset); var dx = nx - cx;var dy = ny - cy;var dst = Math.sqrt(dx * dx + dy * dy);if(dst radius)var theta = Math.asin(dy/dst);nx = cx + (dx = 0?1:-1)*(radius * Math.cos(theta);ny = cy + radius * M
6、ath.sin(theta); obj.style.left = (nx - 2) + “px“;obj.style.top = (ny - 2) + “px“; ,10,/ Register Event Handlers document.onmousemove = trackMouse; /,11, / 工具函数段(Utility Functions Section)/ 浏览器类别和版本检查函数(Function for Checking Browser Version)/ 对象索引函数(Function for Finding Object Reference by ID) / 全局数据
7、段(Global Data Section) / 工作函数段(Main Functions Section) ,12,JavaScript特性,JavaScript的语法构成上基本上与Java，C/C+等主流语言一致 JavaScript是一个弱类型的语言。 JavaScript是一种基于对象的语言（Object-Based Language），注意不是一种面向对象的语言（Object-Oriented Language），所以它在对“对象”的支持上有一定缺陷，大家所熟悉的诸如对象继承，多态等面向对象语言所具有的基本特性在JavaScript中只能通过一些变通手段来实现（通常比较复杂）； Ja
8、vaScript作为一种解释性语言； JavaScript是一种具有丰富特性的语言，它为开发者提供许多实用的库函数。,13,JavaScript的功能,控制文档的外观和内容 对浏览器的控制 与HTML表单的交互 与用户的交互 存取客户的状态（cookie）,14,JavaScript的安全性,JavaScript的安全性是通过运行在沙箱（Sandbox）环境中得到保证的 沙箱环境通过监控JavaScript的操作，给JavaScript程序的运行附加了许多安全性限制。例如，它不允许任意访问本地的硬盘，并不能将数据存入到“非同源”的服务器上，禁止访问“非同源”网页上的文档对象，从而有效地防止数据
9、窃取等安全隐患。 “非同源”指的是下载JavaScript的站点不同于JavaScript请求交互的站点。例如，从A站点下载的JavaScript就不允许访问B站点网页的内容。,15,学习JavaScript必备技能,搭建基本的实验环境 调试代码的基本技巧 判别任务的可行性,16,搭建基本的实验环境,Microsoft IE6+ Editplus或Macromedia Dreamweaver,Hello World document.write(“Hello World!“);,17,调试代码的基本技巧,document.write() alert() Debug var msg = “deb
10、ug End!“;for ( index in document )document.write(“document“+index+“=“+documentindex+“);alert(msg);,18,判别任务的可行性,JavaScript只能操作浏览器提供的对象和接口； JavaScript不能跨越沙箱运行环境的安全限制。,19,JavaScript核心,20,内容,基本语法特征 JavaScript中的数据 JavaScript中的语句 常用的库函数示例,21,基本语法特征,JavaScript使用Unicode字符集。16位的Unicode编码几乎可以表示地球上任何一种已编码的书面语言
11、，但是直到ECMAScript v3标准出现才要求Unicode字符可以出现在JavaScript程序的任何地方，在早期版本的JavaScript中，Unicode字符只能出现在注释或用引号括起来的字符串中，而程序的其他部分只能使用ASCII字符集； JavaScript是大小写敏感的。 JavaScript忽略空白字符和换行符，除非它们是字符串直接量或正则表达式的一部分； JavaScript中行末的作为分隔符的分号可以省略。没有分号的话，默认以换行符作为语句的结束标记。如果你想在同一行中书写多个语句的话，分隔语句中间的分号必不可少。JavaScript支持C/C+/Java型的注释。单行注
12、释以“/”领头，多行注释用“/*”和“*/”标注； JavaScript中标识符（Indentifier），即命名函数和变量的名字，第一个字符必须是英文字母、下划线（_）或美元符号（$），接下来的字符可以是字母、数字、下划线或美元符号。实际上在ECMAScript v3标准中该限制已经放宽到允许标识符中出现Unicode转义字符，但不不建议大家这么做。此外，标识符还不能与用于其他目的关键字同名。,22,JavaScript中的数据,数字 字符串 布尔值 函数 对象 数组 null和undefined 使用值和使用引用 自动类型转化 操作符,23,数字,Integer Literals 0，3，
13、100000 Octal Literals 0377， 0666 Hexadecimal Literals 0xff，0xABCD123 Floating-Point Literals 3.14，.33333，2.7e64，1.87E-18,24,字符串,字符串（string）是由Unicode字符、数字、标点符号等组成的序列，它是JavaScript用来表示文本的数据类型。在JavaScript中没有char这样的数据的类型，所以我们只能用长度为1的字符串来表示单个字符。JavaScript中字符位置的索引值从0开始，即第一个字符的索引值是0。,25,字符串操作,strings concat
14、enation msg = “hello, “ + “JavaScript“; / msg = “hello, JavaScript“ str = “ABCDEFG“ length strlen = str.length; / strlen is 7, the length of str charAt firstChar = str.charAt(0); / firstChar = “A“ substring midStr = str.substring(1, 6); / midStr = “BCDEF“ indexOf posC = str.indexOf(C); / posC is 2,
15、the position of the first letter C in str / posNotFound is -1, since W doesnt exist in str posNotFound = str.indexOf(W);,26,布尔值,布尔值（boolean）代表了“真与假”，它只有true和false两种合法值。 布尔值通常用在条件表达式中控制是否发生跳转，由此控制分支语句的执行。 JavaScript程序中不显式区分类型，其他类型的数据用在条件表达式中，都会被隐式地转化成布尔类型，一般非0，非null，非undefined的变量都会被转化成true，其他情况下就转化成f
16、alse，同样在需将布尔值转化成数字的表达式中，true和false会相应地转化成1和0。,27,函数,函数（function）是一个可执行的JavaScript代码段。与Java不同，函数在JavaScript中也可以作为一种数据类型。function functionName(parameter)return parameter; retVal = functionName(parameter);,28,函数的赋值,Declare function first, then use it as data function foo(e) return e; button.onclick = f
17、oo; / Notice: no parentheses after foo Function Literals button.onclick = function(e) return e; ; Create Function Objects button.onclick = new Function(“e“, “alert(1) “);,29,对象,对象（object）是已命名的数据的集合。其中那些已命名的数据，也就是对象的属性，通常被称之为对象的“域”（field）。 创建对象是我们可以用new关键字，也可以使用对象直接量赋值的方法。 new Operation o = new Objec
18、t(); o.x = 1; o.y = new Object(); o.y.z = 2; Object Literals o = x: 1, y: z:2;,30,数组,数组（array）是用数字索引的对象的集合。 数组和对象最大的区别就是对象靠非数值的名字来索引其中的数据，而数组靠的是数字下标。JavaScript中数组下标从0开始编号，用方括号运算符来访问其中的元素。例如Ai即表示数组A中第i+1个元素。 JavaScript数组中可以存放任何一种JavaScript的数据类型，而且不要求数组元素类型相同。如果数组元素类型是另一个的数组，就构成多维数组，这一点与Java语言中的数组很相似。
19、,31,数组的创建,/ Create Arrays var a = new Array(); var b = new Array(5); / Access Elements in Arrays a2 = 1.2; a3 = “hello“; b7 = a; document.write(a0); / Print undefined document.write(b73); / Print “hello“ var matrix = 1, 2, 3, “hello“, , true; document.write(matrix0); / Print 1,2,3,32,null和undefined,
20、对象类型中包含一个特殊值null，它表示“无对象”。 null是一个独一无二的值，有别于其他所有的值，通常被用来标记对象已失效。 同时表示“值缺失”还有一个比null更为通用的值undefined，JavaScript程序中任何一个未定义变量的值都是undefined，undefined同样有别于其他所有的值。 null通常是程序员赋给变量的，而undefined往往是系统提供的。,33,null和undefined,if (null = undefined)document.write(“null = undefined is true.“); elsedocument.write(“nul
21、l = undefined is false. “); if (null = undefined)document.write(“null = undefined is true. “); elsedocument.write(“null = undefined is false. “); / typeof null = object document.write(“typeof null is “ + (typeof null) + “.“); / typeof undefined = undefined document.write(“typeof undefined is “ + (ty
22、peof undefined) + “.“);,34,使用值和使用引用,35,自动类型转化,Primitive-to-Object Conversions new Boolean(false) new Number(123) new String(“hello”) Object-to-Primitive Conversions boolObj.valueOf(); numberObj.toString(); Explicit Type Conversions obj + “ / Converse to String obj 0 / Converse to Number !obj / Conve
23、rse to Boolean Number-to-String Conversions (123).toString() (123).toFixed(0) (3.1415926).toExponential(4) (3.1415926).toPrecision(4) String-to-Number Conversions parseInt(“123“) parseFloat(“3.14“),36,操作符,JavaScript的各个数据类型的直接量或变量还可以通过操作符相互连接，构成表达式，以此完成更为复杂的操作。JavaScript中操作符的结合性和优先级与Java中出现的操作符基本相同。,
24、37,JavaScript中的语法,基本语句和复合语句 变量声明和变量的作用域 分支语句 循环语句 异常语句（*） With语句,38,基本语句和复合语句,基本语句通常是一个表达式，其中赋值表达式是其最常见的形式（赋值用的等号也是一种操作符），基本语句以分号或换行符标志结束。 复合语句是包含其他语句的语句，这些语句通常由子语句再加上连接这些子语句的关键字组成，JavaScript规定子语句可以是一个简单语句或者语句块。语句块是由花括号括起来的语句的组成。JavaScript中的复合语句包含了分支语句，循环语句，异常捕获等控制语句。,39,变量声明和变量的作用域,尽管JavaScript中的变量
25、可以通过赋值引发的隐式声明代替显式声明，但是以这种方式声明的变量在某些时候可能会产生某些副作用，所以建议还是尽可能使用显式声明的变量。 在语句块中用var声明的变量是局部变量，一旦出了语句块的作用域，变量就会失效。,40,var i = 0; var j = “abc“; function killer() i = 5; var j = “def“;document.write(i); / Print 5document.write(j); / Print “def“ document.write(i); / Print 0 document.write(j); / Print “abc“ k
26、iller(); document.write(i); / Print 5 document.write(j); / Print “abc“,41,分支语句,JavaScript中有两种分支语句，if-else和switch语句。 这两种语句的语法与Java，C/C+中对应的语句完全一致,42,循环语句,JavaScript中有4种循环语句，while，do-while，for和for-in 这四种循环语句中除了for-in之外，在Java，C/C+中都出现过，语法规则也是相同，原先潜在的问题在JavaScript中同样也依旧存在，那就是死循环。,43,for-in,JavaScript中的f
27、or-in语句的作用是列举某个集合中所有可以枚举的元素。 使用for-in的最大好处就是你不需要知道目标对象或者数组究竟有多少元素，以及其内部结构是怎么样的，就可以遍历其所有可遍历元素（注意不是所有元素都是可遍历的）。FOR-IN Statement for ( var ite in document) str_result += document ite ; ,44,异常语句（*）,JavaScript中可以使用try-catch-finally语句实现对异常的捕获，用throw抛出异常对象。 异常语句是Javascript 1.5才有的新特性，在早期的浏览器中可能不支持，但目前常用的浏览器
28、 IE6+、NAV7+、Opera、FireFox 1.0+都支持该特性。,45,异常语句（*）续,TRY-CATCH-FINALLY Statement trythrow new Error( “Test Exception“ ) ; catch( e )document.writeln( e.name + “:“ + e.message); / Print “Error:Test Exception“ finallydocument.writeln( “Final here“); ,46,With语句,JavaScript中可以使用With语句来暂时修改变量的作用域链，由此减少大量的代码输
29、入。WITH Statement function Point ( x, y ) this.x = x;this.y = y; var newPoint = new Point( 1, 3 ); with (newPoint) var sum = x + y; ,47,常用的库函数示例,字符串（String） 正则表达式（RegExp） 日期（Date） 数学运算（Math） 数组（Array) 对象（Object） Eval函数,48,字符串（String）,搜索子串 如果String的indexOf()函数返回-1，则表示指定的字串没有找到。var str = “This is a For
30、bidden Word“; var forbidden_word_index = str.indexOf(“Forbidden“);,49,字符串（String）续,分割以固定符号分隔的字符串 var str = “This is a Forbidden Word“; var strTokens = str.split(“ “); / Split String by using SPACE as delimiter var strResult = “; for(var token in strTokens)strResult += strTokenstoken + “:“; alert(str
31、Tokens); / Display: This, is, a, Forbidden, Word alert(strResult); / Display: This:is:a:Forbidden:Word:,50,正则表达式（RegExp）,JavaScript中用/RegExp/option的形式表示正则表达式对象RegExp的直接量 我们假定E-Mail的合法格式为：以字母开头只包含字母的字符串 以字母开头只包含字母和数字的字符串.com或net var eMail = “usermicrosoft.cOm“; var pattern = /(a-zA-Z+)(a-zA-Zw*.)(com
32、|net)$/gi; if(!pattern.test(eMail)alert(“Invalid E-mail“);,51,日期（Date),JavaScript中Date对象内部表示为距离1970年1月1日午夜（UTC）的毫秒数，Date对象的valueOf()函数返回的就是这个值，所以计算日期的差可以直接使用减法（减法时自动类型转化会调用valueOf()函数将对象转化成数值） var birthday = new Date(2000, 1, 2); var today = new Date(); var diffDate = new Date(today - birthday); ale
33、rt(“You have lived for “ + (diffDate.getFullYear() - 1970) + “ years“);,52,数学运算（Math）,Math提供三角函数的角度单位是弧度。Math对象除了提供以上三角函数之外还提供了许多其他的常用数学函数（例如exp()，log()，max()，min()，pow()，sqrt()，abs()，round()，random()等）以及数学常量PI，E等。,53,数组（Array),Array对象的slice()函数返回指定数组指定位置的子数组。其中负数索引表示相对于数组最后一个元素的索引，即-1表示最后一个元素，-3表示倒
34、数第三个元素。但是在正常的数组访问过程中负数索引没有这样的含义。var arr = 1, 2, 3, 4, 5; var b1 = arr.slice(0, 3); / b1 = 1, 2, 3 var b2 = arr.slice(3); / b2 = 4, 5 var b3 = arr.slice(1, -1); / b3 = 2, 3, 4 var b4 = arr.slice(-3, -2); / b4 = 3,54,数组（Array) 续,Array对象的sort()函数可以接受一个函数类型的参数，并使用该函数比较两个元素所在位置的先后。示例中作为参数传入的函数如果返回负数则sort
35、()函数会把参数a所代表的元素排在参数b所代表的元素之前，否则就把参数b所代表的元素排在参数a所代表的元素之前。var a = 2, 1, 8, 22; a.sort(); / a = 1, 2, 22, 8, in alphabetical order a.sort(function(a, b) return a-b; ) / a = 1, 2, 8, 22, in numerical order,55,数组（Array) 续,Array对象的splice ()函数可以对数组的指定片段进行切割操作，它不同于slice()函数，它会对原数组进行修改，并将切除的数组作为参数返回。splice()
36、的第一个参数表示切割的开始位置的索引值，第二个位置表示切除元素的个数，若省略第二个元素则会切除从开始位置起到数组末尾的所有元素。var a = 1, 2, 3, 4, 5, 6, 7, 8; a.splice(4); / return 5, 6, 7, 8, a = 1, 2, 3, 4 a.splice(1, 2); / return 2, 3, a = 1, 4 a.splice(1, 1); / return 4, a = 1,56,对象（Object）,/ Wheel Object function wheelToString() return “Wheel“ + this.id +
37、“-“ + this.counter + “n“; function Wheel(id)this.id = id; this.counter = Wheel.prototype.count+; / Set Global Properties of Wheel Object new Wheel(); / This forces the prototype object to be created in early version Wheel.prototype.count = 1; Wheel.prototype.toString = wheelToString;,57,function car
38、ToString()/ Car Objectvar tmp = “This is a Car“ + this.id + “ with “ + this.wheels.length + “n“;for(var i = 0;i this.wheels.length;i+)tmp += this.wheelsi.toString();return tmp function Car(id, numberOfWheels)this.id = idthis.wheels = new Array(3);for(var i = 0;i numberOfWheels;i+)this.wheelsi = new
39、Wheel(id); ,58,/ Set Global Properties of Car Object new Car();/ This forces the prototype object to be created in early version Car.prototype.toString = carToString; / Create a BMW instance of Car Object with 3 Wheels alert(new Car(“BMW“, 3).toString();,59,Object 样例说明,这个样例中我们定义并创建一个可以包含N个Wheel对象的Ca
40、r对象。其中我们通过给prototype中toString()函数的赋值实现了对于默认toString()函数的重载。同时由于prototype在同类对象中只有一份实体，所以我们通过为Wheel.prototype添加数值属性count的方式创建了一个OO概念中的类属性（类似于Java中的static变量）。 注意样例中出现的函数内都出现了this关键字,60,Eval函数,JavaScript中的eval()函数可以把作为参数的字符串解释为程序并执行，这是解释型语言特有的库函数。样例中通过eval()函数将拼凑起来的三个字符串的最终结果解释成document.forms对象，就好像我们直接在
41、程序中写了document.forms一样。通过这种方法，我们可以变通地实现关联数组的功能，即通过以实现不确定的字符串形式存在的属性名访问属性。 alert(eval(“document“ + “.“ + “forms“); alert(document“forms“);,61,Eval函数(续),JavaScript中的eval()函数还能进一步应用在自动创建程序代码。我们可以及时产生新的JavaScript程序段的字符串形式，然后通过eval()函数执行新产生的代码。样例中我们生成一个新的temp函数用于计算输入参数的平方值，然后又生成了语句对其进行调用。最后一句语句能够正常执行说明通过eval()函数我们可以在程序的任意位置动态地插入我们期望的任意代码 functionStr = “function temp(x) return x * x; “ twoAlertStr = “alert(1); alert(temp(2)“; eval(functionStr + twoAlertStr); alert(temp(9);,62,Best way to Programming,讨论 在计算机上练习,63,小结,JavaScript JavaScript词法 JavaScript语法 如何学习语言,
