前端之javascript2

js组成和标签获取元素

javascript组成

1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
2、DOM 文档对象模型操作html和css的方法(比如通过id或者标签来获取元素并赋予颜色之类的样式)
3、BOM 浏览器对象模型操作浏览器的一些方法(比如控制浏览器弹出窗口或者控制台打印数据)

标签获取元素

获取元素的第二种方法
document.getElementsByTagName(''),获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的dom元素。

关于性能，如果在循环时，有一个固定的值每次都要去查询一次，应该将那个固定的值先在外面定义好；
标签获取元素示例-各行换色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>通过标签获取元素</title>

    <script type="text/javascript">

        window.onload = function () {

            // 通过标签名称获取li元素，生成一个选择集，赋值给aLi

            var aLi = document.getElementsByTagName('li');

            // 读取选择集内元素的个数

            //alert(aLi.length);  // 弹出13

            var iLen = aLi.length;

            //给一个li设置背景色

            //aLi[0].style.backgroundColor = 'gold';

            // 不能给选择集设置样式属性

            //aLi.style.backgroundColor = 'gold';

            /*

            同时给所有的li加背景色

            for(var i=0;i<iLen;i++)

            {

                aLi[i].style.backgroundColor = 'gold';

            }

            */

            var oUl = document.getElementById('list1');

            var aLi2 = oUl.getElementsByTagName('li');

            var iLen2 = aLi2.length;

            for (var i = 0; i < iLen2; i++) {

                if (i % 2 == 0) {

                    aLi2[i].style.backgroundColor = 'gold';

                }

            }

        }

    </script>

</head>

<body>

<ul id="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 id="list2">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

</ul>

</body>

</html>

标签获取元素示例-各行换色

字符串操作方法

js操作数据的能力还是没有后端强，所以一般是由后端处理好数据后，再传给前端，但前端有时候也会需要自己处理数据；

字符串处理方法

1、字符串合并操作：“ + ”
2、parseInt() 将数字字符串转化为整数
3、parseFloat() 将数字字符串转化为小数
4、split() 把一个字符串分隔成字符串组成的数组
5、charAt() 获取字符串中的某一个字符
6、indexOf() 查找字符串是否含有某字符
7、substring() 截取字符串用法： substring(start,end)（不包括end）
8、toUpperCase() 字符串转大写
9、toLowerCase() 字符串转小写

字符串反转

var str = 'asdfj12jlsdkf098';

var str2 = str.split('').reverse().join('');

alert(str2);

字符串操作方法实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>字符串的处理方法</title>

    <script type="text/javascript">

        var iNum01 = 12;

        var sNum02 = '24';

        var sTr = 'abc';

        // 数字和字符串相加等同于字符串拼接

        //alert(iNum01+sNum02);  // 弹出 1224

        //alert(sNum02+sTr);  // 弹出 24abc

        var sTr02 = '12.35';

        //将字符串的小数转化成整数

        //alert(parseInt(sTr02));  // 弹出12

        //将字符串的小数转化成小数

        //alert(parseFloat(sTr02));

        var sTr03 = '2017-4-22';

        var aRr = sTr03.split("-");

        //alert(aRr); // 弹出['2017','4','22'];

        var aRr2 = sTr03.split("");

        //alert(aRr2); // 弹出['2','0','1','7','-','4','-','2','2']

        var sTr04 = '#div';

        var sTr05 = sTr04.charAt(0);

        // alert(sTr05); 弹出 #

        var sTr06 = 'abcdef microsoft asldjfl';

        var iNum03 = sTr06.indexOf('microsoft');

        var iNum04 = sTr06.indexOf('yahei');

        //alert(iNum03);  // 存在 弹出字符串对应的索引值 7

        //alert(iNum04);  // 不存在  弹出 -1

        var sTr07 = 'abcdef123456edfg';

        var sTr08 = sTr07.substring(6, 12);

        var sTr09 = sTr04.substring(1);

        //alert(sTr08);

        //alert(sTr09);

        var sTr10 = 'abcdef';

        var sTr11 = sTr10.toUpperCase();

        alert(sTr11);

        var sTr12 = '1234j3290850ljdlsjlfajdlkskdfj';

        var sTr13 = sTr12.split('').reverse().join('');

        alert(sTr13);

    </script>

