JavaScript 基本認識

1JavaScript 簡介

JavaScript是一種1.物件導向(Object-oriented programming, OOP)、2.弱型別(Week type)的3.腳本語言(Scripting language),為物件變數型別。
物件導向相對於程序性語言(Procedural),例如 PHP
弱型別是相較於強型別語言(Strong type),例如 ActionScript
腳本語言相較於編譯型語言(Compiled language),例如 C++、Java

跟其他物件導向不一樣的是,大部分物件導向語言都定義類別,然後建立類別的實例──物件,然而 JavaScript 則是基於原型而非類別的語言,物件是一種特殊的變數型別,有自己的子變數(屬性)和函數(方法),大量使用物件標記法(object notation)引用物件成員,例如將字串物件轉換大寫的 .toUpperCase(),這種標記法也可以連用,以便存取巢狀的屬性和方法,例如 someObject.someProperty.someMethod()。相較於 PHP 喜用底線做為命名的分割,例如 some_object,JavaScript 則使用駝峰式大小寫(camel-case)方法命名,例如 someObject

JavaScript 的概念一向容易被誤解,以下針對 JavaScript 再做深入釐清:


  1. JavaScript 不是 Java!JavaScript 是一種物件導向的「腳本」語言,相對於 Java 是如同 C 一樣的「編譯型」語言,且兩者用途大不相同
  2. JavaScript 是用來改進 Web 瀏覽器的客戶端體驗,並非只是警告和彈出視窗的功能
  3. JavaScript 不只是客戶端技術,儘管是主要目的和用途,在過去幾年裡也發展出多種形式的「伺服端 JavaScript」
  4. JavaScript 不難偵錯,找到適合工具就能有效除錯
  5. JavaScript 不是一種安全措施,因 JavaScript 很容易被使用者停用或操縱,絕不應依賴 JavaScript 達到安全性目的

JavaScript 的目的性及用意:


  1. 改善網站性能(歸功於 Ajax)
  2. 修復瀏覽器缺陷(CSS 較新特性的支援)
  3. 用於行動裝置(取決於裝置)
  4. 正確使用時完全可靠
  5. 將一些處理從伺服端改到客戶端,降低伺服器負載

撰寫 JavaScript 的基本原則:


  1. 應該改進客戶端體驗
  2. 應使用無侵入式的 JavaScript
  3. 藉由漸進式改善取得各類使用者的可靠體驗
  4. 根據瀏覽器的能力而不是瀏覽器來編寫程式碼

2JavaScript 歷史

誕生於 1995 年,原名 Mocha,後改名為 LiveScript,由網景公司在 1996 年公布 1.0 版本,網景公司的 Netscape Navigator 曾是最老的瀏覽器之一,因市占率被 Internet Explorer 佔據,後轉型為現今的 Mozilla ── Firefox 以及持續開發 JavaScript 的關鍵參與者之一。

JavaScript 是 ECMAScript(European Computer Manufacturers Association,歐洲電腦製造商協會簡稱,一種不為人知的標準國際腳本語言)的一種實際方式,ActionScript 也是由 ECMAScript 衍生而來,因此有很多相似之處,JavaScript 如今主要應用於 Web 瀏覽器,但仍可嵌入 PDF 中,以便建立小型桌面外掛程式,甚至成為動態伺服端功能的基礎。

早期 JavaScript 是醜陋的,利用快顯視窗、警告(顫動)、播放音訊等討人厭方式,或是圖片翻轉、瀏覽器狀態列操作較不煩人的常見作法應用在網頁上,在 90 年代 JavaScript 最好的應用方式是「驗證和改進 HTML 表單」,早期 JavaScript 的用途貧乏,主因為寬頻速度不夠快,其次是編寫跨瀏覽器 JavaScript 的困難,所以限制了 JavaScript 的使用發展。

而讓 JavaScript 重新受到重視,是自建立以來的 15 年中的三件重大發展:1.Ajax崛起、2.瀏覽器改進、3.框架興起,大大擴展了 JavaScript 的用途和易用性,實際上 JavaScript 的語言本身沒有太大的變化,應該說是一開始沒好好利用 JavaScript 的技術和特性,繼而學習發揮該技術最大潛能的一段過往。

