JavaScript基礎知識（一）_ZenDei技術網路在線

一、JavaScript基礎 1、JavaScript用法： HTML 中的腳本必須位於 <script> 與 </script> 標簽之間。腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。 HTML引入外部js文件方法示例： <!DOCTYPE html> <html> ...

一、JavaScript基礎

1、JavaScript用法：

HTML 中的腳本必須位於 <script> 與 </script> 標簽之間。
腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。
HTML引入外部js文件方法示例：

<!DOCTYPE html> 
<html> 
<body> 
    <script src="myScript.js"></script> 
</body> 
</html>

2、<script> 標簽：

在 HTML 頁面中插入 JavaScript，請使用 <script> 標簽。
<script> 和 </script> 會告訴 JavaScript 在何處開始和結束。

3、JavaScript使用限制：

在 HTML 文檔中放入不限數量的腳本。
腳本可位於 HTML 的 <body> 或 <head> 部分中，或者同時存在於兩個部分中。
通常的做法是把函數放入 <head> 部分中，或者放在頁面底部，不會幹擾頁面的內容。

4、JavaScript輸出

　　①JavaScript通常用來操作HTML

　　②文檔輸出：

使用 document.write() 方法將內容寫到 HTML 文檔中。
使用 window.alert() 彈出警告框。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制台。

5、JavaScript語句：

　　①JavaScript 語句：

　　　　向瀏覽器發出的命令。語句的作用是告訴瀏覽器該做什麼。

　　②分號：

　　用於分隔 JavaScript 語句，通常我們在每條可執行的語句結尾添加分號，使用分號的另一用處是在一行中編寫多條語句。

　　③JavaScript 代碼

　　JavaScript 代碼是 JavaScript 語句的序列。瀏覽器按照編寫順序依次執行每條語句。

　　④標識符：

　　標識符必須以字母、下劃線或美元符號開始

　　語句標識符是保留關鍵字不能作為變數名使用。

　　⑤JavaScript對大小寫敏感

　　⑥空格：JavaScript 會忽略多餘的空格。您可以向腳本添加空格，來提高其可讀性。

　　⑦語句標識符是保留關鍵字不能作為變數名使用。如break、var、do ... while等

　　⑧換行：不允許在語句單詞中換行。

6、註釋

　　①單行註釋以 // 開頭。

　　②多行註釋以 /* 開始，以 */ 結尾。

7、JavaScript 變數

　　變數是用於存儲信息的"容器"。var x=5; var y=6; var z=x+y;

變數必須以字母開頭
變數也能以 $ 和 _ 符號開頭（不過我們不推薦這麼做）
變數名稱對大小寫敏感（y 和 Y 是不同的變數）

8、JavaScript 數據類型

　　字元串（String）、數字(Number)、布爾(Boolean)、數組(Array)、對象(Object)、空（Null）、未定義（Undefined）。

二、JavaScript 語法

1、JavaScript運算符

　　①JavaScript 算術運算符

　　y=5，下麵的表格解釋了這些算術運算符：

運算符	描述	例子	x 運算結果	y 運算結果
+	加法	x=y+2	7	5
-	減法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（餘數）	x=y%2	1	5
++	自增	x=++y	6	6
++	自增	x=y++	5	6
--	自減	x=--y	4	4
--	自減	x=y--	5	4

　　②JavaScript 賦值運算符

　　給定 x=10 和 y=5，下麵的表格解釋了賦值運算符：

運算符	例子	等同於	運算結果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

　　③用於字元串的 + 運算符

　　+ 運算符用於把文本值或字元串變數加起來（連接起來）。

2、JavaScript 比較和邏輯運算符

　　①比較運算符

　　比較運算符在邏輯語句中使用，以測定變數或值是否相等。

　　x=5，下麵的表格解釋了比較運算符：　　

運算符	描述	比較	返回值
==	等於（不限類型）	x==8	false
==	等於（不限類型）	x==5	true
===	絕對等於（值和類型均相等）	x==="5"	false
===	絕對等於（值和類型均相等）	x===5	true
!=	不等於	x!=8	true
!==	不絕對等於（值和類型有一個不相等，或兩個都不相等）	x!=="5"	true
!==	不絕對等於（值和類型有一個不相等，或兩個都不相等）	x!==5	false
>	大於	x>8	false
<	小於	x<8	true
>=	大於或等於	x>=8	false
<=	小於或等於	x<=8	true

