歡迎來到 MDN 的 JavaScript 初學者課程!我們將在這個章節綜觀 JavaScript ,回答一些像是「它什麼?」和「可以使用它作什麼?」之的問題,並確保你了解 JavaScript 的特性。 JavaScript 是一種腳本,也能稱它為程式語言,可以讓你在網頁中實現出複雜的功能。當網頁不只呈現靜態的內容,另外提供了像是:內容即時更新、地圖交動、繪製 2D/3D 圖形,影片播放控制……等,你就可以大膽地認為 JavaScript 已經參與其中。它是標準網頁技術蛋糕的第三層,而其他兩層(HTML 和
CSS)我們在其他學習單元中有更多詳細的介紹。
這三層很好的構建在一起。讓我們以一個簡單的文字為例。我們可以使用 HTML 標記來表示它的結構和意圖:
然後我們可以加一些 CSS ,讓它看起來更好:
最後,我們可以加一些 JavaScript 來作出互動的行為:
試試點擊這最後版本的文字,看看會發生什麼事情(你同樣也可以在 GitHub 找到這個範例,來查看原始碼或在線上執行)! JavaScript 能做到更多,讓我們更深入地探索。 它究竟可以做什麼呢?JavaScript 語言的核心包含了很多常用的程式功能供你使用,如:
然而,更令人興奮的是那些基於用戶端的 JavaScript 語言構建的功能。也就是所謂的 應用程式介面(API),提供 JavaScript 程式額外的超能力。 API 是預先製作完成的程式模組,支援開發者實現困難或無法實現的功能。在程式設計中就如同在建築房子的時候使用系統傢俱,拿預先裁好的板子用螺絲鎖上來組合成書架,相比從頭自己設計,找合適木材,切成正確的形狀和尺寸,再找到合適的螺絲最後組裝書架而言更簡單。 他們通常分為兩類。
**瀏覽器 API(Browser APIs)**內建在你的瀏覽器中,能夠依本地的電腦環境輸出資料或實現複雜的功能。舉例而言:
備註: 上面的許多範例無法在舊版的瀏覽器上運作。使用現代的瀏覽器像是 Firefox、Chrome、Edge 或 Opera 來嘗試執行你的程式總是比較好的。當你接近要交付作為產品的程式(也就是實際的用戶將要使用的時候),就需要思考關於跨瀏覽器測試的事情。 第三方 API 預設不內建在瀏覽器裡,你通常由網路上取得他們的程式碼與資訊。例如:
備註: 我們不會在此涵蓋這些進階的 APIs。你可以在我們的 客戶端網頁 API 單元找到更多資訊。 那裡也有很多的東西。然而不要一頭熱陷進去。你不會在學習 JavaScript 24 小時後,就能開發出下一個 Facebook、Google 地圖或 Instagram 之類的產品出來。有許多的基礎的東西得先了解,這也是你在這裡的原因,讓我們繼續吧! JavaScript 在你的頁面做了些什麼?這裡我們開始看一些程式碼,探索當 JavaScript 在你的頁面上執行時,發生了哪些事情。 簡單回顧一下當瀏覽器載入一個網站時會發生的事情(第一次是在我們的CSS 如何工作章節中提到)。當瀏覽器載入一個網頁,就是在執行環境(瀏覽器分頁)中執行程式碼(HTML,CSS 和 JavaScript)。就像是工廠收集原料(程式碼)並且產出商品(網頁呈現的結果)。
透過 DOM API (上面提到的)動態調整 HTML 與 CSS 進行改變網頁呈現,在 JavaScript 是很常見的使用方式。要注意的是,檔案中的程式碼通常會以出現在頁面上的順序來執行。如果 JavaScript 比準備操作的 HTML 、 CSS 更早被載入,就可能會發生錯誤。你將會在這個章節的後段學到一些解決問題的方法,它在腳本載入策略的部分。 瀏覽器安全性瀏覽器的每個分頁有獨立的空間來執行程式碼(技術上稱「執行環境 excution environments」),這表示在絕大部分的情形之下,每個分頁的程式碼是獨立運行的,不能直接影響其它分頁(或網站)裡的程式。這是一個好的安全措施,少了它,有心人會開始寫程式來偷取網站的資料,或是作其它不好的事情。 備註: 是有一些安全的方式能在不同的網頁、分頁之間傳遞程式和資料,不過這些進階的技術不會在涵蓋在這個單元中。 JavaScript 的執行順序當瀏覽器遇到一段 JavaScript 程式碼,通常會由上到下執行。這意味著你需要注意東西擺放的順序。為了說明,讓我們回到我們曾看過的第一個範例:
這裡我們選擇了一個文字段落(第 1 行),然後加上事件偵聽器,所以當段落被點擊的時候, 如果你交換前兩行的程式碼,它將不再正常運作。取而代之的,瀏覽器開發主控台 (en-US)會回報一個錯誤訊息:「 備註: 這是一個很常見的錯誤,在你嘗試對物件進行操作之前,你需要注意它們已經存在。 直譯式與編譯式程式語言你可能在程式相關的文章中看過直譯式 (interpreted )與**編譯式 (compiled)**這兩個詞。在直譯式程式語言中,程式碼由上到下執行,而且執行的結果是立即回應得到的。在瀏覽器執行前,你不需要將程式轉換為其它的形式。程式碼的內容是以對程式人員友善的形式並直接能夠運作。 另一方面,編譯式程式語言需要在電腦執行之前轉換(編譯)成另一種形式。例如: C/C++ 在被電腦執行之前要編譯為組合語言。被執行的程式是一種二進位的格式,由程式原始碼產生出來。 JavaScript 是一個輕量的直接程式語言。網頁瀏覽器收到文字格式的 JavaScript 程式碼,並直接執行。以技術的角度來看,大多數現代的 JavaScript 直譯器實際上會使用一種稱為**即時編譯(just-in-time compiling)**的技術來提升執行表現。 JavaScript 被使用時,原始程式會被編譯成更快的二進位格式,讓它們能更有效率的運行。然而, JavaScript 仍然被認為是一種直譯式的程式語言,因為編譯動作是在程式運作時,而不是事先完成。 兩種語言都有各自的優點,但是我們不在此時討論這個議題。 伺服器端與用戶端程式你也有可能聽過伺服器端與客戶端程式,尤其在網站開發的領域。客戶端程式在使用者的電腦中運作,當瀏覽網頁的時候,頁面中的客戶端程式被下載,接著被瀏覽器執行與顯示結果。在這個單元中,我們只談論客戶端 JavaScript。 另一方面,伺服器端的程式在伺服器上執行,接著產出的結果被瀏覽器下載後顯示。受歡迎的伺服器端網頁語言,包括 PHP、Python、Ruby 和 ASP.NET 以及… JavaScript!JavaScript 也能夠作為伺服器端程式語言,流行的 Node.js 環境就是一例。你可以在我們的動態網站—伺服器端網站程式設計主題中找到更多資訊。 動態與靜態程式動態一詞被用於描述用戶端 JavaScript 和伺服器端程的式語言,用來描述具有在不同的狀況下更新網頁/網頁應用程式來顯示不同東西,依需要來產生新內容的能力。是根據要求生成新內容的能力。伺服器端程式在伺服器上動態產生的新內容,可能是來自資料庫中取出的數據,而用戶端 JavaScript 在收到由伺服器端要回來的資料,在瀏覽器內動態產生新的內容(如 HTML 表格)後加入頁面中呈現出來。在兩個情境中詞義稍微不同,但是相關的,兩種方法(伺服器端和用戶端)通常可以協同工作。 一個沒有動態更新內容能力的網頁被稱為靜態,它在任何時候都只顯示一樣的內容。 如何在網頁中增加 JavaScript ?在 HTML 頁面中使用 JavaScript 與 CSS 的方法類似。在 HTML 中 CSS 藉著 內部的 JavaScript
備註: 如果你的版本不能正常運作,重新按照步驟再操作一次,檢查每一步都正確。你下載的範例是 外部的 JavaScript內部 JavaScript 目前運作得很好,但如果我們想把 JavaScript 放在外部檔案,應該怎麼做?讓我們現在來探索。
行內的 JavaScript注意,有時候你會遇到一些 JavaScript 程式混在 HTML 語法之中。它可能會看起來像這樣:
你可以在底下試試這個段程式的作用。 這個範例與前面兩個有完全相同的功能,除了
**然而,請不要這樣做。**用 JavaScript 汙染你的 HTML 是一種不好的作法,而且沒有效率,因為你必須在每個你希望 JavaScript 作用的地方加入 使用單純 JavaScript 的結構,讓你可以用一個指令選擇所有的按鈕。在我們前面的範例中,使用下面的程式碼達到這個目的: var buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length ; i++) { buttons[i].addEventListener('click', createParagraph); } 這或許看起來比 備註: 試著編輯你自己版本的 腳本載入策略(Script loading strategies)在正確的時機載入腳本涉及一些要注意的東西。並不如它看起來的簡單!其中一個常見的問題是,所有的 HTML 是根據出現順序載入。假如你使用 JavaScript 操作頁面中的元素(精確地來說是 DOM 元素),如果 JavaScript 在這些 HTML 操作對象前被讀取及解析,你的程式將無法運作。 上面的範例中,內部和外部 JavaScript 範例裡的程式碼都放在 HTML 的 head 區域,在 body 區被載入前就先被解析。這樣會造成一些問題,所以我們載入與執行在文件(HTML 檔)的開頭,是 HTML 在內部程式的範例中,你可以看到以下這樣結構的程式碼:
這是一個事件偵聽器,它偵聽瀏覽器的「DOMContentLoaded」事件,它是在 HTML body 部分已經完全載入與解析發出。區塊內(... 的部分)的 JavaScript 直到事件被發出後才會執行,這樣子問題就被避開了。(你將會在這個課程中學習到什麼是事件) 在外部程式的範例中,我們使用比較現代的 JavaScript 特性來解決這個問題,
在這個例子中,腳本(JavaScript 程式)與 HTML 會同時載入,所以程式將正確地執行。 備註: 在外部程式的範例裡,我們不需要使用 這個問題有另一個舊式的解決方法,就是將 async 和 defer實際上,有兩個方法可以閃過上述腳本被擋到的問題: 使用 例如你有以下的
你不能將元素的順序視為腳本載入順序。 當有許多非立即要使用的腳本,而你只希望它們能盡快被載入完畢,就應該使用 使用
全部具有 總結一下:
註解如同 HTML 和 CSS,在 JavaScript 的程式碼中也可以撰寫註解,它會被瀏覽器忽略,僅用來提供你的開發伙伴,說明程式是如何運作(或是自己,當六個月後回來看程式碼,忘記曾經做過了什麼)。註解非常有用,你應該常常使用它,尤其是在大型應用程式裡。註解有兩種形式:
舉例來說,我們可以在前面範例的 JavaScript 裡加入註解,像是:
備註: 一般而言,多寫註解比少寫來得好。但是要注意,如果你發現加了許多註解在說明變數的用途(那麼你的變數命名可能需要更直觀,更帶有意義),或是解釋非常簡單的操作(也許你的程式碼太過於複雜)。 總結所以你已經踏出在 JavaScript 世界中的第一步。我們從理論開始,逐漸熟悉使用 JavaScript 的原因,以及你可以用它做些什麼。過程中你看到了一些程式碼範例,學到如何將 JavaScript 與你網站的其它東西放在一起。 JavaScript 目前可能看起來有一點嚇人,然而不用擔心,在本課程我們會透過簡單的步驟,帶著你建立觀念並繼續向前。 在下一章節,我們將會投入更實用的知識 (en-US),帶你直接入門並建立你自己的 JavaScript 作品。 在這個學習模組中 |