41
技術社區[雲棲]
JS基礎知識概述
web頁麵的組成部分
HTML：定義了網頁的內容
CSS：描述了網頁的布局
JavaScript：網頁的行為
完整的JavaScript
完整的JavaScript實現包含三個部分：ECMAScript，DOM(文檔對象模型)和BOM(瀏覽器對象模型)
DOM (Document Object Model)（文檔對象模型）是用於訪問 HTML 元素的正式 W3C 標準
JavaScript 是腳本語言
1.JavaScript 是一種輕量級但功能強大的可插入 HTML 頁麵的編程語言,語法規則定義了語言結構;
2.JavaScript 插入 HTML 頁麵後，可由所有的現代瀏覽器執行
3.使用 JavaScript 來處理 HTML 內容是非常強大的功能；JavaScript 能夠改變任意 HTML 元素的大多數屬性
4.HTML 中的腳本必須位於 <script> </script> 標簽之間
5.JavaScript 對大小寫是敏感的；當編寫 JavaScript 語句時，請留意是否關閉大小寫切換鍵
6.腳本可位於 HTML 的
或 部分中，或者同時存在於兩個部分中;通常的做法是把函數放在頁麵底部。也可以把腳本保存到外部文件中；外部文件通常包含被多個網頁使用的代碼；外部 JavaScript 文件的文件擴展名是 .js；如需使用外部文件，請在<script> </script> 標簽的 "src" 屬性中設置該 .js 文件
js可以通過不同的方式來輸出數據
JavaScript 沒有任何打印或者輸出的函數
1.使用 document.write() 僅僅向文檔輸出寫內容；如果在文檔加載完成後使用該方法，會覆蓋整個文檔
2.使用 window.alert() 彈出警告框
3.使用 innerHTML 寫入到 HTML 元素
4.alert() 函數在 JavaScript 中並不常用，但它對於代碼測試非常方便
5.如果瀏覽器支持調試，可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值;瀏覽器中使用 F12 來啟用調試模式， 在調試窗口中點擊 "Console" 菜單
例子如下：
<script>
document.write(Date());
window.alert(5 + 6);
document.getElementById("demo").innerHTML = "段落已修改。"; //這個方法是 HTML DOM 中定義的；如需從JS訪問某個HTML元素，可使用 "id" 屬性來標識，並 innerHTML 來獲取或插入元素內容
console.log(c);//程序中調試是測試，查找及減少bug(錯誤)的過程
</script>
JavaScript 語法
JavaScript 字麵量
在編程語言中，一個字麵量是一個常量，如 3.14;JS字麵量包括：
1.數字（Number）字麵量 ：可以是整數或者是小數，或者是科學計數(e)
2.字符串（String）字麵量 ：可以使用單引號或雙引號
3.表達式字麵量 ：用於計算
4.數組（Array）字麵量 ：定義一個數組
5.對象（Object）字麵量 ：定義一個對象
6.函數（Function）字麵量 ：定義一個函數
JavaScript 變量
1.在編程語言中，變量是存儲信息的"容器"，用於存儲數據值
2.在 JavaScript 中創建變量通常稱為"聲明"變量；我們使用 var 關鍵詞來聲明變量；變量聲明之後，該變量是空的（沒有值）；如需向變量賦值，請使用等號；不過，您也可以在聲明變量時對其賦值；一個好的編程習慣是，在代碼開始處，統一對需要的變量進行聲明
3.可以在一條語句中聲明很多變量；該語句以 var 開頭，並使用逗號分隔變量即可，聲明也可橫跨多行
4.在計算機程序中，經常會聲明無值的變量。未使用值來聲明的變量，其值實際上是 undefined；如果重新聲明 JavaScript 變量，該變量的值不會丟失
5.變量是一個名稱，可以通過變量名訪問；在指令式語言中，變量通常是可變的。字麵量是一個恒定的值
6.變量可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age, sum, totalvolume）；變量一般以字母開頭，也能以 $ 和 _ 符號開頭（不過我們不推薦這麼做）
7.變量名稱對大小寫敏感（y 和 Y 是不同的變量）
8.JavaScript 中，變量常見的是駝峰法的命名規則，如 lastName (而不是lastname)
9.當向變量分配文本值時，應該用雙引號或單引號包圍這個值；當向變量賦的值是數值時，不要使用引號。如果用引號包圍數值，該值會被作為文本來處理
var lastname="Doe",age=30,
job="carpenter";
JavaScript 操作符
JavaScript使用 算術運算符 來計算值；使用賦值運算符給變量賦值
JavaScript語言有多種類型的運算符：
| Type | 實例 | 描述 |
|---|---|---|
| 賦值，算術和位運算符 | = + - * / << >> | 在 JS 運算符中描述 |
| 條件，比較及邏輯運算符 | == != < > | 在 JS 比較運算符中描述 |
JavaScript 語句
1.在 HTML 中，JavaScript 語句向瀏覽器發出的命令,告訴瀏覽器要做的事情;語句通常是用分號分隔的,在一行中可編寫多條語句；瀏覽器按照從上到下的順序執行JS語句
document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎麼樣?";
2.JavaScript 可以分批地組合起來；代碼塊以左花括號開始，以右花括號結束；代碼塊的作用是一並地執行語句序列
function myFunction(){
document.getElementById("demo").innerHTML="你好Dolly";
document.getElementById("myDIV").innerHTML="你最近怎麼樣?";
}
3.JavaScript 語句通常以一個 語句標識符 為開始，並執行該語句；語句標識符是保留關鍵字
JavaScript 語句標識符 (關鍵字) ：
| 語句 | 描述 |
|---|---|
| break | 用於跳出循環 |
| catch | 語句塊，在 try 語句塊執行出錯時執行 catch 語句塊 |
| continue | 跳過循環中的一個迭代 |
| do ... while | 執行一個語句塊，在條件語句為 true 時繼續執行該語句塊 |
| for | 在條件語句為 true 時，可以將代碼塊執行指定的次數 |
| for ... in | 用於遍曆數組或者對象的屬性(對數組或者對象的屬性進行循環操作) |
| function | 定義一個函數 |
| if ... else | 用於基於不同的條件來執行不同的動作 |
| return | 退出函數 |
| switch | 用於基於不同的條件來執行不同的動作 |
| throw | 拋出（生成）錯誤 |
| try | 實現錯誤處理，與 catch 一同使用 |
| var | 聲明一個變量 |
| while | 當條件語句為 true 時，執行語句塊 |
4.JavaScript 會忽略多餘的空格。可以向腳本添加空格，來提高其可讀性
5.可以在文本字符串中使用反斜杠對代碼行進行換行
document.write("你好 \
世界!");
JavaScript 關鍵詞
JavaScript 語句通常以關鍵詞為開頭。 例如：var 關鍵詞告訴瀏覽器創建一個新的變量
JavaScript 標識符
和其他任何編程語言一樣，JavaScript 保留了一些標識符和關鍵字為自己所用，這些關鍵字有些在當前的語言版本中並沒有使用，但在以後 JavaScript 擴展中會用到
JavaScript 標識符必須以字母、下劃線（_）或美元符（$）開始；後續的字符可以是字母、數字、下劃線或美元符（數字是不允許作為首字符出現的，以便 JavaScript 可以輕易區分開標識符和數字）
以下是 JavaScript 中最重要的保留字（按字母順序）：
abstract else instanceof super boolean enum int switch break export interface synchronized byte extends let this case false long throw catch final native throws char finally new transient class float null true const for package try continue function private typeof debugger goto protected var default if public void delete implements return volatile do import short while double in static with
JavaScript 注釋
1.我們可以添加注釋來對 JavaScript 進行解釋，或者提高代碼的可讀性;JavaScript 不會執行注釋
2.單行注釋以 // 開頭;多行注釋以 /* 開始，以 */ 結尾；我們一般把注釋放到代碼行的結尾處
3.注釋也可以用於阻止其中一條代碼行的執行（可用於調試）
JavaScript 數據類型
1.JavaScript 數據類型：字符串（String）、數字(Number)、布爾(Boolean)、數組(Array)、對象(Object)、空（Null）、未定義（Undefined）；編程語言中，數據類型是一個非常重要的內容。
2.JavaScript 擁有動態類型。這意味著相同的變量可用作不同的類型
3.字符串是存儲字符（比如 "Bill Gates"）的變量；字符串可以是引號中的任意文本；也可以使用引號，隻要不匹配包圍字符串的引號即可
4.JavaScript 隻有一種數字類型。數字可以帶小數點，也可以不帶；極大或極小的數字可以通過科學（指數）計數法來書寫
5.布爾（邏輯）隻能有兩個值：true 或 false；布爾常用在條件測試中
6.數組下標是基於零的，所以第一個項目是 [0]，第二個是 [1]，以此類推
7.對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義；屬性由逗號分隔；空格和折行無關緊要；聲明可橫跨多行；對象屬性有兩種尋址方式：
name=person.lastname
name=person["lastname"]
8.Undefined 這個值表示變量不含有值，可以通過將變量的值設置為 null 來清空變量
9.當您聲明新變量時，可以使用關鍵詞 "new" 來聲明其類型
10.JavaScript 變量均為對象。當您聲明一個變量時，就創建了一個新的對象
JavaScript 函數
1.函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊；函數就是包裹在花括號中的代碼塊，前麵使用了關鍵詞 function；當調用該函數時，會執行函數內的代碼；可以在某事件發生時直接調用函數（比如當用戶點擊按鈕時），並且可由 JavaScript 在任何位置進行調用
2.JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫的，並且必須以與函數名稱相同的大小寫來調用函數
3.在調用函數時，您可以向其傳遞值，這些值被稱為參數，這些參數可以在函數中使用；您可以發送任意多的參數，由逗號 (,) 分隔；當您聲明函數時，要把參數作為變量來聲明；變量和參數必須以一致的順序出現，第一個變量就是第一個被傳遞的參數的給定的值，以此類推；函數很靈活，您可以使用不同的參數來調用該函數，這樣就會給出不同的消息
4.有時，我們會希望函數將值返回調用它的地方，通過使用 return 語句就可以實現；在使用 return 語句時，函數會停止執行，並返回指定的值；但此時整個 JavaScript 並不會停止執行，僅僅是函數。JavaScript 將繼續執行代碼，從調用函數的地方，函數調用被返回值取代
5.在 JavaScript 函數內部聲明的變量（使用 var）是局部變量，所以隻能在函數內部訪問它。（該變量的作用域是局部的）。可以在不同的函數中使用名稱相同的局部變量，因為隻有聲明過該變量的函數才能識別出該變量。
隻要函數運行完畢，本地變量就會被刪除
6.在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它；如果把值賦給尚未聲明的變量，該變量將被自動作為全局變量聲明
7.JavaScript 變量的生命期從它們被聲明的時間開始；局部變量會在函數運行以後被刪除；全局變量會在頁麵關閉後被刪除
JavaScript 字符集
JavaScript 使用 Unicode 字符集；Unicode 覆蓋了所有的字符，包含標點等字符;Unicode 使文本的處理、存儲和運輸，獨立於平台和語言
Unicode 可以由不同的字符集實現。最常用的編碼是 UTF-8 和 UTF-16
| 字符集 | 描述 |
|---|---|
| UTF-8 | UTF8 中的字符是1到4字節長,可以代表Unicod 標準中的任何字符;UTF-8向後兼容 ASCII, 是電子郵件和網頁的首選編碼 |
| UTF-16 | 16位Unicode轉換格式是一種可變長度的Unicode字符編碼,能編碼整個Unicode指令表,主要用於操作係統和環境，如 Microsoft Windows、Java 和 .NET |
Unicode的前128個字符（與 ASCII 一一對應）使用一個與 ASCII二進製值相同的八位組進行編碼，使有效的 ASCII 文本在進行 UTF-8 編碼時也是有效的;所有的 HTML 4 處理器支持 UTF-8，所有的 HTML 5 和 XML 處理器支持 UTF-8 和 UTF-16
HTML5 中默認的字符編碼是 UTF-8
最後更新：2017-04-26 18:00:56