顯示具有 diary 標籤的文章。 顯示所有文章
顯示具有 diary 標籤的文章。 顯示所有文章

2015年2月28日 星期六

修課

在學校最後一學期，只剩下寫論文，其他時間都是我的，除了恢復規律的運動與訓練外，在Udacity上挑了十門課來修，還好Udacity頗平易近人，不會像Coursera或edX那麼不親切
張貼者： 於 沒有留言:
標籤：

2015年1月22日 星期四

20150107 教具量表的選擇

先前一直在研究，教育能否適用NASA的TLX量表，直到讀到交大研究生吳嘉惠寫的視覺引導在代數教材設計之探討－以解二元一次聯立方程式為例這篇論文後，才敢肯定可以用

在讀到大同大學工業設計所的研究生游嘉智所寫的擴增實境行動遊戲設計研究-以古蹟寺廟導覽為例這篇論文，確定能把ARCS模型與NASA TLX量表結合使用。

教材動機量表（The Instructional Materials Motivation Survey ,IMMS）
動機傳遞檢核表（Motivational Delivery Checklist）。
Small（1997）也以ARCS 模型為理論基礎，編制了網頁動機分析檢核表（Website Motivational Analysis Checklist, WebMAC）。






張貼者： 於 沒有留言:
標籤： ,

2014年12月30日 星期二

20141228 寒假project 訊號與系統教學網站構想

構思寒假要做訊號與系統的教學網站的內容，跑去看練習 | 均一教育平台的網站，看到以估狗的星像圖來當作學習步驟與學習章節的構想，這點子真的太正了
而且按滾輪放大後，可以看到每一章裡面的小節

看到角度的測量 | 均一教育平台這一頁，我喜歡它的可以拉動拖曳互動的解題方式


觀看這網站時又看到，可以用臉書帳號登入，於是facebook api 教學 - Google 搜尋發現有很多資源可以學習，非常興奮
張貼者： 於 沒有留言:
標籤： ,

20141229 最後一步，機率遊戲完成

找下面這行數學式找超久，後來從www.colby.edu/chemistry/PChem/notes/Integral.pdf這邊找到
$$\int _{ 0 }^{ \infty  }{ { x }^{ n }{ e }^{ -ax }dx=\frac { n! }{ { a }^{ n } }  } $$

把題目與答案的排版用question1 test | CodePen來測試，完成後放入WG-map project
question1 test | CodePen

最終還是決定使用jQuery的show()，參考.show() | jQuery API中文文档(适用jQuery 1.0 - jQuery 2.0)、show 文字出來 | CodePen、jQuery hide() and show() example | W3School，成功實作出我想要的效果，請見jQuery show() | CodePen



Q1_b | CodePen

12/31 一切終於完成了，project載點。
張貼者： 於 沒有留言:
標籤：

2014年12月26日 星期五

20141226 socket.io與express

遊戲設計：
先前有討論，不要一開始就給學生答案，於是我決定用jQuery 教學 - jQuery Tutorial這篇文章的$("p.neat").addClass("ohmy").show("slow");來show計算後的結果

測試與數據收集：
礙於時間壓力，沒辦法去建後端的資料庫，所以改用問卷的模式，昨晚睡覺時想到，可以採用以前彥儒碩班時，後來查看以前present的paper，確定是用NASA Task Load Index(TLX)
  • TLX量表。NASA Task Load Index(TLX)[15]設計此問卷，TLX是美國國家航空暨太空總署NASA針對太空梭駕駛員對於操作太空梭儀表板的認知負載程度量表，使用TLX
以跟老師談好，1/7號要把用什麼量表與評論的問法給老師，量表五分，使用評論十分。

選用node.js的論述，可把他寫到論文裡去

經驗累積：
今天在用npm安裝socket.io時一直失敗，經過測試後發現，假設有一個資料夾A，A下面有個資料夾B，B下面有個資料夾C。如果我想要在C裡面用npm來安裝modules，那麼我的A、B都不能安裝，若A、B安裝了，則要用npm uninstall [模組名稱]來解除安裝。
準備架server，讓他可以在其他台電腦讀。現在我手邊的參考資料是以前紀錄的筆記
在20141215 socket. io 基礎這篇，裡面有記錄socket.io與WebGL實作的內容。

Just Node.js - Node.js中文資源及學習筆記

Express 相關資料
Developer's Note: 在 Node.js 中的 MVC 架構 - Express
[教學] Nodejs 學習筆記 (4) -- express framework - clayliao.f2e
Node.js Web 框架 – Express安裝與初始化 @ 行路難 多歧路 :: 痞客邦 PIXNET ::
QQBoxy - 酷酷方盒子: ⓒPortable Node.JS+npm+express Windows開發環境建置
nodejs小问题：[1]express不是内部或外部命令_百度经验
[Node.js]重新安裝node.js和express的問題 @ 記憶所及之處 :: 痞客邦 PIXNET ::
Summer。桑莫。夏天: 使用Node.js + Express建構一個簡單的微博網站
使用Node.js + Express建構一個簡單的微博網站 « 駭客任務
node.js中的Socket.IO使用实例-jquery-爱编程

從Matttt的空間: npm操作這篇知道，express要安裝到全域上

node.js - Build Error when Installing Socket.IO on Ubuntu 14.04 - Stack Overflow

閱讀MiCloud Blogger: PHP 開發者轉換到 node.js 開發方向這篇時才確定，Node.js每個project都要重新安裝一次模組
  • 特別是每個 node.js 專案幾乎都需要重新安裝一次套件，這個部分對於 php 開發者是覺得神奇，而且浪費空間的事情
在node.js教學－利用Express來寫HTTP伺服器 | 電腦故我在這篇文章的留言提到，如果我想要讀取先前寫好的.html檔，只要透過app.use(express.static(__dirname));這方法即可讀取，於是我查看Express - api reference，搜尋" express.static"就可以看到，搜尋資料時看到Express框架 -- JavaScript 标准参考教程（alpha）這篇，這教學內容滿豐富的像是我一直想要改網址就可以用response.redirect方法。在Express框架這篇，搜尋static就有說明我們上面看的express.static。另外也可以參考图灵社区 : 阅读 : 解构app.js這篇。

今天我讀完了node.js教學－建立一個HTTP伺服器 | 電腦故我在、node.js教學－利用Express來寫HTTP伺服器 | 電腦故我在這兩篇後，接著讀Developer's Note: 在 Node.js 中的 MVC 架構 - Express這篇，釐清了不少node.js教學－利用Express來寫HTTP伺服器未講明的觀念，另外筆記一下，我們常看到server、client這兩個名詞，在這篇文章就有提到，所謂的client就是我們瀏覽器所看到的畫面，對於這篇文章所提到的get、post，可參考HTML 表單中 GET 與 POST 的用法差異 - Wibibi這篇。

