03.JavaScript语法中

来源：互联网发布：滑板淘宝店编辑：程序博客网时间：2024/05/17 22:22

一.字符串处理方法

1、字符串合并操作：“ + ”

    var name = 'Tom';    var age = 18;    //弹出"我的名字叫做Tom，我的年龄是18岁"    alert('我的名字叫做'+ name +',我的年龄是'+age+'岁；'  );

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

    var a = 12;    var b = '23';    alert(parseInt(a)+parseInt(b));

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

    var a = 5.6;    var b = 4.2;    var c = 0.1;    var d = 0.2;    alert(parseFloat(a)+parseFloat(b));    // alert(parseFloat(c)+parseFloat(d));弹出0.30000000004    // 相加等于0.30000000004的问题，解决方法是先乘以100，再除以100    alert((parseFloat(c)*100+parseFloat(d)*100)/100);

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

    var sTr = '2016-12-5';    var aRr = sTr.split('-');    // alert(typeof(aRr));    for (var i=0;i<aRr.length;i++) {        alert(aRr[i]);//依次弹出2016，12，5    }

5、charAt() 获取字符串中的某一个字符

    var sTr1 = '#div1';    var sTr2 = sTr1.charAt(0);    alert(sTr2);//弹出#

6、indexOf() 查找字符串是否含有某字符

    var sTr = 'Microsoft yahei';    var num1 = sTr.indexOf('yahei');    alert(num); //找到就弹出字符串出现的位置：10，从0开始数    var num2 = sTr.indexOf('xihei');    alert(num2);  //没有找到就弹出 -1

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

8、toUpperCase() 字符串转大写

9、toLowerCase() 字符串转小写

    var sTr1="abcdefghijklmn"    var sTr2 = sTr1.substring(10); //从第10个截到结尾,从0开始数    alert(sTr2);//弹出klmn    alert(sTr2.toUpperCase());//弹出KLMN

10、字符串反转

    var str = '12345';    var str2 = str.split('').reverse().join('-');    alert(str2)//弹出1-2-3-4-5

二、调试程序的方法

1、alert
之前经常使用的，弹出对话框的功能
2、console.log

<script type="text/javascript">    console.log("123");</script>

这里写图片描述

二、定时器

定时器在javascript中的作用

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

定时器类型及语法

setTimeout  只执行一次的定时器 clearTimeout 关闭只执行一次的定时器setInterval  反复执行的定时器clearInterval 关闭反复执行的定时器

一个简单的例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script type="text/javascript">        var time1 = setTimeout(myalert,2000);//每隔2秒弹出一个对话框        var time2 = setInterval(myalert,2000);        /*        clearTimeout(time1);        clearInterval(time2);        */        function myalert(){            alert('ok!');    }    </script></body></html>

定时器制作时钟

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body><div id="div1"></div><script type="text/javascript">    window.onload = function(){            var oDiv = document.getElementById('div1');        function timego(){            var now = new Date();            var year = now.getFullYear();            var month = now.getMonth()+1;            var date = now.getDate();            var week = now.getDay();            var hour = now.getHours();            var minute = now.getMinutes();            var second = now.getSeconds();            var str = '当前时间是：'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second);            oDiv.innerHTML = str;        }        timego();        setInterval(timego,1000);    }    //转换日期    function toweek(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 '星期六';        }    }    //如果是个位数，则补上一个0    function todou(n){        if(n<10)        {            return '0'+n;        }        else        {            return n;        }    }</script></body></html>