　　②邏輯運算符

　　　　邏輯運算符用於測定變數或值之間的邏輯。

　　　　給定 x=6 以及 y=3，下表解釋了邏輯運算符：

運算符	描述	例子
&&	and	(x < 10 && y > 1) 為 true
\|\|	or	(x==5 \|\| y==5) 為 false
!	not	!(x==y) 為 true

　　③條件運算符

　　　　JavaScript 還包含了基於某些條件對變數進行賦值的條件運算符。

　　　語法： variablename=(condition)?value1:value2；

3、條件語句

　　通常在寫代碼時，您總是需要為不同的決定來執行不同的動作。您可以在代碼中使用條件語句來完成該任務。

　　在 JavaScript 中，我們可使用以下條件語句：

if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼
if...else 語句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼
if...else if....else 語句- 使用該語句來選擇多個代碼塊之一來執行

if (condition1)
{
    當條件 1 為 true 時執行的代碼
}
else if (condition2)
{
    當條件 2 為 true 時執行的代碼
}
else
{
  當條件 1 和 條件 2 都不為 true 時執行的代碼
}

switch 語句 - 使用該語句來選擇多個代碼塊之一來執行

switch(n)
{
    case 1:
        執行代碼塊 1
        break;
    case 2:
        執行代碼塊 2
        break;
    default:
        與 case 1 和 case 2 不同時執行的代碼
}

4、JavaScript for 迴圈

　　JavaScript 支持不同類型的迴圈：

for - 迴圈代碼塊一定的次數

for (語句 1; 語句 2; 語句 3)
{
    被執行的代碼塊
}

for/in - 迴圈遍歷對象的屬性

var person={fname:"John",lname:"Doe",age:25}; 
for (x in person)
{
    txt=txt + person[x];
}

while - 當指定的條件為 true 時迴圈指定的代碼塊

while (條件)
{
    需要執行的代碼
}

do/while - 同樣當指定的條件為 true 時迴圈指定的代碼塊

do
{
    需要執行的代碼
}
while (條件);

5、JavaScript 跳轉語句 break 和 continue 　　

break 語句用於跳出迴圈。
continue 用於跳過迴圈中的一個迭代。

6、JavaScript 標簽

　　break 和 continue 語句僅僅是能夠跳出代碼塊的語句。

　　語法：

break labelname;

continue labelname;

continue 語句（帶有或不帶標簽引用）只能用在迴圈中。

break 語句（不帶標簽引用），只能用在迴圈或 switch 中。

通過標簽引用，break 語句可用於跳出任何 JavaScript 代碼塊：

cars=["BMW","Volvo","Saab","Ford"];
list: {
    document.write(cars[0] + "<br>");
    document.write(cars[1] + "<br>");
    document.write(cars[2] + "<br>");
    break list;
    document.write(cars[3] + "<br>");
    document.write(cars[4] + "<br>");
    document.write(cars[5] + "<br>");
}

7、JavaScript typeof, null, 和 undefined

　　①typeof 操作符

　　可以使用 typeof 操作符來檢測變數的數據類型。

typeof "John"                // 返回 string 
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。

var person; // 值為 undefined(空), 類型是undefined

　　任何變數都可以通過設置值為 undefined 來清空。類型為 undefined.

　　④Undefined 和 Null 的區別

null 和 underfined 的值相等，但類型不等：
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

8、JavaScript 類型轉換

　　Number() 轉換為數字， String() 轉換為字元串， Boolean() 轉化為布爾值。

　　JavaScript 變數可以轉換為新變數或其他數據類型：

- 通過使用 JavaScript 函數
- 通過 JavaScript 自身自動轉換

　　①將數字轉換為字元串

　　全局方法 String() 可以將數字轉換為字元串。

　　該方法可用於任何類型的數字，字母，變數，表達式：

String(x) // 將變數 x 轉換為字元串並返回

String(123) // 將數字 123 轉換為字元串並返回

String(100 + 23) // 將數字表達式轉換為字元串並返回

　　Number 方法 toString() 也是有同樣的效果。

x.toString()

(123).toString()

(100 + 23).toString()

　　常用數字轉換為字元串的方法：

方法	描述
toExponential()	把對象的值轉換為指數計數法。
toFixed()	把數字轉換為字元串，結果的小數點後有指定位數的數字。
toPrecision()	把數字格式化為指定的長度。

