JavaScript學習筆記（一）——JS基礎知識介紹

術語解釋

Javascript是一種由Netscape的LiveScript發展而來的原型化繼承的物件導向的動態類型的區分大小寫用戶端指令碼語言，主要目的是為瞭解決伺服器端語言，比如Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果。當時服務端需要對資料進行驗證，由於網路速度相當緩慢，只有28.8kbps，驗證步驟浪費的時間太多。於是Netscape的瀏覽器Navigator加入了Javascript，提供了資料驗證的準系統。

 

JavaScript 被用來改進設計、驗證表單、檢測瀏覽器、建立cookies，等等。JavaScript 是網際網路上最流行的指令碼語言，並且可在所有主要的瀏覽器中運行，比方說 Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。

• JavaScript 被設計用來向 HTML 頁面添加互動行為。
• JavaScript 是一種指令碼語言（指令碼語言是一種輕量級的程式設計語言）。
• JavaScript 由數行可執行電腦程式碼群組成。
• JavaScript 通常被直接嵌入 HTML 頁面。
• JavaScript 是一種解釋性語言（就是說，代碼執行不進行先行編譯）。
• 所有的人無需購買許可證均可使用 JavaScript。

 

 

概念辨析　

 

JavaScript與Java

JavaScript最初的確是受Java啟發而開始設計的，而且設計的目的之一就是“看上去像Java”，因此文法上有很多類似之處，許多名稱和命名規範也借自Java。但是實際上，JavaScript的主要設計原則源自Self和Scheme，它與Java本質上是不同的。它與Java名稱上的近似，是當時網景為了營銷考慮與Sun公司達成協議的結果。其實從本質上講javascript更像是一門函數式程式設計語言.而非物件導向的語言，它使用一些智能的文法和語義來模擬高度複雜的行為。其物件模型極為靈活、開放和強大，具有全部的反射性。

 

JavaScript與JScript

JScript是Microsoft公司開發的，Javascript是Netscape公司開發的.雖然他們是死對頭,但是在現在的瀏覽器中,無論你把語言指定為Javascript 還是 Jscript, 瀏覽器都會綜合他們兩個語言的特性.所以,即使把語言指定為Javascript, 用幾句JScript也是沒問題的.

 

JavaScript與VBScript

Javascript 和 VBscript 的互連性很好，而且在 VBArray（Javascript不支援多維陣列）和ASCII（Javascript不能吧字元轉成ASCII）都得到了應用，這方面基礎 VBScript 做得很好。所以我看了看它的代碼，大致意思就是 Javascript 可以用 VBScript 的自訂函數和變數（當然不能用內建變數和函數），通過轉換調用內建函數。

 

JavaScript與AJAX

 AJAX即“Asynchronous JavaScript and XML”（非同步JavaScript和XML)，它也是一種JavaScript程式設計語言。JavaScript是一種粘合劑使AJAX應用的各部分整合在一起。AJAX是基於web標準XHTML+CSS的表示；使用 DOM進行動態顯示及互動；使用XML 和XSLT 進行資料交換及相關操作；使用XMLHttpRequest 進行非同步資料查詢、檢索；使用 JavaScript 將所有的東西綁定在一起。

 

JavaScript與DOM

DOM是Document Object Model（文件物件模型）的簡稱，它是讓javascript與頁面互動的一種方式，能夠動態修改文檔中的節點，元素，屬性等。DOM不僅適用於xhtml文檔，對於所有的xml文檔dom都是可以使用的。

DOM的層級：

1級：基本的節點操作一級裡都包括了

2級：增加了對樣式表，文檔顯示，事件處理，等的支援

3級：可以用javascript載入和儲存文檔，檢查文檔錯誤

 

JavaScript與HTML

HTML 創作者往往都不是程式員，但是 JavaScript 卻是一種只擁有極其簡單的文法的指令碼語言。每人都可將短小的代碼片斷放入HTML 頁面中。

類似於這樣的一段 JavaScript 聲明可以將一段可變的文本放入 HTML 頁面：document.write("<h1>" + name + "</h1>")

可以將 JavaScript 設定為當某事件發生時才會被執行，例如頁面載入完成或者當使用者點擊某個 HTML 元素時。

JavaScript 可以讀取及改變 HTML 元素的內容。

在資料被提交到伺服器之前，JavaScript 可被用來驗證這些資料。

JavaScript 可被用來檢測訪問者的瀏覽器，並根據所檢測到的瀏覽器，為這個瀏覽器載入相應的頁面。

JavaScript 可被用來儲存和取回位於訪問者的電腦中的資訊。

 

JavaScript與CSS+DIV

 

CSS（Cascading Style Sheet）層疊樣式表，是一組格式設定規則，用於控制Web頁面的外觀。通過使用CSS樣式設定頁面的格式，可將頁面的內容與表現形式分離。

DIV主要用來布局，與table布局相似，用來為HTML文檔內大塊（block-level）的內容提供結構和背景的元素。DIV的起始標籤和結束標籤之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標籤的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

JavaScript可以通過getElementById(id)或getElementsByTabName(TabName)等來設定或修改CSS和DIV的屬性值

 

