發新話題

[分享] JavaScript概論

JavaScript概論

Script簡介 前言 對於所有的進步而言,HTML最重要的演進就是加入了Script語言。透過Script語言,網頁設計者可以在網頁上加入互動式比較複雜的功能,而這些功能以往只能出現在較進階的應用程式上。所謂的Script語言就是在文件中加入的一段程式碼在執行時才會進行編譯動作。也就是說,它可以使一般HTML文件中加上一些額外控制瀏覽器的文字。

本週的內容會先簡單介紹Script語言的種類功能使用方法與事件的關聯,接下來的幾週中會陸續的做更深入的介紹。


Internet Explorer中可以使用的Script語言 Internet Explorer本身支援兩種Script語言:Microsoft Visual Basic Scripting Edtion ( VBScript )Microsoft version of JavaScript ( JScript )。 IE也是一個Script語言的解讀平台,所以它也可以支援其他的Script語言但是其他的語言則不能直接在HTML文件中編寫

Microsoft Visual Basic Scripting Edtion ( VBScript ): VBScript是微軟受歡迎的程式語言Visual Basic的親戚。而IE是目前唯一支援VBScript的瀏覽器,因此用慣了VB的人可以輕鬆學習VBScript,是個很方便的設計。

Microsoft version of JavaScript ( JScript ): 雖然由名字上來看可能會以為JavaScript是Java的子集,但是事實上並不是這樣。JavaScript是個和Java完全不一樣的語言,而且是由不同的公司發展出來的。但是JavaScript的確有一些與Java同名稱的結構與程式語法。

