JavaScript基础教程PPT完整全套教学课件

JavaScript基础教程01第1章JavaScript简介02第2章JavaScript语法基础03第3章JavaScript程序结构04第4章函数05第5章JavaScript事件06第6章JavaScript内置对象07第7章面向对象编程基础08第8章综合案例第1章JavaScript简介JavaScript基础教程学习目标

1.1什么是JavaScript011.1什么是JavaScript

JavaScript是基于对象和事件驱动的客户端脚本语言，不需要编译即可直接在浏览器上运行。JavaScript依赖于浏览器，因此JavaScript的诞生是在浏览器之后的。史上第一个浏览器的诞生是在1990年，1994年Netscape公司发布了Navigator浏览器，这是第一款比较成熟的浏览器，但只能浏览，提交表单时不知道是否提交成功，还得向服务器发出请求，判断是否提交成功，这样非常麻烦，因此JavaScript为了解决这一问题而诞生。1995年，BrendanEich花了10天的时间设计出了JavaScript。不过借鉴的来源很多，借鉴了C语言的基本语法、Java的数据类型、Java的对象体系、Scheme的函数等。脚本语言也称为动态语言，以文本保存，可以使用任何文本编辑器编写。脚本语言一般比较简单、易学、易用，类似于命令，可以快速开发，方便部署，运行简单。脚本语言根据运行环境划分，可以分为客户端脚本语言和服务器端脚本语言。1.1什么是JavaScript客户端脚本语言可以在客户端直接运行，一般不需要连接数据库，可以减小服务器的压力。客户端脚本语言不需要编译，通过浏览器还可以看到源代码，相对没有那么安全。一般使用客户端脚本语言进行有效性验证，比如表单验证，验证两次密码是否一致。常见的客户端脚本语言有JavaScript、JScript、VBScript等。服务器端脚本语言也是人们说的后台编程语言，一般需要连接数据库和编译成二进制可执行文件再执行，通过浏览器不能查看源代码，相对于客户端脚本语言更安全。一般使用服务器端脚本语言进行安全验证，比如可以使用加密算法，将密码加密后保存到数据库当中。常见的服务器端脚本语言有ASP、PHP、JSP等。1.1什么是JavaScript

JavaScript的主要特点：轻量级、解释型语言、跨平台性等。其中，轻量级是指需要遵循的惯例和规则比较少，或者说遵循起来比较简单。JavaScript的语法简单，依赖比较少，调试也方便。解释型语言是指不需要编译直接运行。JavaScript只需要将其写在网页中，不需要编译，打开浏览器就可以运行查看结果。跨平台性是指不依赖操作系统和硬件环境，不管在什么平台都可以运行。JavaScript仅依赖于浏览器，与操作环境无关，只要有支持JavaScript的浏览器就可以执行。

JavaScript主要用于Web前端开发，想做前端开发就必须了解JavaScript。现在前端专业有很多框架，比如比较流行的Bootstrap、Foundation、Vue.js、Angular.js等框架，都要用到JavaScript或者jQuery，jQuery是JavaScript的代码库，也是基于JavaScript基础的。比如Bootstrap要实现轮播图、折叠、响应式导航、下拉菜单等就必须先引用jQuery。Foundation与Bootstrap类似，也需要引用jQuery。Vue.js与Angular.js也都需要有JavaScript基础。

1.2JavaScript与Java的区别021.2JavaScript与Java的区别初学JavaScript时，很多人都会问JavaScript与Java有什么关系，虽然它们名字很相似，但两者本质上是不同的，没有任何血缘关系，就像菠萝与波罗蜜,京东与京东方一样。Java原名Oak语言，申请注册时Oak已被人使用了，故改成了Java语言，Java是提议者在喝咖啡时想到的，因此Java语言的图标是一杯咖啡。而JavaScript语言原名LiveScript，后因Java非常受欢迎，Netscape公司因为营销策略与Sun公司合作，将其改名为JavaScript。JavaScript只是为了名字和Java类似，方便宣传与推广。JavaScript的语法其实与Java的语法有非常大的差异，JavaScript主要借鉴的是C语言与Scheme的函数，C语言是面向过程的编程语言。

JavaScript与Java所属的公司不同，JavaScript是Netscape公司发布的客户端脚本语言,Java是Sun公司发布的面向对象的程序设计语言。1.2JavaScript与Java的区别

JavaScript与Java的执行方式不同，JavaScript是解释性语言，不需要编译即可直接在浏览器上执行，JavaScript还不可以对服务器端的数据进行操作。而Java可以连接数据库，对服务器端的数据进行增删改查等操作，不过Java需要先编译成.class文件再执行，Java主要在服务器上运行。

JavaScript与Java的数据类型不同，Java编译前要检测变量的数据类型，比较严格，属于强类型语言，而JavaScript没那么严格，属于弱类型语言。

JavaScript与Java的用途也不一样,JavaScript主要用于用户输入内容的有效性验证、网页游戏开发、动态效果等，而Java主要用于后台程序设计、安全性验证等。

JavaScript与Java从本质上是两种完全不同的语言，但也有相似之处：都严格区分大小写；JavaScript借鉴了Java的基础语法和对象体系，JavaScript是基于对象的，Java是面向对象的。

1.3JavaScript能做什么031.3JavaScript能做什么在网页中，HTML是超文本标记语言，负责主体结构的搭建；CSS是层叠样式表，负责修饰；JavaScript是脚本语言，负责动态交互效果。JavaScript最初是为了判断表单是否提交成功而诞生的，JavaScript主要用于表单验证、事件处理、网页游戏、改变HTML内容、改变样式、文字特效、轮播图、放大特效等动态网页特效，比如：用户注册登录时，可以验证用户输入的信息是否为有效的，判断内容是否为空，内容的长度、数据类型、两次输入的值是否一致等；还可以有相关的事件处理，获取焦点、失去焦点、文本改变、选中文本、提交、重置等操作都可以触发不同事件。现在很多网站注册登录都在一个页面上，还可以使用JavaScript实现选项卡的切换效果。导航栏可以使用鼠标事件实现，一般网站的导航是水平导航，可以使用鼠标经过与移开事件实现鼠标移上去显示二级菜单，移开二级菜单隐藏。后台管理的导航一般是垂直导航，可以使用单击事件实现单击一级菜单显示或隐藏二级菜单，还可以使用DOM动态添加子节点。1.3JavaScript能做什么网站首页一般有轮播图，也可以使用JavaScript实现，而且实现方法还很多，最简单的是将图片名称改成数字，通过数字自增，改变图片路径，实现每隔几秒切换一张图片；可以使用数组存放图片，通过索引配合单击事件实现上一张下一张的翻页效果；还可以使用鼠标移入移出事件实现鼠标经过停止轮播，移开继续轮播。现在电子商务非常流行，购物网站的很多特效也都可以通过JavaScript实现，比如商品展示页面可以将鼠标放到商品上实现放大镜效果，放大显示查看细节；展示列表过长，可以有滚动到顶部功能；购物车页面可以实现单击添加或减少数量、计算总价、全选等操作；还可以在页面上有浮动的广告窗口等。

