任务目的

  • 在上一任务基础上继续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. F. Maximum Weight Subset(贪心or树形dp解法)

    题:https://codeforces.com/contest/1249/problem/F 题意:给一颗树,边权为1,节点有点权,问取到一个点集,俩俩之间路径超过k,是点权和最大 思路:贪心地取点 ...

  2. Android activity 亮度调整

    注意点 screenBrightness 取值范围0-1 不是0-255一定要注意 scanForActivity(context) 是根据上下文获取所在的activity如果直接在activity ...

  3. android电子书App、自定义图表、仿腾讯漫画App、仿淘宝优惠券、3D选择容器等源码

    Android精选源码 仿支付宝记账本功能,饼状图:数字键盘 android一款功能完善的电子书应用源码 Android自定义图标库,使用方便,扩展性强 android 3D立体无限旋转容器源码 an ...

  4. PMP备考经验总结-1906

    1.考试成绩 3A1T1B 2.考试背景(为什么考) 工作多年,做的项目很多,上到几百万,下到几万的项目,有自己的一套方法论,但是没有系统的对项目的知识做一次完整的梳理整合,觉得在整体把控上需要做一次 ...

  5. 吴裕雄--天生自然python学习笔记：人脸识别用到的特征文件haarcascade_frontalface_default.xml下载

    下载地址:https://github.com/opencv/opencv/tree/master/data/haarcascades 1.找到haarcascade_frontalface_defa ...

  6. python学习笔记（7）数据类型转换

  7. Html 的生命周期

    零.序言 vue 用多了,自然离不开生命周期.最近突发奇想,加上之前看过的文章中关于 script 标签中的 async 和 defer 的捣糨糊,决定整理一下,攻克这个模糊点. 当然,最多的还是与 ...

  8. js 实现排序算法 -- 选择排序（Selection Sort）

    原文: 十大经典排序算法(动图演示) 选择排序(Selection Sort) 选择排序(Selection-sort)是一种简单直观的排序算法.它的工作原理:首先在未排序序列中找到最小(大)元素,存 ...

  9. js 实现数据结构 -- 散列(HashTable)

    原文: 在Javascript 中学习数据结构与算法. 概念: HashTable 类, 也叫 HashMap 类,是 Dictionary 类的一种散列表实现方式. 散列算法的作用是尽可能快地在数据 ...

  10. java文件压缩ZipOutPutStream

    其实最好的书籍就是javaAPI 1.创建ZipOutPutStream流,利用BufferedOutputStream提个速. 2.新建zip方法,用来压缩文件,传参 3.zip方法利用putNex ...