前端开发（五）JavaScript

一、JavaScript简介

JavaScript是运行在浏览器端的脚本语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。

JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。

JS嵌入页面的方式：

1、行间事件（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

2、页面script标签嵌入

<script type="text/javascript">        
    alert('ok！');
</script>

3、外部引入

<script type="text/javascript" src="js/index.js"></script>

JS注释：

        //单行注释
        /*多行注释*/

二、变量

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。定义变量需要用关键字 'var'

 var iNum = 123;
 var sTr = 'asd';

 //同时定义多个变量可以用","隔开，公用一个‘var’关键字

 var iNum = 45,sTr='qwe',sCount='68';

5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

1种复合类型：
object

变量、函数、属性、函数参数命名规范

1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字

匈牙利命名风格：

对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck

三、获取元素与操作元素

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>

上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：

第一种方法：将javascript放到页面最下边

<div id="div1">这是一个元素</div>
    <script type="text/javascript">
        document.getElementById("div1").style.color = "red";
    </script>

第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素</title>
    <script type="text/javascript">
        window.onload = function(){
            document.getElementById("div1").style.color = "red";
        }
    </script>
</head>
<body>
    <div id="div1">这是一个元素</div>
</body>
</html>

用变量简化代码：

    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            oDiv.style.color = "red";
            oDiv.style.fontSize = "30px";
        }
    </script>

操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。

操作属性的方法
1、“.” 操作
2、“[ ]”操作

属性写法

1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

通过“.”操作属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作属性</title>
    <script type="text/javascript">
        window.onload = function(){
            oDiv = document.getElementById("div1");
            oA = document.getElementById("link");

            // 读属性
            var sId = oDiv.id;
            // 写属性
            oDiv.style.color = "red";
            oA.href = "http://www.baidu.com";
            oA.title = "这是百度的链接";
            
        }
    </script>
</head>
<body>
    <div id="div1">这是一个元素</div>
    <a href="#" id="link">这是一个链接</a>
</body>
</html>

通过“[ ]”操作属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性操作</title>
    <script type="text/javascript">
        window.onload = function(){
            var oInput1 = document.getElementById("input1");
            var oInput2 = document.getElementById("input2");
            var oDiv = document.getElementById("box");

            var sVal1 = oInput1.value;
            var sVal2 = oInput2.value;

            // 属性用变量来代替的话需要用[]操作
            // oDiv.style.sVal1 = sVal2;
            oDiv.style[sVal1] = sVal2;
        }
    </script>
</head>
<body>
    <input type="text" name="setattr" id="input1" value="fontSize">
    <input type="text" name="setnum" id="input2" value="30px">
    <div id="box">这是一个元素</div>
</body>
</html>

改变元素内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作内容</title>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            // 读内容
            var sStr = oDiv.innerHTML;
            alert(sStr);
            // 写内容
            oDiv.innerHTML = "一个元素";
        }
    </script>
</head>
<body>
    <div id="div1">112233</div>
</body>
</html>

四、函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
    <script type="text/javascript">
        function fnChange(){
            alert("hello!");
        }
    </script>
</head>
<body>
    <div id="div1" onclick="fnChange()">这是一个元素</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
    <script type="text/javascript">
        function fnChange(){
            var oDiv = document.getElementById("div1");
            oDiv.style.color = "red";
            oDiv.style.fontSize = "30px";
        }
    </script>
</head>
<body>
    <div id="div1">这是一个元素</div>
    <input type="button" value="改变div" onclick="fnChange()">
</body>
</html>

变量与函数预解析

JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段

在编译阶段会将function定义的函数提前，

并且将var定义的变量声明提前，将它赋值为undefined。

<script type="text/javascript">    
    fnAlert();       // 弹出 hello！
    alert(iNum);  // 弹出 undefined
    function fnAlert(){
        alert('hello!');
    }
    var iNum = 123;
</script>

提取行间事件

在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提取行间事件</title>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            // 这里函数调用不能写小括号，否则会直接执行
            oBtn.onclick = fnChange;
        
            function fnChange(){
                var oDiv = document.getElementById("div1");
                oDiv.style.color = "red";
                oDiv.style.fontSize = "30px";
            }
        }

        
    </script>
</head>
<body>
    <div id="div1">这是一个元素</div>
    <input type="button" value="点击" id="btn1" />
</body>
</html>

匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匿名函数</title>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            // 匿名函数
            oBtn.onclick = function(){
                var oDiv = document.getElementById("div1");
                oDiv.style.color = "red";
                oDiv.style.fontSize = "30px";
            };
        }
    </script>
</head>
<body>
    <div id="div1">这是一个元素</div>
    <input type="button" value="点击" id="btn1" />
