JavaScript程序设计案例教程第2版许旻配套教学课件PPT第4章.ppt 26页

'第4章JavaScript内置对象 JavaScript中的对象是一种基本又重要的数据类型，是一个无序的属性集合，每一个属性都有名字和值，这些存储的值可以是数字、字符串等基本数据类型也可以是对象。在JavaScript编程中，常常需要使用语言所定义的内置对象实现特定功能。 学习目标知识目标理解JavaScript对象的概念和分类掌握JavaScript常用内置对象的创建和使用掌握JavaScript中Date对象、Array对象、String对象和Math对象的属性和方法能力目标能熟练使用JavaScript自定义对象能够熟练使用Date对象、Array对象、String对象和Math对象的属性和方法编写常见的动态效果 教学内容4案例陈述123案例实施知识准备本章小结5课后习题5 本案例综合运用日期(Date)对象的方法在页面中显示当前日期和星期，根据当前时间的不同时间段分别给出不同的提示，并计算停留在网页的时间。效果图如图4.1所示。（本案例效果将会在后续章节【案例13】中的右上导航处呈现。）4.1【案例6】时钟效果演示图4.1时钟效果图 知识点1JavaScript对象概述1)创建和删除对象对象是一种复合数据类型，可以将许多数据集中于一个单元中。对象通过属性来获取数据集内的数据，也可以通过方法来实现数据的某些功能。创建对象的语法如下：4.1知识准备var对象名=new构造函数(); 知识点1JavaScript对象概述2)对象的属性和方法JavaScript中对象是由属性和方法两个基本元素构成的，每个属性或方法都对应着一个属性值或参数值。JavaScript中定义对象属性和属性值的语法如下：(1)访问属性和方法无论是函数还是变量，作为对象的属性都可以通过“.”号进行访问，如果对象的属性仍然是一个对象，那可以通过重复使用“.”号来进行连续访问。(2)添加、重定义属性和方法JavaScript中对象的操作很灵活，在JavaScript中可以动态地修改对象实例的属性和方法。(3)删除属性和方法删除对象的属性和方法有两种方法，第一种方法是使用delete运算符，其语法如下：4.1知识准备{属性名1:属性值,属性名2:属性值,…属性名n:属性值,}delete对象名.属性名; 知识点1JavaScript对象概述3)对象的分类根据对象的作用范围，其可分为内置对象和宿主对象。宿主对象指DOM(DocumentObjectModel，即文档对象模型)和BOM(BrowserObjectModel，即浏览器对象模型)中的对象；内置对象指不依赖宿主而实现的对象，简单来说就是JavaScript定义的类，见表4-1。4.1知识准备对象名说明Object创建一个空对象，或者将指定的数字、字符串或布尔值转换为一个对象Boolean是Boolean数据类型的包装器。每当Boolean数据类型转换为Boolean对象时，JavaScript都隐含地使用Boolean对象Array用于提供对创建任何数据类型的数组的支持Date用于启动日期存储器并可取得日期和时间Function用于创建新的函数Math用于提供对数学计算的支持Number代表数值数据类型和提供数值常数的对象RegExp用于保存有关正则表达式模式匹配信息的固有全局对象String用于处理或格式化文本字符中以及确定和定位字符串中的子字符串Error用于保存有关错误的信息表4-1常用的内置对象 【实例4-1】自定义对象的应用。实例要求定义一个学生对象，包含学号、姓名和英语、高数、C语言、动态脚本、数据结构5门成绩，该对象还提供输出信息和计算总成绩两个方法。4.1知识准备图4.2自定义对象实例效果图 知识点2Date对象1)Date对象的创建2)  Date对象的属性Date对象的属性主要有constructor和prototype两个。constructor属性的应用实例如下：prototype属性的应用实例如下：4.1知识准备日期对象=newDate();日期对象=newDate(string);日期对象=newDate(year,month,day[,hours,minutes,seconds,milliseconds]);日期对象=newDate(milliseconds);varnewDate=newDate();if(newDate.constructor==Date)document.write("日期型对象");varnewDate=newDate();Date.prototype.mark=null;newDate.mark=newDate.getDay();alert(newDate.mark); 知识点2Date对象3)  Date对象的方法Date对象的方法见表4-2、表4-3和表4-4。4.1知识准备 【实例4-2】Date对象的使用。实例实现制作报时器的效果。单击【报时】按钮可获得当前时间。4.1知识准备图4.3报时器效果图

