JavaScript基础教程.PPT

《JavaScript基础教程.PPT》由会员分享，可在线阅读，更多相关《JavaScript基础教程.PPT（107页珍藏版）》请在金锄头文库上搜索。

1、 WebWeb基础之一基础之一JavaScriptJavaScript基础基础2024/8/211目标理解什么是JavaScript如何将JavaScript嵌入到HTML中理解变量、数据类型和运算符掌握if-else和switch语句掌握函数掌握内置对象2024/8/212什么是JavaScript 脚本程序：嵌入在HTML文件中，提供了和用户进行交互的能力； 常见的脚本语言：VBScript，javascriptJavaScript是NetScape公司的产品提供用户交互 动态更改内容 数据验证2024/8/213将JavaScript嵌入网页 可以将JavaScript语句插入HTML文

2、档，方式如下：使用标签将语句嵌入文档将JavaScript源文件链接到HTML文档中将脚本代码作为HTML标签的属性值2024/8/214使用Script标签JavaScript代码document.write(欢迎来到JavaScript世界);尽情享受学习的快乐!脚本代码设置语言2024/8/215使用外部JS文件外部JavaScript文件可以链接到HTML文档中SCRIPT标签的SRC（源文件）属性可用于包括此外部文件2024/8/216使用外部JS文件JavaScript 代码代码 (test.htm)使用外部文件以上文本是通过访问外部JavaScript文件显示的document.

