/IFE_TASK_2_2_1

Primary LanguageHTML

IFE-任务二：零基础JavaScript编码（二）

任务目的

  • 在上一任务基础上继续JavaScript的体验
  • 学习JavaScript中的if判断语法，for循环语法
  • 学习JavaScript中的数组对象
  • 学习如何读取、处理数据，并动态创建、修改DOM中的内容

任务描述

  • 参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于60）进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示在网页上

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>

  <h3>污染城市列表</h3>
  <ul id="aqi-list">
<!--   
    <li>第一名：福州（样例），10</li>
      <li>第二名：福州（样例），10</li> -->
  </ul>

<script type="text/javascript">

var aqiData = [
  ["北京", 90],
  ["上海", 50],
  ["福州", 10],
  ["广州", 50],
  ["成都", 90],
  ["西安", 100]
];

(function () {

  /*
  在注释下方编写代码
  遍历读取aqiData中各个城市的数据
  将空气质量指数大于60的城市显示到aqi-list的列表中
  */

})();

</script>
</body>
</html>

任务注意事项

  • 实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释
  • 其中的数据以及60的判断逻辑可以自行设定
  • 建议不使用任何第三方库、框架
  • 示例代码仅为示例，可以直接使用，也可以完全自己重写

在线学习参考资料