js入門
數據介紹
JavaScript 有多種數據類型：數字，字符串，數組，對象等等：
JavaScript 字母大小寫
JavaScript 對大小寫是敏感的。
JavaScript 字符集
JavaScript 使用 Unicode 字符集。
關鍵字
| 1 | 2 | 3 | 4 |
|---|---|---|---|
| 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 語句。
通常我們在每條可執行的語句結尾添加分號。
使用分號的另一用處是在一行中編寫多條語句。
JavaScript 代碼塊
JavaScript 可以分批地組合起來。
代碼塊以左花括號開始，以右花括號結束。
代碼塊的作用是一併地執行語句序列。
本例向網頁輸出一個標題和兩個段落：
function myFunction()
{
document.getElementById("demo").innerHTML="你好Dolly";
document.getElementById("myDIV").innerHTML="你最近怎麼樣?";
}
語句標識符
| 語句 | 描述 |
|---|---|
| break | 用於跳出循環。 |
| catch | 語句塊，在 try 語句塊執行出錯時執行 catch 語句塊。 |
| continue | 跳過循環中的一個迭代。 |
| do … while | 執行一個語句塊，在條件語句爲 true 時繼續執行該語句塊。 |
| for | 在條件語句爲 true 時，可以將代碼塊執行指定的次數。 |
| for … in | 用於遍歷數組或者對象的屬性（對數組或者對象的屬性進行循環操作）。 |
| function | 定義一個函數 |
| if … else | 用於基於不同的條件來執行不同的動作。 |
| return | 退出函數 |
| switch | 用於基於不同的條件來執行不同的動作。 |
| throw | 拋出（生成）錯誤 。 |
| try | 實現錯誤處理，與 catch 一同使用。 |
| var | 聲明一個變量。 |
| while | 當條件語句爲 true 時，執行語句塊。 |
JavaSaript數據類型
值類型(基本類型)：字符串（String）、數字(Number)（只有一種類型，不區分int,float等）、布爾(Boolean)、對空（Null）、未定義（Undefined）、Symbol。
引用數據類型：對象(Object)、數組(Array)、函數(Function)。
java的變量是動態綁定的，所以存在賦值爲不同的類型參數的情況。
var x; // x 爲 undefined
var x = 5; // 現在 x 爲數字
var x = "John"; // 現在 x 爲字符串
undefined和null
Undefined 這個值表示變量不含有值。
可以通過將變量的值設置爲 null 來清空變量。
對象
在 JavaScript中，幾乎所有的事物都是對象。
定義一個對象
var person = {
firstName:"John", lastName:"Doe", age:50, eyeColor:"blue",
methodName : function() { code lines }
};
//訪問對象屬性
person.lastName;
person["lastName"];
//訪問對象方法
name = person.fullName();
對象屬性
可以說 “JavaScript 對象是變量的容器”。
但是，我們通常認爲 “JavaScript 對象是鍵值對的容器”。
鍵值對通常寫法爲 name : value (鍵與值以冒號分割)。
鍵值對在 JavaScript 對象通常稱爲 對象屬性。
對象鍵值對的寫法類似於：
- PHP 中的關聯數組
- Python 中的字典
- C 語言中的哈希表
- Java 中的哈希映射
- Ruby 和 Perl 中的哈希表
事件
HTML 事件可以是瀏覽器行爲，也可以是用戶行爲。
以下是 HTML 事件的實例：
HTML 頁面完成加載
HTML input 字段改變時
HTML 按鈕被點擊
常見事件
| 事件 | 描述符 |
|---|---|
| onchange | HTML 元素改變 |
| onclick | 用戶點擊 HTML 元素 |
| onmouseover | 用戶在一個HTML元素上移動鼠標 |
| onmouseout | 用戶從一個HTML元素上移開鼠標 |
| onkeydown | 用戶按下鍵盤按鍵 |
| onload | 瀏覽器已完成頁面的加載 |
字符串
特殊字符
| 代碼 | 輸出 |
|---|---|
| ’ | 單引號 |
| " | 雙引號 |
| \ | 反斜槓 |
| \n | 換行 |
| \r | 回車 |
| \t | tab(製表符) |
| \b | 退格符 |
| \f | 換頁符 |
屬性和方法
| 屬性/方法 | 描述 |
|---|---|
| constructor | 返回創建字符串屬性的函數 |
| length | 返回字符串的長度 |
| prototype | 允許您向對象添加屬性和方法 |
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 連接兩個或多個字符串，返回連接後的字符串 |
| fromCharCode() | 將 Unicode 轉換爲字符串 |
| indexOf() | 返回字符串中檢索指定字符第一次出現的位置 |
| lastIndexOf() | 返回字符串中檢索指定字符最後一次出現的位置 |
| localeCompare() | 用本地特定的順序來比較兩個字符串 |
| match() | 找到一個或多個正則表達式的匹配 |
| replace() | 替換與正則表達式匹配的子串 |
| search() | 檢索與正則表達式相匹配的值 |
| slice() | 提取字符串的片斷，並在新的字符串中返回被提取的部分 |
| split() | 把字符串分割爲子字符串數組 |
| substr() | 從起始索引號提取字符串中指定數目的字符 |
| substring() | 提取字符串中兩個指定的索引號之間的字符 |
| toLocaleLowerCase() | 根據主機的語言環境把字符串轉換爲小寫，只有幾種語言（如土耳其語）具有地方特有的大小寫映射 |
| toLocaleUpperCase() | 根據主機的語言環境把字符串轉換爲大寫，只有幾種語言（如土耳其語）具有地方特有的大小寫映射 |
| toLowerCase() | 把字符串轉換爲小寫 |
| toString() | 返回字符串對象值 |
| toUpperCase() | 把字符串轉換爲大寫 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某個字符串對象的原始值 |
比較運算符
假設x=5
| 運算符 | 描述 | 比較 | 返回值 |
|---|
數字
toString() 方法
toString() 以字符串返回數值。
所有數字方法可用於任意類型的數字（字面量、變量或表達式）：
實例
var x = 123;
x.toString(); // 從變量 x 返回 123
(123).toString(); // 從文本 123 返回 123
(100 + 23).toString(); // 從表達式 100 + 23 返回 12
toExponential() 方法
toExponential() 返回字符串值，它包含已被四捨五入並使用指數計數法的數字。
參數定義小數點後的字符數：
實例
var x = 9.656;
x.toExponential(2); // 返回 9.66e+0
x.toExponential(4); // 返回 9.6560e+0
x.toExponential(6); // 返回 9.656000e+0
toFixed() 方法
toFixed() 返回字符串值，它包含了指定位數小數的數字：
實例
var x = 9.656;
x.toFixed(0); // 返回 10
x.toFixed(2); // 返回 9.66
x.toFixed(4); // 返回 9.6560
x.toFixed(6); // 返回 9.656000
toFixed(2) 非常適合處理金錢。
toPrecision() 方法
toPrecision() 返回字符串值，它包含了指定長度的數字：
實例
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
x.toPrecision(4); // 返回 9.656
x.toPrecision(6); // 返回 9.65600
valueOf() 方法
valueOf() 以數值返回數值：
實例
var x = 123;
x.valueOf(); // 從變量 x 返回 123
(123).valueOf(); // 從文本 123 返回 123
(100 + 23).valueOf(); // 從表達式 100 + 23 返回 123
在 JavaScript 中，數字可以是原始值（typeof = number）或對象（typeof = object）。
在 JavaScript 內部使用 valueOf() 方法可將 Number 對象轉換爲原始值。
沒有理由在代碼中使用它。
所有 JavaScript 數據類型都有 valueOf() 和 toString() 方法。
把變量轉換爲數值
這三種 JavaScript 方法可用於將變量轉換爲數字：
Number() 返回數字，由其參數轉換而來。
parseFloat() 解析其參數並返回浮點數。
parseInt() 解析其參數並返回整數。
Number() 方法
Number() 可用於把 JavaScript 變量轉換爲數值：
實例
x = true;
Number(x); // 返回 1
x = false;
Number(x); // 返回 0
x = new Date();
Number(x); // 返回 1404568027739
x = "10"
Number(x); // 返回 10
x = "10 20"
Number(x); // 返回 NaN
如果無法轉換數字，則返回 NaN。
用於日期的 Number() 方法
Number() 還可以把日期轉換爲數字：
實例
Number(new Date("2019-04-15")); // 返回 1506729600000
上面的 Number() 方法返回 1970 年 1 月 1 日至今的毫秒數。
parseInt() 方法
parseInt() 解析一段字符串並返回數值。允許空格。只返回首個數字：
實例
parseInt("10"); // 返回 10
parseInt("10.33"); // 返回 10
parseInt("10 20 30"); // 返回 10
parseInt("10 years"); // 返回 10
parseInt("years 10"); // 返回 NaN
如果無法轉換爲數值，則返回 NaN (Not a Number)。
parseFloat() 方法
parseFloat() 解析一段字符串並返回數值。允許空格。只返回首個數字：
實例
parseFloat("10"); // 返回 10
parseFloat("10.33"); // 返回 10.33
parseFloat("10 20 30"); // 返回 10
parseFloat("10 years"); // 返回 10
parseFloat("years 10"); // 返回 NaN
親自試一試
如果無法轉換爲數值，則返回 NaN (Not a Number)。