</body>
</html>

案例：网页换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页换肤</title>
    <link rel="stylesheet" type="text/css" href="css/skin1.css" id="link1">
    <script type="text/javascript">
        
        window.onload = function(){
            var oBtn1 = document.getElementById("btn1");
            var oBtn2 = document.getElementById("btn2");
            // 获取link
            var oLink = document.getElementById("link1");

            oBtn1.onclick = function(){
                oLink.href = "css/skin1.css";
            }
            oBtn2.onclick = function(){
                oLink.href = "css/skin2.css";
            }
        }

    </script>
</head>
<body>
    <input type="button" value="皮肤1" id="btn1">
    <input type="button" value="皮肤2" id="btn2">
</body>
</html>

函数参数和返回值

函数中'return'关键字的作用：
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>参数和返回值</title>
    <script type="text/javascript">
        window.onload = function(){
            function fnChangeStyle(mystyle, val){
                var oDiv = document.getElementById("div1");
                oDiv.style[mystyle] = val;
            }
            fnChangeStyle("fontSize", "30px");
        }
    </script>
</head>
<body>
    <div id="div1">这是一个元素</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>参数和返回值</title>
    <script type="text/javascript">
        window.onload = function(){
            function fnAdd(a, b){
                var c = a + b;
                return c;
            }
            var res = fnAdd(1, 2);
            var oDiv = document.getElementById("div1");
            oDiv.innerHTML = res;
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

五、运算符

1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
    <script type="text/javascript">
        window.onload = function(){
            var oInput1 = document.getElementById("input1");
            var oInput2 = document.getElementById("input2");
            var oBtn = document.getElementById("btn");

            oBtn.onclick = function(){
                // parseInt()将字符串转成数字
                var res = parseInt(oInput1.value) + parseInt(oInput2.value);
                alert(res);
            }

        }
    </script>
</head>
<body>
    <input type="text" id="input1"> + 
    <input type="text" id="input2">
    <input type="button" value="=" id="btn">
</body>
</html>

== 将左右变量转为同类型再比，如2==“2”，结果为True

=== 先比较类型，类型不同即为不相等；

六、条件语句

    <script type="text/javascript">
        var iNum1 = 12;
        var iNum2 = 24;
        if(iNum1 > iNum2){
            alert("大于");
        }else if(iNum1 < iNum2){
            alert("小于");
        }else{
            alert("等于");
        }
    </script>

点击按钮切换元素显示隐藏效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件语句</title>
    <style type="text/css">
        .box{
            height: 300px;
            width: 200px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            var oDiv = document.getElementById("box1");
            oBtn.onclick = function(){
                // oDiv.style.display 读取的是标签里的属性值，如果没有写，这个值为空
                // 因此不能判断display==“block”，否则第一次点击无效
                if(oDiv.style.display == "none"){
                    oDiv.style.display = "block";
                }else{
                    oDiv.style.display = "none";
                }
            };
        }
    </script>
</head>
<body>
    <div id="box1" class="box"></div><br />
    <input type="button" value="切换" id="btn1">
</body>
</html>

switch语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据星期换背景</title>
    <script type="text/javascript">
        window.onload = function(){
            var iWeek = 4;
            var oBody = document.getElementById('body1')
            switch (iWeek){
                case 1:
                    oBody.style.backgroundColor = 'gold';
                    break;
                case 2:
                    oBody.style.backgroundColor = 'lightgreen';
                    break;
                case 3:
                    oBody.style.backgroundColor = 'lightblue';
                    break;
                case 4:
                    oBody.style.backgroundColor = 'pink';
                    break;
                case 5:
                    oBody.style.backgroundColor = 'yellowgreen';
                    break;
                default:
                    oBody.style.backgroundColor = 'white';
            }
        }
    </script>
</head>
<body id="body1">
    
</body>
</html>

七、数组

javascript数组里面的数据可以是不同类型的。

    <script type="text/javascript">
        
        // 通过类实例化创建数组，性能不高，一般不用
        var aList1 = new Array(1,2,3,4);
        // 通过直接量创建数组
        var aList2 = [1,2,3,4];

        //获取数组长度
        alert(aList1.length);
        //下标操作数据
        aList1[0] = 'a';

        //通过一个分隔符合并成字符串
        var sList = aList1.join('-');
        alert(sList);

        //从数组最后增加和删除成员
        aList2.push('b');
        alert(aList2);
        aList2.pop();

        //从数组前面增加和删除成员
        aList2.unshift('a');
        alert(aList2);
        aList2.shift();

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

        //返回元素第一次出现的索引值
        alert(aList1.indexOf(2));

        //在数组中增加或删除成员
        var aList3 = ['a','b','c','d'];
        //从第二个开始，删除一个，再放上ef
        aList3.splice(2,1,'e','f');

        //多维数组
        var aList4 = [[1,2,3],['a','b'],['c']];
        alert(aList4[1][0]);

    </script>

八、循环

    <script type="text/javascript">
        for(var i=0;i<9;i++){
            alert("ok"+i);
        }
    </script>

    <script type="text/javascript">
        var aList = ['a','b','m','n','q'];
        for(var i=0;i<aList.length;i++){
            alert(aList[i]);
        }
    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环在网页中加入数据</title>
    <style type="text/css">
        .list{
            list-style: none;
            margin: 50px auto 0;
            padding: 0;
            width: 300px;
            height: 300px;
        }
        .list li{
            height: 60px;
            border-bottom: 1px dotted #000;
            line-height: 60px;
            font-size: 16px;
            background-color: pink;
        }
    </style>
    <script type="text/javascript">
        
        window.onload = function(){
            var aList = ['罗小黑战记','攀登者','哪吒','决胜时刻','我和我的祖国'];
            var iLen = aList.length;
            var sTr = "";
            for(var i=0;i<iLen;i++){
                sTr += "<li>"+aList[i]+"</li>";
            }
            var oList = document.getElementById("list");
            oList.innerHTML = sTr;
        }

    </script>
</head>
<body>
    <ul class="list" id="list"></ul>
</body>
</html>

数组去重

    <script type="text/javascript">
        
        var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
        var aListNew = [];
        var iLen = aList.length;
        for(var i=0;i<iLen;i++){
            //在数组中第一次出现的索引值==当前循环到的位置
            if(aList.indexOf(aList[i]) == i){
                aListNew.push(aList[i]);
            }
        }
        alert(aListNew);

    </script>

九、获取元素方法二

可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签。

获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环操作列表元素</title>
    <script type="text/javascript">
        window.onload = function(){
            var aLi = document.getElementsByTagName('li');

            iLen = aLi.length;
            // aLi.style.backgroundColor = "gold"; 不能给选择集设置样式属性
            for(var i=0;i<iLen;i++){
                aLi[i].style.backgroundColor = "gold";
            }
        }
    </script>
</head>
<body>
    <ul class="list1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <ul class="list2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

只想选第一个ul中的li：

            var oUl = document.getElementById("list1");
            var aLi1 = oUl.getElementsByTagName("li");

            alert(aLi1.length);

十、javascrip组成

1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
2、DOM 文档对象模型操作html和css的方法
3、BOM 浏览器对象模型操作浏览器的一些方法

十一、字符串处理方法

        var iNum1 = "12";
        var sTr1 = "abc";
        var sNum2 = "34";
        //字符串合并操作 +
        alert(iNum1+sNum2);
        //数字字符串转化为整数
        alert(parseInt(sNum2));
        //数字字符串转化为小数
        var sNum3 = "44.45";
        alert(parseFloat(sNum3));
        //把字符串分割成数组
        var sTr2 = "1-2-3-4-5";
        var aNum1 = sTr2.split("-");
        alert(aNum1);
        //获取字符串中的某一个字符
        alert(sTr2.charAt(1));
        //获取某字符位置,不存在返回-1
        alert(sTr2.indexOf("3"));
        //切片
        var sTr3 = "kabfibjem";
        alert(sTr3.substring(2,4));
        //字符串转大小写
        var sTr4 = "china";
        alert(sTr4.toUpperCase());
        var sTr5 = "AFK";
        alert(sTr5.toLowerCase());
        //反转
        var sTr6 = "1234567";
        var sTr7 = sTr6.split('').reverse().join('');
        alert(sTr7);

十二、定时器

定时器在javascript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流

定时器类型及语法

        function myAlert(){
            alert("hello");
        }

        //只执行一次的定时器,第一个参数是函数名称或匿名函数,第二个参数单位是ms
        var time1 = setTimeout(myAlert, 2000);
        //关闭定时器
        clearTimeout(time1);

        //反复执行的定时器
        var time2 = setInterval(myAlert, 2000);
        //关闭定时器
        clearInterval(time2);

        //可以传匿名函数
        var time3 = setInterval(function(){
            alert("world");
        }, 2000)

制作移动动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器动画</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            position: absolute;
            left: 0;
            top: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            var iLeft = 0;
            var timer = setInterval(function(){
                iLeft += 2;
                oDiv.style.left = iLeft +"px";
                if(iLeft == 700){
                    clearInterval(timer);
                }
            },30)
        }
    </script>
</head>
<body>
    <div class="box" id="div1"></div>
</body>
</html>