javascript的基础知识点

一：鼠标提示框

需求描述：鼠标移入都input上，div显示，移出，div消失

分析：控制display=block/none

鼠标移入，鼠标移出事件

 <input type="button" onmouseover="alert('鼠标移入')" onmouseout="alert('鼠标移出')">

功能代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
             200px;
            height: 100px;
            background-color: gray;
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" onmouseover="div1.style.display='block'" onmouseout="div1.style.display='none'">
    <div id="div1">为了你的信息安全，请不要再网吧内勾选</div> 
</body>
</html>

问题：版本兼容性差，存在div1 is not define的问题，火狐浏览器会出现问题

解决办法：使用 document.getElementById()

功能代码

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            width: 200px;
            height: 100px;
            background-color: gray;
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" onmouseover="look();" onmouseout="unlook();">
    <div id="div1">为了你的信息安全，请不要再网吧内勾选</div>
    <script src="13DOM操作.js"></script> # 这里必须在div的下面引用，因为上面引用会先执行js，找不到div1,变量d为none，根本无法修改属性。
    
</body>
</html>

javascript代码

var d = document.getElementById("div1");

function look() {
    d.style.display ='block';
}

function unlook() {
    d.style.display ='none';
}

二：鼠标移入后，div变大，变色

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="div1" onmouseover="big();" onmouseout="small();"></div>
    <script src="13DOM操作.js"></script>
    
</body>
</html>

javasript代码

var d = document.getElementById("div1");

function big() {
    d.style.width ='500px';
    d.style.height='500px';
    d.style.backgroundColor='green';
}

function small() {
    d.style.width ='100px';
    d.style.height='100px';
    d.style.backgroundColor='red';
}

三：网页换肤

实现方式一：

html代码

<body id="body">
<input type="submit" id="input1" value="皮肤一" onclick="to_green();">
<input type="submit" id="input2" value="皮肤二" onclick="to_pink();">
<script src="13DOM操作.js"></script>

javadcript代码

var b = document.getElementById("body");

function to_green() {
    b.style.backgroundColor="green";
}

function to_pink() {
    b.style.backgroundColor="pink";
}

实现方式二：

css代码

# css1.css
body {
    background-color: gray;
}

#css2.css
body {
    background-color:yellowgreen;
}

#css3.css
body {
    background-color: pink;
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css1.css" id="objlink">  # 知识点：任何标签都可以加id和class选择器，用来控制属性
    <script src="13DOM操作.js"></script>   
</head>
<body>
    <input type="submit" value="皮肤一" onclick="to_green();">
    <input type="submit" value="皮肤二" onclick="to_pink();">
     
</body>
</html>

javascript代码

var obj = document.getElementById("objlink");

function to_green() {
    obj.href = "css2.css";  # 知识点二：任何标签的任何属性都可以修改
}

function to_pink() {
    obj.href = "css3.css";
}

四：点击出现下拉菜单，再次点击，隐藏下拉菜单

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css1.css" id="objlink">
    <style>
        #div1{
             100px;
            height: 500px;
            display: none;
            background-color:pink;
        }
    </style>   
</head>
<body>
    <input type="submit" value="选项" onclick="down();">
    <div id=div1></div>
    <script src="13DOM操作.js"></script>
</body>
</html>

javascript代码

var d = document.getElementById("div1");
function down(){
    if (d.style.display =="none"){   # 和python中的==用法一样，判等
        d.style.display = "block";
    }
    else{
        d.style.display = "none";
    }
}

五：修改元素属性的两种方法

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        
        function setText(args1,args2){
            var value = document.getElementById("input1")
            // 点击修改属性的方法一：变量名.属性名 = xxxx
            // value.value = "点击后出现的文字"
            // 点击修改属性的方法二：变量名[属性名] = xxxx
            // value["value"] = "点击后出现文字"
            // 方法二的优点是可以进行传参，比较灵活
            value[args1] = "传递参数改变"
            value[args2] = "鼠标移动上去显示"
        }
    </script>
