先前有討論,不要一開始就給學生答案,於是我決定用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
選用node.js的論述,可把他寫到論文裡去
經驗累積:
今天在用npm安裝socket.io時一直失敗,經過測試後發現,假設有一個資料夾A,A下面有個資料夾B,B下面有個資料夾C。如果我想要在C裡面用npm來安裝modules,那麼我的A、B都不能安裝,若A、B安裝了,則要用npm uninstall [模組名稱]來解除安裝。
找到一個中國人寫的WebGL與Socket.io的文件
3D拓扑自动布局之Node.js篇 - HTML5 3D WebGL - 开源中国社区
使用Nodejs绘制多人绘图游戏 – HTML5游戏开发者社区
在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教學-建立一個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其實非常短
現在來讀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就可以了 ^_^。請見
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教學-建立一個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在網路世界初登場,感動啊~~~~~~~
沒有留言:
張貼留言