零基础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编码
面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...
随机推荐
- day18-5个内置方法
# 1. __str__方法: 必须return class Goods: def __str__(self): return 'apple' g = Goods() print(g) #apple, ...
- python学习笔记（16）hashlib.md5摘要算法（哈希算法）
一.摘要算法格式 import hashlib #导入hashlib模块 md = hashlib.md5() #获取一个md5加密算法对象 md.update('how to use md5 in ...
- iOS性能检测工具instrunments简单介绍
1.前提条件 在appstore中下载安装xcode 2.打开方式 3.页面元素介绍 3.电脑连接手机选中要测试的app 4.选中要测试哪项,双击进去,点击开始进行监控测试 5.主要介绍一下三项 第一 ...
- 整理汇总系统中空值的使用方法，后台+jsp
一.后台: 1. entity.getStringValue().isEmpty()://字符串自带方法,未发现非空方法实现原理:判断值的长度 public boolean isEmpty() { r ...
- Bringing up interface eth0: Device eth0 does not seem to be present, delaying initialization.FAILED
1.service network stop 2./etc/sysconfig/network-scripts目录下,删除想要删除的网卡配置,我要删除eth1,所以rm -rf ifcfg-eth1, ...
- Docker Dockerfile基本配置
1.dockerfile介绍 Dockerfile是Docker用来构建镜像的文本文件,包含自定义的指令和格式.可以通过docker build命令从Dockerfile中构建镜像.这个过程与传统分布 ...
- SpringMVC静态资源拦截的问题
通常在web.xml中的核心控制器的DispatcherServlet中的url-pattern属性配置成类似“/”的拦截路径,但是会出现静态资源找不到的问题,比如js脚本.图片.css等无法加载,那 ...
- Raspberrypi 装配笔记
1 镜像烧制 2 基础配置 2.1 SSH 连接 2.2 修改管理员密码 2.3 Samba 3 功能配置 3.1 Homebridge 1 镜像烧制 从树莓派官网下载最新的 Raspbian 系统镜 ...
- echo追加和覆盖
追加: echo " " >> 文件名 覆盖: echo " " > 文件名
- 吴裕雄--天生自然 R语言开发学习：中级绘图（续二）
#------------------------------------------------------------------------------------# # R in Action ...