任务目的

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

    package me.zhengjie.system.domain; import lombok.AllArgsConstructor; import lombok.Data; import lomb ...

  2. 存储映射I/O函数

    1.void  * mmap((void *addr, size_t length, int prot, int flags, int fd, off_t offset) 参数: addr:用于指定映 ...

  3. 牛客-Forsaken的数列（Treap）

    题目传送门 sol:第一次看题还真信了是用线段树来做,但是没什么想法,看了题解发现是我不会的Treap,然后花了几天时间学习了一下并补掉题目 无旋Treap #include <bits/std ...

  4. 2018安卓巴士开发者大会打造Android技术盛宴

    2018安卓巴士开发者大会打造Android技术盛宴2018安卓巴士开发者大会将于8月25日在上海举行,作为中国最具前沿性.专业性的安卓技术会议,将邀请来自爱奇艺.阿里.饿了么等知名企业的一线工程师分 ...

  5. MOOC（9）- 登录接口返回的cookie中有多个token

  6. Eclipse中项目过大引起的 IDE 加载缓慢，JVM 内存不足的情况解决

    如果 IDE 加载项目非常缓慢,甚至常常出现卡死的情况,有可能是开发工具设置的 JVM 内存不够引起的.解决办法:找到 Eclipse 的安装目录,修改 Eclipse.ini 配置文件.修改此配置文 ...

  7. CAD 卸载工具，完美彻底卸载清除干净cad各种残留注册表和文件

    CAD提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装CAD失败提示CAD安装未完成,某些产品无法安装,也有时候想重新安装CAD的时候会出现本电脑windows ...

  8. 分布式Web服务器架构（通俗易通）

    最开始,由于某些想法,于是在互联网上搭建了一个网站,这个时候甚至有可能主机都是租借的,但由于这篇文章我们只关注架构的演变历程,因此就假设这个时候已经是托管了一台主机,并且有一定的带宽了,这个时候由于网 ...

  9. Rime输入法一些设定

    有鉴于谷歌搜狗拼音等不太好用,但是博主一直页没找到合心的输入法,直到遇见Rime,中州韵就是我想要的输入法.记录一下自己用的时候的修改,以备查询.注意:缩进不要弄丢,所有更改完都需要重新部署才能生效. ...

  10. JavaScript中的document.fullscreenEnabled

    本文主要讲述了: 什么是document.fullscreenEnabled 作用 兼容性 正文 什么是document.fullscreenEnabled document.fullscreenEn ...