项目十八JAVASCRIPT内置对象和函数教学目标课件

湖北职院计科系湖北职院计科系教学目标1、掌握JavaScript内置函数的应用2、掌握JavaScript内置对象的应用3、掌握JavaScript浏览器对象的应用上一页下一页教学目标上一页下一页教学重点1、掌握JavaScript内置函数的使用方法2、掌握JavaScript常用内置对象的属性和方法3、掌握JavaScript浏览器对象的含义上一页下一页教学重点上一页下一页教学难点1、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。上一页下一页教学难点上一页下一页教学方法1、项目工程互动式教学法2、“讲、学、观察”相结合

上一页下一页教学方法上一页下一页一、JavaScript内置函数的应用

JavaScript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数，使用这些函数不需创建实例，可以直接用。1、eval()：计算字符串表达式的值2、parseFloat()和parseInt()：将字符串开头的整数或浮点数分解出来，转换为整数或浮点数3、isNaN()：确定一个变量是否为NaN（NotaNumber）4、escape()：将字符串中的非字母数字字符转换为按格式%XX表示的数字5、unescape()：将字符串格式为%XX的数字转换为字符下一页上一页一、JavaScript内置函数的应用下一页上一页6、程序案例1：求用户在提示对话框中输入的表达式的值。<scriptlanguage=javascript>alert(eval(prompt("请输入一个常量表达式,运算符可以是JavaScript所允许的任何运算符,而操作数只能是常量。如123*321/9,我将为您计算出结果。","65+98+96")))</script>下一页上一页eval()内置函数的用法：计算字符串表达式的值。6、程序案例1：求用户在提示对话框中输入的表达式的值。下一页二、JavaScript内置对象的应用1、Math对象2、Date对象3、Number对象4、String对象5、Array对象下一页上一页二、JavaScript内置对象的应用下一页上一页一、对象的基本概念1、什么是对象对象用于描述客观世界存在的特定实体。在计算机世界中，不仅存在来自于客观世界的对象，也包含为解决问题而引入的抽象对象。2、对象的属性和方法在JavaScript中，对象就是属性和方法的集合。方法是作为对象成员的函数表明对象所具有的行为，属性是作为对象成员的一组变量，表明对象的状态。通过访问或设置对象的属性，并且调用对象的方法，就可以对对象进行各种操作，从而获得需要的功能。调用对象的一个方法类似于调用一个函数。使用对象的一个属性则类似于使用一个变量。

下一页上一页一、对象的基本概念下一页上一页二、Math对象1、Math对象的属性是数学中常用的常量，如圆周率PI，自然对数的底E等。2、Math对象的方法则是一些十分有用的数学函数，如sin()、random()、log()等。3、在调用Math对象的属性和方法时，直接写成：Math.属性和Math.方法。

下一页上一页二、Math对象下一页上一页4、案例2：求PI的5次方，并四舍五入取整。

<scriptlanguage=javascript>varnumber=Math.round(Math.pow(Math.PI,5));document.write("PI的5次方的值为："+number);</script>下一页上一页4、案例2：求PI的5次方，并四舍五入取整。下一页上一页三、Date对象1、Date对象的主要方法常用方法:设置和获取日期中的年、月、日、小时、分、秒和毫秒等2、创建Date对象要使用Date对象，必须先使用new运算符创建它。创建Date对象的常见方式有三种：(1)不带参数vartoday=newDate();(2)创建一个指定日期的Date变量vartheDate=newDate(2000,9,1);(3)创建一个指定时间的Date变量vartheTime=newDate(2000,9,1,10,20,30,50)下一页上一页三、Date对象下一页上一页3、案例3：计算求1+2+3+…10000之和所需要的运行时间(毫秒数)。<scriptlanguage=javascript>vart1,t2,htime,i,sum=0;t1=newDate();document.write("循环前的时间:"+t1.toLocaleString()+":"+t1.getMilliseconds()+"<BR>");for(i=1;i<=10000;i++)sum+=i;t2=newDate();document.write("循环后的时间:"+t2.toLocaleString()+":"+t2.getMilliseconds()+"<BR>");htime=t2.getTime()-t1.getTime();document.write("执行10000次循环用时:"+htime+"毫秒<BR>")</script>

下一页上一页3、案例3：计算求1+2+3+…10000之和所需要的运行时四、Number对象1、Number对象用于存放MAX_VALUE、MIN_VALUE、NaN、NEGATIVE_INFINITY、POSITIVE_INFINITY等极端数值。2、案例4：在页面中显示JavaScript可以处理的数的区间。<scriptlanguage=javascript>document.write("JavaScript有效数的范围是:["+Number.MIN_VALUE+","+Number.MAX_VALUE+"]");</script>下一页上一页四、Number对象下一页上一页五、String对象1、String对象提供对字符串进行处理的属性和方法。2、在使用String对象时，首先要创建一个字符串变量。3、使用new运算符来创建，如：newstring=newString("Thisisanewstring")4、也可以直接将字符串赋给变量。newstring="Thisisanewstring"5、String对象的最常用属性和方法length、toLowerCase()、toUpperCase()、charAt(index)、substr(start,len)下一页上一页五、String对象下一页上一页6、程序案例5：String对象的常用方法<scriptlanguage=javascript>varmystr="lookatthis";document.writeln(mystr.charAt(5));document.writeln(mystr.substring(5,7));document.writeln(mystr.toUpperCase());document.writeln(mystr.indexOf("oo"));</script>下一页上一页6、程序案例5：String对象的常用方法下一页上一页六、Array对象1、什么是数组一个数组可以包含多个数组元素。数组中数组元素的个数称为数组长度。2、创建和访问数组一个数组元素由数组名、一对方括号[]和这对括号中的下标组合起来表示。如：arrayname[0]、arrayname[1]。3、for…in语句用for…in语句处理数组，可以依次对数组中的每个数组元素执行一条或多条语句。for…in的格式是：for(变量in数组)循环体语句;下一页上一页六、Array对象下一页上一页4、程序案例6：使用for…in语句，显示数组的值。<scriptlanguage=javascript>varclassmates,i;classmates=newArray("张月","李良","王力","何芳");for(iinclassmates)document.write("第"+(parseInt(i)+1)+"个同学是:"+classmates[i]+"<BR>");</script>

