首页 > 代码库 > 基础JavaScript练习(二)总结

基础JavaScript练习(二)总结

任务目的

  • 学习与实践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练习(二)总结