JavaScript 是什麼? - 學習該如何開發Web | MDN

JavaScript 是一種腳本，也能稱它為程式語言，可以讓你在網頁中實現出複雜的功能。

當網頁不只呈現靜態的內容，另外提供了像是：內容即時更新、地圖交動、 ... SkiptomaincontentSkiptosearchSkiptoselectlanguage學習該如何開發WebJavaScript—動態的客戶端指令JavaScript初探JavaScript是什麼?ArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.高層次的定義它究竟可以做什麼呢?JavaScript在你的頁面做了些什麼？如何在網頁中增加JavaScript？註解總結在這個學習模組中RelatedTopics 全新手請從這開始！ Web入門 Web概述 安裝基本軟體 自己的網站會是什麼樣子？ 處理檔案 HTML基礎概念 CSS基礎概念 JavaScript基礎概念 發佈自己的網站 Web運作的方式 HTML—架構Web HTML介紹 HTML概述 HTML入門 標題裡是什麼？HTML中的後設資料(Metadata) HTML文字基礎概念 建立超連結 進階文字格式 文件與網站架構 HTML除錯 親和度：設個字母 親和度：架構出具備內容的網頁 多媒體與嵌入 多媒體與嵌入的概述 HTML中的圖片 視訊與音訊內容 從物件到iframe—其他嵌入技巧 為Web新增向量圖 適應性圖片 親和度：Mozilla形象頁面 HTML表格 HTML表格概述 HTML表格基礎 HTMLtableadvancedfeaturesandaccessibility Assessment:Structuringplanetdata CSS—設計Web的風格 初探CSS 初探CSS（概述） CSS是什麼？ CSS入門 HowCSSisstructured CSS怎麼運作 Assessment:Stylingabiographypage CSS組件 CSSbuildingblocksoverview Cascadeandinheritance CSSselectors Theboxmodel Backgroundsandborders Handlingdifferenttextdirections Overflowingcontent CSSvaluesandunits SizingitemsinCSS Images,media,andformelements Stylingtables DebuggingCSS OrganizingyourCSS Assessment:FundamentalCSScomprehension Assessment:Creatingfancyletterheadedpaper Assessment:Acool-lookingbox 樣式化文字 樣式化文字概述 基礎的文字與字型樣式化 樣式化列表 樣式化連結 Web字型 親合度：設定社區大學首頁的版面 CSS版面配置 CSS版面配置概述 IntroductiontoCSSlayout NormalFlow 彈性區塊 格線 浮動 定位 Multiple-columnlayout Responsivedesign Beginner'sguidetomediaqueries Legacylayoutmethods Supportingolderbrowsers Assessment:Fundamentallayoutcomprehension JavaScript—動態的用戶端指令 JavaScript第一步 JavaScript第一步概述 什麼是JavaScript？ 初次接觸JavaScript 出了什麼問題？JavaScript疑難排解 儲存你所需的資訊—變數 JavaScript基礎概念—數字與運算子 處理文字—JavaScript中的字串 有用的字串函式 陣列 親合度：傻瓜故事產生器 JavaScript基礎要件 JavaScript基礎要件概述 於程式碼中決策—條件 程式碼迴圈 函式—可重複使用的程式碼區塊 建立自己的函式 函式回傳值 事件介紹 親合度：圖庫 JavaScript物件介紹 JavaScript物件概述 物件基礎概念 物件原型 Object-orientedprogrammingconcepts ClassesinJavaScript 使用JSON資料 物件建構實作 親合度：為彈跳球展示新增功能 非同步的JavaScript AsynchronousJavaScriptoverview IntroducingasynchronousJavaScript Howtousepromises Implementingapromise-basedAPI Introducingworkers Assessment:sequencinganimations 客戶端webAPIs 客戶端webAPIs IntroductiontowebAPIs 文件操作 Fetchingdatafromtheserver ThirdpartyAPIs Drawinggraphics VideoandaudioAPIs Client-sidestorage 網頁表單-與使用者資料合作 核心的表單學習途徑 網頁表單概述 Yourfirstform 如何建構網頁表單 Basicnativeformcontrols TheHTML5inputtypes Otherformcontrols Stylingwebforms Advancedformstyling UIpseudo-classes Client-sideformvalidation Sendingformdata 深入網頁表單 Howtobuildcustomformcontrols SendingformsthroughJavaScript CSSpropertycompatibilitytableforformcontrols 無障礙網頁—每個人都可以使用的網頁 無障礙網頁指南 無障礙網頁概述 何謂無障礙網頁？ HTML:Agoodbasisforaccessibility CSSandJavaScriptaccessibilitybestpractices WAI-ARIA基礎 Accessiblemultimedia 行動裝置上的無障礙 無障礙網頁評估 Assessment:Accessibilitytroubleshooting 工具與測試 Client-sidewebdevelopmenttools Client-sidewebdevelopmenttoolsindex Client-sidetoolingoverview Commandlinecrashcourse Packagemanagementbasics Introducingacompletetoolchain Deployingourapp 介紹前端框架 前端框架簡介 Frameworkmainfeatures React GettingstartedwithReact BeginningourReacttodolist ComponentizingourReactapp Reactinteractivity:Eventsandstate Reactinteractivity:Editing,filtering,conditionalrendering AccessibilityinReact Reactresources Ember GettingstartedwithEmber Emberappstructureandcomponentization Emberinteractivity:Events,classesandstate EmberInteractivity:Footerfunctionality,conditionalrendering RoutinginEmber Emberresourcesandtroubleshooting Vue 開始學Vue CreatingourfirstVuecomponent RenderingalistofVuecomponents Addinganewtodoform:Vueevents,methods,andmodels StylingVuecomponentswithCSS UsingVuecomputedproperties Vueconditionalrendering:editingexistingtodos FocusmanagementwithVuerefs Vueresources Svelte Svelte入門 StartingourSvelteTodolistapp DynamicbehaviorinSvelte:workingwithvariablesandprops ComponentizingourSvelteapp AdvancedSvelte:Reactivity,lifecycle,accessibility WorkingwithSveltestores TypeScriptsupportinSvelte Deploymentandnextsteps Angular Angular新手入門 開始開發我們的Angular待辦事項應用程式 使用樣式點綴我們的Angular應用程式 建立一個item元件 篩選我們的待辦事項項目 建構Angular應用程式與更多資源 GitandGitHub GitandGitHub概述 HelloWorld GitHandbook ForkingProjects Aboutpullrequests MasteringIssues 跨瀏覽器測試 跨瀏覽器測試概述 跨瀏覽器測試介紹 測試執行策略 處理常見的HTML與CSS問題 處理常見的JavaScript問題 處理常見的親合度問題 建置功能偵測 自動化測試介紹 設定自己的自動化測試環境 伺服端網站程式設計 第一步 第一步概述 伺服端介紹 用戶端概述 伺服端網路框架 網站安全 Django網站框架(Python) Django網站框架(Python)概述 介紹 設定開發環境 線上教學：本地圖書館網站 線上教學2：建立網站骨架 線上教學3：使用模型 線上教學4：Django管理網站 線上教學5：建立我們的首頁 線上教學6：泛型清單與細節檢視 線上教學7：會話(Sessions)框架 線上教學8：使用者授權與許可 線上教學9：搭配表單 線上教學10：測試Django的WebApp 線上教學11：佈署Django至產品 WebApp安全性 親合度：DIY迷你部落格 Express網站框架(node.js/JavaScript) Express網站框架(Node.js/JavaScript)概述 Express/Node介紹 設定Node(Express)的開發環境 Express教學1:本地圖書館網站 Express教學2:建立骨架網站 Express教學3:使用資料庫(Mongoose) Express教學4:路由與控制器 Express教程5:呈現圖書館的資料 Express教學6:使用表單 Express教學7:佈署到正式環境 更多資源 常見問題 HTML問題 CSS問題 JavaScriptquestions Web的運作方式 工具與設定 設計與親合度 高層次的定義它究竟可以做什麼呢?JavaScript在你的頁面做了些什麼？如何在網頁中增加JavaScript？註解總結在這個學習模組中JavaScript是什麼? Overview:Firststeps 次頁 歡迎來到MDN的JavaScript初學者課程！我們將在這個章節綜觀JavaScript，回答一些像是「它什麼？」和「可以使用它作什麼？」之的問題，並確保你了解JavaScript的特性。