</head>
<body>
    <input type="text" value="" id="input1">
    <!-- 属性名字传递进去，为字符串格式 -->
    <input type="button" onclick="setText('value','title')" value="点击出现文字">
</body>
</html>

六：补充知识：样式的优先级

样式优先级：通配符 < 标签 < class < id < style(行间)

样式设置：style.样式名 = xxx 通过style加样式和style取样式都是将样式加到了行间样式 <div style="widht:200px"></div>

隐患：style和className的关系

例如：通过style和className操作元素的同一个属性，一定是style的属性生成后，class的属性就失效了，可以从绿变红，不能从红变绿

结论：要么一直操纵style，要么一直操作class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    div{
        width: 200px;
        height: 200px;
        border: 1px solid black
    }

    .box{
        background-color: green;
    }
    </style>
    
   
</head>
<body>
    <input type="button" value="变红" onclick="toRed()">
    <input type="button" value="变绿" onclick="toGreen()">
    <div id="div1"></div>
    <script>
            var divbox = document.getElementById("div1")
            function toGreen(){
                divbox.className = 'box'
            }
            function toRed(){
                divbox.style.backgroundColor = "red"
            }
        </script>
</body>
</html>

七：提取行间事件

<input type="button" value="变绿" onclick="toGreen()"> onclick就是行间事件

（一）提取事件例子：通过js给元素增加行间点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
   <input type="button" value="按钮" id="btn1">
   <script>
    var btn = document.getElementById("btn1")
    function (){
        alert("今天吃火锅");
    }
   btn.onclick=haha;
   </script>
</body>
</html>

匿名函数实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
   <input type="button" value="按钮" id="btn1">
   <script>
    var btn = document.getElementById("btn1")
    // 匿名函数的写法
    btn.onclick = function (){
        alert("今天吃火锅");
    }
   </script>
</body>
</html>

window.onload匿名函数

作用：解决在head里面加载js找不到body里面元素的报错，原理是先加载完整个窗口后，再执行函数里面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
       window.onload = function(){
        var btn = document.getElementById("btn1")
            // 匿名函数的写法
            btn.onclick = function (){
                alert("今天吃火锅");
            }
       }
    </script>
</head>
<body>
   <input type="button" value="按钮" id="btn1">
</body>
</html>

行为js-样式css-结构html 三者分离

getElementsByTagName

作用：getElementById是一次获得一个元素，精准定位，getElementsByTagName一次获取一组元素，批量操作

前提知识点：循环

<script>
window.onload = function(){
var i = 0;
while(i<10){
　　alert(i);
   i = i + 1;
}
}
</script>

<script>
window.onload = function(){
# 三元表达式
for(var i=0;i<10;i++){
   alert(i)
}
}
</script>

例子：给所有的div改变背景颜色

 <script>
       window.onload = function(){
        var divarr = document.getElementsByTagName("div")
        for(var i=0;i<divarr.length;i++){
            divarr[i].style.backgroundColor="red"
        }
       }
 </script>

全选复选不选

需求：点击全选按钮，所以的checkbox都出现对勾，点击取消按钮，取消对勾，点击反选，有对勾变没对勾，没对勾变有对勾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
       window.onload = function(){
        var b1 = document.getElementById("btn1")
        var b2 = document.getElementById("btn2")
        var b3 = document.getElementById("btn3")
        var v1 = document.getElementById("div1")
        var inputarr = v1.getElementsByTagName("input")
        b1.onclick = function(){
            for(var i=0;i<inputarr.length;i++){
                inputarr[i].checked = true;
            }
        };
        b2.onclick = function(){
            for(var i=0;i<inputarr.length;i++){
                inputarr[i].checked = false;
            }
        };
        b3.onclick = function(){
            for(var i=0;i<inputarr.length;i++){
                if (inputarr[i].checked==true){
                    inputarr[i].checked=false;
                }
                else{
                    inputarr[i].checked=true;
                }
            }
        }
       }
    </script>
</head>