　　②將布爾值轉換為字元串

　　全局方法 String() 可以將布爾值轉換為字元串。

String(false)        // 返回 "false"
String(true)         // 返回 "true"
Boolean 方法 toString() 也有相同的效果。
false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

　　③將日期轉換為字元串

　　Date() 返回字元串。

Date() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

　　全局方法 String() 可以將日期對象轉換為字元串。

String(new Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

　　Date 方法 toString() 也有相同的效果。

obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

　　常用日期轉換為字元串的函數：

方法	描述
getDate()	從 Date 對象返回一個月中的某一天 (1 ~ 31)。
getDay()	從 Date 對象返回一周中的某一天 (0 ~ 6)。
getFullYear()	從 Date 對象以四位數字返回年份。
getHours()	返回 Date 對象的小時 (0 ~ 23)。
getMilliseconds()	返回 Date 對象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 對象的分鐘 (0 ~ 59)。
getMonth()	從 Date 對象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 對象的秒數 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒數。

　　④將字元串轉換為數字

　　全局方法 Number() 可以將字元串轉換為數字。

　　字元串包含數字(如 "3.14") 轉換為數字 (如 3.14).

　　空字元串轉換為 0。

　　其他的字元串會轉換為 NaN (不是個數字)。

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0 
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

　　常用字元串轉為數字的方法：

方法	描述
parseFloat()	解析一個字元串，並返回一個浮點數。
parseInt()	解析一個字元串，並返回一個整數。

　　⑤一元運算符 +

　　Operator + 可用於將變數轉換為數字：

var y = "5";      // y 是一個字元串
var x = + y;      // x 是一個數字

　　如果變數不能轉換，它仍然會是一個數字，但值為 NaN (不是一個數字):

　　 var y = "John"; // y 是一個字元串

var x = + y; // x 是一個數字 (NaN)

　　⑥將布爾值轉換為數字

　　全局方法 Number() 可將布爾值轉換為數字。

Number(false) // 返回 0

Number(true) // 返回 1

　　⑦將日期轉換為數字

　　全局方法 Number() 可將日期轉換為數字。

　　 d = new Date();

Number(d) // 返回 1404568027739

　　日期方法 getTime() 也有相同的效果。

　　 d = new Date();

d.getTime() // 返回 1404568027739

　　⑧自動轉換類型

　　當 JavaScript 嘗試操作一個 "錯誤" 的數據類型時，會自動轉換為 "正確" 的數據類型。

　　以下輸出結果不是你所期望的：

5 + null    // 返回 5         null 轉換為 0
"5" + null  // 返回"5null"   null 轉換為 "null"
"5" + 1     // 返回 "51"      1 轉換為 "1"  
"5" - 1     // 返回 4         "5" 轉換為 5

　　⑨自動轉換為字元串

　　當你嘗試輸出一個對象或一個變數時 JavaScript 會自動調用變數的 toString() 方法：

document.getElementById("demo").innerHTML = myVar;
// 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 = 123             // toString 轉換為 "123"
// if myVar = true            // toString 轉換為 "true"
// if myVar = false           // toString 轉換為 "false"

9、JavaScript 正則表達式

　　正則表達式（英語：Regular Expression，在代碼中常簡寫為regex、regexp或RE）使用單個字元串來描述、匹配一系列符合某個句法規則的字元串搜索模式。

　　搜索模式可用於文本搜索和文本替換。

　　語法：

/正則表達式主體/修飾符(可選)

　　其中修飾符可選，如：

var patt = /runoob/i 
解析：/runoob/i  是一個正則表達式。
　　　　runoob  是一個正則表達式主體 (用於檢索)。
　　　　i  是一個修飾符 (搜索不區分大小寫)。

　　①使用字元串方法

　　在 JavaScript 中，正則表達式通常用於兩個字元串方法 : search() 和 replace()。

　　search() 方法用於檢索字元串中指定的子字元串，或檢索與正則表達式相匹配的子字元串，並返回子串的起始位置。

var str = "Visit Runoob!";

var n = str.search(/Runoob/i);//輸出結果6

　　search 方法可使用字元串作為參數。字元串參數會轉換為正則表達式。

　　replace() 方法用於在字元串中用一些字元替換另一些字元，或替換一個與正則表達式匹配的子串。

var str = document.getElementById("demo").innerHTML;

var txt = str.replace(/microsoft/i,"Runoob");//輸出結果Visit Runoob!

　　replace() 方法將接收字元串作為參數

　　②正則表達式修飾符

　　修飾符可以在全局搜索中不區分大小寫:

修飾符	描述
i	執行對大小寫不敏感的匹配。
g	執行全局匹配（查找所有匹配而非在找到第一個匹配後停止）。
m	執行多行匹配。

　正則表達式模式

　　方括弧用於查找某個範圍內的字元：

表達式	描述
[abc]	查找方括弧之間的任何字元。
[0-9]	查找任何從 0 至 9 的數字。
(x\|y)	查找任何以 \| 分隔的選項。

　　元字元是擁有特殊含義的字元：

元字元	描述
\d	查找數字。
\s	查找空白字元。
\b	匹配單詞邊界。
\uxxxx	查找以十六進位數 xxxx 規定的 Unicode 字元。

　　量詞:

量詞	描述
n+	匹配任何包含至少一個 n 的字元串。
n*	匹配任何包含零個或多個 n 的字元串。
n?	匹配任何包含零個或一個 n 的字元串。

　　③test()

　　test() 方法是一個正則表達式方法。

　　test() 方法用於檢測一個字元串是否匹配某個模式，如果字元串中含有匹配的文本，則返回 true，否則返回 false。

　　④exec（）

　　exec() 方法是一個正則表達式方法。

　　exec() 方法用於檢索字元串中的正則表達式的匹配。

　　該函數返回一個數組，其中存放匹配的結果。如果未找到匹配，則返回值為 null。

10、變數的提升

　　JavaScript 中，變數可以在使用後聲明，也就是變數可以先使用再聲明。

　　JavaScript 只有聲明的變數會提升，初始化的不會。

11、JavaScript 代碼規範

　　JavaScript 代碼規範

　　代碼規範通常包括以下幾個方面:

- 變數和函數的命名規則
- 空格，縮進，註釋的使用規則。
- 其他常用規範……

　　規範的代碼可以更易於閱讀與維護。

　　代碼規範一般在開發前規定。

　　①變數名

　　變數名推薦使用駝峰法來命名(camelCase):

firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

　　②空格與運算符

　　通常運算符 ( = + - * / ) 前後需要添加空格:

var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];

