16 |
21 |
HTML5 與前端技術的新進展
22 |
HTML5 是網頁技術上的一個重要里程碑，雖然其 W3C 的標準直到2014年才進入正式版的recommandation模式，但是在各家的瀏覽器當中，卻幾乎都已經相當完整的支援了HTML5的大部分功能。
23 |
HTML5 裡面有很多受到注目的功能，這些功能很可能改變整個web的設計與使用型態，其中較為人所知的部份如下：
24 |
25 | 2D 繪圖的 canvas 功能
26 | 3D 繪圖的 WebGL 功能
27 | GPS 定位的 geo location 功能
28 | 更多的語意標記 (article, ....)
29 | 搭配 CSS3 的動畫與更多排版功能
30 | 區域儲存 （localstorage, indexedDB）與離線應用的功能
31 | 雙向網路通訊的 websocket 功能
32 | 可以不阻礙畫面顯示的 webworker 功能
33 |
34 |
其中有關 2D、3D、GPS等功能比較一目了然，可以想見會造成哪些影響。這些功能讓遊戲動畫與地理資訊類的程式可以搬到HTML5/CSS3/Javascript 的平台上呈現使用，不需要再依賴flash或其他外掛了。
35 |
至於語意標記則是W3C在XML無法普及後企圖讓網路稍微具有點語意功能的方法，而CSS3則讓網頁排版可以更加動態與活潑，但是直到最近我才發現，其實最後三項 (區域儲存、websocket、webworker) 的影響力或許會比前面那些更大也說不定。
36 |
關注web與行動技術的朋友一定都會注意到，1993年網路大爆發之後，web技術大致在javascript提出之後就底定了，中間經過flash動畫的銜接，但web整體的技術並沒有很明顯的改變。反而是2007年開始智慧型手機上網後導致APP興起，於是技術又回到各家廠商主導的平台導向世界。
37 |
但是、HTML5 提出了區域儲存的功能之後，就為離線應用鋪好了一條路，這條路有可能直達APP的地盤，讓網頁也能做出類似APP的應用，於我們就有可能用HTML5做出跨平台的APP，而且不需要依靠像Titanium或PhoneGap 這樣的平台。
38 |
當然、基於安全性的顧慮，有些系統功能還是無法用HTML5做出來的，例如存取硬碟、呼叫系統函數等等，但是對於那些不需要存取系統函數的程式而言，可以將資料存在localstorage或indexedDB當中，然後用websocket的方式回傳到伺服端，這種方法可以部份的彌補原本網頁程式難以 APP化的問題。
39 |
最近、像是 Backbone.js , Angular.js, React.js 等著重在『單頁應用』的框架開始受到大量的關注，我想也是與 HTML5 技術有關的。但是、即使不做成單頁應用，而是做成多頁應用，然後再利用『區域儲存』的localstorage或indexedDB技術達成跨網頁間的資料共用，其實也可以做出類似 APP的效果，我們將在這兩期的『程式人雜誌』當中探討此一議題。
40 |
10 |
11 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
82 |
83 |
84 |
--------------------------------------------------------------------------------
/htm/article2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
16 |
21 |
演算法統治世界 (AUTOMATE THIS) (作者：研發養成所 Bridan)
22 |
23 | 演算法統治世界 Automate This: How algorithms came to rule the world 行人文化實驗室發行，ISBN 978-986-9028790 克里斯多夫‧史坦能（Christopher Steiner）著，陳正芬譯
24 |
25 |
我把這本書當作小說來看，內容是真實的並且正在進行中，只是有些事還沒那麼顯著，過些年當你發現一些工作被電腦或機器人取代時，不要太訝異，因為這些都是遲早會發生的事。
26 |
故事從 1960 年代華爾街開始，一位匈牙利裔的美國人以駭客手法切入股市交易，這就是電腦程式交易的始主，台灣的股市散戶要小心，如果你還是以直覺或聽信消息以手動交易，那你很容易小贏大輸，因為越來越多人採用電腦自動交易，平時研究好某種交易策略，然後就讓程式機器人自動跑，隨時抓取線上交易資料，程式判定狀況後，立即送單交易，就像百米賽跑一樣，別人一聽到槍聲就全力衝刺，而你是看到別人開跑後才起步，已經輸人一截。
27 |
演算法就是教電腦如何執行命令的方法，電腦語言就像每個國家的語言，每個物件動作有自己的名詞與動詞，雖然說法不同，但同指相同的事物，因此演算法才是精隨所在。通常精通數學的人在這方面比較吃香，想自動化工作，需要知道事物之間的關係，數學的學習就是這方面訓練的基礎，例如計算矩形面積，就是長方形長寬相乘與面積的關係。書中也簡述演算法與數學的歷史，值得探尋。
28 |
在二十一世紀初，已經有一些演算法被實質應用於特殊場合，例如 電影公司掃描未上映電影腳本預測票房結果，音樂公司掃描歌曲預測是否會流行，利用隨機演算法創作動人音樂，想要巴哈風格的古典樂也可以。未來如果有文辭優美的詩詞創作來自電腦產生不要太驚訝。
29 |
現在一些眼光先進的投資者，想利用速度取勝，因此投資電腦硬體或相關設備以取得或保持優勢，像美國東西部之間的光纖電纜就是這樣建出來的。
30 |
許多人應該知道 1997 IBM 深藍 (Deep Blue) 打敗世界西洋棋王卡斯帕洛夫 (Garry Kasparov)，2011 IBM 另一新作華生 (Watson) 在猜謎電視節目「危機重重!」(Jeopardy!) 擊敗所有人類對手，現在不同的演算法分別侵入撲克牌賽、體育賽事、挑選潛力選手、當中情局分析師、交友配對等。
31 |
美國器官捐贈配對、電腦斷層掃描分析也漸漸轉成電腦處理，未來如果遇到電腦取代醫生問診，不要太訝異，因為電腦的誤診率比人類醫生還低。美國 NASA 在登月計畫能後來居上贏過蘇聯，其中一樣就是精準分類人格特質 (有六類：感情驅動、思考基礎、行動導向、反思導向、意見導向、反應型)，讓個性相合的人在一起工作，避免因成員衝突導致任務失敗，現在已經有公司依據客戶性格將客服電話轉接到適合的人員處理。
32 |
在 2008 年前，許多一流的演算法人才被華爾街企業蒐羅，但在 2008 秋天雷曼兄弟因次級房貸崩潰後，人才開始往矽谷移動，其中臉書就內藏許多演算法，隨時記錄你使用臉書的習慣，從中擷取精華提供合適的廣告以獲取利益。想想看全球超過十億人口隨時使用臉書，大家隨便 PO 個文貼個圖點個讚，那資料要怎麼存怎麼用，這沒有厲害的數學高手寫程式是沒辦法處理海量資料的。
33 |
未來是屬於演算法創作者的世界，只要願意花點時間思考訓練自己，想想可以利用電腦程式幫你做些事情，這樣你才能控制程式，而不是被機器人取代。
34 |
(本文來自「研發養成所」 Bridan 的網誌，原文網址為 http://4rdp.blogspot.tw/2014/12/automate-this.html ，由陳鍾誠編輯後納入程式人雜誌)
35 |
Login demo
8 |
9 |
10 |
27 |
30 |
31 |
32 |
33 |
49 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/code/elearn.css:
--------------------------------------------------------------------------------
1 | ruby {
2 | ruby-align: center;
3 | ruby-overhang: auto;
4 | ruby-position: above;
5 | line-height: 300%;
6 | font-size: 20px;
7 | }
8 |
9 | rb {
10 | }
11 |
12 | rt {
13 | color: #336699;
14 | }
15 |
16 | .form-signin {
17 | max-width: 330px;
18 | padding: 15px;
19 | margin: 0 auto;
20 | }
21 | .form-signin .form-signin-heading,
22 | .form-signin .checkbox {
23 | margin-bottom: 10px;
24 | }
25 | .form-signin .checkbox {
26 | font-weight: normal;
27 | }
28 | .form-signin .form-control {
29 | position: relative;
30 | height: auto;
31 | -webkit-box-sizing: border-box;
32 | -moz-box-sizing: border-box;
33 | box-sizing: border-box;
34 | padding: 10px;
35 | font-size: 16px;
36 | }
37 | .form-signin .form-control:focus {
38 | z-index: 2;
39 | }
40 | .form-signin input[type="email"] {
41 | margin-bottom: -1px;
42 | border-bottom-right-radius: 0;
43 | border-bottom-left-radius: 0;
44 | }
45 | .form-signin input[type="password"] {
46 | margin-bottom: 10px;
47 | border-top-left-radius: 0;
48 | border-top-right-radius: 0;
49 | }
50 |
51 | .footer {
52 | position: absolute;
53 | bottom: 0;
54 | width: 100%;
55 | /* Set the fixed height of the footer here */
56 | height: 60px;
57 | background-color: #f5f5f5;
58 | }
59 |
60 | /*
61 | * Base structure
62 | */
63 |
64 | /* Move down content because we have a fixed navbar that is 50px tall */
65 | body {
66 | padding-top: 50px;
67 | }
68 |
69 |
70 | /*
71 | * Global add-ons
72 | */
73 |
74 | .sub-header {
75 | padding-bottom: 10px;
76 | border-bottom: 1px solid #eee;
77 | }
78 |
79 | /*
80 | * Top navigation
81 | * Hide default border to remove 1px line.
82 | */
83 | .navbar-fixed-top {
84 | border: 0;
85 | }
86 |
87 | /*
88 | * Sidebar
89 | */
90 |
91 | /* Hide for mobile, show later */
92 | .sidebar {
93 | display: none;
94 | }
95 | @media (min-width: 768px) {
96 | .sidebar {
97 | position: fixed;
98 | top: 51px;
99 | bottom: 0;
100 | left: 0;
101 | z-index: 1000;
102 | display: block;
103 | padding: 20px;
104 | overflow-x: hidden;
105 | overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
106 | background-color: #f5f5f5;
107 | border-right: 1px solid #eee;
108 | }
109 | }
110 |
111 | /* Sidebar navigation */
112 | .nav-sidebar {
113 | margin-right: -21px; /* 20px padding + 1px border */
114 | margin-bottom: 20px;
115 | margin-left: -20px;
116 | }
117 | .nav-sidebar > li > a {
118 | padding-right: 20px;
119 | padding-left: 20px;
120 | }
121 | .nav-sidebar > .active > a,
122 | .nav-sidebar > .active > a:hover,
123 | .nav-sidebar > .active > a:focus {
124 | color: #fff;
125 | background-color: #428bca;
126 | }
127 |
128 |
129 | /*
130 | * Main content
131 | */
132 |
133 | .main {
134 | padding: 20px;
135 | }
136 | @media (min-width: 768px) {
137 | .main {
138 | padding-right: 40px;
139 | padding-left: 40px;
140 | }
141 | }
142 | .main .page-header {
143 | margin-top: 0;
144 | }
145 |
146 |
147 | /*
148 | * Placeholder dashboard ideas
149 | */
150 |
151 | .placeholders {
152 | margin-bottom: 30px;
153 | text-align: center;
154 | }
155 | .placeholders h4 {
156 | margin-bottom: 0;
157 | }
158 | .placeholder {
159 | margin-bottom: 20px;
160 | }
161 | .placeholder img {
162 | display: inline-block;
163 | border-radius: 50%;
164 | }
165 |
--------------------------------------------------------------------------------
/htm/home.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
16 |
關於程式人雜誌
17 |
少年科技人雜誌 與 程式人雜誌 都是結合「開放原始碼與公益捐款活動」的雜誌，簡稱「開放公益雜誌」。開放公益雜誌本著「讀書做善事、寫書做公益」的精神，我們非常歡迎大家認養專欄、或者捐出您的網誌。
18 |
雜誌下載
19 |
41 |
本期內容
42 |
43 | 前言
44 |
48 | 本期焦點：令人眼花撩亂的 javascript -- 前端技術篇
49 |
55 | 程式人文集
56 |
60 | 雜誌訊息
62 |
雜誌取得
63 |
程式人雜誌預定於每個月 1 日出刊，您可以從下列網址取得程式人雜誌的所有內容 (包含當月最新出刊的雜誌)。
64 |
67 |
連絡我們
68 |
竭誠歡迎程式人投稿，或者成為本雜誌的專欄作家，現在就可以加入 程式人雜誌社團 一同共襄盛舉。
69 |
本雜誌編輯為「陳鍾誠 (@ccckmit )」，若要聯絡編輯，請寄信到 ccckmit at gmail dot com 。
75 |
16 |
21 |
令人眼花撩亂的 javascript 新世界
22 |
如果您尚未學過 HTML/CSS/javascript 等語法的話，建議您可以先看看 『少年程式人雜誌』 2014年12月號的下列文章，再來看本期的內容，應該會比較順利。
23 |
32 |
在我所學過的語言當中，javascript 大概是被誤解最多的一個語言。像是 JavaScript 是 Java 語言的簡化版、JavaScript 語言很難用、JavaScript 語言設計很差勁、javascript 只能用來寫寫小程式等等。
33 |
然而，這些誤解其實是我們不瞭解 JavaScript 所造成的。如果您用心的理解 JavaScript，您會發現這是一個「簡單、輕巧又優美」的語言，其原型導向的設計方式，用很簡單的概念達成了物件導向語言的功能，真的很適合做為瀏覽器上的共通語言。
34 |
javascript 的歷史還算蠻悠久的，在1995年時就由瀏覽器始祖網景公司 (Netscape) 的布蘭登·艾克 (Brendan Eich) 所設計出來，企圖在瀏覽器中引入程式語言，讓網頁可以擁有更多的互動性。
35 |
原本 javascript 稱為 livescript，但網景公司為了和昇陽公司合作推動 java，結果將此以語言改名為 javascript，於是javascript常被誤解為java版本的script，但其實兩者的設計上並沒有太大關係。
36 |
不過瀏覽器確實需要一個程式語言，可惜當初昇陽公司主推java語言的applet技術在瀏覽器上表現不佳，瀏覽器內的動畫等領域反而被Macromedia 公司的flash 佔領，而java卻陰錯陽差的成了桌上應用與伺服端的重要語言，這段歷史讓javascript沈寂了一段時間。
37 |
但是自從 2009 年 node.js 推出以來，javascript 就開始進入一個『大爆發』時期，各式各樣的『框架、函式庫、套件、平台、應用』層出不窮，而 HTML5 的成熟化更進一步讓 javascript 進入了一個嶄新的時代，為 javascript 創造出了全新的可能性。
38 |
現在的javascript技術演進可以說是令人眼花撩亂，從前端的 jQuery、backbone.js、angular.js、react.js 等技術，到後端的 node.js、express.js 、connect.js、mongoose.js，以及橫跨兩端用來通訊的 websocket, ajax 技術與 socket.io 等套件，還有經常搭配 javascript 使用的 HTML5, CSS3 技術，以及 bootstrap 等顯示框架，這些技術的蓬勃發展讓 javascript 再度回春，成為具有強大生命力的一種語言。
39 |
除了瀏覽器前後端之外，javascript也開始入侵到一些本地應用與手機APP等領域，像是 Titanium, PhoneGap 可以讓您用javascript/html/css 等技術撰寫橫跨iOS、android、window phone 等平台的APP，而 微軟新一代的 windows App 也是依靠 HTML/CSS/javascript 這樣的技術體系所建立的，另外像 Intel 的王文睿也釋出了 Node-webkit 這種可以用 HTML/CSS/javascript 創建以瀏覽器為何心的視窗程式環境，而 Unity 這個跨平台的遊戲引擎也主要支援 javascript /c# 這兩種語言，這讓 javascript 成為可以用來創建「從命令列程式、網路程式、web程式、視窗程式到遊戲程式」這樣涵蓋度極為廣泛的一種語言，大大的增加了javascript這個語言的吸引力。
40 |
未來、javascript 還會被用在什麼領域呢？我們很難預測，因為也有人開始試圖將 javascript 用到嵌入式系統與設計作業系統上了，而 javascript 的語法標準 ECMAScript 6 又為 javascript 添加了包含正規物件導向、 mixin 模組、預設值參數、yield語法等等，讓那些抱怨javascript物件語法不正統、語法不夠強大的人們，也有機會用正規的物件導向方式與強大的語法來撰寫javascript了。
41 |
這些 javascript 的新發展，可是讓身為『程式控』的我，感到非常的激動與興奮呢！
42 |
11 |
12 |
13 |
14 |
15 |
21 |
22 |
23 |
24 |
11 |
12 |
58 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
--------------------------------------------------------------------------------
/htm/info.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
16 |
26 |
雜誌訊息
27 |
讀者訂閱
28 |
程式人雜誌是一個結合「開放原始碼與公益捐款活動」的雜誌，簡稱「開放公益雜誌」。開放公益雜誌本著「讀書做善事、寫書做公益」的精神，我們非常歡迎程式人認養專欄、或者捐出您的網誌，如果您願意成為本雜誌的專欄作家，請加入 程式人雜誌社團 一同共襄盛舉。
29 |
我們透過發行這本雜誌，希望讓大家可以讀到想讀的書，學到想學的技術，同時也讓寫作的朋友的作品能產生良好價值 – 那就是讓讀者根據雜誌的價值捐款給慈善團體。 讀雜誌做公益也不需要有壓力，您不需要每讀一本就急著去捐款，您可以讀了十本再捐，或者使用固定的月捐款方式，當成是雜誌訂閱費，或者是季捐款、一年捐一次等都 OK ! 甚至是單純當個讀者我們也都很歡迎！
30 |
本雜誌每期參考價：NT 50 元，如果您喜歡本雜誌，請將書款捐贈公益團體。例如可捐贈給「羅慧夫顱顏基金會 彰化銀行(009) 帳號：5234-01-41778-800」。(若匯款要加註可用「程式人雜誌」五個字)
31 |
投稿須知
32 |
給專欄寫作者： 做公益不需要有壓力。如果您願意撰寫專欄，您可以輕鬆的寫，如果當月的稿件出不來，我們會安排其他稿件上場。
33 |
給網誌捐贈者： 如果您沒時間寫專欄或投稿，沒關係，只要將您的網誌以 [創作共用的「姓名標示、非商業性、相同方式分享」授權] 並通知我們，我們會自動從中選取需要的文章進行編輯，放入適當的雜誌當中出刊。
34 |
給文章投稿者： 程式人雜誌非常歡迎您加入作者的行列，如果您想撰寫任何文章或投稿，請用 markdown 或 LibreOffice 編輯好您的稿件，並於每個月 25 日前投稿到程式人雜誌社團 的檔案區，我們會盡可能將稿件編入隔月1號出版程式人雜誌當中，也歡迎您到社團中與我們一同討論。
35 |
如果您要投稿給程式人雜誌，我們最希望的格式是採用 markdown 的格式撰寫，然後將所有檔按壓縮為 zip 上傳到社團檔案區給我們， 如您想學習 markdown 的撰寫出版方式，可以參考 看影片學 markdown 編輯出版流程 一文。
36 |
如果您無法採用 markdown 的方式撰寫，也可以直接給我們您的稿件，像是 MS. Word 的 doc 檔或 LibreOffice 的 odt 檔都可以，我們 會將這些稿件改寫為 markdown 之後編入雜誌當中。
37 |
參與編輯
38 |
您也可以擔任程式人雜誌的編輯，甚至創造一個全新的公益雜誌，我們誠摯的邀請您加入「開放公益出版」的行列，如果您想擔任編輯或創造新雜誌，也歡迎到 程式人雜誌社團 來與我們討論相關事宜。
39 |
公益資訊
40 |
41 |
42 |
47 |
48 |
54 |
55 |
56 |
57 | 財團法人羅慧夫顱顏基金會
58 | http://www.nncf.org/ lynn at nncf dot org 顱顏患者 (如唇顎裂、小耳症或其他罕見顱顏缺陷）
65 | 銀行：009彰化銀行民生分行
66 |
67 |
68 | 社團法人台灣省兒童少年成長協會
69 | http://www.cyga.org/ cyga99 at gmail dot com 單親、隔代教養.弱勢及一般家庭之兒童青少年
76 | 銀行：新光銀行
77 |
78 |
79 |
80 |
14 |
15 | ```javascript
16 | $(document).ready(function()
17 | {
18 | $("button").click(function(){
19 | $("#p1").css("color","red").slideUp(2000).slideDown(2000);
20 | });
21 | });
22 | ```
23 |
24 | 這種『鏈式語法』的設計關鍵其實是在物件的成員函數中，盡可能的用 return this傳回自身。舉例而言，假如我們定義下列這樣一個物件，並在每個成員函數的最後都傳回this，那麼我們就可以用 obj.a().b().c().a().d().c().....這樣的語法進行鏈式呼叫了。
25 |
26 | ```javascript
27 | var obj = {
28 | a:function() {... return this; }
29 | b:function() {... return this; }
30 | c:function() {... return this; }
31 | d:function() {... return this; }
32 | }
33 | ```
34 |
35 | 另外、因為jQuery是集合導向的作法，每次都是處理一大堆節點，搭配上『鏈式語法』之後，就可以用一條鏈式語法對一大堆的節點進行連續的處理動作，這比起每次都要寫迴圈的方式要有效率多了。
36 |
37 | 另外、jQuery 也支援了一些像 post(), ajax() 與伺服端溝通的函數，讓網頁設計者可以用統一的語法搞定網頁的前端處理工作。
38 |
39 | ### Backbone.js
40 |
41 | 熟悉『設計模式』的朋友們應該聽說過MVC這個著名的設計模式，也就是『Model-View-Controller』，該模式將一個系統分成背後的『模型』(Model)、『顯示』(View)與連接的『控制』(Controller)等三大部份，這樣就能將模型與顯示兩者分開，然後再用controller將兩者結合在一起。
42 |
43 | 傳統上這種方法會用在『網路程式或視窗程式』上。對於web而言，我們通常會將model放在後端的伺服器，而將view放在前端的瀏覽器當中。
44 |
45 | 但是、由於javascript+HTML5這些技術讓瀏覽器可以承受的工作越來越多，因此前端就越來越複雜了，於是前端本身有時就包含了複雜的模型與控制部份，這時候就有人想到要在前端實現完整的MVC架構，以便處理這些複雜的工作，於是像backbone.js這樣的 前端MVC框架就被實現出來了。
46 |
47 | 如果您對backbone.js想有個初步的認識，可以參考下列文章，
48 |
49 | * [Javascript 前端工具 Backbone.js Framework 初學介紹](http://blog.wu-boy.com/2012/04/backbonejs-framework-tutorial-example-1/)
50 |
51 | 在 backbone.js 當中，實現的並不是 Model-View-Controller 這樣的模式，而是Model-Collection-View 這三類物件，以及利用event進行串連的方式，除此之外，javascript語言本身就扮演了某種程度的controller角色，因此您也可以輕易的將jQuery與backbone.js 搭在一起使用，兩者可以很完美的融合運作，不會有任何違和感。
52 |
53 | backbone.js 由於使用了 Underscore.js 這個框架，可以很容易的進行集合的鏈式處理，而 Underscore.js 框架裡又有一個簡易的樣板引擎，可以用來將樣板轉換成HTML區塊輸出，只要用view物件搭配Underscore.js，就可以得到一個相當完整的 MVC 框架了。
54 |
55 | 在 model 部份，backbone 的模型資料有任何修改時，都會觸發一些資料修改事件，只要在這些事件當中加入對應的程式碼，例如更新畫面或回傳資料到伺服器，就可以成為一個完整的網頁應用程式了。
56 |
57 | ### React.js
58 |
59 | React.js 是 facebook 公司所創建的一個開源專案，扮演的角色主要是 MVC 架構中的 View 角色，在 React.js 的官網中有個非常簡單的範例如下：
60 |
61 | ```html
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
76 |
77 |
78 | ```
79 |
80 | 這個範例大概可以說是 React.js 版本的 hello world! 您可以看到其中的關鍵部份是 React.render 這一段。
81 |
82 | ```javascript
83 | React.render(
84 | Hello, world! ,
85 | document.getElementById('example')
86 | );
87 | ```
88 |
89 | React 的特別之處是在 javascript 裡面放入了 HTML/XML 的內容，以下是 react官網中的一段關鍵描述，說明了react為何要搭配 JSXTransformer 去將 HTML/XML 語法轉換成 javascript 的原因，這樣就可以將 HTML/XML 完全的 javascript 化了。
90 |
91 | > The XML syntax inside of JavaScript is called JSX; check out the JSX syntax to learn more about it. In order to translate it to vanilla JavaScript we use `
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |