《Javascript高级程序设计》课件-项目2 体重指数计算器-JavaScript程序设计基础

项目2体重指数计算器——JavaScript程序设计基础上一届奥运会已经结束，中国选手在赛场拼搏的画面在李强脑海中挥之不去，他心中激动不已，他明白只有身体素质好，才能好好学习，报效祖国，于是决定也要强身健体。他开始了解一些体重指数（BMI）的相关知识。体重指数可通过身体质量指数（BodyMassIndes，BMI）计算得出，公式如下。BMI=体重（kg）/［身高（m）×身高（m）］情境导入

情境导入

李强想编写一个体重指数计算器，输入性别、体重、身高，就能够计算出对应的体重指数，如图2-1、图2-2、图2-3、图2-4所示。

情境导入

李强想编写一个体重指数计算器，输入性别、体重、身高，就能够计算出对应的体重指数，如图2-1、图2-2、图2-3、图2-4所示。■掌握JavaScript的变量的定义及使用■了解JavaScript的基本数据类型■掌握JavaScript的运算符和表达式，并具备运用表达式解决问题的能力项目目标任务

使用变量知识储备任务

认识数据类型任务

使用运算符任务

认识表达式任务

使用变量标识符实际上是名称，在JavaScript中可以用来命名变量、函数、自定义对象或者属性。在JavaScript中，标识符必须符合命名规范，主要命名规范如下：标识符第一个字符必须是字母、下画线（_）或美元符号（$），其后的字符可以是字母、数字、下画线或美元符号。自定义的标识符不能和JavaScript中的关键字或保留字同名，但可以包含关键字或保留字。相关知识

标识符标识符里面不能有除了下画线、美元符号以外的符号，比如空格、“+”“-”“@”等符号都是不允许出现的。标识符的命名尽量见名知意，比如可以用由多个单词组成的复合标识符命名，其主要有两种方式：使用下画线连接各个单词，每个单词全部小写，例如stu_name。使用驼峰规则，包括大驼峰和小驼峰。大驼峰的规则是每个单词的首字母大写，其余字母小写，例如StuName。小驼峰的规则是第一个单词的首字母小写，第二个及以后的单词首字母大写，其余字母小写，例如stuName。相关知识

标识符相关知识

标识符如下所示为合法的标识符：Liumy_name_name$strn1相关知识

关键字和保留字JavaScript关键字是指在JavaScript语言中有特定含义的，被JavaScript自身所用的单词。比如用于表示流程控制语句的开始或结束的单词，或者用于执行特定操作的单词。

因此，在程序中声明变量或定义函数时是不能使用关键字作为标识符的。JavaScript的常用关键字如表2-1所示。相关知识

关键字和保留字表2-1JavaScript的常用关键字相关知识

关键字和保留字表2-2JavaScript的保留字JavaScript保留字是ECMAScript规范中预留的关键字，目前它们还没有特殊功能，但将来可能会加上，具体如表2-2所示。表2-2中列举的这些保留字建议不要当作变量名或者函数名来使用，以避免出错。什么是变量？顾名思义，变量就是值可以发生变化的量。变量有变量名和值，变量名是计算机内存中暂时保存数据的符号名称，通过该名称获取变量的值。当在程序中需要频繁使用某个值，且该值需要发生变化，或者该值书写起来比较烦琐时，就需要一个“容器”来存储这个值，这个“容器”就是变量。这就好比用杯子盛水，杯子是变量杯子中的水就是变量中的数据，杯子的名字就是变量名。在程序中，通过变量完成对内存中数据的各种操作，变量为数据操作提供了信息存储容器。相关知识

变量的命名对变量进行命名，要遵守标识符的命名规范。JavaScript的变量命名规范如下：必须以字母或下画线开头，其后可以是数字、字母或下画线变量名不能包含空格和加号、减号等符号不能使用JavaScript的关键字或保留字JavaScript的变量名是严格区分大小写的相关知识

变量的命名相关知识

变量的命名如下所示为不合法的变量名：2nameforstu-name相关知识

