微信小程序基础课件整本书电子教案全套教学教程课件.pptx

单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,2021/11/27,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/11/27,#,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,2021/11/27,#,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,2021/11/27,#,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,2021/11/27,#,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,2021/11/27,#,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,2021/11/27,#,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,2021/11/27,#,第,1,章 微信小程序基础,微信小程序开发教程,目录,1.1,微信小程序介绍,1.2,微信小程序开发工具的使用,1.3,创建一个微信小程序项目,第,1,章 微信小程序基础,教学目标：,本章将会介绍微信小程序的基本概念和特征。,并针对开发环境的搭建和开发工具的使用详细讲解。,1.1.1,什么是微信小程序,微信小程序这个词可以分解为“微信”和“小程序”两部分：,（,1,）其中“微信”可以理解为“微信中的”，指的是小程序的执行环境；当然微信在提供执行环境的同时也延长了用户使用微信的时间。,（,2,）“小程序”是说它首先是程序，然后具备轻便的特征。小程序并不像其他应用那样，它不需要安装，而是通过扫描二维码等打开后直接执行；用完以后也不需要卸载。这就是所谓用完即走的原则。,总之，微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。,微信,小程序,发展历程,微信小程序，简称小程序，英文名,Mini Program,，它是由微信之父张小龙在,2017,年,1,月,9,日正式发布的“轻”应用，它不需要下载安装专门的,APP,，只需要通过微信的载体，就可以轻松实现,APP,的功能。,全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。,2016,年,1,月,9,日，微信团队内部提出“应用号”设想；,2016,年,1,月,11,日，张小龙在微信公开课上阐述微信的四大价值观，并首次提出“以服务为主”开发一个新的形态,应用号；,2016,年,9,月,22,日，微信公众平台对外发送“小程序”内测邀请，首批内测名额,200,个；,2016,年,11,月,3,日，微信小程序对外开放公测，开发者可以登录微信公众平台申请，开发完成后可以提交审核，但公测期间不能发布；,2016,年,12,月,28,日，张小龙在微信公开课上第一次完整阐述了小程序，并明确小程序在微信没有入口、没有小程序商店、没有订阅关系、不能推送消息、可以分享到聊天和群等业界关心的问题；,2016,年,12,月,30,日，微信公众平台对外公告，上线的微信小程序最多可以生成,10000,个带参数的二维码；,2017,年,1,月,9,日，微信小程序正式上线。,1.1.1,什么是微信小程序,微信小程序拥有大量的微信用户群体。小程序和公众号一样背靠微信，本身自带流量，而且微信小程序的入口多；,在微信中通过搜索关键字、扫描二维码、群分享、好友分享等途径来实现打开一个微信小程序,。,微信小程序可以开发游戏，即微信小游戏，它是微信小程序的一个类目，使用相同的开发工具开发。,1.1.2,注册开发者账号,在创建自己的微信小程序之前，需要注册小程序账号，这样才能进行代码开发和提交工作。其注册步骤如下：,（,1,）使用浏览器打开微信公众平台网站,，如图,1-1,所示，单击右上角“立即注册”链接进行注册。,微信公众平台,微信公众平台,是腾讯在微信,APP,内推出的针对个人、企业和组织提供业务服务与用户管理能力的全新服务平台，微信公众平台的应用类型包括：,服务号,订阅号,小程序,企业微信,微信公众号是应用者在微信公众平台注册的一个账号，账号开通后，就可以在微信公众号里发视频、图片、文字等推销商品或分享生活经验等。通常所说的微信公众号包括服务号和订阅号。,微信公众平台,1,订阅号,订阅号是公众平台的一种账号类型，旨在为媒体和个人提供一种新的信息传播方式，主要偏向为用户提供资讯、消息（类似报纸杂志）。,订阅号适用于个人、媒体、企业、政府或其他组织，认证前后每天可群发,1,条消息。其展现效果如图所示。,发给订阅用户（粉丝）的消息，将会显示在对方的“订阅号消息”文件夹中。,如果想用公众平台简单发发消息，做宣传推广服务，建议选择订阅号。,微信公众平台,2,服务号,服务号是公众平台的一种账号类型，旨在为企业和组织提供更强大的业务服务与用户管理能力，大多为用户提供服务类交互（功能类似,12315,、,114,，提供服务查询）。,服务号适用于媒体、企业、政府或其他组织，认证前后每个月内都可以发送,4,条消息。其展现效果如图所示。,发给订阅用户（粉丝）的消息，会显示在对方的聊天列表中。,如果想用公众平台进行商品销售，建议选择服务号，后续可认证再申请微信支付商户。,微信公众平台,3,企业微信,企业微信是一个全平台企业办公工具，它提供与微信一致的沟通体验，为企业员工提供最基础和最实用的办公服务，并加入贴合办公场景的特色功能、轻,OA,工具，合理化区分工作与生活，提升工作效率。,2018,年,6,月,29,日企业微信,2.0,版本发布，正式与企业号合并。其展现效果如图所示,微信公众平台,4,小程序,小程序是一种不需要下载安装即可运行在微信环境中的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可。简单说，就是把手机上的,APP,搬到微信里面，不需要下载安装就可以直接使用。,用户可以在微信的“发现”栏找到“小程序”的入口，从该入口可以打开需要的小程序,1.1.2,注册开发者账号,（,2,）根据图,1-2,中页面提示，在选择注册微信公众平台的账号类型为“小程序”，即可开始账号注册。,（,3,）小程序注册页面包含,3,个填写页面，即帐号信息，邮箱激活、信息登记。如图,1-3,所示，完成注册后可以使用刚才的注册账号登录进入小程序管理页面，如图,1-4,所示，可以进行小程序信息完善和管理工作。例如填写小程序基本信息，包括名称、头像、介绍及服务范围等。,1.2,微信小程序开发工具的使用,获取微信小程序,AppID,登录,，就可以在微信小程序管理页面的“开发”“开发设置”中，查看到微信小程序的,AppID,，如图,1-4,所示。注意不可直接使用服务号或订阅号的,AppID,。,安装微信开发者工具,1.2,微信小程序开发工具的使用,获取微信小程序,AppID,微信开发者工具官方下载地址：,JavaScript,面向对象程序设计,2.6 JavaScript,内置对象,2.7 ES6,简介,第,2,章,JavaScript,语法基础,教学目标：,本章将会介绍,JavaScript,的核心语法。,掌握,JavaScript,的面向对象编程思想以及有关对象的基本概念,初步掌握创建和使用自定义的类和对象。,了解,ES6,的语法。,2.1 JavaScript,语言概述,JavaScript,主要用于以下三个领域：,浏览器：得到所有浏览器的支持，只要有网页的地方就有,JavaScript,。,服务器：借助,node.js,运行环境，,JavaScript,已经成为很多开发者进行后端开发的选择之一。,微信小程序：,小程序逻辑开发的语言。,标准,ECMAScript,通常缩写为,ES,。在微信小程序中通常使用,ES5,和,ES6,版本。,微信,小程序,2.1.2,运行,JavaScript,语言,1,在浏览器中运行,在,HTML,文件中使用,JavaScript,脚本时，,JavaScript,代码需要出现在,和,之间。,【,例,2-1】,一个简单的在,HTML,文件中使用,JavaScript,脚本实例。,另外一种插入,JavaScript,程序的方法是把,JavaScript,代码写到一个,.js,文件当中，然后在,HTML,文件中引用该,js,文件，方法如下：,2.1.2,运行,JavaScript,语言,JavaScript,是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释执行。注意与,Java,的区别，,Java,的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的解释器，它可以通过解释器实现独立于某个特定的平台编译代码的束缚。,2.1.2,运行,JavaScript,语言,2,在服务器中运行,搭建,node,运行环境后，通过命令行执行,JS,文件。例如：,node output.js,3,在微信小程序中运行,在微信小程序中，,JavaScript,需要单独保存在,JS,文件中，即外联式。小程序框架对此进行了优化，只要按目录规范保证,JS,文件与,WXML,文件同名，则无须使用,引入即可使用。,在微信开发工具中，单击,console,选项卡可以查看,JS,代码文件中,console.log(),输出的调试信息。,例如：,var iNum=10;,iNum*=2;,console.log(iNum);,console,选项卡,例如：,var iNum=10;,iNum*=2;,console.log(iNum);,2.2,基本语法,2.2.1,数据类型,JavaScript,包含下面,5,种原始数据类型。,1,Undefined,：,即为未定义类型，用于不存在或者没有,被赋初始值的,变量或对象的属性,2,Null,：,作用是表明数据空缺的值,。,一般将,Undefined,型和,Null,型等同对待。,3,Boolean,：,取值为,ture,或,false,，分别表示逻辑真和假,4,String,：,字符型数据。,JavaScript,不区分单个字符和字符串,。,用双引号或单引号引起来。,var nameA=Tom;,var nameB=Tom;,5,Number,：,即为数值型数据，包括整数型和浮点型,。,var myDataA=8;,var myDataB=6.3;,JavaScript,脚本语言除了支持上述基本数据类型外，也支持组合类型，如,数组,Array,和对象,Object,等。,2.2,基本语法,2.2.2,常量和变量,1,常量,常量是内存中用于保存固定值的单元，在程序中常量的值不能发生改变。,2,变量,变量是内存中命名的存储位置，可以在程序中设置和修改变量的值。在,JavaScript,中，可以使用,var,关键字声明变量,。,2.2.3,注释,JavaScript,支持,2,种类型的注释字符。,1,/,2,/*.*/,2.2,基本语法,2.2.4,运算符和表达式,1,算术运算符,算术运算符可以实现数学运行，包括加（,+,）、减（,-,）、乘（,*,）、除（,/,）和求余（,%,）,。,2,赋值运算符,JavaScript,脚本语言的赋值运算符包含“,=,”、“,+=,”、“,=,”、“,*=,”、“,/=,”、“,%=,”、“,&=,”、“,=,”等，如表,2-1,所示。,3,关系运算符,JavaScript,脚本语言中用于比较两个数据的运算符称为比较运算符，包括,“=”,、,“!=”,、“,”、“,”、“,=,”等，其具体作用见表,2-2,所示。,4,逻辑运算符,JavaScript,脚本语言的逻辑运算符包括,“&”,、,“|”,和,“!”,等，用于两个逻辑型数据之间的操作，返回值的数据类型为布尔型。逻辑运算符的功能如表,2-3,所示,。,2.2,基本语法,2.2.4,运算符和表达式,5,位运算符,位移运算符用于将目标数据（二进制形式）往指定方向移动指定的位数。,JavaScript,脚本语言支持“,”和“,”等位移运算符，其具体作用如见表,2-4,：,6,条件运算符,在,JavaScript,脚本语言中，“,?,：”运算符用于创建条件分支。,ab,？,a:b,7,逗号运算符,使用逗号运算符可以在一条语句中执行多个运算，例如：,var iNum1=1,iNum=2,iNum3=3;,8,typeof,运算符,typeof,运算符用于表明操作数的数据类型，返回数值类型为一个字符串。,2.3,常用控制语句,2.3.1,选择结构语句,1,if,语句,2,if.else.,语句,2.3,常用控制语句,3,if.else ifelse,语句,【例,2-3,】下面是一个显示当前系统日期的,JavaScript,代码，其中使用到,if.else ifelse,语句。,下面是一个显示当前系统日期的,JavaScript,代码,/,显示当前系统日期,d=new Date();,console.log(,今天是,);,if(d.getDay()=1),console.log(,星期一,);,else if(d.getDay()=2),console.log(,星期二,);,else if(d.getDay()=3),console.log(,星期三,);,else if(d.getDay()=4),console.log(,星期四,);,else if(d.getDay()=5),console.log(,星期五,);,else if(d.getDay()=6),console.log(,星期六,);,else,console.log(,星期日,);,2.3,常用控制语句,4,switch,语句,switch(,表达式,),case,值,1:,语句块,1,break;,case,值,2:,语句块,2,break;,case,值,n:,语句块,n,break;,default:,语句块,n+1,【例,2-5,】将例,2-4,的按分数输出其等级使用,switch,语句实现。,按分数输出其等级,/,使用,switch,语句实现按分数输出其等级,var MyScore=89;/,请输入成绩,score=parseInt(MyScore/10)/parseInt,取整,switch(score/10),case 10:,case 9:,console.log(,优,);break;,case 8:,console.log(,良,);break;,case 7:,console.log(,中,);break;,case 6:,console.log(,及格,);break;,default:,console.log(,不及格,);,if.else ifelse,语句实现按分数输出其等级,var score=89;/,请输入成绩,if(score=90),console.log(,优,);,else if(score=80&score=70),console.log(,中,);,else if(score=60),console.log(,及格,);,else,console.log(,不及格,);,2.3,常用控制语句,2.3.2,循环结构语句,1 while,语句,while,语句的语法格式为：,while(,表达式,),循环体语句,【例,2-6,】用,while,循环来计算,1+2+3.+98+99+100,的值。,/,计算,1+2+3.+98+99+100,的值,var total=0;,var i=1;,while(i=100),total+=i;,i+;,console.log(total);,2.3,常用控制语句,2.3.2,循环结构语句,2,do,while,语句,do-while,语句的语法格式如下：,do,循环体语句,while(,表达式,),；,【例,2-7,】用,do,while,循环来计算,1+2+3.+98+99+100,的值。,/,计算,1+2+3.+98+99+100,的值,var total=0;,var i=1;,do,total+=i;,i+;,while(i=100);,console.log(total);,2.3,常用控制语句,3,for,语句,for,循环语句是循环结构语句，按照指定的循环次数，循环执行循环体内语句（或语句块），其基本结构如下：,for(,表达式,1;,表达式,2;,表达式,3),循环体语句,【例,2-8,】用,for,循环来计算,1+2+3.+98+99+100,的值。,/,计算,1+2+3.+98+99+100,的值,var total=0;,for(var i=1;i=100;i+),total+=i;,console.log(total);,2.3,常用控制语句,4,continue,语句,continue,语句的一般格式为：,continue;,该语句只能用在循环结构中。当在循环结构中遇到,continue,语句时，则跳过,continue,语句后的其他语句，结束本次循环，并转去判断循环控制条件，以决定是否进行下一次循环。,5,break,语句,break语句的一般格式为：,break;,该语句只能用于两种情况：,（1）用在switch结构中，当某个case分支执行完后，使用break语句跳出switch结构。,（2）用在循环结构中，用break语句来结束循环。如果放在嵌套循环中，则break语句只能结束其所在的那层循环。,2.4,函数,函数（,function,）由若干条语句组成，用于实现特定的功能。函数包含函数名、若干参数和返回值。,2.4.1,创建自定义函数,function,函数名,(,参数列表,),函数体,function PrintWelcome(),document.write(,欢迎使用,JavaScript);,2.4,函数,2.4.2,调用函数,1,在,JavaScript,中使用函数名来调用函数,在,JavaScript,中，可以直接使用函数名来调用函数。无论是内置函数还是自定义函数，调用函数的方法都是一致的。,2,在,HTML,中使用,javascript:,方式调用,JavaScript,函数,在,HTML,中的,a,链接中可以使用,javascript:,方式调用,JavaScript,函数，方法如下：,3,与事件结合调用,JavaScript,函数,可以将,JavaScript,函数指定为,JavaScript,事件的处理函数。当触发事件时会自动调用指定的,JavaScript,函数。,设置,Hello1:function(),console.log(,单击我了,),2.4,函数,/,计算并打印,num1,和,num 2,之和,function sum(num1,num2),console.log(num1+num2);,sum(1,2);/,结果是,3,与事件结合调用,JavaScript,函数,设置,Hello1:function(),console.log(,单击我了,),2.4,函数,2.4.3,变量的作用域,var a=100;,/,全局变量,function setNumber(),var,a,=10;/,局部变量,console.log(,a,);/,打印局部变量,a,setNumber();,console.log();,console.log(,a,);/,打印全局变量,a,程序运行结果：,10,100,2.4,函数,2.4.3,变量的作用域,在函数中定义的变量被称为局部变量。局部变量只在定义它的函数内部有效，在函数体之外，即使使用同名的变量，也会被看作是另一个变量。,相应地，在函数体之外定义的变量是全局变量。全局变量在定义后的代码中都有效，包括它后面定义的函数体内。如果局部变量和全局变量同名，则在定义局部变量的函数中，只有局部变量是有效的。,2.4,函数,2.4.4,函数的返回值,使用,return,语句可以返回函数值并退出函数,function,函数名,(),return,返回值,;,2.4.5,定义函数库,JavaScript,函数库是一个,.js,文件，其中包含函数的定义。,在,HTML,文件中引用函数库,js,文件的方法如下：,/,引用,js,文件中的函数,求,(m,n),两个数字之间的和，代码如下：,function getTotal(m,n),var total=0;,if(m=n),return false;/n,必需大于,m,否则无意义,for(var i=m;i=n;i+),total+=i;,return total;,console.log(getTotal(1,10);,2.4,函数,2.4.6 JavaScript,内置函数,1,alert(),函数,alert(),函数用于弹出一个消息对话框，该对话框包括一个“确定”按钮。,2,confirm(),函数,confirm(),函数用于显示一个请求确认对话框，包含一个“确定”按钮和一个“取消”按钮。在程序中，可以根据用户的选择决定执行的操作,2.4,函数,3,parseFloat(),函数,parseFloat(),函数用于将,字符串转换成浮点数字,形式。语法如下：,parseFloat(str),参数,str,是待解析的字符串。函数返回解析后的数字。,4,parseInt(),函数,parseInt(),函数用于将字符串转换成整型数字形式。语法如下：,parseInt(str,radix),参数,str,是待解析的字符串；参数,radix,可选。表示要解析的数字的进制。该值介于,2 36,之间。,parseInt(10);/10,进制，结果是,10,parseInt(f,16);/16,进制，结果是,15,parseInt(010,2);/2,进制，结果是,2,2.4,函数,3,isNaN(),函数,isNaN(),用于检验某个值是否为,NaN,（,not a number,不是数字,），返回,false,为数字，返回,true,为非数字。,var num=123.456789abc;,isNaN(num)/,结果是,true,isNaN(123)/,结果是,false,4,强制类型转换函数,用户可以使用强制类型转换函数来,转换值的类型,。,在,ECMAScript,中可以使用以下,3,种强制类型转换函数。,String(value),：把给定的值转换成字符串。类似于,toString(),方法，但是和它又不同，对,null,或,undefined,值,toString(),会报错。,Boolean(value),：把给定的值转换成,Boolean,型。给定的值为空字符串、数字,0,、,undefined,或,null,返回,false,，其余返回,true,。,Number(value),：把给定的值转换成数字（可以是整数或浮点数）。,2.4,函数,var a=String(123);/,返回,123,var a=Boolean(0);/,返回,false,var a=Boolean(undefined);/,返回,false,var a=Boolean(null);/,返回,false,var a=Boolean(50);/,返回,true,var a=Number(11.11);/,返回,11.11,5,保留几位小数,NumberObject.toFixed(,位数,),；,toFixed(),位数功能是保留几位小数（四舍五入），参数为保留的小数点后位数，返回的值为,String,类型。,var a=13.37.toFixed(4);/,返回,13.3700,var a=13.378888.toFixed(2);/,返回,13.38,2.5 JavaScript,面向对象程序设计,JavaScript,脚本是面向对象（,Object-based,）的编程语言，它可以将属性和代码集成在一起，定义为类，从而使程序设计更加简单、规范、有条理。通过对象的来访问可大大简化,JavaScript,程序的设计，并提供直观、模块化的方式进行脚本程序开发。,2.5.1,面向对象程序设计思想,对象是客观世界存在的人、事和物体等实体。现实生活中存在很多的对象，比如猫、自行车等。不难发现它们有两个共同特征：都有状态和行为。,图,2-8,以自然人构造的对象,2.5.1,面向对象程序设计思想,凡是能够提取一定度量数据并能通过某种途径对度量数据实施操作的客观存在都可以构成一个对象，且用属性来描述对象的状态，使用方法和事件来处理对象的各种行为。下面介绍一些概念。,对象（,Object,）,：面向对象程序设计思想可以将一组数据和与这组数据有关操作组装在一起，形成一个实体，这个实体就是对象。,属性,：用来描述对象的状态。通过定义属性值，可以改变对象的状态。如图,2-8,中，可以定义,height,表示该自然人身高，字符串,HungryOrNot,来表示该自然人肚子的状态，,HungryOrNot,成为自然人的某个属性；,方法,：也称为成员函数，是指对象上的操作。如图,2-8,中，可以定义方法,Eat(),来处理自然人肚子很饿的情况，,Eat(),成为自然人的某个方法；,事件,：由于对象行为的复杂性，对象的某些行为需要用户根据实际情况来编写处理该行为的代码，该代码称为事件。在图,2-8,中，可以定义事件,DrinkBeforeEat(),来处理自然人肚子很饿同时嘴巴很渴需要先喝水后进食。,2.5.2,面向对象编程,面向对象编程（,OPP,）是一种计算机编程架构，具有三个最基本的特点：,封装、重用性（继承）、多态,。,（,1,）类（,class,）：具有相同或相似性质的对象的抽象就是类。,（,2,）封装：将数据和操作捆绑在一起，定义一个新类的过程就是封装。,（,3,）继承：类之间的关系，在这种关系中，一个类共享了一个或多个其他类定义的属性和行为。,（,4,）多态：从同一个类中继承得到的子类也具有多态性，即相同的函数名在不同子类中有不同的实现。就如同子女会从父母那里继承到人类共有的特性，而子女也具有自己的特性。,实际上，,JavaScript,语言是通过一种叫做原型（,prototype,）的方式来实现面向对象编程的。,2.5.3 JavaScript,类的定义和实例化,严格的说，,JavaScript,是基于对象的编程语言，而不是面向对象的编程语言。在面向对象的编程语言中（如,Java,、,C+,、,C#,、,PHP,等），声明一个类使用,class,关键字。,但是在,JavaScript,中，没有声明类的关键字，也没有办法对类的访问权限进行控制。,JavaScript,使用函数来定义类。,1.,类的定义,定义一个,Person,类：,function Person(),this.name=,张三,;/,定义一个属性,name,this.sex=,男,;/,定义一个属性,sex,this.say=function(),/,定义一个方法,say(),console.log(,我的名字是,+this.name+,，性别是,+this.sex+,。,);,2.5.3 JavaScript,类的定义和实例化,2.,创建对象（类的实例化）,创建对象的过程也是类实例化的过程。,在,JavaScript,中，创建对象（即类的实例化）使用,new,关键字。,创建对象语法：,new className(),将上面的,Person,类实例化：,var zhangsan=new Person();,zhangsan.say();,运行代码，输出如下内容：,大家好，我的名字是 张三，性别是 男。,2.5.3 JavaScript,类的定义和实例化,3.,通过对象直接初始化创建对象,通过直接初始化对象来创建对象，与定义对象的构造函数方法不同的是，该方法不需要,new,生成此对象的实例，改写,zhangsan,对象：,/,直接初始化对象,var zhangsan=,name:,张三,sex:,男,say:function()/,定义对象的方法,document.write(,大家好，我的名字是,+this.name+,，性别是,+this.sex);,zhangsan.say();,对象直接初始化是一个“,名字,/,值,”对列表，最后用一个大括号括起来。,“名字,/,值”对表示对象的,一个属性或方法,，名和值之间用冒号分隔。,2.5.3 JavaScript,类的定义和实例化,3.,通过对象直接初始化创建对象,上面的,zhangsan,对象，也可以这样来创建：,var zhangsan=,zhangsan.name=,张三,;,zhangsan.sex=,男,;,zhangsan.say=function(),return,嗨！大家好，我来了。,;,该方法在,只需生成一个对象实例,并进行相关操作的情况下使用时，,代码紧凑,，编程效率高,，但致命的是，若要生成若干个对象实例，就必须为生成每个对象实例重复相同的代码结构，代码的重用性比较差，不符合面向对象的编程思路，应尽量避免使用该方法创建自定义对象。,2.5.4 JavaScript,访问对象的属性和方法,属性,是一个变量，用来表示一个对象的特征，如颜色、大小、重量等；,方法,是一个函数，用来表示对象的操作，如奔跑、呼吸、跳跃等。,对象的属性和方法统称为对象的成员。,在,JavaScript,中，可以使用“,.,”和“,”来访问对象的属性。,1.,使用“,.,”来访问对象属性,语法：,objectName.propertyName,其中，,objectName,为对象名称，,propertyName,为属性名称。,2.,使用“,”来访问对象属性,语法：,objectNamepropertyName,3.,访问对象的方法,在,JavaScript,中，只能使用“,.,”来访问对象的方法。,语法：,objectName.methodName(),2.5.4 JavaScript,访问对象的属性和方法,【例,2-15,】创建一个,Person,对象并访问其成员。,function Person(),this.name=,张三,;/,定义一个属性,name,this.sex=,男,;/,定义一个属性,sex,this.age=22;/,定义一个属性,age,this.say=function()/,定义一个方法,say(),return,我的名字是,+this.name+,，性别是,+this.sex+,，今年,+this.age+,岁,!;,var zhangsan=new Person();,console.log(,姓名：,+zhangsan.name);,/,使用“,.,”来访问对象属性,console.log(,性别：,+zhangsan.sex);,console.log(,年龄：,+zhangsan,age);/,使用“,”来访问对象属性,console.log(zhangsan.,say();/,使用“,.,”来访问对象方法,动态添加对象的属性和方法,【例,2-16,】用,Person,类创建一个对象，向其添加属性和方法。,function Person(name,sex)/,定义类,this.name=name;/,定义一个属性,name,this.sex=sex;/,定义一个属性,sex,this.say=function()/,定义一个方法,say(),return,大家好，我的名字是,+this.name+,，性别是,+this.sex+,。,;,var zhangsan=new Person(,张三,男,);/,创建对象,zhangsan.say();,/,动态添加属性和方法,zhangsan.tel=029-81892332;/,动态添加属性,tel,zhangsan.run=function()/,动态添加方法,run,return ,我跑得很快！,;,/,弹出警告框,alert(,姓名：,+zhangsan.name);,alert(,姓别：,+zhangsan.sex);,alert(zhangsan.say();,alert(,电话：,+zhangsan.tel);,alert(zhangsan.run();,2.6 JavaScript,内置对象,JavaScript,脚本提供丰富的内置对象（内置类），包括同基本数据类型相关的对象（如,String,、,Boolean,、,Number,）、允许创建用户自定义和组合类型的对象（如,Object,、,Array,）和其他能简化,JavaScript,操作的对象（如,Math,、,Date,、,RegExp,、,Function,）。了解这些内置对象是,JavaScript,编程和游戏开发的基础和前提。,2.6 JavaScript,内置对象,JavaScript,的内置对象（内置类）框架如图所示。,2.6.2,基类,Object,所有的,JavaScript,对象都继承自,Object,类，后者为前者提供基本的属性（如,prototype,属性等）和方法（如,toString(),方法等）。而前者也在这些属性和方法基础上进行扩展，以支持特定的某些操作。基类,Object,的属性和方法见表,2-2,所示。,2.6.3 Date,类,Date,类主要提供获取和设置日期和时间的方法，如,getYear(),、,getMonth(),、,getDate(),等。,Date,类的常用方法见表,2-3,所示。,2.6.4 String,类,String,是,JavaScript,的字符串类，用于管理和操作字符串数据。,可以使用下面,2,种方法创建,String,对象：,MyStr=new String(,这是一个测试字符串,);/,把参数作为,MyStr,对象的初始值。,MyStr=,这是一个测试字符串,;/,直接对,String,对象赋值字符串,String,类只有一个属性,length,，用来返回字符串的长度。,【例,2-18,】计算,String,对象的长度。,var MyStr;,MyStr=new String(,这是一个测试字符串,);,console.log(,“,+MyStr+,”的长度为,:+MyStr.length);,/,演示使用,String,对象的,length,属性,运行结果如下：,“这是一个测试字符串”的长度为,:9,String,类的常用方法见表,2-4,所示。,2.6.4 String,类,【例,2-19,】演示,slice(),方法的例子。,var str=Hello world!,console.log(str.slice(6,11),2.6.5 Array,类,Array,数组是在内存中保存一组数据。,Array,类的常用方法见表,2-5,所示。,1,Array,数组创建与使用,方法一：可以使用,new,关键字创建,Array,对象，方法如下：,Array,对象,=new Array(,数组大小,),例如下面的语句可以创建一个由,3,个元素组成的数组,cars,：,var cars=new Array(3);,通过下面的方法访问数组元素。,数组元素值,=,数组名,索引,var cars=new Array(3);,cars0=Audi;cars1=BMW;cars2=Volvo;,方法二：在创建数组对象的时候给元素赋值。,var cars=new Array(Audi,BMW,Volvo);,方法三：直接赋值。,var cars=Audi,BMW,Volvo;,2.6.5 Array,类,2,数组遍历,可以使用,for,语句遍历数组的所有索引，然后使用数组名,索引,方法访问每个数组元素。,【例,2-20,】使用,for,语句遍历数组。,var MyS