JavaScript 语法

2021-04-27 07:04:47 更新

B站关联视频教程:https://www.bilibili.com/video/BV1RA41137yd?p=4

目录:

一、JavaScript 语法概述 JavaScript 是一门程序语言。语法规则定义了语言结构

    1、JavaScript 语句 (;分割)

    2、JavaScript  关键词var 

    3、JavaScript 关键字 (if、else 等)

    4、JavaScript 注释

二、常量 在编程语言中,一个字面量是一个常量,如 666。

三、变量

在编程语言中,变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

1、变量的命名规则

第一个字符必须是字母、下划线(-)或美元符号($),其后的字符可以是字母、数字或下划线、美元符号。

2、变量的作用域【局部的、全局的】

全局的:在函数外的。[函数内部的 没有var的变量] ;局部的:在函数内的【有var 声明的变量】。

四、运算符

    1、赋值运算符【= 给变量赋值】

    2、算术运算符【+ - * / %  ++ --来计算值】     

    3、比较运算符【> < >= <= == === != !== 来比较值】    

    4、逻辑运算符【且:&& ;或: || ;非:!】

    5、运算符优先级【记忆口诀:算 关 逻 赋 】

五、表达式

    1、原始表达式【原始表达式是表达式的最小单位—它不再包含其他表达式。】如:[1,2,3,4]

    2、复杂表达式【复杂表达式是由原始表达式和操作符(operator)组合而成】如:a=[1,2,3,4]


内容:

一、JavaScript 语法概述

JavaScript 是一程序语言。语法规则定义了语言结构。

1、JavaScript 语句

在 HTML 中,JavaScript 语句向浏览器发出的命令。

语句是用分号分隔:

<script>
    x = 1 + 2;
    y = x * 10;
    document.write(y);
</script>

2、JavaScript 关键词

JavaScript 语句通常于关键词为开头。var 关键词告诉浏览器创建一个新的变量:

<script>
    var x = 1 + 2;
    var y = x * 10;
    document.write(y);
</script>

3、JavaScript 关键字

和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用。

JavaScript 同样保留了一些关键字,这些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。

后续的字符可以是字母、数字、下划线或美元符(数字是不允许作为首字符出现的,以便 JavaScript 可以轻易区分开关键字和数字)。

以下是 JavaScript 中最重要的保留字(按字母顺序):

abstractelseinstanceofsuper




booleanenumintswitch




breakexportinterfacesynchronized




byteextendsletthis




casefalselongthrow




catchfinalnativethrows




charfinallynewtransient




classfloatnulltrue




constforpackagetry




continuefunctionprivatetypeof




debuggergotoprotectedvar




defaultifpublicvoid




deleteimplementsreturnvolatile




doimportshortwhile




doubleinstaticwith

4、JavaScript 注释

不是所有的 JavaScript 语句都是"命令"。双斜杠// 后的内容将会被浏览器忽略:

//这是单行注释,浏览器忽略
/*这是单行或多行注释,浏览器忽略*/

二、常量

在编程语言中,一个字面量是一个常量,如 666。

1、数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。

2、字符串(String)字面量 可以使用单引号或双引号:

<div id="demo">内容</div>
<script>
    document.getElementById("demo").innerHTML = 'itwenda.com';
</script>

3、表达式字面量 用于计算:

<div id="demo">内容</div>
<script>
    document.getElementById("demo").innerHTML = 2 + 3;
</script>

4、数组(Array)字面量 定义一个数组:

[40, 100, 1, 5, 25, 10]

5、对象(Object)字面量 定义一个对象:

{firstName:"it", lastName:"wenda"}

6、函数(Function)字面量 定义一个函数:

function myFunction(a, b) { return a * b;}

三、变量

在编程语言中,变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

<script>
    var a;
    a = 6;
    document.write(a); //6
</script>

变量可以通过变量名访问。在指令式语言中,变量通常是可变的。字面量(常量)是一个恒定的值。

变量是一个名称。字面量是一个值。


<script>
    var a=1;
    document.write(a);
</script>

1、变量的命名规则

第一个字符必须是字母、下划线(-)或美元符号($),其后的字符可以是字母、数字或下划线、美元符号。