变量的声明和赋值JavaScript是弱类型语言，可以不声明而直接使用变量。这样虽然简单，但是不便于发现变量名的错误，所以不建议这样做。通常的做法是在使用JavaScript变量前声明变量。

目前，JavaScript常用的变量声明方式有3种，分别是使用var、let和const关键字声明。其中，使用let和const是ES6标准中增加的声明变量方式。不管使用哪种方式声明，在声明时都无须指定数据类型。

使用var可以声明具有全局或局部作用域的变量，声明变量有以下几种格式：

使用var可以一次声明一个变量，也可以一次声明多个变量，不同变量之间使用逗号隔开，如下。

声明变量时可以不初始化变量，此时其数据类型默认为undefined，也可以在声明变量的同时初始化变量，如下。1.使用var声明变量varname;//一次声明一个变量var

name,gender,age;//一次声明多个变量varname="李强";//在声明的同时初始化变量varname="李强",gender="男",age;//在声明的同时初始化全部或者部分变量使用var声明的变量，可以多次赋值，但是其结果只与最后一次赋值有关。1.使用var给变量赋值varname="李强";name="王红";name=3;console.log(name);使用let可以声明具有块级作用域的变量，声明的格式和使用var声明变量的格式完全相同。使用let可以一次声明一个变量，也可以一次声明多个变量，不同变量之间使用逗号隔开，如下。2.使用let声明变量letname;//一次声明一个变量letname,gender,age;//一次声明多个变量

声明变量时可以不初始化变量，此时其数据类型默认为undefined，也可以在声明变量的同时初始化变量，如下。

使用let声明的变量，可以多次赋值，但是其结果只与最后一次赋值有关。2.使用let给变量赋值letname="李强";name="王红";name=3;console.log(name);letname="李强";//在声明的同时初始化变量letname="王红",gender="男",age;//在声明的同时初始化全部或者部分变量使用var和let声明的变量可以改变，如果希望变量的值在整个运行过程中保持不变，需要使用const声明，具体格式如下：需要注意的是，使用const声明变量时，必须给变量赋初值，且该值在运行过程中不能被修改。另外，此变量也不能多次声明，如下。

3.使用const声明变量const

变量名=值;constpi=3.1415;//一次声明一个变量求圆的周长——var和const【任务一】使用var和const声明变量并求圆的周长任务描述任务分析求圆的周长，根据圆的周长公式，需要圆的半径和圆周率圆的半径可以直接赋值得到，圆周率可以通过JavaScript的内置对象Math的PI属性获得求圆的周长——var和const【任务一】求圆的周长——var和const【任务一】（1）初始化要求不同。使用var和let声明变量时可以先不初始化，而使用const声明变量时必须初始化。（2）重复声明不同。使用var和let声明的变量可以多次被修改，其值只与最近一次赋值一致。而使用const声明的变量，在整个运行过程中不能修改初值。（3）对块级作用域的支持不同。使用一对花括号括起来的代码称为一个代码块，所谓块级作用域，就是指变量起作用的范围是当前代码块，离开当前代码块，变量就失效了。使用var声明的变量支持全局作用域，使用let和const声明的变量支持块级作用域。4.3种变量声明方式的区别4.3种变量声明方式的区别//作用域不同

letname1="李强"{letname2="李强";

constname3="王红";

varname4="马东";console.log(name2);//支持块级作用域，输出李强

console.log(name3);//支持块级作用域，输出王红

console.log(name4);//支持块级作用域，输出马东

}console.log(name1);//支持块级作用域，输出李强

console.log(name2);//离开块级代码，出错

console.log(name3);//离开块级代码，出错

console.log(name4);//支持全局作用域，输出马东与其他语言不同的是，JavaScript声明变量只使用一个关键字，只声明变量的名字，不能声明其类型。

变量类型是由变量值所属的类型所决定的，变量值是数值，那么其变量类型就是数值型；变量值是字符串，那变量的类型就是字符串型，如下所示。

相关知识

