- WebGL 3D開發(fā)實戰(zhàn)詳解（第2版）
- 吳亞峰 于復興 索依娜
- 5178字
- 2020-07-07 17:17:03
1.5 初識JavaScript
JavaScript是面向Web的編程語言。絕大多數現代網站都是用了JavaScript，并且所有的現代Web瀏覽器——基于桌面系統、游戲機、平板電腦和智能手機的瀏覽器——均包含了JavaScript解釋器。這使得JavaScript可稱為史上使用廣泛的編程語言。
“JavaScript”這個名字經常被誤解。除了語法看起來和Java類似之外，JavaScript與Java是完全不同的兩種編程語言。JavaScript早已超出了“腳本語言”本身的范疇，而成為一種集健壯性、高效性和通用性為一身的編程語言。
1.5.1 JavaScript的名字和版本
JavaScript是由Web發(fā)展初期的網景（Netscape）公司創(chuàng)建的，“JavaScript”是Sun Microsystem公司（Oracle）的注冊商標，用來特指網景（Mozilla）對這門語言的實現。網景將這門語言作為標準提交給了ECMA（歐洲計算機制造協會），由于商標上的沖突，所以這門語言的標準版本改為“ECMAScript”。
當提到這門語言時，通常所指的語言版本是ECMAScript 3和ECMAScript 5，有時會看到JavaScript的版本號，這些是Mozilla的版本號：版本1.5基本上就是ECMAScript 3, JavaScript解釋器也有版本號，現在為3.0。
1.5.2 準備使用JavaScript
本節(jié)中關注的是Web編程需要核心JavaScript特性。這里不會將全部的JavaScript內容講述清楚，因為若是想完成這些工作本書的厚度是不夠的。如果讀者想要深入學習這方面的知識，則可以在網上選購幾本這方面的書來提升自己的能力。
在HTML文檔中定義腳本時有幾種方法可供選擇，既可以定義內嵌腳本（即腳本是HTML文檔的一部分，用<script>標簽可實現），也可以定義外部腳本（腳本包含在另一個文件中，通過一個URL引用）。這兩種方法都用到了script元素。
1 <! DOCTYPE HTML>
2 <html><head><title>Example</title></head>
3 <body><script type="text/javascript">
4 document.writeln("Hello"); </script> //輸出語句
5 </body></html>
本段腳本的作用是在文檔中加入單詞Hello。script元素位于文檔中其他內容之后，這樣在腳本執(zhí)行之前瀏覽器就已經對其他元素進行了解析，讀者可以自行將本段代碼輸入到html文件中，并在網頁中運行以查看效果。
上述代碼為一個簡單的JavaScript案例應用，并且定義HTML文檔為內嵌腳本。在WebGL的開發(fā)中，除了在一些html文件中定義了stat方法外，剩下的腳本使用的都是通過URL來調用外部腳本。但是在本節(jié)介紹JavaScript基礎時，我們會用內嵌腳本方式示例。
1.5.3 使用語句
JavaScript的基本元素是語句，一條語句代表一條命令，通常以分號結尾。實際上分號也可以不用，不過加上分號可讓代碼更易閱讀，并且可以在一行書寫幾條語句。下面我們來看一下使用輸出語句與定義一些函數的案例。
代碼位置：隨書源代碼/第1章目錄下的HTML5/Sample1_19.html。
1 <! DOCTYPE html>
2 <html><head><title>Sample1_19</title>
3 </head><body>
4 <style type="text/javascript">
5 document.writeln("輸出一句話。"); //輸出語句
6 document.writeln("輸出另一句話。");
7 function myFun(){ //定義一個函數，用于輸出一句話
8 document.writeln("調用方法輸出一句話。); };
9 myFun(); //調用定義的函數
10 function mayFun1(name, weather){ //定義一個帶參數的函數
11 document.writeln("Hello"+name+".");
12 document.writeln("It is"+weather+"today."); };
13 myFun1("Tom", "Sunny"); //調用帶參數的函數
14 function myFun2(name){ //定義一個帶返回結果的函數
15 return("Hello"+name+"."); }
16 document.writeln(myFun2("Tom"));
17 </script></body></html>
說明
上面代碼內嵌在腳本中演示了語句如何使用。JavaScript的基本元素是語句。有時候可以將幾條語句包含在一個函數中，瀏覽器只有遇到調用該函數的語句時才會執(zhí)行它。函數所含語句被包圍在一對大括號之間，成為代碼塊。
前面講述的HTML事件，一般情況下大家在日后的開發(fā)中會結合某些事件來調用JavaScript函數。另外需要注意的是，在調用有參函數時，參數個數可以比定義的少，此時缺少的參數值便會默認為undefined。如果多出參數，那么多出的會被忽略。
熟悉Java開發(fā)的讀者知道，在Java開發(fā)中大家可以開發(fā)函數名相同但是參數個數不同的函數，這在JavaScript中是萬萬不可的。如果有兩個相同名字的函數但參數個數不同，那么第二個定義將會取代第一個。
1.5.4 使用變量和類型
使用關鍵字var定義變量，在定義同時還可以像在一條單獨語句中那樣為其賦值。定義在函數中的變量為局部變量，只能在該函數范圍內使用。直接在script元素中定義的變量稱為全局變量，可以在任何地方使用（包括在其他腳本中）。
代碼位置：隨書源代碼/第1章目錄下的HTML5/Sample1_20.html。
1 <! DOCTYPE html>
2 <html><head><title>Sample1_20</title>
3 </head><body>
4 <script type="text/javascript">
5 var myglobalvar="apple"; //定義全局變量
6 function myFun(){ //聲明一個方法
7 var mylocalvar="sunny"; //定義局部變量
8 return("Hello"+name+".Today is"+mylocalvar+"."); };
9 document.writeln(myFun("Tom"));
10 document.writeln("I like"+myglobalvar+".");
11 var string1="This is a string."; //使用JavaScript的基本類型——字符串變量
12 var string2="This is a string.";
13 var bool1=true; //使用JavaScript的基本類型——布爾變量
14 var bool2=false;
15 var daysinweek=7; //使用JavaScript的基本類型——數值變量
16 var pi=3.14; //JavaScript中的整數、浮點數都用var來聲明
17 var hexValue=0xFFFF; //十六進制數
18 var mydata=new Object(); //創(chuàng)建對象
19 mydata.name="Tom"; //為對象屬性賦值
20 mydata.weather="sunny";
21 document.writeln("Hello"+mydata.name+".");
22 document.writeln("Today is "+ mydata.weather+".");
23 var mydata1={ //使用對象字面變量
24 name:"Tom", //為對象屬性賦值
25 weather:"Sunny"};
26 document.writeln("Hello"+mydata1.name+"."); //使用對象屬性
27 document.writeln("Today is"+mydata1.weather+".");
28 var mydata2={ //為對象添加方法
29 name:"Tom", //為對象屬性賦值
30 weather:"Sunny",
31 printMessages: function(){ //給對象屬性聲明一個方法
32 document.writeln("Hello"+mydata2.name+".");
33 document.writeln("Today is "+ mydata2.weather+"."); }};
34 mydata2.printMessages(); //讀取和修改對象屬性值
35 var mydata3={
36 name:"Tom"; //為對象屬性賦值
37 weather:"Sunny"; };
38 mydata3.name="Jerry"; //修改對象屬性值
39 mydata3["weather"]="raining";
40 document.writeln("Hello"+mydata3.name+"."); //讀取對象屬性值
41 document.writeln("Today is "+ mydata3.weather+".");
42 </script></body></html>
? 第5～10行為使用局部變量與全局變量。JavaScript是一種弱類型語言，但這不代表它沒有類型，而是指它不用明確聲明變量的類型即可隨心所欲地用同一變量表示不同類型的值。
? 第11～17行為聲明各種基本類型。字符串可以用夾在一對雙括號或單引號之間的一串字符來表示。布爾類型有兩個值：true和false。整數和浮點數都用number類型來表示，定義數值變量時不必聲明所用的是哪種數值，只需寫清楚值即可。
? 第18～41行創(chuàng)建對象的一些代碼。JavaScript支持對象概念，有多種方法可以創(chuàng)建對象，可以用對象字面量的方式定義一個對象及其屬性，也可以在聲明完對象后添加屬性。在創(chuàng)建好對象后，還可以修改對象的屬性值。
使用對象的時候還可以枚舉對象屬性，可以用for…in語句枚舉對象屬性。for…in循環(huán)代碼塊中的語句會對對象的每一個屬性執(zhí)行一次。在每一次迭代過程中，所需要處理的屬性名會被賦值給變量。大家看看下面這個簡短的例子。
1 <! DOCTYPE HTML>
2 <html><head><title>Example</title></head>
3 <body><script type="text/javascript">
4 var mydata={ //聲明一個對象
5 name:"Tom", //為對象的屬性賦值
6 weather:"Sunny",
7 printMessages:function(){ //為對象添加方法
8 document.writeln("Hello"+mydata.name+"."); //讀取對象的屬性值
9 document.writeln("Today is "+ mydata.weather+"."); }};
10 for(var prop in mydata){ //枚舉對象的屬性值
11 document.writeln("Name" + prop + "Value:" + mydata[prop]); }
12 </script></body></html>
圖1-21所示為這段代碼的運行效果，從中可以看到，作為方法定義的函數也被枚舉出來了。JavaScript在處理函數方面非常靈活，方法本身也被視為對象的屬性，這就是其結果。除了枚舉對象屬性，還有增刪屬性等。
圖1-21 案例運行效果
在日后的開發(fā)中會經常用到對象，不論是內嵌在JavaScript腳本中創(chuàng)建的對象，還是外部定義的要通過URL引用JavaScript的腳本，大家可以通過創(chuàng)建對象引用來實現相應功能，這些在后面的開發(fā)中要多留心觀察。
1.5.5 JavaScript運算符
有編程經驗的讀者都明白，不論是什么語言都會經常用到運算符，JavaScript當然也不會例外。幸運的是，JavaScript的運算符與一般編程語言中的運算符沒有多大的差別，所以這里簡單介紹一下，表1-13所示為JavaScript運算符及其描述。
表1-13 JavaScript運算符
通過瀏覽表1-13大家不難發(fā)現這些運算符在入門學習任何一門編程語言時都會有詳盡的介紹，所以這里便不再贅述了。表中描述的x、y假設均為已經聲明好的變量旨在幫助讀者理解運算符。
1.5.6 使用數組
JavaScript數組的工作方式與大多數編程語言中的數組類似，一般在枚舉數組時都會使用{}，但在JavaScript中聲明數組使用[]而不是用花括號。下面來看一下如何用JavaScript創(chuàng)建數組，以及使用數組對象。
代碼位置：隨書源代碼/第1章目錄下的HTML5/Sample1_21.html。
1 <! DOCTYPE HTML>
2 <html><head><title>Sample1_21</title></head>
3 <body><script type="text/javascript">
4 var myarray=new Array(); //創(chuàng)建與填充數組
5 myarray[0]=100; //為數組賦值
6 myarray[1]="Tom";
7 myarray[2]=true;
8 var myarray1=[100, "Tom", true]; //使用數組字面量創(chuàng)建數組
9 var myarray2=[100, "Tom", true]; //讀取指定索引位置的數組元素值
10 document.writeln("Index 0" + myarray2[0]);
11 var myarray3=[100, "Tom", true]; //修改數組內容
12 myarray3[0]="Tuesday";
13 document.writeln("Index 0" + myarray3[0]);
14 var myarray4=[100, "Tom", true]; //枚舉數組內容
15 for(var i=0; i<myarray4.length; i++){ //myarray4.length為數組的長度
16 document.writeln("Index 0" + myarray4[0]); }
17 </script></body></html>
? 第4～7行為調用new Array()創(chuàng)建一個新的數組。這是一個空數組，它被賦給變量myarray，后面的語句是給數組中的幾個索引位置賦值。
? 第8～16行為數組的基本應用，包括通過數組字面量創(chuàng)建數組，讀取指定索引位置的數組元素值，通過索引值來改變數組內容，遍歷數組元素內容。我們在學習基礎的編程語言時都已經學到這些基本的操作，這里的用法與之相差不大。
此例需要注意兩點，第一點是在創(chuàng)建數組的時候不需要聲明數組中的元素個數，JavaScript數組會自動調整大小以便容納所有元素。第二點是不必聲明數組所含數據的類型，JavaScript數組可以包含各種類型的數據。
有編程經驗的讀者知道除了上面所講的數組基礎用法外還應知道一些數組方法，下面我們便來看一下表1-14所列出的常用數組方法。由于篇幅有限所以這些方法的應用不再過多介紹了，讀者可以對照著說明自行試驗。
表1-14 常用數組方法
講完數組后，JavaScript的基礎內容基本結束了，JavaScript與Java類似也有處理錯誤。這里的處理錯誤也是用try…catch語句來實現，如果有錯誤發(fā)生，那么try子句中語句的執(zhí)行將立即被停止，控制權轉移到catch子句中。發(fā)生的錯誤由一個Error對象描述，它會傳遞給catch子句。
1.5.7 創(chuàng)建自己的JavaScript對象
在JavaScript中，不但可以使用系統提供的對象，還可以創(chuàng)建自己的對象，相當于把Java中類的聲明和對象的創(chuàng)建合二為一了。由于創(chuàng)建對象時對象不止只有一個屬性，所以屬性與屬性之間用逗號分隔，其余的聲明規(guī)則與Java類似。其簡略語法如下
<引用名>={<屬性名>:<屬性值>, {<屬性名>:<屬性值>……}}
在JavaScript中，對象實際上可以看作數組，因此對象的成員不僅可以用“<引用>.<屬性>”的方式來訪問，還可以用“<引用>[<屬性>]”像數組一樣來使用。如果希望對象可以重用，也可以像Java那樣先聲明類再new對象，其語法如下：
function<類名>([構造函數參數列表]) {
this.<屬性名1>=<構造函數參數>;
……
this.<屬性名n>=<構造函數參數>;
}
實際上類的聲明就是一個函數的聲明，只是在函數中多了“this.<屬性名>”，這既是屬性的聲明同時又進行了初始化。大家都知道一個類不但可以有屬性，還可以有方法，給類添加方法的語法如下：
function<類名>([構造函數參數列表]){
this.<方法名1>=<函數名1>; //函數可以是在任意地方聲明的函數
……
this.<方法名n>=<函數名n>;
}
實際上方法的聲明就是把已經寫好的函數分配給一個屬性。前面說過由于對象可以看作一個數組，所以可以對對象的屬性進行遍歷。在JavaScript中，可以方便地利用下面形式的for語句對指定對象的所有屬性進行遍歷：
for(var<變量>in<對象引用>){
//語句序列
}
對象操作的基本方法就這么多，用操作符“new”創(chuàng)建對象，釋放（刪除）對象時使用“delete”操作符。由于JavaScript是弱類型語言，所以在下一節(jié)中會看到無論聲明什么類型的變量都會為var字符。有時判斷變量的類型，這就要使用“typeof”操作符，如表1-15所示。
表1-15 typeof操作符的應用
“typeof”操作返回的是一個字符串。從表1-15可以看到typeof返回了一個undefined。在JavaScript中不但true/false布爾類變量可以參與邏輯計算，undefined和null都可以當作邏輯false來使用。JavaScript支持原型，使用原型可以向已有對象類型注射新的方法、屬性。
代碼位置：隨書源代碼/第1章目錄下的HTML5/Sample1_22.html。
1 <! DOCTYPE html>
2 <html><head><title>Sample1_22</title>
3 </head><body>
4 <script type="text/javascript">
5 tom={name:"Tom", age:21}; //創(chuàng)建自己的對象
6 document.write("Name:"+tom.name+"<br>"); //讀取對象的屬性值
7 document.write("Age:"+tom.age+"<br>");
8 //對象可以看作數組，用數組形式訪問對象，下面的例子便演示了如何用數組形式訪問對象
9 tom={name:"Tom", age:21};
10 document.write("Name:"+tom["name"]+"<br>"); //用數組形式訪問對象
11 document.write("Age:"+tom["age"]+"<br>");
12 //對象的重用，可以像Java那樣先聲明類再new對象
13 function Student(sno, sname, sage, sclass){ //聲明student類
14 this.sno=sno; //為student類添加屬性
15 this.sname=sname; //為屬性添加屬性值
16 this.sage=sage;
17 this.sclass=sclass; }
18 tom=new Student("10001", "Tom",21, "97002"); //創(chuàng)建Student對象
19 document.write(tom.sname+"<br>");
20 //給類添加方法，即為類中的屬性添加方法
21 function Student1(sno, sname, sage, sclass){ //聲明student1
22 this.sno=sno; //將student類聲明中傳入的參數賦值給屬性
23 this.sname=sname; //為sname屬性賦值
24 this.sage=sage; //為sage屬性賦值
25 this.sclass=sclass; //為sclass屬性賦值
26 this.toString=toString; } //把toString方法掛接到Student
27 function toString(){ //聲明toString方法
28 var result=""; //聲明一個空白字符串
29 result+="學號： "+this.sno+"<br>"; //為字符串添加學號內容
30 result+="姓名： "+this.sname+"<br>"; //為字符串添加姓名內容
31 result+="年齡： "+this.sage+"<br>"; //為字符串添加年齡內容
32 result+="班級： "+this.sclass+"<br>"; //為字符串添加班級內容中
33 return result; } //將最終所得字符串返回
34 tom=new Student1("10001", "Tom",21, "97002"); //創(chuàng)建Student1對象
35 document.write(tom.toString());
36 tom={name:"Tom", age:21, no:10001}; //對對象的屬性進行遍歷
37 for(var i in tom){ //對象屬性用循環(huán)進行遍歷
38 document.write(i+":"+tom[i]+"<br>"); }
39 function toWyfString(){ //用原型給已有對象注射新方法、新屬性
40 var ss=this.wyfTime+this.toGMTString(); //得到系統時間
41 return ss; } //將字符串返回
42 function toGMTString(){
43 return "HaHa! ! ! ";
44 } //使用原型可以向已有的對象類型注射新方法、屬性
45 //對對象的功能進行擴展，同時也能覆蓋原有的方法
46 Date.prototype.wyfTime="WYF: "; //拓展對象屬性
47 Date.prototype.toWyfString = toWyfString; //覆蓋原有的方法
48 d=new Date();
49 document.write(d.toWyfString()+"<br>");
50 document.write(d.toGMTString()+"<br>");
51 Date.prototype.toGMTString = toGMTString; //覆蓋原有的方法
52 document.write(d.toGMTString()+"<br>");
53 </script></body></html>
? 第5～19行為創(chuàng)建自己的對象與對象的重用。這一部分的內容與Java沒有太大的差異。在創(chuàng)建自己的對象時，相當于將類的聲明和對象的創(chuàng)建合二為一了，對象的聲明實際上就是函數的聲明，只不過在函數體中多了this.<屬性名>。
? 第20～38行為類添加方法與對對象屬性進行遍歷。實際上添加方法就是把已經寫好的函數分配給一個屬性。用var變量in對象引用的方式對對象屬性進行遍歷。本例是將每個屬性輸出了一遍。
? 第39～53行為使用原型給已有對象注射新方法、新屬性。示例中對對象的屬性進行了拓展，之后用自己寫的方法通過原型覆蓋了已有類中的原有方法，之后通過前后對比向讀者展示了如何用原型拓展對象功能。
上面代碼為本節(jié)中所講述內容的應用。前面已經講述了創(chuàng)建對象與數組，本節(jié)講述的是如何開發(fā)自己的類，以及聲明自己的對象和對象的一些用法。這些內容與Java有些類似，有Java開發(fā)經驗的讀者肯定不會陌生。
1.5.8 常用的JavaScript工具
有很多工具可簡化JavaScript的編程工作，我們在調試程序時必不可少的一個環(huán)節(jié)便是調錯。由于開發(fā)JavaScript不像開發(fā)其他語言有強大的編譯環(huán)境，所以調錯時不是很方便。幸運的是，現在的瀏覽器都會有內置的調試器，圖1-22所示為Firefox瀏覽器的firebug插件。
圖1-22 firebug插件調試
用其他瀏覽器中的調試器也是可以的，作者在開發(fā)時習慣使用Google瀏覽器的內置調試器，遇到的一般情況都可以解決。但是有時有一些特別錯誤解決不了，這時firebug的強大能力便體現出來了，它可以設置斷點、探查錯誤和逐句執(zhí)行腳本。
使用JavaScript最簡便的方式是使用某種JavaScript工具包或庫。這種工具包多如牛毛，其中非常流行的且開發(fā)非常活躍并具有許多有用特性的是jQuery，它與配套程序庫jQueryUI非常流行。有了它，JavaScript開發(fā)工作要變得輕松許多。
到此為止便將JavaScript部分的基礎內容介紹完畢了。還是用之前說過的一句話，本部分內容不可能是這么幾頁就能夠解決的，WebGL的開發(fā)沒有這些基礎又不行，所以其目的就是簡要介紹一下。