亲宝软件园·资讯

展开

avaScript语法规则

酷尔。 人气:0

一、运算符

二、分支语句

 js中的条件语句 :

  if分支:

     if
     if...else...
     if...else if..else...

  switch分支:   

     switch()
     {
         case 1:
           {}
           break;
         case 2:
           {}
           break;
         default:{}//默认情况
     }

三、循环语句

<!--
     break的另一种用法
     label:
       语句块
       ...
       break labelname;
       跳出指定的标签块
-->

四、异常的捕获与处理

捕捉异常
try{

}
捕捉到异常后执行的语句
catch(err){

}
无论是否会有异常,最后执行的语句
finally{

}

五、js中的this关键字

面向对象语言中 this 表示当前对象的一个引用。   但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。在方法中,this 表示该方法所属的对象。 如果单独使用,this 表示全局对象。

apply 和 call 允许切换函数执行的上下文环境(context),即 this 绑定的对象,可以将 this 引用到任何对象。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <p id="demo1"></p>
    <script>
        var p1={
            firname:"阿萨德",
            age:"28",
            f:function() {
                return this.firname+" "+this.age;
            }
        }
        var p2={
            firname:"张三",
            age:"20"
        }
        x=p1.f.call(p2)
        xx=p1.f.call(p1)
        document.getElementById("demo").innerHTML=x
        document.getElementById("demo1").innerHTML=xx
    </script>
</body>
</html>

六、let与const定义变量使用规则

 const定义常量与使用let 定义的变量相似:

两者还有以下两点区别:

    let声明的变量:

 在不同的{}内可以使用let定义不同的变量,var不行,而且let定义的变量不能使用var再次定义,var定义的变量也不能使用let再次定义, const与var、const与let同样,使用var关键字声明的全局作用域变量属于window对象。

  myarray=["1","2","3"]
        myarray[0]="100"//正确
        myarray=["2","3"]//错误

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
        let x=10;
        var x1=10;
        // 用const修饰的变量被修改后会报错
        const x2=10
        x=11;
        x1=11;
        // x2=11;
        document.getElementById("demo").innerHTML=x;
        document.getElementById("demo1").innerHTML=x1;
        document.getElementById("demo2").innerHTML=x2;
    </script>
</body>
</html>

七、js中的void链接

javascript:void(0)与#+id的本质区别

语法格式如下:

        void func()
        javascript:void func()

或者:

        void(func())
        javascript:void(func())

如果你要定义一个死链接请使用 javascript:void(0) 。可以使用javascript:void()执行想要的函数,弹窗,等等

语法规则:

  <a href="javascript:void(0);" rel="external nofollow" >点我</a>
  <a href="#demo" rel="external nofollow" >回顶部</a>

八、异步编程setTimeout

    异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念。在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。

简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。

回调函数就是一个函数,它是在我们启动一个异步任务的时候就告诉它:等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了,他自己会善始善终。启用回调函数  setTimeout("函数名",间隔时间(毫秒))可以将函数定义到setTimeout函数内

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>回调函数等待 3 秒后执行。</p>
    <p id="demo"></p>
    <p id="demo1"></p>
    <p id="demo3"></p>
    <p id="demo4"></p>
<script>
    // 第一种方式
    function print() {
        document.getElementById("demo").innerHTML="666";
    }
    //这里是定时三秒
    setTimeout(print, 3000);
    // 第二种方式
    setTimeout(function () {
    document.getElementById("demo1").innerHTML="666";
    }, 3000);
    // 测试
    // 主线程先打印出来,子线程继续接上
    setTimeout(function () {
    document.getElementById("demo3").innerHTML="-1!";
    }, 3000);
    document.getElementById("demo4").innerHTML="-2!";
    console.log("2");
</script>
</body>
</html>

九、函数闭包

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <script>
        var add = (function () {
            var count = 0;
            return function(){return count+=1;}
        })();
        function f(){
            document.getElementById("demo").innerHTML=add();
        }
    </script>
    <div id="demo"></div>
    <button type="button" onclick="f()">点击加一</button>
</body>
</html>

总结:

这些都只是js的一些入门语法,想要学好还需细细的斟酌,

加载全部内容

相关教程
猜你喜欢
用户评论