变量的类型varx=23;//x的类型为数值型。letx="我们一起来学习JavaScript!";//x的类型为字符串型。varx=true;//x的类型为布尔型。输出课程成绩——变量声明和变量赋值【任务二】要求声明3个变量，并对3个变量分别进行赋值，然后在页面上输出变量的值。任务描述任务分析声明3个变量（name、course和score变量，分别代表姓名、科目和成绩分别为3个变量赋值利用document.write()在页面上输出变量的值输出课程成绩——变量声明和变量赋值【任务二】输出课程成绩——变量声明和变量赋值【任务二】

变量的作用域是指变量在程序中的作用范围，也就是变量在程序中的有效区域。在ES6标准出现之前，JavaScript变量的作用域按照其作用的范围可以分为全局作用域和局部作用域。

在ES6标准之后，JavaScript变量的作用域按照其作用的范围可以分为全局作用域、局部作用域和块级作用域3种。对应作用域的变量分别为全局变量、局部变量和块级变量。

使用var声明的变量的作用域有全局作用域和局部作用域两种，没有块级作用域。使用let和const声明的变量的作用域有全局作用域、局部作用域和块级作用域3种。

相关知识

变量的作用域任务

认识数据类型JavaScript是一种弱类型的语言，即数据（变量或常量）在定义时不必指明数据类型，其数据类型根据其赋值来确定。JavaScript的数据类型分为3类：基本数据类型、引用数据类型和特殊数据类型。

JavaScript的基本数据类型有数值型、字符串型和布尔型，引用数据类型是指支持对象编程的类型，特殊数据类型主要包括null（空值）、undefined（未定义）、NaN（非数值）以及转义字符。相关知识

数据类型分类

JavaScript的数值型包括整型和浮点型整型

整型也叫整数，它可以用十进制数、八进制数和十六进制数来表示。十进制数：用0～9的数字来表示，如24、67、－99、－102。八进制数：用0～7的数字来表示，首位必须加0，如023、045。十六进制数：用0～9的数字和A～F（或者a～f）来表示，前两位必须是0X或者0x。如0x245、0x5ad、0XCD、0XEF。

相关知识

基本数据类型——数值型浮点型浮点型数包括整数部分和小数部分，中间用小数点分隔，即“整数部分.小数部分”。表示浮点型数值时只能采用十进制，其表示的形式有两种，分别是普通形式和指数形式。普通形式：由整数部分、小数点和小数部分组成，如3.5、23.0、0.6、－6.8。指数形式：也叫科学记数法，由数字、e和指数组成，如3.45e3（表示3.45×103）。注意：指数是－324～308的整数，如3.45e3214、3.45e3.5都是不合法的。数值型字符串型是用来表示文本数据的，主要由字母、数字、汉字或者特殊字符

程序中，字符串数据必须用单引号或者双引号标注，单引号和双引号可以相互嵌套单引号中的字符串可以有双引号，双引号中的字符串也可以有单引号单引号和双引号不能交叉使用字符串型"万丈高楼平地起，盘龙卧虎高山齐。"'千里之堤，溃于蚁穴。'"欢迎来到‘JavaScript’的世界"'欢迎来到“JavaScript”的世界'字符串型'欢迎来到“JavaScript’的世界""欢迎来到‘JavaScript”的世界'"欢迎来到“JavaScript”的世界"'欢迎来到‘JavaScript’的世界'布尔型也叫逻辑型，只有两个值，即逻辑真和逻辑假分别用true和false来表示布尔型的两个值在程序中也可用非0数值和数值0分别表示true和false，当把true和false转换为数值时，分别是1和0，布尔值通常用在判断语句中，表示结果是真还是假。布尔型n==1;//判断n是否等于1，如果等于则为true，否则为false。1.nullnull类型是只有一个值的数据类型，值即null，表示当前为空值，如下。相关知识

特殊数据类型vara=null；//null类型2.undefinedundefined类型只有一个值，即undefined，指的是未定义类型的变量，表示这个变量还没有被赋值，如下。相关知识

特殊数据类型varvariable;alert("此变量的类型为："+variable);3.NaNNaN（NotaNumeber）是JavaScript特有的特殊数据类型，表示“非数值”，是指程序运行时由于某种原因发生计算错误，产生一个没有意义的数值，这个数值就是NaN，如下。相关知识

特殊数据类型vara=5;varb="您好";varresult=a*b;//计算a*b的结果

