1 / 10

專題進度報告

專題進度報告. 指導老師 : 李宗儒 組長 : 黃承廣 組員 : 方維銘 黃偉倫. JavaScript 的介紹. 認識 JavaScript JavaScript 和 Java 名稱雖然很像,而且都在 WWW 盛行,但其差異卻相當大。 JavaScript 有其特點,為您說明如下: JavaScript 是一種描述語件,不需編碼,透過瀏覽器就可以直接執行。執行時是按順序一行一行執行。 JavaScript 必須編寫在 HTML 文件中,因此要使用 HTML 的標示 (Tag) 來表示。

joanne
Download Presentation

專題進度報告

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 專題進度報告 指導老師:李宗儒 組長:黃承廣 組員:方維銘 黃偉倫

  2. JavaScript的介紹 • 認識JavaScript • JavaScript和Java名稱雖然很像,而且都在WWW盛行,但其差異卻相當大。JavaScript有其特點,為您說明如下: • JavaScript是一種描述語件,不需編碼,透過瀏覽器就可以直接執行。執行時是按順序一行一行執行。 • JavaScript必須編寫在HTML文件中,因此要使用HTML的標示(Tag)來表示。 • JavaScript因為編寫在HTML文件中,所以查看網頁的原始碼,就可以複製到該程式,有利程式的流通。 • JavaScript的結構較為鬆散,變數不需很明確的定義,學習較簡單。

  3. JavaScript語法 • JavaScript的標示(Tag) • 在看HTML文件的原始碼時,只要看到以下的標示(Tag)就表示是JavaScript的程式碼:<SCRIPT LANGUAGE = "JavaScript"> • ..........</SCRIPT> • 在這兩個標示中間的內容就是JavaScript的程式碼。 • 這兩個標示一定要成對出現,這是HTML文件的特點。 •  JavaScript在程示中放置的位置 • 原則上JavaScript的程式碼可以擺在網頁的任何地方,如果放在 • <HEAD>和</HEAD>中間,就表示網頁開始之前就要先執行; • 如果放在<BODY>和</BODY>之間,那就按照網頁執行的順序來執行囉! • 這要看網頁在設計時要達成的效果而定!

  4. JavaScript語法結構 • JavaScript是物件(Object)導向的程式語言,在物件中必須指明其方法和參數,指明其屬性,在物件,方法,屬性之間用”.”來連接。 • 舉例來說,視窗中就有許多物件,像是圖片,表單等。圖片和表單有其屬性,也有其產生的方法。 • 方法 • 每一項物件都有其本身的操作方法。就像”倒車”是開車的一種方法。參考第一個範例(歡迎訊息)讓你更瞭解。 • 參數 • 參數用來表明使用方法的方式。如”倒車10公尺”,”10公尺”就是倒車方法的參數。 • 屬性 • 每一個物件也都有其其屬性,也就是物件本身的特性。如”車身長”就是車子的一個屬性。參考第四個範例(螢幕解析度)讓你更瞭解. • 介紹了這麼多,不如實際動手做!接下來就請按各範例的解說來學習。

  5. 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 進行非同步的資料交換。

  6. 隨著Ajax迅速的引人注目,開發人員對這種技術的期待也迅速增加。就像是任何新技術,Ajax的興旺也需要一個完整的開發工具。隨著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又開始大量的應用在網頁裡,前面所提及的混亂又被突顯了出來。混亂不一定只是負面的,所謂時勢造英雄,我們期待有人能出來一統江湖。

  7. 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對象技術來創建。

  8. 開發工具 • 在實際建構Ajax應用中,需要的不只是文字編輯器。既然是JavaScript非編譯的,可以容易的撰寫和執行在瀏覽器中;然而,許多工具提供了有用的礦充如:語法反白和智慧完成。 • 不同的IDE提供了對JavaScript支援的不同等級。Eclipes包含了兩個免費的JavaScript編輯器外掛和一個商業的來自ActiveStat的Komodo IDE。另一個JavaScript和Ajax開發中的問題是偵錯困難。不同的瀏覽器提供不同的通常是隱藏的執行階段錯誤資訊,而JavaScript的缺線如雙重變數給予值使得偵錯更加困難。 • 在Ajax的開發中,偵錯就更複雜了,因為其需要標幟究竟是用戶端還是服務端產生的錯誤。在過去,JavaScript偵錯的方法是刪除所有程式碼然後一行行地增加,直到錯誤出現為止。

  9. CSS • 為了正確的瀏覽Ajax的應用,CSS是一種Ajax開發人員所需要的重要武器。CSS提供了從內容中分離應用的樣式和設計的機制。雖然CSS在Ajax應用中扮演至關重要的角色,但他也是建構建立跨瀏覽器應用的一大阻礙,因為不同的瀏覽器廠商支援各種不同的CSS級別。 • 伺服器端 • 在服務端Ajax應用還是使用建立在如Java、.NET、和PHP語言基礎上機制,並沒有改變這個領域中的主要方式。 • 既然如此,對Ruby on Rails框架的興趣也就迅速增加了。在一年多前Ruby on Rails已經吸引了大量開發人員基於其強大的功能來建構Web和Ajax應用。雖然目前還有很多快速應用開發工具存在,Ruby on Rails看你來已經儲備了簡化建構Ajax應用的能力。

  10. 開發工具 • 在實際建構Ajax應用中,需要的不只是文字編輯器。既然是JavaScript非編譯的,可以容易的撰寫和執行在瀏覽器中;然而,許多工具提供了有用的礦充如:語法反白和智慧完成。 • 不同的IDE提供了對JavaScript支援的不同等級。Eclipes包含了兩個免費的JavaScript編輯器外掛和一個商業的來自ActiveStat的Komodo IDE。另一個JavaScript和Ajax開發中的問題是偵錯困難。不同的瀏覽器提供不同的通常是隱藏的執行階段錯誤資訊,而JavaScript的缺線如雙重變數給予值使得偵錯更加困難。 • 在Ajax的開發中,偵錯就更複雜了,因為其需要標幟究竟是用戶端還是服務端產生的錯誤。在過去,JavaScript偵錯的方法是刪除所有程式碼然後一行行地增加,直到錯誤出現為止。

More Related