零基础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的判断逻辑可以自行设定
- 建议不使用任何第三方库、框架
- 示例代码仅为示例，可以直接使用，也可以完全自己重写
在线学习参考资料
任务二：零基础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
零基础JavaScript编码（二）的更多相关文章
- 零基础JavaScript编码（三）总结
任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...
- 零基础JavaScript编码（一）
任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...
- 任务十四：零基础JavaScript编码（二）
任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...
- 任务十七：零基础JavaScript编码（五）
任务目的 在上一任务基础上继续JavaScript的体验 接触更加复杂的表单对象 实现页面上的一个完整交互功能 用DOM实现一个柱状图图表 任务描述 参考以下示例代码,原始数据包含几个城市的空气质量指 ...
- 任务十六：零基础JavaScript编码（四）
任务目的 在上一任务基础上继续JavaScript的体验 深入学习JavaScript的事件机制及DOM操作 学习事件代理机制 学习简单的表单验证功能 学习外部加载JavaScript文件 任务描述 ...
- 任务十五：零基础JavaScript编码（三）
任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...
- 任务十三：零基础JavaScript编码（一）
任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...
- IM开发者的零基础通信技术入门(二)：通信交换技术的百年发展史(下)
1.系列文章引言 1.1 适合谁来阅读? 本系列文章尽量使用最浅显易懂的文字.图片来组织内容,力求通信技术零基础的人群也能看懂.但个人建议,至少稍微了解过网络通信方面的知识后再看,会更有收获.如果您大 ...
- salesforce 零基础学习（二十二）Test简单使用
本篇内容只是本人简单的mark开发中常出现的一些疑问,方便后期项目使用时奠定基础,如果对Test零基础童鞋,欢迎查看Test官方的使用介绍: https://help.salesforce.com/a ...
随机推荐
- day04-函数，装饰器初成
面试的时候,经常被问过装饰器,所以掌握好装饰器非常重要. 一.装饰器形成的过程:1.最简单的装饰器.2.被装饰的函数有返回值.3.被装饰的函数有一个参数.4.被装饰的函数有多个位置参数.5.被装饰的函 ...
- Image.FromStream(ms) 提示参数无效
说明ms有问题,首先确保有读到数据,这种情况是保存到库的时候出错的. 原来你可能是这样写的: MemoryStream stream = new MemoryStream();PictureBox1. ...
- idea 创建项目没有web.xml文件，如何添加
1.首先看下项目工程里面是否有WEB-INF文件夹,没有就创建一个 2.点击 file 选择 project structure 3.选择 facets,点击+号, 选择 web 4.弹出 弹框 选择 ...
- javascript 实现最简单的阶乘！
<script type='text/javascript'> window.onload = get(5); function get(n){ document.w ...
- 成为一名PHP专家其实并不难
本文作者Bruno Skvorc是一名资深的Web开发者.在这篇文章里主要是讲述成为一名专业的PHP专家所要经历的过程,以及在这个过程里要如何学习掌握技巧和对工具的舍取.(以下为编译内容) 当阅读各种 ...
- Word Flow：创造吉尼斯世界纪录的触屏文本输入的全新体验——微软Windows Phone 8.1系统倾情巨献
Flow:创造吉尼斯世界纪录的触屏文本输入的全新体验--微软Windows Phone 8.1系统倾情巨献" title="Word Flow:创造吉尼斯世界纪录的触屏文本输入的全 ...
- 点分治练习——BZOJ 2152
做的第二道点分治的题目,比较裸,算是模板题吧(感觉比之前那题还简单点. 题目:BZOJ 2152 聪聪可可 题目大意:给出一棵树,求树上两点间长度为3的倍数(0也算)的路径数. 解题思路: 基本和PO ...
- SHELL用法二（练习）
1.SHELL编程作业&剖析演练 1)SHELL编程Nginx虚拟主机脚本: 安装Nginx WEB平台: 配置虚拟主机(1个网站): 重启&加载配置文件: 配置hos ...
- PEAKS|NovoHMM|Nover|DeepNovo|MAYUPercolator|UniprotKB|Swiss-prot|Mascot|SEQUEST|X!Tandem|pFind|MaxQuant|Msconvert|PEPMASS|LC|
质谱仪: 质谱分析法是先将大分子电离为带电粒子,按质核比分离,由质谱仪识别电信号得到质谱图. Top-down直接得到结果是蛋白. Bottom down使用shutgun方法得到结果是肽段. 由蛋白 ...
- Jquery中$(document).ready() 和 JavaScript中的window.onload方法 比较
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 win ...