JavaScript與程式設計語言

Javascript 不是一個先行編譯語言，所以雖然 Javascript 的作者盡量把它寫得強大。儘管JavaScript作為給非程式人員的指令碼語言，而非作為給程式人員的程式設計語言來推廣和宣傳，但是JavaScript是一門具有非常豐富特性的語言，它有著和其他程式設計語言一樣的複雜性，或更甚複雜。實際上，你必需對JavaScript有紮實的理解才能用它來撰寫比較複雜的程式。

 

基本文法

 

1、運算子

運算子就是完成操作的一系列符號： 

賦值運算子（=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=）

算術運算子(+,-,*,/,++,--,%)

比較子(>,<,<=,>=,==,===,!=,!==)

邏輯運算子(||,&&,!)、條件運算(?:)、位移運算子(|,&,<<,>>,~,^)、字串運算子(+)

 

2、 運算式

運算子和運算元的組合稱為運算式，通常分為四類：賦值運算式、算術運算式、布林運算式和字串運算式

 

3、語句

指派陳述式、switch、for、foreach、while、do while、break、continue、try...catch、if語句、with語句、let語句

 

4、函數

函數是命名的語句段，這個語句段可以被當作一個整體來引用和執行：

1）函數由關鍵字function定義（也可由Function建構函式構造）；

2）使用function關鍵字定義的函數在一個範圍內是可以在任意處調用的（包括定義函數的語句前）；而用var關鍵字定義的必須定義後才能被調用；

3）函數名是調用函數時引用的名稱，它對大小寫是敏感的，調用函數時不可寫錯函數名；

4）參數表示傳遞給函數使用或操作的值，它可以是常量，也可以是變數，也可以是函數，在函數內部可以通arguments對象（arguments對象是一個偽數組，屬性callee引用被調用的函數）訪問所有參數；

5）return語句用於返回運算式的值。

6）yield語句扔出一個運算式，並且中斷函數執行直到下一次調用next。

一般的函數都是以下格式：

　　function myFunction(params){

　　//執行的語句

　　}

　　函數運算式：

　　var myFunction=function(params){

　　//執行的語句

　　}

       myFunction();//調用函數

 

5、對象

Javascript是物件導向的，通過基於對象的程式設計，可以用更直觀、模組化和可重複使用的方式進行程式開發。

一組包含資料的屬性和對屬性中包含資料進行操作的方法，稱為對象。比如要設定網頁的背景顏色，所針對的對象就是document，所用的屬性名稱是bgcolor，如document.bgcolor="blue"，就是表示使背景的顏色為藍色。

 

6、事件

事件，使用者與網頁互動時產生的操作。

事件可以由使用者引發、也可能是頁面發生改變、甚至還有你看不見的事件（如Ajax的互動進度改變）。絕大部分事都由使用者的動作所引發，如：使用者按滑鼠的按鈕，就產生click事件，若滑鼠的指標的連結上移動，就產生mouseover事件等等。在Javascript中，事件往往與事件處理常式配套使用。

而對事件的處理，W3C的方法是用addEventListener()函數，它有三個參數：事件、引發的函數、是否使用事件捕捉。為了安全性，建議將第三個參數始終設定為false；

傳統的方法就是定義元素的on...事件，它就是W3C的方法中的事件參數前加一個“on”。而IE的事件模型使用attachEvent和dettachEvent對事件進行綁定和刪除。javascript中事件還分捕獲和冒泡兩個階段，但是傳統綁定只支援冒泡事件。

 

7、變數

如   var myVariable = "some value";

　　變數有它的類型，上例中myVariable的類型為string（字串）

　　javascript支援的常用類型還有：

　　object：對象

　　array：數組

　　number：數；

　　boolean：布爾值，只有true和false兩個值，是所有類型中佔用記憶體最少的；

　　null：一個空值，唯一的值是null；

　　undefined：沒有定義和賦值的變數

　　實際上javascript的變數是弱變數類型，你賦值給他的是字串，他就是String .

　　是數字他就是整形。是true和false他就是boolean型（注意，不能加引號，不然會被當成字串處理）。

 

 

開發與調試

 

javascript程式是純文字的，且不需要編譯，所以任何純文字的編輯器都可以編輯javascript檔案

 

開發工具 

 

JavaScript Editor (推薦)

Dreamweaver CS4

Visual Studio 2008

 

調試工具

Firefox FireBug （推薦）

JavaScript Editor

Visual Studio 2008

 

根據我自己的學習、開發和調試JavaScript的經驗和體會，推薦開發使用JavaScript Editor和調試使用Firefox FireBug

當然啦，牛人直接用NotePad或VIM等文本工具直接編寫，也可以的，不過我目前還遠遠沒達到這種水平（努力的目標）

 

學習推薦

W3schools.com(JavaScript 英文)
http://www.w3schools.com/js/

W3schools.com(JavaScript 中文)
http://www.w3school.com.cn/js/ 

 

詳情請見我先前發表的部落格：學習編程技術的成長之路 (JavaScript 學習 和 網頁製作學習)