avaScript基础学习-基本的语法规则

目录
  • 一、运算符
  • 二、分支语句
  • 三、循环语句
  • 四、异常的捕获与处理
  • 五、js中的this关键字
  • 六、let与const定义变量使用规则
  • 七、js中的void链接
  • 八、异步编程setTimeout
  • 九、函数闭包

一、运算符

  • 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 引用到任何对象。

代码如下:

<!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 定义的变量相似:

  • 二者都是块级作用域
  • 都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别:

  • 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都是先声明后使用

代码如下:

<!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的本质区别

  • 前者不会改变网页的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()执行想要的函数,弹窗,等等

语法规则:

  <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的一些入门语法,想要学好还需细细的斟酌,

到此这篇关于avaScript基础学习-基本的语法规则的文章就介绍到这了,更多相关avaScript语法规则内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • avaScript基础学习-基本的语法规则

    目录 一.运算符 二.分支语句 三.循环语句 四.异常的捕获与处理 五.js中的this关键字 六.let与const定义变量使用规则 七.js中的void链接 八.异步编程setTimeout 九.函数闭包 一.运算符 js中的+-*/运算与c语言较为相似,简写方式也类似 ++.--.+=.%=等运算规则也相同 在js中===代表绝对等于(值与类型都相同才算相同) !==(不绝对等于)值和类型有一个不相同或者都不相同为真 js中还支持三目运算符 a>b?'a大于b':'b大于a' 二.分支语句

  • 超详细的JavaScript基本语法规则

    目录 01 JavaScript (简称:js) js分三个部分: JavaScript是什么? js的代码可以分三个地方写: 02 操作符 操作符:一些符号-----用来计算 关系运算符: 关系运算表达式: 逻辑运算符: 逻辑运算表达式: 03 JS变量 变量名的注意问题-变量名的命名: 04 JS变量作用 05 JS变量的交换 使用第三方的变量进行交换 第二种方式交换:一般适用于数字的交换 06 注释 注释的方式: 07 JS的数据类型 值类型(基本类型): 引用数据类型: 08 JS的数字

  • JavaScript声明变量名的语法规则

    一.语法规则 1.变量必须使用字母.下划线(_)或者美元符($)开始. 2.然后可以使用任意多个英文字母.数字.下划线(_)或者美元符($)组成. 3.不能使用JS关键词与保留字. 二.示例 var score; score="100"; 三.注意 1.JS区分大小写.如变量score与Score是不一样的,相当两个变量. 2.变量虽然可以不声明,直接使用,但不规范,会涉及变量名提升等问题. 以上所述就是本文的全部内容了,希望大家能够喜欢.

  • 正则表达式语法规则及在Javascript和C#中的使用方法

    一.正则表达式概念: 在计算机科学中,是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在很多文本编辑器或其他工具里,正则表达式通常被用来检索和/或替换那些符合某个模式的文本内容.许多程序设计语言都支持利用正则表达式进行字符串操作. 二.正则表达式的使用: 正则表达式在ASP.NET中主要是用来对输入的内容进行验证,验证一般分为两种一种是客户端JS验证,另一种是服务器端验证 1.JS对输入内容验证 复制代码 代码如下: function check() {           

  • Javascript基础学习笔记(菜鸟必看篇)

    什么是变量? 变量是用于存储信息的容器 变量的声明 语法: var 变量名 变量名 = 值; 变量要先声明再赋值 变量可以重复赋值 变量的命名规则 变量必须以字母开头: 变量也能以$和_符号开头(不过我们不推荐这么做): 变量名称对大小写敏感(a和A是不同的变量). 语句 语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾. 有个好的编码习惯,都要以 ; 结尾 数据类型 在JavaScript中,一段信息就是一个值(value).值有不同的类型,大家最熟悉的类型是数字.字符串(strin

  • GoLang基础学习之go test测试

    目录 1.介绍 2.函数 3.测试函数格式 3.1格式 3.2失败示例 3.3成功示例1 3.4成功示例2 3.5成功示例3 3.6成功实例4 4.基准函数 4.1成功实例1 4.2成功实例2 4.3性能比较函数 总结 1.介绍 Go语言中的测试依赖go test命令.编写测试代码和编写普通的Go代码过程是类似的,并不需要学习新的语法.规则或工具: go test 命令是go语言内置的命令 go test命令是一个按照一定约定和组织的测试代码的驱动程序在我们执行了go tets命令之后,这个命令

  • MySQL数据库基础学习之JSON函数各类操作详解

    目录 前言 一.JSON语法规则 二.JSON函数 1.JSON_CONTAINS(json_doc,value)函数 2.JSON_SEARCH()函数 3.JSON_PRETTY(json_doc)函数 4.JSON_DEPTH(json_doc)函数 5.JSON_LENGTH(json_doc[,path])函数 6.JSON_KEYS(json_doc[,path])函数 7. JSON_INSERT(json_doc,path,val[,path,val] ...)函数 8.JSON

  • 值得收藏的asp.net基础学习笔记

    值得收藏的asp.net基础学习笔记,分享给大家. 1.概论 浏览器-服务器 B/S 浏览的 浏览器和服务器之间的交互,形成上网B/S模式 对于HTML传到服务器  交给服务器软件(IIS)  服务器软件直接读取静态页面代码,然后返回浏览器 对于ASPX传达服务器  交给服务器软件(IIS)   IIS发现自己处理不了aspx的文件,就去映射表根据后缀名里找到响应的处理程序(isapi,服务器扩展程序) 问题:IIS如何调用可扩展程序? 答:可扩展程序首先就是按照IIS提供的借口实现代码,所以I

  • Linux shell脚本基础学习详细介绍(完整版)第1/2页

    Linux shell脚本基础学习这里我们先来第一讲,介绍shell的语法基础,开头.注释.变量和 环境变量,向大家做一个基础的介绍,虽然不涉及具体东西,但是打好基础是以后学习轻松地前提. 1. Linux 脚本编写基础 ◆1.1 语法基本介绍1.1.1 开头程序必须以下面的行开始(必须方在文件的第一行):#!/bin/sh符号#!用来告诉系统它后面的参数是用来执行该文件的程序.在这个例子中我们使用/bin/sh来执行程序.当编辑好脚本时,如果要执行该脚本,还必须使其可执行.要使脚本可执行:编译

  • Python基础学习之类与实例基本用法与注意事项详解

    本文实例讲述了Python基础学习之类与实例基本用法与注意事项.分享给大家供大家参考,具体如下: 前言 和其他编程语言相比,Python用非常少的新语法和语义将类加入到语言中.Python的类提供了面向对象编程的所有标准特性:类继承机制允许多个基类,派生类可以覆盖它基类的任何方法,一个方法可以调用基类中相同名称的的方法.对象可以包含任意数量和类型的数据.和模块一样,类也拥有Python天然的动态特性:它们在运行时创建,可以在创建后修改. Python的类 Python类实例时,先调用__new_

  • Python基础学习之函数方法实例详解

    本文实例讲述了Python基础学习之函数方法.分享给大家供大家参考,具体如下: 前言 与其他编程语言一样,函数(或者方法)是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. python的函数具有非常高的灵活性,可以在单个函数里面封装和定义另一个函数,使编程逻辑更具模块化. 一.Python的函数方法定义 函数方法定义的简单规则: 1. 函数代码块以 def 关键词开头,后接函数标识符名称和圆括号(). 2. 任何传入参数和自变量必须放在圆括号中间.圆括号之间可以用于定义参数. 3.

  • 零基础学习C/C++需要注意的地方

    谈及C/C++,功能强大.应用广泛,一旦掌握了后,若是再自学其他语言就显得轻而易举了.那为什么学C/C++的人少呢?很多人认为C/C++虽然博大精深,但也难学.其实就本人认为C/C++并非是"difficult(困难)"的,只要你能理清思路,掌握它的精髓,配合一套教材.那么学C/C++是一件非常容易且又其乐无穷的事.今天本人就与大家一起谈谈如何学习C/C++或者说学习C/C++应从哪几方面着手. 先来说说C语言. 1.入门后多看代码 在有一定基础以后一定要多看别人的代码.注意代码中的算

随机推荐