JavaScript 核心來自於 ECMAScript,ECMAScript 於 2009 年推出第 5 版,是目前最穩定的版本,現代大部份的瀏覽器都支援 ECMAScript 3 和 ECMAScript 5,目前最新版本是 2015 年發佈的第 6 版,仍在修訂中(參考 ECMAScript 5 和 6 的相容性)。
          Jscript 是由微軟公司針對 ECMAScript 規範開發、相對於 JavaScript 的一種實作語言(因為 JavaScript 是註冊商標名稱),最初在 1996 年 IE3.0 時發行,在網頁技術上加入不少專屬 IE 的事件,例如 VBScript、ActiveX、DHTML 格式等,副檔名和 JavaScript 一樣都是 .js。
        

1. Ajax 崛起


JavaScript 歷史上最重大的發展之一是 Ajax(Asynchronous JavaScript and XML,非同步 JavaScript and XML),2005 年第一次提出 Ajax 概念,當時只是對瀏覽器之前已有的功能賦予的一種標記而已,Ajax 的基礎是:使用者在瀏覽器中操作時觸發事件,這些事件可由 JavaScript 「非同步」處理,也就是說,JavaScript 在後台進行處理,而不強制使用者等待事件回應,JavaScript 在 Ajax 的任務是發出伺服器資源的請求(最早是以 XML 的格式返回 JavaScript)。

例如:註冊會員的表單,若無做 JavaScript驗證,每次按「送出」都會向「伺服器」請求資料,為了避免耗時等待伺服器回應,應在向伺服器請求前先有個基本驗證,最後再向伺服器請求最後驗證, Ajax 也允許客戶端 JavaScript 以不打擾使用者的方式發出伺服器請求,例如:在使用者提交表單時,先暫停表單提交,將表單資料傳送給伺服端腳本,再由該腳本執行所有驗證並返回資料,簡單指出狀態和錯誤之處,獲得更加高效和靈敏的使用者流程,Ajax 確實複雜,但加入它有以下的關鍵好處: 提出 Ajax 概念後數年之內的底層技術沒有太大改變,而使用率和接受度則大大提升,Ajax 原始概念和現今 Ajax 主要區別:1.傳輸資料不一定是 XML,也可能是 JSON(JavaScript Object Notation JavaScript,物件標記),2.Ajax 請求的執行方法在各種瀏覽器中則更加一致。
瀏覽器可能禁用 JavaScript,所以始終必須使用伺服器端表單驗證

2. 瀏覽器改進


曾有三種原因很難學習 JavaScript:
  1. 使用場景、方式、原型化物件特性與眾不同(例如它是一種無法自訂類別的 OOP 語言)
  2. JavaScript 主要用於 Web 瀏覽器,以往這種語言歸類於網頁設計人員而非程式設計人員的範疇
  3. 建立可靠且相容的跨瀏覽器 JavaScript 是極度乏味又不容易的工作
現今瀏覽器粗略區分類別為 Internet Explorer 和其他瀏覽器(Firefox、Chrome、Safari、Opera)兩種,因 IE 在技術上和其他瀏覽器較為不同,相比之下其他瀏覽器的支援度和技術上較為進步,但近年來 IE 後期版本也慢慢更進,導致能使用 JavaScript 新穎技術的機會較以往大增。

3. 框架興起


框架(Framework)就是一種程式碼庫,目的為加快開發流程。優點是運用框架強大而靈活的功能改善Web介面和功能,最重要的是建立跨瀏覽器的可靠性;缺點是學習應用框架和進階客製化較為困難,且因使用框架需要下載比單獨使用 JavaScript 更多程式碼,意味著性能較差。
主流框架介紹:
名稱 網站
script.aculo.us http://script.aculo.us
YUI http://developer.yahoo.com/yui/
jQuery http://jquery.com
MooTools http://mootools.net
ExtJS http://www.sencha.com/
The Dojo Toolkit http://dojotoolkit.org/
Prototype http://www.prototypejs.org/