<body>
  <input type="button" value="全选" id="btn1">
  <input type="button" value="取消全选" id="btn2">
  <input type="button" value="反选" id="btn3">
<div id="div1">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
</div>

</body>
</html>

网站导航栏，鼠标移到那个栏目，显示哪个栏目的消息：引入this的概念，表示当前事件的标签

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
    <style>
        #div1{
             185px;
            height: 600px;
            border: 1px solid green
        }
        #div1 div{
            display: none;
        }
        .active{
            background-color: yellow;
        }
    
    </style>

    <script>
    
    window.onload = function(){
        var buton_arr = document.getElementsByTagName("input")
        var div1 = document.getElementById("div1")
        var div_arr = div1.getElementsByTagName("div")
        for(var i=0;i<buton_arr.length;i++){
            // 为了查找div
            buton_arr[i].index = i
            buton_arr[i].onclick = function(){
                for(var i=0;i<buton_arr.length;i++){
                    div_arr[i].style.display = "none";
                    buton_arr[i].className = "";
                }
                // this表示当前事件的标签本身
               this.className = "active";
               div_arr[this.index].style.display = "block";
           }
        }
    };
    
    </script>

</head>
<body>
    

    <input type="button" value="新闻">
    <input type="button" value="体育">
    <input type="button" value="娱乐">
    <input type="button" value="电影">

    <div id="div1">
        <div style="display:block">浙江温州江南皮革厂倒闭了</div>
        <div>科比手感不佳，只得了36分</div>
        <div>赵薇出演画皮3</div>
        <div>大宝贝和黄晓明共同出演电视剧,毛豆新车网</div>
    </div>

</body>
</html>

简易日历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js简易日历</title>

    <style>
    
    #big_div{
        width: 350px;
        height: 1000px;
        /* border: 1px solid black */
    }
    #month {

        width: 310px;
        height: 410px;
        /* border: 1px solid red; */
        
    }
    #month div{
        width: 100px;
        height: 100px;
        border: 1px solid greenyellow;
        text-align: center;
        vertical-align: bottom;
        background-color: gray;
        float: left;
    }
    #text{
        width: 305px;
        border: 1px solid pink;
        height: 300px;
        /* float: left; */
    }
    #text div{
        display: none;
    }
    </style>

    <script>
    
        window.onload = function(){
            var div_month = document.getElementById("month")
            var div_arr = div_month.getElementsByTagName("div")
            var text_div = document.getElementById("text")
            var text_arr  = text_div.getElementsByTagName("div")
            for(var i=0;i<div_arr.length;i++){
                div_arr[i].index = i
                div_arr[i].onclick = function(){
                    for(var i=0;i<div_arr.length;i++){
                        div_arr[i].style.backgroundColor="gray";
                        text_arr[i].style.display = "none";
                    }
                    this.style.backgroundColor = "yellow";
                    text_arr[this.index].style.display="block";
                }
            }
        }

    </script>

</head>
<body>
    
    <div id = "big_div">


        <div id="month">
          
            <div style="display: block"><h3>一月份</h3><p>Jan</p></div>
            <div><h3>二月份</h3><p>Feb</p></div>
            <div><h3>三月份</h3><p>Mar</p></div>
            <div><h3>四月份</h3><p>Apr</p></div>
            <div><h3>五月份</h3><p>May</p></div>
            <div><h3>六月份</h3><p>Jun</p></div>
            <div><h3>七月份</h3><p>Jul</p></div>
            <div><h3>八月份</h3><p>Aug</p></div>
            <div><h3>九月份</h3><p>Sept</p></div>
            <div><h3>十月份</h3><p>Oct</p></div>
            <div><h3>十一月份</h3><p>Nov</p></div>
            <div><h3>十二月份</h3><p>Dec</p></div>

        </div>
        <div id="text">
            
            <div>一月通常称：正月、端月、初月</div>
            <div>二月常称：仲春、仲阳、如月； </div>
            <div>三月常称：暮春、末春、晚春；</div>
            <div>四月常称：孟夏、首夏、初夏；</div>
            <div>五月常称：仲夏、超夏；</div>
            <div>六月常称：荷月、季月、伏月； </div>
            <div>七月常称：孟秋、初秋、新秋； </div>
            <div>八月常称：仲秋、正秋；</div>
            <div>九月常称：季秋、晚秋、暮秋； </div>
            <div>十月常称：孟冬、初冬、上冬； </div>
            <div>十一月常称：仲冬、中东； </div>
            <div>十二月常称：季冬、严冬、残冬； </div>

        </div>


    </div>