找到Fire's web log: Express ( Nodejs ) 讀取檔案這篇談如何讀取網頁，雖然跟其他文章的寫法不太一樣，一直失敗一直失敗 =..=

後來讀到httpServer in node.js to serve three.js - Stack Overflow這篇文章時，推薦使用nodejs裡的connect module，後來讀到Node.js 的 http vs Connect vs Express - @ChingHanHo這篇才知道，express的能力比connect強 =..=。


參考socket.io - Three.js with Node.js on a server - how to load a TEXTURE? - Stack Overflow這篇後，發現需要用express，找了良久後發現以前找到的naotaro0123/3D_Socket · GitHub，用npm 安裝socket.io、express，之後開啟server後在chrome上面鍵入http://localhost:3001/index.html就能成功讀取
接著我們來查看位於D:\work\WebGL Learning\3D_Socket-master的這個3D_Socket-master project吧。
可以看到3D_Socket-master裡面有node_modules、public這兩個資料夾，以及當作server的server.js，接著我們點開public floder
裡面是我們一般WebGL project的內容，若是用express只要把WebGL的東西丟到public folder來即可。

為了方便測試，現在我把3D_Socket-master folder丟到D:\work\JavaScript\NodeJsPractice，並把folder改名為3DSocket，路徑：D:\work\JavaScript\NodeJsPractice\3DSocket。

經過測試後發現，要讓server能run的code其實非常短
var express = require('express'),
    http = require('http'),
    app = express();
app.use(express.static(__dirname + '/public'));
var server = http.createServer(app).listen(3001);
var io = require('socket.io'),
    io = io.listen(server);

現在來讀D:\work\JavaScript\NodeJsPractice\3DSocket\public\index.html。
如圖所示，他的寫法其實也跟我們過去寫的寫法一樣，把運作3D world的code另外用一個.js包起來，前面run能讓socket.io運作的<script src='/socket.io/socket.io.js'></script>，知道這些後我們可以開始來實作了

在實作時一直遇到Uncaught TypeError: Cannot read property 'style' of null這串紅字，找了良久後閱讀jQuery和Javascript对比（一） - 轩枫阁 – 前端开发 | web前端技术博客這篇文章時獲得靈感，一開始的時候我是把css的style放在最上層，接著才上DOMelements，請見D:\work\WebGL Learning\WG-map editions\WG-map 4th - add server\public\index.html
這就是問題所在，因為我們一開始就給它了DOM elements的css style，然後他要去找style時卻發現找不到，於是就開始無窮迴圈讀不到然後print出Uncaught TypeError: Cannot read property 'style' of null這串紅字。

只要我們先上DOM elements，接著再上這些DOM elements的CSS style就可以了 ^_^。請見
D:\work\WebGL Learning\WG-map editions\WG-map 5th success\public\index.html
終於，我們成功看到WG-map在網路世界初登場，感動啊~~~~~~~

張貼者： 於 沒有留言:
標籤： ,

2014年12月22日 星期一

20141222 show題目

現在東西都差不多完成了，要來準備把所有東西組合起來，現在要來探討如何show題目，多方參考後決定使用jQuery的Accordion
參考後實作於CodePen
結合MathJax，嘗試在jQuery UI Accordion中放入機率題目
測試中的問題，每台電腦螢幕大小不一致，題目呈現出來的效果差異很大，看到這個demo可以在頁面上控制字體大小後，決定參考這篇文章
這篇讀到的rem，參考網頁設計該用哪種字級單位：px、em或rem？ - Jas9 Taipei.設計誌，em代表M，是字體大小的單位，因為大寫M最飽滿，所以把它當作字的單位，r代表root，rem即root em。用rem的好處是，由於所有網頁元件都共用同一個em單位，所以也不會產生em的疊加問題。

後來想到，就算用jQuery做出這伸縮的div，我應該讓它半透明才對，這樣才有辦法讓我他跟我的WebGL遊戲不互相干擾，於是決定參考這篇來實作半透明的效果
一些HTML的搜尋
解析 px at the Root, rem for Components, em for Text Elements的這個demo：
jQuery的attr參考jQuery 教學 » 屬性與樣式 (Attributes & CSS) - jQuery Tutorial這篇文章以及.attr() | jQuery API中文文档(适用jQuery 1.0 - jQuery 2.0)
  • .attr()方法只獲取第一個匹配元素的屬性值。要獲取每個單獨的元素的屬性值， 我們需要依靠jQuery的.each()或者.map()方法循環。
難怪demo要用each來取得所有elements的attritube

如我們上面的截圖所示，
$(".module").prepend("<div class='module-control font-size-control'>Module:<input type='range'></div>"); 
，我們在DOM的每一個擁有module class的elements都加入了div，div裡有著<input type='range'>。估狗讀到HTML5表單Input型態 | 摩刻部落這篇才知道，用了<input type='range'>就能生出我們要的拖曳條，以測試過無論是<input type='range'>還是<input type='range'/>都可以用。

<input type='range'>的操作
  • max="最大值"：指定欄位的最大值。只有在 type 是 number、range 或 date pickers 時有效。type等於range時，若不指定則預設值為100。
  • min="最小值"：指定欄位的最小值。只有在 type 是 number、range 或 date pickers 時有效。type等於range時，若不指定則預設值為0。

以前只會用div tag，看了發現有demo後發現還有article tag、 section tag，讀到如何設計出正確語意的 HTML5 | Blog.XDite.net這篇才知道根據你一個區塊想要傳達的內容來決定，如果你不知道該怎麼定義的話：可以先都使用 article 去定義一段文本。如果它是一段「相關文本」，可以使用 section。因為 article 的語意比較多樣，而 section 則窄的多。而如果這段內容它「沒有任何語意上」的意義，再使用 div。

現在我們回頭來修改jQuery UI Accordion & MathJax | CodePen的內容，實作於 jQuery UI Accordion & MathJax 2 | CodePen，成功。

為了要更方便筆記demo我決定fork此demo，並將筆記內容紀錄於Em AND Rem WG noting | CodePen。

查看 Rem WG noting | CodePen時發現有data-font-size-in-rem這個沒看過的attritube，估狗之後發現HTML5可以自定義屬性，參考HTML5 data-* 自定义属性 - 色拉油啊油 - 博客园以及HTML 5 的data-* 自定义属性 – WEB前端开发 - 专注前端开发，关注用户体验這篇，這篇內容非常的完整

參考 Rem WG noting | CodePen來做拖曳Bar的拉條，學習得差不多後fork jQuery UI Accordion & MathJax 2 | CodePen ，然後實作於Accordion & MathJax add input range | CodePen，成功。背景透明化，成功。字改灰色，成功。