3其他網頁相關語言

相關語言比較


HTML


HTML(Hyper Text Markup Language,超文本標記語言)是用來建立網頁和其他可在網頁瀏覽器中看到的資訊的一種標記式語言,最新版本是在 2014 年確立的 HTML5。

CSS


CSS(Cascading Style Sheets,串接樣式表 / 階層式樣式表)是一種為結構化文件(如 HTML 或 XML)添加視覺表現的電腦語言,最新版本 CSS3 仍在發展中。
          依照MVC(模型、檢視、控制器)的概念,可以把三者和 MVC 連結為:
          
  • HTML 當作「模型」(要處理的資料)
  • CSS 當作「檢視」(呈現樣貌)
  • JavaScript 當作「控制器」(改變和活動的代理人)

PHP


PHP(PHP:Hypertext Preprocessor,超文本預處理器)是一種結合C、Java、Perl 等的建立動態網站最流行的開源語言。相較 C、C++ 以及其他語言可用來編寫獨立的應用程式,PHP 能自行採取行動,不需考慮事件。

Flash


Flash 是 Adobe 公司專利技術,目的都是為了增添網頁動態行為,建立 Web 應用程式──RIA(Rich Internet Applications)功勞,兩者可因應需求為彼此的替代方案,例如遊戲、圖形化呈現大量資料等,都可用 Flash 快速且可靠地建立。

ActionScript


ActionScript 是 Flash 和 Flex(Flex 是建立 Flash 內容的一種框架)的程式語言。

其他專有名詞介紹


XML


XML(eXtensible Markup Language,可延伸標記式語言)是一種用來傳送及攜帶資料資訊的標記式語言。

XHTML


XHTML(eXtensible HyperText Markup Language,可延伸超文本標記語言)是基於 XML 一種標記式語言,表現方式類似 HTML,不過語法更加嚴格。

JSON


JSON(JavaScript Object Notation,JavaScript 物件表示法)是一種輕量級的資料交換語言,以文字為基礎,易於閱讀,獨立於語言的文字格式,採用類似 C 的習慣。

DOM


DOM(Document Object Model,文檔物件模型)是呈現和遍覽 XML 資料(包括 HTML 和 XHTML)的一種方式,也可稱 HTML 與 XML 文件使用的一組 API,提供文件結構表述,讓你可以更動其中的內容和可見物,目的為建立網頁與 Script 或程式語言為主要語言溝通的橋樑。Web 瀏覽器的 DOM 標準是由 W3C 管理,目前的標準是 DOM Level 3,發行於 2004 年,儘管這個標準已出現多年,但仍無法在所有瀏覽器上保持一致的呈現,另外,DOM 雖不是 JavaScript 的核心部分,但 JavaScript 透過 DOM 與瀏覽器互動,這種技術常被稱作「DOM 操作」。

4開發方法

網站的目的是為了讓客戶(操作 Web 瀏覽器的最終客戶端)查看和使用,如果訪問者無法使用一個網站,那麼作為 Web 開發人員的工作就失敗了,為朝這個目標,網站的功能應該在所有的瀏覽器上都能實現,包括行動裝置的瀏覽器、非視覺化瀏覽器、停用 JavaScript 的瀏覽器和舊版瀏覽器等。評估網站的目標群,可以合理排除一些使用者,但還是盡可能支援更多瀏覽器,要知道一些情況例如舊版瀏覽器無法顯示 HTML5 的功能、IOS 不支援 Flash等等,就要考量網站是不是要使用 Flash,或是使用其他方式讓這些瀏覽器也可以瀏覽。

網站不但要在任何瀏覽器上都能運作,而且不應該試圖壞瀏覽器常規表現,例如阻止使用者按「返回」、使用瀏覽器歷史、存取快顯功能、右鍵等等,JavaScript 應改進客戶體驗,而不是徹底改變它,其次,應採用非侵入式(unobtrusive)的 JavaScript 技術,使 JavaScript 的程式碼與 HTML 的程式碼分離,使專案更容易維護程式碼。

