任务目的

  • 在上一任务基础上继续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的判断逻辑可以自行设定
  • 建议不使用任何第三方库、框架
  • 示例代码仅为示例，可以直接使用，也可以完全自己重写

在线学习参考资料

任务二：零基础JavaScript编码（二）总结-数组

数组是一个特殊的变量，可以同时使用一个名字储存一个以上的值，并可以通过下标获取指定值。

1、 创建一个数组

语法：

（1）var array-name = [“item1”, “item2”, ...];

（2）var array-name = [

“item1”,

“item2”,

“item3”,

...

]

（3）var array-name = new Array(“item1”, “item2”, ...);

（4）ar array-name = new Array();

（5） var points = [];

注意:从简洁、可读性、执行速度方面考虑，使用第一种方式更好。

2、 得到数组中指定元素

使用下标得到数组中值。

得到数组中某个元素：例如：var name = cars[0];

修改数组中某个元素：cars[0] = "Opel";

数组元素小标从0开始。

3、 得到全部数组元素

JavaScript中，使用数组名可得到数组中所有元素。

例如：var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

4、 数组是特殊的对象，与对象不完全相同

数组一个特殊的对象，数组typeof的返回值为“object”。

但JavaScript中数组更像数组而不像对象。

数组使用下标得到它的元素，对象通过成员名得到成员值。

5、 同一个数组可以有不同类型的元素，可以有对象、函数、数组。

6、 数组的属性和方法。

（1）length属性

Length属性，返回数组长度，即数组元素个数。

（2）isArray()函数

Array.isArray(cars);

若cars为数组返回true，不是返回false。

（3）toString()函数

将数组的值转为string，元素之间以逗号分隔。

eg: cars.toString();

（4）join()函数

将数组的值转为string，与toString()不同的是，可指定元素之间分隔符的类型。