3、write(喂！你好吗喂！你好吗?)JavaScript 代码代码 (test.js )2024/8/217将脚本代码作为HTML标签的属性值在href属性中必须指明是javascript当前时间在onclick事件属性中可以不用指明是javascript 把script脚本作为属性值.html 2024/8/218Javascript的基本格式区分大小写以；作为语句结束符号(;可加可不加)以/或/*/组为注释Javascript的数据类型：基本类型：存储在栈引用类型：是存储在堆中的对象。2024/8/219Javascript是弱类型的语言字符串地址null布尔值数字undefined对象对

4、象对象对象对象栈堆2024/8/2110Javascript的数据类型数据类型数据类型说说 明明示示 例例数字型整数或实数。JavaScript中的数字不区分整型和浮点型，所有的数字都是以浮点型来表示的487,25.95逻辑型或布尔型执行逻辑运算。即代表真的“true”和代表假的“false”true或false字符串型字符串通常都是用单引号或双引号括起来的。如果在字符串中包括着特殊字符，可以使用转义字符来代替。“Hello”空特殊关键字，表示不存在的值。nullundefined也是一个特殊的数据类型，只有定义了一个变量但没有为该变量赋值、使用了一个并未定义的变量、或者是使用了一个不存的对象

5、的属性时，JavaScript才会返回undefined。2024/8/2111变量Javascript采用弱类型的变量形式，即在声明时无需指定变量类型，在赋值的时候自动指定；变量名必须以字母或下划线（_）开头变量可以包含数字、从A至Z的大小写字母JavaScript区分大小写，即变量myVar、myVAR和myvar是不同的变量2024/8/2112声明变量 var a; “var” 用于声明变量的关键字 “a” 变量名同时声明和初始化变量var a= 10;a = 10;声明变量声明多个变量var x, y, z = 10;赋值不声明变量，直接使用x = 10;2024/8/2113typ

6、eof运算符号Typeof对变量的运算结果为以下之一：UndefinedBooleanNumberStringObjecttypeof(null)结果为object，此为历史遗留的错误。观察以下alert的结果variNum;alert(typeof(null);alert(typeof(iNum);iNum=10;alert(typeof(iNum);varbFlag=true;alert(typeof(bFlag);varaStu=newArray();alert(typeof(aStu);alert(typeof(hello);2024/8/2114观察以下运行结果var otemp ;

7、/var otemp2 ;alert(typeof(otemp) ;alert(typeof(otemp2) ;alert(otemp=undefined) ;alert(otemp2=undefined) ;/会导致错误，因为没有定义过的变量只有typeof运算符可以使用，其他运算符都会导致错误。2024/8/2115声明变量使用变量var x;x=prompt(淘宝网竟拍，请出一口价,1);document.write(拍卖价格+x+)/+用来连接多个字符串document.write(恭喜您，您以最高价拍卖成功！);alert(欢迎下次光临！);定义变量赋值输出prompt(“提示信息”

8、,”默认值”)将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。2024/8/2116变量a、b和c只能在其各自的函数中被访问变量的作用域脚本脚本函数function1局部变量a函数function2局部变量b函数function3局部变量c可由函数1、函数2和函数3访问全局变量gg2024/8/2117转义字符字字 符符说说 明明示示 例例b退格符alert(“这是第一句b这是第二句”)f换页符alert(“这是第一局f这是第二句”)n换行符alert(“这是第一局n这是第二句”)r回车符alert(“这是第一局r这是第二句”)t制表符alert(“这是第一局

9、t这是第二句”)2024/8/2118varx=100;vary;varz;document.write(竞拍SONY数码相机600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+y;alert(您最终的出价n+z+$);/”n”用于换行显示Prompt函数返回输入的字符串“+”号的用法-110020?bug2002024/8/2119varx=100;vary;varz;document.write(竞拍SONY数码相机600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+parseFloat(y);alert(您最终的出价n+z+$);/”n”用于换

10、行显示parseFloat()函数将字符串转换为float数据parseInt()函数将字符串转换为int数据如果转换失败，返回NaN值(notanumber)使用isNaN(z)判断是否为NULL“+”号的用法-22024/8/2120类型转换转换为字符串在javascript中数字、字符串和boolean都是伪对象，因此他们都有toString方法。varsColor=red;alert(sColor.toString();varbFound=true;alert(bFound.toString();variNum1=10;variNum2=10.6;alert(iNum1);alert(

11、iNum2);alert(iNum1.toString(2);alert(iNum1.toString(8);alert(iNum1.toString(16);alert(iNum2.toString(8);alert(iNum2.toString(16);2024/8/2121类型转换转换为数字parseInt和parseFloat：其解析方式为从位置0开始查看直到找到无法解析的字符。variNum1=parseInt(123abc);variNum2=parseInt(0xa);variNum3=parseInt(013);variNum4=parseInt(blue);alert(iNu

12、m1);alert(iNum2);alert(iNum3);alert(iNum4);variNum1=parseInt(10,2);variNum2=parseInt(10,8);variNum3=parseInt(10,16);alert(iNum1);alert(iNum2);alert(iNum3);2024/8/2122强制类型转换Boolean(value)Number(value)String(value)varb1=Boolean();varb2=Boolean(hello);varb3=Boolean(100);varb4=Boolean(null);varb5=Boolea

13、n(0);varb6=Boolean(newObject();alert(b1=+b1);alert(b2=+b2);alert(b3=+b3);alert(b4=+b4);alert(b5=+b5);alert(b6=+b6);非0、非空串、非空对象为true，其他false2024/8/2123强制类型转换Boolean(value)Number(value)String(value)alert(Number(false)=+Number(false);alert(Number(true)=+Number(true);alert(Number(undefined)=+Number(unde

14、fined);alert(Number(null)=+Number(null);alert(Number(3.6)=+Number(3.6);alert(Number(3.3.3)=+Number(3.3.3);alert(Number(newObject()=+Number(newObject();Number转换和parseInt，parseFloat转换的不同之处在于Number要求整个值都要有效2024/8/2124引用类型Object类与java中的Object类相似具体有：constructor，prototype，tostring，valueof等方法NewObject()等价于

15、;2024/8/2125属性名属性值name“zhangsan”age123getNamefunction()alert(this.name);从JavaScript的内部实现的角度来看问题，一个JavaScript对象就是属性集的组合。内部如何组织这些属性集的呢？使用类似于java中的Map?为什么使用for循环遍历属性的时候，没有找到constructor属性2024/8/2126引用类型Boolean：一般不用Number为基本数字类型的包装类有用的方法varoNum=newNumber(99);alert(oNum.toFixed(2);oNum=newNumber(999);aler

16、t(oNum.toExponential(2);oNum=newNumber(9999);alert(oNum.toPrecision(6);2024/8/2127运算符运算符说明示例+加a = 5 + 8-减a = 8 - 5/除a = 20 / 5*乘a = 5*19%取模两个数相除的余数10 % 3 = 1+一元自加。该运算符带一个操作数，将操作数的值加1。返回的值取决于 + 运算符位于操作数的前面或是后面将返回x 自加运算后的值。x+将返回x自加运算前的值- -一元自减。该运算符只带一个操作数。返回的值取决于-运算符位于操作数的前面或是后面-x将返回 x自减运算后的值。x-将返回 x自

17、减运算前的值2024/8/2128算术运算符 运算符示例.html 2024/8/2129比较运算符比较运算符2-1运算符运算符说说 明明示示 例例= = 等于。如果两个操作数相等，则返回真。a = = b!=不等于。如果两个操作数不相等，则返回真。Var2 != 5大于。如果左边的操作数大于右边的操作数，则返回真。Var1 var2小于。如果左边的操作数小于右边的操作数，则返回真。Var2 var1=小于等于。如果左边的操作数小于或等于右边的操作数，则返回真。Var2 = 4Var2 =大于等于。如果左边的操作数大于或等于右边的操作数，则返回真。Var1 = 5Var1 = var22024

18、/8/2130运算符逻辑运算符运算符运算符值值说说 明明与( &)expr1 & expr2只有当expr1和expr2同为真时，才返回真。否则，返回假。或( | )expr1 | expr2如果其中一个表达式为真，或两个表达式同为真，则返回真。否则，返回假。非(!)!expr如果表达式为真，则返回假。如果为假，则返回真。2024/8/2131等号运算符规则和！在进行运算之前都会进行类型转换，规则如下：如果一个运算数是Boolean则在检查相等之前先把他转换为数字值。False转换为0，true转换为1如果一个运算数是字符串，另一个是数字，则在检查相等之前先把字符串转换为数字值。如果一个运算数

19、是字符串，另一个是对象，则在检查相等之前先把对象调用toString方法转换为字符串。如果一个运算数是对象，另一个是数字，则在检查相等之前先把对象转换为数字值。值null和undefined相等如果两个都是对象，则比较引用值alert(null=undefined);alert(5=5);alert(false=0);2024/8/2132全等号在作比较之前，不作类型转换alert(null=undefined);alert(5=5);alert(false=0);2024/8/2133条件语句用于测试条件。if(条件)JavaScript代码;语法：语法：if语句如果要执行多个语句，必须将这

20、些语句放在一对大括号()内。但如果只要执行一个语句，则可以省略大括号2024/8/2134functioncalcu()varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;if(numb1!=)&(numb2!=)vartotal=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;if(total500)&(total1000)&(total2000)alert(购买总价超过2000n请直接与贵宾台联系！);.其他代码略，同

21、上例2024/8/2135ifelse语句2-1if(条件)/JavaScript代码;else/JavaScript代码;语法：语法：2024/8/2136switch 语句switch(表达式)case常量1:JavaScript语句;break;case常量2:JavaScript语句;break;.default:JavaScript语句;语法：语法：swtich示例.html2024/8/2137数组声明数组 var数组名 = newArray(数组大小); 例： var emp = newArray(3)添加元素 emp0=“AA;emp1=“BB;emp2=“CC;AABBCCe

22、mp 也可以声明数组并赋初值：例：varemp=newArray(“AA”，“BB”，“CC”)；2024/8/2138使用数组varemp=newArray(3);emp0=RyanDias;emp1=GrahamBrowne;emp2=DavidGreene;document.write(数组emp中的数据为:);document.write(emp0+);document.write(emp1+);document.write(emp2+);数组2024/8/2139数组常用属性 length ：返回数组中元素的个数 ? 应该是最大下标值+1常用方法方方 法法说说 明明join将数组中的

23、元素组合成字符串reverse颠倒数组元素的顺序，使第一个元素成为最后一个，而最后一个元素成为第一个sort对数组元素进行排序2024/8/2140varemp=newArray(3);emp0=RyanDias;emp1=GrahamBrowne;emp2=DavidGreene;emp.sort();document.write(“排序结果是：);document.write(emp0+);document.write(emp1+);document.write(emp2+);varx=emp.join();document.write(x);数组排序2024/8/2141循环for循环d

24、o-whilewhile For循环演示.htmlDo-while循环演示.html2024/8/2142函数定义函数：function函数名( 参数1,参数2， ) 语句; 调用函数：函数调用一般和表单元素的事件一起使用，调用格式为：事件名“函数名” ;functionsum(one,two)varresult=one+two;returnresult;表示单击此按钮时，调用函数sum( )执行2024/8/2143JavaScript函数内置函数内置函数 eval函数：用于计算字符串表达式的值isNaN函数：用于验证参数是否为NaN（非数字）JavaScript代码varstr1=prom

25、pt(“输入一个表达式，我给您计算,1+1);varresult=eval(str1);document.write(str1+=+result);varx=prompt(输入一些数据,0);if(isNaN(x)alert(x+不是一个数字);elsealert(x+是一个数字);Eval示例.html2024/8/2144函数的应用num1num2result函数.html2024/8/2145Javascript函数特性无重载但在javascript中定义两个名字相同的函数不会引发错误。他将会调用后定义的函数。functiondoAdd(iNum)alert(iNum+1000);fun

26、ctiondoAdd(iNum)alert(iNum+100);doAdd(100);2024/8/2146Javascript函数特性利用arguments模拟重载Javascript不会验证传递给函数的参数的个数是否等于函数定义的参数个数。开发者定义的函数在调用时可以接受任意的参数，不会引发错误。遗漏的参数以undefined传递给函数，多余的参数被忽略，但可以使用arguments数组接受。functionsayHello()if(arguments0=exit)return;alert(arguments0);sayHello();sayHello(zhangsan);sayHello

27、(exit);2024/8/2147Javascript函数特性利用arguments模拟重载functiondoAdd()if(arguments.length=1)alert(arguments0);elseif(arguments.length=2)alert(arguments0+arguments1);doAdd(30);doAdd(30,30);2024/8/2148Function类Varfunction_name=newFunction(arg1,arg2,argN,function_body);例：varsayHello=newFunction(sName,alert(Hel

28、lo+sName);sayHello(zhangsan);2024/8/2149借助Function来理解函数vardoAdd=newFunction(iNum,alert(iNum+100);doAdd=newFunction(iNum,alert(hello+iNum);doAdd(1);由以上可见，函数名只是指向函数对象的一个引用值，同样的，我们也可以使用不同的变量指向同一个函数。2024/8/2150借助Function来理解函数vardoAdd=newFunction(iNum,alert(iNum+100);doAdd=newFunction(iNum,alert(hello+iN

29、um);varotherAdd=doAdd;doAdd(1);otherAdd(9);2024/8/2151把函数作为参数传给其他函数varsayHello=newFunction(sName,sMessage,alert(Hello+sName+,+sMessage);functioncallOtherFunc(fnCall,vArg1,vArg2)fnCall(vArg1,vArg2);callOtherFunc(sayHello,“zhangsan”,“good”);alert(callOtherFunc.toString();2024/8/2152函数：指针functionmyFunc

30、tion()alert(Old);myFunction();/输出OldmyFunction=function()alert(New);myFunction();/输出New可见，函数的名字相当于一个指针2024/8/2153函数：指针functionmyFunction()alert(Old);varsavedFuncion=myFunction;myFunction=function()alert(New);myFunction();/输出NewsavedFuncion();/输出Old2024/8/2154基于对象的JavascriptJavaScript中的对象是由属性(propert

31、ies)和方法(methods)两种基本的元素的构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。对象要真正地被使用，可采用以下几种方式获得：引用JavaScript内部对象；由浏览器环境中提供；创建新对象。2024/8/2155Javascript的内部对象Object、Array、Function、String、Boolean、Number、Date、RegExp、Math、Global、Error、EvalError、RangeError、ReferenceError、SyntaxError

32、、TypeError、URIError2024/8/2156对象操作语句for.in格式如下：For（属性名in已知对象名）优点：无需知道对象中属性的个数即可进行操作。例：FunctionshowData(object)for(varX=0;X30;X+)document.write(objecti)；FunctionshowData(object)for(varxinobject)document.write(objecti)；2024/8/2157对象操作语句with语句在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。with(object).所有在with语句后的花

33、括号中的语句，都是在后面object对象的作用域的。with(o)name=李四;age=100;height=12.3;2024/8/2158再论数组/定义方法1varaColors=newArray();aColors0=red;aColors1=green;aColors2=blue;for(varxinaColors)alert(aColorsx);/定义方法2varaColors2=newArray(red,green,blue);/定义方法3varaColors3=red,green,blue;2024/8/2159再论数组数组的大小是动态变化的varaColors3=red,gr

34、een,blue;aColors6=gray;for(varx=0;xaColors.length;x+)alert(aColorsx);for(varxinaColors)alert(aColorsx);2024/8/2160再论数组数组的toString方法和valueOf方法varaColors3=red,green,blue;aColors10=gray;alert(aColors.toString();字符串和数组之间的转换：splitvaraColors3=red,green,blue;varsString=aColors.toString();alert(sString);var

35、aColors4=sString.split(,);for(vari=0;iaColors4.length;i+)alert(aColors4i);2024/8/2161再论数组Javascript中，可以把数组看成是一个栈varaColors=newArray();aColors.push(red);aColors.push(green);aColors.push(blue);for(vari=0;iaColors.length;i+)alert(aColorsi);varsColor=aColors.pop();alert(sColor:+sColor);2024/8/2162再论数组结合

36、shift()和unshift()，以及push和pop，可以把数组看成是一个队列Shift：删除数组中的第一个元素Unshift：把一个元素放在数组的第一个位置varqueue=red,green,blue;queue.push(white);alert(queue.toString();queue.shift();alert(queue.toString();queue.unshift(yellow);alert(queue.toString();queue.sort();alert(queue.toString();queue.reverse();alert(queue.toString

37、();2024/8/2163String 对象创建字符串有两种不同方法：使用var语句varnewstr=“这是我的字符串创建String对象varnewstr=newString (“这是我的字符串) 2024/8/2164String 对象名名 称称说说 明明属性length返回字符串的长度 方法big()增大字符串文本 blink()使字符串文本闪烁（IE 浏览器不支持）bold()加粗字符串文本 fontcolor()确定字体颜色 italics()用斜体显示字符串 indexOf(“子字符串”，起始位置)查找子字符串的位置strike()显示加删除线的文本 sub()将文本显示为下标

38、 toLowerCase()将字符串转换成小写 toUpperCase()将字符串转换成大写 语法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位置，如果没找到，返回1例如：varxvary=“abcdefg”;x=y.indexOf(“c”,0);/返回结果为2，起始位置是02024/8/2165functioncheckEmail()vare=document.myform.email.value;if(e.length=0)/检测长度是否为0，即是否为空alert(电子邮件不能为空!);return;if(e.indexOf(,0)=-1)/检测是否包含”符号a

39、lert(电子邮件格式不正确n必须包含符号！);return;if(e.indexOf(.,0)=-1)/检测是否包含”.”符号alert(电子邮件格式不正确n必须包含.符号！);return;document.write(恭喜您！，注册成功！);检查电子邮件emailemail是否包含“”和”.”String 对象返回结果-1表示没找到“”字符字符串对象.htm2024/8/2166Math 对象名称名称 说说 明明属性PI的值，约等于3.1415LN1010的自然对数的值，约等于2.302EEuler的常量的值，约等于2.718。Euler的常量用作自然对数的底数abs(y)返回y的绝对值

40、sin (y) 返回y的正弦，返回值以弧度为单位。cos (y)返回y的余弦，返回值以弧度为单位tan (y)返回y的正切，返回值以弧度为单位min (x, y)返回x和y两个数中较小的数max (x, y)返回x和y两个数中较大的数random返回0-1的随机数方法round (y)四舍五入取整sqrt (y)返回y的平方根Math.random( ) ：产生：产生01的随机小数的随机小数Math.round( )：四舍五入取整，如：四舍五入取整，如9.34 取整为取整为92024/8/2167自动刷新document.write(2秒自动刷新，随机显示图片);vari=0;i=Math.r

41、ound(Math.random()*8+1);document.write();Math对象假定随机产生的数字i=3，上述代码即为：显示第三幅图片（3.jpg）如何实现每隔2秒刷新网页Math.round(Math.random()*8+1)产生1-9的数字2024/8/2168Date对象Date对象存储的日期为自1970年1月1日00:00:00以来的毫秒数var日期对象=newDate(年、月、日等参数)例：varmydate=newDate(“July29,1998,10:30:00”)如果没有参数，表示当前日期和时间例：vartoday=newDate() 2024/8/2169D

42、ate对象Data方法的分组：方法分组方法分组说说 明明 setxxx这些方法用于设置时间和日期值getxxx 这些方法用于获取时间和日期值Toxxx这些方法用于从 Date对象返回字符串值parsexxx & UTCxx这些方法用于解析字符串2024/8/2170Date对象用作Date方法的参数的整数：值值整整 数数 Seconds 和和 minutes0 至至 59 Hours0 至至 23 Day0 至至 6（星期（星期几）几） Date1 至至 31（月份中的天数）（月份中的天数） Months0 至至 11（一月（一月至十二月）至十二月） 2024/8/2171Date对象Set方

43、法：方法方法说明说明setDate设置Date对象中月份中的天数，其值介于1至31之间。setHours设置Date对象中的小时数，其值介于0至23之间。setMinutes设置Date对象中的分钟数，其值介于0至59之间。setSeconds设置Date对象中的秒数，其值介于0至59之间。setTime设置Date对象中的时间值。setMonth设置Date对象中的月份，其值介于1至12之间。2024/8/2172Date对象Get方法：方法方法说明说明getDate返回Date对象中月份中的天数，其值介于1至31之间getDay返回Date对象中的星期几，其值介于0至6之间getHours

44、返回Date对象中的小时数，其值介于0至23之间getMinutes返回Date对象中的分钟数，其值介于0至59之间getSeconds返回Date对象中的秒数，其值介于0至59之间getMonth返回Date对象中的月份，其值介于0至11之间getFullYear返回Date对象中的年份，其值为四位数getTime返回自某一时刻（1970年1月1日）以来的毫秒数2024/8/2173Date对象方方 法法说说 明明 ToGMTString使用格林尼治标准时间(GMT)数据格式将Date对象转换成字符串表示ToLocaleString使用当地时间格式将Date对象转换成字符串表示To方法：Pa

45、rse方法和UTC方法方方 法法说说 明明Date.parse (date string )用日期字符串表示自1970年1月1日以来的毫秒数Date.UTC (year, month, day, hours, min., secs. )Date对象中自1970年1月1日以来的毫秒数2024/8/2174varnow=newDate();varhour=now.getHours();if(hour=0&hour12&hour18&hour24)document.write(晚上好!);document.write(今天日期:+now.getYear()+年“+(now.getMonth()+1)

46、+月+now.getDate()+日);document.write(现在时间:+now.getHours()+点+now.getMinutes()+分);Date对象获得当前日期和时间获得小时，即当前是几点判断上午、下午还是晚上月份数字011，注意1日期对象 1.htm2024/8/2175Date对象setTimeout的用法：setTimeout（“调用的函数”,”定时的时间”）例：varmyTimesetTimeout（”disptime()”,1000）;clearTimeout（myTime）;本例的时间可以采用定时显示，使用定时器函数，每隔1秒调用disptime()函数显示时间

47、每隔1000毫秒调用函数disptime()执行关闭定时器2024/8/2176Date对象10-8JavaScript 代码functiondisptime()vartime=newDate();/获得当前时间varhour=time.getHours();/获得小时、分钟、秒varminute=time.getMinutes();varsecond=time.getSeconds();varapm=AM;/默认显示上午:AMif(hour12)/按12小时制显示hour=hour-12;apm=PM;if(minute10)/如果分钟只有1位，补0显示minute=0+minute;if(

48、second10)/如果秒数只有1位，补0显示second=0+second;document.myform.myclock.value=hour+:+minute+:+ second+apm;varmyTime=setTimeout(disptime(),1000);无边框的文本框myclock使用定时器函数，每隔1秒调用disptime()函数刷新显示获得小时、分钟、秒根据12小时制调整时间和AM/PM标志确保分钟和秒显示位数为2位varmyTime=setTimeout(disptime(),1000);设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示2

49、024/8/2177Date对象设置样式：无边框的文本框Onload()事件，页面加载就调用函数：disptime（显示时间）2024/8/2178DatevardDate=newDate();alert(dDate.toString();alert(dDate.toDateString();alert(dDate.toLocaleDateString();alert(dDate.toLocaleTimeString();dDate=newDate(2007,7,7);2024/8/2179thisthis这个词在function中有特别的意义。它指向了调用函数的那个对象。varoCar=ne

50、wObject();oCar.color=red;oCar.showColor=function()alert(this.color);oCar.showColor();2024/8/2180functionshowColor()alert(this.color);varoCar1=newObject();oCar1.color=red;oCar1.showColor=showColor;varoCar2=newObject();oCar2.color=blue;oCar2.showColor=showColor;oCar1.showColor();oCar2.showColor();this

51、这个词在function中有特别的意义。它指向了调用函数的那个对象。2024/8/2181this关键字functionEmployee(name,salary,mySupervisor)this.name=name;this.salary=salary;this.supervisor=mySupervisor;varboss=newEmployee(John,200);varmanager=newEmployee(Joan,50,boss);varteamLeader=newEmployee(Rose,50,boss);alert(manager.supervisor.name+isthes

52、upervisorof+manager.name);alert(manager.name+ssupervisoris+manager.supervisor.name);2024/8/2182定义类或对象的方法工厂方法前提：对象的属性可以在对象对象创建后动态定义。var oCar = new Object() ;oCar.color = red ;oCar.doors = 4 ;oCar.mpg = 20 ;oCar.showColor = function () alert(this.color) ;oCar.showColor(oCar) ;function createCar() var

53、oCar = new Object() ;oCar.color = red ;oCar.doors = 4 ;oCar.mpg = 20 ;oCar.showColor = function () alert(this.color) ; return oCar ;var oCar = createCar() ;oCar.showColor() ;2024/8/2183functioncreateCar(sColor,iDoors,iMpg)varoCar=newObject();oCar.color=sColor;oCar.doors=iDoors;oCar.mpg=iMpg;oCar.sho

54、wColor=function()alert(this.color);returnoCar;varoCar=createCar(black,5,30);oCar.showColor();functionshowColor()alert(this.color);functioncreateCar(sColor,iDoors,iMpg)varoCar=newObject();oCar.color=sColor;oCar.doors=iDoors;oCar.mpg=iMpg;oCar.showColor=showColor;returnoCar;varoCar=createCar(yellow,3,

55、6);oCar.showColor();2024/8/2184函数示例6.html函数示例7.html2024/8/2185定义类或对象的方法构造函数方式function Car(sColor,iDoors,iMpg) this.color = sColor ;this.doors = iDoors ;this.mpg = iMpg ;this.showColor = function ()alert(this.color) ;var oCar1 = new Car(red,5,6) ;var oCar2 = new Car(blue,8,9) ;oCar1.showColor() ;oCar

56、2.showColor() ;alert(typeof Car) ;alert(typeof new Car() ;当这个函数创建的时候有一个同名的对象也被创建。2024/8/2186函数：原型functionFish(name,color)this.name=name;this.color=color;Fish.prototype.livesIn=water;Fish.prototype.price=20;varfish1=newFish(mackarel,gray);varfish2=newFish(goldfish,orange);varfish3=newFish(salmon,whit

57、e);for(vari=1;i=3;i+)varfish=eval(fish+i);/只是取得指向这条鱼的指针alert(fish.name+,+fish.color+,+fish.livesIn+,+fish.price);输出：mackarel,gray,water,20goldfish,orange,water,20salmon,whitewater,20当一个对象被创建时，这个构造函数将会把它的属性prototype赋给新对象的内部属性_proto_。这个_proto_被这个对象用来查找它的属性。2024/8/2187用prototype给对象添加函数functionEmployee(

58、name,salary)this.name=name;this.salary=salary;Employee.prototype.getSalary=functiongetSalaryFunction()returnthis.salary;Employee.prototype.addSalary=functionaddSalaryFunction(addition)this.salary=this.salary+addition;2024/8/2188用prototype给对象添加函数varboss1=newEmployee(Joan,200000);varboss2=newEmployee(

59、Kim,100000);varboss3=newEmployee(Sam,150000);输出：alert(boss1.getSalary();/输出200000alert(boss2.getSalary();/输出100000alert(boss3.getSalary();/输出1500002024/8/2189定义类或对象的方法原型方式function Car(sName) Car.prototype.name = sName ;Car.prototype.showName = function () alert(this.name) ;var oCar = new Car(benz) ;

60、oCar.showName() ;var yourCar = new Car(haha) ;yourCar.showName() ;oCar.showName() ; /输出”haha”每一个构造函数都有一个属性叫做原型(prototype)。这个属性非常有用：为一个特定类声明通用的变量或者函数。原型方式的缺点：1、无法参数化的构造对象；2、修改一个引用属性会影响另一个对象2024/8/2190定义类或对象的方法原型方式function Car() ;Car.prototype.color = red ;Car.prototype.doors = 4 ;Car.prototype.mpg =

61、23 ;Car.prototype.drivers = new Array(mike,tom) ;Car.prototype.showColor = function () alert(this.color) ;var oCar1 = new Car() ;var oCar2 = new Car() ;oCar1.showColor() ;oCar2.showColor() ;alert(oCar2.drivers) ;oCar1.drivers.push(jim) ;/改变oCar1.drivers,结果确把oCar2也改变了alert(oCar2.drivers) ; 每一个构造函数都有一

62、个属性叫做原型(prototype)。这个属性非常有用：为一个特定类声明通用的变量或者函数。原型方式的缺点：1、无法参数化的构造对象；2、修改一个引用属性会影响另一个对象2024/8/2191定义类或对象的方法混合构造函数和原型方式function Car(sColor,iDoors,iMpg,aDrivers) this.color = sColor ;this.doors = iDoors ;this.mpg = iMpg ;this.drivers = aDrivers ;Car.prototype.showColor = function () alert(this.color) ;v

63、ar oCar1 = new Car(red,5,3,new Array(Tom,Jack) ;var oCar2 = new Car(blue,5,3,new Array(Mike,Jim) ;oCar1.showColor() ;oCar2.showColor() ;alert(oCar2.drivers) ;oCar1.drivers.push(Jim) ;alert(oCar2.drivers) ; 构造函数的方式定义属性；用原型方式定义方法；推荐使用！2024/8/2192定义类或对象的方法动态原型方式function Car(sColor,iDoors,iMpg,aDrivers)

64、 this.color = sColor ;this.doors = iDoors ;this.mpg = iMpg ;this.drivers = aDrivers ;if (typeof Car._initialized = undefined) Car.prototype.showColor = function () alert(this.color) ;Car._initialized = true ;var oCar1 = new Car(red,5,3,new Array(Tom,Jack) ;var oCar2 = new Car(blue,5,3,new Array(Mike

65、,Jim) ;oCar1.showColor() ;oCar2.showColor() ;alert(oCar2.drivers) ;oCar1.drivers.push(Jim) ;alert(oCar2.drivers) ; 2024/8/2193进一步认识prototype问题：资源耗费太大varstr=hello;str+=world;因此：优点是资源耗费较小，但是语义不够清楚。vararr=newArray();arr0=hello;arr1=world;varstr1=arr.join();alert(str1);2024/8/2194进一步认识prototype function

66、 StringBuffer() this._strings = new Array() ; StringBuffer.prototype.append = function (str) this._strings.push(str) ; StringBuffer.prototype.toString = function () return this._strings.join() ; var buffer = new StringBuffer() ; buffer.append(hello ) ; buffer.append(world) ; alert(buffer.toString()

67、;2024/8/2195进一步认识prototype为本地类创建新的方法Number.prototype.toHexString=function()returnthis.toString(16);variNum=15;alert(iNum.toHexString();2024/8/2196通过对象直接初始化通过对象直接初始化.html2024/8/2197自定义对象嵌套自定义对象嵌套.html2024/8/2198继承-对象冒充function ClassA(sColor) this.color = sColor ; /使用this关键字给属性和方法赋值this.showColor = fu

68、nction () alert(this.color) ;function ClassB(sColorr) this.newMethod = ClassA ;/注意这不是把ClassA看成构造函数，而是看成了普通函数this.newMethod(sColor) ;/调用时，ClassA中的this实际上是ClassB的对象delete this.newMethod ;var b = new ClassB(red) ;b.showColor() ;2024/8/2199继承-对象冒充function ClassA(sColor) this.color = sColor ; /使用this关键字给

69、属性和方法赋值this.showColor = function () alert(this.color) ;function ClassB(sColor,sName) this.newMethod = ClassA ;/注意这不是把ClassA看成构造函数，而是看成了普通函数this.newMethod(sColor) ;/调用时，ClassA中的this实际上是ClassB的对象delete this.newMethod ;this.name = sName ;this.sayName = function () alert(this.name) ;var b = new ClassB(r

70、ed,Tom) ;b.showColor() ;b.sayName() ;2024/8/21100练习编写两个类：手机类，其中有颜色，品牌，价格等属性，有打电话的方法；相机类，其中有颜色，品牌，象素，价格等属性，有拍照的方法；编写一个拍照手机的类，继承以上两个类（即实现了多重继承）2024/8/21101继承call方法function ClassA(sColor) this.color = sColor ; /使用this关键字给属性和方法赋值this.showColor = function () alert(this.color) ;function ClassB(sColor,sNam

71、e) ClassA.call(this,sColor) ;/call方法的第一个参数this表明是ClassB的对象this.name = sName ;this.sayName = function () alert(this.name) ;var b = new ClassB(red,Tom) ;b.showColor() ;b.sayName() ;2024/8/21102继承apply方法function ClassA(sColor) this.color = sColor ; /使用this关键字给属性和方法赋值this.showColor = function () alert(t

72、his.color) ;function ClassB(sColor,sName) ClassA.apply(this,new Array(sColor) ;this.name = sName ;this.sayName = function () alert(this.name) ;var b = new ClassB(red,Tom) ;b.showColor() ;b.sayName() ;2024/8/21103继承原型链functionClassA()this.color=;this.showColor=function()alert(this.color);functionClas

73、sB()ClassB.prototype=newClassA();ClassB.prototype.name=;ClassB.prototype.sayName=function()alert(this.name);vara=newClassA();a.color=red;varb=newClassB();b.color=blue;b.name=Tom;a.showColor();b.showColor();b.sayName();alert(ainstanceofClassA);alert(binstanceofClassA);2024/8/21104继承混合方式function Class

74、A(sColor) this.color = sColor ;ClassA.prototype.showColor = function () alert(this.color) ;function ClassB(sColor,sName) ClassA.call(this,sColor) ;this.name = sName ;ClassB.prototype = new ClassA() ;ClassB.prototype.sayName = function () alert(this.name) ;var a = new ClassA() ;a.color = red ;var b =

75、 new ClassB() ;b.color = blue ;b.name = Tom ;a.showColor() ;b.showColor() ;b.sayName() ;alert(a instanceof ClassA) ;alert(b instanceof ClassA) ;对象继承的推荐方式2024/8/21105继承练习多边形类：Polygon,属性：sides，getAera();子类：Triangle，base(底)，height(高)子类：Rectangle,length,width2024/8/21106function Polygon(iSides) this.sid

76、es = iSides ;Polygon.prototype.getAera = function () return 0 ;function Triangle(iBase,iHeight) Polygon.call(this,3) ;this.base = iBase ;this.height = iHeight ;Triangle.prototype = new Polygon() ;Triangle.prototype.getAera = function() return this.base*this.height/2 ;var oTri = new Triangle(5,6) ;alert(oTri.getAera() ;function Rectangle(iLength,iWidth) Triangle.call(this,4) ;this.length = iLength ;this.width = iWidth ;Rectangle.prototype = new Polygon() ;Rectangle.prototype.getAera = function () return this.length*this.width ;var oRect = new Rectangle(6,6) ;alert(oRect.getAera() ;2024/8/21107