表达式和语句

语句

在学习JavaScript语法前，先回忆一下HTML和CSS语法：在创建HTML时候，我们通常对文本进行标记，以指定其结构。为此，要给文本添加元素标签、特性和值：

<h1 class="drink">茶颜悦色</h1>
<p>茶颜悦色是目前最受年轻人喜欢的奶茶品牌之一</p>

CSS稍微有点不同。使用CSS时，我们编写一系列规则，其中每条规则都指定了HTML中元素样式：

h1.drink {
        color:red:
    }
p{
        font-size:15px;
}

使用JavaScript时，我们编写语句，每条语句都指定了计算的一部分，而所有的语句一起给网页添加行为：

var name = xiaoming; // 每条语句都做了一点点工作，比如声明用于储存值的变量 
var age = 18;

if(age > 18){    //有些语句是做决策，比如判断用户年龄是否大于18岁
    alert("进入正常模式")
}else{
    alert("进入青少年模式")
}

表达式

要使用JavaScript准确的表达我们的计算逻辑，就需要使用表达式，表达式的结果为值，下面就是其中之一：

var drinkPrice = price - (price*(discout/100));

这个代码中price - (price*(discout/100)),就是一个表达式，结果为饮料打折之后的价格。这里可以理解为，表达式类似于我们小学学习的数学计算过程。

还有字符串表达式：

"hello"+"world"//将这些字符串相加（拼接），得到一个新的字符串"helloworld"
"The"+"price"+"is"+drinkPrice //与上一个表达式类似，但是这个里面包含一个变量名，其结果也为一个字符串
phoneNumber.substring(0,3)//函数表达式，返回一个新的字符串

还有结果为ture或者false表达式，这种表达式被称为布尔表达式：

age > 18 //如果age大于18，返回true，否则为false
drinkPrice >= 8; //如果drinkPrice大于或等于8，返回true，否则为false
name === "xiaoming" //判断name是否含有字符串"xiaoming"，如有就返回true，否则为false

除了以上的介绍，表达式的值还可能为其他几种类型（JavaScript的几种数据类型，将在以后的博客中介绍），现在需要记住的是，所有表达式的结果都为某种值。

标识符的规则

通过上面的代码我们发现，JavaScript语句通常是含有变量的，变量有值，变量也有名字。但如何给变量命名呢？随便取名吗？不是的，变量是标识符，只需要准守下面2条规则，变量名就是合法的：

以字母、下划线或美元符号打头。
然后使用任意数量的字母、数字、下划线或者美元符号。例如：

var _ = 1;
var $ = 2;
var ____ = 3;
var 你好 = "hi";

还有一点需要注意的是：不能使用任何内置的关键字，如var、function、false等。下面列出了JavaScript的关键字：

关键字.png

if else语句

在JavaScript中，我们在if语句中使用布尔表达式来进行决策：仅当if语句的条件测试为true时，才会执行其代码块。当条件为false时，不执行或者执行else（如果使用了else）后面的代码块，如下所示：

if(age > 18){    //关键字是if，后面是条件和代码块
    alert("进入正常模式")//如果条件为true，执行其代码块
}else{            //如果条件为false，执行else后面的代码块
    alert("进入青少年模式")
}

在if语句中，还可以添加一个或多个else if语句，以执行多重检查，如下所示：

if(age > 18){   
    alert("进入正常模式")
}else if(age < 8){      //可根据需要添加任意数量的else if，以检查多个条件，每个else if都有其代码块，在条件为true时执行。      
    alert("进入儿童模式")
}

while for 语句

我们常常需要编写代码来重复执行相同的操作，而JavaScript提供了2种反复执行循环代码的方法：while、for。

while

while语句格式如下：

var age = 18;
while (age > 18){ //关键是while，圆括号里面为条件，条件为true时，就执行代码块的代码
    console.log(age)； //如果条件为true，则执行代码块，并回过头来再次检查条件，如果条件为false，就结束循环
    age = age-1；
}

注意，while循环容易陷入无限循环而卡死浏览器，不要随便使用

for

实际工作中，更多的是使用for循环，它是while循环的方便写法，语句格式如下：

for (var i = 0 ;i < 5;i++){
//圆括号中有三部分，第一部分为初始化变量，这种初始化只在循环开始时执行一次。
//第二部分为条件测试，每次循环时都执行该测试，如果为false时结束循环。
//第三部分为变量修改，每次循环都将这样做，这是在执行完循环体的所有语句后执行的
    console.log(i);//这是循环体，注意除了将i加1的操作放在for语句外，其余部分与while循环中完全相同
    }

break continue

当我们需要在循环体中退出，可以使用break和continue；

break

break用于退出所有循环，语法如下:

for (var i = 0; i < 5; i++) {
  console.log(i);
  if (i === 3)
    break;//当代码执行到i等于3时候，就会跳出当前的for循环
}

注意当多个for循环嵌套的时候，break只会退出离它最近的一次for循环

continue

continue用于退出当前一次循环，语法如下：

for (var i = 0; i < 10; i++) {
  if(i%2===1){
      continue//当i为单数的时候，就结束本轮循环，返回到for语句中，开始下一轮循环
  }else{
      console.log(i)
  }
}

label

JavaScript 语言允许，语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置，语法如下：

top:   //top就是这个for语句的标签
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;//在break 后面加上top，直接跳出双层循环
      console.log('i=' + i + ', j=' + j);
    }
  }

了解即可，工作中几乎不会使用。

JavaScript的基本语法