JavaScript不仅可以实现很多动态交互效果，比如倒计时、时间的获取、随机点名、文字图片旋转、渐变效果、淡入淡出效果、换肤效果等，还可以做简易计算器、网页游戏等。

1.4JavaScript开发环境041.4JavaScript开发环境

JavaScript以文本保存，可以使用任何文本编辑器编写。比如最简单的记事本，EditPlus也方便小巧，EditPlus编辑器功能更强大，不仅可以处理文本、HTML程序语言，同时编辑多文件，还可以无限制地撤销与重做。JavaScript一般嵌套在HTML代码中，所以可以根据网页需求选择不同的编辑器。现在比较流行的编辑器有HBuilder、SublimeText3、Dreamweaver、WebStorm、IntelliJIDEA、VisualStudioCode等。每款软件都有各自的优缺点，下面简单介绍一下Dreamweaver、SublimeText、HBuilder三款软件。1.4JavaScript开发环境

1.4.1开发工具１.Dreamweaver

Dreamweaver是Adobe公司的一款可视化编程软件，初始界面中间分三列，第一列可以打开最近的项目，第二列可以新建HTML、PHP、CSS、JavaScript文件等，还可以创建站点，方便整个项目的管理，第三列介绍软件的主要功能。下方还有快速入门、新增功能、资源等，方便使用者学习。其初始界面如图1-1所示。1.4JavaScript开发环境1.4JavaScript开发环境

1.4.1开发工具１.Dreamweaver单击初始界面中的新建HTML，进入其工作界面，工作界面有代码、设计、拆分三种视图。代码视图中代码有不同颜色标识，在敲代码时也有很多提示，不过对于初学者不建议使用提示，不然连标签、属性名都记不全。初学者适合使用拆分模式，一边敲代码一边看效果。设计视图用得比较少，设计视图可能会生成很多不必要的代码。其工作界面如图1-2所示。1.4JavaScript开发环境1.4JavaScript开发环境

1.4.1开发工具２.SublimeText

SublimeText是程序员JonSkinner开发的，是目前主流的前端开发编辑器，其特点是体积小、运行速度快、可以自动补全代码，而且代码高亮提示，界面比较美观，方便用户查看。SublimeText安装方便，但需要很多插件。SublimeText可以新建HTML、CSS、JavaScript、Java、C、ASP、PHP等多种文件，其工作界面如图1-3所示。1.4JavaScript开发环境1.4JavaScript开发环境

1.4.1开发工具３.HBuilder

HBuilder是DCloud（数字天堂）公司推出的，现在很多公司开发时都使用的是HBuilder，HBuilder初始界面有软件使用手册，HBuilder的最大优势是快，有完整的语法提示、代码块等，可以大大提高开发效率。创建Web项目时可以自动生成CSS、IMG、JS文件夹。其工作界面如图1-4所示。其中，Dreamweaver开发效率相对要低些，但站点管理和拆分视图还不错，可以一边敲代码一边看效果，能很快看到效果，方便教学，很多老师教学都使用的是Dreamweaver软件，对于初学者也适合使用Dreamweaver。但对于公司来说，更注重开发效率，一般使用的是SublimeText和HBuilder。用户可以根据具体情况选择不同的软件进行编码。1.4JavaScript开发环境1.4JavaScript开发环境

1.4.2浏览器浏览器是用来显示网页中的文字、图像等信息，用户还可以通过浏览器进行操作，产生交互效果。从1990年浏览器诞生至今，有很多浏览器，但浏览器的内核有所不同，都有各自的私有属性，也就出现了兼容性问题。现在主流的浏览器有谷歌、IE、火狐等，下面简单介绍这三种浏览器。1.4JavaScript开发环境

1.4.2浏览器１.IE浏览器

IE（InternetExplorer）浏览器是微软公司推出的，其内核（IE内核）是微软独立开发的，只支持Windows操作系统。360、搜狗浏览器的内核也是IE内核。不同版本的IE浏览器对JavaScript的支持情况是不同的，因此针对IE浏览器会编写很多代码处理兼容性问题。IE浏览器限制网页运行脚本或ActiveX控件，需要允许阻止的内容才能运行，看到JavaScript代码的运行效果。IE浏览器的调试可以通过右键检查元素或按F12键直接进入，如图1-5所示。其中，DOM资源管理器面板显示的是页面结构，可以在右侧修改样式，查看布局及事件等，使用三个图标分别可以检查元素、突出显示元素、颜色选取器；控制台面板显示报错、警告等信息；调试程序面板可以添加断点、监听调试；网络面板可以请求网络资源的路径时间等信息。1.4JavaScript开发环境1.4JavaScript开发环境

1.4.2浏览器２.谷歌浏览器谷歌浏览器（GoogleChrome）是谷歌公司推出的，其内核是WebKit，多线程虚拟机运行速度快，不容易崩溃，还有防止恶意软件功能，非常安全。谷歌浏览器调试与IE类似，调试JS可以在页面上单击右键然后选择检查，也可以直接按F12键或者Ctrl+Shift+I快捷键进入调试页面，如图1-6所示。其中，Elements（元素）面板显示页面结构，下方可以修改样式、事件监听等，使用其前方两个图标分别可以检查元素、切换类别，查看不同分辨率下的效果；同样有控制台、资源、网络、性能、内存等面板；Sources（资源管理）面板中可以打断点调试JS文件；Network（网络）面板中还可以查看具体的耗时情况。1.4JavaScript开发环境1.4JavaScript开发环境

1.4.2浏览器３.火狐浏览器火狐浏览器（MozillaFirefox），其内核是Gecko，支持多种操作系统。火狐浏览器调试JavaScript与IE、谷歌类似，按F12键，打开调试器面板，可以通过断点调试，如图1-7所示。1.4JavaScript开发环境

1.4.3Web服务器

Web服务器的主要作用是可以放置网站文件、数据文件等相关文件，可供全世界浏览、下载。Web服务器的工作原理：先与浏览器建立连接，用户可以发出请求，然后Web服务器做出响应，最后将效果返还浏览器。IIS服务器是现在流行的大型Web服务器，下面将简单的介绍IIS配置与网站部署。1.4JavaScript开发环境