eg: cars.join(" *
");

（5）pop()函数

移除数组中最后一个元素，返回值为被移除的元素，返回值类型为string。

（6）push() 函数

在数组元素末尾增加元素，返回值为新数组的长度。

（7）shift()函数

移除数组中第一个元素，并将其他元素“shifts”到更小的下标，返回值为被移除的元素，返回值类型为string。

（8）unshift() 函数

将元素添加到数组的第一个元素，并将其他元素“unshifts”。返回值为新数组的长度。

（9）splice()函数

向数组添加多个元素或从数组移除元素

eg: fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数（2）定义新元素插入的位置。

第二个参数（0）说明有几个元素被移除。

剩下的参数（"Lemon", "Kiwi"）定义要插入的新元素。

eg: fruits.splice(0, 1);

没有新插入元素时，表示有一个元素被移除。

（10）concat()函数

将多个数组链接起来组成新的数组。

Array = arr1.concat(arr2, arr3……);

（11）slice() 函数

取出数组中的一部分形成新的数组

eg：fruits.slice(1);

截取一个新数组，从第一个元素开始到最后一个元素。

eg：fruits.slice(1, 3);

截取一个新数组，从第1个元素，到（3-1）个元素。

循环数组元素

7、 For循环是循环数组元素最好方式

8、 添加数组元素

（1）使用push方法

eg：car.push("Saab");

（2）使用length属性和下标

eg:car[car.length]
= "Saab";

9、 对数组进行排序

·            （1）sort()方法

按字母顺序对数组元素进行排序。

            （2）reverse()方法

  反转数组中元素。

           （3）对数字进行排序

                 升序：points.sort(function(a,
b){return a - b});

降序：points.sort(function(a, b){return b - a});

      （4）对对象进行排序

cars.sort(function(a, b){return a.year - b.year});

10、已提交作业

代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-2

Demo地址：http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-2/index.html

零基础JavaScript编码（二）的更多相关文章

  1. 零基础JavaScript编码（三）总结

    任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...

  2. 零基础JavaScript编码（一）

    任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...

  3. 任务十四：零基础JavaScript编码（二）

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

  4. 任务十七：零基础JavaScript编码（五）

    任务目的 在上一任务基础上继续JavaScript的体验 接触更加复杂的表单对象 实现页面上的一个完整交互功能 用DOM实现一个柱状图图表 任务描述 参考以下示例代码,原始数据包含几个城市的空气质量指 ...

  5. 任务十六：零基础JavaScript编码（四）

    任务目的 在上一任务基础上继续JavaScript的体验 深入学习JavaScript的事件机制及DOM操作 学习事件代理机制 学习简单的表单验证功能 学习外部加载JavaScript文件 任务描述 ...

  6. 任务十五：零基础JavaScript编码（三）

    任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...

  7. 任务十三：零基础JavaScript编码（一）

    任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...

  8. IM开发者的零基础通信技术入门(二)：通信交换技术的百年发展史(下)

    1.系列文章引言 1.1 适合谁来阅读? 本系列文章尽量使用最浅显易懂的文字.图片来组织内容,力求通信技术零基础的人群也能看懂.但个人建议,至少稍微了解过网络通信方面的知识后再看,会更有收获.如果您大 ...

  9. salesforce 零基础学习（二十二）Test简单使用

    本篇内容只是本人简单的mark开发中常出现的一些疑问,方便后期项目使用时奠定基础,如果对Test零基础童鞋,欢迎查看Test官方的使用介绍: https://help.salesforce.com/a ...

随机推荐

  1. mysql之结果集去重

    mysql操作中,经常会遇到对结果集的去重 本篇文章列出几种应对办法: 1.使用distinct做去重,测试了一下,DISTINCT可以支持多列去重 select DISTINCT user_id_t ...

  2. vue2.0学习之基础内容

    import BScroll from 'better-scroll'; import star from '../star/star.vue'; import split from '../spli ...

  3. Win7如何查看nvidia显卡（GPU）的利用率

    1.在文件夹C:\Program Files\NVIDIA Corporation\NVSMI里找到文件nvidia-smi.exe2.把该文件拖到命令提示符窗口(win+R,再输入‘CMD’进入), ...

  4. LR及评分卡（未完成）

    主要分为如下内容: 一.线性回归 二.逻辑回归 三.逻辑回归评分卡流程 一.线性回归 二.逻辑回归 在线性回归的基础上引入了sigmoid函数,Logistic回归为什么要使用sigmoid函数 三. ...

  5. 微软要冷落windows是天方夜谭还是势在必行

    自从90年代开始,微软就统治着PC桌面市场,真正意义上地改变了世界,在很长一段时间内,Windows就和阳光.空气.水.电能一样,成为生活必需品,无处不在,又让人感觉不到其存在,正因如此,微软的市值于 ...

  6. 浮动框架iframe

    浮动框架式一种比较特别的框架,和frame比较类似.不过frame必须在frameset中才可以,而iframe不一样,首先, 他是一种内联框架,其次,他可以放在网页中的任何位置. 所以,iframe ...

  7. 使json或字典输出更美观

    这里是选取的项目中部分代码,但是关于json或字典格式化输出的代码是完整的def send_post(url, data): 使用json.dumps()后数据被转成了str类型,如果还要对该数据像字 ...

  8. estt

    1.路由控制的定义 1.1.IP地址与路由控制 互联网是由路由器连接的网络组合而成的.为了能让数据包正确地到达目标主机,路由器必须在途中进行正确地转发.这种向"正确的方法"转发数据 ...

  9. webpack debug

    chrome地址栏输入:chrome://inspect/#devices 点击 Open dedicated DevTools for Node 在需要打断点的地方加入debugger 控制台输入 ...

  10. test 5.1 高精度小数（10分）

    请写一个程序,输入一个分数,计算出它的小数形式.无论是否可以除尽,输出最多小数点后200位. 题目内容 由于计算机内部表达方式的限制,浮点运算都有精度问题,为了得到高精度的计算结果,就需要自己设计实现 ...