用JavaScript輸出文本
<p>我的第一個段落。</p> <script> document.write(Date()); </script>
<script> document.write("<h1>這是一個標題</h1>"); document.write("<p>這是一個段落</p>"); </script>
用JavaScript改變文本元素
----------------------------------------------------
-----------------------------------------------------------
<p id="demo">我的第一個段落啊啊啊。</p> <script> document.getElementById("demo").innerHTML="段落已修改。"; </script>
一個外部的JavaScript
-----------------------------------------------------------
<p id="demo">一個段落。</p> <button type="button" onclick="myFunction()">點擊這里</button> <p><b>注釋：</b>myFunction 保存在名為 "myScript.js" 的外部文件中。</p> <script src="myScript.js"></script>
外部腳本不能包含 <script> 標簽
-----------------------------------------------------------
-----------------------------------------------------------
JavaScript 輸出
JavaScript 沒有任何打印或者輸出的函數。
JavaScript 顯示數據
JavaScript 可以通過不同的方式來輸出數據：
- 使用 window.alert() 彈出警告框。
- 使用 document.write() 方法將內容寫到 HTML 文檔中。
- 使用 innerHTML 寫入到 HTML 元素。
- 使用 console.log() 寫入到瀏覽器的控制台。
(1)使用window.alert(); 彈出警告框
-
<body> <h1>我的第一個頁面</h1> <p>我的第一個段落。</p> <script> window.alert(5 + 6); </script> </body>
操作 HTML 元素
如需從 JavaScript 訪問某個 HTML 元素，您可以使用 document.getElementById(id) 方法。
請使用 "id" 屬性來標識 HTML 元素，並 innerHTML 來獲取或插入元素內容：
實例
<!DOCTYPE html> <html> <body> <h1>我的第一個 Web 頁面</h1> <p id="demo">我的第一個段落</p> <script> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html>
document.getElementById("demo") 是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼 。
innerHTML = "段落已修改。" 是用於修改元素的 HTML 內容(innerHTML)的 JavaScript 代碼
---------------------------------------------------------------------------------------------------------------------------
直接在<script>中寫一個函數
<!DOCTYPE html> <html> <body> <h1>我的第一個 Web 頁面</h1> <p>我的第一個段落。</p> <button onclick="myFunction()">點我</button> <script> function myFunction() { document.write(Date()); } </script> </body> </html>
-----------------------------------------------------------------------------------------------------------------------
寫到控制台
如果您的瀏覽器支持調試，你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。
瀏覽器中使用 F12 來啟用調試模式， 在調試窗口中點擊 "Console" 菜單。
<!DOCTYPE html> <html> <body> <h1>我的第一個 Web 頁面</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
JavaScript 語法
JavaScript 是一個腳本語言。
它是一個輕量級，但功能強大的編程語言。
JavaScript 字面量
在編程語言中，一個字面量是一個常量，如 3.14。
數字（Number）字面量 可以是整數或者是小數，或者是科學計數(e)。
1001
123e5
字符串（String）字面量 可以使用單引號或雙引號:
'John Doe'
表達式字面量 用於計算：
5 * 10
數組（Array）字面量 定義一個數組：
對象（Object）字面量 定義一個對象：
函數（Function）字面量 定義一個函數：
JavaScript 變量
在編程語言中，變量用於存儲數據值。
JavaScript 使用關鍵字 var 來定義變量， 使用等號來為變量賦值：
x = 5
length = 6
變量可以通過變量名訪問。在指令式語言中，變量通常是可變的。字面量是一個恆定的值。
|
變量是一個名稱。字面量是一個值。 |
|---|
JavaScript 操作符
JavaScript使用 算術運算符 來計算值:
JavaScript使用賦值運算符給變量賦值：
y = 6
z = (x + y) * 10
JavaScript語言有多種類型的運算符：
| 類型 | 實例 | 描述 |
|---|---|---|
| 賦值，算術和位運算符 | = + - * / | 在 JS 運算符中描述 |
| 條件，比較及邏輯運算符 | == != < > | 在 JS 比較運算符中描述 |
JavaScript 語句
在 HTML 中，JavaScript 語句向瀏覽器發出的命令。
語句是用分號分隔：
y = x * 10;
JavaScript 關鍵字
JavaScript 關鍵字用於標識要執行的操作。
和其他任何編程語言一樣，JavaScript 保留了一些關鍵字為自己所用。
var 關鍵字告訴瀏覽器創建一個新的變量：
var y = x * 10;
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 注釋
不是所有的 JavaScript 語句都是"命令"。雙斜杠 // 后的內容將會被瀏覽器忽略：
JavaScript 數據類型
JavaScript 有多種數據類型：數字，字符串，數組，對象等等：
var points = x * 10; // Number 通過表達式字面量賦值
var lastName = "Johnson"; // String 通過字符串字面量賦值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通過數組字面量賦值
var person = {firstName:"John", lastName:"Doe"}; // Object 通過對象字面量賦值
數據類型的概念
編程語言中，數據類型是一個非常重要的內容。
為了可以操作變量，了解數據類型的概念非常重要。
如果沒有使用數據類型，以下實例將無法執行：
16 加上 "Volvo" 是如何計算呢? 以上會產生一個錯誤還是輸出以下結果呢？
你可以在瀏覽器嘗試執行以上代碼查看效果。
在接下來的章節中你將學到更多關於數據類型的知識。
JavaScript 函數
JavaScript 語句可以寫在函數內，函數可以重復引用：
引用一個函數 = 調用函數(執行函數內的語句)。
return a * b; // 返回 a 乘於 b 的結果
}
JavaScript 字母大小寫
JavaScript 對大小寫是敏感的。
當編寫 JavaScript 語句時，請留意是否關閉大小寫切換鍵。
函數 getElementById 與 getElementbyID 是不同的。
同樣，變量 myVariable 與 MyVariable 也是不同的。
JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆蓋了所有的字符，包含標點等字符。
您知道嗎?
| |
JavaScript 中，常見的是駝峰法的命名規則，如 lastName (而不是lastname)。 |
|---|
JavaScript 語句
JavaScript 語句是發給瀏覽器的命令。
下面的 JavaScript 語句向 id="demo" 的 HTML 元素輸出文本 "你好 Dolly" ：
實例
分號 ;
分號用於分隔 JavaScript 語句。
通常我們在每條可執行的語句結尾添加分號。
也可能看到不帶有分號的案例。
在 JavaScript 中，用分號來結束語句是可選的。
JavaScript 代碼塊
JavaScript 可以分批地組合起來。
<h1>我的 Web 頁面</h1> <p id="myPar">我是一個段落。</p> <div id="myDiv">我是一個div。</div> <p> <button type="button" onclick="myFunction()">點擊這里</button> </p> <script> function myFunction(){ document.getElementById("myPar").innerHTML="你好世界！"; document.getElementById("myDiv").innerHTML="你最近怎么樣?"; } </script> <p>當您點擊上面的按鈕時，兩個元素會改變。</p>
------------------------------------------------------------------------------------------------------------------------------
JavaScript 語句標識符
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 時，執行語句塊。 |
空格
JavaScript 會忽略多余的空格。您可以向腳本添加空格，來提高其可讀性。下面的兩行代碼是等效的：
var person = "Hege";
對代碼行進行折行
您可以在文本字符串中使用反斜杠對代碼行進行換行。下面的例子會正確地顯示：
世界!");
不過，您不能像這樣折行：
document.write \
("你好世界!")
提示：JavaScript 是腳本語言。瀏覽器會在讀取代碼時，逐行地執行腳本代碼。而對於傳統編程來說，會在執行前對所有代碼進行編譯。
JavaScript 注釋
JavaScript 不會執行注釋。
單行注釋以 // 開頭。
多行注釋以 /* 開始，以 */ 結尾。
JavaScript 變量
與代數一樣，JavaScript 變量可用於存放值（比如 x=5）和表達式（比如 z=x+y）。
變量可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age, sum, totalvolume）。
- 變量必須以字母開頭
- 變量也能以 $ 和 _ 符號開頭（不過我們不推薦這么做）
- 變量名稱對大小寫敏感（y 和 Y 是不同的變量）
JavaScript 語句和 JavaScript 變量都對大小寫敏感。
var y=6;
var z=x+y;
實例
當向變量賦的值是數值時，不要使用引號。如果您用引號包圍數值，該值會被作為文本來處理。
var pi=3.14;var person="John Doe";
var answer='Yes I am!';
聲明（創建） JavaScript 變量
在 JavaScript 中創建變量通常稱為"聲明"變量。
我們使用 var 關鍵詞來聲明變量：
變量聲明之后，該變量是空的（它沒有值）。
如需向變量賦值，請使用等號：
不過，您也可以在聲明變量時對其賦值：
一條語句，多個變量
您可以在一條語句中聲明很多變量。該語句以 var 開頭，並使用逗號分隔變量即可：
聲明也可橫跨多行：
age=30,
job="carpenter";
重新聲明 JavaScript 變量
如果重新聲明 JavaScript 變量，該變量的值不會丟失：
在以下兩條語句執行后，變量 carname 的值依然是 "Volvo"：
var carname;
JavaScript 數據類型
字符串（String）、數字(Number)、布爾(Boolean)、數組(Array)、對象(Object)、空（Null）、未定義（Undefined）JavaScript 擁有動態類型。這意味着相同的變量可用作不同的類型：
實例
var x = 5; // 現在 x 為數字
var x = "John"; // 現在 x 變成為字符串
JavaScript 字符串
字符串是存儲字符（比如 "Bill Gates"）的變量。
字符串可以是引號中的任意文本。您可以使用單引號或雙引號：
var carname="Volvo XC60";
var carname='Volvo XC60';
var sln=carname.length; //字符串的長度
可以在字符串中使用引號，只要不匹配包圍字符串的引號即可：
實例
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"'
JavaScript 數字
JavaScript 只有一種數字類型。數字可以帶小數點，也可以不帶：
實例
var x2=34; // //不使用小數點來寫
極大或極小的數字可以通過科學（指數）計數法來書寫：
實例
var z=123e-5; // 0.00123
JavaScript 布爾
布爾（邏輯）只能有兩個值：true 或 false。
var y=false;
布爾常用在條件測試中。您將在本教程稍后的章節中學到更多關於條件測試的知識。
JavaScript 數組
下面的代碼創建名為 cars 的數組：
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
或者 (condensed array):
或者 (literal array):
實例
JavaScript 對象
對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：
上面例子中的對象 (person) 有三個屬性：firstname、lastname 以及 id。
空格和折行無關緊要。聲明可橫跨多行：
firstname : "John",
lastname : "Doe",
id : 5566
};
對象屬性有兩種尋址方式：
實例
name=person["lastname"];
Undefined 和 Null
Undefined 這個值表示變量不含有值。
可以通過將變量的值設置為 null 來清空變量。
實例
person=null;
當您聲明新變量時，可以使用關鍵詞 "new" 來聲明其類型：
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
JavaScript 變量均為對象。當您聲明一個變量時，就創建了一個新的對象
JavaScript 對象
在 JavaScript中，幾乎所有的事物都是對象。
對象也是一個變量，但對象可以包含多個值（多個變量）。
JavaScript 對象是變量的容器。
對象定義
你可以使用字符來定義和創建 JavaScript 對象:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"bl};訪問對象方法
你可以使用以下語法創建對象方法：
你可以使用以下語法訪問對象方法：
JavaScript 函數
函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊。
//帶參數的訪問 <button onclick="myFunction('zhangzhiqiang','program engineer')">點擊這里</button> script> function myFunction(name,job){ alert("Welcome " + name + ", the " + job); } </script>
局部 JavaScript 變量
在 JavaScript 函數內部聲明的變量（使用 var）是局部變量，所以只能在函數內部訪問它。（該變量的作用域是局部的）。
您可以在不同的函數中使用名稱相同的局部變量，因為只有聲明過該變量的函數才能識別出該變量。
只要函數運行完畢，本地變量就會被刪除。
全局 JavaScript 變量
在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它。
JavaScript 變量的生存期
JavaScript 變量的生命期從它們被聲明的時間開始。
局部變量會在函數運行以后被刪除。
全局變量會在頁面關閉后被刪除。
向未聲明的 JavaScript 變量分配值
如果您把值賦給尚未聲明的變量，該變量將被自動作為全局變量聲明。
這條語句：
將聲明一個全局變量 carname，即使它在函數內執行。
JavaScript 事件
HTML 事件是發生在 HTML 元素上的事情。
當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。
HTML 事件
HTML 事件可以是瀏覽器行為，也可以是用戶行為。
以下是 HTML 事件的實例：
- HTML 頁面完成加載
- HTML input 字段改變時
- HTML 按鈕被點擊
通常，當事件發生時，你可以做些事情。
在事件觸發時 JavaScript 可以執行一些代碼。
<button onclick="getElementById('demo').innerHTML=Date()">現在的時間是?</button>
<p id="demo"></p>
常見的HTML事件
下面是一些常見的HTML事件的列表:
事件 描述
onchange HTML 元素改變
onclick 用戶點擊 HTML 元素
onmouseover 用戶在一個HTML元素上移動鼠標
onmouseout 用戶從一個HTML元素上移開鼠標
onkeydown 用戶按下鍵盤按鍵
onload 瀏覽器已完成頁面的加載
更多事件列表: JavaScript 參考手冊 - HTML DOM 事件。
JavaScript 可以做什么?
事件可以用於處理表單驗證，用戶輸入，用戶行為及瀏覽器動作:
- 頁面加載時觸發事件
- 頁面關閉時觸發事件
- 用戶點擊按鈕執行動作
- 驗證用戶輸入內容的合法性
- 等等 ...
可以使用多種方法來執行 JavaScript 事件代碼：
- HTML 事件屬性可以直接執行 JavaScript 代碼
- HTML 事件屬性可以調用 JavaScript 函數
- 你可以為 HTML 元素指定自己的事件處理程序
- 你可以阻止事件的發生。
- 等等 ...
JavaScript 字符串
var carname = 'Volvo XC60';
你可以使用索引位置來訪問字符串中的每個字符：
實例
字符串長度
可以使用內置屬性 length 來計算字符串的長度：
實例
var sln = txt.length;
特殊字符
在 JavaScript 中，字符串寫在單引號或雙引號來中
代碼 輸出
\' 單引號
\" 雙引號
\\ 反斜杠
\n 換行
\r 回車
\t tab(制表符)
\b 退格符
\f 換頁符
字符串屬性和方法
原始值字符串，如 "John", 沒有屬性和方法(因為他們不是對象)。
原始值可以使用 JavaScript 的屬性和方法，因為 JavaScript 在執行方法和屬性時可以把原始值當作對象。
字符串屬性
屬性 描述
constructor 返回創建字符串屬性的函數
length 返回字符串的長度
prototype 允許您向對象添加屬性和方法
字符串方法
JavaScript typeof, null, 和 undefined
typeof 操作符
你可以使用 typeof 操作符來檢測變量的數據類型。
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
在JavaScript中，數組是一種特殊的對象類型。 因此 typeof [1,2,3,4] 返回 object
Null
在 JavaScript 中 null 表示 "什么都沒有"。
null是一個只有一個值的特殊類型。表示一個空對象引用。
用 typeof 檢測 null 返回是object
你可以設置為 null 來清空對象:
var person = null; // 值為 null(空), 但類型為對象
Undefined
在 JavaScript 中, undefined 是一個沒有設置值的變量。
typeof 一個沒有值的變量會返回 undefined。
任何變量都可以通過設置值為 undefined 來清空。 類型為 undefined.
實例
Undefined 和 Null 的區別
typeof null // object
null === undefined // false
null == undefined // true
JavaScript 數據類型
在 JavaScript 中有 5 種不同的數據類型：
- string
- number
- boolean
- object
- function
3 種對象類型：
- Object
- Date
- Array
2 個不包含任何值的數據類型：
- null
- undefined
-
請注意：
- NaN 的數據類型是 number
- 數組(Array)的數據類型是 object
- 日期(Date)的數據類型為 object
- null 的數據類型是 object
- 未定義變量的數據類型為 undefined
如果對象是 JavaScript Array 或 JavaScript Date ，我們就無法通過 typeof 來判斷他們的類型，因為都是 返回 Object。
JavaScript 類型轉換
JavaScript 變量可以轉換為新變量或其他數據類型：
- 通過使用 JavaScript 函數
- 通過 JavaScript 自身自動轉換
將數字轉換為字符串
全局方法 String() 可以將數字轉換為字符串。
該方法可用於任何類型的數字，字母，變量，表達式：
String(123) // 將數字 123 轉換為字符串並返回
String(100 + 23) // 將數字表達式轉換為字符串並返回
Number 方法 toString() 也是有同樣的效果
toExponential() 把對象的值轉換為指數計數法。
toFixed() 把數字轉換為字符串，結果的小數點后有指定位數的數字。
toPrecision() 把數字格式化為指定的長度。
將布爾值轉換為字符串
全局方法 String() 可以將布爾值轉換為字符串。
String(true) // 返回 "true"
Boolean 方法 toString() 也有相同的效果。
true.toString() // 返回 "true"
將日期轉換為字符串
全局方法 String() 可以將日期轉換為字符串。
Date 方法 toString() 也有相同的效果。
實例
將字符串轉換為數字
全局方法 Number() 可以將字符串轉換為數字。
字符串包含數字(如 "3.14") 轉換為數字 (如 3.14).
空字符串轉換為 0。
其他的字符串會轉換為 NaN (不是個數字)。
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
parseFloat() 解析一個字符串，並返回一個浮點數。
一元運算符 +
Operator + 可用於將變量轉換為數字：
實例
var x = + y; // x 是一個數字
如果變量不能轉換，它仍然會是一個數字，但值為 NaN (不是一個數字):
實例
var x = + y; // x 是一個數字 (NaN)
parseInt() 解析一個字符串，並返回一個整數。
將布爾值轉換為數字
全局方法 Number() 可將布爾值轉換為數字。
Number(true) // 返回 1
將日期轉換為數字
全局方法 Number() 可將日期轉換為數字。
Number(d) // 返回 1404568027739
日期方法 getTime() 也有相同的效果。
d.getTime() // 返回 1404568027739
自動轉換類型
當 JavaScript 嘗試操作一個 "錯誤" 的數據類型時，會自動轉換為 "正確" 的數據類型。
以下輸出結果不是你所期望的：
"5" + null // 返回"5null" null 轉換為 "null"
"5" + 1 // 返回 "51" 1 轉換為 "1"
"5" - 1 // 返回 4 "5" 轉換為 5
自動轉換為字符串
當你嘗試輸出一個對象或一個變量時 JavaScript 會自動調用變量的 toString() 方法：
// if myVar = {name:"Fjohn"} // toString 轉換為 "[object Object]"
// if myVar = [1,2,3,4] // toString 轉換為 "1,2,3,4"
// if myVar = new Date() // toString 轉換為 "Fri Jul 18 2014 09:08:55 GMT+0200"
數字和布爾值也經常相互轉換：
// if myVar = true // toString 轉換為 "true"
// if myVar = false // toString 轉換為 "false"
JavaScript 正則表達式
正則表達式（英語：Regular Expression，在代碼中常簡寫為regex、regexp或RE）使用單個字符串來描述、匹配一系列符合某個句法規則的字符串搜索模式。
搜索模式可用於文本搜索和文本替換使用字符串方法
在 JavaScript 中，正則表達式通常用於兩個字符串方法 : search() 和 replace()。
search() 方法 用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，並返回子串的起始位置。
replace() 方法 用於在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串使用正則表達式搜索 "Runoob" 字符串，且不區分大小寫：
replace() 方法使用正則表達式
實例
使用正則表達式且不區分大小寫將字符串中的 Microsoft 替換為 Runoob :
結果輸出為:
replace() 方法使用字符串
replace() 方法將接收字符串作為參數：
正則表達式修飾符
修飾符 可以在全局搜索中不區分大小寫:
修飾符 描述
i 執行對大小寫不敏感的匹配。
g 執行全局匹配（查找所有匹配而非在找到第一個匹配后停止）。
m 執行多行匹配。
正則表達式模式
方括號用於查找某個范圍內的字符：
表達式 描述
[abc] 查找方括號之間的任何字符。
[0-9] 查找任何從 0 至 9 的數字。
(x|y) 查找任何以 | 分隔的選項。
元字符是擁有特殊含義的字符：
元字符 描述
\d 查找數字。
\s 查找空白字符。
\b 匹配單詞邊界。
\uxxxx 查找以十六進制數 xxxx 規定的 Unicode 字符。
量詞:
量詞 描述
n+ 匹配任何包含至少一個 n 的字符串。
n* 匹配任何包含零個或多個 n 的字符串。
n? 匹配任何包含零個或一個 n 的字符串。
使用 RegExp 對象
在 JavaScript 中，RegExp 對象是一個預定義了屬性和方法的正則表達式對象。
使用 test()
test() 方法是一個正則表達式方法。
test() 方法用於檢測一個字符串是否匹配某個模式，如果字符串中含有匹配的文本，則返回 true，否則返回 false。
以下實例用於搜索字符串中的字符 "e"：
var patt = /e/;
patt.test("The best things in life are free!");
使用 exec()
exec() 方法是一個正則表達式方法。
exec() 方法用於檢索字符串中的正則表達式的匹配。
該函數返回一個數組，其中存放匹配的結果。如果未找到匹配，則返回值為 null。
以下實例用於搜索字符串中的字母 "e":
Example 1
字符串中含有 "e"，所以該實例輸出為:
JavaScript 嚴格模式(use strict)
JavaScript 嚴格模式（strict mode）即在嚴格的條件下運行。
使用 "use strict" 指令
"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一條語句，但是是一個字面量表達式，在 JavaScript 舊版本中會被忽略。
"use strict" 的目的是指定代碼在嚴格條件下執行。
嚴格模式下你不能使用未聲明的變量 支持嚴格模式的瀏覽器:
Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 Safari 5.1+、 Opera 12+。
為什么使用嚴格模式:
-
消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
- 消除代碼運行的一些不安全之處，保證代碼運行的安全；
- 提高編譯器效率，增加運行速度；
- 為未來新版本的Javascript做好鋪墊。
嚴格模式的限制
不允許使用未聲明的變量：
"use strict";
x = 3.14; // 報錯 (x 未定義)
不允許刪除變量或對象。
var x = 3.14;
delete x; // 報錯
不允許刪除函數。
function x(p1, p2) {};
delete x; // 報錯
不允許變量重名:
function x(p1, p1) {}; // 報錯
不允許使用八進制:
var x = 010; // 報錯
不允許使用轉義字符:
var x = \010; // 報錯
不允許對只讀屬性賦值:
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14; // 報錯
不允許對一個使用getter方法讀取的屬性進行賦值
var obj = {get x() {return 0} };
obj.x = 3.14; // 報錯
不允許刪除一個不允許刪除的屬性：
delete Object.prototype; // 報錯
變量名不能使用 "eval" 字符串:
var eval = 3.14; // 報錯
變量名不能使用 "arguments" 字符串:
var arguments = 3.14; // 報錯
不允許使用以下這種語句:
with (Math){x = cos(2)}; // 報錯
由於一些安全原因，在作用域 eval() 創建的變量不能被調用：
eval ("var x = 2");
alert (x); // 報錯
禁止this關鍵字指向全局對象。
function f(){ return !this; } // 返回false，因為"this"指向全局對象，"!this"就是false function f(){ "use strict"; return !this; } // 返回true，因為嚴格模式下，this的值為undefined，所以"!this"為true。
因此，使用構造函數時，如果忘了加new，this不再指向全局對象，而是報錯。
function f(){ "use strict"; this.a = 1; }; f();// 報錯，this未定義
JavaScript 表單驗證
HTML 表單驗證可以通過 JavaScript 來完成。
以下實例代碼用於判斷表單字段(fname)值是否存在，如果存在，則彈出信息，否則阻止表單提交：
<script> function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要輸入名字。"); return false; } } </script> </head> <body> <form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form>
JavaScript 驗證輸入的數字
JavaScript 常用於對輸入數字的驗證：
請輸入 1 到 10 之間的數字：
提交<input id="numb"> <button type="button" onclick="myFunction()">提交</button> <p id="demo"></p> <script> function myFunction() { var x, text; // 獲取 id="numb" 的值 x = document.getElementById("numb").value; // 如果輸入的值 x 不是數字或者小於 1 或者大於 10，則提示錯誤 Not a Number or less than one or greater than 10 if (isNaN(x) || x < 1 || x > 10) { text = "輸入錯誤"; } else { text = "輸入正確"; } document.getElementById("demo").innerHTML = text; } </script>
HTML 表單自動驗證
HTML 表單驗證也可以通過瀏覽器來自動完成。
如果表單字段 (fname) 的值為空, required 屬性會阻止表單提交：
實例
<form action="demo_form.php" method="post"> <input type="text" name="fname" required> <input type="submit" value="提交"> </form>
HTML5 新增了 HTML 表單的驗證方式：約束驗證（constraint validation）。
約束驗證是表單被提交時瀏覽器用來實現驗證的一種算法。
HTML 約束驗證基於：
- HTML 輸入屬性
- CSS 偽類選擇器
- DOM 屬性和方法
約束驗證 HTML 輸入屬性
屬性 描述
disabled 規定輸入的元素不可用
max 規定輸入元素的最大值
min 規定輸入元素的最小值
pattern 規定輸入元素值的模式
required 規定輸入元素字段是必需的
type 規則輸入元素的類型
約束驗證 CSS 偽類選擇器
選擇器 描述
:disabled 選取屬性為 "disabled" 屬性的 input 元素
:invalid 選取無效的 input 元素
:optional 選擇沒有"required"屬性的 input 元素
:required 選擇有"required"屬性的 input 元素
:valid 選取有效值的 input 元素
JavaScript 表單驗證
JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。
表單數據經常需要使用 JavaScript 來驗證其正確性：
- 驗證表單數據是否為空？
- 驗證輸入是否是一個正確的email地址？
- 驗證日期是否輸入正確？
- 驗證表單輸入內容是否為數字型？
-
必填（或必選）項目
下面的函數用來檢查用戶是否已填寫表單中的必填（或必選）項目。假如必填或必選項為空，那么警告框會彈出，並且函數的返回值為 false，否則函數的返回值則為 true（意味着數據沒有問題）：
以上函數在 form 表單提交時被調用:function validateForm(){ var x=document.forms["myForm"]["fname"].value;if (x==null || x==""){alert("姓必須填寫"); return false;}}<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post"> 姓: <input type="text" name="fname"> <input type="submit" value="提交"> </form>E-mail 驗證
下面的函數檢查輸入的數據是否符合電子郵件地址的基本語法。
意思就是說，輸入的數據必須包含 @ 符號和點號(.)。同時，@ 不可以是郵件地址的首字符，並且 @ 之后需有至少一個點號：
function validateForm(){ var x=document.forms["myForm"]["email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){ alert("不是一個有效的 e-mail 地址"); return false; } } <form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post"> Email: <input type="text" name="email"> <input type="submit" value="提交"> </form>
JavaScript 驗證 API
約束驗證 DOM 方法
Property Description
checkValidity() 如果 input 元素中的數據是合法的返回 true，否則返回 false。
setCustomValidity() 設置 input 元素的 validationMessage 屬性，用於自定義錯誤提示信息的方法以下實例如果輸入信息不合法，則返回錯誤信息
checkValidity() 方法
<input id="id1" type="number" min="100" max="300" required> <button onclick="myFunction()">驗證</button> <p id="demo"></p> <script> function myFunction() { var inpObj = document.getElementById("id1"); if (inpObj.checkValidity() == false) { document.getElementById("demo").innerHTML = inpObj.validationMessage; } } </script>約束驗證 DOM 屬性
屬性 描述
validity 布爾屬性值，返回 input 輸入值是否合法
validationMessage 瀏覽器錯誤提示信息
willValidate 指定 input 是否需要驗證Validity 屬性
input 元素的 validity 屬性包含一系列關於 validity 數據屬性:
屬性 描述
customError 設置為 true, 如果設置了自定義的 validity 信息。
patternMismatch 設置為 true, 如果元素的值不匹配它的模式屬性。
rangeOverflow 設置為 true, 如果元素的值大於設置的最大值。
rangeUnderflow 設置為 true, 如果元素的值小於它的最小值。
stepMismatch 設置為 true, 如果元素的值不是按照規定的 step 屬性設置。
tooLong 設置為 true, 如果元素的值超過了 maxLength 屬性設置的長度。
typeMismatch 設置為 true, 如果元素的值不是預期相匹配的類型。
valueMissing 設置為 true，如果元素 (required 屬性) 沒有值。
valid 設置為 true，如果元素的值是合法的。rangeOverflow 屬性 <input id="id1" type="number" max="100"> <button onclick="myFunction()">驗證</button> <p id="demo"></p> <script> function myFunction() { var txt = ""; if (document.getElementById("id1").validity.rangeOverflow) { txt = "輸入的值太大了"; } document.getElementById("demo").innerHTML = txt; } </script>
JavaScript JSON
JSON 是用於存儲和傳輸數據的格式。
JSON 通常用於服務端向網頁傳遞數據 。
什么是 JSON?
- JSON 英文全稱 JavaScript Object Notation
- JSON 是一種輕量級的數據交換格式。
- JSON是獨立的語言 *
- JSON 易於理解。
* JSON 使用 JavaScript 語法，但是 JSON 格式僅僅是一個文本。
文本可以被任何編程語言讀取及作為數據格式傳遞。JSON 實例
以下 JSON 語法定義了 sites 對象: 3 條網站信息（對象）的數組:
JSON 實例
JSON 實例 {"sites":[ {"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"}, {"name":"Taobao", "url":"www.taobao.com"} ]}
JSON 格式化后為 JavaScript 對象
JSON 格式在語法上與創建 JavaScript 對象代碼是相同的。
由於它們很相似，所以 JavaScript 程序可以很容易的將 JSON 數據轉換為 JavaScript 對象。
JSON 數據 - 一個名稱對應一個值
JSON 數據格式為 鍵/值 對，就像 JavaScript 對象屬性。
鍵/值對包括字段名稱（在雙引號中），后面一個冒號，然后是值：
"name":"Runoob"JSON 數組
JSON 數組保存在中括號內。
就像在 JavaScript 中, 數組可以包含對象：
"sites":[{"name":"Runoob", "url":"www.runoob.com"},{"name":"Google", "url":"www.google.com"},{"name":"Taobao", "url":"www.taobao.com"}]在以上實例中，對象 "sites" 是一個數組，包含了三個對象。
每個對象為站點的信息（網站名和網站地址）。
在以上實例中，對象 "sites" 是一個數組，包含了三個對象。
每個對象為站點的信息（網站名和網站地址）。
JSON 字符串轉換為 JavaScript 對象
通常我們從服務器中讀取 JSON 數據，並在網頁中顯示數據。
簡單起見，我們網頁中直接設置 JSON 字符串 (你還可以閱讀我們的 JSON 教程):
首先，創建 JavaScript 字符串，字符串為 JSON 格式的數據：
var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';然后，使用 JavaScript 內置函數 JSON.parse() 將字符串轉換為 JavaScript 對象:
var obj = JSON.parse(text);最后，在頁面中使用新的 JavaScript 對象：
實例
var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}'; obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
相關函數
函數 描述
JSON.parse() 用於將一個 JSON 字符串轉換為 JavaScript 對象。
JSON.stringify() 用於將 JavaScript 值轉換為 JSON 字符串。javascript:void(0) 含義
我們經常會使用到 javascript:void(0) 這樣的代碼，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？
javascript:void(0) 中最關鍵的是 void 關鍵字， void 是 JavaScript 中非常重要的關鍵字，該操作符指定要計算一個表達式但是不返回值。
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<p>點擊以下鏈接查看結果：</p>
<a href="javascript:void(alert('Warning!!!'))">點我!</a>
href="#"與href="javascript:void(0)"的區別
# 包含了一個位置信息，默認的錨是#top 也就是網頁的上端。
而javascript:void(0), 僅僅表示一個死鏈接。
在頁面很長的時候會使用 # 來定位頁面的具體位置，格式為：# + id。
如果你要定義一個死鏈接請使用 javascript:void(0) 。
<a href="javascript:void(0);">點我沒有反應的!</a>
<a href="#pos">點我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位點</p>JavaScript 閉包
JavaScript 變量可以是局部變量或全局變量。
私有變量可以用到閉包。
<p>全局變量計數。</p> <button type="button" onclick="myFunction()">計數!</button> <p id="demo">0</p> <script> var counter = 0; function add() { return counter += 1; } function myFunction(){ document.getElementById("demo").innerHTML = add(); } </script>
<p>局部變量計數。</p>
<button type="button" onclick="myFunction()">計數!</button>
<p id="demo">0</p>
<script>
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>