- JavaScript 從入門到項目實踐（超值版）
- 聚慕課教育研發中心
- 5059字
- 2019-12-06 15:23:49
第3章
感受JavaScript精彩——基礎入門
◎本章教學微視頻：17個 32分鐘
學習指引
無論是傳統編程語言，還是腳本語言，都有數據類型、常量和變量、注釋語句等基本元素，這些基本元素構成了編程基礎。本章將詳細介紹JavaScript的基礎入門知識，主要內容包括JavaScript的語法、變量、數據類型、關鍵字與保留字。
重點導讀
- 掌握JavaScript的語法知識。
- 掌握JavaScript的變量知識。
- 掌握JavaScript的數據類型。
- 掌握JavaScript的關鍵字。
- 掌握JavaScript的保留字。
3.1 JavaScript的語法
與C、Java及其他語言一樣，JavaScript也有自己的語法，但只要熟悉其他語言就會發現JavaScript的語法也是非常簡單的。
3.1.1 代碼執行順序
JavaScript程序按照在HTML文件中出現的順序逐行執行。如果需要在整個HTML文件中執行。最好將其放在HTML文件的<head>…</head>標簽當中。某些代碼，如函數體內的代碼，不會被立即執行，只有當所在的函數被其他程序調用時，該代碼才被執行。
3.1.2 區分大小寫
JavaScript對字母大小寫敏感，也就是說在輸入語言的關鍵字、函數、變量以及其他標識符時，一定要嚴格區分字母的大小寫。例如，變量username與變量userName是兩個不同的變量。
提示：HTML不區分大小寫。由于JavaScript與HTML緊密相關，這一點很容易混淆，許多JavaScript對象和屬性都與其代表的HTML標簽或屬性同名，在HTML中，這些名稱可以以任意的大小寫方式輸入而不會引起混亂，但在JavaScript中，這些名稱通常都是小寫的。例如，在HTML中的事件處理器屬性ONCLICK通常被聲明為onClick或Onclick，而在JavaScript中只能使用onclick。
3.1.3 分號與空格
在JavaScript語句當中，分號是可有可無的，這一點與Java語言不同，JavaScript并不要求每行必須以分號作為語句的結束標志。如果語句的結束處沒有分號，JavaScript會自動將該代碼的結尾作為語句的結尾。
例如，下面的兩行代碼書寫方式都是正確的：
提示：作為程序開發人員應養成良好的編程習慣，每條語句以分號作為結束標志以增強程序的可讀性，也可避免一些非主流瀏覽器的不兼容。
另外，JavaScript會忽略多余的空格，用戶可以向腳本添加空格來提高其可讀性。下面的兩行代碼是等效的：
3.1.4 代碼折行標準
當一段代碼比較長時，用戶可以在文本字符串中使用反斜杠對代碼行進行換行。下面的例子會正確地顯示：
不過，用戶不能像這樣折行：
3.1.5 注釋語句
與C、C++、Java、PHP相同，JavaScript的注釋分為兩種，其中一種是單行注釋，例如：
另一種是多行注釋，例如：
3.2 JavaScript的變量
變量是用來臨時存儲數值的容器。在程序中，變量存儲的數值是可以變化的，變量占據一段內存，通過變量的名字可以調用內存中的信息。
3.2.1 變量的聲明
盡管JavaScript是一種弱類型的腳本語言，變量可以在不聲明的情況下直接使用，但在實際使用過程中，最好還是先使用var關鍵字對變量進行聲明。聲明變量具有如下幾種規則。
- 可以使用一個關鍵字var同時聲明多個變量，如語句“var x,y;”就同時聲明了x和y兩個變量。
- 可以在聲明變量的同時對其賦值（稱為初始化），例如“var president = "henan";var x=5,y=12;”聲明了president、x和y3個變量，并分別對其進行了初始化。如果出現重復聲明的變量，且該變量已有一個初始值，則此時的聲明相當于對變量重新賦值。
- 如果只是聲明了變量，并未對其賦值，其值默認為undefined。
- var語句可以用作for循環和for…in循環的一部分，這樣可以使得循環變量的聲明成為循環語法自身的一部分，使用起來較為方便。
當給一個尚未聲明的變量賦值時，JavaScript會自動用該變量名創建一個全局變量。在一個函數內部，通常創建的只是一個僅在函數內部起作用的局部變量，而不是一個全局變量。要確保創建的是一個局部變量，而不僅僅是賦值給一個已經存在的局部變量，就必須使用var語句進行變量聲明。
注意：聲明JavaScript的變量時，不指定變量的數據類型。一個變量一旦聲明，可以存放任何數據類型的信息，JavaScript會根據存放信息的類型，自動為變量分配合適的數據類型。
3.2.2 變量的作用域
變量的作用范圍又稱為作用域，是指某變量在程序中的有效范圍。根據作用域的不同，變量可劃分為全局變量和局部變量。
- 全局變量：全局變量的作用域是全局性的。在整個JavaScript程序中，全局變量處處都存在。
- 局部變量：局部變量是函數內部聲明的，只作用于函數內部，其作用域是局部性的；函數的參數也是局部性的，只在函數內部起作用。
【例3-1】（實例文件：ch03\Chap3.1.html）變量定義示例。
相關的代碼示例請參考Chap3.1.html文件。在IE瀏覽器里面運行的結果如圖3-1所示，從結果中可以看到同一變量名具有不同的運行結果。
圖3-1 定義變量后的運行結果
3.2.3 變量的優先級
在函數內部，局部變量的優先級高于同名的全局變量。也就是說，如果存在與全局變量名稱相同的局部變量，或者在函數內部聲明了與全局變量同名的參數，則該全局變量將不再起作用。
【例3-2】（實例文件：ch03\Chap3.2.html）變量的優先級。
相關的代碼示例請參考Chap3.2.html文件，在IE瀏覽器里面運行的結果如圖3-2所示，從結果中可以看出輸入的是“局部變量”。
圖3-2 變量的優先級
注意：雖然在全局作用域中可以不使用var聲明變量，但聲明局部變量時，一定要使用var語句。
JavaScript沒有塊級作用域，函數中的所有變量無論是在哪里聲明的，在整個函數中都有意義。
【例3-3】（實例文件：ch03\Chap3.3.html）JavaScript無塊級作用域。
相關的代碼示例請參考Chap3.3.html文件，在IE瀏覽器里面運行的結果如圖3-3所示。
單擊“確定”按鈕，結果如圖3-4所示。
圖3-3 運行結果
圖3-4 局部變量
在本例中，用戶可能認為因為聲明局部變量的var語句還沒有執行而調用全局變量scope，但由于無塊級作用域的限制，局部變量在整個函數體內是有定義的。這就意味著在整個函數體中都隱藏了同名的全局變量，因此，輸出的并不是“全局變量”。雖然局部變量在整個函數體是都是有定義的，但在執行var語句之前不會被初始化。
3.3 JavaScript的數據類型
JavaScript中共有9種數據類型，分別是未定義（Undefined）、空（Null）、布爾型（Boolean）、字符串（String）、數值（Number）、對象（Object）、引用（Reference）、列表（List）和完成（Completion）。其中，后3種類型僅僅作為JavaScript運行時中間結果的數據類型，因此不能在代碼中使用，下面講解常用的數據類型。
3.3.1 未定義類型
Undefined是未定義類型的變量，表示變量還沒有賦值，如“var a;”，或者賦予一個不存在的屬性值，如var a=String.notProperty。
此外，JavaScript中有一種特殊類型的數字常量NaN，表示“非數字”，當在程序中由于某種原因發生計算錯誤后，將產生一個沒有意義的數字，此時JavaScript返回的數字值就是NaN。
【例3-4】（實例文件：ch03\Chap3.4.html）使用未定義類型。
相關的代碼示例請參考Chap3.4.html文件，在IE瀏覽器里面運行的結果如圖3-5所示。
圖3-5 使用Undefined運行結果
3.3.2 空類型
JavaScript中的關鍵字null是一個特殊的值，表示空值，用于定義空的或不存在的引用。不過，null不等同于空的字符串或0。由此可見，null與undefined的區別是：null表示一個變量被賦予了一個空值，而undefined則表示該變量還未被賦值。
【例3-5】（實例文件：ch03\Chap3.5.html）使用null。
相關的代碼示例請參考Chap3.5.html文件，在IE瀏覽器里面運行的結果如圖3-6所示。
圖3-6 使用空類型運行結果
3.3.3 布爾型
數值數據類型和字符串數據類型可能的值都無窮多，但布爾型數據類型只有兩個值，這兩個合法的值分別由true和false表示。一個布爾值代表的是一個“真值”，它說明了某個事物是真還是假。通常，我們使用1表示真，0表示假。布爾值通常是在JavaScript程序中比較所得的結果。
布爾類型的toString()方法只是輸出true或false，結果由變量的值決定，例如：
【例3-6】（實例文件：ch03\Chap3.6.html）使用布爾類型。
相關的代碼示例請參考Chap3.6.html文件，在IE瀏覽器里面運行的結果如圖3-7所示。
圖3-7 使用布爾型運行結果
3.3.4 字符串
字符串由零個或者多個字符構成，字符可以包括字母、數字、標點符號和空格、字符串必須放在單引號或者雙引號里。JavaScript字符串定義方法如下。
方法一：
方法二：
JavaScript字符串使用的注意事項如下。
- 字符串類型可以表示一串字符，如“www.haut.edu.cn”、'中國'。
- 字符串類型應使用雙引號(")或單引號(')引起來。
在寫JavaScript腳本時，可能會要在HTML文檔中顯示或使用某些特殊字符（如引號或斜線），例如<img src="image5.jpg">，但是前面提過，聲明一個字符串時，前后必須以引號括起來。如此一來，字符串當中引號可能會和標示字符串的引號搞混了，此時就要使用轉義字符（Escape Character）。
JavaScript使用8種轉義字符，這些字符都是以一個反斜線（\）開始。當JavaScript的解釋器（Interpreter）看到反斜線時，就會特別注意表現出程序員所要表達的意思。
表3-1列出了JavaScript的轉義序列以及它們所代表的字符。其中有兩個轉義序列是通用的，通過把Latin-1或Unicode字符編碼表示為十六進制數，它們可以表示任意字符。例如，轉義序列\xA9表示的是版權符號，它采用十六進制數A9表示Latin-1編碼。同樣地，\u表示的是由4位十六進制數指定的任意Unicode字符，如\u03c0表示的是字符π（圓周率）。
表3-1 JavaScript的轉義序列以及它們所代表的字符
注意，雖然ECMAScript v1標準要求使用Unicode字符轉義，但是JavaScript 1.3之前的版本通常不支持轉義符。有些JavaScript版本還允許用反斜線符號后加3位八進制數字來表示Latin-1字符，但是ECMAScript v3標準不支持這種轉義序列，所以不應該再使用它們。
1．字符串的使用
JavaScript的內部特性之一就是能夠連接字符串。如果將加號（+）運算符用于數字，那就是把兩個數字相加。但是，如果將它作用于字符串，它就會把這兩個字符串連接起來，將第二個字符串連接在第一個字符串之后，例如：
【例3-7】（實例文件：ch03\Chap3.7.html）連接字符串示例。
相關的代碼示例請參考Chap3.7.html文件。在IE瀏覽器里面運行的結果如圖3-8所示，從結果中可以看到字符串連接運行的結果。
圖3-8 字符串連接運行結果
如果想要確定一個字符串的長度（它包含字符的個數），用戶就可以使用字符串的length屬性，如果變量s包含一個字符串，可以使用如下方法訪問它的長度：s.length。
【例3-8】（實例文件：ch03\Chap3.8.html）獲取字符串長度。
相關的示例請參考Chap3.8.html文件。在IE瀏覽器里面運行的結果如圖3-9所示，從結果中可以看到字符串的長度已經被計算出來。
圖3-9 計算字符串的長度
根據字符串的length屬性，可以對其進行許多操作，例如，可以獲取字符串s的最后一個字符：
因為length是一個字符串的長度，即字符串的個數，而字符串中的首字符是從0開始的，所以最后一個字符在字符串中的位置為length-1。
2．字符串的大小寫轉換
使用字符串對象中的toLocaleLowerCase()、toLocaleUpperCase()、toLowerCase()、toUpperCase()方法可以轉換字符串的大小寫。這4種方法的語法格式如下：
【例3-9】（實例文件：ch03\Chap3.9.html）字符串大小轉換。
相關的代碼示例請參考Chap3.9.html文件，在IE瀏覽器里面運行的結果如圖3-10所示。
圖3-10 字符串大小轉換
3.3.5 數值類型
JavaScript的數值類型表示一個數字，如5、12、-5、2e5等。在JavaScript中，數值類型有正數、負數、指數等。
【例3-10】（實例文件：ch03\Chap310.html）輸出數值。
相關的代碼示例請參考Chap3.10.html文件，在IE瀏覽器里面運行的結果如圖3-11所示。
圖3-11 輸出數值
提示：JavaScript中只有一種數字類型，而且內部使用的是64位浮點型，等同于C#或Java中的double類型。
3.3.6 對象類型
Object是對象類型，該數據類型中包括Object、Function、String、Number、Boolean、Array、RegExp、Date、 Global、Math、Error，以及宿主環境提供的Object類型。
【例3-11】（實例文件：ch03\Chap3.11.html）Object數據類型的使用。
相關的代碼示例請參考Chap3.11.html文件，在IE瀏覽器里面運行的結果如圖3-12所示。
圖3-12 Object數據類型的使用
3.4 JavaScript的關鍵字
關鍵字標識了JavaScript語句的開頭或結尾。根據規定，關鍵字是保留的，不能用作變量名或函數名。表3-2所示為JavaScript中的關鍵字。
表3-2 JavaScript中的關鍵字
提示：JavaScript中的關鍵字是不能作為變量名和函數名使用的。
3.5 JavaScript的保留字
保留字在某種意義上是為將來的關鍵字而保留的單詞。因此，保留字不能被用作變量名或函數名。表3-3所示為JavaScript中的保留字。
表3-3 JavaScript中的保留字
提示：如果將保留字用作變量名或函數名，那么除非將來的瀏覽器實現了該保留字，否則很可能收不到任何錯誤消息。當瀏覽器將其實現后，該單詞將被看作關鍵字，如此將出現關鍵字錯誤。
3.6 典型案例——九九乘法表
下面是一個JavaScript綜合實例——九九乘法表。
【例3-12】（實例文件：ch03\Chap3.12.html）九九乘法表。
相關的示例請參考Chap3.12.html文件，在IE瀏覽器里面運行的結果如圖3-13所示。
圖3-13 九九乘法表
3.7 就業面試技巧與解析
3.7.1 面試技巧與解析（一）
面試官：你知道變量名有哪些命名規則嗎？
應聘者：就我個人理解，變量命名規則有以下幾種規則。
（1）變量名以字母、下畫線或美元符號（$）開頭。例如，txtName與_txtName都是合法的變量名，而1txtName和&txtName都是非法的變量名。
（2）變量名只能由字母、數字、下畫線和美元符號（$）組成，其中不能包含標點與運算符，不能用漢字做變量名。例如，txt%Name、名稱文本、txt-Name都是非法變量名。
（3）不能用JavaScript保留字做變量名。例如，var、enum、const都是非法變量名。
（4）JavaScript對大小寫敏感。例如，變量txtName與txtname是兩個不同的變量，兩個變量不能混用。
3.7.2 面試技巧與解析（二）
面試官：你知道聲明變量具有哪幾種規則嗎？
應聘者：就我個人理解，聲明變量有以下幾種規則。
（1）可以使用一個關鍵字var同時聲明多個變量，如語句“var x,y;”就同時聲明了x和y兩個變量。
（2）可以在聲明變量的同時對其賦值（稱為初始化），例如“var president = "henan";var x=5,y=12;”聲明了president、x和y3個變量，并分別對其進行了初始化。
（3）如果出現重復聲明的變量，且該變量已有一個初始值，則此時的聲明相當于對變量重新賦值。
（4）如果只是聲明了變量，并未對其賦值，其值默認為undefined。
（5）var語句可以用作for循環和for…in循環的一部分，這樣可使得循環變量的聲明成為循環語法自身的一部分，使用起來較為方便。
- The Supervised Learning Workshop
- Node.js+Webpack開發實戰
- Flask Blueprints
- Java 9 Programming Blueprints
- Building Cross-Platform Desktop Applications with Electron
- AppInventor實踐教程：Android智能應用開發前傳
- Teaching with Google Classroom
- BeagleBone Black Cookbook
- 持續輕量級Java EE開發：編寫可測試的代碼
- C#程序設計教程（第3版）
- Building Machine Learning Systems with Python（Second Edition）
- 機器學習微積分一本通（Python版）
- Android應用開發實戰
- 自己動手構建編程語言：如何設計編譯器、解釋器和DSL
- HTML5 and CSS3：Building Responsive Websites