先備條件： 基本的電腦知識，基本了解HTML和CSS技術。

學習目標： 了解JavaScript的本質、功能、以及它如何構成網站的一部分 高層次的定義JavaScript是一種腳本，也能稱它為程式語言，可以讓你在網頁中實現出複雜的功能。

當網頁不只呈現靜態的內容，另外提供了像是：內容即時更新、地圖交動、繪製2D/3D圖形，影片播放控制……等，你就可以大膽地認為JavaScript已經參與其中。

它是標準網頁技術蛋糕的第三層，而其他兩層（HTML和CSS）我們在其他學習單元中有更多詳細的介紹。

HTML是一種標記語言，我們使用它組織網頁裡的內容並給予定義，例如：定義段落、標題、資料表格，或是在頁面嵌入圖片和影片。

. CSS是一種樣式規則的語言，用來幫我們的HTML內容上套用樣式，例如：設置背景顏色、字型，或讓內容以多欄的方式呈現。

JavaScript是一種腳本語言，它使你能夠動態的更新內容、控制多媒體、動畫……幾乎所有事。

（好吧，不是所有事情，但神奇的是你可以通過短短幾行JavaScript程式碼實現。

） 這三層很好的構建在一起。

讓我們以一個簡單的文字為例。

我們可以使用HTML標記來表示它的結構和意圖：