</body>
</html>

八：取模的运用 12%5 = 2

（一）：标签栏，黄绿交替出现

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>交替变色</title>


    <script>
    
        window.onload = function(){
            var li_arr = document.getElementsByTagName("li")
            for(var i=0;i<li_arr.length;i++){
                if(i%2==0){
                    li_arr[i].style.backgroundColor="green"

                }else{
                    li_arr[i].style.backgroundColor="yellow"
                }
            }
        };
    
    
    </script>
</head>
<body>
    
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>


</body>
</html>

（二）秒转时间

<script>
    
    window.onload = function(){
        var s = 345;

        alert( parseInt(s/3600)+"小时"+parseInt(s/60)+"分"+s%60 + "秒")

    }
    </script>

九：运算器

需求：输入框输入数值，进行相加，非数值进行提醒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>交替变色</title>


    <script>
    
        window.onload = function(){
          
            var n1 = document.getElementById("input1");
            var n2 = document.getElementById("input2");
            var n3 = document.getElementById("button1");

            n3.onclick = function(){
                var v1 = parseInt(n1.value);  # 将字符串数字转成整数，缺点3.5--->3   parseFloat 3.5--->3.5   3--->3 推荐使用parseFloat
                var v2 = parseInt(n2.value);
                // isNaN(x)  检查x参数是否为是非数字值
                if(isNaN(v1)&& (!isNaN(v2))){  # && ----> and    ！----> not  || ----> or

                    alert("第一个值输入有误")
                }
                else if(isNaN(v2) && (!isNaN(v1))){
                    alert("第二个值输入有误")
                }
                else if(isNaN(v1)&&isNaN(v2)){

                    alert("两个值都输入有误")
                }
                else{
                    alert("两个值的和是"+(v1+v2))
                }
            }
        };
    
    
    </script>
</head>
<body>
    
    <input type="text" id="input1">
    <input type="text" id="input2">
    <input type="button" value="点击我" id="button1">

</body>
</html>

判等

a = "5"

b = 5

a == b true  # 转换类型后，判断

a === b flase # 不转换类型，判断

十：变量的作用域和闭包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>局部变量与全局变量</title>

    <script>
    
    window.onload = function(){

        function f1(){
            // 外函数的局部变量，内函数可以直接使用
            var a = 10;
            function f2(){
                alert("a")
            }
        // python这里是 return f2 js里面是直接调用f2函数。
        f2(); 
        }

        // 闭包的调用-调用外函数，其实就是调用内函数
        f1();
    }
    
   
    </script>
</head>
<body>
    
</body>
</html>

十一：变量的命名，匈牙利命名法

aTest---数组 sTest---字符串 oTest---存对象

类型前置，单词首字母大写

十二：循环 break continue

window.onload = function(){
        
        var a = 0;
        for(var a=0;a<10;a++){
            if(a==5){
                // break;
                continue;
            }else{
                alert(a)
            }
        }

    }

十三：json字符串

 <script>
    
    window.onload = function(){
        // 定义
        var json = {"name":"zhangsan","habbit":[{"week1":"骑马"},{"week2":"高尔夫"}],"address":{"city":"西安"},"age":12}
        // 可以取到值
        alert(json.name)
        // 取值
        alert(json.habbit[0].week1)
        alert(json.habbit[1].week2)
        alert(json.address.city)
        alert(++json.age)
    };
    
    
    </script>

十四：函数的返回值

（一）：最简单的返回值

 <script>
        function show(){
            return 12;
        }
    alert(show());
    </script>