在撰寫 JavaScript 之前,要先了解開發方法,選擇的方法不同,會影響編寫的程式碼,也會影響客戶端體驗,主要有三種方法:

優雅地降版(graceful degredation)


依照自己意願設計一個功能完整的網站,在不受瀏覽器支援的情況下提供替代資訊,例如 noscript。
大約只有 1%~3% 的客戶端無法瀏覽 JavaScript,這些客戶包括:
因此在不支援 JavaScript 功能之下,有備用內容提示客戶端的瀏覽狀況,通常使用 noscript 標籤:
          
        

漸進式改善(progressive enhancement)


以最小功能為基準,在此基礎上增強客戶端體驗,加入僅在客戶端支援時有效的「豐富」功能,確保所有客戶都能使用網站。
在 2003 年第一次提出,改善優雅地降等的反面,漸進式改善不只涉及 JavaScript,還有 CSS,一開始使用標準相容、結構良好、清楚語意的 HTML,以便清楚表達內容「意義」,而非「呈現」方式,例如使用 <em> 取代 <i> 強調字體,並將「呈現」全都轉移到所屬的 CSS,若無標籤能表示元件意義,就使用類別,例如 HTML5 的發想就是來自 header、footer、nav 的命名,以「HTML5 程式碼裸體化後還具意義性」的中心思想來開發。

非侵入式 JavaScript(Unobtrusive JavaScript)


將 JavaScript 和 HTML 的程式碼分開處理,盡量避免交錯使用的方法。
早期 JavaScript 不受限制散佈在 HTML 的做法,例如 href="javascript:window.create();" 或是 onsubmit="return validateForm()",會使程式碼難以閱讀及維護,且逐列檢視 HTML 來編輯嵌入式的 JavaScript 也違反了漸進式改善的原則:
  1. 帶有嵌入 JavaScript 的 HTML 並不只有語意含意
  2. 假設客戶端能處理 JavaScript
  3. 無法使用嵌入的 JavaScript 應用可靠的物件檢視技術

5前製作業了解

選擇 DOCTYPE


DOCTYPE 是頁面所用 HTML 版本的宣告,任何要開發網頁前必須先宣告 DOCTYPE 的版本,因頁面上所呈現的 HTML、CSS、JavaScript 的語法都要以這個版本的前提下規範,確保頁面在瀏覽器中的外觀和功能都會正確,例如 HTML 2.0 連表格都不支援,而 HTML 3.2 對樣式表的支援有限。如果存在有效的 DOCTYPE,瀏覽器將運行「標準相容」模式(或稱「標準」模式);一旦文件不存在或無效的 DOCTYPE,瀏覽器將執行「相容」(Quicks)模式,採用與舊版瀏覽器一致的處理方法。使用 W3C 的標記驗證服務時,就會依照開發者宣告的 DOCTYPE 版本去驗證。

過去幾年裡,最常使用的 DOCTYPE 是 HTML4.01 和 XHTML1.0 的版本,其有三種風格:
  1. Strict(嚴格):限制性最高、允許的元素集合最小
  2. Transitional(過渡):嚴格版本加上一些廢棄元素
  3. Frameset(框架):過渡版本加上框架的支援
通常 Dreamweaver 一開始都會設定介於 HTML 和 XHTML、最寬容的過渡選項──XHTML 1.0 Transitional 版本:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          
        

其他還有HTML 4.01 Strict、HTML 4.01 Transitional、XHTML 1.0 Transitional、XHTML 1.0 Strict、XHTML 1.1、XHTML Mobile 1.0、HTML5...等文件類型,當中 HTML5 是在 2014 年確立的版本,現代網站幾乎都全面改成 HTML5 開發:
          <!DOCTYPE html>
        
