前端修炼——JavaScript高级！

今日内容概述：
    函数的参数和返回值,
    数组,
    循环,
    字符串处理方法,
    定时器,
    常见的事件,
    变量作用域.

函数的参数和返回值

return 返回值

函数如果没有返回值，得到的值就是undefined

<!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 fnAdd(iNum01, iNum02) {
            var iRs = iNum01 + iNum02;
            // alert(iRs)

            // return 在执行完返回数字后，就结束了函数的运行，它之后的代码不会执行
            // 只写一个 return，作用是结束函数的运行，但是不返回任何值。
            return iRs;
            

        }

        var iRs01 = fnAdd(10, 5);
        // 函数如果没有返回值，得到的值就是undefined
        // alert(iRs01);

        window.onload = function(){
            var oDiv = document.getElementById('div1')
            var oBtn = document.getElementById('btn')

            function fnChange(sColor, sSize){
                oDiv.style.color = sColor;
                oDiv.style.fontSize = sSize;

            }

            // fnChange('red', '30px')
            
            oBtn.onclick = function(){
                fnChange('blue', '40px')

            };

        }
   
    </script>

</head>
<body>  
    <input type="button" id="btn" value="改变样式">
    <div id="div1">这个一个div</div>

</body>
</html>

数组

相当于 python 的列表

创建数组

//对象的实例创建
var aList = new Array(1,2,3);

//直接量创建
var aList2 = [1,2,3,'asd'];

操作数组中数据的方法

length() : 获取数组的长度

aList[0] : 用下标操作数组的某个数据

join(’-’) : 将数组通过一个分隔符合并成字符串

push() : 从数组最后增加成员

pop() : 从数组后删除成员.reverse() : 将数组反转

indexOf() : 返回数字中元素第一次出现的索引值

splice() : 在数组中增加或删除成员第一个参数是指定开始的索引，第二个参数是删除几个元素，后面的参数是进行增加的参数

二维数组

var aList = [[1,2,3],[‘a’,‘b’,‘c’]];

<!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>
        // 创建数组的第一种方法：面向对象的方式
        var aList01 = new Array(1,2,3);

        // 创建数组的第二种方法：直接量的方式
        var aList02 = ['a', 'b', 'c', 'd']
    
        // 获取数组成员的个数
        var iLen = aList02.length;
        // alert(iLen);
    
        // 操作数组的某个成员
        // alert(aList02[2]);

        // 往数组后面增加成员
        aList02.push('e');
        // alert(aList02);

        // 从数组后面删除成员
        aList02.pop();
        // alert(aList02);

        // 将数组反转
        aList02.reverse();
        // alert(aList02);

        // 获取某个成员在数组中第一次出现的索引值
        var aList03 = ['a', 'b', 'c', 'd', 'c', 'd']
        var iPos = aList03.indexOf('c')
        var iPos2 = aList03.indexOf('e')
        // alert(iPos);
        // alert(iPos2);  // 如果成员不存在，就返回 -1

        // 同时在数组中删除或者增加成员
        aList03.splice(4,1);
        // alert(aList03); // a,b,c,d,d

        aList03.splice(3,2,'e','f','g');
        // alert(aList03); // a,b,c,e,f,g

        // 将数组转换为字符串
        var sTr = aList03.join('-');
        alert(sTr);   
    </script>

</head>
<body>
    
</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>
    <script>
        var aList = ['a','b','c','d','e','f','b','d','a','e','a'];

        var aList2 = [];

        for(var i=0;i<aList.length;i++){
            // console.log(aList[i])
            
            if(aList.indexOf(aList[i])==i){
                aList2.push(aList[i]);
                
            }
            
        }

        console.log(aList2);   
    
    </script>

</head>
<body>
    
</body>
</html>

循环

for 循环

for(var i=0;i<len;i++)
{
    ......
}

while 循环

i = 0;
while(i<len){
    ....
    i++;
}

<!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>
        var aList = ['a','b','c','d','e'];
        var iLen = aList.length;
        
        // i++ 相对于 i+=1 也相对于 i = i + 1
        for(var i=0;i<iLen;i++){
                alert( aList[i] );
        }
       
    </script>

</head>
<body>
    
</body>
</html>

字符串处理方法

“+”: 字符串合并操作, 数值相加，字符相连

parseInt() : 将数字字符串转化为整数

parseFloat(): 将数字字符串转化为小数

split()：把一个字符串分隔成字符串组成的数组

indexOf(): 查看字符串是否包含某字符

substring()：截取字符串用法： substring(start,end)（不包括end）

str.split(’’).reverse().join(’’); : 字符串反转

先将字符串转化为数组，对数组进行反转，再将数组转化为字符串，实现反转