JScript則是另一個版本的JavaScript,內建於IE裡面。在大部分的情況下,JScript和JavaScript幾乎完全相同,不過因為它們已經各自發展一段時間,所以會導致一些在不同瀏覽器版本之間不相容的情況。歐洲電腦製造協會(European Computer Manufacturer's Association)發展了一個標準,命名為ECMAScriptECMA-262,它包含了JavaScript和JScript的核心特性。因此可以說符合ECMAScript的JScript語法和瀏覽器的相容性最高,所以我們將使用JScript作為介紹Script的語言


JScript語言的功能 JScript語言提供了很棒的功能,像是動態網頁的設計,並可以在用戶端執行。用Script語言開發程式非常快速,且功能強大。但是它卻有一些安全上的限制,所以在計算的速度上,不會比傳統編譯語言產生的執行檔執行的速度快,同時複雜性也受到一些限制。

容易編寫執行 基本上JScript語言是很簡潔的,同時是內嵌在HTML的文件之中,所以容易使用。你可用一段簡單的程式碼,來對使用者的動作 (事件驅動程式碼)做出反應。且不需要特殊的工具或編輯軟體,就可以寫JScript語言。

客戶端處理 另一個特點是JScript語言是在客戶端執行, 意思是一但網頁被下載,則此網頁的所有Script程式都會在使用者的瀏覽器上執行,而非是在遙遠的伺服器上。

快速開發 Script是直譯語言,不用像傳統程式語言一般需要編譯後才能執行,如果要修改它,只要再編輯HTML文件檔案,之後再重新載入一次就可以馬上知道結果了。

功能強大 儘管JavaScript較JAVA,C++等程式語言要簡單得多,但是它的功能依舊強大。搭配上了所謂的文件物件模型DOM(Document Object Model)的設計,使得網頁的設計變化萬千。網頁的設計者可以加入複雜的邏輯到他們的網頁上,以產生動態且互動的效果。

安全議題 在瀏覽器的JScript受到一些限制,除了透過一些特定的方式之外,瀏覽器不允許JScript程式讀寫硬碟的資料。這是為了防止病毒的侵入,保護使用者的資料安全。

效能 因為JScript都是為了使用者方便所設計的,再加上跨平台執行的要求,所以它的效能並沒有傳統的程式語言產生的執行檔來的好。

複雜度 對初學者來說,JScript可以是很"簡單"的語言,例如你只是要用一常用的功能,或是製作一些很普遍的效果,那麼你可以去網路上找一些JScript的"罐頭程式"來用(換言之,就是CMU: Copy-Modify-Use 啦)。 不過要徹底精通它們需要對程式設計觀念有徹底的了解,可不是那麼容易,至少你必須有一點物件導向程式的概念,也必須要了解DOM是怎麼一回事才行。 至於DOM是什麼呢? 以後的章節會詳細說明的。

TOP

HTML中的Script


Script的觀念 大部分的Script都是當事件發生的時候才會被觸發,例如上週介紹過的各種事件。不管網頁有何變化,瀏覽器都會知道,處理該事件的Scripts就把事件交給對應的事件處理器(Event Handlers),以便做進一步的處理。

Script的格式(一) 每一個在HTML中的元件都有一個標籤,Script也不例外,在一般的情況下,為了能讓瀏覽器可以辨識且正確的執行Script,它必須放置於一組Script的標籤之中。Script標籤語法如下:                        <SCRIPT LANGUAGE="JavaScript">                       <!--//                        .                        .                        .                       //-->                       </SCRIPT>
<!--// 及 //-->是用來防止無支援的瀏覽器在解讀時發生錯誤
SCRIPT 宣稱接下來的程式碼是Script的程式
LANGUAGE 指定使用的語言格式,在這裡是設為JavaScript(JScript也可以,當然,只有Explorer瀏灠器才能接受)。
... 則是真正的Script程式碼

練習一:使用格式(一)的onLoad事件實例:

    <HTML>    <HEAD>    <TITLE> 輕鬆一下 </TITLE>    <SCRIPT LANGUAGE="JavaScript">    <!--//      function ShowWord()      {        alert('視窗已經開啟完成');      }    //-->    </SCRIPT>    </HEAD>    <BODY onLoad=ShowWord()>    <P>本程式在<b>載入完成</b>之後,會有一個警示畫面產生。</P>    <H4><b>別忘了比對原始檔幫助你了解本程式</b>    </BODY>    </HTML>
看練習一執行的結果:訪客無法瀏覽此圖片或連結,請先 註冊登入會員


Script的格式(二) 除了將Script的敘述用上述方式加在HTML文件之中以外,你也可以將Script標籤指向一個Script的外部檔案。其標籤語法如下:                        <SCRIPT LANGUAGE="JavaScript" SRC="FileName.js"></SCRIPT>
SRC 用來指定檔案來源位置
FileName.js來源檔案的名稱,因為使用JavaScript語言,所以副檔名必須為js


練習二:使用格式(二)的onLoad事件實例:

    <HTML>    <HEAD>    <TITLE> 輕鬆一下 </TITLE>    <SCRIPT LANGUAGE="JavaScript" SRC="js1.js"></SCRIPT>    </HEAD>    <BODY onLoad=ShowWord()>    <P>本程式在<b>載入完成</b>之後,會有一個警示畫面產生。</P>    <H4><b>別忘了比對原始檔幫助你了解本程式</b>    </BODY>    </HTML>
檔案js1.js的內容如下:

    function ShowWord()    {      alert('視窗已經開啟完成');    }
看練習二執行的結果:訪客無法瀏覽此圖片或連結,請先 註冊登入會員


Script的格式(三) 最後的一種方法叫做嵌入事件處理器,當Script程式本身不長時,我們便可以採用這種寫法,其應用的例子如下:                        <BODY 歡迎光臨");">
onLoad 這是上週介紹過的事件,在網頁開啟完成的時候發生。
window.alert這是Script程式的物件,用來開啟一個警告視窗
歡迎光臨 這是警告視窗之中要顯示的文字


練習三:使用格式(三)的onLoad事件實例:

    <HTML>    <HEAD>    <TITLE> 輕鬆一下 </TITLE>    </HEAD>    <BODY >    <P>本程式在<b>載入完成</b>之後,會有一個警示畫面產生。</P>    <H4><b>別忘了比對原始檔幫助你了解本程式</b>    </BODY>    </HTML>
看練習三執行的結果:訪客無法瀏覽此圖片或連結,請先 註冊登入會員


結論 以上三個例子的功能及結果都是一樣的,但是卻由不同方式的寫法去完成,要看程式設計者之目的程式的大小來決定要用哪一種寫法較適合。

TOP

發新話題

本站所有圖文均屬網友發表,僅代表作者的觀點與本站無關,如有侵權請通知版主會盡快刪除。