上述 DOCTYPE 的宣告有幾種好處:
          在嚴格的 XHTML 中,如果使用 img、input、br 標籤,必須使用斜線結束標籤,例如:<img src="file.jpg" alt=""檔案名稱"" />,否則會視為錯誤,另外屬性也需加上引號,嚴格版本的好處就是可以減少錯誤的發生,即使 HTML5 使用了較寬容的 XML 語法,但還是要遵守基本規則,所以建議在 HTML5 裡:
          
  1. 標籤結尾可不加斜線,減少程式碼,也清楚語法
  2. 屬性仍習慣加上引號,避免空格之類的錯誤

為 HTML 加入 JavaScript


將 JavaScript 加入到 HTML 裡,主要有兩種方式:
  1. 直接撰寫 JavaScript 在 HTML 文件裡(HTML5 不需作 type 標記,若是舊版本必須指定 type 類型,加上 type="text/javascript" 這行):
                  
                

  2. 載入 JavaScript 儲存在外部的 .js 檔案(此處要注意路徑描述):
                  <script src="js/file.js">
                

兩種方式各有其用處,通常只要是功能性的 JavaScript 使用外部載入的方式尤佳,因為利用載入的方式除了使 JavaScript 與 HTML 的程式區別,視覺上來說好維護,而且若是會在多個頁面中都會使用到重複性的功能,也方便修改,另一個好處是若瀏覽器有快取功能,在多個頁面使用相同 JavaScript 檔案就只需下載一次,加快了瀏覽網頁的速率。
          路徑分為「絕對路徑」和「相對路徑」,絕對路徑以根目錄為基準,通常都是「http://domain.com/」或「/」開始;相對路徑依據某個檔案為基準,可用「./」(目前目錄)或「../」(上一層目錄),相對路徑較難理解,但在移動檔案時可以確保檔案路徑正確。
        

使用 script 的五個特徵:
  1. 可以在單個 HTML 使用 script 的多個實例。
  2. 無法同時提交內嵌和外嵌,如果單份 HTML 需同時擁有兩個 JavaScript,必須使用兩個 script 實例。
  3. 如果在採用嚴格的 XHTML 裡撰寫,就必須在 CDATA 標記封裝所有內嵌的 JavaScript 程式碼,是因為與 XHTML 解析 script 資料有關,<!CDATA[]]> 包裝器避免某些實體發生的問題:
                  
                

  4. JavaScript 放置的位置通常是在 <head> 標籤裡面,不過近年來許多開發人員提倡將 script 元素放在 <body> 結束標記之前,是因為當瀏覽器遇到 script 標記時,會立即下載腳本,在下載完畢之前,瀏覽器無法繼續下載 HTML,會導致進入網頁等待時間太久,不利於客戶端使用者體驗。
  5. 同一個頁面載入過多的外部腳本,也會損害性能。

6編寫程序(以表單為例)

舉一個實用例子為例,建立一登錄表單,接著用 JavaScript 進行驗證,依照以下步驟:

1. 製作 HTML


編寫正確 HTML 表單,也可加上 CSS 美化:
        
Login
上述表單將提交給 login.php,此腳本進行如下工作:

2. 加入 JavaScript 層級


先加入一個外部的 JavaScript 擋案 login.js,把它放在 HTML 頁面中 <body> 結束標記之前:
          <script src="js/login.js">
        

需注意 HTML 繫結 JavaScript 之間的元素,對於 JavaScript 屬性是 id,對於 PHP 伺服端則用 name,通常來說這兩個值都每個元素來說都相同,頁面上的每個元素都必須有唯一的 id 值:
          //取得表單元素
          var loginForm = document.getElementById('loginForm');
        

3. 處理事件


JavaScript 是一種事件驅動語言,這意味著它僅在事件發生之後進行某些工作,包含: 為了讓 JavaScript 驗證 HTML 表單,必須確定觸發驗證程式碼的事件。常用於表單驗證的事件如下: 為表單加上一個事件監聽器(Event listener),事件監聽器是一種在「這個事件」發生在「這個物件」時呼叫的函數,每個物件,無論是整個瀏覽器視窗或頁面中的具體元素(不管是否為表單元素),都有能夠觸發的特定事件,被呼叫的函數通常是自行定義,物件、事件類型和函數的組合造成了各式各樣的可能性。當觸發某些工作時進行動作:
          //加入表單送出時的 onsubmit 監聽事件
          loginForm.onsubmit = validateForm;
        