document.write(result);4.转义字符转义字符通常也称为控制字符，它是以反斜线开头且不可显示的特殊字符，利用转义字符可以在字符串中添加不可显示的特殊字符或者避免引号匹配问题。例如，在页面上输出图2-2所示的效果，可以通过如下代码实现。相关知识

特殊数据类型document.write("Hesaid.\"l\'mfondofJavaScript!\"";JavaScript常用的转义字符如表2-3所示。我们也可以直接在document.write()中输入<br/>标签来换行。如果想在alert()弹出对话框中实现换行，就需要使用转义字符“\n”。相关知识

特殊数据类型表2-3JavaScript常用的转义字符JavaScript是弱类型语言，变量的数据类型是由变量值决定的使用typeof运算符获取操作数的类型，主要有2种使用方式：typeof(表达式)——对表达式做运算typeof变量名——对变量做运算用来判断一个变量的类型以及这个变量是否已经被定义相关知识

数据类型判断测试变量类型——typeof【任务三】使用typeof运算符测试变量的类型任务描述任务分析对变量的类型进行测试，声明变量并赋初值，作为测试的对象通过typeof运算符来对声明的变量进行运算通过document.write()在页面上输出测试结果输出课程成绩——变量声明和变量赋值【任务三】输出课程成绩——变量声明和变量赋值【任务三】JavaScript提供了一种灵活的自动类型转换的处理方式，基本原则是，如果将A类型的值用于需要B类型的值的环境中，JavaScript就会自动将A类型转换为所需要的B类型。

类型转换有隐式类型转换和显式类型转换两种方式。.6数据类型转换隐式类型转换就是通过运算自动对数据类型进行转换的方式。（1）+运算符，有以下两种情况。

如果两个操作数中有一个为字符串，那么JavaScript就认为要进行字符串连接运算，并把不是字符串的操作数转换成字符串。具体示例如下：

如果两个操作数都是除字符串以外的基本数据类型，那么JavaScript就认为要进行加法运算1.隐式类型转换2023+“明天会更好”;//2023明天会更好隐式类型转换就是通过运算自动对数据类型进行转换的方式。（2）其他运算符：如果操作数类型不符合当前运算符运算类型，那么JavaScript会把操作数改为相应的类型的值，再进行运算。例如，-、*、/等运算符会要求操作数全部是数值。具体示例如下。1.隐式类型转换2-"5";//-34*true;//4下面几个表达式的值分别是多少？①求表达式10+30、10+"30"、"10"+30、"10"+"30"的值。②求表达式10-30、10-"30"、"10"-30、"10"-"30"的值。③求表达式true+10、true+"10"、true+false、true-false的值。④求表达式"a"-10的值。试一试隐式类型转换就是通过运算自动对数据类型进行转换的方式。（3）undefined和null的区别，undefined表示未定义，而null表示已经定义，其值为空。因此undefined不能转换为数字，而null可以转换为数字，具体示例如下。1.隐式类型转换2*undefined;//undefined4-null;//4

显式类型转换就是通过具体的方法，手动进行转换。JavaScript提供了3个显式类型转换的函数：Number(value)、Boolean(value)和String(value)。Number(value)方法用于把值转换为数值。具体示例如下。2.显式类型转换Number("1.2");//1.2Number(undefined);//NaNNumber(false);//0Number("123abc");//NaN上面代码的第4行，Number("123abc")返回结果为NaN，这是因为Number()函数在进行转换时先判断要转换的值是否能完整地转换，不能转换就返回NaN类型。JavaScript还提供了另外两个转换函数，parseInt()和parseFloat()，分别将值转换为整数和浮点数，如果转换的数值包含字符串，则只转换字符串开头的部分数值。具体示例如下。2.显式类型转换parseInt("123abc");//123parseInt("123.6");//123parseFloat("123.6");//123.6parseFloat("123abc");//123

Boolean(value)函数用于把值转换为布尔值。如果value为空字符串、0、undefined、null、false，那么将返回false，否则将返回true。具体示例如下。2.显式类型转换Boolean("");//结果是falseBoolean(undefined)；//结果是falseBoolean(false);//结果是falseBoolean("a");//结果是trueString(value)函数用于把值转换为字符串。具体示例如下。typeofString("1.2");//结果是stringtypeofString(2);//结果是stringtypeofString(false);//结果是string任务

使用运算符运算符是指能够完成一系列计算操作的符号（如+、-、*、/等），通常将被计算的数称为操作数。例如，“1+2”这个式子中1和2就是操作数，而+就是运算符。按照操作数的个数可以将运算符分为单目运算符（只有1个操作数）、双目运算符（有2个操作数）和三目运算符（有3个操作数）。使用运算符单目运算符只有1个操作数，常见的单目运算符有++、--等，如下。双目运算符有2个操作数。双目运算符是较常用的，下面的例子都用到了双目运算符。三目运算符有3个操作数，条件运算符“?:”就是典型的三目运算符，如下所示。使用运算符x++；y--；x+y;x-y;x>y;x==y;<scripttype="text/javascript">varscore=88;varresult=score>90?"优秀":"普通";</script>“?”前面为条件表达式，如果符合条件（其值为true），就取冒号前的值，否则就取冒号后面的值。例如，上面的代码表示，如果score的值大于90，则经过计算后result为“优秀”；如果score的值小于90，则经过计算后，result为“普通”。此外，按照操作数的类型来分，运算符还可以分为算术运算符、关系运算符、赋值运算符、逻辑运算符和位操作运算符等。使用运算符算术运算符主要用于在程序中进行加、减、乘、除等运算

相关知识

算术运算符运算符说明示例+加运算，返回结果为两个数值的和4+6;//返回值为10连接运算，只要有一侧是字符串，进行连接运算“脚本”+“技术”；//返回值为“脚本技术”-减运算8-5;//返回值为3*乘运算3*5;//返回值为15/除运算6/3;//返回值为2%取模运算7%4;//返回值为3++自增运算，x++；++xx=1;y=x++;//y=1,x=2;x=1;y=++x;//y=2,x=2;--自减运算，x--；--xx=6;y=x++;//y=6,x=5;x=6;y=++x;//y=5,x=5计算账单金额——算术运算符【任务四】通过编程实现计算商品的总金额，当商品标价100元、税率为0.05时，计算买一件商品的总金额和税金分别是多少？任务描述任务分析计算商品总金额，使用算术运算符来实现声明4个变量，分别用来保存总金额、税金、税率、标价的值，再通过算术运算符来进行计算将计算结果在页面上输出计算账单金额——算术运算符【任务四】计算账单金额——算术运算符【任务四】关系运算符又叫比较运算符，用于对两个操作数进行比较，然后返回一个布尔值。相关知识

关系运算符运算符说明示例<

小于3<4;//返回值为true<=小于等于3<=3;//返回值为true>

大于3>4;//返回值为false>=大于等于3>=4;//返回值为false==等于。只进行值判断，不涉及数据类型“7”==7;//返回值为true!=不等于。只进行值判断，不涉及数据类型“7”!=7;//返回值为false===恒等于。对值和数据类型同时进行判断“7”===7;//返回值为false!==不恒等于。对值和数据类型同时进行判断“7”!==7;//返回值为true比较两个数的大小——关系运算符【任务五】在日常生活中，经常遇到比较两个数大小的问题。要进行两个数的大小比较，用JavaScript的关系运算符很容易实现。本任务实践要求运用关系运算符来比较两个数的大小，并在页面上输出结果。任务描述任务分析对两个数的大小进行比较，可用关系运算符来实现。首先要声明一个变量，用来保存要比较的值，然后通过这个变量的值与其他值进行比较。将比较的结果通过document.write()在页面上输出。比较两个数的大小——关系运算符【任务五】比较两个数的大小——关系运算符【任务五】 JavaScript的赋值运算分为简单赋值运算和复合赋值运算。简单赋值运算是指将赋值运算符（=）右边的值赋值给左边的变量复合赋值运算则是指在赋值时混合了其他运算，如下。

需要注意的是，赋值表达式的值等于赋值运算符左边的变量值。

相关知识

赋值运算符sum+=n;//等同于sum=sum+n;

赋值运算符运算符说明示例=将右边表达式的值赋给左边的变量name="张三";+=将左边变量加上右边表达式的值赋给左边的变量a+=b;//相当于a=a+b;-=将左边变量减去右边表达式的值赋给左边的变量a-=b;//相当于a=a-b;*=将左边变量乘右边表达式的值赋给左边的变量a*=b;//相当于a=a*b;/=将左边变量除以右边表达式的值赋给左边的变量a/=b;//相当于a=a/b;%=对左边变量用右边表达式的值求模，并得结果赋给左边变量a%=b;//相当于a=a%b;&=对左边变量和右边表达式的值进行与运算，并得结果赋给左边变量a&=b;//相当于a=a&b;|=对左边变量和右边表达式的值进行或运算，并将结果赋给左边变量a|=b;//相当于a=a|b;在ES6规范中新增了一种解构赋值，它是对赋值运算符的扩展应用，就是将属性/值从对象/数组中取出，进行模式匹配，然后对其中的变量进行赋值，解构赋值的主要语法如下解构赋值[解构的目标]=[解构的源];解构的源是解构赋值表达式的右边部分，解构的目标是解构赋值表达式的左边部分。解构赋值varnum1,num2;[num1,num2]=[123,234];console.log(num1);//123console.log(num2);//234变量赋值——赋值运算符【任务六】通过使用赋值运算符，实现表达式赋值运算，并在页面上输出结果任务描述任务分析要对变量进行赋值运算，可先声明两个变量，并对变量赋初值通过赋值运算符进行赋值运算通过document.write()将结果在页面上输出变量赋值——赋值运算符【任务六】变量赋值——赋值运算符【任务六】逻辑运算符的操作数和运算结果都是布尔值。在关系表达式中经常用到逻辑运算符，所以在JavaScript程序中，逻辑运算符比较典型的应用就是与关系运算符配合使用：x>=10&&x<=99;//可以用来判断x是否是10到99的数值相关知识

逻辑运算符运算符说明示例&&逻辑与。只有当两个操作数的值都为true时，逻辑与的结果才为true，否则为false&&||逻辑或。只有当两个操作数的值都为false时，逻辑或的结果才为false，否则为true||！逻辑非。操作数的值为true时，逻辑非的结果为false；操作数的值为false时，逻辑非的结果为true！表2-7JavaScript的逻辑运算符判断某年是否为闰年——逻辑运算符【任务七】本任务实践通过判断某年是否为闰年来测试逻辑运算符和关系运算符，所谓闰年就是指表示年份的数字能被400整除，或者能被4整除但不能被100整除的年份。我们来实现一下闰年的算法。任务描述任务分析按照任务描述要求，先声明3个变量，分别用来保存表示年份的数字、闰年计算结果以及判断结果。通过逻辑运算符和关系运算符进行运算。通过document.write()在页面上输出结果。判断某年是否为闰年——逻辑运算符<scripttype="text/javascript">varyear=2022;varresult=year%4==0&&year%100!=0||year%400==0;varstatus=result?"是闰年":"不是闰年";document.write(year+"年"+status);</script>【任务七】判断某年是否为闰年——逻辑运算符【任务七】判断某年是否为闰年——逻辑运算符【任务七】

条件运算符是JavaScript支持的一种特殊的三目运算符。

“?”前面为条件表达式，如果条件为true，就取表达式2，否则就取表达式3。

相关知识

条件运算符表达式1？表达式2：表达式3判断是否成年——条件运算符【任务八】通过条件表达式根据输入的年龄来判断一个人是否成年。任务描述任务分析先声明两个变量，一个保存基准年龄，另一个保存结果通过条件运算符对变量进行计算通过document.write()在页面上输出结果判断是否成年——条件运算符【任务八】判断是否成年——条件运算符【任务八】

相关知识

位操作运算符位操作运算符用于对整数的二进制位进行操作，如向左或向右移位等。位操作运算符在进行运算前，先将操作数转换为32位的二进制数，再进行相关运算，最后输出的结果将以十进制表示。JavaScript常用的位操作运算符如表2-8所示。