基础JavaScript练习(二)总结
任务目的
- 学习与实践JavaScript的基本语法、语言特性
- 练习使用JavaScript实现简单的排序算法
任务描述
- 基于上一任务
- 限制输入的数字在10-100
- 队列元素数量最多限制为60个,当超过60个时,添加元素时alert出提示
- 队列展现方式变化如图,直接用高度表示数字大小
- 实现一个简单的排序功能,如冒泡排序(不限制具体算法),用可视化的方法表达出来,参考见下方参考资料
任务注意事项
- 实现简单功能的同时,请仔细学习JavaScript基本语法、事件、DOM相关的知识
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 示例图仅为参考,不需要完全一致
- 具体算法及可视化的形式不做特别限制,只要求能够展现出算法的过程
- 建议不使用任何第三方库、框架
在线学习参考资料
基础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