　　③語句規則

　　簡單語句的通用規則:

- 一條語句通常以分號作為結束符。

var values = ["Volvo", "Saab", "Fiat"];
var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

　　複雜語句的通用規則:

- 將左花括弧放在第一行的結尾。
- 左花括弧前添加一空格。
- 將右花括弧獨立放在一行。
- 不要以分號結束一個複雜的聲明。

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

　　迴圈:

for (i = 0; i < 5; i++) {
    x += i;
}

　　條件語句:

if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}

　　④對象規則

　　對象定義的規則:

- 將左花括弧與類名放在同一行。
- 冒號與屬性值間有個空格。
- 字元串使用雙引號，數字不需要。
- 最後一個屬性-值對後面不要添加逗號。
- 將右花括弧獨立放在一行，並以分號作為結束符號。

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

　　短的對象代碼可以直接寫成一行:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

　　每行代碼字元小於 80

　　為了便於閱讀每行字元建議小於數 80 個。

　　如果一個 JavaScript 語句超過了 80 個字元，建議在運算符或者逗號後換行。

document.getElementById("demo").innerHTML =
    "Hello Runoob.";

　　⑤命名規則

　　一般很多代碼語言的命名規則都是類似的，例如:

- 變數和函數為駝峰法（ camelCase）
- 全局變數為大寫 (UPPERCASE )
- 常量 (如 PI) 為大寫 (UPPERCASE )

　　HTML 和 CSS 的橫杠(-)字元:

　　HTML5 屬性可以以 data- (如：data-quantity, data-price) 作為首碼。

　　CSS 使用 - 來連接屬性名 (font-size)。

　　通常在 JavaScript 中被認為是減法，所以不允許使用。

　　下劃線:

　　很多程式員比較喜歡使用下劃線(如：date_of_birth), 特別是在 SQL 資料庫中。

　　PHP 語言通常都使用下劃線。

　　帕斯卡拼寫法(PascalCase):

　　帕斯卡拼寫法(PascalCase) 在 C 語言中語言較多。

　　駝峰法：

　　JavaScript 中通常推薦使用駝峰法，jQuery 及其他 JavaScript 庫都使用駝峰法。