</head>

<body>

</body>

</html>

字符串操作方法实例

定时器

定时器在javascript中的作用

1、制作动画
2、异步操作
3、函数缓冲与节流

定时器一般建议每30ms动作一次。

定时器类型及语法

/*

    定时器：

    setTimeout  只执行一次的定时器

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

    setInterval  反复执行的定时器

    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);

var time2 = setInterval(myalert,2000);

/*

clearTimeout(time1);

clearInterval(time2);

*/

function myalert(){

    alert('ok!');

}

定时器简单实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        function myalert(){

            alert('hello world!');

        }

        // 只执行一次的定时器,第一个参数是函数名，或者是匿名函数，第二个参数是时间，单位是毫秒，不写单位

        //var timer01 = setTimeout(myalert,2000);

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

        //clearTimeout(timer01);

        // 反复执行的定时器

        //var timer02 = setInterval(myalert,1000); 改成下面匿名函数的写法：

        var timer02 = setInterval(function(){

            alert('hello world!');

        },1000)

        //关闭反复执行的定时器

        //clearInterval(timer02);

    </script>

</head>

<body>

</body>

</html>

定时器简单实例

定时器盒子移动实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        window.onload = function(){

            var oDiv = document.getElementById('div1');

            var iLeft = 0;

            /*

            var timer = setInterval(moving,30);

            function moving(){

                iLeft += 3;

                oDiv.style.left = iLeft + 'px';

            }

            */

            var timer = setInterval(function(){

                iLeft += 3;

                oDiv.style.left = iLeft + 'px';

                if(iLeft>700)

                {

                    clearInterval(timer);

                }

            },30);

        }

    </script>

    <style type="text/css">

        .box{

            width:200px;

            height:200px;

            background-color:gold;

            position:absolute;

            left:0;

            top:100px;

        }

    </style>

</head>

<body>

    <div id="div1" class="box"></div>

</body>

</html>

定时器盒子移动实例

盒子往复运动动画示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        window.onload = function () {

            var oDiv = document.getElementById('div1');

            var iLeft = 0;

            var iSpeed = 3;

            /*

            var timer = setInterval(moving,30);

            function moving(){

                iLeft += 3;

                oDiv.style.left = iLeft + 'px';

            }

            */

            var timer = setInterval(function () {

                iLeft += iSpeed;

                oDiv.style.left = iLeft + 'px';

                if (iLeft > 700) {

                    iSpeed = -3;

                }

                if (iLeft < 0) {

                    iSpeed = 3;

                }

            }, 20);

        }

    </script>

    <style type="text/css">

        .box {

            width: 200px;

            height: 200px;

            background-color: gold;

            position: absolute;

            left: 0;

            top: 100px;

        }

    </style>

</head>

<body>

<div id="div1" class="box"></div>

</body>

</html>

盒子往复运动动画示例