(以下2014/12/23新增)
現在參考Retractable Dialog with MathJax | CodePen、querySelector practice | CodePen，然後fork Accordion & MathJax add input range，將兩者結合，實作於 Retractable Dialog add Accordion & MathJax ，成功。

實作於 Retractable Dialog add Accordion & MathJax 成功的內容，實作在自己電腦，位置：D:\work\WebGL Learning\WG.dialog\Retractable Dialog with  Accordion and MathJax.html，成功。

後來想想把 Retractable Dialog放在<div id='infoPopup'> tag裡的做法實在有點笨，直接讓Retractable Dialog能夠pop up 就好啦。以此概念 fork Retractable Dialog add Accordion & MathJax ，實作於Accordion direct pop up | CodePen，成功。

現在將實作於Accordion direct pop up | CodePen的成功經驗，自己電腦實作於D:\work\WebGL Learning\WG.dialog\Retractable Dialog pop up.html，成功。

現在，要學習外鑲CSS，學習資源如下：
一開始先讀CSS 套用方式 - 1Keydata CSS 語法教學，接著讀CSS 套用方式 | 魚躍創意時才知道，大部份的設計師最常用外部連接套用 Apply，也就是<link rel="stylesheet" href="style.css" />。我們最早接觸到Mike-map時使用的是內嵌套用 Internal，用style tag來控制CSS內容。

剛剛在構思要如何把CSS存放在網路上，後來想起CodePen有提供這服務，現在以Accordion direct pop up為例
我們可以看到它的網址是http://codepen.io/NickWarm/pen/emdNym，現在我們只要在網址末端後面加入.css，使得網址變成http://codepen.io/NickWarm/pen/emdNym.css，這樣就能直接讀到這project的CSS格式了，以此概念fork Accordion direct pop up，實作於Accordion use external CSS _CodePen，成功。

接著，我們要讓我們畫面的左邊由上而下列滿12個infoButtons，每個infoButton的彈出視窗，就是我們的機率題目與答案。因為要修改每個infoButton的位置，所以我決定fork Accordion direct pop up，後來決定採用Accordion use external CSS _CodePen的模式，先fork Accordion direct pop up，來測試調整好12個infoButton，實作於tweleve Accordions | CodePen。

最初決定把infoButtons寫在左手邊，由上而下12題題目的infoButtons，後來發現會與我的題目欄相衝，決定改寫在上面。最初實作時傻傻地，想說相似的CSS重覆寫，只為了控制位置實在很蠢，後來參考CSS 一般問題 - CSS | MDN這篇文章時想到，最初來自於Accordion direct pop up的infoButton由於只有一個，所以給他id attritube，但現在我們實作tweleve Accordions | CodePen時，由於我們要設重複12個infoButtons，所以我們該把infoButtons改成class atritube，然後透過我們曾在CSS 套用方式 | 魚躍創意看過的，用內嵌套用 Internal的style tag來控制infoButtons的位置，成功改變第二個infoButton的位置而不用多寫code，實作於tweleve Accordions | CodePen。

接著，我們可以透過曾在.attr() | jQuery API中文文档(适用jQuery 1.0 - jQuery 2.0)看過的構想來實作


參考HTML DOM querySelectorAll() Method的paradigm確定可以抓到class

後來發現無法用quertySelectAll()

Loop Over querySelectorAll Matches | CSS-Tricks

[JavaScript] document.querySelectorAll 的 forEach - Shiny這篇幾乎與上面那篇相同


實作於select elements | CodePen，成功。

HTML DOM getElementsByClassName() Method的paradigm

fork select elements | CodePen，來控制位置，實作於select elements control positions | CodePen，失敗。

以[JavaScript] document.querySelectorAll 的 forEach - Shiny的構想，讓每一個infoButton都能夠開啟題目，參考select elements | CodePen與tweleve Accordions | CodePen，實作於use queryselector set divs pop up | CodePen，成功。

想透過javascript改變動態改變Retractable Dialog的內容，參考JavaScript HTML DOM Changing HTML Content的paradigm，實作於select elements | CodePen，成功改變內文的html內容。

為了要測試，是否能夠定義好DOM裡的element，然後把操作DOM的javascript從外部讀取，實作於external javascript | CodePen，成功從外部讀取javascript來操作DOM裡的elements。

可以寫個if...else if...else來控制Retractable Dialog裡的內容，實作於different infoButton different content | CodePen，失敗。

後來思考，我每個infoButton，他們pop up出來的內容都是各自獨立的，應該用id attribute，我不該用class attritube那樣牽一髮而動全身，最後決定用two Dialogs different contents | CodePen的做法，每個infoButton都用獨立的id attritube，然後用Require.js把每題目與解答各包成一個javascript file，後來參考.append() | jQuery API中文文档(适用jQuery 1.0 - jQuery 2.0)，決定改用append()，以Accordion direct pop up | CodePen為例，在Accordion direct pop up中，我們先定義好<div id="accordion" ></div>，然後依序