1.4.3Web服务器１.IIS的配置步骤首先，在控制面板找到“程序和功能”，然后打开“打开或关闭Windows功能”，勾选“Internet信息服务”“FTP服务器”“Web管理工具”“万维网服务”等复选框，如图1-8所示。1.4JavaScript开发环境1.4JavaScript开发环境

1.4.3Web服务器２.浏览网站打开IIS管理器，有一个默认的网站DefaultWebSite，先启动IIS的目录浏览功能，再单击右侧的浏览就可以在“浏览网站”选项器上浏览网站了。浏览器上该网站的路径是http://localhost/。IIS管理器界面如图1-9所示。1.4JavaScript开发环境1.4JavaScript开发环境

1.4.3Web服务器１.IIS的配置步骤在IIS管理器界面也可以添加部署自己做的网站，填写网站名称，选择网站路径，绑定IP地址与端口，就可以在浏览器上浏览自己的网站了，其中绑定的网站的端口不可以重复。“添加网站”对话框如图1-10所示。1.4JavaScript开发环境

1.5在HTML中使用JavaScript051.5在HTML中使用JavaScript

JavaScript代码可以直接嵌套在HTML中，也可以在网页中引用外部JS文件。不管是嵌套在网页中的JavaScript代码，还是引用外部JS文件都需要<script></script>标签。比如要在文档加载时弹出对话框，显示"hello，javascript!"，可以有很多方式实现，现详细讲解JavaScript代码写在头部、绑定在HTML元素上、引用外部JS文件三种方式。1.5在HTML中使用JavaScript1.5.1JavaScript代码写在头部可以将JavaScript代码写在<head>与</head>之间，例如：1.5在HTML中使用JavaScript

1.5.1JavaScript代码写在头部其中，第6~11行代码为JavaScript代码，在<head></head>内部，用<script></script>标签包裹,第7~9行代码为test（）方法，弹出对话框显示"hello,javascript!";第10行代码为当加载文档时调用test方法。1.5在HTML中使用JavaScript1.5.2绑定在HTML元素上JavaScript代码也可以写在元素内，一般通过事件进行绑定，例如：1.5在HTML中使用JavaScript1.5.2绑定在HTML元素上1.5在HTML中使用JavaScript1.5.2绑定在HTML元素上1.5在HTML中使用JavaScript1.5.3引用外部JS文件HTML文件(1-5.html)中的代码如下：1.5在HTML中使用JavaScript

1.5.3引用外部JS文件其中，第6行代码为引用外部JS文件，src是文件的相对路径，type是文本类型。外部JS文件（test.js）中的代码如下：引用外部JS文件也可以不将事件绑定在元素上，使行为与结构分离，把body上的“onload="test()"”去掉，在JS文件中添加“window.onload=test;”。

1.6本章小结06

JavaScript是基于对象和事件驱动的客户端脚本语言，不需要编译，可以直接在浏览器上运行。JavaScript有轻量级、跨平台等特性。JavaScript与Java本质上是两种完全不同的语言，JavaScript是脚本语言、解释型语言、弱类型语言；Java是编程语言、强类型语言，需要编译再执行。JavaScript主要用于表单验证、事件处理、网页游戏、改变HTML内容、改变样式、文字特效、轮播图、放大特效等动态网页特效。JavaScript以文本保存，可以使用任何文本编辑器编写。JavaScript代码可以直接嵌套在HTML中，也可以在网页中引用外部JS文件。1.6本章小结谢谢观看！JavaScript基础教程第2章JavaScript语法基础学习目标

2.1数据类型012.1数据类型数据类型是对数据的一种描述。程序语言中引入数据类型既是为了更合理地分配内存空间，也规范了数据之间的操作。JavaScript中的数据类型可以简单地分为基本数据类型和引用数据类型。2.1数据类型

2.1.1JavaScript数据类型的特点

JavaScript是弱类型语言，与C、Java等强类型语言比较，在定义变量时不需要严格指定变量的数据类型，但是变量的值仍然是保存在内存中的，也是具有数据类型概念的。Java-Script中变量的数据类型是解释时动态指定的，例如：其中，第1行代码定义变量x，此时x是未定义（Undefined）类型；第2行代码对变量x赋值为10，此时x是数字（Number）型；第3行代码对变量x赋值为"hello"，此时x是字符串（String）型。2.1数据类型

2.1.2基本数据类型

JavaScript中的基本数据类型包括数字(Number)型、字符串（String）型、布尔(Boolean)型、空（Null）类型、未定义（Undefined）类型等。在ECMAScript6中还引入了Symbol类型，用于表示独一无二的值。2.1数据类型

2.1.2基本数据类型１.数字(Number)型

JavaScript中只有一种数字类型，不区分整型和浮点型，无论什么数值都采用IEEE754标准定义的64位浮点型来存储。根据进制的不同，可以采用十进制、八进制和十六进制等不同的表示方法，例如：其中，第1行代码对变量赋值为十进制整数；第2行代码对变量赋值为八进制整数；第3行代码对变量赋值为十六进制整数。若数字以0开头，后面跟0~7组成的数字序列，则该数字为八进制表示。若数字以0x开头，后面跟0~9、A~F的序列，则该数字为十六进制表示。2.1数据类型

2.1.2基本数据类型１.数字(Number)型在表示浮点数时，可以采用传统计数法和科学计数法两种方法。对于极大或极小的数，一般采用科学计数法表示，例如：其中，第1行代码采用传统计数法，将浮点数分为整数、小数点和小数三个部分，如123.456、0.254等；第2行代码采用科学计数法，将浮点数表示为aEn的形式，即a×10n，如1.23E2、7.4E-3等。2.1数据类型

2.1.2基本数据类型１.数字(Number)型在JavaScript中还有NaN和Infinity两个特殊的常量，用于表示非数字和超出JavaScript表示范围的数字，例如：其中，第1行代码计算表达式12*"hello"的值，计算结果是没有意义的数字，使用NaN（即NotaNumber的缩写）表示。NaN不与任何数字相等，可以使用函数isNaN()来判断一个结果是否为数字。第2行代码的数字范围超出了JavaScript所能表示的最大范围，使用Infinity表示，即无限大的意思；如果数字超出了JavaScript所能表示的最小范围，则使用-Infinity表示，即无限小的意思。JavaScript中数字最大和最小值可以通过Number对象的MAX_VALUE和MIN_VALUE属性获取。2.1数据类型

2.1.2基本数据类型１.数字(Number)2.1数据类型

2.1.2基本数据类型２.字符串（String）型

JavaScript中将引号（双引号或单引号）括起来的字符序列称为字符串类型，用于表示普通文本，如'hello'、"hello"、'admin@163.com'、'学习JavaScript很容易'等。在使用字符串时要注意引号的成对使用。双引号括起来的字符串中可以包含单引号，单引号括起来的字符串中可以包含双引号，但双引号和单引号不能交叉使用，例如：2.1数据类型