　　變數名不要以 $ 作為開始標記，會與很多 JavaScript 庫衝突。

　　HTML 載入外部 JavaScript 文件

　　使用簡潔的格式載入 JavaScript 文件 ( type 屬性不是必須的):

　　使用 JavaScript 訪問 HTML 元素

　　一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

　　以下兩個 JavaScript 語句會輸出不同結果:

var obj = getElementById("Demo")
var obj = getElementById("demo")

　　HTML 與 JavaScript 儘量使用相同的命名規則。

　　文件擴展名

- HTML 文件尾碼可以是 .html (或r .htm)。
- CSS 文件尾碼是 .css 。
- JavaScript 文件尾碼是 .js 。

　　使用小寫文件名：

大多 Web 伺服器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。

其他 Web 伺服器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

三、JavaScript 函數

(一) JavaScript 函數

　　函數是由事件驅動的或者當它被調用時執行的可重覆使用的代碼塊。

　　JavaScript 使用關鍵字 function 定義函數，函數可以通過聲明定義，也可以是一個表達式。

1、函數聲明

　　語法 :

function functionName(parameters) {
   執行的代碼
}

　　註意：

分號是用來分隔可執行JavaScript語句。
由於函數聲明不是一個可執行語句，所以不以分號結束。
函數聲明後不會立即執行，會在我們需要的時候調用到。
JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫的，並且必須以與函數名稱相同的大小寫來調用函數。

2、函數表達式

　　JavaScript 函數可以通過一個表達式定義。

　　函數表達式可以存儲在變數中： var x = function (a, b) {return a * b};

　　在函數表達式存儲在變數後，變數也可作為一個函數使用：

var x = function (a, b) {return a * b};
var z = x(4, 3);

　　以上函數實際上是一個匿名函數 (函數沒有名稱)。

　　上述函數以分號結尾，因為它是一個執行語句。

3、Function() 構造函數

　　函數同樣可以通過內置的 JavaScript 函數構造器（Function()）定義。

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
//上面實例可以寫成：
var myFunction = function (a, b) {return a * b}
var x = myFunction(4, 3);

　　在 JavaScript 中，很多時候，你需要避免使用 new 關鍵字。

4、函數提升（Hoisting）

　　提升（Hoisting）是 JavaScript 預設將當前作用域提升到前面去的的行為。

　　提升（Hoisting）應用在變數的聲明與函數的聲明。

　　因此，函數可以在聲明之前調用：

myFunction(5);
function myFunction(y) {
    return y * y;
}

　　使用表達式定義函數時無法提升。

5、自調用函數

函數表達式可以 "自調用",自調用表達式會自動調用。如果表達式後面緊跟 () ，則會自動調用。

不能自調用聲明的函數。

通過添加括弧，來說明它是一個函數表達式：

(function () {
    var x = "Hello!!";      // 我將調用自己
})();

　　以上函數實際上是一個匿名自我調用的函數 (沒有函數名)。

6、函數可作為一個值使用

　　JavaScript 函數作為一個值使用：

function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3);

7、函數是對象

　　在 JavaScript 中使用 typeof 操作符判斷函數類型將返回 "function" 。

　　但是JavaScript 函數描述為一個對象更加準確。

　　JavaScript 函數有屬性和方法。

　　arguments.length 屬性返回函數調用過程接收到的參數個數：

function myFunction(a, b) {
    return arguments.length;
}

（二）JavaScript 函數參數

　　JavaScript 函數對參數的值沒有進行任何的檢查。

1、函數顯式參數(Parameters)與隱式參數(Arguments)

　　函數的顯式參數:

