第 1 章 JS 基礎語法

什麼是變量

什麼是變量? 從字面上看，變量是可變的量；從編程角度講，變量是用於存儲某種/某些數值的存儲器。我們可以把變量看做一個盒子,盒子用來存放物品,物品可以是衣服、玩具、水果…等。

變量命名

我們爲了區分盒子，可以用 BOX1,BOX2 等名稱代表不同盒子，BOX1 就是盒子的名字（也就是變量的名字）。

我們趕快給變量取個好名字吧!變量名字可以任意取，只不過取名字要遵循一些規則:

1、必須以字母、下劃線或美元符號開頭，後面可以跟字母、下劃線、美元符號和數字。如下:

正確:           
    mysum            
    _mychar         
    $numa1  

錯誤:
  6num  //開頭不能用數字
  %sum //開頭不能用除(_ $)外特殊符號,如(%  + /等)
  sum+num //開頭中間不能使用除(_ $)外特殊符號，如(%  + /等)

2、變量名區分大小寫，如: A 與 a 是兩個不同變量。
3、不允許使用 JavaScript 關鍵字和保留字做變量名。

變量聲明

我們要使用盒子裝東西,是不是先要找到盒子,那在編程中，這個過程叫聲明變量,找盒子的動作，如何表示：

聲明變量語法: var 變量名;