<script>
window.onload = function(){

    function show(a,b){
        return a + b;
    }
    alert(show(12,12))

}
</script>

（二）不定参数的函数

<script>
window.onload = function(arguments){

    function show(){
        // 其实arguments就是一个数组,用来存储外面传递的参数
        var result = 0;
        for(var i = 0;i<arguments.length;i++){
            result = result + arguments[i]
           
        }
        return result;
    }
    alert(show(1,2,3,4,5,6,7,8,9,10))

}
</script>

（三）CSS 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>json数据格式</title>

<script>
    function CSS(){
        if(arguments.length==2){
            return arguments[0].style[arguments[1]]
        }else{
            arguments[0].style[arguments[1]] = arguments[2];
        }
    }
    window.onload = function(arguments){
        var oDiv = document.getElementById("div1");
        CSS(oDiv,"background-color","green");
    }
</script>

</head>
<body>
    <div id="div1" style=" 200px;height:200px;background-color: red;">demo</div>
</body>
</html>

css函数总结：传两个参数返回样式值，传三个参数设置样式

对上面的函数进行改造

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>json数据格式</title>

<script>
    function CSS(obj,name,value){
        if(arguments.length==2){
            return obj.style[name]
        }else{
            obj.style[name] = value;
        }
    }
    window.onload = function(arguments){
        var oDiv = document.getElementById("div1");
        CSS(oDiv,"background-color","green");
    }
</script>

</head>
<body>
    <div id="div1" style=" 200px;height:200px;background-color: red;">demo</div>
</body>
</html>

View Code

style 是取行间样式，那么非行间样式怎么取呢，currentStyle取非行间样式，getcomputerStyle()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>json数据格式</title>

<style>

#div1 {
    width: 200px;
    height:200px;
    background-color: red;
}

</style>

<script>
    window.onload = function(){
        var oDiv = document.getElementById("div1");
        // chrome下取不到值
        // alert(oDiv.style["width"])
        // chrome下显示未定义,  ie上面正常
        // alert(oDiv.currentStyle);
        // chrome上正常显示，火狐正常显示
        // alert(getComputedStyle(oDiv,false).width)
        if(oDiv.currentStyle){
            alert(oDiv.currentStyle.width)
        }
        else{
            alert(getComputedStyle(oDiv,false).width)
        }
    }
</script>

</head>
<body>
    <div id="div1">demo</div>
</body>
</html>

十五：数组

（一）数组的创建

 var aArr1 = [1,2,3];
 var aArr2 = new Array(1,2,3);       
 alert(typeof(aArr1));
 alert(typeof(aArr2));

（二）数组元素的增删改查

<script>
    window.onload = function(){
        var aArr1 = [1,2,3,4,5];
        // 增加，默认是末尾插入
        aArr1.push(6);
        alert(aArr1);
        // 往头部添加元素
         aArr1.unshift();
        // 删除，指定元素
        aArr1.pop(6);
        alert(aArr1);
        // 从头部删除
        aArr1.shift();
        alert(aArr1);
    }
</script>

数组的splice（参数一（必填：index），参数二（必填：指令编码（0,1,2）），参数三（选填：元素））

# TODO 例子

（三）数组的拼接

<script>
    window.onload = function(){
        var aArr1 = [1,2,3,4,5];
        var aArr2 = [6,7,8,9,10];
        // 数组的拼接
        var aArr3 = aArr1.concat(aArr2);
        alert(aArr3);

    }
</script>

（四）数组的 join 元素拼接：ajax拼接url

<script>
    window.onload = function(){
        var aArr1 = [1,2,3,4,5];
        var sDemo = aArr1.join("+");
        // 字符串
        alert(typeof(sDemo));
        // 1+2+3+4+5
        alert(sDemo);
    }
</script>

（五）数组的排序

<script>
    window.onload = function(){
        var aArr1 = [1,2,5,4,3];
        aArr1.sort(function(n1,n2){
            return n1 - n2
        })
        alert(aArr1);

    }
</script>

###### TODO