functionName(parameter1, parameter2, parameter3) { // 要執行的代碼…… }

　　函數顯式參數在函數定義時列出。

　　函數隱式參數在函數調用時傳遞給函數真正的值。

　　①參數規則

- JavaScript 函數定義時顯式參數沒有指定數據類型。
- JavaScript 函數對隱式參數沒有進行類型檢測。
- JavaScript 函數對隱式參數的個數沒有進行檢測。

　　②預設參數

　　如果函數在調用時未提供隱式參數，參數會預設設置為： undefined

　　有時這是可以接受的，但是建議最好為參數設置一個預設值：

function myFunction(x, y) { y = y || 0; }

　　如果y已經定義， y || 返回 y, 因為 y 是 true, 否則返回 0, 因為 undefined 為 false。

2、Arguments 對象

　　JavaScript 函數有個內置的對象 arguments 對象。

　　argument 對象包含了函數調用的參數數組。

　　通過這種方式你可以很方便的找到最大的一個參數的值：

x = findMax(1, 123, 500, 115, 44, 88); 
function findMax() { 
    var i, max = arguments[0]; 
    if(arguments.length < 2) return max;
    for (i = 0; i < arguments.length; i++) { 
        if (arguments[i] > max) { 
            max = arguments[i]; 
        } 
    } 
    return max; 
}

　　①通過值傳遞參數

　　在函數中調用的參數是函數的隱式參數。

　　JavaScript 隱式參數通過值來傳遞：函數僅僅只是獲取值。

　　如果函數修改參數的值，不會修改顯式參數的初始值（在函數外定義）。

　　隱式參數的改變在函數外是不可見的。

　　②通過對象傳遞參數

　　在JavaScript中，可以引用對象的值。

　　因此我們在函數內部修改對象的屬性就會修改其初始的值。

　　修改對象屬性可作用於函數外部（全局變數）。

　　修改對象屬性在函數外是可見的。

（三）JavaScript 函數調用

1、函數在HTML中的調用方式：

在<script>標簽內調用

<script>
       function demo(){
           var a = 10 ;
           var b = 10 ;
           var sum = a+b ;
           alert(sum)
       }
       demo();//調用函數
</script>

在HTML文件中調用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
       function demo(){
           var a = 10 ;
           var b = 10 ;
           var sum = a+b ;
           alert(sum)
       }
    </script>
    <button onclick="demo()">按鈕</button>
</body>
</html>

③調用帶參數的函數

在調用函數時，您可以向其傳遞值，這些值被稱為參數。

這些參數可以在函數中使用，可以發送任意多的參數，由逗號 (,) 分隔：

　　　　 myFunction(argument1,argument2)；

function myFunction(var1,var2){ 代碼 }

變數和參數必須以一致的順序出現。第一個變數就是第一個被傳遞的參數的給定的值，以此類推。

 1 <body>
 2     <script>
 3        function demo(a,b){
 4            var sum = a+b ;
 5            alert(sum)
 6        }
 7        demo(10,20);
 8        demo(100,200);
 9     </script>
10 </body>

　　④帶有返回值的函數

　　有時，我們會希望函數將值返回調用它的地方。

　　通過使用 return 語句就可以實現。

　　在使用 return 語句時，函數會停止執行，並返回指定的值。

function myFunction(){
    var x=5;
    return x;
}
var myVar=myFunction();
//document.getElementById("demo").innerHTML=myFunction();

2、JavaScript 函數在js中4 種調用方式：

　　每種方式的不同方式在於 this 的初始化。

　　this 關鍵字：一般而言，在Javascript中，this指向函數執行時的當前對象。

　　註意： this 是保留關鍵字，你不能修改 this 的值。

　　①作為一個函數調用

function myFunction(a, b) { return a * b; } myFunction(10, 2); // myFunction(10, 2) 返回 20

　　以上函數不屬於任何對象。但是在 JavaScript 中它始終是預設的全局對象。

　　在 HTML 中預設的全局對象是 HTML 頁面本身，所以函數是屬於 HTML 頁面。

　　在瀏覽器中的頁面對象是瀏覽器視窗(window 對象)。以上函數會自動變為 window 對象的函數。

　　myFunction() 和 window.myFunction() 是一樣的。

　　②全局對象

　　當函數沒有被自身的對象調用時， this 的值就會變成全局對象。

　　在 web 瀏覽器中全局對象是瀏覽器視窗（window 對象）。

　　該實例返回 this 的值是 window 對象:

function myFunction() { return this; } myFunction(); // 返回 window 對象

　　函數作為全局對象調用，會使 this 的值成為全局對象。

　　使用 window 對象作為一個變數容易造成程式崩潰

　　③函數作為方法調用

　　在 JavaScript 中你可以將函數定義為對象的方法。

　　以下實例創建了一個對象 (myObject), 對象有兩個屬性 (firstName 和 lastName), 及一個方法 (fullName):

var myObject = { 
    firstName:"John", 
    lastName: "Doe", 
    fullName: function () { 
        return this.firstName + " " + this.lastName; 
    } 
} 
myObject.fullName(); // 返回 "John Doe"

fullName 方法是一個函數。函數屬於對象。 myObject 是函數的所有者。

this對象，擁有 JavaScript 代碼。實例中 this 的值為 myObject 對象。

函數作為對象方法調用，會使得 this 的值成為對象本身。

　　④使用構造函數調用函數

　　如果函數調用前使用了 new 關鍵字, 則是調用了構造函數。

　　這看起來就像創建了新的函數，但實際上 JavaScript 函數是重新創建的對象：

// 構造函數: 
function myFunction(arg1, arg2) { 
    this.firstName = arg1; 
    this.lastName = arg2; 
} 
// This creates a new object 
var x = new myFunction("John","Doe"); 
x.firstName; // 返回 "John"

構造函數的調用會創建一個新的對象。新對象會繼承構造函數的屬性和方法。

構造函數中 this 關鍵字沒有任何的值。

this 的值在函數調用時實例化對象(new object)時創建。

　　⑤作為函數方法調用函數

　　在 JavaScript 中, 函數是對象。JavaScript 函數有它的屬性和方法。

　　call() 和 apply() 是預定義的函數方法。兩個方法可用於調用函數，兩個方法的第一個參數必須是對象本身。

function myFunction(a, b) { return a * b; } myObject =myFunction.call(myObject, 10, 2); // 返回 20

　　通過 call() 或 apply() 方法你可以設置 this 的值, 且作為已存在對象的新方法調用。

3、變數

　　①局部變數

　　在 JavaScript 函數內部聲明的變數（使用 var）是局部變數，所以只能在函數內部訪問它。（該變數的作用域是局部的）。

　　可以在不同的函數中使用名稱相同的局部變數，因為只有聲明過該變數的函數才能識別出該變數。

　　只要函數運行完畢，本地變數就會被刪除。

　　②全局變數

　　在函數外聲明的變數是全局變數，網頁上的所有腳本和函數都能訪問它。

　　③JavaScript 變數的生存期

　　JavaScript 變數的生命期從它們被聲明的時間開始。

　　局部變數會在函數運行以後被刪除。

　　全局變數會在頁面關閉後被刪除。

　　④向未聲明的 JavaScript 變數分配值

　　如果您把值賦給尚未聲明的變數，該變數將被自動作為全局變數聲明。

carname="Volvo";

　　將聲明一個全局變數 carname，即使它在函數內執行。

4、JavaScript 閉包

　　JavaScript 變數可以是局部變數或全局變數。

　　私有變數可以用到閉包。

　　函數也可以訪問函數外部定義的變數

　　變數聲明時如果不使用 var 關鍵字，那麼它就是一個全局變數，即便它在函數內定義。

　　①變數生命周期

　　全局變數的作用域是全局性的，即在整個JavaScript程式中，全局變數處處都在。

　　而在函數內部聲明的變數，只在函數內部起作用。這些變數是局部變數，作用域是局部性的；函數的參數也是局部性的，只在函數內部起作用。

　　②JavaScript 內嵌函數

　　所有函數都能訪問全局變數。

　　實際上，在 JavaScript 中，所有函數都能訪問它們上一層的作用域。

　　JavaScript 支持嵌套函數。嵌套函數可以訪問上一層的函數變數。

　　該實例中，內嵌函數 plus() 可以訪問父函數的 counter 變數：

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}

