任务二十一：基础JavaScript练习（四）

任务二十一：基础JavaScript练习（四）

面向人群：

JavaScript初学者

难度：

中等

重要说明

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

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

任务目的

• 学习与实践JavaScript的基本语法、语言特性
• 练习使用JavaScript实现拖拽功能

任务描述

• 基于任务20，将任务20的代码进行抽象、封装，然后在此基础上实现如图中的两个需求：Tag输入和兴趣爱好输入
• 如示例图上方，实现一个tag输入框
  • 要求遇到用户输入空格，逗号，回车时，都自动把当前输入的内容作为一个tag放在输入框下面。
  • Tag不能有重复的，遇到重复输入的Tag，自动忽视。
  • 每个Tag请做trim处理
  • 最多允许10个Tag，多于10个时，按照录入的先后顺序，把最前面的删掉
  • 当鼠标悬停在tag上时，tag前增加删除二字，点击tag可删除
• 如示例图下方，实现一个兴趣爱好输入的功能
  • 通过一个Textarea进行兴趣爱好的输入，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为间隔。
  • 当点击“确认兴趣爱好”的按钮时，将textarea中的输入按照你设定的间隔符，拆解成一个个的爱好，显示在textarea下方
  • 爱好不能重复，所以在下方呈现前，需要做一个去重
  • 每个爱好内容需要做trim处理
  • 最多允许10个兴趣爱好，多于10个时，按照录入的先后顺序，把最前面的删掉

任务注意事项

• 实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
• 示例图仅为参考，不需要完全一致
• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 建议不使用任何第三方库、框架

任务协作建议

• 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
• 各自完成任务实践
• 交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
• 相互讨论，最后合成一份组内最佳代码进行提交

在线学习参考资料

• JavaScript入门篇
• MDN JavaScript
http://v.youku.com/v_show/id_XNTM1NTQxMDMy.html http://v.youku.com/v_show/id_XNjIwNTEzMTA0.html?from=y1.2-1-176.3.3-2.1-1-1-2-0