3.2 JavaScript語言基礎

3.2.1 JavaScript的語法

視頻講解：光盤\TM\lx\3\02 JavaScript的語法．mp4

JavaScript與Java在語法上有些相似，但也不盡相同。下面將結合Java語言對編寫JavaScript代碼時需要注意的事項進行詳細介紹。

JavaScript區分大小寫

JavaScript區分大小寫，這一點與Java語言是相同的。例如，變量username與變量userName是兩個不同的變量。

每行結尾的分號可有可無

與Java語言不同，JavaScript并不要求必須以分號（;）作為語句的結束標記。如果語句的結束處沒有分號，JavaScript會自動將該行代碼的結尾作為語句的結尾。

【例3.1】語句末尾添加分號與不添加分號，實例代碼如下：

        alert("您好！歡迎訪問我公司網站！");
        alert("您好！歡迎訪問我公司網站！")

說明

良好的代碼編寫習慣是在每行代碼的結尾處加上分號，這樣可以保證每行代碼的準確性。

變量是弱類型的

與Java語言不同，JavaScript的變量是弱類型的。因此在定義變量時，只使用var運算符就可以將變量初始化為任意的值。例如，通過以下代碼可以將變量username初始化為mrsoft，而將變量age初始化為20。

【例3.2】在JavaScript中定義變量，代碼如下：

        var username="mrsoft";                  //將變量username初始化為mrsoft
        var age=20;                             //將變量age初始化為20

使用大括號標記代碼塊

與Java語言相同，JavaScript也是使用一對大括號標記代碼塊，被封裝在大括號內的語句將按順序執行。

注釋

在JavaScript中，提供了兩種注釋，即單行注釋和多行注釋。下面進行詳細介紹。

單行注釋使用雙斜線“//”開頭，在“//”后面的文字為注釋內容，在代碼執行過程中不起任何作用。例如，在下面的代碼中，“獲取日期對象”為注釋內容，在代碼執行時不起任何作用。

【例3.3】在JavaScript代碼中添加注釋，代碼如下：

        var now=new Date();                     //獲取日期對象

多行注釋以“/*”開頭，以“*/”結尾。在“/*”和“*/”之間的內容為注釋內容，在代碼執行過程中不起任何作用。

例如，在下面的代碼中，“功能……”“參數……”“時間……”“作者……”等為注釋內容，在代碼執行時不起任何作用。

【例3.4】在JavaScript代碼中添加多行注釋，代碼如下：

        /＊
         ＊ 功能：獲取系統日期函數
         ＊ 參數：指定獲取的系統日期顯示的位置
         ＊ 時間：2016-10-09
         ＊ 作者：cdd
        ＊/
        function getClock(clock){
            …                                   //此處省略了獲取系統日期的代碼
            clock.innerHTML="系統公告："+time    //顯示系統日期
        }

3.2.2 JavaScript中的關鍵字

視頻講解：光盤\TM\lx\3\03 JavaScript中的關鍵字．mp4

JavaScript中的關鍵字是指在JavaScript中具有特定含義的、可以成為JavaScript語法中一部分的字符。與其他編程語言一樣，JavaScript中也有許多關鍵字，如表3.1所示。

表3.1 JavaScript中的關鍵字

注意

JavaScript中的關鍵字不能用作變量名、函數名以及循環標簽。

3.2.3 JavaScript的數據類型

視頻講解：光盤\TM\lx\3\04 JavaScript的數據類型．mp4

JavaScript的數據類型比較簡單，主要有數值型、字符型、布爾型、轉義字符、空值（null）和未定義值6種，下面分別進行介紹。

1．數值型

JavaScript的數值型數據又可以分為整型和浮點型兩種。

整型

JavaScript的整型數據可以是正整數、負整數和0，可以采用十進制、八進制或十六進制來表示。

【例3.5】定義整型變量，代碼如下：

        729                 //表示十進制的729
        071                 //表示八進制的71
        0x9405B             //表示十六進制的9405B

說明

以0開頭的數為八進制數，以0x開頭的數為十六進制數。

浮點型

浮點型數據由整數部分加小數部分組成，只能采用十進制，但是可以使用科學記數法或標準方法來表示。