　　閉包是可訪問上一層函數作用域里變數的函數，即便上一層函數已經關閉。

四、JavaScript異常處理和事件處理

1、JavaScript 錯誤 - throw、try 和 catch

try 語句測試代碼塊的錯誤。
catch 語句處理錯誤。
throw 語句創建自定義錯誤。

　　①異常的捕獲 try 和 catch

- try 語句允許我們定義在執行時進行錯誤測試的代碼塊。
- catch 語句允許我們定義當 try 代碼塊發生錯誤時，所執行的代碼塊。
- JavaScript 語句 try 和 catch 是成對出現的。

try {
  //在這裡運行代碼
} catch(err) {
  //在這裡處理錯誤
}

　　②異常的拋出 throw： throw exception

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <input id="txt" type="text">
        <input id="btn" type="button" onclick="demo()" value="按鈕">
    </form>
    <script>
       function demo(){
            try {
                var e = document.getElementById("txt").value;
                if(e==""){
                    throw "請輸入"
                }
            }catch (err){
                alert(err);
            }
       }
    </script>
</body>
</html>

2、事件

　　①HTML事件：HTML 事件可以是瀏覽器行為，也可以是用戶行為。

　　　　如：HTML 頁面完成載入，HTML input 欄位改變時，HTML 按鈕被點擊

