JavaScript小项目之BMI值计算

项目题目：
实现BMI值计算器

---

项目作用：
复习JavaScript课程知识，学习DOM基础知识，熟悉document对象的使用，实现简单的BMI计算器页面。

---

前言

通过前期javascrip理论基础部分(ECMAScript)的学习，我们了解掌握了JS的基本语法，包括：变量、数据类型、流程控制、数组、函数以及对象，接下来我们通过学习DOM的基础知识完成简单的交互式页面的实现。

---

提示：以下是本篇文章正文内容，下面案例可供参

一、DOM是什么？

DOM：Document Object Model，文档对象模型。
作用：是一套规范文档内容的通用型标准。

二、基础内容介绍

1. DOM HTML节点树

DOM HTML指的是DOM中为操作HTML文档提供的属性和方法。
文档（Document）表示HTML文件。
文档中的标签称为元素（Element）。
文档中的所有内容称为节点（Node）。
因此，一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分 。

通过上述节点树结构图知：
根节点：标签是整个文档的根节点，有且仅有一个。
子节点：指的是某一个节点的下级节点。
父节点：指的是某一个节点的上级节点。
兄弟节点：两个节点同属于一个父节点。

2. DOM 的查找方法

document对象提供了一些用于查找元素的方法，利用这些方法可恶意根据元素的id、name和class属性以及标签名称的方式获取操作的元素，方法如下：

document.getElementById()     返回对拥有指定id的第一个对象的引用
document.getElementsByName()     返回带有指定名称的对象集合
document.getElementsByTagName()     返回带有指定标签名的对象集合
document.getElementsByClassName()     返回带有指定类名的对象集合（不支持IE6~8）

• 除了document.getElementById()方法返回的是拥有指定id的元素外，其他方法返回的都是符合要求的一个集合。若要获取其中一个对象，可以通过下标的方式获取，默认从0开始；
• 通过document对象的方法与document对象的属性获取的操作元素表示的都是同一对象。如document.getElementsByTagName(‘body’)[0]与document.body全等。

3. 元素内容获取

JavaScript中，若要对获取的元素内容进行操作，则可以利用DOM提供的属性和方法实现。

innerHTML     设置或返回元素开始和结束标签之间的
HTML innerText     设置或返回元素中去除所有标签的内容
textContent     设置或者返回指定节点的文本内容
document.write()     向文档写入指定的内容
document.writeln()     向文档写入指定的内容后并换行

• 属性属于Element对象，方法属于document对象。
• innerHTML在使用时会保持编写的格式以及标签样式。
• innerText则是去掉所有格式以及标签的纯文本内容。
• textContent属性在去掉标签后会保留文本格式。

innerText属性在使用时可能会出现浏览器兼容的问题。因此，推荐在开发时尽可能的使用innerHTML获取或设置元素的文本内容。同时，innerHTML属性和document.write()方法在设置内容时有一定的区别，前者作用于指定的元素，后者则是重构整个HTML文档页面。

4. 节点获取

由于HTML文档可以看做是一个节点树，因此，可以利用操作节点的方式操作HTML中的元素。

firstChild       访问当前节点的首个子节点
lastChild       访问当前节点的最后一个子节点
nodeName     访问当前节点名称
nodeValue     访问当前节点的值
nextSibiling     返回同一树层级中指定节点之后紧跟的节点
previousSibling    返回同一树层级中指定节点的前一个节点
parentNode     访问当前元素节点的父节点
childNodes     访问当前元素节点的所有子节点的集合

此外，由于document对象继承自Node节点对象，因此document对象也可以进行以上的节点操作。

// 假设document中的第1个子节点是html
document.firstChild === document.documentElement; // 比较结果：true
// 假设html中的最后1个子节点是body
document.firstChild.lastChild === document.body;   	    // 比较结果：true

三、项目实施内容

1. 参考代码

1.1 BMI计算器实现

NOTE: HTML、CSS部分代码素材见下文附件部分；此处仅展示JS部分代码。

代码如下（示例）：

 window.onload = function(){//页面加载时执行以下代码
	var cal = document.getElementById("cal");   //获取指定id的元素
	var show = document.getElementById("show");
	cal.onclick = function(){  //在点击计算按钮时执行以下代码
		var height = parseFloat(document.getElementById("height").value) / 100;   //获取指定id的元素即身高，并强制转换为数值类型，单位为米
		var weight = parseFloat(document.getElementById("weight").value); //获取指定id的元素即体重，并强制转换为数值类型
		var bmi = weight / (height * height);  //求bmi胡值
		var str = "朋友，您的身高是：<b>"+height+"m<b/>，您的体重是：<b>"+weight+"kg<b/>，您的BMI指数是：<b>"+bmi.toFixed(2)+"。<b/>"; //显示所需在字符
		if(isNaN(height) || isNaN(weight) || weight <= 0 || height <= 0) //isNaN()判断是否为数值类型，同时需满足都不小于0
			str = "朋友您的输入有误，请重新输入！";
		else if(bmi < 18.5)
			str += "偏瘦！";
		else if(bmi < 24)
			str += "正常！";
		else if(bmi < 28)
			str += "偏胖！";
		else
			str += "过度肥胖！";
		show.innerHTML = str;  //返回str的内容，并进行显示
	}
}

效果：

---

2. 学生成果展

1.1 软件2005班

代码如下（示例1）：@软件2005-张承宸

<script>
	const cm = document.getElementById("CM");
	const kg = document.getElementById("KG");
	const btn = document.getElementById("btn");
	const taxt = document.getElementById("taxt");
	btn.onclick=function (){
		if (isNaN(cm.value || kg.value)){
			taxt.innerText=("输入错误,请输入数字")
		}
		const bmi = kg.value / cm.value / cm.value * 10000;
		if (bmi>0 && bmi <= 18.5){
			taxt.innerText=("偏瘦")
		}
		if (18.5< bmi&& bmi <=23.9){
			taxt.innerText=("正常")
		}
		if (23.9 < bmi && bmi <27.9){
			taxt.innerText=("过重")
		}
		if (27.9 <bmi){
			taxt.innerText=("肥胖")
		}
	}
</script>

---

1.2 软件2006班

代码如下（示例1）：@软件2006-李永恒

window.onload = function() {
	// var xianshi = document.getElementsByTagName("div")[11];
	var xianshi = document.getElementById("show");
	document.getElementsByClassName("row")[2].onclick = function() {
		sg = parseInt(document.getElementsByTagName("input")[0].value) / 100
		tz = parseInt(document.getElementsByTagName("input")[1].value)
		var bmi = tz / (sg * sg)
		bmi = bmi.toFixed(1)
		console.log(bmi)
		if (bmi <= 18.5) {
			qk = "偏瘦"
		} else if (bmi > 18.5 && bmi <= 23.9) {
			qk = "正常"
		} else if (bmi <= 27.9 && bmi >= 24.0) {
			qk = "过重"
		} else {
			qk = "肥胖"
		}
		xianshi.innerHTML = "你的身高是" + sg + "M，体重是" + tz + "kg,BMI值为" + bmi + "为（" + qk + "）"
	}

}

总结

通过本次小项目，复习JavaScript课程知识，学习DOM基础知识，熟悉document对象的使用，实现简单的BMI计算器页面的实现。

附件

1、BMI计算HTML、CSS部分素材
2、学生源代码展示