2.1.2基本数据类型２.字符串（String）型其中，第1行代码使用双引号对字符串进行界定；第2行代码使用单引号对字符串进行界定；第3行代码使用双引号对字符串进行界定，双引号内的单引号被当作普通字符处理，不具有字符串界定的功能；第4行代码使用单引号对字符串进行界定，单引号内的双引号被当作普通字符处理，不具有字符串界定的功能；第5行代码，等号后是双引号，所以以双引号作为字符串的界定符号，在hello后找到对应的双引号，结束字符串，后面的JavaScript无法处理，故出现语法错误；第6行代码的错误原因与第5行代码类似。2.1数据类型

2.1.2基本数据类型２.字符串（String）型在实际应用中，某些时候，需要在双引号中包含双引号、单引号中包含单引号，这时就需要用到转义字符。转义字符用于在字符串中插入省略号、引号、换行符和其他特殊字符，通常在特殊字符前加上反斜杠（\\）实现。常用转义字符如表2-1所示。2.1数据类型

2.1.2基本数据类型２.字符串（String）型

2.1数据类型

2.1.2基本数据类型３.布尔(Boolean)型布尔类型通常用来表示逻辑上的真或假。该类型只有两个值：true和false，分别代表真和假。布尔值经常用来表示条件测试，在以下两种情况下使用。

(1)作为关系表达式、逻辑表达式的计算结果。

(2)作为开关标志，表示某种功能是否允许。布尔值用作测试，可以放在判断语句中，例如：2.1数据类型

2.1.2基本数据类型３.布尔(Boolean)型其中，第1行代码将关系表达式3>4的结果赋值给b，结果为false；第2行代码将关系表达式4>3的结果赋值给b，结果为true；第4行代码将a>b作为判断条件，结果为true，执行第5行代码。2.1数据类型

2.1.2基本数据类型４.空（Null）类型

JavaScript中的null表示“nothing”，被看作不存在的事物。null是一种独立的数据类型，通过typeof测试null，发现它是Object类型。人们经常通过对对象设置null来清空对象，例如：其中，第2行代码的输出结果为null；第3行代码的输出结果为Object，说明此时person仍是一个对象，但值是null。2.1数据类型

2.1.2基本数据类型

5.未定义（Undefined）类型

JavaScript中的undefined表示没有赋值的变量，例如：2.1数据类型

2.1.2基本数据类型６.Symbol类型

Symbol类型是ECMAScript6才引入的一种新的原始数据类型，表示独一无二的值，主要用于定义对象的唯一属性名。由于每一个Symbol的值都是不相等的，所以Symbol作为对象的属性名，可以保证属性不重名。2.1数据类型

2.1.3数据类型的转换在JavaScript中，对不同数据类型的数据进行运算时，要先对数据类型进行转换，得到相同的数据类型，才能进行运算。例如：计算表达式1+'1'的结果。在运算过程中，先将整型1转换为字符串类型，再与后面的字符串进行连接操作，得到字符串'11'。数据类型的转换有隐式转换和显式转换两种。2.1数据类型

2.1.3数据类型的转换１.隐式转换隐式转换是指在计算过程中，JavaScript根据计算的需要，将操作数自动转换为需要的类型的过程。隐式转换是系统自动完成的。隐式转换规则如表2-2所示。2.1数据类型2.1数据类型

2.1.3数据类型的转换１.隐式转换其中，第1行代码将数字1与字符串'1'相“+”，先将数字1隐式转换为字符串'1'，再与字符串'1'相连接，得到结果'11';第2行代码将布尔值true与字符串'1'相“+”，先将布尔值true转换为字符串'true'，再与字符串'1'相连接，得到结果"true1"；第3行代码类似前两行代码处理，先将null转换为字符串'null'，然后执行连接操作，得到结果'null2'；第4行代码先将字符串'10'转换为数字10，再除以5，得到结果2；第5行代码先将字符串'abc'转换为数字NaN，再除以2，得到结果NaN；第6行代码将true转换为数字1，再与数字1相加，得到结果2。2.1数据类型

2.1.3数据类型的转换２.显式转换显式转换是指由代码编写者通过JavaScript提供的转换方法进行的强制数据类型转换。JavaScript提供了Number、String、Boolean三个对象，以及parseInt、parseFloat、toString三个函数进行显式转换。显式转换规则如表2-3所示。2.1数据类型2.1数据类型

2.1.3数据类型的转换２.显式转换在编程中，应根据实际需要对数据类型进行显式转换，例如：2.1数据类型

2.1.3数据类型的转换２.显式转换其中，第7行代码将字符串'123abc'解析为整型，字符串开头部分为数字字符串，则将这部分解析为数字；第8行代码，解析方法相似；第9行代码，字符串以非数字开头，整个字符串解析为NaN；第10行代码将字符串'44'当作十六进制表示，并解析为整型，故解析为十进制数68；第13行代码将12转换为二进制的字符串。2.1数据类型

【课堂案例2-1】基本数据类型的应用案例描述：在页面中输出各种数据类型的数据，并对数据类型进行转换，观察结果。案例目标：掌握JavaScript的基本数据类型。掌握基本数据类型的转换。案例代码：（2-1.html）2.1数据类型

【课堂案例2-1】基本数据类型的应用案例结果：通过浏览器运行代码，并打开浏览器控制台，输出各种数据类型的数据，如图2-1所示。案例分析：通过document.write()方法向页面输出内容时，无论输出的数据是什么类型，都将被转换成字符串输出。为了看到不同数据类型的输出结果，本案例采用console.log()方法在控制台输出。另外，可以通过typeof测试数据的数据类型。2.1数据类型

2.1.4引用数据类型

JavaScript中除了基本数据类型外，还有一种引用数据类型，也称为复杂数据类型。该数据类型存放的不是一个简单的值，而是很多不同数据类型的值的集合。JavaScript中的基本数据类型是直接存储在栈区的，操作时是对该数据的直接操作；而引用数据类型的数据是存储在堆区的，在栈区中存放的是指向该数据的地址，即操作的是对该数据的引用。

JavaScript中的引用数据类型包括数组、函数、对象等。2.1数据类型

2.1.4引用数据类型１.数组

JavaScript中的数组是一组有序数据的集合。一个普通变量可以存放一个值，而数组可以存放多个值。数组中的每个值称为数组元素。数组元素从0开始按顺序进行编号，称为索引。可以通过索引访问数组中指定位置的元素，例如：其中，第1行代码定义数组类型变量arr，并初始化；第2行代码访问数组中的第3个元素，并输出。通过索引访问数组元素时，索引从0开始。2.1数据类型

2.1.4引用数据类型２.函数