【例3.6】定義浮點型變量，代碼如下：

        3.1415926            //采用標準方法表示
        1.6E5                //采用科學記數法表示，代表1.6＊105

2．字符型

字符型數據是使用單引號或雙引號括起來的一個或多個字符。

單引號括起來的一個或多個字符。

【例3.7】定義用單引號括起來的字符型變量，代碼如下：

        'a'
        '保護環境從自我做起’

雙引號括起來的一個或多個字符。

【例3.8】定義用雙引號括起來的字符型變量，代碼如下：

        "b"
        "系統公告："

說明

JavaScript與Java不同，它沒有char數據類型，要表示單個字符，必須使用長度為1的字符串。

3．布爾型

布爾型數據只有兩個值，即true或false，主要用來說明或代表一種狀態或標志。在JavaScript中，也可以使用整數0表示false，使用非0的整數表示true。

4．轉義字符

以反斜杠開頭的不可顯示的特殊字符通常稱為控制字符，也被稱為轉義字符。通過轉義字符，可以在字符串中添加不可顯示的特殊字符，或者防止引號匹配混亂的問題。JavaScript常用的轉義字符如表3.2所示。

表3.2 JavaScript常用的轉義字符

【例3.9】在網頁中彈出一個提示對話框，其中應用轉義字符“\r”將文字分為兩行顯示，代碼如下：

        alert("歡迎訪問我公司網站！\r http://www.mingribook.com");

上面代碼的執行結果如圖3.1所示。

圖3.1 彈出提示對話框

說明

在“document.writeln(); ”語句中使用轉義字符時，只有將其放在格式化文本塊中才會起作用，所以輸出的帶轉義字符的內容必須位于<pre>和</pre>標記內。

5．空值

JavaScript中有一個空值（null），用于定義空的或不存在的引用。如果試圖引用一個沒有定義的變量，則返回一個null值。

注意

空值不等于空的字符串（""）或0。

6．未定義值

當使用一個并未聲明的變量，或者使用一個已經聲明但沒有賦值的變量時，將返回未定義值（undefined）。

說明

JavaScript中還有一種特殊類型的數字常量NaN，即“非數字”。當在程序中由于某種原因發生計算錯誤后，將產生一個沒有意義的數字，此時JavaScript返回的數值就是NaN。

3.2.4 變量的定義及使用

視頻講解：光盤\TM\lx\3\05變量的定義及使用．mp4

變量是指程序中一個已經命名的存儲單元，其主要作用就是為數據操作提供存放信息的容器。在使用變量前，必須明確變量的命名規則、變量的聲明方法以及變量的作用域。

1．變量的命名規則

JavaScript變量的命名規則如下：

變量名由字母、數字或下劃線組成，但必須以字母或下劃線開頭。

變量名中不能有空格、加號、減號、逗號等符號。

不能使用JavaScript中的關鍵字（見表3.1）。

JavaScript的變量名是嚴格區分大小寫的。例如，arr_week與arr_Week代表了兩個不同的變量。

說明

雖然JavaScript的變量可以任意命名，但是在實際編程時，最好使用便于記憶且有意義的變量名，以便增加程序的可讀性。

2．變量的聲明方法

在JavaScript中，可以使用關鍵字var聲明變量，其語法格式如下：

        var variable;

參數說明：

variable：用于指定變量名，該變量名必須遵守變量的命名規則。

在聲明變量時需要遵守以下規則：

可以使用關鍵字var同時聲明多個變量。

【例3.10】同時聲明多個變量，代碼如下：

        var now, year, month, date;

可以在聲明變量的同時對其進行賦值，即初始化。

【例3.11】定義變量并進行賦值，代碼如下：

        var now="2016-05-12", year="2016", month="5", date="12";

如果只是聲明了變量，但未對其賦值，則其默認值為undefined。

當給一個尚未聲明的變量賦值時，JavaScript會自動用該變量名創建一個變量。在一個函數內部，通常創建的只是一個僅在函數內部起作用的局部變量，而不是一個全局變量。要創建一個全局變量，則必須使用var關鍵字進行變量聲明。