无缝滚动示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>无缝滚动</title>

    <style type="text/css">

        * {

            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 type="text/javascript">

        window.onload = function () {

            var oDiv = document.getElementById('slide');

            var oBtn01 = document.getElementById('btn01');

            var oBtn02 = document.getElementById('btn02');

            //通过标签获取元素，获取的是选择集，加上下标才能获取到元素

            var oUl = oDiv.getElementsByTagName('ul')[0];

            var iLeft = 0;

            var iSpeed = -2;

            var iNowspeed = 0;

            //将ul里面的内容复制一份，整个ul里面就包含了10个li

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

            function moving() {

                iLeft += iSpeed;

                // 当ul向左滚动到第5个li时，瞬间将整个ul拉回到初始位置

                if (iLeft < -1000) {

                    iLeft = 0;

                }

                //当ul在起始位置往右滚动时候，瞬间将整个ul拉回到往左的第5个li的位置

                if (iLeft > 0) {

                    iLeft = -1000;

                }

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

            }

            var timer = setInterval(moving, 30);

            oBtn01.onclick = function () {

                iSpeed = -2;

            };

            oBtn02.onclick = function () {

                iSpeed = 2;

            };

            // 当鼠标移入的时候

            oDiv.onmouseover = function () {

                iNowspeed = iSpeed;

                iSpeed = 0;

            };

            // 当鼠标移出的时候

            oDiv.onmouseout = function () {

                iSpeed = iNowspeed;

            }

        }

    </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>

        <li><a href=""><img src="data:images/goods001.jpg" alt="商品图片"></a></li>

        <li><a href=""><img src="data:images/goods002.jpg" alt="商品图片"></a></li>

        <li><a href=""><img src="data:images/goods003.jpg" alt="商品图片"></a></li>

        <li><a href=""><img src="data:images/goods004.jpg" alt="商品图片"></a></li>

        <li><a href=""><img src="data:images/goods005.jpg" alt="商品图片"></a></li>

    </ul>

</div>

</body>

</html>

无缝滚动示例

无缝滚动原理：

将一个图片列表复制成两份，形成两个并列的图片，然后设置定时移动，当向左或向右移动超过一定距离时，再根据情况拉回到一定位置。具体可看代码。

其中包含鼠标移入事件onmouseover。

定时器制作时钟示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        window.onload = function () {

            var oDiv = document.getElementById('div1');

            function fnTimego() {

                var sNow = new Date();

                // 获取年份

                var iYear = sNow.getFullYear();

                // 获取月份，月份是从0到11，0表示一月，11表示十二月

                var iMonth = sNow.getMonth() + 1;

                var iDate = sNow.getDate();

                // 星期是从0到6,0表示星期天

                var iWeek = sNow.getDay();

                var iHour = sNow.getHours();

                var iMinute = sNow.getMinutes();

                var iSecond = sNow.getSeconds();

                var sTr = '当前时间是：' + iYear + '年' + iMonth + '月' + iDate + '日 ' + fnToweek(iWeek) + ' '

                    + fnTodou(iHour) + ':' + fnTodou(iMinute) + ':' + fnTodou(iSecond);

                oDiv.innerHTML = sTr;

            }

            // 刚开始调用一次，解决刚开始1秒钟空白的问题

            fnTimego();

            setInterval(fnTimego, 1000);

            function fnToweek(n) {

                if (n == 0) {

                    return '星期日';

                } else if (n == 1) {

                    return '星期一';

                } else if (n == 2) {

                    return '星期二';

                } else if (n == 3) {

                    return '星期三';

                } else if (n == 4) {

                    return '星期四';

                } else if (n == 5) {

                    return '星期五';

                } else {

                    return '星期六';

                }

            }

            function fnTodou(n) {

                if (n < 10) {

                    return '0' + n;

                } else {

                    return n;

                }

            }

        }

    </script>

    <style type="text/css">

        div {

            text-align: center;

            font-size: 30px;

            color: red;

        }

    </style>

</head>

<body>

<div id="div1"></div>

</body>

</html>

定时器制作时钟示例

特别注意，js中时间获取中的获取月份是按照0-11的顺序，所以月份应该加1：iMonth = sNow.getMonth() + 1;。

定时器制作节日活动倒计时示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        window.onload = function () {

            var oDiv = document.getElementById('div1');

            function fnTimeleft() {

                //实际开发中需要读取后台的时间，可以通过ajax来读取

                var sNow = new Date();

                // 未来时间：4月30日晚24点

                var sFuture = new Date(2017, 3, 30, 24, 0, 0);

                //计算还有多少秒

                var sLeft = parseInt((sFuture - sNow) / 1000);

                //计算还剩多少天

                var iDays = parseInt(sLeft / 86400);

                // 计算还剩多少小时

                var iHours = parseInt((sLeft % 86400) / 3600);

                // 计算还剩多少分

                var iMinutes = parseInt(((sLeft % 86400) % 3600) / 60);

                // 计算还剩多少秒

                var iSeconds = sLeft % 60;

                var sTr = '距离5月1日还剩：' + iDays + '天' + fnTodou(iHours) + '时' + fnTodou(iMinutes) + '分' + fnTodou(iSeconds) + '秒';

                oDiv.innerHTML = sTr;

            }

            fnTimeleft();

            setInterval(fnTimeleft, 1000);

            function fnTodou(n) {

                if (n < 10) {

                    return '0' + n;

                } else {

                    return n;

                }

            }

        }

    </script>

</head>

<style type="text/css">

    div {

        text-align: center;

        font-size: 30px;

        color: pink;

    }

</style>

<body>

<div id="div1"></div>

</body>

</html>

定时器制作倒计时示例

倒计时关闭弹框/丐版示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .menu {

            height: 80px;

            background-color: gold;

            position: fixed;

            width: 960px;

            top: 0px;

            left: 50%;

            margin-left: -480px;

        }

        p {

            text-align: center;

        }

        .popup {

            width: 500px;

            height: 300px;

            border: 1px solid #000;

            background-color: #fff;

            position: fixed;

            left: 50%;

            margin-left: -251px;

            top: 50%;

            margin-top: -151px;

            z-index: 9999;

        }

        .popup h2 {

            background-color: gold;

            margin: 10px;

            height: 40px;

        }

        .mask {

            position: fixed;

            width: 100%;

            height: 100%;

            background-color: #000;

            left: 0;

            top: 0;

            opacity: 0.5;

            z-index: 9998;

        }

        .pop_con {

            display: none;

        }

    </style>

</head>

<body>

<div class="menu">菜单文字</div>

<div class="pop_con" style="display: block">

    <div class="popup">

        <h2>弹框的标题</h2>

        <br>

        <br>

        <br>

        <p>还有5秒钟关闭弹框</p>

    </div>

    <div class="mask"></div>

</div>

<input type="button" name="" value="弹出弹框">

<p>网页文字</p>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

...

<p>网页文字</p>

</body>

</html>

倒计时关闭弹框/丐版示例

变量作用域

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

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

<script type="text/javascript">

    //全局变量

    var a = 12;

    function myalert()

    {

        //局部变量

        var b = 23;

        alert(a);

        alert(b);

    }

    myalert(); //弹出12和23

    alert(a);  //弹出12

    alert(b);  //出错

</script>

变量作用域示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        //函数外部定义的是全局变量，函数内部和外部都可以访问

        var iNum01 = 12;

        // 重复定义，后面的会覆盖前面的值

        //var iNum01 = 14;

        function myalert(){

            //var iNum01 = 24;

            // 函数内部定义的是局部变量，函数内部可以访问，外部不能访问

            var iNum02 = 36;

            alert(iNum01);

            iNum01 += 10;

        }

        function myalert02(){

            alert(iNum01);

        }

        myalert();  // 弹出 12

        myalert02();  // 弹出 22

        //alert(iNum02);  出错！

    </script>

</head>

<body>

</body>

</html>

变量作用域示例

封闭函数

封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。

注意封闭函数和匿名函数的相似。

封闭函数的作用：创建一个封闭的空间，在空间里面定义自己的函数或者参数，自己的参数不会影响外界的参数，外界也无法调用自己内部的参数；可以有效防止命名冲突。

在原系统上新加功能建议使用封闭函数。

一般定义的函数和执行函数：

function changecolor(){

    var oDiv = document.getElementById('div1');

    oDiv.style.color = 'red';

}

changecolor();

封闭函数：

(function(){

    var oDiv = document.getElementById('div1');

    oDiv.style.color = 'red';

})();

还可以在函数定义前加上“~”和“!”等符号来定义匿名函数

!function(){

    var oDiv = document.getElementById('div1');

    oDiv.style.color = 'red';

}()

封闭函数示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script type="text/javascript">

        /*

        function myalert(){

                alert('hello world!');

            }

        myalert();

        转换成封闭函数的写法：

        */

        /*(function(){

            alert('hello world!');

        })();*/

        //封闭函数的第二种写法：

        /*!function(){

            alert('hello world!');

        }();*/

        ~function () {

            alert('hello world!');

        }();

        var iNum01 = 12;

        function myalert02() {

            alert('hello world!');

        }

        // 在封闭函数前加一个“;” , 可以避免js压缩时候出错。

        (function () {

            var iNum01 = 24;

            function myalert02() {

                alert('hello hello!');

            }

            alert(iNum01);

            myalert02();

        })();

        alert(iNum01);

        myalert02();

    </script>

</head>

<body>

</body>

</html>

封闭函数示例

闭包

什么是闭包
函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回

function aaa(a){

      var b = 5;

      function bbb(){

           a++;

           b++;

         alert(a);

         alert(b);

      }

      return bbb;

  }

 var ccc = aaa(2);

 ccc();

 ccc();

改写成封闭函数的形式：

var ccc = (function(a){

  var b = 5;

  function bbb(){

       a++;

       b++;

     alert(a);

     alert(b);

  }

  return bbb;

})(2);

ccc();

ccc();

用处
1、将一个变量长期驻扎在内存当中，可用于循环中存索引值

<script type="text/javascript">

    window.onload = function(){

        var aLi = document.getElementsByTagName('li');

        for(var i=0;i<aLi.length;i++)

        {

            (function(i){

                aLi[i].onclick = function(){

                    alert(i);

                }

            })(i);

        }

    }

</script>

......

<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

    <li>444</li>

    <li>555</li>

</ul>

2、私有变量计数器，外部无法访问，避免全局变量的污染

<script type="text/javascript">

var count = (function(){

    var a = 0;

    function add(){

        a++;

        return a;

    }

    return add;

})()

count();

count();

var nowcount = count();

alert(nowcount);

</script>

内置对象

1、document

document.grtElementById

document.grtElementByTagName

document.referrer //获取上一个跳转页面的地址(需要服务器环境)

2、location

window.location.href //获取或者重定url地址

window.location.search //获取地址参数部分

window.location.hash //获取页面锚点或者叫哈希值

3、Math

Math.random 获取0-1的随机数

Math.floor 向下取整

Math.ceil 向上取整

location的属性1示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        window.onload = function () {

            // 存储上一个页面的地址：

            //var sUrl = document.referrer;

            var oBtn = document.getElementById('btn01');

            oBtn.onclick = function () {

                //window.location.href = sUrl;

                window.location.href = "http://www.baidu.com";

            }

        }

    </script>

</head>

<body>

<input type="button" name="" value="跳转" id="btn01">

</body>

</html>

location的属性1示例

location的属性2示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        window.onload = function () {

            var oBody = document.getElementById('body01');

            var sData = window.location.search;

            alert(sData);

            var sHash = window.location.hash;

            alert(sHash);

            if (sData != '') {

                var aRr = sData.split("=");

                var iNum = aRr[1];

                if (iNum == 1) {

                    oBody.style.backgroundColor = 'gold';

                } else if (iNum == 2) {

                    oBody.style.backgroundColor = 'green';

                } else {

                    oBody.style.backgroundColor = 'pink';

                }

            }

        }

    </script>

</head>

<body id="body01">

<h1>007页面</h1>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <a href="007window-location的属性02.html">链接到007页面</a><br><br>

    <a href="007window-location的属性02.html?aa=1">链接到金色背景007页面</a><br><br>

    <a href="007window-location的属性02.html?aa=2">链接到绿色背景007页面</a>

    <br><br>

    <a href="007window-location的属性02.html?aa=3">链接到粉色背景007页面</a>

    <br><br>

</body>

</html>

location的属性2示例

math对象示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        var iPi = Math.PI;

        var arr = [];

        for (var i = 0; i < 100; i++) {

            // Math.random 只能返回从0到1之间的随机数，不包括0，也不包括1

            var iNum = Math.random();

            arr.push(iNum);

        }

        //alert(arr);

        console.log(arr);

        //向下取整，去掉小数部分

        alert(Math.floor(5.6)); // 弹出5

        //向上取整，去掉小数部分，整体加1

        alert(Math.ceil(5.2))

        // 10 - 20 之间的随机数

        var iN01 = 10;

        var iN02 = 20;

        var arr2 = [];

        for (var i = 0; i < 40; i++) {

            // 生成从10到20的随机数

            var iNum02 = Math.floor((iN02 - iN01 + 1) * Math.random()) + iN01;

            arr2.push(iNum02);

        }

        console.log(arr2);

    </script>

</head>

<body>

</body>

</html>

math对象示例

面向对象

面向过程与面向对象编程

1、面向过程：所有的工作都是现写现用。

2、面向对象：是一种编程思想，许多功能事先已经编写好了，在使用时，只需要关注功能的运用，而不需要这个功能的具体实现过程。

javascript对象

将相关的变量和函数组合成一个整体，这个整体叫做对象，对象中的变量叫做属性，变量中的函数叫做方法。javascript中的对象类似字典。

创建对象的方法
1、单体

<script type="text/javascript">

var Tom = {

    name : 'tom',

    age : 18,

    showname : function(){

        alert('我的名字叫'+this.name);

    },

    showage : function(){

        alert('我今年'+this.age+'岁');

    }

}

</script>

2、工厂模式

<script type="text/javascript">

function Person(name,age,job){

    var o = new Object();

    o.name = name;

    o.age = age;

    o.job = job;

    o.showname = function(){

        alert('我的名字叫'+this.name);

    };

    o.showage = function(){

        alert('我今年'+this.age+'岁');

    };

    o.showjob = function(){

        alert('我的工作是'+this.job);

    };

    return o;

}

var tom = Person('tom',18,'程序员');

tom.showname();

</script>

2、构造函数

<script type="text/javascript">

    function Person(name,age,job){

        this.name = name;

        this.age = age;

        this.job = job;

        this.showname = function(){

            alert('我的名字叫'+this.name);

        };

        this.showage = function(){

            alert('我今年'+this.age+'岁');

        };

        this.showjob = function(){

            alert('我的工作是'+this.job);

        };

    }

    var tom = new Person('tom',18,'程序员');

    var jack = new Person('jack',19,'销售');

    alert(tom.showjob==jack.showjob);

</script>

3、原型模式

<script type="text/javascript">

    function Person(name,age,job){

        this.name = name;

        this.age = age;

        this.job = job;

    }

    Person.prototype.showname = function(){

        alert('我的名字叫'+this.name);

    };

    Person.prototype.showage = function(){

        alert('我今年'+this.age+'岁');

    };

    Person.prototype.showjob = function(){

        alert('我的工作是'+this.job);

    };

    var tom = new Person('tom',18,'程序员');

    var jack = new Person('jack',19,'销售');

    alert(tom.showjob==jack.showjob);

</script>

4、继承

<script type="text/javascript">

        function fclass(name,age){

            this.name = name;

            this.age = age;

        }

        fclass.prototype.showname = function(){

            alert(this.name);

        }

        fclass.prototype.showage = function(){

            alert(this.age);

        }

        function sclass(name,age,job)

        {

            fclass.call(this,name,age);

            this.job = job;

        }

        sclass.prototype = new fclass();

        sclass.prototype.showjob = function(){

            alert(this.job);

        }

        var tom = new sclass('tom',19,'全栈工程师');

        tom.showname();

        tom.showage();

        tom.showjob();

    </script>

调试程序的方法

1、alert

2、console.log

3、document.title

调试js方法示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        window.onload = function () {

            var oBody = document.getElementById('body01');

            var iNum01 = 12;

            // alert 会阻止程序的运行

            //alert(iNum01);

            console.log(iNum01);

            oBody.style.backgroundColor = 'gold';

            var iNum02 = 24;

            var iNum03 = 36;

            //alert(iNum02);

            console.log(iNum02);

            setInterval(function () {

                iNum03++;

                //console.log(iNum03);

                document.title = iNum03;

            }, 100)

        }

    </script>

</head>

<body id="body01">

</body>

</html>

调试js方法示例

类型转换

1、直接转换 parseInt() 与 parseFloat()

alert('12'+7); //弹出127

alert( parseInt('12') + 7 );  //弹出19

alert( parseInt(5.6));  // 弹出5

alert('5.6'+2.3);  // 弹出5.62.3

alert(parseFloat('5.6')+2.3);  // 弹出7.8999999999999995

alert(0.1+0.2); //弹出 0.3000000000000004

alert((0.1*100+0.2*100)/100); //弹出0.3

alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9

2、隐式转换 “==” 和 “-”

if('3'==3)

{

    alert('相等');

}

// 弹出'相等'

alert('10'-3);  // 弹出7

3、NaN 和 isNaN

alert( parseInt('123abc') ); // 弹出123

alert( parseInt('abc123') ); // 弹出NaN