JavaScript中的函数实际是一个对象，实现了对代码块的封装。一般将一段具有独立功能的代码定义为一个函数，以便对代码块进行调用。函数定义的基本格式如下：

functionfunName(形参1,形参2,形参3,…){代码块

}

funciton是函数定义的关键字；funName是自定义的函数名，可以是任意合法的自定义标识符；形参实际就是变量，表示函数需要用到的一些参数，调用函数时传递不同的参数，即可实现不同的具体功能；“{”与“}”之间是函数中的代码块，即函数要实现的功能代码，称为函数体。2.1数据类型

2.1.4引用数据类型２.函数函数定义后，需要被调用才能起作用。函数调用的基本格式如下：

funName(实参1,实参2,实参3,…);在函数调用时，将实参依次传递给形参，并执行函数定义中的代码块。带参数的函数调用，可以在不改变函数定义的情况下，实现更多的功能，例如：其中，第1行代码定义函数并取名为myPrint；第2行代码为函数的函数体；第4行代码，调用自定义函数，结果是在页面输出“这是自定义的输出函数，输出的内容为：hello”。2.1数据类型

2.1.4引用数据类型３.对象

JavaScript中的对象是拥有属性和方法的数据集合。现实生活中的万事万物皆可看作对象，如一辆汽车。汽车有颜色、尺寸、品牌、型号等特征，同时也有行驶功能。在程序中，通过变量描述对象的特征，称为对象的属性；通过函数描述对象的功能，称为对象的方法。定义对象的基本格式如下：2.1数据类型

2.1.4引用数据类型３.对象

objName是自定义的对象名；“{”与“}”之间是对象的数据集合；对象的数据通过名称和值的关系描述，如果值为基本数据，则称之为对象的属性，如果值是函数，则称之为对象的方法。每项数据之间通过逗号隔开（不是分号），最后一项数据后可以省略逗号。2.1数据类型

2.1.4引用数据类型３.对象对象定义后，访问对象属性和方法的格式如下：

objName.属性名；

objName.方法名(实参1,实参2,…);点运算符（.）实现了对对象属性和方法的调用，例如：2.1数据类型

2.1.4引用数据类型３.对象其中，第1~7行代码定义了一个对象；第8行和第9行代码分别调用对象的属性和方法。2.1数据类型

【课堂案例2-2】对象的基本应用案例描述：定义汽车对象，并定义汽车的属性和方法，在页面输出汽车的信息。案例目标：了解对象的基本定义的方法。了解对象属性和方法的调用的方法。2.1数据类型

【课堂案例2-2】对象的基本应用案例代码：（2-2.html）2.1数据类型

【课堂案例2-2】对象的基本应用案例结果：通过浏览器运行代码，结果如图2-2所示。案例分析：第3~16行代码定义car对象；第4~6行代码定义对象的属性；第7~15行代码定义对象的方法；第19~21行代码分别调用对象的属性；第23、25、27行代码分别调用对象的方法。在定义对象的方法时，可以在对象内直接赋值为一个匿名函数，也可以赋值为对象外定义的命名函数。

2.2变量和常量022.2变量和常量

JavaScript中的变量和常量都可以被视为存放数据的容器，都是内存中的一块空间。两者的不同之处在于,变量在程序运行过程中，值是可以改变的；而常量的值是不变的。

2.2.1常量在JavaScript中，常量是在程序运行过程中保持不变的量。在进行赋值操作时，“=”号右边的值一般都为常量值，如123、"abc"等。在编写代码的过程中，有时需要重复用到同一个值，为了简化代码的书写，提高开发效率，通常将这样的值定义为一个常量。常量定义的基本格式如下：

const常量名=常量值;

const是定义常量的关键字；为区分变量和常量，常量名通常大写。2.2变量和常量

2.2.1常量

常量定义后，在程序运行过程中，只能通过常量名对常量值进行调用，不能对其值进行修改，例如：其中，第1行代码定义常量并赋值；第2行代码输出常量值3.14；第3行代码试图修改常量的值，报错"Assignmenttoconstantvariable"。2.2变量和常量

2.2.2变量１.变量的定义

JavaScript中，定义变量的基本格式如下：

var变量名1,变量名2,…;

JavaScript中使用var关键字定义变量，定义时不需要严格定义变量类型。变量名必须符合JavaScript标识符规则，由Unicode字符和数字组成，具体规则如下：（1）变量名由字母、数字、下划线(_)和美元符号($)组成。（2）变量名不能以数字开头。（3）变量名中不能包含空格和其他标点符号。（4）变量名不能是JavaScript中的关键字。2.2变量和常量

2.2.2变量１.变量的定义

JavaScript中的关键字是预先定义好的有特殊作用的字符串，如var、function、null等。在自定义变量名、函数名、对象名、数组名等时，都不能使用这些关键字。Java-Script常用关键字如表2-4所示。2.2变量和常量2.2变量和常量

2.2.2变量

２.变量的赋值变量定义后，应该对其赋值。没有赋值的变量，值为undefined。变量可以在定义的同时赋值，也可以先定义后赋值。JavaScript中也可以直接对未定义的变量赋值，例如：其中，第1行代码定义两个变量；第2行和第3行代码分别对已定义的变量赋值；第4行代码定义变量，同时对变量赋值；第5行代码直接对未定义的变量赋值。2.2变量和常量

2.2.2变量

３.变量的作用域变量的作用域是指变量起作用的范围。根据变量作用域的不同，可分为局部变量和全局变量。局部变量，是指在函数内部定义的变量。该变量的作用域范围是从定义变量的位置到函数结束。函数执行结束，局部变量自动销毁。全局变量，是指在函数外定义的变量。该变量的作用域范围是页面中的所有Java-Script代码。页面关闭后，全局变量才销毁。2.2变量和常量

2.2.2变量

３.变量的作用域在编程中，应根据实际需要适当设置全局和局部变量，例如：2.2变量和常量

2.2.2变量

３.变量的作用域

其中，第2行代码调用变量str，由于第3行代码定义了变量str，所以该行代码未报错，而是undefined的结果；第3行代码定义局部变量str并赋值；第4行代码调用变量str，此时str已经被赋值，结果为"JavaScript"；第6行代码调用已定义的函数；第7行代码定义全局变量num，并赋值；第8行代码调用全局变量，结果为2；第9行代码在函数外调用局部变量，报错。2.2变量和常量

【课堂案例2-3】常量和变量的使用案例描述：求一个圆的周长和面积。案例目标：掌握常量的使用。掌握变量的使用。理解变量的作用域。案例代码：（2-3.html）2.2变量和常量

