带对象的练习计算器
我们今天的第一个例子是对练习计算器的重写。我们看到的第一个版本使用HTML表单向后端服务器提交计算请求。使用JavaScript，我们现在可以直接在页面中进行赢博体育必要的计算，也可以直接在页面中显示结果。
最初版本的运动卡路里计划将不同类型的活动数据存储在数据库中。在这个版本中，我们将把这些数据作为对象数组存储在JavaScript页面中：
/ /运动数据对象数组的形式var活动=[{活动:“行走”,强度:低,热量:176},{活动:“行走”,强度:“媒介”,热量:232},{活动:“行走”,强度:‘高’,热量:352},{活动:“骑自行车”,强度:低,热量:422},{活动:“骑自行车”,强度:“媒介”,热量:563},{活动:“骑自行车”,强度:‘高’,热量:704},{:活动:“奔跑”,强度低,热量:704},{活动:“奔跑”,强度:“媒介”,热量:880},{活动：‘跑步’，强度：‘高’，卡路里：1126}，{活动：‘游泳’，强度：‘低’，卡路里：422}，{活动：‘游泳’，强度：‘中等’，卡路里：563}，{活动：‘游泳’，强度：‘高’，卡路里：704}]；
将有关活动的数据存储在数组中后，我们现在需要的是一个caloriesPerHour函数，该函数在该数组中进行搜索，以定位描述所需活动的对象。
函数caloriesPerHour（数据，活动，强度）{让长度= data.length；For (let n = 0;n < length;n++) {if（data[n].）Activity == Activity && data[n].intensity==intensity)返回data[n].calorie；}返回0；｝
您可以通过单击上面相应的按钮查看此示例的完整源代码。
进一步的DOM属性和方法
我们今天的第二个示例演示了一些额外的DOM属性和方法。该示例展示了如何使用DOM方法动态生成页面元素。该页面显示了一个假想咖啡馆的菜单项表。通过单击表下面的按钮，用户可以使用他们选择的餐点的菜单项重建表。
菜单项由存储在数组中的对象表示。一个典型的物体是这样的
{项目:“炸泥豆三明治三明治”,成本:$ 4.50,餐:“L”}
当用户单击其中一个用餐按钮时，该页面的JavaScript代码将首先过滤可用菜单项列表，以构造一个适用于该特定餐点的对象列表。
//一个用于过滤对象列表的过滤器函数的示例函数filterList(list,meal) {let result = []；//创建一个新的空列表let length = list.length；for(let n = 0;n < length;n++){//如果（list[n]）在原始列表中搜索具有所需的meal属性的项目。result.push(list[n])；//添加与新列表匹配的项}返回结果；｝
然后将过滤后的对象列表传递给一个函数，该函数使用这些对象来重建表。用来设置表格的HTML是这样的：
<table class="table -center "> < head> <tr>< the ></ th>< the >价格</th></tr> </ head> <tbody id="menu"> <！——空表体——JavaScript会将其填入——> </tbody> </table>
注意tbody元素。重建表的JavaScript将针对该元素，删除它拥有的任何现有行，并从过滤的菜单项列表中为它构建一组新的行。
下面是重建表体的函数的代码。
function displayItems(items){//定位表主体让tableBody = document.getElementById('menu')；//删除表tableBody中已有的表项。innerHTML = "；//为列表中的项目添加新行let length = items.length；for(let n = 0;n < length;n++) {let newRow = document.createElement('tr')；启动。innerHTML = ' < td > ' [n] .item + +项目”< / td > < td > ' [n] .cost +项目+“< / td >”;tableBody.appendChild(启动);}}
这段代码使用了几个新的DOM方法和属性。innerHTML属性用于访问元素的HTML内容。这里的代码使用该属性通过将tbody元素的HTML内容重置为空来删除tbody中的任何现有行。
tableBody。innerHTML = "；
文档对象的createElement（）方法用于生成新的HTML元素。上面的代码使用该方法为表主体生成新行。在使用innerHTML将一些内容放入这些新行之后，我们可以使用表主体元素的appendChild（）方法将新行附加为表主体的子元素。
let newRow = document.createElement('tr')；启动。innerHTML = '<td>' + items[n]。Item + '</td><td>' + items[n]。成本+ '</td>'；tableBody.appendChild(启动);