湖北职院计科系
教学目标 1、掌握JavaScript内置函数的应用 2、掌握JavaScript内置对象的应用 上一页 下一页
教学重点 1、掌握JavaScript内置函数的使用方法 2、掌握JavaScript常用内置对象的属性和方法 上一页 下一页
教学难点 1、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。 上一页 下一页
教学方法 1、项目工程互动式教学法 2、“讲、学、观察”相结合 上一页 下一页
一、JavaScript内置函数的应用 JavaScript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数，使用这些函数不需创建实例，可以直接用。 1、eval( )：计算字符串表达式的值 2、parseFloat( )和parseInt( )：将字符串开头的整数或浮点数分解出来，转换为整数或浮点数 3、isNaN( )：确定一个变量是否为NaN（Not a Number） 4、escape( )：将字符串中的非字母数字字符转换为按格式%XX表示的数字 5、unescape( )：将字符串格式为%XX的数字转换为字符 上一页 下一页
6、程序案例1：求用户在提示对话框中输入的表达式的值。 <script language=javascript> alert(eval(prompt("请输入一个常量表达式,运算符可以是JavaScript所允许的任何运算符,而操作数只能是常量。如123*321/9,我将为您计算出结果。","65+98+96"))) </script> eval( )内置函数的用法：计算字符串表达式的值。 上一页 下一页
二、 JavaScript内置对象的应用 1、Math对象 2、Date对象 3、Number对象 4、String对象 5、Array对象 上一页 下一页
一、对象的基本概念 1、什么是对象 对象用于描述客观世界存在的特定实体。在计算机世界中，不仅存在来自于客观世界的对象，也包含为解决问题而引入的抽象对象。 2、对象的属性和方法 在JavaScript中，对象就是属性和方法的集合。 方法是作为对象成员的函数表明对象所具有的行为，属 性是作为对象成员的一组变量，表明对象的状态。 通过访问或设置对象的属性，并且调用对象的方法，就可以对对象进行各种操作，从而获得需要的功能。 调用对象的一个方法类似于调用一个函数。 使用对象的一个属性则类似于使用一个变量。 上一页 下一页
二、Math对象 1、Math对象的属性是数学中常用的常量，如圆周率PI，自然对数的底E等。 2、Math对象的方法则是一些十分有用的数学函数，如sin()、random()、log()等。 3、在调用Math对象的属性和方法时，直接写成：Math.属性和Math.方法。 上一页 下一页
4、案例2：求PI的5次方，并四舍五入取整。 <script language=javascript> var number = Math.round(Math.pow(Math.PI,5)); document.write("PI的5次方的值为："+number); </script> 上一页 下一页
三、Date对象 1、Date对象的主要方法 常用方法:设置和获取日期中的年、月、日、小时、分、秒和毫秒等 2、创建Date对象 要使用Date对象，必须先使用new运算符创建它。创建Date对象的常见方式有三种： (1)不带参数 var today = new Date(); (2)创建一个指定日期的Date变量 var theDate = new Date(2000, 9, 1); (3)创建一个指定时间的Date变量 var theTime = new Date(2000, 9, 1, 10, 20,30,50) 上一页 下一页
3、案例3：计算求1+2+3+…10000之和所需要的运行时间(毫秒数)。 <script language=javascript> var t1,t2,htime,i,sum=0; t1 = new Date(); document.write("循环前的时间:"+t1.toLocaleString()+":"+t1.getMilliseconds()+"<BR>"); for(i=1;i<=10000;i++) sum+=i; t2 = new Date(); document.write("循环后的时间:"+t2.toLocaleString()+":"+t2.getMilliseconds()+"<BR>"); htime = t2.getTime() - t1.getTime(); document.write("执行10000次循环用时:"+ htime+"毫秒<BR>") </script> 上一页 下一页
四、Number对象 1、Number对象用于存放MAX_VALUE、MIN_VALUE、NaN、NEGATIVE_INFINITY、POSITIVE_INFINITY等极端数值。 2、案例4：在页面中显示JavaScript可以处理的数的区间。 <script language=javascript> document.write("JavaScript有效数的范围是: [" +Number.MIN_VALUE+","+Number.MAX_VALUE+"]"); </script> 上一页 下一页
五、String对象 1、String对象提供对字符串进行处理的属性和方法。 2、在使用String对象时，首先要创建一个字符串变量。 3、使用new运算符来创建，如： newstring = new String("This is a new string") 4、也可以直接将字符串赋给变量。 newstring = "This is a new string" 5、String对象的最常用属性和方法length、toLowerCase()、toUpperCase()、charAt(index)、substr(start,len) 上一页 下一页
6、程序案例5：String对象的常用方法 <script language=javascript> var mystr = "look at this"; document.writeln(mystr.charAt(5)); document.writeln(mystr.substring(5,7)); document.writeln(mystr.toUpperCase()); document.writeln(mystr.indexOf("oo")); </script> 上一页 下一页
六、Array对象 1、什么是数组 一个数组可以包含多个数组元素。数组中数组元素的个数称为数组长度。 2、创建和访问数组 一个数组元素由数组名、一对方括号[ ]和这对括号中的下标组合起来表示。如：arrayname[0]、arrayname[1]。 3、for…in语句 用for…in语句处理数组，可以依次对数组中的每个数组元素执行一条或多条语句。 for…in的格式是： for(变量 in 数组) 循环体语句; 上一页 下一页
4、程序案例6：使用for…in语句，显示数组的值 。 <script language=javascript> var classmates,i; classmates = new Array("张月","李良","王力","何芳"); for(i in classmates) document.write("第"+(parseInt(i)+1)+"个同学是:"+classmates[i]+"<BR>"); </script> 上一页 下一页
实验内容三、JavaScript浏览器对象的应用 1、窗口(Window)对象 2、文档(document)对象 3、表单(form)对象 上一页 下一页
一、窗口(window)对象 1、window对象的属性和方法 在JavaScript中可直接引用window对象的属性和方法。 2、打开和关闭窗口 通过脚本可以打开新窗口，也可以关闭窗口 。 上一页 下一页
3、程序案例7：设计一个有三个超链接的页面，单击这些链接时分别打开和关闭新窗口，以及关闭本身窗口 <SCRIPT language="javascript"> var newwin; function opennewwin( ){ 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"); } function closenewwin( ){ newwin.close(); </SCRIPT> 上一页 下一页
二、文档(document)对象 通过document对象可以访问HTML文档包含的任何HTML元素，如各种表格、表单、图像、超链接等。 所有HTML元素在文档对象模型中都表现为一个对象。 1、document对象的属性和方法 案例3_4：设计一个页面，显示document对象中的一些属性。 2、使用all属性访问HTML元素 在document对象中，all是一个非常特殊的属性。通过它，可以访问文档中的所有HTML元素对象。 上一页 下一页
3、案例8：显示当前HTML文档中出现的所有标记。 <SCRIPT language="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> 上一页 下一页
三、表单对象 1、form对象的属性、方法和事件 2、表单处理 3、表单元素对象的属性、方法和事件 4、处理表单元素示例 上一页 下一页
一、form对象的属性、方法和事件 1、在程序中，如果创建的表单有一个名字(如myform)，那么就可通过这个表单名访问它，如:document.myform。 获取了form对象之后，就可以通过使用其属性、方法和事件来实现各种功能。 2、程序案例9：列出表单中所有表单元素的名称。 <script language=javascript> var myform,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(element.name);} </script> 上一页 下一页
一、form对象的属性、方法和事件 1、在程序中，如果创建的表单有一个名字(如myform)，那么就可通过这个表单名访问它，如:document.myform。 获取了form对象之后，就可以通过使用其属性、方法和事件来实现各种功能。 2、程序案例9：列出表单中所有表单元素的名称。 <script language=javascript> var myform,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(element.name);} </script> 上一页 下一页
二、表单处理 1、表单验证是指确定用户提交的表单数据是否合法，例如填写的身份证号码是否有意义、年龄和学历是否相符等问题。 2、由于在表单正式提交到服务器之前，需要onSubmit的值为true(如果不设置事件处理函数，则该值默认为true)，因此可以通过为onSubmit事件指定的处理函数来进行表单数据的验证。 上一页 下一页
<SCRIPT Language="javascript"> function validate() { 3、程序案例10：设计一个表单，该表单有姓名和某种卡号两个文本输入框，其中这种卡号的格式为XXXX-XXXX-XXXX-XXXX(每个X代表一位数字)，要求在用户单击提交按钮“发送”之前验证这两个输入数据的有效性。 <SCRIPT Language="javascript"> function validate() { alert("数据完全"); return true; } function checkName(s) { var ok = (s.length>0); if(!ok) alert("名字输入有误，请查核！") return ok; </SCRIPT> 上一页 下一页
三、表单元素对象的属性、方法和事件 1、表单可以有很多表单元素，称之为表单元素对象。 表单元素对象可以分为文本框(Text)、文本区(TextArea)、密码(Password)、按钮(Button)、重置按钮(Reset)、提交按钮(Submit)、单选框(Radio)、复选框(Checkbox)、列表(Select)、列表选项(Option)和隐藏(Hidden)对象等。 上一页 下一页
四、处理表单元素示例 对表单元素对象的引用，类似于引用表单的通用属性。 四、处理表单元素示例 对表单元素对象的引用，类似于引用表单的通用属性。 1、程序案例11：设计3个按钮，当单击它们时分别使页面的背景色变成红、蓝和绿色。 <SCRIPT Language="javascript"> function ChangeBgColor(new_bgcolor) { document.bgColor=new_bgcolor; } </SCRIPT> <INPUT value="红" onClick="ChangeBgColor('red')"> <INPUT value="蓝" onClick="ChangeBgColor('blue')"> <INPUT value="绿" onClick="ChangeBgColor('green')"> 上一页 下一页
【小结】 通过本次课的学习，同学们学会了javascript内置函数的使用方法，熟悉了javascript多个内置对象的属性和方法，要求重点掌握浏览器对象的含义，以及如何使用浏览器对象提供的信息来完成一定功能的网页设计。 【作业】 课后习题 第 2、3题 上一页 下一页
谢 谢 ！