【课堂案例2-3】常量和变量的使用案例结果：在浏览器中运行代码，结果如图2-3所示。案例分析：计算圆周长时，产生了精度丢失的现象。原因是JavaScript中将所有的数字都按照64位浮点数存储。数据运算时，要先转换为二进制，在转换为二进制的过程中可能出现意想不到的情况，产生精度丢失。解决精度丢失，比较简单的办法就是通过toFixed()方法保留精度。

2.3运算符和表达式032.3运算符和表达式运算符又称操作符，是完成算术运算、逻辑运算、关系运算等一系列操作的符号。由运算符和操作数构成的集合称为表达式。表达式具有“值”和“类型”两个属性。

JavaScript中的运算符和表达式主要有以下几类。（1）算术运算符和表达式。（2）赋值运算符和表达式。（3）关系运算符和表达式。（4）逻辑运算符和表达式。（5）字符串运算符和表达式。（6）条件运算符和表达式。（7）位运算符和表达式。2.3运算符和表达式

2.3.1算术运算符和表达式算术运算符一般用于算术运算，包括加、减、乘、除、取余、自加、自减等。算术运算符的具体用法如表2-5所示。2.3运算符和表达式

2.3.1算术运算符和表达式

在进行算术运算运算时，应遵循运算符的优先级，也可以通过“()”改变优先级。算术运算符的优先级如图2-4所示。2.3运算符和表达式

2.3.2赋值运算符和表达式赋值运算符一般用于将一个数据赋值给一个变量。赋值运算符可以和算术运算符、位运算符等结合，形成复合赋值运算符。赋值运算符的具体用法如表2-6所示。2.3运算符和表达式2.3运算符和表达式

2.3.3关系运算符和表达式关系运算符一般用于对两个数据进行比较，并返回一个布尔值。关系表达式一般用于判断语句中。关系运算符的具体用法如表2-7所示。2.3运算符和表达式2.3运算符和表达式

2.3.4逻辑运算符和表达式逻辑运算符用于测试变量或数据之间的逻辑关系，逻辑运算符两侧的数据都应是布尔型，返回结果也是布尔型。逻辑运算符的具体用法如表2-8所示。2.3运算符和表达式

2.3.5字符串运算符和表达式对两个字符串进行“+”操作，表示连接两个字符串。例如："hello"+"JavaScript"，结果为"helloJavaScript"。“+”也同样用于两个数字的算术加操作，判断“+”是用于算术加，还是字符串连接，主要取决于操作数。如果两侧的操作数都是数字，则“+”表示算术加。如果两侧的操作数有一个是字符串，则“+”表示字符串连接。此时，两侧的操作数都将转换为字符串类型。2.3运算符和表达式

2.3.6条件运算符和表达式条件运算符是一个需要3个数据的运算符，其作用相当于一个if…else语句。条件运算符的基本格式如下：条件表达式?表达式1：表达式2；当“条件表达式”为真时，返回“表达式1”的值；否则，返回“表达式2”的值，例如：其中，第4行代码使用条件运算符，求x和y中的较大值，并赋值给变量z。2.3运算符和表达式

2.3.7位运算符和表达式位运算符是指将数据转换为二进制数，对二进制数按位进行运算，再将运算结果转换为十进制数返回。位运算符的具体用法如表2-9所示。2.3运算符和表达式

2.3.7位运算符和表达式2.3运算符和表达式【课堂案例2-4】运算符的使用案例描述：使用运算符，判断年份是否是闰年。案例目标：掌握运算符的基本使用。案例代码：（2-4.html）2.3运算符和表达式

【课堂案例2-4】运算符的使用案例结果：使用运算符，判断年份是否是闰年。案例分析：第2行代码通过函数prompt()接收用户的输入，并将其转换为数字类型。第3行代码通过条件运算符，判断是否是闰年。闰年的条件是，能被4整除，且不能被100整除；或能被400整除。第4行代码通过函数alert()输出信息，输出的内容通过字符串连接符（+）进行连接。

2.4本章小结04本章主要讲解了JavaScript中的数据类型、变量和常量、运算符和表达式等基础语法知识。

JavaScript包含数字、字符串、布尔、空、未定义等基本数据类型，还包含数组、函数和对象等引用数据类型。在ECMAScript6中引入了Symbol类型，表示一个唯一的值。在进行数据运算时，不同的数据类型会进行数据类型的转换，可以是隐式转换，也可以是显式转换。

JavaScript中通过变量存放数据，对于在程序运行过程中始终不变的量，可以定义为常量。根据变量作用的范围，将变量分为局部变量和全局变量。在程序中，应尽可能使用局部变量，更合理地利用内存空间。

JavaScript通过运算符对数据进行各种运算，包括算术运算符、赋值运算符、逻辑运算符、关系运算符、字符串连接符、条件运算符和位运算符等。合理的使用条件运算符，可以减少代码量。由操作数和操作符构成表达式，表达式构成语句，一条一条的语句就构成了程序。2.4本章小结谢谢观看！JavaScript基础教程第3章JavaScript程序结构学习目标

3.1顺序结构013.1顺序结构

顺序结构是指按照语句在程序中的先后顺序，逐条依次执行的程序结构。顺序结构是程序中最简单、最基本的结构。顺序结构如图3-1所示。3.1顺序结构JavaScript中的一条语句通常以分号（;）结束。语句一般由运算符和操作数构成的表达式组成，也可以包含函数调用、关键字、注释等。语句代表了发送给JavaScript引擎的一条指令，由不同的语句就构成了整个JavaScript程序，例如：整个程序中的语句按照语句的顺序依次执行。第3行代码在“=”的两边增加空格，以提高代码的可读性。3.1顺序结构

3.2选择结构023.2选择结构

选择结构是指在程序运行过程中，会根据一定的条件判断，选择性地执行一部分语句。通常需要根据某个条件是否满足来决定是否执行指定的语句，或者从给定的两个或多个语句中选择其一。基本的选择结构如图3-2所示。3.2选择结构

3.2.1简单的if语句简单的if语句一般用于简单的条件判断。在JavaScript中，if语句的一般格式如下：“表达式”一般是关系表达式，返回一个布尔值，也可以是逻辑表达式，甚至是一个常量值，只要其值能转换为一个布尔值即可。“语句块”可以是一条或多条语句，当有多条语句时，必须将语句块以“{}”括起来，当只有一条语句时，“{}”可以省略，例如：3.2选择结构3.2选择结构