Player1:Chris

然後我們可以加一些CSS，讓它看起來更好： p{ font-family:'helveticaneue',helvetica,sans-serif; letter-spacing:1px; text-transform:uppercase; text-align:center; border:2pxsolidrgba(0,0,200,0.6); background:rgba(0,0,200,0.3); color:rgba(0,0,200,0.6); box-shadow:1px1px2pxrgba(0,0,200,0.4); border-radius:10px; padding:3px10px; display:inline-block; cursor:pointer; } 最後，我們可以加一些JavaScript來作出互動的行為： constpara=document.querySelector('p'); para.addEventListener('click',updateName); functionupdateName(){ letname=prompt('輸入新的名字'); para.textContent='Player1:'+name; } 試試點擊這最後版本的文字，看看會發生什麼事情（你同樣也可以在GitHub找到這個範例，來查看原始碼或在線上執行）！ JavaScript能做到更多，讓我們更深入地探索。

它究竟可以做什麼呢?JavaScript語言的核心包含了很多常用的程式功能供你使用，如： 將有用的值存儲在變數中。

例如上述例子，我們要求輸入一個新名字，然後將該名字存在名為name的變數裡。

對文本片段的操作（在程式裡稱作"字串"）。

在上述例子中，我們拿了字串"Player1:"並將其與name變數連接來創造完整文本標籤，如：''Player1:Chris"。

執行程式碼，回應網頁上發生的某些事件。

在上述例子中，我們使用click事件，當按鈕被點擊時，便執行更新文本標籤的程式碼。

以及其他更多更多的功能！ 然而，更令人興奮的是那些基於用戶端的JavaScript語言構建的功能。

也就是所謂的應用程式介面（API），提供JavaScript程式額外的超能力。

API是預先製作完成的程式模組，支援開發者實現困難或無法實現的功能。

