当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 前端之javascript2

前端之javascript2

2019年06月09日  | 移动技术网IT编程  | 我要评论

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、函数缓冲与节流

定时器类型及语法

/*
    定时器：
    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="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>

定时器制作时钟示例

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

定时器制作倒计时示例

<!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的属性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>

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>

 

面向对象

面向过程与面向对象编程

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>

 

 

类型转换

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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网