任务目的

  • 在上一任务基础上继续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. LeetCode No.100,101,102

    No.100 IsSameTree 相同的树 题目 给定两个二叉树,编写一个函数来检验它们是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 输入: 1 1 / \ ...

  2. Ubuntu中Unable to acquire the dpkg frontend lock解决方案

    根据百度总结三种方式:第三种解决了我的问题 1. ps -e|grep apt-get 结果:6965 ? 00:00:01 apt-get 执行:sudo kill 6965 #强制解锁,会删除文件 ...

  3. 微信公众平台开发2-access_token获取及应用（含源码）

    微信公众平台开发-access_token获取及应用(含源码) 很多系统中都有access_token参数,对于微信公众平台的access_token参数,微信服务器判断该公众平台所拥有的权限,允许或 ...

  4. TPO4-1 Deer Populations of the Puget Sound

    The causes of this population rebound are consequences of other human actions. First, the major pred ...

  5. BadRequestException

    package me.zhengjie.common.exception; import lombok.Getter; import org.springframework.http.HttpStat ...

  6. highcharts 设置柱子之间的距离 柱子宽度

    plotOption : { column : { // 设置每个柱自身的宽度 pointWidth : // x轴每个点只用一个柱,则这个属性设置的是相邻的两个点的柱之间的间距. // 如果x轴每个 ...

  7. [Windows] Access SMBIOS

    SMBIOS architecture System Management BIOS (SMBIOS) is the premier standard for delivering managemen ...

  8. 基于Python的Flask基础知识

    Flask简介 Flask 是一个使用 Python 编写的轻量级 Web 应用程序框架.Armin Ronacher带领一个名为Pocco的国际Python爱好者团队开发了Flask. 下面我们简单 ...

  9. elasticsearch用法

    基本原理 搜索引擎的索引 倒排序 由value查找key 数据库的索引 由key查找value 用于解决分库分表后的排序分页 like查找 性能问题 日志库的全文搜索 spring集成时使用的不是re ...

  10. 16）用了session会话技术

    为什么用session会话技术? 因为假如你进入后台,不可能随意进入,即使你的验证通过了,那么还需要一个变量来存一个标志,假如标志的值是yes,那么我们可以直接进入后台的首页,无需验证,但是,标志是n ...