3.2.1简单的if语句其中，第3~5行代码通过对话框接收用户输入，并分别存储在三个变量中；第6行代码使用if语句判断x和y变量值的大小，如果x大于y，则执行第7~9行代码，交换x和y的值,否则跳过此代码块，继续执行后面的代码;第11行代码对x和z比较大小，第16行代码对y和z比较大小，当大的数在前面时，则交换位置;第21行代码将交换位置后的三个数从小到大依次输出。3.2选择结构3.2.2if语句的其他形式if语句除了上面的一般形式外，还可以添加else子句，在else子句部分还可以嵌套多层的if语句，用于对更复杂条件的判断。1、if…else形式3.2选择结构3.2.2if语句的其他形式1、if…else形式当“表达式”为真时，执行语句块1，否则（即“表达式”为假）执行语句块2，例如：其中，第7行代码与第4行代码匹配，表示“x>0”不成立的条件，即x小于或等于零。3.2选择结构3.2.2if语句的其他形式2、if…elseif…形式在else子句部分，还可以嵌套多层的if语句，间接实现多分支结构。if…elseif…的一般格式如下：3.2选择结构3.2.2if语句的其他形式2、if…elseif…形式通过if…elseif…实现的选择结构如图3-3所示。3.2选择结构3.2.2if语句的其他形式2、if…elseif…形式if…elseif…可以实现较为复杂的选择结构，例如：3.2选择结构3.2.2if语句的其他形式2、if…elseif…形式if…elseif…可以实现较为复杂的选择结构，例如：其中，第12行代码对第一种可能的情况进行判断；第15行代码对第二种可能的情况进行判断；第20行代码对第三种可能的情况进行判断。对于分支较多的情况，使用这种形式虽然可以实现，但比较麻烦。JavaScript提供了专门的多分支语句switch…case,后面将进行详细介绍。3.2选择结构3.2.3if语句的嵌套在if语句的不同形式中，if子句和else子句中都可以再嵌套完整的if语句，构成if语句的嵌套。嵌套if语句的一般格式如下：3.2选择结构3.2.3if语句的嵌套在有多层if语句嵌套时，要注意else与if的正确匹配关系，else始终与最近的if进行匹配，例如：3.2选择结构3.2.3if语句的嵌套在有多层if语句嵌套时，要注意else与if的正确匹配关系，else始终与最近的if进行匹配，例如：其中，第9~14行代码是嵌套的if语句，在第8行代码的条件为真时才会被执行；第17~22行代码也是嵌套的if语句,在第8行代码的条件为假时才会被执行。3.2选择结构【课堂案例3-1】if语句的基本使用案例描述：某企业根据利润发放奖金的规则如下：利润低于或等于１５００００元时，按利润的１０％提成；利润低于或等于３０００００元时，低于１５００００元的部分，按１０％提成，高于１５００００元的部分，按7.5％提成；利润低于或等于600000元时，低于300000元的部分按前面的办法提成，高于300000元的部分，按1.5％提成；利润高于600000元时，超过600000元的部分，按1％提成。输入利润，计算应发奖金总额。案例目标：掌握ｉｆ语句的基本使用。3.2选择结构【课堂案例3-1】if语句的基本使用案例代码：(3-1.html)3.2选择结构【课堂案例3-1】if语句的基本使用案例结果：通过浏览器运行代码，效果如图3-4所示。案例分析：第13行的else与第10行的if配对，即“i>600000”。3.2选择结构3.2.4switch…case语句实现多分支选择结构使用if语句可以实现简单的分支结构，如果要间接实现多分支需要使用多个if或if…else的配合，程序结构较为复杂。JavaScript提供了直接实现多分支的程序语句switch…case,switch…case语句的基本格式如下：程序运行时，会先计算“表达式”的值，然后判断表达式的值，如果与“常量表达式1”的值相等，则执行“语句组1”；如果与“常量表达式2”的值相等，则执行“语句组2”，以此类推。如果表达式的值不与任何一个常量表达式的值相等，则执行“default”后的“语句组n”。break语句的作用是退出整个switch分支。在大多数情况下，每个语句组后都应该有一个break语句。default后的语句组后一般不需要break语句，例如：3.2选择结构3.2.4switch…case语句实现多分支选择结构其中，第3行代码中Math.floor()函数的作用是对参数向下取整，如Math.floor(87/10)将得到结果8；第5行代码和第6行代码的语句组是一样的，可以只保留第6行的语句组，写成如下形式：3.2选择结构【课堂案例3-2】switch语句的基本使用案例描述：简单的日程查询。根据输入的日程，查询出当日的活动内容。日程安排如表3-1。案例目标：掌握switch语句的基本使用。3.2选择结构【课堂案例3-2】switch语句的基本使用案例代码：（3-2.html）3.2选择结构【课堂案例3-2】switch语句的基本使用案例结果：通过浏览器运行代码，效果如图3-5所示。案例分析：第3行代码声明变量content，用于保存日程安排的具体内容；第4~12行代码对date值进行判断，并根据判断结果对content赋不同的值；第13行代码将结果输出。读者可以改变date变量的值，查看不同的运行结果。