<!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>
        var iNum01 = 12;
        var sNum01 = '12';
        var sNum02 = '12.66';

        // "+" 符号两边如果都是数字，就做加法运算，如果有一边是字符串，就做字符串拼接
        // alert(iNum01+10);  22
        // alert(sNum01+10);   '1210'
    
        // parseInt 可以将数字的字符串转化为整数，默认去掉小数位
        // alert( parseInt(sNum01)+10 );
        // alert( parseInt(sNum02)+10 );
    
        // parseFloat 可以将数字字符串转化为小数
        // alert( parseFloat(sNum02)+10 );

        // 将字符串分割成数组
        var sTr = '2018-9-15';
        // alert( sTr.split('-') );
        // alert( sTr.split('') );

        // 获取某小段字符串在大段字符串里面的索引值
        var sTr2 = 'abcdefgh123456'
        // alert( sTr2.indexOf('e') );
        // alert( sTr2.indexOf('i') );

        // 截取字符串
        var sTr3 = sTr2.substring(3,6)
        var sTr4 = sTr2.substring(2);
        alert(sTr3);
        alert(sTr4);

    </script>


</head>
<body>
    
</body>
</html>

定时器

超时定时器

setTimeout 只执行一次的定时器

clearTimeout 关闭只执行一次的定时器

间歇定时器

setInterval 反复执行的定时器

clearInteval 关闭反复执行的定时器

<!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 fnMyalert(){
            alert('起床了');


        }
        
        // fnMyalert();

        // 创建只执行一个的定时器
        // 第一个参数是函数名称，第二个参数是间隔时间，单位是毫秒，不用写单位
        var oTimer = setTimeout(fnMyalert, 2000);
    
        // 关闭执行一个的定时器
        clearTimeout(oTimer);

        //创建反复执行的定时器
        var oTime02 = setInterval(fnMyalert,2000);

        // 关闭反复执行的定时器
        clearInterval(oTime02);

    
    </script>


</head>
<body>
    
</body>
</html>

常见的事件

onclick：点击事件

window.onload: 页面加载完毕事件

onmouseover: 鼠标划过

onmouseout: 鼠标移出

document.getElementsByTagName(“li”) 取得整个页面同类型的标签

<!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>
    <style>
        body,ul {
            margin: 0;
            padding: 0;
        }
    
        .list_con {
            width: 1000px;
            height: 200px;
            border: 1px solid #000;
            margin: 10px auto  0;
            background-color: #f0f0f0;
            position: relative;
            overflow: hidden;

        }
    
        .list_con ul {
            list-style: none;
            width: 2000px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .list_con li{
            width: 180px;
            height: 180px;
            float: left;
            margin: 10px;

        }

        .btns_con {
            width: 1000px;
            height: 30px;
            margin: 50px auto 0;
            position: relative;

        }

        .left,.right {
            width: 30px;
            height: 30px;
            background-color: gold;
            position: absolute;
            left: -40px;
            top: 124px;
            font-size: 30px;
            line-height: 30px;
            color: #000;
            font-family: "Arial";
            text-align: center;
            cursor: pointer;
            border-radius: 15px;
            opacity: 0.5;
        }

        .right {
            left: 1010px;
            top: 124px;

        }
    
    </style>

    <script>
        window.onload = function(){
            var oLeft = document.getElementById('btn01');
            var oRight = document.getElementById('btn02');
            var oUl = document.getElementById('list');
            var oSlide = document.getElementById('slide');

            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;

            var iLeft = 0;
            var iSpeed = -3;

            var oT = setInterval(fnMove,30);

            function fnMove(){

                iLeft += iSpeed;
                oUl.style.left = iLeft + 'px';

                if(iLeft<-1000){
                    iLeft = 0;
                }

                if(iLeft>0){
                    iLeft = -1000;
                }
                
            }

            oRight.onclick = function(){
                iSpeed = 3;

            }

            oLeft.onclick = function(){
                iSpeed = -3;
            }

            oSlide.onmouseover = function(){
                clearInterval(oT);

            }

            oSlide.onmouseout = function(){
                oT = setInterval(fnMove,30);
            }

        }
       
    </script>

</head>
<body>
    <div class="btns_con">
        <div class="left" id="btn01">&lt;</div>
        <div class="right" id="btn02">&gt;</div>
    </div>

    <div class="list_con" id="slide">
        <ul id="list">
            <li><a href="#"><img src="images/goods001.jpg" alt="商品图片"></a></li>
            <li><a href="#"><img src="images/goods002.jpg" alt="商品图片"></a></li>
            <li><a href="#"><img src="images/goods003.jpg" alt="商品图片"></a></li>
            <li><a href="#"><img src="images/goods004.jpg" alt="商品图片"></a></li>
            <li><a href="#"><img src="images/goods005.jpg" alt="商品图片"></a></li>
        </ul>
    </div>
</body>
</html>

变量作用域

变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。

全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。

<script type="text/javascript">
    // 定义全局变量
    var a = 12;
    function myalert()
    {
        // 定义局部变量
        var b = 23;
        alert(a);
        // 修改全局变量
        a++;
        alert(b);
    }
    myalert(); // 弹出12和23
    alert(a);  // 弹出13    
    alert(b);  // 出错
</script>

前端修炼——JavaScript高级！

函数的参数和返回值

数组

创建数组

操作数组中数据的方法

二维数组

循环

字符串处理方法

定时器

超时定时器

间歇定时器

常见的事件

变量作用域

猜你喜欢