Embed Size (px)
DESCRIPTION
專題進度報告. 指導老師 : 李宗儒 組長 : 黃承廣 組員 : 方維銘 黃偉倫. JavaScript 的介紹. 認識 JavaScript JavaScript 和 Java 名稱雖然很像，而且都在 WWW 盛行，但其差異卻相當大。 JavaScript 有其特點，為您說明如下： JavaScript 是一種描述語件，不需編碼，透過瀏覽器就可以直接執行。執行時是按順序一行一行執行。 JavaScript 必須編寫在 HTML 文件中，因此要使用 HTML 的標示 (Tag) 來表示。 - PowerPoint PPT Presentation
Citation preview
專題進度報告
指導老師 : 李宗儒組長 : 黃承廣組員 : 方維銘
黃偉倫
JavaScript的介紹
• 認識 JavaScript• JavaScript 和 Java 名稱雖然很像，而且都在 WWW 盛行，但其差異卻相當
大。 JavaScript 有其特點，為您說明如下：• JavaScript 是一種描述語件，不需編碼，透過瀏覽器就可以直接執行。執
行時是按順序一行一行執行。• JavaScript 必須編寫在 HTML 文件中，因此要使用 HTML 的標示 (Tag) 來表
示。• JavaScript 因為編寫在 HTML 文件中，所以查看網頁的原始碼，就可以複
製到該程式，有利程式的流通。• JavaScript 的結構較為鬆散，變數不需很明確的定義，學習較簡單。
• JavaScript語法• JavaScript 的標示 (Tag)• 在看 HTML 文件的原始碼時，只要看到以下的標示 (Tag) 就表示是
JavaScript 的程式碼： <SCRIPT LANGUAGE = "JavaScript">• ..........</SCRIPT>• 在這兩個標示中間的內容就是 JavaScript 的程式碼。• 這兩個標示一定要成對出現，這是 HTML 文件的特點。• JavaScript 在程示中放置的位置• 原則上 JavaScript 的程式碼可以擺在網頁的任何地方，如果放在• <HEAD> 和 </HEAD> 中間，就表示網頁開始之前就要先執行；• 如果放在 <BODY> 和 </BODY> 之間，那就按照網頁執行的順序來執
行囉！• 這要看網頁在設計時要達成的效果而定！
• JavaScript語法結構• JavaScript 是物件 (Object) 導向的程式語言，在物件中必須指明其方法和參數，
指明其屬性，在物件，方法，屬性之間用” .” 來連接。• 舉例來說，視窗中就有許多物件，像是圖片，表單等。圖片和表單有其屬性，
也有其產生的方法。• 方法• 每一項物件都有其本身的操作方法。就像”倒車”是開車的一種方法。參考
第一個範例(歡迎訊息)讓你更瞭解。• 參數• 參數用來表明使用方法的方式。如”倒車 10 公尺”，” 10 公尺”就是倒車方
法的參數。• 屬性• 每一個物件也都有其其屬性，也就是物件本身的特性。如”車身長”就是車子
的一個屬性。參考第四個範例(螢幕解析度)讓你更瞭解 .
• 介紹了這麼多，不如實際動手做！接下來就請按各範例的解說來學習。
Google mapsAPI 與 ajax
• AJAX 是 Asynchronous JavaScript And XML 的簡寫，它的設計理念非常類似 Dynamic HTML （或者 DHTML ），主要的目的在於提高網頁的互動性（ interactivity ），速度（ speed ），以及可用性（ usability ）。想想看，如果我們能使一個網頁的互動方式可以達到類似 Microsoft Office 的境界，那麼網頁的可用性可以達到另一個層次。
• 其實，這個概念並不是很新，只是這樣的技巧被大量的應用於 Google 的網頁之後，如 Gmail、Google Maps、和 Google Suggest 等，才被重視，而第一個提出 AJAX 這個名詞的就是 Jesse James Garrett。利用類似技巧的公司還有 Writely、Kiko 等。這樣的概念，開始激發人們對於網頁是否會取代 desktop applications 進行討論，而又進一步的延伸出 What is Web 2.0 的討論。
• AJAX 也不是一項單獨的技術，它是由一堆現有的技術所組成，它的主要組成技術有：
• 1.XHTML （或者 HTML ）加上 CSS 來作為資料的呈現。 • 2. 利用 DOM 以及 Javascript 來進行存取資料（大多為 XML ）的處理。 • 3. 利用 XMLHttpRequest 物件與遠端的 web server 進行非同步的資料交換。
隨著 Ajax迅速的引人注目，開發人員對這種技術的期待也迅速增加。就像是任何新技術，Ajax 的興旺也需要一個完整的開發工具。
• JavaScript• AJAX應用為 JavaScript注入強心劑
JavaScript十年來沒有特別受歡迎，因為 WWW 盛行以來它和 HTML 一樣已變成網頁裡最基本的元素，直到 AJAX 的出現，讓 JavaScript 大大的受到眾人的注視。 AJAX 的全名是 Asynchronous JavaScript and XML ， JavaScript 就是其中之一的主角， AJAX 並不是一項新的技術，而是將一些舊有的技術結合起來做一種巧妙的應用，賦予網頁的一股新動力
• AJAX 是客戶端 ( 瀏覽器 ) 的技術，簡單的說，就是用 JavaScript 與後端伺服器做資料的溝通，資料採用 XML 的格式， JavaScript 動態地從後端拿到XML格式的資料，重新整理、重組後再顯示到網頁上。 AJAX基本上是無關 Java 或 .Net 的，甚至PHP 也可以跟AJAX 結合在一起使用。網路上、雜誌裡介紹 AJAX 的文章相當的多，在這我就不贅述。在這要提醒大家注意的是，因為 AJAX ， JavaScript又開始大量的應用在網頁裡，前面所提及的混亂又被突顯了出來。混亂不一定只是負面的，所謂時勢造英雄，我們期待有人能出來一統江湖。
• XMLHttpRequest• 由於的 JavaScript具有動態類型特性，而且 XMLHttpRequest 的在不同瀏覽器上的實現是兼容的，所以可以用同樣的方式訪問的 XMLHttpRequest 實例的屬性和方法，而不論這個實例創建的方法是什麼。這就大大簡化了開發過程，而且在的 JavaScript 中也不必編寫特定於瀏覽器的邏輯。在使用的 XMLHttpRequest 對象發送請求和處理響應之前，必須先用的 JavaScript 的XMLHttpRequest 對象創建一個。由於 XMLHttpRequest 的不是一個 W3C 的標準，所以可以採用多種方法使用 JavaScript 中的 XMLHttpRequest 的實例來創建。互聯網瀏覽器的XMLHttpRequest 實現為一個把的 ActiveX 對象，其他瀏覽器（如 Firefox 和 Safari 和Opera ）中把它實現為一個本地 JavaScript 的對象。由於存在這些差別， JavaScript 的代碼中必須包含有關的邏輯，從而使用的 ActiveX技術或者使用本地的 JavaScript 對象技術來創建的 XMLHttpRequest 的一個實例。很多人可能還記得從前的那段日子，那時不同瀏覽器上的 JavaScript 中和的 DOM 實現簡直千差萬別，聽了上面這段話之後，這些人可能又會不寒而栗。幸運的是，在這裡為了明確該如何創建的 XMLHttpRequest 對象的實例，並不需要那麼詳細地編寫代碼來區別瀏覽器類型。你要做的只是檢查瀏覽器是否提供對的 ActiveX 對象的支持。如果瀏覽器支持的 ActiveX 對象，就可以使用的 ActiveX 來創建 XMLHttpRequest 的對象。否則，就要使用本地的 JavaScript 對象技術來創建。
• 開發工具• 在實際建構 Ajax應用中，需要的不只是文字編輯器。既然是
JavaScript 非編譯的，可以容易的撰寫和執行在瀏覽器中；然而，許多工具提供了有用的礦充如 : 語法反白和智慧完成。
• 不同的 IDE 提供了對 JavaScript支援的不同等級。 Eclipes包含了兩個免費的 JavaScript 編輯器外掛和一個商業的來自ActiveStat的 Komodo IDE 。另一個 JavaScript 和 Ajax 開發中的問題是偵錯困難。不同的瀏覽器提供不同的通常是隱藏的執行階段錯誤資訊，而 JavaScript 的缺線如雙重變數給予值使得偵錯更加困難。
• 在 Ajax 的開發中，偵錯就更複雜了，因為其需要標幟究竟是用戶端還是服務端產生的錯誤。在過去， JavaScript偵錯的方法是刪除所有程式碼然後一行行地增加，直到錯誤出現為止。
• CSS• 為了正確的瀏覽 Ajax 的應用， CSS 是一種 Ajax 開發人員所需要的重要武器。 CSS 提供了從內容中分離應用的樣式和設計的機制。雖然 CSS 在 Ajax應用中扮演至關重要的角色，但他也是建構建立跨瀏覽器應用的一大阻礙，因為不同的瀏覽器廠商支援各種不同的 CSS級別。
• 伺服器端• 在服務端 Ajax應用還是使用建立在如 Java、 .NET、和 PHP 語言基礎上機制，並沒有改變這個領域中的主要方式。
• 既然如此，對 Ruby on Rails框架的興趣也就迅速增加了。在一年多前 Ruby on Rails已經吸引了大量開發人員基於其強大的功能來建構 Web 和 Ajax應用。雖然目前還有很多快速應用開發工具存在，Ruby on Rails 看你來已經儲備了簡化建構 Ajax應用的能力。
• 開發工具• 在實際建構 Ajax應用中，需要的不只是文字編輯器。既然是 JavaScript 非編譯的，可以
容易的撰寫和執行在瀏覽器中；然而，許多工具提供了有用的礦充如 : 語法反白和智慧完成。
• 不同的 IDE 提供了對 JavaScript支援的不同等級。 Eclipes包含了兩個免費的 JavaScript編輯器外掛和一個商業的來自 ActiveStat 的 Komodo IDE 。另一個 JavaScript 和 Ajax 開發中的問題是偵錯困難。不同的瀏覽器提供不同的通常是隱藏的執行階段錯誤資訊，而JavaScript 的缺線如雙重變數給予值使得偵錯更加困難。
• 在 Ajax 的開發中，偵錯就更複雜了，因為其需要標幟究竟是用戶端還是服務端產生的錯誤。在過去， JavaScript偵錯的方法是刪除所有程式碼然後一行行地增加，直到錯誤出現為止。
