JavaScript進階之基礎語法

1.認識JS

你知道嗎，Web前端開發師需要掌握什麼技術?也許你已經瞭解HTML標記(也稱為結構)，知道了CSS樣式(也稱為表示)，會使用HTML+CSS建立一個漂亮的頁面，但這還不夠，它只是靜態頁面而已。我們還需使用JavaScript增加行為，為網頁新增動態效果。準備好，讓JavaScript帶你進入新境界吧!

JavaScript能做什麼？

1.增強頁面動態效果(如:下拉選單、圖片輪播、資訊滾動等)

2.實現頁面與使用者之間的實時、動態互動(如:使用者註冊、登陸驗證等)

JS進階篇學習什麼？

在JavaScript入門篇中，我們學習瞭如何插入JS、輸出內容及簡單的DOM操作，JavaScript進階篇讓您進一步的瞭解JS的變數、陣列、函式、語法、物件、事件、DOM操作，製作簡單的網頁動態效果。

2.什麼是變數

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

3.給變數取個名字(變數命名)

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

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

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

正確:
mysum
_mychar
$numa1

錯誤:
6num //開頭不能用數字
%sum //開頭不能用除(_ $)外特殊符號,如(% + /等)
sum+num //開頭中間不能使用除(_ $)外特殊符號，如(% + /等)
2.變數名區分大小寫，如:A與a是兩個不同變數。

3.不允許使用JavaScript關鍵字和保留字做變數名。

4.確定你的存在(變數宣告)

我們要使用盒子裝東西,是不是先要找到盒子,那在程式設計中，這個過程叫宣告變數,找盒子的動作，如何表示：

宣告變數語法: var 變數名;
var就相當於找盒子的動作，在JavaScript中是關鍵字（即保留字），這個關鍵字的作用是宣告變數，併為”變數”準備位置(即記憶體）。

var mynum ; //宣告一個變數mynum
當然，我們可以一次找一個盒子，也可以一次找多個盒子，所以Var還可以一次宣告多個變數，變數之間用”,”逗號隔開。

var num1,mun2 ; //宣告一個變數num1
注意:變數也可以不宣告，直接使用，但為了規範，需要先宣告，後使用。

5.多樣化的我(變數賦值）

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

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

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)。

6.表達出你的想法(表示式)

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

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

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

注意:串表示式中mychar是變數

注意:數值表示式中num是變數

注意:布林表示式中num是變數

7.我還有其它用途( +號操作符）

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

（1）操作符

看下面這段JavaScript程式碼。
sum = numa + numb;
其中的”=”和”+”都是操作符。

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

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

(2) “+”操作符

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

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

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

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

mynum = 10;
mynum++; //mynum的值變為11
mynum–; //mynum的值又變回10
上面的例子中，mynum++使mynum值在原基礎上增加1，mynum–使mynum在原基礎上減去1,其實也可以寫成:

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

9.較量較量(比較操作符)

我們先來做道數學題，數學考試成績中，小明考了90分，小紅考了95分，問誰考的分數高?
答: 因為“95 > 90”，所以小紅考試成績高。
其中大於號”>” 就是比較操作符，小紅考試成績和小明考試成績就是運算元，並且是兩個運算元。

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

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

看看下面例子:
var a = 5;//定義a變數，賦值為5
var b = 9; //定義b變數，賦值為9
document.write (a

10.我與你同在(邏輯與操作符）

數學裡面的“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 的值。

11.我或你都可以 (邏輯或操作符）

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

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

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 的值。

12.是非顛倒(邏輯非操作符）

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

邏輯非操作符值表:

看看下面程式碼，變數c的值是什麼:
var a=3;
var b=5;
var c;
c=!(b>a); // b>a值是true,! (b>a）值是false
c=!(b

13.保持先後順序(操作符優先順序）

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

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