學習筆記 第十五章 JavaScript基礎
第15章 JavaScript基礎
【學習重點】
- 了解JavaScript基礎知識
- 熟悉常量和變量
- 能夠使用表達式和運算符
- 正確使用語句
- 能夠掌握數據類型和轉換的基本方法
- 正確使用函數、對象、數組等核心知識和技法
- 能夠編寫簡單的腳本，解決網頁中常見特效和互動效果
15.1 JavaScript入門
JavaScript是一種輕量級、解釋型的Web開發語言。現代瀏覽器都已嵌入了JavaScript引擎。/sc
15.1.1 在網頁中插入JavaScript代碼
使用<script>標簽，可以把JavaScript源代碼直接放到網頁文檔中。
<script>和</script>標簽配合使用，作為腳本語言的標識符來分隔其它源代碼，避免混淆。
一般來說，JavaScript代碼可以放在網頁中的任意位置。但是，根據W3C標準，<script>和<link>標簽作為HTML文檔的一個節點，也應該包含在<html>和</html>根節點內。
每個網頁可以包含多個<script>標簽，每個標簽包含的代碼被稱為JavaScript腳本塊。建議把功能相同或相近的代碼放在一個腳本塊中。適當時可以把通用腳本模塊放在單獨的JavaScript文件中，或者把它們封在一個獨立的對象以方便調用。
15.1.2 使用JavaScript文件
JavaScript文件是一個文本類型的文件，在任何文本編輯器中都可以打開、編輯，JavaScript文件的擴展名是js。
引入JavaScript文件時，可以使用<script>標簽實現，通過該標簽的src屬性指定JavaScript文件的URL即可。
15.1.3 JavaScript語法基礎
1、語言編碼
JavaScript語言建立在Unicode字符集基礎上，在腳本中，用戶可以使用雙字節的字符命名常量、變量或函數等。
建議用戶不要使用中文命名，但在註釋中可以考慮中文字符。
2、大小寫敏感
與HTML標簽和CSS樣式碼不同，JavaScript對於大小寫敏感。為了避免出錯，建議使用小寫字符命名變量；對於保留字可以根據系統的默認大小來輸入；對於特定變量，可以使用大寫字符，或者以大寫字符開頭。
對於復合型變量名稱，可以遵循一般編程的駝峰式命名法——名稱的第一個單詞全部小寫，後面的單詞首字母大寫。
3、代碼格式化
JavaScript一般忽略分隔符，如空格符、制表符合換行符。在保證不引起歧義的情況下，用戶可以利用分隔符對腳本進行排版。但不能在連在一起的變量名、關鍵字中間插入分隔符。
4、代碼註釋
JavaScript支持兩種註釋形式：
- 單行註釋，以雙斜杠表示
//這是單行註釋
- 多行註釋，以“/*”和“*/”分隔符進行標識
/* 多行註釋 多行註釋 */go
5、標簽
在JavaScript腳本中可以加上標簽，方便JavaScript程序進行快速定位。標簽一般由一個合法的字符名稱加上一個冒號組成。標簽可以為該行設置一個標記，在結構體中使用break、continue等跳轉語句跳出循環。
6、關鍵字和保留字
關鍵字是指JavaScript默認定義具有特殊含義的詞匯，如指令名、語句名、函數名、方法名、對象名、屬性名。
保留字就是現在還沒使用，但預留以後作為關鍵字使用。
15.1.4 認識JavaScript語法特性
構成JavaScript語言的基本語素包括3種，與漢語語法類似，說明如下：
- 詞
詞是JavaScript語言的最小語義單元，包括常量、變量、運算符、表達式、指令、修飾符等。詞之間以空格進行分隔。
- 句子
句子是由一個或多個詞構成的完整邏輯部分，句子以分號作為結束標誌，也可以只以換行符作為結束標誌。
- 段落
段落是由一對大括號包含的一段代碼，段落內容可以是一句或多句完整的句子，也可以在段落內嵌套另一個段落，形成結構嵌套。
段落前面可以添加修飾詞——限制對象的謂詞。謂詞有域謂詞（指明對象的作用域或作用範圍）、邏輯謂詞（邏輯關系）、函數謂詞（函數名、函數參數等）。
JavaScript語言還大量使用標點符號作為命令或語法符號，如大括號{}、中括號和小括號等。
- 對象（{}）
對象都以左大括號（{）開始，以右大括號（}）結束，裏面一個或多個“名/值”對，“名/值”對之間沒有先後順序關系。
每個“名/值”對內的“名稱”和“值”之間使用冒號（:）進行分隔，而“名/值”對與“名/值”對之間使用逗號分隔。
使用點號可以引用對象的屬性和方法，在調用對象方法時應在函數名稱後面補加小括號。
- 數組（[]）
數組以左中括號（[）開始，以右中括號（]）結束，中間可以包含多值，值之間使用逗號分隔。數組（array）是值（value）的有序集合。
- 調用和邏輯分隔（()）
在JavaScript中，小括號表示一個運算符，用於調用函數。小括號也可以作為邏輯分隔符，在定義函數時，放在函數名稱的後面，用來分隔函數和參數。
15.2 常量和變量
JavaScript暫不支持constant關鍵字，不允許用戶自定義常量，但是提供了幾個默認常量供開發使用。
- Math.E：常量e，自然對數的底數；
- Math.LN10：10的自然對數；
- Math.LN2：2的自然對數；
- Math.LOG10E：以10為底的e的對數；
- Math.LOG2E：以2為底的e的對數；
- Math.PI：常量PI；
- Math.SQRT1_2：1/2的平方根;
- Math.SQRT2：2的平方根；
- Number.MAX_VALUE：可表示的最大的數；
- Number.MIN_VALUE：可表示的最小的數；
- Number.NaN：非數字值；
- Number.NEGATIVE_INFINITY：負無窮大，溢出時返回該值；
- Number.POSITIVE_INFINITY：正無窮大，溢出時返回該值。
JavaScript使用var關鍵字聲明變量。
JavaScript也支持不使用var命令，直接使用未聲明的變量，但建議先聲明後使用。
聲明變量之後，在沒有初始化之前，則它的初始值為undefined（未定義的值）。
變量命名規則如下：
- 首字符必須是大寫或小寫的字母、下劃線或美元符，後續的字母可以是字母、數字、下劃線或美元符；
- 變量名稱不能是JavaScript關鍵字或保留字；
- 變量名稱長度任意，區分大小寫。
還有一些軟約束：
- 變量聲明集中、置頂，如文檔的前面、代碼段的前面，或者函數內的上面；
- 使用局部變量，不要把所有的變量放在段首，如果僅在函數內使用，建議在函數內聲明；
- 變量名應該易於理解；
- 聲明變量之前，應該規劃好，避免類似usrname與usrName混用現象。
在函數內部使用var關鍵字聲明的變量就是私有變量，該變量的作用域僅限於當前函數體內，但是如果不使用var關鍵字定義的變量都是全局變量，不管是在函數內或者函數外，在整個頁面腳本中都是可見的。
15.3 表達式和運算符
表達式是指可以運算，且必須返回一個確定的值的式子。表達式一般有常量、變量、運算符、字表達式構成。
值表達式的返回值為它本身，而變量表達式的返回值為變量存儲或引用的值。
把簡單的表達式合並為一個復雜的表達式，連接表達式的符號就是運算符。
運算符一般使用符號來表示，如“+”、“-”；也有些運算符使用關鍵字來表示，如deleter、void。
作用於運算符的子表達式被稱為操作數。根據結合操作數的個數，JavaScript運算符可以分為：
- 一元運算符，把一個操作數運算後轉換為另一個操作數；
- 二元運算符，結合兩個操作數；
- 三元運算符，能夠結合三格操作數，JavaScript僅定義了一個三元運算符（?:），相當於條件語句。
15.4 語句
語句就是JavaScript指令，可以設計程序的邏輯執行順序。
15.4.1 表達式語句和語句塊
如果在表達式的尾部附加一個分號就會形成一個表達式語句。JavaScript默認獨立一行的表達式也是一個表達式語句。
語句塊就是由大括號包含的一個或多個語句。
15.4.2 條件語句
程序的基本邏輯結構包括3種：順序、選擇和循環。大部分控制語句屬於順序結構，條件語句屬於選擇結構，包括if語句和switch語句兩種。
1、if語句
if語句的基本語法如下：
if(condition) statements
其中condition是一個表達式，statement是一個句子或段落。當condition表達式的結果不是false，那麽就執行statements從句的內容。
在if語句的基本形式上還可以擴展如下語法，表示condition表達式條件為true，則執行statements1從句，否則執行statements從句。
if (condition) statements1 else statements2
2、switch語句
對於多條件的嵌套結構，更簡潔的方法是使用switch語句。語法如下：
switch (expression){ case label1: statement1; break; case label2: statement2; break; ... default : statementn; }
switch語句首先計算switch關鍵字後面的表達式，然後按出現的先後順序計算case後面的表達式，直到找到與switch表達式的值等同（===）的值為止。case表達式通過等同運算來進行判斷，因此表達式匹配的時候不進行類型轉換。
15.4.3 循環語句
循環語句——能夠重復執行相同操作的語句。兩種基本語法形式：while語句和for語句。
1、while語句
while(condition){ statements }
每次循環前計算condition表達式。如果為true，執行循環體內的語句；如果為false，跳出循環，執行while語句後面的語句。
while語句有一種變體：
do statements while(condition);
首先執行statement一次，在每次循環結束之後計算condition條件。
2、for語句
比while語句簡潔
for([initial-expression;][condition;][increment-expression]){ statements }
先計算初始化表達式（initial-expression），典型情況下用於初始化計數器變量，可選用var聲明新變量；
條件測試是可選的，如果缺省則條件始終為true，除非循環體內使用break語句，否則不能終止循環；
increment-expression表達式用於更新或自增計數器變量。
15.4.4 跳轉語句
跳轉語句能夠從所在的分支、循環或從函數調用返回的語句跳出。JavaScript的跳出語句包括3種：break、continue、return。
break用來跳出循環或者switch語句。語法為：
break;
跳轉語句可以與標記結合使用，以實現跳轉到指定的行，而不是僅僅跳出循環體。
x: for(a=1; a<10; a++){ document.write("<br />"+a+"<br />"); for(var b=1;b<10;b++){ if (a>5) break x; } }
continue語句的用法與break類似，但是continue不會退出循環，而是重新執行循環語句。continue只能用在循環體中。
return用來指定函數的返回值，只能夠用在函數或者閉包中。語法如下：
return [expression]
先計算expression表達式，然後返回表達式的值，並將控制邏輯從函數體內返回。
15.4.5 異常處理語句
異常表示一種非正常的信息，提示程序出現了錯誤。JavaScript通過一定的機制使異常信號暴露出來，這個操作被稱為拋出（throw）；使用異常處理語句捕獲（catch）這個異常，進行處理。
JavaScript中使用try、catch、finally來作異常處理的語句。語法如下：
try { //執行語句 CreateException(); } catch(ex) //捕獲異常 { alert(ex.number+"\n"+ex.description); } finally //最後必須執行的語句 { alert("end"); }
15.4.6 var語句和function語句變量
var語句聲明一個或多個變量，可以在聲明變量時進行初始化。默認變量初始值為undefined。
function用來定義函數，基本形式如下：
function [name][param],[param],...[param]){ statements }
name表示函數的名稱，param表示要傳遞給函數的參數名稱，一個函數最多可以有255個參數。
15.4.7 with語句和空語句
with語句能夠為一組語句創建缺省的對象，用法如下：
with(object){ statements }
with語句能夠破變量的作用域鏈，不建議使用。
空語句只有一個獨立的分號，作用是創建一個主體為空的條件或者循環。如：
while(true){ ; }
上面代碼創建了一個主體為空的循環。
15.5 數據類型
JavaScript中，數據存在兩種截然不同的存儲方式。一種是直接存儲數據，稱為值類型數據；一種是存儲數據的空間地址來間接保存數據，稱為引用型數據。
15.5.1 數值
JavaScript包含3種基本數據類型：數值、字符串和布爾值。
JavaScript數值不區分整型和浮點數，所有數值都為浮點型數值。
使用toString()方法可以把數值轉換為字符串。
使用數值與空字符串相加，即可把數值轉換為字符串。
var a=100; var c=a+""; alert(typeof(c));
15.5.2 字符串
字符串由Unicode字符、數字、標點符號等組成的字符序列，必須用單引號或雙引號包括起來。所有字符應該在同一行內書寫。
var str1="字符串序列"; var str2="‘JavaScript‘不是‘Java‘"; var str3=‘<meta charset="utf-8">‘;
使用parseInt()和parseFloat()方法可以把字符串轉換為數值。
便捷方法：讓字符串與1相乘，即可把字符串快速轉換為數值。
15.5.3 布爾值
布爾型數據僅兩個值：true和false，分別表示邏輯的真和假。布爾值多用在邏輯運算、比較運算中，或者作為條件語句或運算符的條件而使用。
要把任何值轉換為布爾值數據，在值的前面增加兩個嘆號即可。
任何非0數字轉換為布爾值為true，而0轉換為布爾值為false。
任何非空字符串轉換為布爾值為true，而空格轉換為布爾值為false。
如果把布爾值轉換為字符串，則true為“true”，false為“false”。
如果把布爾值轉換為數字，則true為1，false為0。
JavaScript語法系統有一組假值，布爾值都是false，具體如下：
0 //Number NaN //Number ‘‘ //String false //Boolean null //Object undefined //Undefined
15.5.4 null和undefined
null是Null類型的值，表示空值。當對象為空，或者變量沒有引用任何對象，返回值為null。
undefined表示未定義的值，當變量未初始化時，會默認其值為undefined。
15.5.5 引用型數據
引用型數據包括：數組、對象和函數等。將在下面各節詳解。
15.6 函數
15.6.1 定義函數
定義函數的方法有兩種：
- 使用function語句聲明函數；
- 通過function對象來構造函數。
使用function來定義函數有兩種方式：
//方式1：命名函數 function f() { //函數體 } //方式2：匿名函數 var f=function(){ //函數體 }
匿名函數的方法也被稱為引用式函數或函數表達式，即把函數看做一個復雜的表達式，並把表達式賦予給變量。
使用Function對象構造函數的語法如下：
var function_name=new Function(arg1, arg2, ..., argN, function_body)
每個arg都是一個函數參數，最後一個參數是函數主體（要執行的代碼）。Function()的所有參數必須是字符串。
15.6.2 調用函數
調用函數使用小括號運算符來實現。在括號運算符內部可以包含多個參數列表，參數之間通過逗號分隔。例如：
function f(){ return "Hello, World!"; //設置函數返回值 } document.write(f()); //調用函數，並輸出返回值
一個函數可以包含多個return語句，但是在調用函數時只有第一個return語句被執行，且該return後面的表達式的值作為函數的返回值被返回，return語句後面的代碼將被忽略掉。
函數的返回值沒有類型限制，它可以返回任意類型的值。
15.6.3 函數參數
參數可以分為兩種：形參和實參。
- 形參是定義函數時，傳遞給函數的參數，形式上參數；
- 實參是當函數被調用時，傳給函數的參數。
如果形參多於實參，多出的形參值為undefined；如果形參少於實參，多出的實參被忽略掉。
JavaScript定義了Arguments對象，利用該對象可以快速操縱函數的實參。使用arguments.length可以獲取函數實參的個數，使用數組下標（arguments[n]）可以獲取實際傳遞給函數的每個參數值。
15.6.4 函數應用
1、匿名函數
當只需要一次性使用函數時，使用匿名函數會更加有效率。
var z=function(x,y){ return (x+y)/2; } (23,35); //返回29
2、函數作為值
函數實際上是一種結構復雜的數據，因此可以把它作為值賦予給其它變量。
var a=function(x, y) { return (x+y)/2; } alert ( a(12,33) ); //返回22.5
3、函數作為參數
函數作為值可以傳遞，因此可以把函數作為參數傳遞給另一個函數，也可以作為返回值。
4、函數作為表達式
函數可以參與到表達式運算中。
15.6.5 閉包函數
閉包是一個擁有許多變量和綁定了這些變量的環境的表達式。閉包函數（外部函數）被調用後，它的變量不會消失，仍然被內部函數所使用，而且所有的內部函數擁有對外部函數的訪問權限。
15.7 對象
對象時面對對象編程的核心概念，它是已經命名的數據集合，也是一種更復雜的數據結構。
15.7.1 創建對象
對象是由new運算符生成，生成對象的函數被稱為類（或構造函數、對象類型）。生成的對象被稱為類的實例，簡稱對象。
var o=new Object(); //構造原型對象 var date=new Date(); //構造日期對象 var ptn=new RegExp("ab+c","i"); //構造正則表達式對象
也可以通過大括號定義對象直接量，用法如下：
{
name: value,
name1:value1,
......
}
對象直接量由一個列表構成，元素是用冒號分隔的屬性/值對，元素之間用逗號分開。
15.7.2 訪問對象
可以通過點號運算符（.）來訪問對象的屬性，如
var point={ x:2.3, y:-1.2 }; var x=point.x; //訪問對象的屬性值
當屬性值為函數時，該屬性就被稱為對象的方法，使用小括號可以訪問該方法。
var point={ f: function(){ //對象方法 return this.y; //返回當前對象屬性y的值 }, y:1.2 //對象屬性 }; var y=point.f(); //調用對象的方法
上面代碼中，關鍵字this代表當前對象，這裏的this總是指向調用當前方法的對象point。
當屬性為對象時，就可以設計嵌套對象，可以連續使用點號運算符訪問內部對象。
var point= { //外部對象 x : { //嵌套對象 a : 1, //內部對象的屬性 b : 2 }, y : 1.2 //外部對象的屬性 }; var a= point.x.a; //訪問嵌套對象的屬性值
也可以通過集合運算符（[]）來訪問對象的屬性，此時可以使用字符串下標來表示屬性。
var point= { //外部對象 x : { //嵌套對象 a : 1, //內部對象的屬性 b : 2 }, y : 1.2 //外部對象的屬性 }; var a= point["x"]["a"]; //訪問嵌套對象的屬性值
15.8 數組
對象是無序的數據集合，而數組（Array）是一組有序數據集合。它們之間可以相互轉換。
15.8.1 定義數組
通過構造函數Array()和運算符new來實現。
（1）定義空數組
var a=new Array();
（2）定義帶有參數的數組
var a=new Array(1,2,3,"4","5");
數組中每個參數都表示數組的一個元素值，數組的元素沒有類型限制。可以通過數組下標定位元素，通過數組的length屬性確定數組的長度。
（3）定義指定長度的數組
var a=new Array(6);
沒有為元素初始化賦值，它們的初始值都是undefined。
定義數組時，可以省略new運算符，直接使用Array()函數來實現。
（4）定義數組直接量
var a=[1,2,3,"4","5"];
15.8.2 存取元素
使用[]運算符可以存取數組元素的值。方括號左邊是數組的應用，方括號內是非負整數值的表達式。如：
var a=[1,2,3,"4","5"]; a[2]=2; //修改第二個元素的值 alert(a[2]); //提示為2
數組的大小不固定，可以動態增加或刪除數組元素。
1、通過改變數組的length屬性來實現
var a=[1,2,3,4,5]; a.length=4; document.write(a);
當改變數組的長度時，會自動在數組的末尾增加或刪除元素，以實現改變數組的大小。
使用delete運算符可以刪除數組元素的值，但是不會改變length屬性的值。
2、使用push()和pop()方法來操作數組
push()可以在數組的末尾插入一個或多個元素，pop()可以依次把它們從數組中刪除。
var a=[]; //定義一個空數組 a.push(1,2,3); //得到數組[1,2,3] a.push(4,5); //得到數組[1,2,3,4,5] a.pop(); //得到數組[1,2,3,4]
push()可以帶多個任意類型的參數，按順序插入到數組末尾，並返回操作後數組的長度。
pop()方法不帶參數，返回數組中最後一個元素的值。
3、使用unshift()和shift()方法
和push()/pop()方法操作類似，但是作用於數組的頭部。
4、使用splice()方法
通用刪除和插入元素的方法，可以在數組指定的位置開始刪除或插入元素。
3個參數：指定插入的起始位置，指定要刪除元素的個數，表示插入的具體元素。
var a=[1,2,3,4,5,6]; var b=a.splice(2,2); document.write(a+"<br />"); //輸出[1,2,5,6] document.write(b); //輸出[3,4]
var a=[1,2,3,4,5,6]; var b=a.splice(2,2,7,8,9); document.write(a+"<br />"); //輸出[1,2,7,8,9,5,6] document.write(b); //輸出[3,4]
15.8.3 數組應用
1、數組與字符串互轉
join()可以把數組轉換為多種形式的字符串，join()包含一個參數——用來定義合並元素的連字符。如果不提供參數，默認以逗號連接。
var a=[1,2,3,4,5]; a=a.join("-"); document.write("a類型="+typeof(a)+"<br />"); document.write("a的值="+a);
split()可以把字符串劈開為一個數組，包含兩個參數——指定劈開的分隔符，指定返回數組的長度。
var a=[1,2,3,4,5]; a=a.join("-"); var s=a.split("-"); document.write("s類型="+typeof(s)+"<br />"); document.write("s的值="+s);
2、數組排順
使用reverse()方法可以顛倒數組元素的順序，該方法是在原數組基礎上進行操作，不會新建數組。
sort()方法能夠對於數組中的元素進行排序，排序的方法由其參數決定。這個參數是一個比較兩個元素值的閉包。如果省略參數，則sort()方法按默認規則排序。
var a=[3,2,5,1,4]; var f=function(x,y){ return y-x; }; var b=a.sort(f); document.write(b); //輸出[5,4,3,2,1]
3、連接數組
concat()方法能夠把該方法中的參數追加到指定數組中，形成新的數組。如果concat()方法中的參數包含數組，則把數組元素展開添加到數組中。
var a=[1,2,3,4,5]; var b=a.concat([4,5],[1,[2,3]]); document.write(b); //輸出[1,2,3,4,5,4,5,1,2,3]
4、截取子數組
slice()方法將返回數組中指定的片段，包含兩個參數——要返回子數組在原數組中的起止點。第一個參數指定的元素被截取，第二個參數指定的元素不被截取。
var a=[1,2,3,4,5,6,7,8,9]; var b=a.slice(2,5); document.write(b); //輸出[3,4,5]
學習筆記 第十五章 JavaScript基礎