var 就相當於找盒子的動作，在 JavaScript 中是關鍵字（即保留字），這個關鍵字的作用是聲明變量，併爲”變量”準備位置(即內存）。

var mynum ; //聲明一個變量mynum

當然，我們可以一次找一個盒子，也可以一次找多個盒子，所以 Var 還可以一次聲明多個變量，變量之間用”,”逗號隔開。

var num1,mun2 ; //聲明一個變量num1

注意:變量也可以不聲明，直接使用，但爲了規範，需要先聲明，後使用。

變量賦值

我們可以把變量看做一個盒子,盒子用來存放物品,那如何在變量中存儲內容呢?

我們使用"="號給變量存儲內容,看下面的語句:

var mynum = 5 ; //聲明變量mynum並賦值。

這個語句怎麼讀呢？ 給變量 mynum 賦值，值爲 5。我們也可以這樣寫:

var mynum; //聲明變量mynum
mynum = 5 ; //給變量mynum賦值

注:這裏 "="號的作用是給變量賦值，不是等於號。

盒子可以裝衣服、玩具、水果…等。其實，變量是無所不能的容器，你可以把任何東西存儲在變量裏，如數值、字符串、布爾值等，例如：

var num1 = 123;       // 123是數值
var num2 = "一二三";    //"一二三"是字符串
var num3=true;    //布爾值true（真），false(假)

其中，num1 變量存儲的內容是數值；num2 變量存儲的內容是字符串，字符串需要用一對引號" "括起來，num3 變量存儲的內容是布爾值(true、false)。

表達式

表達式與數學中的定義相似，表達式是指具有一定的值、用操作符把常數和變量連接起來的代數式。一個表達式可以包含常數或變量。

我們先看看下面的 JavaScript 語句：

生活中“再見”表達方法很多，如:英語(goodbye）、網絡語（88）、肢體語（揮揮手）等。在 JavaScript 表達式無處不在，所以一定要知道可以表達哪些內容，看看下面幾種情況:

注意: 串表達式中 mychar 是變量

注意:數值表達式中 num 是變量

注意:布爾表達式中 num 是變量

JavaScript 算術運算符

算術運算符用於執行變量與/或值之間的算術運算。

給定 y=5，下面的表格解釋了這些算術運算符：

運算符	描述	例子	結果
+	加	x=y+2	x=7
-	減	x=y-2	x=3
*	乘	x=y*2	x=10
/	除	x=y/2	x=2.5
%	求餘數 (保留整數)	x=y%2	x=1
++	累加	x=++y	x=6
- -	遞減	x=- -y	x=4

JavaScript 賦值運算符

賦值運算符用於給 JavaScript 變量賦值。

給定 x=10 和 y=5，下面的表格解釋了賦值運算符：

運算符	例子	等價於	結果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

加號操作符

操作符是用於在 JavaScript 中指定一定動作的符號。

（1）操作符

看下面這段 JavaScript 代碼。

sum = numa + numb;

其中的"="和"+"都是操作符。

JavaScript 中還有很多這樣的操作符，例如，算術操作符(+、-、*、/等)，比較操作符(<、>、>=、<=等)，邏輯操作符(&&、||、！)。

注意: "="操作符是賦值，不是等於。

(2) "+"操作符

算術運算符主要用來完成類似加減乘除的工作，在 JavaScript 中，"+"不只代表加法，還可以連接兩個字符串，例如：

mystring = "Java" + "Script"; // mystring的值“JavaScript”這個字符串

自加一，自減一 ( ++ 和- -)

算術操作符除了(+、-、*、/)外，還有兩個非常常用的操作符，自加一"++"；自減一"--"。首先來看一個例子：

mynum = 10;
mynum++; //mynum的值變爲11
mynum--; //mynum的值又變回10

上面的例子中，mynum++ 使 mynum 值在原基礎上增加 1，mynum– 使mynum 在原基礎上減去 1,其實也可以寫成:

mynum = mynum + 1;//等同於mynum++
mynum = mynum - 1;//等同於mynum--

比較操作符

我們先來做道數學題，數學考試成績中，小明考了 90 分，小紅考了 95 分，問誰考的分數高?
答: 因爲“95 > 90”，所以小紅考試成績高。

其中大於號”>” 就是比較操作符，小紅考試成績和小明考試成績就是操作數，並且是兩個操作數。

也就是說兩個操作數通過比較操作符進行比較，得到值爲真（true）和假(false)。

在 JavaScript 中，這樣的比較操作符有很多，這些操作符的含義如下:

看看下面例子:

var a = 5;//定義a變量，賦值爲5
var b = 9; //定義b變量，賦值爲9
document.write (a<b); //a小於b的值嗎? 結果是真(true)
document.write (a>=b); //a大於或等於b的值嗎? 結果是假(false)
document.write (a!=b); //a不等於b的值嗎? 結果是真(true)
document.write (a==b); //a等於b的值嗎? 結果是假(false)

邏輯”與”操作符

數學裏面的"a>b"，在 JavaScript 中還表示爲 "a>b"；數學中的“b大於a，b小於c”是"a<b<c"，那麼在 JavaScript 中可以用&&表示，如下：

b>a && b<c //“&&”是並且的意思, 讀法"b大於a"並且" b小於c "

好比我們參加高考時,在進入考場前,必須出示准考證和身份證,兩者缺一不可，否則不能參加考試，表示如下:

if(有準考證 &&有身份證) 
{
   進行考場考試
}

“&&”是邏輯與操作符，只有“&&”兩邊值同時滿足(同時爲真)，整個表達式值才爲真。

邏輯與操作符值表:

注意: 如果 A 爲假，A && B 爲假，不會在執行 B; 反之，如果 A 爲真，要由 B 的值來決定 A && B 的值。

邏輯”或”操作符

|| 邏輯或操作符，相當於生活中的“或者”，當兩個條件中有任一個條件滿足，“邏輯或”的運算結果就爲“真”。

例如：本週我們計劃出遊,可是週一至週五工作,所以週六或者週日哪天去都可以。即兩天中只要有一天有空，就可以出遊了。

var a=3;
var b=5;
var c;
c=b>a ||a>b;  //b>a是true，a>b是false，c是true

邏輯或操作符值表:

注意: 如果 A 爲真，A || B 爲真，不會在執行 B; 反之，如果 A 爲假，要由 B 的值來決定 A || B 的值。

邏輯非操作符

! 是邏輯非操作符，也就是”不是”的意思,非真即假，非假即真。好比小華今天買了一個杯子，小明說:”杯子是白色的”，小亮說:“杯子是紅色的”，小華說：”小明說的不是真話，小亮說的不是假話”。猜猜小華買的什麼顏色的杯子，答案：紅色杯子。

邏輯非操作符值表:

看看下面代碼，變量 c 的值是什麼:

var a=3;
var b=5;
var c;
c=!(b>a);  // b>a值是true,! (b>a）值是false
c=!(b<a);  // b<a值是false, ! (b<a）值是true

操作符優先級

我們都知道，除法、乘法等操作符的優先級比加法和減法高，例如：

var numa=3;
var numb=6
jq= numa + 30 / 2 - numb * 3;  // 結果爲0

如果我們要改變運算順序，需添加括號的方法來改變優先級:

var numa=3;
var numb=6
jq= ((numa + 30) / (2 - numb)) * 3; //結果是-24.75

操作符之間的優先級（高到低）:

算術操作符 → 比較操作符 → 邏輯操作符 → “=”賦值符號

如果同級的運算是按從左到右次序進行,多層括號由裏向外。

var numa=3;
var numb=6;
jq= numa + 30 >10 && numb * 3<2;  //結果爲false

編程練習

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS基礎</title>
<script type="text/javascript">
  var a,b,sum;
  var  a  = 5;
  var  b  = 100%7;  
  sum = a > b && a*b > 0 ;
  document.write( "我認爲 a 的值是:" + 5  + " b的值是:" + 2 + "sum 的值是:" +　true +"<br/>");
  document.write( "答案是,第一輪計算後，a 爲："+ a +";b爲："+b +";第一次計算sum爲："+ sum +"<br/>");

  sum = ( (++a) + 3 ) / (2 - (--b) ) * 3;  
  document.write( "再一次計算後，我認爲 a 的值是:" +  6  + " b的值是:" +  1 + "sum 的值是:" +  27 +"<br/>"); 
  document.write( "答案是，第二輪計算後，a 爲：" + a + ";b爲：" + b +";第二次計算sum爲："+ sum +",sum的類型也發生變化了。");

</script>
</head>
<body>
</body>
</html>

結果：