JavsScript是可以在各種不同環境下使用的動態的、鬆散類型(loosely typed)、基於原型的編程語言。除了作爲流行的Web客戶端程序語言，它還可以使用於IDE插件、PDF文件或給予其它平臺甚至更爲抽象的概念。
JavaScript 是由來自Netscape得Brendan Eich創造的基於ECMAScript標準（ECMA-262）的語言。他最初被命名爲LiveScript，但後來被改爲JavaScript，這也是很多人會把它跟java混淆的原因之一。以下是它的一些特性的詳細說明：
◆動態程序語言在運行時執行；他們並沒有編譯。正因爲此，有時JavaScript被認爲是一種腳本語言，而不是一個真正的編程語言（顯然是一種誤解）。
◆鬆散類型語言不要求強類型系統，如果你使用C或Java編程(與JavaScript不同)聲明變量時你就明白必須聲明類似’int’(整型)。JavaScript的不同之處在於你用不着指定它的類型。
◆在JavaScript中我們使用原型來實現類似繼承的效果，JavaScript不支持類。
◆JavaScript也是函數式語言，它處理函數爲優先對象。它是基於lambda下的理念。
理解以上概念對於學習JavaScript這門技術關係並不是很大。只是讓大家對JavaScript有個初步正確的的認識，並瞭解JavaScript與其它編程語言的本質區別。
文檔對象模型
文檔對象模型(Document Object Model)，通常簡稱爲DOM，是網站內容與JavaScript互通的接口。自JavaScript成爲最常用的語言時JavaScript和DOM通常被視爲獨立的實體。DOM接口用於存取、遍歷和控制HTML和XML文檔。
下面是關於DOM的一些重要的知識:
◆Window對象作爲全局對象，你僅需嘗試使用”window”來訪問它。Window對象下包含了你的所有要執行的JavaScript代碼。就像所有對象都包含屬性和方法。
◆屬性是存儲於對象下的變量。所有在網頁中創建的變量都會成爲window對象的屬性。
◆方法是存儲在對象下的函數。在所有函數存儲在window對象下時，你可以使用’methods’引用它們。
◆DOM相對於Web文檔結構創建層次結構，層次有節點組成。DOM節點有很多不同的類型，其中最重要的要數’Element’、’Text’和’Document’了。
◆‘Element’節點表示在頁面中的元素，所以如果在頁面中你有一個段落元素(‘<p>’)，那麼你可以通過DOM的節點來訪問它。
◆‘Text’節點表示在頁面中的所有文本(在元素中)，所以如果在頁面的段落中有一些文本內容，那麼你可以通過DOM的節點來訪問它。
◆‘Document’節點表示整個文檔。(它是DOM樹的根節點)
◆另請注意，元素屬性是DOM節點本身。
◆不同的佈局引擎對於DOM標準的執行是有一定的差別的。例如，使用Gecko佈局引擎的FireFox瀏覽器可以很好的執行(但也並不是完完全全按照W3C規範那樣)，但使用Trident引擎的IE因它的很多Bug和不完全執行DOM標準而爲衆人所知。這便是前端開發領域的一大痛苦之處。
網頁中的JavaScriptScript元素
當你想在網站上使用JavaScript的時候，需要讓它們包含在script元素中:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>JavaScript!</title>
- </head>
- <body>
- <script type="text/javascript">
- // <![CDATA[
- // ]]>
- </script>
- </body>
- </html>
正如你所見在文檔下面有script元素。其實type屬性嚴格來講應設置爲”application/javascript”,但它不出所料的在IE瀏覽器下無法正常工作，所以我們使用”text/javascript”或不用type屬性，如果你在意代碼W3C規範驗證的話建議你使用前者(“text/javascript”)。
你還會注意到在script元素中我們還有一對被註釋掉的代碼行，它們告訴支持XHTML的瀏覽器script元素中的內容是字符數據而不應被解釋爲XHTML標記。如果你計劃在JavaScript代碼中使用’<’或’>’字符的話那它就是相當必要的。當然，如果你是用普通HTML代碼的話，那你完全可以無視它。
defer屬性
我們script元素中的JavaScript代碼會在頁面讀過程中執行，唯一的例外就是當script元素有defer屬性的時候。默認情況下，當瀏覽器遇到script元素時，它會停下來並運行代碼，然後再繼續進行文檔解析。defer屬性告訴瀏覽器代碼包含非變更文檔代碼而且可以稍後執行。它的唯一問題就是隻在IE下可用，所以我們還是要儘量不要使用它了，瞭解就行。
鏈接外部腳本
如果你想連接一個外部腳本文件，那麼你只需爲你的script元素添加一個有文件地址的src屬性。把腳本文件獨立分離出來進行調用的確相對於內聯腳本來說是個好辦法，它意味着瀏覽器可以緩存該文件，而且你都不用擔心那些CDATA之類的廢話。
- <script type="text/javascript" src="my-script.js"></script>
JavaScript要點
在我們繼續講DOM之前有必要學習一下JavaScript基礎要點，如果有些東西你理解起來有些困難，別擔心，你早晚會搞定它的。在JavaScript種不同類型的值，它們是數值、字符串、布爾值、對象、Undefined 和 Null。單行註釋使用兩個斜槓(//)，這行內的所有內容都將被作爲註釋內容理解。多行註釋使用’/*’ 和 ‘*/’完成註釋段落。
數值
在JavaScript中所有數值都被描繪成浮點值，當定義數值變量時記得不要用引號。
- // 注: 要一直使用 'var' 來聲明變量:
- var leftSide = 100;
- var topSide = 50;
- var areaOfRectangle = leftSide * topSide; // = 5000
字符串
你定義的字符串都是有字面上來看，JavaScript不會對它進行處理。一個字符串可由一連串的Unicode字符組成，並由一對雙引號或單引號包圍。
- var firstPart = 'Hello';
- var secondPart = 'World!';
- var allOfIt = firstPart + ' ' + secondPart; // Hello World!
- // +號進行字符串連接處理
- // (它還可用於數學上的加法運算)
布爾值
布爾類型在你進行條件判斷的時候很有用，以瞭解是否符合指定的標準。布爾有兩個可能的值:true和false。任何使用邏輯算法的比較結果都將是布爾值。
- 5 === (3 + 2); // = true
- // 你可以給變量聲明布爾值:
- var veryTired = true;
- // 你可以像這樣測試:
- if (veryTired) {
- // 你的代碼
- }
上面看到的’===’是比較運算符，我們將在後面討論。
函數
函數是一個專門的對象。
- // 使用函數操作創建一個新函數:
- function myFunctionName(arg1, arg2) {
- // 這裏是函數的代碼
- }
- // 如果你省略掉函數名，那麼你創建的是"匿名函數":
- function(arg1, arg2) {
- // 這裏是函數的代碼
- }
- // 執行函數僅需對他進行引用並使用圓括號 (附帶參數):
- myFunctionName(); // 無參數
- myFunctionName('foo', 'bar'); // 帶參數
- // 你也可以在不聲明變量的情況下執行函數
- (function(){
- // 這就是所謂的自調用匿名函數
- })();
數組
數組也是一個專門的對象，它可以包含任意數量的數據。要訪問數組中的數據你就必須使用數字，用以引用其在數組中的”索引”。
- // 兩種聲名數組的不同方式,
- // 字面:
- var fruit = ['apple', 'lemon', 'banana'];
- // 使用數組構造器:
- var fruit = new Array('apple', 'lemon', 'banana');
- fruit[0]; // 訪問數組中的第一個數據項 (apple)
- fruit[1]; // 訪問數組中的第二個數據項 (lemon)
- fruit[2]; // 訪問數組中的第三個數據項 (banana)
對象
對象是命名的的值的集合(鍵-值對)，它和數組很相似，唯一的不同之處在於你可以爲每個數據值指定名字。
- // 兩種聲明對象的不同方式,
- // 字面(大括號):
- var profile = {
- name: 'Li',
- age: 23,
- job: 'Web Developer'
- };
- // 適用對象構造器:
- var profile = new Object();
- profile.name = 'Li';
- profile.age = 23;
- profile.job = 'Web Developer';
if/else語句
if/else語句是JavaScript中最常見的結構，它看上去就像下面這樣:
- var legalDrinkingAge = 21;
- var yourAge = 23;
- if ( yourAge >= legalDrinkingAge ) {
- // 我們使用'alert'來通知用戶:
- alert('你可以喝水.');
- } else {
- alert('對不起，你不能喝水.');
- }
循環
循環在遍歷數組中的數據項或對象的所有成員時非常有用，JavaScript中最常用的循環是for和while語句。
- var envatoTutSites = ['NETTUTS','PSDTUTS','AUDIOTUTS','AETUTS','VECTORTUTS'];
- // WHILE循環
- var counter = 0;
- var lengthOfArray = envatoTutSites.length;
- while (counter < lengthOfArray) {
- alert(envatoTutSites[counter]);
- counter++; // 等同於 counter += 1;
- }
- // FOR循環
- // (The i stands for "iterator" - you could name it anything)
- for (var i = 0, length = envatoTutSites.length; i < length; i++) {
- alert(envatoTutSites[i]);
- }