3.3循环结构033.3循环结构循环结构是指在程序运行过程中，重复执行一段代码块的结构。在实际问题中，往往用于解决需要重复处理的问题。一般循环结构的流程如图3-6所示。JavaScript中提供了while语句、do…while语句、for语句和for…in语句，用于实现循环结构。其中,for…in语句一般用于数组的遍历操作。3.3循环结构3.3.1while语句while语句的一般格式如下：在执行while语句时，首先判断“表达式”的值，如果值为真，则执行语句块代码，接着继续判断“表达式”的值，如果值为真，则重复执行语句块代码，直到“表达式”的值为假，退出while语句。每次执行完语句块代码后，都要重新判断“表达式”的值，以确定是继续重复执行代码，还是退出循环。为了不形成死循环，每次循环后，“表达式”应该有变化，例如：3.3循环结构其中，第2行代码设置循环的初始量；第4行代码使用while循环，并设置循环条件；第5行和第6行代码是循环的语句块，i++为循环增量，如果没有第6行代码，将形成死循环。3.3.1while语句3.3循环结构在执行do…while语句时，先执行一次语句块，再判断“表达式”的值，如果值为真，则循环执行语句块，直到表达式的值为假，退出循环。与while语句不同的是，do…while至少会执行一次语句块，例如：3.3.2do…while语句do…while语句的一般格式如下：3.3循环结构3.3.2do…while语句执行此代码得到的结果与上面while语句实现的结果是一样。3.3循环结构3.3.3for语句在JavaScript中，还有一种更加灵活的循环语句，那就是for语句。for语句的一般格式如下：在执行到for语句时，先执行“表达式1”，然后判断“表达式2”的值，如果值为真，则执行“语句块”和“表达式3”，再继续判断“表达式2”的值，如果值为真，则循环执行“语句块”和“表达式3”，直到“表达式2”的值为假，退出循环。for循环结构的一般流程如图3-7所示。3.3循环结构3.3.3for语句for语句实现循环是程序中经常使用的，例如：其中，第3行代码中的“vari=0;”和“i++;”语句也可以写在程序中的其他位置，上面的代码可以改写为：3.3循环结构3.3.3for语句3.3循环结构3.3.4for…in语句JavaScript还提供了for…in语句，专门用于数组元素和对象属性的遍历操作。for…in语句的一般格式如下：其中，“变量名”是用户定义的变量，用来访问数组元素或对象属性；“对象名”是要操作的对象，可以是数组名或对象的名称；“语句块”是要重复执行的代码块，例如：3.3循环结构3.3.4for…in语句其中，第2行代码定义一个数组，并初始化；第3~5行代码对数组进行遍历操作，变量index用来保存数组元素的索引。每循环一次，索引依次往后增加，直到将数组元素访问完，循环结束。在浏览器中运行此代码，结果如图3-8所示。使用for…in操作对象属性，与操作数组元素类似，例如：3.3循环结构3.3.4for…in语句其中，第2行代码定义一个对象，并初始化；第3~5行代码对对象属性进行遍历操作，变量attr用来保存对象的属性名。每循环一次，自动往后访问对象的下一个属性，直到将对象属性访问完，循环结束。在浏览器中运行此代码，结果如图3-9所示。3.3循环结构3.3.5循环控制语句前面关于循环的举例中，都是根据设定好的循环条件正常执行和终止循环，在现实问题中，可能出现某种需要提前结束循环的操作。例如，在慈善募捐中，当募捐款达到一定数量，就可结束。使用循环可以处理此问题，但不能确定循环的次数，需要将每次募捐款的数量累加，并判断是否达到需要的数量，如果没有达到则继续，如果达到了就终止循环。在JavaScript中可以通过break和continue语句对循环进行控制。1、break语句break语句可用于跳出switch分支，也可用于跳出当前循环，继续执行循环后面的语句，例如：3.3循环结构3.3.5循环控制语句1、break语句3.3循环结构3.3.5循环控制语句1、break语句其中，第5行代码使用while循环，循环条件始终为“真”；第6行代码判断sum的值，如果大于或等于10万元，则执行第7行代码，退出整个循环，否则，执行else中的代码块；每循环一次，都要执行第6行代码，只要“sum>=100000”成立，执行break语句就可以退出整个循环。在浏览器中运行此代码，结果如图3-10所示。3.3循环结构3.3.5循环控制语句2、continue语句continue语句用于结束本次循环，继续下一次循环，例如：其中，第3行代码判断i值是否能被3整除，如果能整除，则执行continue语句，结束本次循环；只有第3行代码中的条件不成立，才会执行第6行代码。在浏览器中运行此代码，结果如图3-11所示。3.3循环结构3.3.5循环控制语句2、continue语句3.3循环结构3.3.6循环嵌套一个循环体内可以包含另一个循环，称为循环的嵌套。内嵌的循环中又可以再包含循环，构成多重循环。while循环、do…while循环和for循环都可以相互嵌套。下面的几种嵌套都是合法的。…}（5）do{…for(;;){…}…}while();（6）for(;;){…for(;;){…}…}（7）for(;;){…while(){…}…}（1）while(){…while(){…}…}（2）while(){…do{…}while();…}（3）do{…do{…}while();…}while();（4）while(){…for(;;){…}3.3循环结构3.3.6循环嵌套在解决实际问题时，应根据需要合理使用循环嵌套。例如，要输出如下矩阵：1234246836912481216先分析，这是一个4行4列的矩阵，应该使用双重循环嵌套实现。用外循环控制行的输出，内循环控制列的输出。行数由1递增到4，列数也由1递增到4，输出的数据刚好是行乘以列的结果，如第3行第2列的数据等于3×2的结果。每输出4个数据进行一次换行。由此可以编写出如下程序代码：3.3循环结构3.3.6循环嵌套其中，第2行代码定义变量n，用于记录输出数据的个数；第4~7行代码构成内循环；第5行代码判断当输出的数据个数为4的整数倍时进行换行。在浏览器中运行此代码，结果如图3-12所示。3.3循环结构【课堂案例3-3】循环的基本使用案例描述：有一个有趣的古典数学问题：有一对兔子，从出生后第3个月起，每个月都生一对兔子。小兔子长到第3个月后，每个月又生一对兔子。假设所有兔子都不死，每个月的兔子对数是多少？这就是Fibonacci数列，数列的特点是，第1个和第2个数为1，从第3个数开始，每个数是前两个数之和，即：F1=1(n=1)F2=1(n=1)Fn=Fn-1+Fn-2(n>=3)求Fibonacci数列的前40个数。案例目标：掌握循环的基本使用。掌握循环嵌套的使用。3.3循环结构【课堂案例3-3】循环的基本使用案例代码：（3-3.html）3.3循环结构【课堂案例3-3】循环的基本使用案例结果：通过浏览器运行代码，效果如图3-13所示。案例分析：第3行代码和第13行代码输出一个表格的开始标记和结束标记，将数据输出到一个表格中；第4行代码用于控制行数；第6行代码用于控制列数；由于第7行代码每次输出两列，所以循环两次，每行可以输出4列；第8行和第9行代码求出将要输出的后两个数。由于每次输出两个数，所以总共只需要循环20次，即可输出40个数。在解决此类实际问题时，可以将前几个数列出一个表格，分析数据之间的关系，得出规律后，再根据规律编写程序。

3.4本章小结04本章主要讲解了JavaScript程序的基本结构。JavaScript程序一般分为顺序结构、选择结构和循环结构三种。顺序结构是指程序代码按照程序语句的顺序逐条执行，是程序结构中最简单的一种。选择结构是指按照条件选择执行某块代码的结构，这也是程序中常见的一种结构。在选择结构中，最简单的是if语句，满足if后面的条件则执行相应的代码块，否则不执行。由if…else…构成的选择结构，包含了两个分支，满足if条件时执行一个代码块，否则执行另一代码块。if…elseif…可以构成更多的条件判断。if语句的各种形式也可以按照语法规则进行嵌套。嵌套的if语句相当于在某一条件下，进行更细的条件判断。对于较复杂的多分支结构，还可以通过switch…case…语句实现。3.4本章小结循环结构是指在特定情况下重复执行某一代码块的结构。循环结构可以通过while、do…while、for、for…in等基本语句实现。无论何种循环语句，都应该有执行循环和退出循环的条件，除非是特殊需要。while和do…while语句的用法基本相同，区别在于while语句是先判断条件，在条件满足时执行循环语句块，do…while语句是先执行一次循环语句块，再根据条件判断是否继续执行循环语句块。for语句的作用与while语句相同，从语法上看，for语句将循环初始量、循环条件和循环增量都写在了for后的括号内，while语句则是写在程序不同的三个