validateForm 函數指派給 loginForm 物件的 onsubmit 屬性
  • 引用基於事件的物件屬性時,全部使用小寫字母
  • 注意函數名稱用在設定陳述式的右側,沒有引號,結尾也沒有小括號

從伺服器請求文件時,使用者將按照順序取得 HTML 文件資料:瀏覽器先接收 DOCTYPE,接著是 <html> 標記、<head> 標記和其內容,然後是檔案主體及其內容,包括相對應素材(CSS 檔、圖片和多媒體、JavaScript 和 Flash),直到文件結束。在瀏覽器完全瞭解 HTML 頁面之前無法呈現 DOM,所以要先確認瀏覽器完全載入整份頁面,才可安全使用 DOM。因為這是一個事件,可設定事件監聽器,進行 init(initialize)函數:
          //加入網頁載入時的 onload 監聽事件
          window.onload = init;
        

將表單觸發事件放入 init() 裡,函數實際的程式碼出現在大括號之間,代表呼叫函數後即將執行的任務。為了表示進行 DOM 時是安全的,加上「只在瀏覽器支援 document.getElementById()」的保護措施:
        function init(){
          //確認瀏覽器支援 document.getElementById() 才進行驗證
          if(document && document.getElementById){
            var loginForm = document.getElementById('loginForm');
            loginForm.onsubmit = validateForm;
          }
        }
        

現在有兩個事件監聽器:第一個是監聽 window 的 load 事件,此事件於每個頁面只發生一次,觸發時呼叫 init() 函數;第二個監聽器等待表單的提交,可能發生任意次(或一次也沒有)。每當發生此事件時,都呼叫 validateform() 函數。

4. 執行驗證


validateForm() 驗證表單後返回布林值,true 就允許表單提交給伺服器腳本;false 阻止表單提交,函數內包含針對各欄位的驗證:
        function validateForm(){
          var email = document.getElementById('email');         //取得 email 元素
          var password = document.getElementById('password');   //取得 password 元素

          //簡單檢查長度是否大於 0(證明輸入了任意內容)
          if((email.value.length > 0) && (password.value.length > 0)){
            return false;
          }else{
            alert('請完整填寫表單');
            return true;
          }
        }
        

現在有一個簡單、漸進式改善、非侵入式的 JavaScript,在發送 HTML 表單到伺服器之前進行驗證。該腳本有三個上層(非巢狀式)的元件: 現在整合成一個完整的腳本,並加入嚴格模式:
        function validateForm(){
          'use strict';
          var email = document.getElementById('email');
          var password = document.getElementById('password');

          if((email.value.length > 0) && (password.value.length > 0)){
            return false;
          }else{
            alert('請完整填寫表單');
            return true;
          }
        }

        function init(){
         'use strict';
          if(document && document.getElementById){
            var loginForm = document.getElementById('loginForm');
            loginForm.onsubmit = validateForm;
          }
        }

        window.onload = init;
        

7編寫重點

網頁載入需知


物件事件屬性


引用嚴格模式


嚴格模式自 ECMAScript 5 後加入,此方式強制我們撰寫更好的程式碼,在每個 JavaScript 腳本開頭或每個函數的第一行放置:
          'use strict';
        
執行嚴格方法將會有以下現象: 參考 MSDN strict 模式: https://msdn.microsoft.com/zh-tw/library/br230269(v=vs.94).aspx

程式錯誤類型有三種


如果 JavaScript 程式碼完全無法執行,就可能是語法錯誤。

常見的錯誤原因


偵錯技術


全域和區域變數的使用


應用程式應僅完成必要的最少功能。如果該變數不是絕對必要的,就不該宣告全域變數,全域變數對性能有不利的影響。

變數名稱命名


變數名稱也稱「識別子(Identifier)」,命名規則如下:

8使用工具

文字編輯器(plain text editor)


