0


JavaScript基本的的语法规则

文章目录


前言

大家能够学习到这里想必也是编程界的老鸟了,讲语法主要讲一下与其他语言的区别。


一、运算符

<!-- 
    js中的+-*/运算与c语言较为相似,简写方式也类似
    ++、--、+=、%=等运算规则也相同
    在js中===代表绝对等于(值与类型都相同才算相同)
    !==(不绝对等于)值和类型有一个不相同或者都不相同为真
 -->
<!-- 
    js中还支持三目运算符
    a>b?'a大于b':'b大于a'
-->

二、分支语句

 <!-- js中的条件语句 -->
 <!-- 
  if分支:
     if
     if...else...
     if...else if..else...
  switch分支:   
     switch()
     {
         case 1:
           {}
           break;
         case 2:
           {}
           break;
         default:{}//默认情况
     }
  -->

三、循环语句

<!-- 
      for(初始条件;终止条件;循环变量的变化)
      for/in循环遍历对象的属性
      while
      do/while
      break
      continue
      与c语言非常类似
-->
<!--
     break的另一种用法
     label:
       语句块
       ...
       break labelname;
       跳出指定的标签块
-->

四、异常的捕获与处理

捕捉异常
try{

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

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

}

五、js中的this关键字

<!-- 
   面向对象语言中 this 表示当前对象的一个引用。
   但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。
       在方法中,this 表示该方法所属的对象。
       如果单独使用,this 表示全局对象。
       在函数中,this 表示全局对象。
       在函数中,在严格模式下,this 是未定义的(undefined)。
       在事件中,this 表示接收事件的元素。
       类似 call() 和 apply() 方法可以将 this 引用到任何对象。

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

代码如下:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><pid="demo"></p><pid="demo1"></p><script>var p1={
            firname:"阿萨德",
            age:"28",f:function(){returnthis.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 定义的变量相似:
    二者都是块级作用域
    都不能和它所在作用域内的其他变量或函数拥有相同的名称
    两者还有以下两点区别:
    const声明的常量必须初始化,而let声明的变量不用
    const 定义常量的值不能通过再赋值修改,也不能再次声明。
    而 let 定义的变量值可以修改。
    
    let声明的变量
        在不同的{}内可以使用let定义不同的变量,var不行
        而且let定义的变量不能使用var再次定义,var定义的变量也不能使用let再次定义
        const与var、const与let同样
        使用var关键字声明的全局作用域变量属于window对象。
        使用let关键字声明的全局作用域变量不属于window对象。
        使用var关键字声明的变量在任何地方都可以修改。
    const可以一次定义多个常量值,并且每个常量值的名字不相同
        const指向的对象不可以改变,但是对象指向的东西可以改变
        myarray=["1","2","3"]
        myarray[0]="100"//正确
        myarray=["2","3"]//错误
        const声明的常量可以在不同块作用级重新声明和赋值
        可以使用Object.freeze()方法来 冻结变量 (指向与内容都不可变)
    const与let都是先声明后使用

 -->

代码如下:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><pid="demo"></p><pid="demo1"></p><pid="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的本质区别
    前者不会改变网页的url,而后者会将url定位到#+id
-->
<!-- 
    语法格式如下:
        void func()
        javascript:void func()
        或者
        void(func())
        javascript:void(func())

    javascript:void(0) 中最关键的是 void 关键字, 
    void 是 JavaScript 中非常重要的关键字,
    该操作符指定要计算一个表达式但是不返回值。
    href="#"与href="javascript:void(0)"的区别
    # 包含了一个位置信息,默认的锚是#top 也就是网页的上端。
    而javascript:void(0), 仅仅表示一个死链接。
    在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id。
    如果你要定义一个死链接请使用 javascript:void(0) 。
    可以使用javascript:void()执行想要的函数,弹窗,等等
 -->

语法规则:

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

八、异步编程setTimeout

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

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

代码如下:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p>回调函数等待 3 秒后执行。</p><pid="demo"></p><pid="demo1"></p><pid="demo3"></p><pid="demo4"></p><script>// 第一种方式functionprint(){
        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>

九、函数闭包

<!-- 
   闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,
   保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。
 -->

代码如下:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>var add =(function(){var count =0;returnfunction(){return count+=1;}})();functionf(){
            document.getElementById("demo").innerHTML=add();}</script><divid="demo"></div><buttontype="button"onclick="f()">点击加一</button></body></html>

总结

这些都只是js的一些入门语法,想要学好还需细细的斟酌,想要快速入门可以看本博客。


本文转载自: https://blog.csdn.net/apple_51931783/article/details/122767811
版权归原作者 酷尔。 所有, 如有侵权,请联系我们删除。

“JavaScript基本的的语法规则”的评论:

还没有评论