任务目的

• 学习与实践JavaScript的基本语法、语言特性
• 练习使用JavaScript实现简单的排序算法

任务描述

• 基于上一任务
• 限制输入的数字在10-100
• 队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示
• 队列展现方式变化如图，直接用高度表示数字大小
• 实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来，参考见下方参考资料

任务注意事项

• 实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 示例图仅为参考，不需要完全一致
• 具体算法及可视化的形式不做特别限制，只要求能够展现出算法的过程
• 建议不使用任何第三方库、框架

在线学习参考资料

• JavaScript入门篇
• MDN JavaScript

基础JavaScript练习（二）总结

1、JavaScript parseInt() Function

parseInt()函数解析一个字符串并且返回一个整数。

基数参数被用于指定使用哪一个数字系统，例如基数为16表示字符串中的数字从十六进制数解析为十进制数。

如果省略了基数参数，JavaScript将假设成下述情况：

• ?如果字符串以“0x”开头，基数参数为16（十六进制）。
• ?如果字符串以其他开头，基数参数为10（十进制）。

注意：只有字符串中的第一个数字被返回。允许使用前导和尾随空格。

语法：

parseInt(string, radix)

string：将被解析的字符串。

Radix：可选，从2到36的数字，表示使用的数字系统。

返回值：数字。当第一个字符不能被转换为数字，返回NaN。

2、HTML DOM childNodes Property

childNodes属性返回一个节点的子节点集合，作为一个节点列表对象。在代码中节点集合已经被排序，并且可以通过下标访问，下标从0开始。这个属性为只读属性。

可使用节点列表对象的length属性来确定子节点的个数，然后可以循环所有的子节点并从中提取信息。

注意：元素当中的空白被认为时文本，文本也被认为是节点。注释同样被认为是节点。

childNodes属性与children属性区别：

children属性返回一个节点元素节点的集合，不包含文本和注释节点，childNodes属性包含。

语法：

element.childNodes

返回值：节点列表对象，代表节点的集合。在源代码中返回集合中的节点已被排序。

3、HTML DOM Style Object

Style对象代表一个独立的style语句。

访问一个Style对象

Style对象可以通过document的头部访问，也可以通过特定的HTML元素访问。

eg：var x = document.getElementsByTagName("STYLE");

var x = document.getElementById("myH1").style;

创建Style对象

可以使用document.createElement()方法创建一个<style>元素，也可以通过设置一个已经存在元素的style属性。

var x = document.createElement("STYLE");

document.getElementById("myH1").style.color = "red";

4、已提交作业

代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-1

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

基础JavaScript练习（二）总结