操作簡單、價格便宜,硬體需求較少,內建功能容易擴充。
名稱 官網 支援系統 免費
Komodo Edit http://komodoide.com/komodo-edit/ win.mac.linux v
UltraEdit http://www.ultraedit.com/ win.mac.linux
Notepad++ https://notepad-plus-plus.org/ win v
EditPlus https://www.editplus.com/ win v
TextMate https://macromates.com/ mac
TextWrangler http://www.barebones.com/products/textwrangler/ mac v
BBEdit http://www.barebones.com/products/bbedit/ mac
Emacs https://www.gnu.org/software/emacs/ win.mac.linux v
Vim http://www.vim.org/ win.mac.linux v
Sublime Text http://www.sublimetext.com/ win.mac.linux
Atom https://atom.io/ win.mac.linux v
※沒有圖形介面的 vi

IDE(Integrated Development Environment,整合開發環境)


操作功能完善、價格較貴、硬體需求較高,擁有內鍵偵錯功能、所見即所得。
名稱 官網 支援系統 免費
Adobe Dreamweaver http://www.adobe.com/tw/products/dreamweaver.html win.mac
Komodo IDE http://www.aptana.com/ win.mac.linux v
Aptana Studio https://atom.io/ win.mac.linux v
Eclipse https://eclipse.org/ win.mac.linux v
NetBeans https://netbeans.org/ win.mac.linux v

不管是文字編輯器或是 IDE,只要是好的編輯器都有一些共通性:


偵錯器(Debugger)


名稱 官網
Firebug http://getfirebug.com/
JSLint http://www.jslint.com/
JSHint http://jshint.com/

網頁伺服器(Web Server)


名稱 官網 支援系統 免費
Apache https://httpd.apache.org/ win v
XAMPP https://www.apachefriends.org/zh_tw/index.html win.mac v
MAMP https://www.mamp.info/en/ mac

瀏覽器(Browser)以及開發擴充工具


名稱 官網 開發擴充工具
Chrome https://www.google.com/chrome/browser/desktop/index.html Pendule、Firebug Lite、JavaScript Tester、Speed Tracer、Validity
Firefox https://www.mozilla.org/zh-TW/firefox/new/ Firebug、Web Developer、YSlow!、Greasemokey、Total Validator、View Source Chart、Console2、JS View
Opera http://www.opera.com/zh-tw Dragonfly
Safari https://www.apple.com/tw/safari/ Web Inspector
Internet Explorer http://windows.microsoft.com/zh-tw/internet-explorer/download-ie

虛擬瀏覽器線上測試


名稱 官網
CrossBrowserTesting https://crossbrowsertesting.com/
BrowserCam http://www.browsercam.com/
Sauce Labs https://saucelabs.com/
Browsera http://www.browsera.com/
browserling https://www.browserling.com/
Mogotest http://mogotest.com/
Cloud Testing http://www.cloudtesting.com/

第三方網站線上測試


名稱 官網
CodePen http://codepen.io/
JS Bin http://jsbin.com/
js Fiddle http://jsfiddle.net/

JavaScript 開發人員相關官方資源


名稱 網站
Opera https://dev.opera.com/
Mozilla https://developer.mozilla.org/zh-TW/docs/Web/JavaScript
Chrome https://developers.google.com/
Internet Explorer https://dev.windows.com/zh-tw/microsoft-edge-for-devs

JavaScript 國外開發前輩


作者名字 網站
Brendan Eich https://brendaneich.com/
Douglas Crockford http://www.crockford.com/
John Resig http://ejohn.org/
Dean Edwards http://dean.edwards.name/
Paul Irish http://www.paulirish.com/
Alex Sexton https://alexsexton.com/
Remy Sharp https://remysharp.com/
Christian Heilmann http://christianheilmann.com/
Thomas Fuchs http://mir.aculo.us/

JavaScript Reference


名稱 網站
Mozilla Developer Network(MDN) https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference
Microsoft Developer Network(MSDN) https://msdn.microsoft.com/zh-tw/library/yek4tbz0(v=vs.94).aspx
DEMO MEMO