这里写图片描述
定时器制作倒计时

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body > <h2>剩余时间:</h2> <div id="timer"></div> <script language="javascript" type="text/javascript"> window.onload=function(){function leftTimer(){     var leftTime = (new Date(2017,8-1,28,16,20,00)) - (new Date()); //计算剩余的毫秒数     var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数     var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时     var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟     var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数     days = checkTime(days);     hours = checkTime(hours);     minutes = checkTime(minutes);     seconds = checkTime(seconds);     document.getElementById("timer").innerHTML ='距离2017年8月28日晚16点还剩下'+days+'天'+hours+'时'+minutes+'分'+seconds+'秒';; } function checkTime(i){ //将0-9的数字前面加上0，例1变为01     if(i<10)     {         i = "0" + i;     }     return i; }leftTimer();setInterval(leftTimer,1000); }</script></body></html>

这里写图片描述

三、类型转换

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

alert('12'+7); //弹出127alert( parseInt('12') + 7 );  //弹出19 alert( parseInt(5.6));  // 弹出5alert('5.6'+2.3);  // 弹出5.62.3alert(parseFloat('5.6')+2.3);  // 弹出7.8999999999999995alert(0.1+0.2); //弹出 0.3000000000000004alert((0.1*100+0.2*100)/100); //弹出0.3alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9

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

if('3'==3){    alert('相等');}

3、NaN 和 isNaN

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

四、变量作用域

变量作用域指的是变量的作用范围，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>

这里写图片描述

五、封闭函数

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

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

function changecolor(){    var oDiv = document.getElementById('div1');    oDiv.style.color = 'red';}changecolor();

函数用变量方式定义：

var myalert = function(){        alert('hello!');    }myalert();

封闭函数：把匿名函数用（）包起来，再在后面加（）就成了封闭函数

// 封闭函数定义：(function(){  .... })()(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></head><body><div id="div1">1232</div><script type="text/javascript">    (function(){        var oDiv = document.getElementById('div1');        oDiv.style.color = 'red';    })();//一开始就执行了</script></body></html>

这里写图片描述

六、闭包

什么是闭包

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

function aaa(a){               var b = 5;               function bbb(){            a++;            b++;            alert(a);            alert(b);         }         return bbb;     }var ccc = aaa(2);ccc();ccc();

封闭函数的形式：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body><script type="text/javascript">    function aaa(a){            var b = 5;            function bbb(){           a++;           b++;         alert(a);         alert(b);      }      return bbb;    } var ccc = aaa(2); ccc();//弹出3,6 ccc();//弹出4,7    </script></body></html>

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>闭包的用途-存循环的索引值</title>    <script type="text/javascript">        window.onload = function(){            var aLi = document.getElementsByTagName('li');            // for (var i=0;i<aLi.length;i++) {            //  aLi[i].onclick=function(){            //      alert(i);//每一个li的事件绑定了，但i的值却不会保存的，最后为8，点击每一个li都是弹出8            //  }            // }            for(var i=0;i<aLi.length;i++)            {                (function(i){                    aLi[i].onclick = function(){                        alert(i);//每一个li的绑定点击的i的值都保存了下来                                 }                })(i);            }            //上面是简化的方式              // function a(i) {               //       function b(){               //       alert(i);               //   }               //       return b;               //   }               //   aLi[i].onclick=a(i);        }    </script>    <style type="text/css">        li{            height:30px;            background-color: gold;            margin-bottom:10px;        }    </style></head><body>    <ul>        <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></body></html>

第一种情况
这里写图片描述
第二种情况

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>闭包的用途-私有变量计数器</title>    <script type="text/javascript">        //匿名函数已经执行了一次，a变量存储了起来，count变量是bb函数的定义。        var count = (function(){                    var a = 0;                    function bb()                    {                        a++;                        return a;                    }                    return bb;        })();        alert(count());//弹出1        alert(count());//弹出2        var c = count();        alert(c);//弹出3    </script></head><body></body></html>

阅读全文

0 0

03.JavaScript语法中

一.字符串处理方法

1、字符串合并操作：“ + ”

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

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

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

5、charAt() 获取字符串中的某一个字符

6、indexOf() 查找字符串是否含有某字符

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

8、toUpperCase() 字符串转大写

9、toLowerCase() 字符串转小写

10、字符串反转

二、调试程序的方法

二、定时器

三、类型转换

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

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

3、NaN 和 isNaN

四、变量作用域

五、封闭函数

六、闭包

什么是闭包

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