零基础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编码
面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...
随机推荐
- day27-控制台输出彩色文字
格式:\033[显示方式;前景色;背景色m 说明:显示方式 意义------------------------- 0 终端默认设置 1 ...
- maven中指定build一个project中几个特定的子modules
问题由来: 一个项目可能会有多个子module,在特定情况下可能只需要build其中几个module. 例如我的项目的目录结构如下 myproject |------------module_one ...
- 在服务器搭建git服务器
服务端操作 安装Git及创建用户组.用户 123 yum install gitgroupadd gitadduser git -g git 禁止用户git登录 修改/etc/passwd文件: 找到 ...
- python-django-celery的安装和配置_20191122
celery的介绍 celery有三个核心的概念: 任务的发出者(需要发邮件的一方),我们项目的代码就相当于发出者, 中间是一个任务队列(中间人broker),这里我们使用Redis来承担任务队列的作 ...
- Redhat7 配置https
Redhat7 配置https 分为自签名证书和第3方证书(此时实验为第3方,自签名略) 安装: # yum install httpd mod_ssl 生成key: # openssl genrsa ...
- node.js 和 npm/cnpm/nrm 的安装
node.js 和 npm/cnpm/nrm 的安装 安装 node.js.去 官网 下载,下载 LTS 版本的.安装时一路点确定,不要改动任何设置. 在 git-bash 或是 cmd 下,输入 n ...
- VRRP笔记三:配置keepalived为实现haproxy高可用的双主模型配置文件示例：
说明:其基本实现思想为创建两个虚拟路由器,并以两个节点互为主从. ! Configuration File for keepalived global_defs { notification_emai ...
- 古典问题：有一对兔子，从出生后第3个月起每个月都生一对兔子，小兔子长到第三个月后每个月又生一对兔子，假如兔子都不死，问每个月的兔子总数为多少？（python语言）
# 古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? # 斐波那契数列:0,1,1,2,3,5,8,13, ...
- 将本地的一个项目托管到自己的GitHub仓库
GitHub作为全球最大的代码托管平台,功能十分强大.我们可以在上面建立一个仓库来托管我们的代码图片等资源.因为使用markdown语法来写博客所以在插入图片时需要一个图片外链地址,起初去网上找了一个 ...
- zookeeper 单机部署
第一步:下载安装包 这里以3.4.11为例 https://archive.apache.org/dist/zookeeper/ 点进去看: 下载tar文件 第二步:上传到服务器 使用ftp工具上传 ...