下一页上一页4、程序案例6：使用for…in语句，显示数组的值。下一页实验内容三、JavaScript浏览器对象的应用1、窗口(Window)对象2、文档(document)对象3、表单(form)对象下一页上一页实验内容三、JavaScript浏览器对象的应用下一页上一页一、窗口(window)对象1、window对象的属性和方法窗口(window)对象处于对象层次的顶端，它提供了处理浏览器窗口的方法和属性。对于window对象的使用，主要集中在窗口的打开和关闭、窗口状态的设置、定时执行程序以及各种对话框的使用等四个方面。在JavaScript中可直接引用window对象的属性和方法。2、打开和关闭窗口通过脚本可以打开新窗口，也可以关闭窗口。下一页上一页一、窗口(window)对象下一页上一页3、程序案例7：设计一个有三个超链接的页面，单击这些链接时分别打开和关闭新窗口，以及关闭本身窗口

<SCRIPTlanguage="javascript">varnewwin;functionopennewwin(){newwin=open("new.htm","myWindow","height=100,width=400,top=10,left=0,toolbar=no,menubar=no,"+"scrollbars=no,resizable=no,location=no,status=no");}functionclosenewwin(){newwin.close();}</SCRIPT>下一页上一页3、程序案例7：设计一个有三个超链接的页面，单击这些链接时分二、文档(document)对象

通过document对象可以访问HTML文档包含的任何HTML元素，如各种表格、表单、图像、超链接等。所有HTML元素在文档对象模型中都表现为一个对象。1、document对象的属性和方法案例3_4：设计一个页面，显示document对象中的一些属性。2、使用all属性访问HTML元素在document对象中，all是一个非常特殊的属性。通过它，可以访问文档中的所有HTML元素对象。

下一页上一页二、文档(document)对象下一页上一页3、案例8：显示当前HTML文档中出现的所有标记。

<SCRIPTlanguage="javascript">document.write("当前文档的标题:"+document.title+"<BR>");document.write("当前文档的URL:"+document.URL+"<BR>");document.write("当前文档的背景色:"+document.bgColor+"<BR>");document.write("当前文档的最后修改日期:"+document.lastModified+"<BR>");document.write("当前文档包含"+document.links.length+"个超链接<BR>");document.write("当前文档包含"+document.images.length+"个图像<BR>");</SCRIPT>

下一页上一页3、案例8：显示当前HTML文档中出现的所有标记。下一页上三、表单对象1、form对象的属性、方法和事件2、表单处理3、表单元素对象的属性、方法和事件4、处理表单元素示例下一页上一页三、表单对象下一页上一页一、form对象的属性、方法和事件1、在程序中，如果创建的表单有一个名字(如myform)，那么就可通过这个表单名访问它，如:document.myform。获取了form对象之后，就可以通过使用其属性、方法和事件来实现各种功能。2、程序案例9：列出表单中所有表单元素的名称。<scriptlanguage=javascript>varmyform,element,i;myform=document.myform;document.write("<H3>表单中有"+myform.length+"个元素:</H3>");for(i=0;i<myform.length;i++){element=myform.elements[i];if(i>0)document.write(",");document.write();}</script>

下一页上一页一、form对象的属性、方法和事件下一页上一页一、form对象的属性、方法和事件1、在程序中，如果创建的表单有一个名字(如myform)，那么就可通过这个表单名访问它，如:document.myform。获取了form对象之后，就可以通过使用其属性、方法和事件来实现各种功能。2、程序案例9：列出表单中所有表单元素的名称。<scriptlanguage=javascript>varmyform,element,i;myform=document.myform;document.write("<H3>表单中有"+myform.length+"个元素:</H3>");for(i=0;i<myform.length;i++){element=myform.elements[i];if(i>0)document.write(",");document.write();}</script>

下一页上一页一、form对象的属性、方法和事件下一页上一页二、表单处理1、表单验证是指确定用户提交的表单数据是否合法，例如填写的身份证号码是否有意义、年龄和学历是否相符等问题。2、由于在表单正式提交到服务器之前，需要onSubmit的值为true(如果不设置事件处理函数，则该值默认为true)，因此可以通过为onSubmit事件指定的处理函数来进行表单数据的验证。下一页上一页二、表单处理下一页上一页3、程序案例10：设计一个表单，该表单有姓名和某种卡号两个文本输入框，其中这种卡号的格式为XXXX-XXXX-XXXX-XXXX(每个X代表一位数字)，要求在用户单击提交按钮“发送”之前验证这两个输入数据的有效性。

<SCRIPTLanguage="javascript">functionvalidate(){alert("数据完全");returntrue;}functioncheckName(s){varok=(s.length>0);if(!ok)alert("名字输入有误，请查核！")returnok;}</SCRIPT>下一页上一页3、程序案例10：设计一个表单，该表单有姓名和某种卡号两个文三、表单元素对象的属性、方法和事件

1、表单可以有很多表单元素，称之为表单元素对象。表单元素对