任务目的

  • 在上一任务基础上继续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

Demo地址：http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-3/index.html

零基础JavaScript编码（三）总结的更多相关文章

  1. 零基础JavaScript编码（二）

    任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...

  2. 零基础JavaScript编码（一）

    任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...

  3. 任务十五：零基础JavaScript编码（三）

    任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...

  4. 任务十四：零基础JavaScript编码（二）

    任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...

  5. 任务十七：零基础JavaScript编码（五）

    任务目的 在上一任务基础上继续JavaScript的体验 接触更加复杂的表单对象 实现页面上的一个完整交互功能 用DOM实现一个柱状图图表 任务描述 参考以下示例代码,原始数据包含几个城市的空气质量指 ...

  6. 任务十六：零基础JavaScript编码（四）

    任务目的 在上一任务基础上继续JavaScript的体验 深入学习JavaScript的事件机制及DOM操作 学习事件代理机制 学习简单的表单验证功能 学习外部加载JavaScript文件 任务描述 ...

  7. 任务十三：零基础JavaScript编码（一）

    任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...

  8. IM开发者的零基础通信技术入门(三)：国人通信方式的百年变迁

    [来源申明]本文原文来自:微信公众号“鲜枣课堂”,官方网站:xzclass.com,原题为:<中国通信的百年沉浮>,本文引用时已征得原作者同意.为了更好的内容呈现,即时通讯网在收录时内容有 ...

  9. 任务一：零基础HTML编码

    面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...

随机推荐

  1. JavaMail读取收件箱退信邮件/分析邮件附件获取Message_Id

    需求描述:公司最近有个项目邮件通知功能,但是客户上传的邮件地址并不一定存在,以及其他的各种问题.所有希望发送通知后有个回执,及时发现地址存在问题的邮箱. 需求分析:经过分析JavaMail可以读取收件 ...

  2. 吴裕雄--天生自然C语言开发：递归

    void recursion() { statements; ... ... ... recursion(); /* 函数调用自身 */ ... ... ... } int main() { recu ...

  3. Revit二次开发-获取材质的纹理贴图

    通过IExportContext导出类中的Onmaterial()方法,可以获取到材质相关信息,主要是材质ID,再根据材质ID得到材质对象material,然后通过如下代码获取Asset对象: Ele ...

  4. android 圆环进度view

    新建RoundProgressBar class RoundProgressBar : View { private val paint = Paint() var max = 100 //最大进度 ...

  5. 利用离散 Fourier 变换解一元二次方程

    设二次方程$$x^2+bx+c=0$$的两个根分别为 $x_1,x_2$.则$$(x-x_1)(x-x_2)=x^2+bx+c.$$因此$$\begin{cases}  x_1+x_2=-b\\x_1 ...

  6. 用dfs序处理线段树的好题吗？

    https://www.cnblogs.com/mountaink/p/9878918.html 分析:每次的选取必须选最优的一条链,那我们考虑一下选择这条链后,把这条路上的点的权值更新掉,再采取选最 ...

  7. zabbix报错

    zabbix报错  原文:https://www.cnblogs.com/dbslinux/p/9465803.html https://www.cnblogs.com/losbyday/catego ...

  8. 如何使用iTunes制作iPhone铃声

    新版iTunes(iTunes11)推出以后,界面上发生了一些改变,给人带来一种面貌一新的感觉,但也给许多朋友带来一些操作上的不太适应.下面就大家比较关心的iPhone的铃声制作方法,我在iTunes ...

  9. http协议和网络模型

    传输层    传输层对上层应用层,提供处于网络连接中的两台计算机之间的数据传输. 在传输层有两个性质不同的协议:TCP(Transmission ControlProtocol,传输控制协议)和 UD ...

  10. deeplearning.ai 改善深层神经网络 week1 深度学习的实用层面

    1. 应用机器学习是高度依赖迭代尝试的,不要指望一蹴而就,必须不断调参数看结果,根据结果再继续调参数. 2. 数据集分成训练集(training set).验证集(validation/develop ...