零基础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编码
面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...
随机推荐
- Unable to cast object of type 'System.Int32' to type 'System.String'.
最近在研究.netcore,尝试把前后端完全分离.但是在写接口的时候,Post参数是FromBody的时候报错了 Microsoft.AspNetCore.Diagnostics.DeveloperE ...
- java作业-----方法重载
满足方法重载的条件:1.方法名相同 2.参数类型不同,参数个数不同,参数类型的顺序不同. 同时,方法的返回值不作为方法重载的判断条件.
- 【转】HeadFirst 组合模式+迭代器错误原因以及解决代码
http://blog.csdn.net/sugar_girl/article/details/53400267 <HeadFirst JAVA设计模式>中用迭代器迭代组合模式是存 ...
- centos7 部署vue项目（前后端分离、nginx）
一.环境准备 1.centos7系统 2.mysql数据库 3.在centos7虚拟机上安装好nginx 二.部署内容准备 1.后端war包 或者可执行jar 因为我这里是spring boot项目. ...
- [LC] 76. Minimum Window Substring
Given a string S and a string T, find the minimum window in S which will contain all the characters ...
- JavaScript 简介与语法
一.JavaScript简介 ).head里面 ).body里面 (在body内最为严谨) ).</html>之后 //程序上来要执行的部分 [2]三个常用对话框 alert()警告对话框 ...
- windows下redis的配置和jedis api的最基本的使用
redis的安装直接跳过 1.注册redis服务 在DOM窗口下,进入redis的安装目录(可以先进入安装目录,然后shift+右键,选择在此处打开powershell窗口), 输入命令: redis ...
- AngularJS中格式化日期为指定格式字符串
var date = $filter('date')(new Date(),'MM/dd/yyyy');
- mysql挖掘与探索------第一章（简介）
一.数据库简介: 1按照数据库发展时间,主要出现下面几个类型的数据库系统: a 网状型数据库 b 层次型数据库 c 关系型数据库 d 面向对象数据库 上面4中数据库系统中,关系型数据库使用最为广泛.面 ...
- 制作MACOSX 10.9Mavericks安装启动U盘教程
苹果OS X Mavericks发布了,不少朋友又开始制作系统安装U盘了.其实下面介绍的方法与之前介绍的方法可能有些不同,不过原理还是一样的.下面看看具体的操作步骤吧! 1. 首先你需要开启显示隐藏文 ...