在程式設計中就如同在建築房子的時候使用系統傢俱，拿預先裁好的板子用螺絲鎖上來組合成書架，相比從頭自己設計，找合適木材，切成正確的形狀和尺寸，再找到合適的螺絲最後組裝書架而言更簡單。

他們通常分為兩類。

瀏覽器API（BrowserAPIs）內建在你的瀏覽器中，能夠依本地的電腦環境輸出資料或實現複雜的功能。

舉例而言： DOM（文件物件模型）API讓你能操作HTML和CSS，像是建立、移除或改變HTML元素，或動態地將新樣式套用到頁面…等等。

每當你看到彈出視窗，或有新的內容出現在畫面上（就像上面的範例所展示的），那就是DOM在動作。

Geolocations（地理位置）API可以取得位置資訊。

這就是GoogleMaps取得你的位置並標示在地圖上所透過的方式。

Canvas和WebGLAPI可以讓你在網頁創造2D動畫及3D圖像。

人們正使用這些技術來作一些令人驚奇的事，參見ChromeExperiments及webglsamples. Audio和VideoAPI像HTMLMediaElement和WebRTC一樣讓你可以使用多媒體做真正有趣的事情，例如在網頁中播放音樂或影片，或由網路攝影機頡取你的影像顯示在另一個人電腦裡（試試我們的簡單例子來了解）。

注意：上面的許多範例無法在舊版的瀏覽器上運作。

使用現代的瀏覽器像是Firefox、Chrome、Edge或Opera來嘗試執行你的程式總是比較好的。

當你接近要交付作為產品的程式（也就是實際的用戶將要使用的時候)，就需要思考關於跨瀏覽器測試的事情。

第三方API預設不內建在瀏覽器裡，你通常由網路上取得他們的程式碼與資訊。

例如： TwitterAPI能讓你做很多事，像是顯示最新的Twitter貼文在你的網站上。

GoogleMapsAPI能讓你在自己的網站中嵌入訂製的地圖或其他相關功能。

注意：我們不會在此涵蓋這些進階的APIs。

你可以在我們的客戶端網頁API單元找到更多資訊。

那裡也有很多的東西。

然而不要一頭熱陷進去。

你不會在學習JavaScript24小時後，就能開發出下一個Facebook、Google地圖或Instagram之類的產品出來。

有許多的基礎的東西得先了解，這也是你在這裡的原因，讓我們繼續吧！JavaScript在你的頁面做了些什麼？這裡我們開始看一些程式碼，探索當JavaScript在你的頁面上執行時，發生了哪些事情。

簡單回顧一下當瀏覽器載入一個網站時會發生的事情（第一次是在我們的CSS如何工作章節中提到）。

當瀏覽器載入一個網頁，就是在執行環境（瀏覽器分頁）中執行程式碼（HTML，CSS和JavaScript）。

就像是工廠收集原料（程式碼）並且產出商品（網頁呈現的結果）。

透過DOMAPI（上面提到的）動態調整HTML與CSS進行改變網頁呈現，在JavaScript是很常見的使用方式。

要注意的是，檔案中的程式碼通常會以出現在頁面上的順序來執行。

如果JavaScript比準備操作的HTML、CSS更早被載入，就可能會發生錯誤。

你將會在這個章節的後段學到一些解決問題的方法，它在腳本載入策略的部分。

瀏覽器安全性瀏覽器的每個分頁有獨立的空間來執行程式碼（技術上稱「執行環境excutionenvironments」），這表示在絕大部分的情形之下，每個分頁的程式碼是獨立運行的，不能直接影響其它分頁（或網站）裡的程式。

這是一個好的安全措施，少了它，有心人會開始寫程式來偷取網站的資料，或是作其它不好的事情。

注意：是有一些安全的方式能在不同的網頁、分頁之間傳遞程式和資料，不過這些進階的技術不會在涵蓋在這個單元中。

JavaScript的執行順序當瀏覽器遇到一段JavaScript程式碼，通常會由上到下執行。