单击报时按钮可获得当前时间

知识点3Array对象1)Array对象的创建在JavaScript中定义数组的方法有3种，一是使用数组直接量来定义，二是使用数组对象的Array()构造函数来定义，三是使用其他对象中的方法，如使用String对象中的split()方法来返回一个数组。(1)使用数组直接量使用数组直接量可以定义一个数组。数组直接量以“[]”为定界符，数组元素必须放在中括号里，数组元素之间使用逗号分隔，语法如下：4.1知识准备数组名=[element1,element2,element3,…] 知识点3Array对象1)Array对象的创建(2)使用构造函数Array对象的构造函数Array()可以用来定义一个数组，语法如下：(3)使用String对象的split()方法String对象的split()方法可以将一个字符串分隔成一个数组，语法如下：4.1知识准备数组名=newArray();数组名=newArray(length);数组名=newArray(element1,element2,element3,…);数组名=Array();数组名=Array(length);数组名=Array(element1,element2,element3,…);StringObj.split(separator.limit) 知识点3Array对象2) Array对象的属性所有的数组都有一个属性——length，该属性用来表示数组的长度，即数组中包含的元素个数。访问数组长度属性的语法如下：3)  Array对象的方法Array对象的方法见表4-8。4.1知识准备数组名.length="value"方法名说明toString()将数组转换为字符串，元素与元素之间用,号分隔join()将数组元素连接成字符串push(x[,y,…])在数组尾部添加元素，返回新数组的长度concat(arrX[,arrY,…])在数组尾部添加元素，并返回一个新数组，原数组中的元素和长度并不改变unshift(x[,y,…])在数组头部添加元素，返回新数组的长度pop()删除数组中的最后一个元素，并将该元素返回shift()删除并返回数组的第一个元素splice(index[,nums[,x,y,…]])删除、替换或插入数组元素slice(start[,end])返回数组中start位置到end-1位置所有元素组成的新数组，不改变原数组reverse()颠倒数组中的元素，原来在第一位的元素将排到最后一位，而最后一位的元素将排到第一位sort()对数组中的元素进行排序，直接改变原数组toLocalString()转换为当地字符串表4-8Array对象的方法 知识点3Array对象4)二维数组虽然JavaScript并不支持真正的多维数组，但是它允许使用元素为数组的数组。如果数组中所有数组元素的值都是基本类型的值，就把这种数组称为一维数组。当数组中所有数组元素的值又都是数组时，就形成了二维数组。二维数组的初始化过程是先创建一维数组，然后将每个数组元素创建为一个数组，再对内部的每个元素进行赋初值，最后进行调用输出。4.1知识准备 【实例4-3】一维数组的使用。实例定义一个数字型元素的数组(Array)，同时定义了升序排序和降序排序的函数，将这两个函数分别作为sort()方法的参数，对已有数组元素进行升序排序和降序排序，输出排序结果。4.1知识准备图4.4数组元素排序效果图 【实例4-4】二维数组的使用。实例要求利用二维数组输出三位同学的各科成绩。4.1知识准备图4.5二维数组的应用效果图 本案例主要用String对象、Math对象的属性和方法来实现表单验证功能。要求邮箱名不得为空、仅包含一个字符“@”但不能出现在第一位、包含字符“.”但不能出现在第一位或最后一位、字符“@”必须出现在字符“.”的前面且两字符之间应该包含内容、暂时不支持qq邮箱；密码不得为空且不能少于6个字符；验证码不得为空且只能输入4位字符并与随机产生的4位验证码相同，如果输入有误，则会弹出提示对话框，直到输入正确方能登录。运行效果如图4.6所示。4.2【案例7】具有验证功能的登录页面图4.6具有验证功能的登录页面效果图 1)首先在案例4的基础上实现表单验证功能。使用Dreamweaver，将网页“Case4.html”另存为文件“Case7.html”。2)在代码视图…中添加

• 
  客服QQ

  • 403074932

  工作时间：9:00 - 18:00
• 
  关注微信公众号售出明细实时看
• 
  回到顶部

酷办公声明：本站点发布的文章作品均来自用户投稿或网络整理，部分作品未联系到知识产权人或未发现有相关的知识产权登记

如有知识产权人不愿本站分享使用所属产权作品，请立即联系我们会立即处理。