零基础JavaScript编码（三）总结
任务目的
- 在上一任务基础上继续JavaScript的体验
- 接触一下JavaScript中的高级选择器
- 学习JavaScript中的数组对象遍历、读写、排序等操作
- 学习简单的字符串处理操作
任务描述
- 参考以下示例代码，读取页面上已有的source列表，从中提取出城市以及对应的空气质量
- 将数据按照某种顺序排序后，在resort列表中按照顺序显示出来
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>
<ul id="source">
<li>北京空气质量：<b>90</b></li>
<li>上海空气质量：<b>70</b></li>
<li>天津空气质量：<b>80</b></li>
<li>广州空气质量：<b>50</b></li>
<li>深圳空气质量：<b>40</b></li>
<li>福州空气质量：<b>32</b></li>
<li>成都空气质量：<b>90</b></li>
</ul>
<ul id="resort">
<!--
<li>第一名：北京空气质量：<b>90</b></li>
<li>第二名：北京空气质量：<b>90</b></li>
<li>第三名：北京空气质量：<b>90</b></li>
-->
</ul>
<button id="sort-btn">排序</button>
<script type="text/javascript">
/**
* getData方法
* 读取id为source的列表，获取其中城市名字及城市对应的空气质量
* 返回一个数组，格式见函数中示例
*/
function getData() {
/*
coding here
*/
/*
data = [
["北京", 90],
["北京", 90]
……
]
*/
return data;
}
/**
* sortAqiData
* 按空气质量对data进行从小到大的排序
* 返回一个排序后的数组
*/
function sortAqiData(data) {
}
/**
* render
* 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
* 格式见ul中的注释的部分
*/
function render(data) {
}
function btnHandle() {
var aqiData = getData();
aqiData = sortAqiData(aqiData);
render(aqiData);
}
function init() {
// 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
}
init();
</script>
</body>
</html>
任务注意事项
- 实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 建议不使用任何第三方库、框架
- 示例代码仅为示例，可以直接使用，也可以完全自己重写
在线学习参考资料
零基础JavaScript编码（三）总结
1、 JavaScript字符串
JavaScript字符串用于存储和操作文本，字符串可以为双引号（或单引号）中引起的任何文本。若最外层是双引号，字符串中可有单引号；若最外层为单引号，里面还可有双引号。
（1）特殊字符：字符串中不可有最外层引号相同类型的引号，如果需要有，前面添加转义字符（\）。
（2）为了可读性要求，字符串不要长于80字符，当长于时80字符时，可使用两个字符串相加，或中间添加\进行换行。
（3）字符串可以为对象
可以使用以下两种语句初始化字符串：
var x = "John";
var y
= new String("John");
x的类型为string，y的类型为object
“==”和“===”用于比较字符串是否相等。
x==y 返回值为true；
x===y 返回值为 false，因为x和y的类型不同。
若x和y都是对象
x==y 返回值为false。x和y是不同的对象。
x===y 返回值为false。x和y是不同的对象。
注意：==或===两个对象永远不相同。
（4）字符串方法
所有字符串方法的返回值均为新的字符串，它们并不改变原始字符串，因为字符串不可变：它不能被改变只能被替换。
①字符串长度
length属性返回字符串的长度。
②indexOf()方法
返回字符串中第一次出现指定文本的下标。当指定文本未出现时，返回-1。
③lastIndexOf()方法
返回字符串中最后一次出现指定文本的下标。当指定文本未出现时，返回-1。
④search()方法
返回字符串中第一次出现指定文本的下标。当指定文本未出现时，返回-1。
search()方法和indexof()方法参数和返回值均相同，但search()方法功能更强大。
⑤slice()方法
slice()方法从字符串中抽出一个子串，并且将子串以string类型返回。
此方法含有两个参数，子串起始下标，结束下标。
如果参数为负值，则从字符串后往前数。
如果参数为一个值，则截取从此位置到字符串结束的子串。
⑥substring()方法
substring()方法与slice()方法类似，不同的是substring()方法不接受负值。
⑦substr()方法
substr()方法与slice()方法类似，不同的是substr()方法第二个参数为要截取的子串长度。
⑧replace()方法
将原字符串中的一个子串替换为新的子串，通常替换一次，如果替换全部则使用g标记（for global match）。它并不改变原字符串而是返回替换后的新字符串。
eg: str.replace("Microsoft", "W3Schools");
str.replace(/Microsoft/g, "W3Schools");
⑨toUpperCase()方法
将一个字符串中每个字符转变为大写字符。
toLowerCase()方法
将一个字符串中每个字符转变为小写字符。
⑩concat() 方法
连接两个或多个字符串。也可用加号实现字符串连接。
⑩split()方法
可使用split()方法将字符串转换为数组，split()中的参数值为以什么分割字符串，当分隔符被省略时，数组中只包含唯一一个字符串元素，当分隔符为“”时，数组中的每个元素为一个字符。
⑩charAt()方法
charAt() 方法返回指定下标的character。
charCodeAt()方法返回指定下标的character的unicode。
2、 JavaScript 字符串match()方法
match()方法使用正则表达式匹配特定值，然后将匹配的值以数组对象的方式返回，若没有匹配成功则返回null。
注意：如果正则表达式，不包含g，match()方法将只返回第一个匹配的结果。
语法：
string.match(regexp)
3、已提交作业
代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-3
零基础JavaScript编码（三）总结的更多相关文章
- 零基础JavaScript编码（二）
任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...
- 零基础JavaScript编码（一）
任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...
- 任务十五：零基础JavaScript编码（三）
任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...
- 任务十四：零基础JavaScript编码（二）
任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...
- 任务十七：零基础JavaScript编码（五）
任务目的 在上一任务基础上继续JavaScript的体验 接触更加复杂的表单对象 实现页面上的一个完整交互功能 用DOM实现一个柱状图图表 任务描述 参考以下示例代码,原始数据包含几个城市的空气质量指 ...
- 任务十六：零基础JavaScript编码（四）
任务目的 在上一任务基础上继续JavaScript的体验 深入学习JavaScript的事件机制及DOM操作 学习事件代理机制 学习简单的表单验证功能 学习外部加载JavaScript文件 任务描述 ...
- 任务十三：零基础JavaScript编码（一）
任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...
- IM开发者的零基础通信技术入门(三)：国人通信方式的百年变迁
[来源申明]本文原文来自:微信公众号“鲜枣课堂”,官方网站:xzclass.com,原题为:<中国通信的百年沉浮>,本文引用时已征得原作者同意.为了更好的内容呈现,即时通讯网在收录时内容有 ...
- 任务一：零基础HTML编码
面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...
随机推荐
- C++ 类中使用dllimport和dllexport
在Windows平台下: 您可以使用dllimport或dllexport属性声明C ++类.这些形式意味着导入或导出整个类.以这种方式导出的类称为可导出类. 以下示例定义可导出的类.导出其所有成员函 ...
- 信贷风控模型开发----模型流程&好坏样本定义
第二章 模型开发流程&好坏样本定义 2.1模型开发流程 2.1.1 评分模型流程图 2.1.2流程图阐述 该小结提出了一些数据指标,如果不明白没有关系,往后的文章笔者会一个个地解释这些指标的含 ...
- 《C程序设计语言》练习 1-6,1-7
#include<stdio.h> /*验证表达式getchar()!=EOF的值是0还是1*/ main () { int c; c=getchar()!=EOF; printf(&qu ...
- id NSObject instanceType 区别
id 当不确定数组元素类型时,可以选择使用id NSObject和id都可以指向任何对象 NSObject使用时必须强转 instantceType 只能返回和方法所在类相同类型的对象 返回值类 ...
- Windows CMD 终端使用代理
Windows 终端使用代理 # 使用 http 类型代理 set http_proxy=http://127.0.0.1:8484 set https_proxy=http://127.0.0.1: ...
- [Machine Learning] Andrew Ng on Coursera (Week 1)
Week 1 的内容主要有: 机器学习的定义 监督式学习和无监督式学习 线性回归和成本函数 梯度下降算法 线性代数回归 主要是了解一下机器学习的基本概念,重点是学习线性回归模型,以及对应的成本函数和梯 ...
- JsonPath入门教程
有时候需要从json里面提取相关数据,必须得用到如何提取信息的知识,下面来写一下 语法格式 JsonPath 描述 $ 根节点 @ 当前节点 .or[] 子节点 .. 选择所有符合条件的节点 * 所有 ...
- URI和URL对比
URL是Uniform Resoure Locator(统一资源定位器)的缩写.就是WWW页的地址. 其URL地址格式排列为:scheme://host:Port/path --Internet资源类 ...
- C语言学习笔记之动态分配数组空间
本文为原创文章,转载请标明出处 高级语言写多了,再拿起C语言的时候,自己已经傻了... C语言中数组大小不能为变量,即使这个变量已经被赋过值了,应该使用malloc方法进行数组空间动态分配. 如下: ...
- 吴裕雄--天生自然HTML学习笔记：HTML 文本格式化
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...