JavaScript采用弱類型，所以在聲明變量時不需要指定變量的類型，而變量的類型將根據變量的值來確定。

【例3.12】定義變量并進行賦值，代碼如下：

        var number=10                                               //數值型
        var info="歡迎訪問我公司網站！\rhttp://www.mingribook.com"; //字符型
        var flag=true                                               //布爾型

3．變量的作用域

變量的作用域是指變量在程序中的有效范圍。在JavaScript中，根據變量的作用域可以將變量分為全局變量和局部變量兩種。全局變量是定義在所有函數之外，作用于整個腳本代碼的變量；局部變量是定義在函數體內，只作用于函數體內的變量。

【例3.13】下面的代碼將說明變量的有效范圍。

        <script language="javascript">
            var company="明日科技";                           //該變量在函數外聲明，作用于整個腳本代碼
            function send(){
                var url="www.mingribook.com";                 //該變量在函數內聲明，只作用于該函數體
                alert(company+url);
            }
        </script>

3.2.5 運算符的應用

視頻講解：光盤\TM\lx\3\06運算符的應用．mp4

運算符是用來完成計算或者比較數據等一系列操作的符號。常用的JavaScript運算符按類型，可分為賦值運算符、算術運算符、比較運算符、邏輯運算符、條件運算符和字符串運算符6種。

1．賦值運算符

JavaScript中的賦值運算可以分為簡單賦值運算和復合賦值運算。簡單賦值運算是將賦值運算符（=）右邊表達式的值保存到左邊的變量中；而復合賦值運算混合了其他操作（算術運算操作、位操作等）和賦值操作。

【例3.14】使用賦值運算符，代碼如下：

        sum+=i; //等同于sum=sum+i;

JavaScript中的賦值運算符如表3.3所示。

表3.3 JavaScript中的賦值運算符

2．算術運算符

算術運算符用于在程序中進行加、減、乘、除等運算。在JavaScript中常用的算術運算符如表3.4所示。

表3.4 JavaScript中的算術運算符

注意

執行除法運算時，0不能作為除數。如果0作除數，返回結果則為Infinity。

【例3.15】編寫JavaScript代碼，應用算術運算符計算商品金額。（實例位置：光盤\TM\sl\3\1）

關鍵代碼如下：

        <script language="javascript">
            var price=992;              //定義商品單價
            var number=10;              //定義商品數量
            var sum=price＊number;      //計算商品金額
            alert(sum);                 //顯示商品金額
        </script>

運行結果如圖3.2所示。

圖3.2 顯示商品金額

3．比較運算符

比較運算符的基本操作過程是：首先對操作數進行比較，這個操作數可以是數字也可以是字符串，然后返回一個布爾值true或false。在JavaScript中常用的比較運算符如表3.5所示。

表3.5 JavaScript中的比較運算符

4．邏輯運算符

邏輯運算符通常和比較運算符一起使用，用來表示復雜的比較運算，常用于if、while和for語句中，其返回結果為一個布爾值。JavaScript中常用的邏輯運算符如表3.6所示。

表3.6 JavaScript中的邏輯運算符

5．條件運算符

條件運算符是JavaScript支持的一種特殊的三目運算符，其語法格式如下：

        操作數？結果1：結果2

如果“操作數”的值為true，則整個表達式的結果為“結果1”，否則為“結果2”。

【例3.16】應用條件運算符計算兩個數中的最大數，并賦值給另一個變量。代碼如下：

        var a=26;
        var b=30;
        var m=a>b? a:b             //m的值為30

6．字符串運算符

字符串運算符是用于兩個字符型數據之間的運算符，除了比較運算符外，還可以是+和+=運算符。其中，+運算符用于連接兩個字符串；而+=運算符用于連接兩個字符串，并將結果賦給第一個字符串。

【例3.17】在網頁中彈出一個提示對話框，顯示進行字符串運算后變量a的值。代碼如下：

        var a="One"+"world";       //將兩個字符串連接后的值賦給變量a
        a+="One Dream"             //連接兩個字符串，并將結果賦給第一個字符串
        alert(a);

運行實例，結果如圖3.3所示。

圖3.3 彈出提示對話框