百度前端技术学院—斌斌学院题库

任务一：零基础JavaScript编码（一）

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目的

JavaScript初体验

初步明白JavaScript的简单基本语法，如变量、函数

初步了解JavaScript的事件是什么

初步了解JavaScript中的DOM是什么

任务描述

参考以下示例代码，补充其中的JavaScript功能，完成一个JavaScript代码的编写

本任务完成的功能为：用户可以在输入框中输入任何内容，点击“确认填写”按钮后，用户输入的内容会显示在“您输入的值是”文字的右边

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>

  <label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label>
  <button id="button">确认填写</button>

  <div>您输入的值是：<span id="aqi-display">尚无录入</span></div>

<script type="text/javascript">

(function() {
  /*    
  在注释下方写下代码
  给按钮button绑定一个点击事件
  在事件处理函数中
  获取aqi-input输入的值，并显示在aqi-display中
  */

})();

</script>
</body>
</html>

任务注意事项

实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识

请注意代码风格的整齐、优雅

代码中含有必要的注释

可以不考虑输入的合法性

建议不使用任何第三方库、框架

示例代码仅为示例，可以直接使用，也可以完全自己重写

在线学习参考资料

任务二：零基础JavaScript编码（二）

重要说明

任务目的
在上一任务基础上继续JavaScript的体验
学习JavaScript中的if判断语法，for循环语法
学习JavaScript中的数组对象
学习如何读取、处理数据，并动态创建、修改DOM中的内容
任务描述
参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于60）进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示在网页上

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>

  <h3>污染城市列表</h3>
  <ul id="aqi-list">
<!--   
    <li>第一名：福州（样例），10</li>
      <li>第二名：福州（样例），10</li> -->
  </ul>

<script type="text/javascript">

var aqiData = [
  ["北京", 90],
  ["上海", 50],
  ["福州", 10],
  ["广州", 50],
  ["成都", 90],
  ["西安", 100]
];

(function () {

  /*
  在注释下方编写代码
  遍历读取aqiData中各个城市的数据
  将空气质量指数大于60的城市显示到aqi-list的列表中
  */

})();

</script>
</body>
</html>

任务注意事项

实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识

请注意代码风格的整齐、优雅

代码中含有必要的注释

其中的数据以及60的判断逻辑可以自行设定

建议不使用任何第三方库、框架

示例代码仅为示例，可以直接使用，也可以完全自己重写

在线学习参考资料

任务三：零基础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练习（一）

重要说明

任务目的

学习与实践JavaScript的基本语法、语言特性

初步了解JavaScript的事件是什么

初步了解JavaScript中的DOM是什么

任务描述

如图，模拟一个队列，队列的每个元素是一个数字，初始队列为空
有一个input输入框，以及4个操作按钮

点击”左侧入”，将input中输入的数字从左侧插入队列中；

点击”右侧入”，将input中输入的数字从右侧插入队列中；

点击”左侧出”，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；

点击”右侧出”，读取并删除队列又侧第一个元素，并弹窗显示元素中数值；

点击队列中任何一个元素，则该元素会被从队列中删除

任务注意事项

实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识

请注意代码风格的整齐、优雅

代码中含有必要的注释

示例图仅为参考，不需要完全一致

需要考虑数字输入的合法性

建议不使用任何第三方库、框架

在线学习参考资料

任务五：基础JavaScript练习（二）

重要说明

任务目的

学习与实践JavaScript的基本语法、语言特性

练习使用JavaScript实现简单的排序算法

任务描述

基于上一任务

限制输入的数字在10-100

队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示

队列展现方式变化如图，直接用高度表示数字大小

实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来，参考见下方参考资料

任务注意事项

实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识

请注意代码风格的整齐、优雅

代码中含有必要的注释

示例图仅为参考，不需要完全一致

具体算法及可视化的形式不做特别限制，只要求能够展现出算法的过程

建议不使用任何第三方库、框架

在线学习参考资料

同上

任务六：基础JavaScript练习（三）

重要说明

任务目的

实践JavaScript数组、字符串相关操作

任务描述

基于任务四进行升级

将新元素输入框从input改为textarea

允许一次批量输入多个内容，格式可以为数字、中文、英文等，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔

增加一个查询文本输入框，和一个查询按钮，当点击查询时，将查询词在各个元素内容中做模糊匹配，将匹配到的内容进行特殊标识，如文字颜色等。举例，内容中有abcd，查询词为ab或bc，则该内容需要标识

任务注意事项

实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识

请注意代码风格的整齐、优雅

代码中含有必要的注释

建议不使用任何第三方库、框架

在线学习参考资料

任务七：JavaScript和树（一）普通

重要说明

任务目的

熟练JavaScript

学习树这种数据结构的基本知识

任务描述

参考示例图，在页面中展现一颗二叉树的结构

提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程

二叉树的遍历算法和方式自定，前序中序后序皆可，但推荐可以提供多种算法的展示（增加多个按钮，每个按钮对应不同的算法）

当前被遍历到的节点做一个特殊显示（比如不同的颜色）

每隔一段时间（500ms，1s等时间自定）再遍历下一个节点

任务注意事项

如果按照示例图中展示树，可以使用flexbox布局

实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识

请注意代码风格的整齐、优雅

代码中含有必要的注释

建议不使用任何第三方库、框架

在线学习参考资料

任务八：JavaScript和树（二）

重要说明

任务目的

熟练JavaScript
学习树这种数据结构的基本知识

任务描述

基于任务七，参考示例图，将二叉树变成了多叉树，并且每一个节点中带有内容

提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程

当前被遍历到的节点做一个特殊显示（比如不同的颜色）

每隔一段时间（500ms，1s等时间自定）再遍历下一个节点

增加一个输入框及一个“查询”按钮，点击按钮时，开始在树中以动画形式查找节点内容和输入框中内容一致的节点，找到后以特殊样式显示该节点，找不到的话给出找不到的提示。查询过程中的展示过程和遍历过程保持一致

任务注意事项

树的遍历算法和方式自定，但推荐可以提供多种算法的展示（增加多个按钮，每个按钮对应不同的算法）

如果按照示例图中展示树，可以使用flexbox布局

实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识

请注意代码风格的整齐、优雅

代码中含有必要的注释

建议不使用任何第三方库、框架

在线学习参考资料

任务九：JavaScript和树（三）

重要说明

任务目的

熟练JavaScript

学习树这种数据结构的基本知识

任务描述

基于任务九，添加节点的选择、增加与删除的功能

点击某个节点元素，则该节点元素呈现一个特殊被选中的样式

增加一个删除按钮，当选中某个节点元素后，点击删除按钮，则将该节点及其所有子节点删除掉

增加一个输入框及一个“添加”按钮当选中某个节点元素后，点击增加按钮，则在该节点下增加一个子节点，节点内容为输入框中内容，插入在其子节点的最后一个位置

任务注意事项

实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识

请注意代码风格的整齐、优雅

代码中含有必要的注释

建议不使用任何第三方库、框架