2、变量的作用域【局部的、全局的】

全局的:在函数外的。[函数内部的 没有var的变量] 

局部的:在函数内的【有var 声明的变量】。


例1:

<script>
   x=1;
   function a(){
       var x=2;
   }
   a();
   document.write(x);//输出1
</script>

例2:

<script>
   x=1;
   function a(){
       x=2;
   }
   a();
   document.write(x);//输出2
</script>



四、运算符

1、赋值运算符【= 给变量赋值】

<script>
    var a;
    a = 6;
    document.write(a); //6
</script>

2、算术运算符 【+ - * / % ++ --来计算值】     

<script>
    var a;
    a = 6+1;
    document.write(a); //7
</script>

+有2层含义

1)真的相加运算【都是数字类型】;

2)字符类型的串接

有时候,我们就需要对非全数字型相加运算。

我们可以有2种方式实现这个要求。

b=1;
c=parseInt("2");
 
b=1;
c=eval("2");

求余计算:前值正负决定结果的正负

<script>
    a=2;
    a1=-2;
    b=3;
    document.write(a%b);//2
    document.write("<br/>");
    document.write(a1%b);//-2 求余计算:前值正负决定结果的正负
</script>

++在前与在后的区别

<script>
    var a=1;
    document.write(a++);//1
</script>
<script>
    var a=1;
    document.write(++a);//2
</script>

3、比较运算符【> < >= <= == === != !== 来比较值】

== 只判断值大小,不判断数据类型

<script>
    a=1;
    b='1';
    if(a==b){
        document.write('相等');
    }else{
        document.write('不相等');
    }
    //相等
</script>

=== 判断值大小且判断数据类型

<script>
    a=1;
    b='1';
    if(a===b){
        document.write('相等');
    }else{
        document.write('不相等');
    }
    //不相等
</script>

4、逻辑运算符【且:&& ;或: || ;非:!】

【且:&& 】:只有全为真,结果才是真

<script>
    a=1;
    b=0;
    if(a&&b){
        document.write('真');
    }else{
        document.write('假');
    }
    //假
</script>
<script>
    a=1;
    b='0';
    if(a&&b){
        document.write('真');
    }else{
        document.write('假');
    }
    //真
</script>

【或: ||】:只要有一个为真,结果就是真

<script>
    a=1;
    b='0';
    if(a||b){
        document.write('真');
    }else{
        document.write('假');
    }
    //真
</script>

js逻辑运算的断电机制

<script>   
    b=17||7;
    document.write(b);//17
</script>

【非: !】:假的非运算就是真;真的非运算就是假

<script>   
    b=!false;
    document.write(b);//true
</script>
<script>   
    b=!0;
    document.write(b);//true
</script>
<script>   
    b=!1;
    document.write(b);//false
</script>
<script>   
    b=!"4";
    document.write(b);//false
</script>

JavaScript有多种类型的运算符:

类型实例描述
赋值,算术和位运算符=  +  -  *  /在 JS 运算符中描述
条件,比较及逻辑运算符==  != <  > && ||在 JS 比较运算符中描述


5、运算符优先级【记忆口诀:算 关 逻 赋 

算 :

++ --

* / %

+ -

关 :

> < >= <=

== === != !==

逻:

&&

||

赋:

=

<script>
    a=1;
    b=a+2*8||7;
    document.write(b);//17
</script>

五、表达式

关于javascript基础语法,人们听得比较多的术语是操作符和语句。但,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression)。

1、原始表达式是表达式的最小单位——它不再包含其他表达式。

javascript中的原始表达式包括this关键字、标识符引用、字面量引用、数组初始化、对象初始化和分组表达式。

例:数组和对象初始化:

 [];

[1,2,3];

{};

{a:1};

2、复杂表达式是由原始表达式和操作符(operator)组合而成

包括属性访问表达式、对象创建表达式和函数表达式。

例1:

var o = {x:1,y:{z:3}}; //对象字面量
var a = [o,4,[5,6]]; // 包含对象的数组字面量
o.x;//表达式o的x属性
o.y.z;//表达式o.y的z属性
o['x'];//对象o的x属性
a[1];//表达式a中索引为1的元素

例2:

 new Object();