5 JavaScript

5.1 什麼是JavaScript?

JavaScript Inventor Brendan Eich

Figure 5.1: JavaScript Inventor Brendan Eich

  • JavaScript與Java無關
  • 由Brendan Eich於1995年創建
  • 最初是作為Web瀏覽器(客戶端)的原型語言開發的。
  • 現在也在伺服器端(Node.js)中使用。
  • 與Java無關,只是為了營銷目的而命名。
  • C風格的語法,但從功能程式設計中獲得靈感
  • for,while,continue,break,if / else,switch類似於C.
  • 運算符(+, - ,*,/,%)也類似(除了==,!=,||)
  • 包括map,reduce,forEach等函數操作。

5.1.1 JavaScript數據類型

數據類型

  • 數字:42,3.14159
  • 邏輯值:真,假
  • 字串:“你好”,“台灣”
  • 空值
  • undefined * - undefined不為null(空值)!

5.1.2 JavaScript Object Notation (JSON)

  • JavaScript Object Notation 對象表示法
  • JavaScript作為存儲資料的XML替代方案
  • 範例:

[{“Station”:“Alishan”,“Temperature”:14.5,“Precipitation”:812.4,“Humidity”:95,“Pressure”:762.5,“dayrain”:30},….]

5.2 什麼是D3?

  • D3代表數據驅動文檔。
  • D3.js 是“用於根據數據操作文檔的JavaScript庫”。
  • D3可以與HTML和CSS(以及其他)結合使用,以視覺化網頁上的數據。
  • 這是一個開放的框架。
  • 它在程式腳本中嵌入或包含數據資料,以在網頁中創建圖像。

“With D3, designers selectively bind input data to arbitrary document elements, applying dynamic transforms to both generate and modify content.” “使用D3,設計人員有選擇地將輸入數據綁定到任意文檔元素,應用動態轉換來生成和修改內容。“

Bostock, Ogievetsky and Heer, 2011

5.2.1 D3和Web文檔

  • D3是基於Web的,使用以下組件:
    • HTML(超文本標記語言)
    • CSS(串樣式列表)
    • JavaScript(JS)
    • SVG(可縮放向量圖形),解釋圖形輸出 以上所有內容都可以使用文本編輯器進行編碼。輸出需要帶有JavaScript控制台的瀏覽器

5.2.2 Sample D3 graphics

Interactive Ladder Graph 交互式梯形圖
D3: Ladder graph

Figure 5.2: D3: Ladder graph

Click here to access the online version

Interactive Aster Graph
D3: Aster graph

Figure 5.3: D3: Aster graph

Click here to access the online version

Interactive Network Graph