這意味著你需要注意東西擺放的順序。

為了說明，讓我們回到我們曾看過的第一個範例： constpara=document.querySelector('p'); para.addEventListener('click',updateName); functionupdateName(){ letname=prompt('輸入新的名字'); para.textContent='Player1:'+name; } 這裡我們選擇了一個文字段落（第1行），然後加上事件偵聽器，所以當段落被點擊的時候，updateName()程式區塊（5到8行）會被執行。

updateName()程式區塊（這種可以重複使用的程式區塊被稱為「函數function」）會向使用者要一個新的名字，然後將插到段落中，更新顯示的內容。

如果你交換前兩行的程式碼，它將不再正常運作。

取而代之的，瀏覽器開發主控台(en-US)會回報一個錯誤訊息：「TypeError:paraisundefined」，意思是para物件尚不存在，所以我們在它上頭增加事件偵聽器。

注意:這是一個很常見的錯誤，在你嘗試對物件進行操作之前，你需要注意它們已經存在。

直譯式與編譯式程式語言你可能在程式相關的文章中看過直譯式(interpreted)與編譯式(compiled)這兩個詞。

在直譯式程式語言中，程式碼由上到下執行，而且執行的結果是立即回應得到的。

在瀏覽器執行前，你不需要將程式轉換為其它的形式。

程式碼的內容是以對程式人員友善的形式並直接能夠運作。

另一方面，編譯式程式語言需要在電腦執行之前轉換（編譯）成另一種形式。

例如：C/C++在被電腦執行之前要編譯為組合語言。

被執行的程式是一種二進位的格式，由程式原始碼產生出來。

JavaScript是一個輕量的直接程式語言。

網頁瀏覽器收到文字格式的JavaScript程式碼，並直接執行。

以技術的角度來看，大多數現代的JavaScript直譯器實際上會使用一種稱為即時編譯（just-in-timecompiling）的技術來提升執行表現。

JavaScript被使用時，原始程式會被編譯成更快的二進位格式，讓它們能更有效率的運行。

然而，JavaScript仍然被認為是一種直譯式的程式語言，因為編譯動作是在程式運作時，而不是事先完成。

兩種語言都有各自的優點，但是我們不在此時討論這個議題。

伺服器端與用戶端程式你也有可能聽過伺服器端與客戶端程式，尤其在網站開發的領域。

客戶端程式在使用者的電腦中運作，當瀏覽網頁的時候，頁面中的客戶端程式被下載，接著被瀏覽器執行與顯示結果。

在這個單元中，我們只談論客戶端JavaScript。

另一方面，伺服器端的程式在伺服器上執行，接著產出的結果被瀏覽器下載後顯示。

受歡迎的伺服器端網頁語言，包括PHP、Python、Ruby和ASP.NET以及…JavaScript！JavaScript也能夠作為伺服器端程式語言，流行的Node.js環境就是一例。

你可以在我們的動態網站—伺服器端網站程式設計主題中找到更多資訊。

動態與靜態程式動態一詞被用於描述用戶端JavaScript和伺服器端程的式語言，用來描述具有在不同的狀況下更新網頁／網頁應用程式來顯示不同東西，依需要來產生新內容的能力。

是根據要求生成新內容的能力。

伺服器端程式在伺服器上動態產生的新內容，可能是來自資料庫中取出的數據，而用戶端JavaScript在收到由伺服器端要回來的資料，在瀏覽器內動態產生新的內容（如HTML表格）後加入頁面中呈現出來。

在兩個情境中詞義稍微不同，但是相關的，兩種方法（伺服器端和用戶端）通常可以協同工作。

一個沒有動態更新內容能力的網頁被稱為靜態，它在任何時候都只顯示一樣的內容。

如何在網頁中增加JavaScript？在HTML頁面中使用JavaScript與CSS的方法類似。

在HTML中CSS藉著(en-US)元素引入外部樣式（stylesheets）以及