任务目的

  • 在上一任务基础上继续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. 吴裕雄--天生自然 JAVA开发学习：序列化

    public final void writeObject(Object x) throws IOException public final Object readObject() throws I ...

  2. 感叹号在Linux bash中使用技巧

    1. 重复执行上一条指令  !! [root@iZ23t6nzr7dZ python]# ls /usr/local/ aegis bin etc games include lib lib64 li ...

  3. AJAX数据传输

    AJAX = Asynchronous JavaScript and XML(异步的Javascript和XML) AJAX最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页 ...

  4. java.lang.NoSuchMethodError: org.springframework.util.Assert.notNull(Ljava/lang/Object;Ljava/util/function/Supplier;)V

    分析,jar包冲突,然后看pom.xml文件 原因在于jar包冲突,版本不兼容, 错误的代码:  可以看到有很多不同版本的重复的spring-test依赖 <dependency> < ...

  5. fcntl()函数之非阻塞模型

    优点:设置标准输入为非阻塞(有数据则读 没有数据则立即返回),常用于网络通信以及轻量信息多并发中 步骤: 1.oldflag=fcntl(STDIN_FILENO,F_GETFL); 获取标准输入的文 ...

  6. RabbitMQ传输原理、五种模式

    本文代码基于SpringBoot,文末有代码连接 .首先是一些在Spring Boot的一些配置和概念,然后跟随代码看下五种模式 MQ两种消息传输方式,点对点(代码中的简单传递模式),发布/订阅(代码 ...

  7. Linux启动初始化配置文件浅析

    转自:http://blog.51cto.com/19055/1144600 1)/etc/profile   登录时,会执行. 全局(公有)配置,不管是哪个用户,登录时都会读取该文件. (2)/ec ...

  8. python3下scrapy爬虫(第四卷:初步抓取网页内容之抓取网页里的指定数据延展方法）

    上卷中我运用创建HtmlXPathSelector 对象进行抓取数据: 现在咱们再试一下其他的方法,先试一下我得最爱XPATH 看下结果: 直接打印出结果了 我现在就正常拼下路径 只求打印结果: 现在 ...

  9. servlet简单概括总结

    最近在看java web的相关内容,不管是整体还是细节,要学习的知识有很多,所以有一个好的学习体系非常重要.在阅读学习一些博客和教程中关于servlet的内容后,现将知识体系和自己的总结体会进行梳理, ...

  10. SpringMVC基本使用步骤

    使用Spring MVC,第一步就是使用Spring提供的前置控制器,即Servlet的实现类DispatcherServlet拦截url:org.springframework.web.servle ...