任务目的

  • 在上一任务基础上继续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. Spring的@Transactional(readOnly=true)注解，对其效果进行测试

    https://blog.csdn.net/xcdsdf14545/article/details/86164012

  2. D. Almost All Divisors

    We guessed some integer number xx. You are given a list of almost all its divisors. Almost all means ...

  3. 关于Apache Commons-Lang3的使用

    在日常工作中,我们经常要使用到一些开源工具包,比如String,Date等等.有时候我们并不清楚有这些工具类的存在,造成在开发过程中重新实现导致时间浪费,且开发的代码质量不佳.而apache其实已经提 ...

  4. Android drawable 加载效果

    <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:ones ...

  5. [LC] 244. Shortest Word Distance II

    Design a class which receives a list of words in the constructor, and implements a method that takes ...

  6. 85）PHP，PHP处理mysql的函数种类

    首先,就我知道的,一共有三种: 自己用过的是mysql和mysqli,还没用过PDO_mysql 有时,随着我们的各种东西版本的更新,会遇到某一个扩展用不了的情形,所以,就有了编写完成相同功能的使用不 ...

  7. nowcoder-548C-Tachibana Kanade Loves Review

    链接:https://ac.nowcoder.com/acm/contest/548/C来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 524288K,其他语言10485 ...

  8. TOMCAT7不兼容spring boot 2.0

    找不到这个类,找不到那个类... Spring Boot 2.0 (and Spring Framework 5 upon which it builds) requires a Servlet 3. ...

  9. JavaScript的数据类型有哪些？

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. MySQL性能优化最佳实践 - 05 MySQL核心参数优化

    back_log参数的作用 指定MySQL可能的TCP/IP的连接数量(一个TCP/IP连接占256k),默认是50.当MySQL主线程在很短的时间内得到非常多的连接请求,该参数就起作用,之后主线程花 ...