append("<h3 class='title' >問題 </h3>")
append("<article class='module'>題目...<article>")
append("<h3 class='title'>step.1 </h3> ")
append("<section class='module'>solution step.1 內容</section>")
append("<h3 class='title'>step.2 </h3> ")
append("<section class='module'>solution step.2 內容</section>")
append("<h3 class='title'>step.3 </h3> )
append("<section class='module'>solution step.3 內容</section>")

藉由這些步驟，完成infoButton1的所要pop up出來的內容，infoButton1~12以此類推，把操作DOM elements的script另外包到一個javascript file，從外部去讀，就像external javascript | Codepen，這樣的做法CSS也會很龐大，也必須外包，就像Accordion use external CSS | Codepen。

dynamic <div> content on change <select> [] - 问题-字节技术

(以下2014/12/24新增)
可以用require.js，每個題目的伸縮欄開一javascript file，透過require.js從外部導進來，參考：D:\work\JavaScript\RequireJsPractice\index.html，第一次實作成功於D:\work\WebGL Learning\WG.dialog\dialog by requires_first。

用require.js讀MathJax遇到問題，估狗讀到MathJax with RequireJS, how to set config - Stack Overflow這篇後，發現Mathjax documentation已經在Integrating mathjax into x: require.js · mathjax/MathJax-docs Wiki · GitHub有解釋，後來發現我不會用require.config =..=

備齊以下資料
shim屬性，專門用來配置不兼容的模塊

根據前端开发-javascript模块化编程库require.js的用法這篇，在使用require.config({paths:})時，我們的文件名不需要加.js後綴，否則require.js會找不到文件的。

下午3:55終於成功用require.js讀到MathJax，弄得我都快崩潰了，現在來記錄，實作於：D:\work\WebGL Learning\WG.dialog\Retractable Dialog MathJax use requirejs，這project的內容物如下：

首先要注意一點，以往我們coding要加載外部javascript file都是寫在最上面，但如果要用require.js加載mathJax，就不能夠在一開頭使用script src attritube來加載MathJax
接著我們來看一下我們的頁面，Retractable Dialog MathJax use requirejs.html，如下圖所示，上方是我們要顯示的DOM elements，下面我們的script tag用src attritube去讀require.js library，main.js就像一個表單，我們可以把操作DOM elements的javascript codes拆解成數個.js files，main.js的功用就是統一管理這些被拆解的各種.js files。
接著，我們來看一下main.js的內容
綠框的control指向資料夾裡的control.js，control.js負責操作我們Retractable Dialog MathJax use requirejs.html裡的DOM elements。紅框的部分，就是我們處理MathJax的Code，這段code我存放在use require.js import MathJax | CodePen方便我以後取用。

這些成功之後，可以開始實作12個infoButton與並透過require.js，在外部的.js檔用append()來為每個pop up加入內容。

一開始先用兩個infoButton來測試，實作於D:\work\WebGL Learning\WG.dialog\two infoButtons two Accordions，這project的CSS決定放在two infoButtons two Accordions's CSS | CodePen，這CSS與這project實作的構想最初是參考two Dialogs different contents | CodePen，append()的寫法請見上面12/23討論的內容，直接pop up出Accordition請參考Accordion direct pop up | CodePen。


原本打算在append()時直接添加題目與解答內容，但是發現會顯示失敗，參考javascript - How to replace innerHTML of a div using jQuery? - Stack Overflow這篇後，決定改用$('#id').html("text content")，fail，一樣會顯示失敗，且文字難以排版

D:\work\WebGL Learning\WG.dialog\two infoButtons two Accordions這project的構想確定失敗了，只能採用D:\work\WebGL Learning\WG.dialog\Retractable Dialog MathJax use requirejs這project的構想，讓我們的.html file以顯示DOM elements為主，且要把WG-Map的code放在require.js，從外部import進來，已實作於D:\work\WebGL Learning\WG.dialog\content all in DOM control by external js，成功。

現在要把WG-map改寫成像是這樣的操作D:\work\WebGL Learning\WG.dialog\content all in DOM control by external js方式。第一步，先讓WG-map加入題目選項，已經於D:\work\WebGL Learning\WG-map editions\WG-map 2nd - add 12 dialogs，成功在WG-Map加入12個題目選項。

(以下2014/12/25新增)
現在，我們要為WG-map加入觸發事件，可以參考過去曾實作過的這個project：
D:\work\WebGL Learning\WG.minecraft\examples\collider and div.html，現在準備讓我們的WG-Map的世界，以WG初登場時為圓心，身邊繞著12隻動物，一個動物是一個題目與答案，每觸碰到一隻動物，就會開啟這道題目，從動物身體離開，就會關閉這道題目。

關於threex.collider的引用
這兩個可以用require.js從外部引進來
<script src='../vendor_collider/threex.colliders.js'></script>
<script src='../vendor_collider/threex.colliderhelper.js'></script>

要特別注意，必須要特別引用threex.collider裡的three.js，為了做區隔，在D:\work\WebGL Learning\WG.minecraft\examples\collider and div.html裡，我是引用存放在vender資料夾的<script src='../vendor/three_collider.js'></script>。

到了我們現在要實作的D:\work\WebGL Learning\WG.collider\WG.collider.1st，我是把當初未碰撞專門寫的three.js改名為threejs_for_collider.js，路徑：
D:\work\WebGL Learning\WG.collider\WG.collider.1st\vendor\three.js\build\threejs_for_collider.js。
為了不要搞混與方便使用，決定修正為
D:\work\WebGL Learning\WG.collider\WG.collider.1st\bower_components\threex.colliders\threejs_for_collider.js。

成功讀到horse的collider，實作於D:\work\WebGL Learning\WG.collider\WG.collider.1st。

不同的物體，顯示不同的內容，成功，實作於D:\work\WebGL Learning\WG.collider\WG.collider.2nd。

最後，關掉collider的方框，成功，關掉方框的做法很簡單，要開起觸發事件需要有collider，但是我們只需要在collider的觸發事件裡寫入pop up對話框，就能觸發事件，不需要把collider加入動畫的array裡面，這樣就看不到collider的方框了，實作於D:\work\WebGL Learning\WG.collider\WG.collider.3rd。

現在，我們可以回到WG-map，去把所有動物的觸發事件寫完，實作成功，目錄：
D:\work\WebGL Learning\WG-map editions\WG-map 3rd - add collider。

(以上2014/12/23、12/24、12/25新增)

剩下讓server與WebGL連結的實作，請見20141226 socket.io與express。

張貼者： 於 沒有留言:
標籤： ,

2014年12月15日 星期一

20141215 socket. io 基礎

20141215 node.js入門，學習歷程 pt.2這篇的支線，換個口味學習。

學習資源：
兩篇io socket的文章

Three.js + socket.io
搜尋一些three.js與io socket相關的資料，下關鍵字：iosocket threejs - Google 搜尋，找到Real Time Multiplayer in HTML5 - Build New Games這篇文章之外，在GitHub上看到有io socket與three.js相關的code
一個socket.io + 3D scene and 3D monster，demo：http://simplecode.jp:3001/
NodeJs裡的fs module
jQuery
jQuery的學習，看了幾篇中文教學真的都不太順眼，有必要開第三條支線去codecademy上上課，評估只要花3hr，預計一個下午或一個晚上就可以KO了
MongoDB
一篇建議不要用MongoDB改用PostgreSQL
閱讀陳鍾誠老師在Node & js 學習筆記的貼文，關於資料庫的，除了久仰大名的mongoDB和IndexedDB外，知道兩個新的關鍵字：pouchdb與couchDB 。

學習開始：
從閱讀使用 Node.js 與 Socket.IO 建立即時性（Realtime）網頁應用程式 App - G. T. Wang這篇文章開始。實作於D:\work\JavaScript\NodeJsPractice\Basic Socket.IO這一個project。過去我們常寫response.writeHead(200, {'Content-Type': 'text/plain'});本篇是寫
response.writeHead(200, {'Content-Type': 'text/html'});在這邊有特別解釋，在此摘錄
  • 第一個參數是 HTTP 協定中三位數的 status code（例如找不到網頁就是 404），第二個參數則是指定標頭資訊中的各個欄位屬性，這裡指定 content type 為一般的文字或 html。
接著又介紹到常寫的response.write('Hello, World.');，write()裡面的內容就是我們要顯現的網頁內容。
前面的東西滿簡單的，照著code寫一寫時發現，好久沒用switch，看到switch裡頭的default，忘記是幹嘛用的，辜狗找了下面兩篇switch 條件判斷 | 良葛格、switch條件敘述的用法 | 電腦不難，default: //如果條件都沒有符合以上數值，就執行這個。實作時，寫到fs.readFile(__dirname + path, function(error, data){...});才知道__dirname是官方API的object，fs相關的參考Node.js 系列學習日誌 #22 - 核心模組檔案系統 fs - iT邦幫忙::IT知識分享社群這篇文章。

實作時發現他跟我說讀不到socket.io，想說奇怪，我不是已經安裝過了嗎

後來參考了Socket.io教學 | 電腦故我在、透過 socket.io 來建立人物移動聊天室、Build a Node.js Chat Application with Socket.IO on an Azure Website這三篇文章後發現，socket.io要用npm安裝在我們實作的project底下，且無法透過複製貼上來把socket放到所要用的project，由於用cmd執行npm指令時，他說我已經安裝過socket.io了，所以我就開個檔案try.js來測試看看，果然又不能run了。
終於寫socket.io的部分測試成功了，不過沒看到這篇文章說的終端機會顯示的文字：
info - socket.io starteddebug - served static content /socket.io.js
debug - client authorized
info - handshake authorized 1agc6iSouA2QymxUaZ0D
debug - setting request GET /socket.io/1/websocket/1agc6iSouA2QymxUaZ0D
debug - set heartbeat interval for client 1agc6iSouA2QymxUaZ0D
debug - client authorized for
debug - websocket writing 1::看文章時又提到"伺服器的終端機"這些詞。
(以下內容12/16新增)
今天這篇文章瀏覽到最後面時看到一個關鍵字：LX終端機，於是估狗之，資料不多 QQ
(以上內容12/16新增)

真的有必要去查一下如何不透過complier去開啟server.js，於是參考Node.js 初體驗、基礎的HTTP伺服器建立 « I try | MarsW這篇，實作後其實還滿簡單的，開啟cmd模式，在我們project的資料夾下，鍵入node server.js，就能成功開啟Server，
若想要關掉，只要鍵入Ctrl+c (在cmd指令下會顯示^c)或是直接關掉cmd模式
但是依舊沒有看到這篇作者所說的終端機文字，後來發現終端機的英文是Terminal....，已經讓Server在run了，WebStorm裡依舊沒有半點東西 QQ。
(以下2014/12/16新增)
進度到傳送資料至瀏覽器這節，如字面所說，這節是要學習把資料從伺服器傳到瀏覽器，一開頭就補充了一些知識，一般 Node.js 程式所使用的方式都是以callback function來處理。

一開始的時候，server與web的的頁面是互相獨立的

要讓我們的網頁連上server，才能從他處瀏覽我們的網頁，
可以透過sockets.on('connection', callback function)，connection 是一個由 Socket.IO 內建的事件，當瀏覽器端呼叫 io.connection() 之後，就會自動產生這個事件，Socket.IO 所擅長的其實是持續性的資料傳遞。

如上圖所見，在實作時，我長把與server連線起來的這步驟，sockets.io()少打了"s"
上面的圖其實還有錯，應該是sockets.on('connection',....)
再來記錄一下實作時遇到的小bug
稍微檢查一下發現我壓根沒傳值到這function的body裡的socket這variable去，所以在function的parameter加上socket就能run了
如果我們要發送資料出去要靠socket.emit()，要接收資料要靠socket.on()，可以參考Socket.io教學 | 電腦故我在
不過參考Socket.io教學在名稱上有一點打錯，在此要修正一下，首先下面這張圖討論傳的內容。
在實作的過程中，我想知道socket.html裡，data後取得的date來源是在哪邊?於是我以接收每分每秒的這段code稍做修改測試

測試結果，程式可以run，但無法接收到 new Date()，後來發現，如果我想要接收到emit()傳來的資料，那麼emit('資料名稱',...)與on('資料名稱',...)必須相同，不然收不到。
修正之後程式就能run了，以下是從web發訊息讓server接收的範例。

如此一來，在chrome按下F12，選Consloe就能成功看到從socket傳來的資訊
(以下2014/12/17新增)
HTML下的io.connect()，可以參考Socket.io教學的Socket.io網頁端基本這節，不過
不需要var socket = io.connect('http://some_server');
可以採用直接寫var socket = io.connect();即可

setInterval()函數，它可以讓指定的函數在指定的間隔時間下重複執行，第一個參數放我們要執行的動作，第二個參數放間隔時間，單位為milisecond(一秒)


讀到jQuery的code，有必要去學習jQuery，參考jQuery 教學 - jQuery Tutorial，先讀jQuery* 關於這節，設定時說到可以用google.load，於是找Google Loader Developer's Guide - Google Loader — Google Developers，參考Google Loader Developer's Guide實作時，jQuery使用1.9板，被告知讀不到

後來辜狗讀到javascript - google.load is loading the old version of jquery causing versioning issues - Stack Overflow這篇，才知道google.load的版本已經很舊了，而且他src的來源跟我們現在學習socket.io這篇文章的作者一樣，都是採用ajax.googleapis.com/ajax/libs。於是按照關鍵字去估狗後找到Google Hosted Libraries - Developer's Guide - Make the Web Faster — Google Developers這篇文章，原來Google Hosted Libraries對jQuery的支援已經到2.11版了，所以我們就直接用<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 吧，經測試已成功。

在閱讀看到引入的library有提到ajax，先閱讀了AJAX - 維基百科，AJAX全名「Asynchronous JavaScript and XML」非常清晰明瞭。但是維機太多東西了，所以改閱讀上手篇 - AJAX | MDN，知道Ajax 運用非標準的 XMLHttpRequest 物件，並配合伺服器端的 Script 進行通訊。Ajax 最吸引人之處在於它的〝非同步〞性質，這意味著 Ajax 能做各種動作，而無須更新整個頁面。如此便能透過使用者的事件更新頁面的一小部分，真的有必要再開支線來學習AJAX才對。

要取得 jQuery 物件也可以透過它提供的的另外一個縮寫符號 (別名)－錢字號「＄」，再來我們需要一些jQuery裡selector的基本知識，閱讀jQuery 教學 » 選取元素 (Selectors)這節，
語法：＄(selectors);。
  • tag selector：＄("a"); 就是取得頁面中所有的<a> elements。
  • id selector：＄("#container");，取得id為container的元素。
  • class selector：＄(".content");，取得class name為content的所有元素
在Socket.io教學的 傳送資料至伺服器這節看到的＄('#date').text(data.date);，可以參考jQuery 教學 » DOM 操作 (Manipulation) - jQuery Tutorial，＄(selectors).text();，是用來取得一個字串包含著所有匹配elements的純文字內容。

在我們學習socket.io文章的傳送資料至伺服器這節，jQuery的語法有用到ready、keypress，都可以在jQuery 教學 » 事件處理 (Events)這節找到，請善用Ctrl+F。實作keypress的部分時，看到一個新關鍵字charCode，估狗找到螞蟻的 JavaScript: event：特徵一節這篇按下Ctrl+F搜尋後閱讀知道，charCode是指按下鍵盤鍵onkeypress後產生的字母的Unicode值，IE 無此項功能；Firefox, Safari, Chrome 有支援。

有了這些知識後，我們可以來實作Socket.io教學的最後部分了，明天12/17從傳送資料至瀏覽器這節開始，今天12/17下午4:48終於第一次實作完成這篇了，接著要把這篇的內容模組化。

 (以上2014/12/16、12/17新增)




張貼者： 於 沒有留言:
標籤： ,

2014年12月14日 星期日

20141215 node.js入門，學習歷程 pt.2

延續20141211 node.js入門，學習歷程 pt.1。

學習資源：
閒暇之餘又找了幾篇node.js的參考資料
找到一個node.js的投影片，旁邊還有幾個投影片可以看

關於NPM
12/15依賴注入Dependency Injection pattern
學習開始：
學習從Node入門 » 行為驅動執行開始，這節很短瞬間讀完，在此摘錄核心
  • 就像這樣，我們傳遞一個東西，然後伺服器利用這個東西來完成一些事。嗨~那個叫路由的東西，能幫我把這個路由一下嗎？但是伺服器其實不需要這樣的東西。它只需要把事情做完就行，其實為了把事情做完，你根本不需要東西，你需要的是動作。也就是說，你不需要名詞，你需要動詞。
此外他推薦了這篇文章來探討一些名詞真正的意義，在此先行備份
接著閱讀Node入門 » 路由給真正的請求處理程序這篇，一開始看到這句話就覺得不錯值得摘錄
  • 路由，顧名思義，是指我們要針對不同的URL有不同的處理方式。例如處理/start的 "業務邏輯" 就應該和處理/upload的不同。
在這篇介紹了requestHandlers，最早聽到request Handler是在Node.js 入門, #1：Hello World、Node.js 入門, #3：URL Routing 觀念與實作這兩篇文章，在看到上面的擷取文字後，對Request Handler的理解又更清晰了，你有不同的request要相對應到不同的處理方式，所以你要有個handler來幫你做，哪個request要相對應到哪個response。

接著，看到一個沒見過的關鍵字，依賴注入Dependency Injection pattern。找了幾篇文章放在學習資源那邊，尚未讀先繼續瀏覽這篇文章發現，Dependency Injection pattern似乎不是好的解決辦法，較妥當的辦法是associative array關聯陣列，接著他推薦了Advanced Web Applications With Object-Oriented JavaScript這篇文章 (尚未閱讀)，並摘錄了下面這段重要的文字
  • 在C++或C#中，當我們談到物件，指的是類別(Class)或者結構體(Struct)的實體。物件根據他們實體化的範本（就是所謂的類別），會擁有不同的屬性和方法。但在JavaScript裡物件不是這個概念。在JavaScript中，物件就是一個鍵/值對的集合 -- 你可以把JavaScript的物件想象成一個鍵為字串類型的字典。
在實作時遇到typeof，老實說很少用這個，於是辜狗閱讀淺談類型判斷 in JavaScript - Aar0n Huang這篇，發現typeof在實作時很容易出現問題，又另外辜狗了JavaScript教學 - 資料型態(Data Type) - 上 @ 小殘的程式光廊 、JavaScript Garden | typeof 操作符，我喜歡JavaScript Garden 裡關於class與type的圖表，清楚解釋typeof在實作時容易遇到的問題，大都顯示為object，從這表中取得我們要的，當value為new Function("")時，它的class是Function，type也是function，有了這些基礎後看懂了router.js的code，終於實作成功request handler。

接著閱讀Node入門 » 讓請求處理程序作出回應，這節內容超短，很快就讀完，主線紀錄，換個口味學點別的支線請見20141215 socket. io 基礎，已實作完成支線任務，下一個目標是把支線任務的內容模組化。

(以下內容2014/12/17新增)
接著學習Node入門 » 不好的實現方式這節，稍微略讀後，為了避免不好的coding習慣，決定不實作這節，絕對有必要實作這節，non-blocking是個重要的觀念，需要再多讀幾篇資料。
在此節錄重要觀念
  • Node.js是單執行緒的。它透過事件輪詢（event loop）來實現並行操作，對此，我們應該要充分利用這一點 —— 盡可能的避免Blocking操作，取而代之，多使用Non-Blocking操作。
然而，要用Non-Blocking操作，我們需要使用回呼(callback)，透過將函數作為參數傳遞給其他需要花時間做處理的函數（比方說，休眠10秒，或者查詢資料庫，又或者是進行大量的計算）。
(以上內容2014/12/17新增)
張貼者： 於 沒有留言:
標籤： ,

2014年12月13日 星期六

20141211 node.js入門，學習歷程 pt.1

文章過長止於Node入門 » 如何來進行請求的 "路由"，接著請由20141215 node.js入門，學習歷程 pt.2繼續。標題改變：node.js初體驗，成功連到其他電腦 → node.js入門，學習歷程 pt.1。

最後更新於12/15。

 學習資源：

晚上讀了CCC生活札記: Node.js入門初探這篇文章(已完成)，他推薦讀Node入門 » 一本全面的Node.js教學課程這篇文章當作node.js的入門

閒暇之餘又找了幾篇node.js的參考資料
找到一個node.js的投影片，旁邊還有幾個投影片可以看
在使用 Node.js 與 Socket.IO 建立即時性（Realtime）網頁應用程式 App - G. T. Wang有詳細的解釋每行code的由來

兩篇io socket的文章
搜尋一些three.js與io socket相關的資料，下關鍵字：iosocket threejs - Google 搜尋，找到Real Time Multiplayer in HTML5 - Build New Games這篇文章之外，在GitHub上看到有io socket與three.js相關的code
學習開始：
現在先閱讀CCC生活札記: Node.js入門初探這篇文章，嚴格說來，Node.js是一個「JavaScript執行平台」，這篇沒什麼內容，但是作者推薦讀Node入門 » 一本全面的Node.js教學課程這篇文章當作node.js的入門，所以我們開始吧。
Node入門 一些文字紀錄
  • JavaScript是一門 "完整" 的語言： 它可以使用在不同的上下文中，其能力與其他同類語言相比有過之而無不及。
  • Node.js事實上就是另外一種上下文，它允許在後端（脫離瀏覽器環境）運行JavaScript代碼。
  • Node.js事實上既是一個運行時環境，同時又是一個函式庫。
這篇有推薦Felix Geisendörfer的大作Understanding node.js，它介紹了一些背景知識，有空可以來讀讀。  (尚未閱讀)
  • 一切都歸結於 "Node.js是事件驅動的" 這一事實。
Node入門 這篇讀到"以事件驅動"這論述時，就發現自己不是很懂估狗找到Node.js 初體驗、基礎的HTTP伺服器建立 « I try | MarsW這slide，slide的p8的內容真的太正了，以泡麵、接電話、蹲廁所完美解釋為何node.js是事件導向

(以下2014/12/12新增)
Node.js 初體驗這slide的p10有著以下對node.js的描述：JavaScript的後端語言、non-blocking、event-driven、high concurrency，在p12除了提到已經久仰大名已久的Real time應用：i.o socket之外，還聽到一個新名詞：社群支援 NPM。不知道npm是什麼，這slide的p18提到NodeJS在0.6.3版本開始內建NPM，不需要再另外裝了，辜狗看到一篇2014年的還滿新的文章Java is always EExcellent: NodeJS 教學 - NPM 介紹(1)在此先備份 (尚未閱讀)。快速瀏覽到p36，有許多有用的資源網址，像是推薦了Node.js Taiwan 社群協作中文電子書的GitHub，可惜的是裡面的連結沒有任何東西開的起來，另外他推薦了DreamersLab | No Boundaries No Limitation，看了一下他的文章，最後一篇文章停留在2012，似乎許久沒更新了，在此備份以後也許可以看到一些不錯的參考資料。

新技巧      ，核心文章配色，這篇文章是現在要學習的重點，發現自己這篇讀不懂找其他篇文章輔佐學習，相同的練習技巧請見20141030 今日學習。

現在，我們回到Node入門 » 一本全面的Node.js教學課程來吧，根據進度是到基於事件驅動的回呼(callback)這邊。這節略讀後還是覺得自己有讀跟沒讀一樣的感覺，換讀node.js教學－建立一個HTTP伺服器 | 電腦故我在這篇文章，原來node.js自己就是一個伺服器，電腦故我在的這教學太優秀了，先前讀Node入門 只是照著code打，不知code在幹嘛，在閱讀這篇時也提到一個關鍵字啟動終端機，一直在想要怎麼讓我的server開啟，讓寫的網頁能從其他電腦連過來，接著辜狗找到node.js速度大評測 | 電腦故我在這篇，有提到以前寫JAVA時曾用過的Apache (又想起該死的湯姆貓，那時搞死我了)，以及用node.js寫一個BBS出來吧！ | 電腦故我在，找到另一篇2012的教學[Node.js]利用Node.js建立http server | 佛祖球球，另外又發現電腦故我在內建的搜尋有很多資料。

一直不知道伺服器到底有沒有開啟成功，於是用WebStorm開D:\work\JavaScript\loading_img\server.js來測試，一開始用Node入門 » 基於事件驅動的callback裡的第二個paradigm，在chrome裡鍵入http://localhost:8888/，在自己的電腦測試成功。

接著用實驗室裡的電腦測試
接著把印出的字改掉，自己電腦上測試
接著用實驗室裡的電腦測試

成功從其他電腦連到伺服器的網頁，真的超爽DER，但是我總不可能每次要開伺服器就把WebStorm一直開在那邊，所以我必須要不開任何complier，讓我的電腦去啟動server，執行D:\work\JavaScript\loading_img\server.js這樣，更改loading_img folder的路徑，存放於D:\work\JavaScript\NodeJsPractice\loading_img，找了老半天找到Learning Node.js - 基本 Http Server 建置 « Excelsior這篇，這篇就是我要的，開啟cmd，然後到server.js所在的資料夾下，鍵入：node server.js。cmd的指令?     server開啟後要如何關閉?

如何操作npm指令，找了老半天看到這段影片終於知道怎麼用了

(以下2014/12/13新增)
新技巧     ，學習成功圖示，代表自己真正完成一個小步驟，告訴自己自己很棒 ^_^，其Color Hex是#1ffc64，操作法：在span tag下，style="background-color: #1ffc64;。

看昨晚找到的How to install Node.JS and setup npm (Node Package Manager) - YouTube來操作npm，但是實際安裝時卻一直失敗，一直出現下面這行字
後來辜狗找到Node.js/Windows error: ENOENT, stat 'C:\Users\RT\AppData\Roaming\npm' - Stack Overflow這篇文章，按照文章做法，在C:\Users\Administrator\AppData\Roaming下新增了npm資料夾(folder)，參照使用 Node.js 與 Socket.IO 建立即時性（Realtime）網頁應用程式 App - G. T. Wang這篇文章，終於成功安裝Socket.IO，也參考了node.js教學－利用Express來寫HTTP伺服器 | 電腦故我在這篇，安裝了Express模組。

現在在讀Node入門 » 進行函數傳遞這節，又再讀了一次JavaScript的function可以當variable放在另一個function的parameter這樣的概念，這邊的解釋真的非常好。

再度閱讀基於事件驅動的callback這節，實做在D:\work\JavaScript\NodeJsPractice\Server.js，一開始的時候我是用最早看到的寫法，把callback function寫在http.createServer()裡，請見ex.2 self different test，接著再去用http://localhost:8888/去讀它，成功看到Request received.
但是詭異的是，我寫的那段文字"holla, this is your boy"被載了下來，而且要用筆記本才開的起來。
後來改用文章的寫法，請見ex.2 same，變成直接在chrome中開啟

但是詭異的是，我拜訪了兩次，照理來說Request received.應該只會show兩次啊，怎麼變成show四次了 =..=。
還不清楚原因，現在先擱著。繼續閱讀伺服器是如何處理請求的這節，看到兩個關鍵字：HTTP頭、HTTP狀態。首先找到The Will Will Web | 網頁開發人員應了解的 HTTP 狀態碼這篇文章，原來HTTP 200 代表網頁正常、404 代表找不到網頁，HTTP 狀態碼指的是從伺服器端回應(HTTP Response)的狀態，1xx - 參考資訊 (Informational)、2xx - 成功 (OK)、3xx - 重新導向 (Redirection)、4xx - 用戶端錯誤 (Client Error)、5xx - 伺服器錯誤 (Server Error)，若想知道數字的精確意義，請見這篇文章。HTTP頭，原文是HTTP Header，其他關鍵字是：Http 標頭參照，找到Http Header入門 | CCNP 筆記本這篇文章，感覺還不錯，不過尚未詳讀。

新技巧     ，告訴這很重要但是我還沒去學習 ，這篇學習完後要回過頭來學習它，完成後用線劃掉，其Color Hex是#ff6666。

接著讀伺服器端的模組放在哪裡這節，無論是範例的寫法還是自定義的寫法，成功把Server.js變成可以用的module了，實做在D:\work\JavaScript\NodeJsPractice\Server.js，這節也提到，要開啟index.js要用node index.js，但是我還不懂這要如何用。

(以下2014/12/14新增)

新技巧     ，很重要的預備知識，以前不知道，現在準備要來學習，完成後用線劃掉，其Color Hex是#43e8d8。

對於不同的URL請求，伺服器應該有不同的反應，處理不同的HTTP請求在我們的代碼中是一個不同的部分，叫做 "路由選擇" ，接著要讀如何來進行請求的 "路由"這節。一開始就遇到問題路由是什麼？GET、POST這怎麼好耳熟？

由於不懂路由是什麼玩意，所以辜狗找到鳥哥的 Linux 私房菜 -- Linux 常用網路指令介紹這篇文章，裡面的5.1.2 路由修改： route，提到
  • 兩部主機之間一定要有路由才能夠互通 TCP/IP 的協定，否則就無法進行連線
  •  route，路由是把資訊從源穿過網路傳遞到目的地的行為，在路上，至少遇到一個中間節點。路由包含兩個基本的動作：確定最佳路徑和通過網路傳輸資訊。
OK，現在已經對route有稍微概念後，再來是GET、POST，辜狗找到HTML 表單中 GET 與 POST 的用法差異 - Wibibi這篇文章，對於GET、POST有著下面這去破題
  • 無論是 GET 或 POST 都可以傳遞資料，但兩者在應用方面需要做選擇
GETPOST
網址差異網址會帶有 HTML Form 表單的參數與資料。資料傳遞時，網址並不會改變。
資料傳遞量由於是透過 URL 帶資料，所以有長度限制。由於不透過 URL 帶參數，所以不受限於 URL 長度限制。
安全性表單參數與填寫內容可在 URL 看到。透過 HTTP Request 方式，故參數與填寫內容不會顯示於 URL。
  • 一般的表單可以用 GET 直接傳遞，而需要保密的資料必須用 POST 來處理，像是帳號密碼
現在我們終於可以來讀如何來進行請求的 "路由"這節，onRequest()的第一個參數request進行參數傳遞，但是為了解析這些資料，需導入新的Node.JS模組，它們分別是url和querystring模組。繼續讀後發現它缺了太多背景知識，必須找其他資料來學習NodeJS裡的url和querystring模組，學了一個新單字，parse 解析。

在如何來進行請求的 "路由"這節看不太懂的圖片，辜狗找到Node.js 入門, #3：URL Routing 觀念與實作這篇，它的圖片示意清楚多了，所以先閱讀這篇。在閱讀這篇文章之前，可以先閱讀[Nodejs]学习笔记四：路径（URL,Path,QueryString）相关操作 - Mozlite這篇文章，裡頭介紹了許多專有名詞，在此摘錄部分我覺得重要的
  • href: 整個URL地址字符串，不過在nodejs中已經將協議字符串和域名字符串轉換為小寫。如：'http://user:pass@host.com:8080/p/a/t/h?query=string#hash'
  • protocol: 請求協議字符串，如："http:"，小寫字符串
  • port: 端口，如： '8080'
  • host: 主機域名，包含端口的小寫字符串，如： 'host.com:8080'
  • hostname: 主機域名，小寫字符串，如： 'host.com'
  • pathname: 文件路徑，查詢字符串之前，域名端口之後的字符串，以“/”開頭，如： '/p/a/t/h'
  • sea​​rch: 查詢字符串，包含“?”，如： '?query=string'
  • path: 包含文件路徑和查詢字符串，如：'/p/a/t/h?query=string'
  • query: 查詢字符串鍵值對字符串或JSON對象，如：'query=string' or {'query':'string'}
這篇也有提到，querystring.parse()是根據“&”和“=”將字符串進行分割，反序列化為JSON object，有了這些知識後，我們可以來閱讀URL Routing 觀念與實作這篇文章。

URL Routing 觀念與實作這篇提到另一個有趣的概念Node.js 的軟體架構，主軸是模組化，即 Component-based 軟體工程的觀念，對於 Pathname 與 Query String 的解析也很清楚，請見下圖。
圖 2.2：API 與 Query String
讀這篇時發現件有趣的事，寫後端時通常會用個獨立的index.js然後讓你去讀你寫好的module像是server.js或是router.js，而且server.js、router.js都會個別export成module讓你可以用require去讀到這些modules，這篇接著提到Request Handler這概念，缺了背景知識，辜狗發現作者jollen在他第一篇NodeJS的教學Node.js 入門, #1：Hello World有提到這關鍵字，所以先來閱讀這篇。

這篇提到有趣的概念，先前我們學習時總說http.createServer()裡放的是callback function，onRequest()，不過在這篇我們可以把以前學過的onRequest()當作是我們Server的request listener，用來監聽誰來訪問我們的Server，http.createServer([requestListener])，requestListener 是一個 Request Handler Function，用來處理 request 事件。

現在我已經知道jollen所說的Request Handler不過就是個拿來監聽用的callback function，接著我們回到URL Routing 觀念與實作這篇，後來發現他把requestHandlers.js的定義放在這篇文章的最下面 =..=，這篇很快就能瀏覽完了。

現在我們終於能回到如何來進行請求的 "路由"這節，閱讀與理解已經比第一次碰到這主題時順暢許多了，瞬間秒懂，coding的部分只能留待明天12/15實做了。，已經於12/15下午3:16實作完成，請見D:\work\JavaScript\NodeJsPractice\index.js裡的ex.4。

(以下2014/12/15新增)
實作時遇到一個小粗心，在此紀錄一下。一開始寫完後run時，於chrome裡鍵入http://localhost:8888/後無法顯示網頁，WebStorm顯示有Bug
IDE說我的route為定義，在server的onRequest function，於是我們去檢查server.js發現，onRequest裡的route顏色沒有改變，未被調用到。
後來想起，我們在index.js裡頭是寫server.start(router.route)，start()裡有parameter，如上圖所示，我在server.js裡的start()未給它放parameter，這樣我的index.js裡要用server.start(router.route)時start()裡的參數就不知要放在哪了，所以修改如下



下一節Node入門 » 行為驅動執行開始，由20141215 node.js入門，學習歷程 pt.2繼續。

(以上2014/12/12、12/13、12/14新增)
張貼者： 於 沒有留言:
標籤： ,
訂閱： 意見 (Atom)