<button onclick="demo()">按鈕</button>
<script>
        function demo(){
            alert("Hello");
        }
</script>

　　　常見的HTML事件

事件	描述
onclick	單擊事件
onmouseover	滑鼠經過事件
onmouseout	滑鼠移出事件
onchange	文本內容改變事件
onselect	文本框選中事件
onfocus	游標聚集事件
onblur	移開游標事件
onload	瀏覽器已完成頁面的載入
onunload	關閉網頁事件
onkeydown	用戶按下鍵盤按

//onmouseover、onmouseout示例
<div class="div" onmouseout="onOut(this)" onmousemove="onOver(this)"></div>
    <script>
        function onOver(ooj) {
            ooj.innerHTML="Hello";
        }
        function onOut(ooj) {
            ooj.innerHTML="World"
        }
</script>

　　//onselect示例

<form>
     <input type="text" onselect="changeDemo(this)">
     <script>
            function changeDemo(bg) {
                bg.style.background="red";
            }
     </script>
</form>

五、JavaScript DOM對象

1、HTML DOM (文檔對象模型)

　　當網頁被載入時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

　　HTML DOM 模型被構造為對象的樹：

　　JavaScript 獲得了足夠的能力來創建動態的 HTML。

- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠對頁面中的所有事件做出反應

2、DOM操作HTML

　　①改變 HTML 輸出流

　　在 JavaScript 中，document.write() 可用於直接向 HTML 輸出流寫內容。

　　註意：絕對不要在文檔載入完成之後使用 document.write()。這會覆蓋該文檔。

　　②查找 HTML 元素

　　　通常，通過 JavaScript，您需要操作 HTML 元素。

　　　為了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：

- 通過 id 找到 HTML 元素
- 通過標簽名找到 HTML 元素
- 通過類名找到 HTML 元素

　　③改變 HTML 內容

　　修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。

　　如需改變 HTML 元素的內容，請使用這個語法： document.getElementById("id").innerHTML=新的 HTML

　　④改變 HTML 屬性

　　如需改變 HTML 元素的屬性，請使用這個語法： document.getElementById("id").attribute=新屬性值

<body>
    <a id="aid" href="http://www.baidu.com">Hello</a>
    <button onclick="demo()">按鈕</button>
    <script>
        function demo() {
            document.getElementById("aid").href="http://hao123.com";
        }
    </script>
</body>

3、DOM操作CSS

　　①改變 HTML 樣式

　　如需改變 HTML 元素的樣式，請使用這個語法： document.getElementById(id).style.property=新樣式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .div{
 8             width: 100px;
 9             height: 100px;
10             background-color: red;
11         }
12     </style>
13 </head>
14 <body>
15     <div id="div" class="div">
16         Hello
17     </div>
18     <button onclick="demo()">按鈕</button>
19     <script>
20         function demo() {
21             document.getElementById("div").style.background="blue";
22         }
23     </script>
24 </body>
25 </html>

4、DOM EventListener

　　①addEventListener() 方法

addEventListener() 方法用於向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不會覆蓋已存在的事件句柄。

你可以向一個元素添加多個事件句柄。

你可以向同個元素添加多個同類型的事件句柄，如：兩個 "click" 事件。

你可以向任何 DOM 對象添加事件監聽，不僅僅是 HTML 元素。如： window 對象。

addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。

當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強，在沒有控制HTML標記時也可以添加事件監聽。

語法： element.addEventListener(event, function, useCapture);

- 第一個參數是事件的類型 (如 "click" 或 "mousedown").
- 第二個參數是事件觸發後調用的函數。
- 第三個參數是個布爾值用於描述事件是冒泡還是捕獲。該參數是可選的。

　　註意:不要使用 "on" 首碼。例如，使用 "click" ,而不是使用 "onclick"。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 <body>
 8     <p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。</p>
 9     <button id="myBtn">點我</button>
10     <script>        
11　　　　　　document.getElementById("myBtn").addEventListener("click", function(){
12     　　　　alert("Hello World!");
13 　　　　});
14 　　</script>
14 </body>
16 </html>

　　②removeEventListener() 方法

　　removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄，如： element.removeEventListener("mousemove", myFunction);