基础JavaScript练习（二）

本篇主要目的是利用Javascript实现简单的排序算法，因本人算法小白一个，刚敲出来的东西比较粗糙又害怕会忘记，所以趁热打铁写下这篇，后续会对代码进一步优化同时摸索其他排序方法实现效果。

任务描述

• 基于上一任务
• 限制输入的数字在10-100
• 队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示
• 直接用高度表示数字大小
• 实现一个简单的排序功能

实现效果

before.png

after.png

子元素超过60个

解决思路

基于上一篇基础JavaScript练习（一），具体需要解决的问题分为四部分。
1.修改正则表达式，限制输入的数值区间为1-100；
2.增加判断条件，如果content_box.childNodes.length==60,进程无法继续并弹出提示框；
3.点击左侧入/右侧入按钮添加元素时，将用户填写的数值设置为该元素的高度；
4.实现排序的方法有很多（例：冒泡排序、快速排序、堆排序等），坦白说这里偷懒了，用了Javascript的内置方法Aarry.prototype.sort();实际项目中如若遇到排序的问题，应该首选此法。其他排序算法也是要学习的，后续会用其他方法实现，把头埋下去，现在正是你苦学的时候，时刻保持谦逊的心，这是身为程序员必须的品质。已追加冒泡排序、选择排序

排序代码实现

//增加一个排序按钮
  

//获取排序按钮元素
var btn_sort=document.getElementById('btn-sort')；

//监听排序按钮并触发事件
btn_sort.addEventListener("click", function(){
//新建数组newArray
                            var newArray=[];
//遍历原始子元素数组，将子元素中存储的数值依次添加到newArray数组中，这里因为技术不精无法直接获取子元素中的数值数组，所以采用这种比较笨拙的方法
                            for(var i=0;i

整体代码实现

包含javascript内置sort（）排序方法、冒泡排序、选择排序三种方法。

通过该任务学到的新知识

1. Array.prototype.sort()

sort() 方法在适当的位置对数组的元素进行排序，并返回数组。详细可查

2. HTML DOM querySelector() 方法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

3. 如何删除父元素下的所有子元素

没有找到直接可以删除的方法，我采用的方法是依次删除父元素第一个子元素。
content_box.removeChild(content_box.firstChild);

心得感悟

程序之路且走且珍惜，感谢大春哥，循循善诱，用心良苦。

参考文献

• JS的十大经典算法排序
• JS参考文档
  注：如果有更好的方法，欢迎大家交流指导。