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月27日 星期六

20141222~1227 Random Reading

12/22：
柱子老師的課督紀事 | 把孩子由網路遊戲中搶回來一些時間！(初任教師研習與均一教育平台公開課後心得分享)

Winston Chen - 台灣工程師的矽谷故事: 一人敵，不足學，學萬人敵

火箭，公車道，磁碟機 | PanSci 泛科學

傳統 UX, 敏捷 UX, 和 Lean UX 的比較 @ David Ko的學習之旅 :: 痞客邦 PIXNET ::

在葉丙成老師的動態上看到Coursera上開台大的「機器學習技法」，感覺非常厲害，能力稍微能看之後務必要來進修進修

12/25：
十年風華懷德居 - 優生活 - 設計- 商業周刊，這真的太正了，改天一定要去玩玩看。

為什麼工程師總是喜歡在三更半夜寫程式？ - Inside 硬塞的網路趨勢觀察

Git 版本控制系統 | ihower 的 Git 教室

12/26：
今天在TonyQ的動態看到他的歷練與履歷，真的很強，要再加油再努力 ^_^，另外也備份先前
TonyQ的報導
看到一種新的電子商務模式的切入角度：感性電商。這篇的著手模式算是最近幾個電商的營業模式中少數我有興趣的，從人性去打動才有可能讓人家掏腰包，以前看了一堆奸的好人系列書籍 也都是從情感感性著手的
12/27：
今天讀了為什麼我們要從NodeJS 遷移到Ruby on Rails | 外​​刊IT評論這篇才知道，原來node.js與ruby on rails無法互通有無......，原本有點小失望時發現這篇最早的留言是2012的，而且留言提出了反對意見的實例，見Groupon從ROR遷移至Node.js，響應速度大幅提升-CSDN.NET這篇文章第二篇文章提到
  • 做服務，Ruby的 速度確實有點慢，Node.js/Java要比Ruby強。Ruby on Rails具有快速開發的特點，更適合於人少、資源少的創業型企業，Github、GroupOn、Twitter等大公司最初採用Ruby on Rails也是基於此。
反正現在還是先以JavaScript為主，ruby寒假時當玩票即可。

原來翟神47歲才創業啊，不要急....給自己多一點時間讓自己再多一點歷練

在Will 保哥的技術交流中心的動態看到，由百度發展的 JavaScript 圖表函式庫：ECharts。它以 HTML5 Canvas 繪圖技術為基礎，可輕易透過 JS 做出互動式圖表。



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

「新發現」 新酷音的頓號在筆電上要如何打出來

作法：使用新酷音輸入中文的模式，鍵入：B+ ' 。" ' " 是Enter鍵左邊的那個鍵。
張貼者： 於 1 則留言:
標籤：

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月20日 星期六

20141214~1220 Random reading

12/14：
在臉書看到一個有趣的網站，別讓圖形不開心：看似無害的選擇，如何導致不和諧的社會，除了富饒寓意的故事之外，透過前端技術網頁互動的呈現，讓我非常地傾心，特此摘錄下面這段我喜歡的文字
  • 您只需要改變您對「怎樣的環境可以接受」的想法，事情就可以往好的方向發展。 所以，圖形們，請記住這不是三角形和正方形的競爭。 每個人可以決定讓這個社會變成什麼樣子，不必拘泥於不開心的現狀。
發現一個可愛的小女生寫前端技術的部落格，可惡，想認識 XD
洪士灝老師今天的動態，談弱勢教育與資優教育的，現在還沒空看，在此先備份

12/18：
"用燈泡來講解二進位表示法" 這點子真的很正，有創意富想像力的老師才會想得出這種教法，而且他教過的學生都會在完成這門課後，自發性地擔任義工TA，教得內容五花八門非常有趣。
談靈魂出竅的技巧，最近幾天又開始實驗了 XD，等我好消息。
國外的老師怎麼那麼威啊，突然有點想把英文聽說練強後來修這門 QQ
----------
結合視覺化、手算、數學抽象、電腦運算、理論發展。從根源帶到前線的線性代數！聽了覺得超想上阿！
- It’s visual.
- It connects hand calculations, mathematical abstractions, and computer - - programming.
- It illustrates the development of mathematical theory.
- It’s applicable.

蘇文鈺老師發的一則動態，談希望LuLu's Hand能夠很耐用，在此摘錄下面這段我喜歡的文字
  • 過去的人是全心來製作一部機器，也希望(奢望)它的主人可以好好愛惜。這些公司會為他所出產的所有型號備20年的料。愛物惜物的人也對自己的機器如此，即使有一天要出讓，也希望幫它找個好人家。大家都能如此，其實不必弄什麼環保材料。何況環保材料容易壞，而難道製造環保材料不需消耗能源嗎?
從Deus Ex在臉書上發的一段影片看到，讓我想起自己小時候夢想做出洛克人 XD

昨天發動態，介紹幫Amazon弄四軸飛行器機器人的演算法大師，後來發現以前在Ted看過他，阿堂說Raffaello D'Andrea是他的新偶像 XD，在此摘錄我喜歡的文字
  • 拉菲羅安德烈有如此堅強的實作能力，大部份歸功於研究所的訓練，他在加州理工大學研究所專攻系統控制領域，並同時執行了兩項性質截然不同的研究計畫，其一是非常理論的最佳化系統設計，另一項則是非常應用研究，以脈衝氣流噴射消除噴射引擎之不穩定性。這樣的經歷讓他在完成博士學位後，直接取得康乃爾大學助理教授的職位，而且獲得機器足球員的系統工程計畫贊助，不負眾望的，帶領康乃爾大學獲得四屆世界機器足球員比賽冠軍。
12/19：
今早看了一段Ted影片，有中文字幕，故事主角是位MIT的教授，少年時因為凍傷雙腿截肢，為了改變"無法繼續熱愛的登山運動"這結果，他開始投入義肢的製造，結合機械、系統設計、數位訊號處理，然後到現在開發出來的成果讓他站在這裡。
在演講末端，講了一位芭蕾舞者在炸彈事件中炸斷一隻小腿的故事，在他的協助下，這位芭蕾舞者在這場Ted演講，回到舞台的初登場演出，那一幕真的太感動人心了。


早上讀了翟本喬談自己加入資訊局長遴選的過程後，才知道即將上任的資訊局長，前逢甲大學資訊長李維斌，也閱讀了關於他過去改造逢甲大學的經歷，在他的帶領下感覺逢甲大學資訊處能力真的很強耶，台北又更有希望了 ^_^
  • 李維斌解釋，雖然各校的校務系統所需功能大致雷同，但因為各校文化不同，管理作法上也有相當差異，最終系統客製化比例很高。資訊處人員參與這些外部專案的開發過程中，不但可以學習到其他學校的好作法，也更有機會學習新的IT技術，這些經驗有能夠回饋到逢甲校內系統的開發專案中，他認為：「走出學校不只是為資訊部門找出路，更重要的是吸收外界經驗，這是一個雙贏的作法。」
也很喜歡他公開透明的作法
  • 過去，資訊處很難兼顧所有人的需求，尤其很多使用者往往只是為了讓自己作業方便而提出開發需求，不一定是必要功能。李維斌表示，這種需求單很多，如果拒絕，使用者會抱怨服務不佳，不拒絕又處理不完。 現在把專案資訊公開後，任何單位的使用者都能清楚看到自己提出的需求為何暫緩，有哪些更重要的專案排在前面，資訊部門不需要另外花很多時間和使用者溝通。李維斌說：「對使用者公開專案資訊，能讓開發人力專注在更有價值的需求。」
今天看到張衛健的演講，真的太懷念了，涼風有訊


張貼者： 於 2 則留言:
標籤：

14/12/20 Coding

  • 今天成功讓WG-map出現要打倒的怪物
  • 在threex.minecraft下，想要讓player.html有新動作，要加動作要去threex.minecraftplayer.js加
  • 在threex.minecraftplayer.js裡，他要先從THREEx.MinecraftChar()讀人物model，之後再去THREEx.MinecraftCharHeadAnimations(character)，把從THREEx.MinecraftChar讀到的model放入THREEx.MinecraftCharHeadAnimations(character)的parameter，也就是character。
  • 要去學習物理碰撞，這樣才能觸發我們的題目，後來參考THREEx - Game Extensions for Three.js之後發現有threex.cannonjs看了它的demo後，決定用jeromeetienne/threex.cannonjs · GitHub
  • 在threex.cannonjs · GitHub的頁面底下也有使用教學
  • 實作於：D:\work\WebGL Learning\threex.cannonjs-master\examples\basic_WG.html
  • 傳統上，我們先設好scene、camera，接著我們要讓我們的3D world導入物理碰撞
  • var worldx = new THREEx.CannonWorld().start();這個用THREEx.CannonWorld().start();所宣告的object，就是我們要拿來進行物理碰撞的世界
  • 接著先參考D:\work\WebGL Learning\threex.cannonjs-master\examples\domino.html，來學習讀取model後如何使用threex.cannonjs來產生物理碰撞
  • 首先我們先生成我們要的model，命名為mesh，紅框、綠框是mesh的內容物，像是形狀、顏色，接著我們把mesh這個model，透過scene.add()加入我們的scene中。
  • 接著，我們宣告一個var body = new THREEx.CannonBody({})，這讓我們可以把mesh加入有物理運動效果的世界中，THREEx.CannonBody({})的parameter要用中括號{}包起來，在{}裡有兩個properties，第一個property，mesh: 拿來放我們要進行物理效果的model，第二個property，mass: 若設為0或小於0的數字，則會固定不動，設為大於零的數字就跟沒設一樣，這個可有可無，通常是拿來設定山、地面這種物體用的。
  • 接著我們繼續著THREEx.CannonBody({})後面加入.addTo(worldx)，addTo裡面的parameter會自動被設為當初用THREEx.CannonWorld().start();宣告的object
  • 被加入我們的物理碰撞世界worldx之後，若想要讓我們讓我們的model產生物理效果或是控制它，可以在var body = new THREEx.CannonBody({})之後使用body.body.applyForce()或是參考basic.html的bodyx.body.angularVelocity.set(0,0,20)。
  • 試了一天，雖然在D:\work\WebGL Learning\threex.cannonjs-master\examples\basic_WG.html成功得到物理碰撞的效果，但是後來發現，這不是我要的，這只是畫面上看起來有碰撞，我要的是，一個觸發的效果，當我WG-Map的小人接近地圖中的動物時，能觸發我們的題目
  • 後來繼續查資料看到這demo，可以使用THREEx - Game Extensions for Three.js裡面的jeromeetienne/threex.colliders · GitHub







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

2014年12月19日 星期五

14/12/19 Coding

Project.1
目標：記錄Require.js實作過成的點滴。
路徑：D:\work\JavaScript\RequireJsPractice
  • 用npm install requirejs將Require.js安裝於D:\work\JavaScript\node_modules\requirejs
  • 在實作初就遇到bug，實作3. R​​equireJS基本使用這節時，我把範例中的main.js改命名為package.require.js，這是當初mike-map的習慣，果然馬上就失敗了
  • 抓bug時發現，是命名的問題，由於index.html裡，我引用require.js的script tag，其attritube是把這script指向main.js透過data-main='main'，而我們的project裡沒有main.js，所以當然會報錯。
  • 接著我把data-main='main'改成data-main='package.require'就能run了
  • 為了避免麻煩，在此我把package.require.js改回main.js，index.html裡的script tag的attritube也改回data-main='main'
  • 接著我們要來實作這篇文章的5. RequireJS模塊化這節，接著我們要來實作這篇文章的5. RequireJS模塊化這節，稍微研究5. RequireJS模塊化與6. 多路徑配置: baseUrl,paths這兩節後，想嘗試mike-map那種define的用法，找不太到相關文獻，所以直接實作嘗試，在RequireJsPractice資料夾底下，我們新建一個index for module.html
張貼者： 於 沒有留言:
標籤：

20141219 初探Require.js

在昨天嘗試把threex.romemodel放入WG-Map，fail，經多方嘗試後記錄在coding記錄 12/8，線再來學習如何使用Require.js。

學習資源：
過去曾經在20141021 今日學習、20141022 今日學習對Require.js有淺淺的認識，以下是過去記錄的文章

Require.js官方載點

Require.js教學
Require.js的安裝
r.js + Require.js
bower

學習開始：

對於Require.js，過去曾讀過合併與模組化javascript- RequireJS- 紅色死神這篇，對於Require.js的用法僅有初步了解，於是我們現在重讀初探 RequireJS - 網站製作學習誌，重讀這篇開頭時才知道，原來
  •  CommonJS提出 AMD 這個 API 規範，用以讓我們的 JavaScript 程式可以模組化，並同時解決 js 檔案載入時的阻塞問題。
一解我過去20141022的疑惑，Require.js就是實作 AMD 規範的 JavaScript Library，AMD，全名 Asynchronous module definition（異步模塊定義）。為了要實作初探 RequireJS的內容，開始準備安裝Require.js，看到新的syntax，bower，讓我想起過去曾在mike-map看過bower_component，也找了一些資料備份在上面。

Require.js的安裝，決定參考RequireJS異步模塊加載| 粉絲日誌，用npm install requirejs將Require.js安裝於D:\work\JavaScript\node_modules\requirejs，現在我們可以開始實作初探 RequireJS的內容了。

稍微評估後改用RequireJS異步模塊加載| 粉絲日誌來練習實作，首先先實作3. R​​equireJS基本使用這節，實作路徑D:\work\JavaScript\RequireJsPractice。閱讀RequireJS異步模塊加載提醒了我，傳統html的加載，必須由上而下在script tag的src attritube來加載，又慢又費時，透過require.js 的require function，我們可以較優雅的方式來加載。
  • RequireJS可以幫我們做，js依賴管理。我們可以再也不用在HTML中，以很土的加載順序的方式管理JS文件了。這種優雅的注入可以幫我很好的管理全局變量。
Require.js提供的require function其syntanx如下：require(dependencies, callback)。dependencies: 是我們要載入的js，使用相對路徑。callback: 是封裝有程序邏輯。參考初探 RequireJS的內容發現，RequireJS 怎麼知道要載入哪些檔案呢？注意 script 標籤上的 data-main 屬性，它指向了我們所要加載的js file。

想到一個可能性，是否可以透過<body><script data-main='寫好的threejs logic'></script></body>呢? 後來發現不太行，先不論建一個model，光是調用打光function就需要script tag用src attritube來引入three.js。實作後這概念是可行的，在我們實作的RequireJsPractice資料夾底下，我新創一個use threejs.js檔，先在裡面寫個function three(){...}，然後把threejs的邏輯lighting、camera、import都寫在three()的body裡面
接著我再去main.js讓我們的require function的dependancy加入use threejs，接著我們就能在callback調用我們寫在use threejs.js裡的three()。
回到index.html別忘了把three.js import進來

成功能run了。

經測試把要加載的script放在body tag內行得通
現在要來研究先前卡很久的define用法，先讀初探 RequireJS 這篇的模組化這節，知道define用法與syntax，接著參考Require.js – 陈三時發現，require.js 建議我們不要設置模塊名稱，因為設置了'libs/hi' 的模塊名稱後，模塊就必須放在js/libs 目錄下的hi.js 文件中，要移動位置的話，模塊名稱要跟著改變，所以才會看到多數的範例code不使用define的第一個parameter


接著我們要來實作這篇文章的5. RequireJS模塊化這節，稍微研究後這節可以跳過，直接實作
6. 多路徑配置: baseUrl,paths這節  (尚未開始)

一直在思考，為什麼mike-map裡頭package.require.js，裡面用define()總是會看到module.uri，瀏覽到這兩篇，不知是不是解
最近一直卡在路徑的用法，讀了路徑表示法才知道，"\"的寫法是絕對路徑，''/"的寫法是相對路徑，看了這篇才知道，原來還有虛擬路徑的寫法，以下是摘錄
  • 絕對路徑的表示方式：從根目錄起，表示所有資料夾，以倒斜杠「\」作分隔
  • 相對路徑表示方式：只記錄該檔對另一檔的當前位置。上一層目錄則使用「../」
  • 虛擬路徑表示方式：由根目錄起向上層數，以「/」起首代表根目錄，再一層一層地數，跟絕對路徑類似，但不同之處是根目錄不限定是C:\，可以是D:\、E:\，甚至連線磁碟機也可以。
鳥哥的 Linux 私房菜 -- 檔案與目錄管理

雖然無法理解為什麼Jerome Etienne在用package.require.js時要把url使用module.uri+'/../'，在gitHub上觀看threex/threex.romemodels.js at master · jeromeetienne/threex · GitHub與threex/threex.minecraft.js at master · jeromeetienne/threex · GitHub分別都是使用THREEx.RomeModels.baseUrl = '../'與THREEx.MinecraftChar.baseUrl = '../'。後來參考THREEx官網的
threex.md2character，在threex.md2character/threex.md2characterratmahatta.js at master · jeromeetienne/threex.md2character · GitHub也是使用THREEx.MD2CharacterRatmahatta.baseUrl = '../'。

threex.md2character/package.require.js、threex.minecraft/package.require.js
都是採用module.uri+'/../'，明天直接拿threex.md2character來測試放在WG-Map上面。
張貼者： 於 沒有留言:
標籤：

2014年12月18日 星期四

14/12/8 coding：WG-Map加入多個animal model

最近開始，學一個東西資料讀累後，跑去讀另一個東西，然後就開始實作那另一個東西，等做完這令一個東西要回來寫原來的東西時，發現進度到哪都忘光光了........，所以coding週記，開始 ^_^

12/18

project.1
目標：WG-Map加入多個animal model，註解標題：自定義的要打倒的動物
路徑：D:\work\WebGL Learning\WG-map
  • 要先在require加入threeX.romemodelsWG，done
  • 程式能run，但是看不到動物
  • test：是否Require.js用錯，再另一個project下放minecraft的人物
  • project: D:\work\WebGL Learning\threex.romemodelsWG\examples\select.html
  • 稍微研究一下發現，若要把threex.romemodelsWG改用require.js去寫，那幾乎是整個project重寫，所以乾脆重新開個project寫比較實際
  • 新project：D:\work\WebGL Learning\WG.requirejs testing
  • 連renderer.setClearColor( 0xbbbbbb );的背景顏色都沒出來，所以有可能是require.js的問題
  • 為了測試問題是什麼，以minecraft為主，romemodelsWG為輔，開了一個新project：WG.MinecraftAndAnimals
  • D:\work\WebGL Learning\WG.MinecraftAndAnimals
  • 找出失敗原因：兩個model居然連在一起
  • 後來把minecraft的model關掉後發現讀不到animal的skin
  • 為了測試問題是什麼，以romemodelsWG為主，minecraft為輔，開了一個新project：WG.AnimalAndMincraft
  • D:\work\WebGL Learning\WG.AnimalAndMincraft\examples\Ani_n_craft_basic.html
  • 太詭異了，幾乎一模一樣的code複製貼上，Ani_n_craft_basic.html居然能夠run
  • 後來發現，作動畫的array命名不同，Ani_n_craft_basic.html裡動畫是用var onRenderFcts = []，而craft_n_Ani_basic.html的動畫是用var updateFcts = [];。
  • 當初craft_n_Ani_basic.html是用threex.mincraft裡的basic.html改的，然而Ani_n_craft_basic.html是用threex.romemodels裡的basic.html改的。
  • 馬已經能動了，但是馬的皮膚還是出不來

  • 終於找到原因了，因為minecraft的model是直接讀皮膚，不用打光也看得到，然而threex.romemodels裡model是皮膚跟著model一起存成json格式的，我剛剛居然忘記給craft_n_Ani_basic.html上打光的code =..=
  • 回去看WG-Map，可惜不是動畫命名的差異，WG-Map裡動畫的array皆是var onRenderFcts = [];
  • 必須要回去測試用require.js讀取他處.js，回到D:\work\WebGL Learning\WG.requirejs testing
  • 為了要先測試WG.requirejs testing裡的code是能run的，我在D:\work\WebGL Learning\WG.AnimalAndMincraft\examples\下新增一個test require code.html，camera與light的設定採用Ani_n_craft_basic.html，下午9:52初步camera與light的設定成功。
  • 用了requirejs testing裡，"讀取animal的models"、" Minecraft 人物model"這兩個區塊的Code，失敗，所以是code本身就有問題
  • 經測試" Minecraft 人物model"區塊裡的code不能run，"讀取animal的models"區塊的code可以run
  • 所以說至少"讀取animal的models"區塊的code，在requirejs testing裡頭要能夠run，但是卻失敗了
  • 所以要來研讀requirejs的用法
  • 在研讀requirejs前，測試requirejs testing裡面的code不用requirejs用正常的寫法能不能run，發現失敗
  • 在D:\work\WebGL Learning\WG.AnimalAndMincraft\examples\下新增一個test require code2.html，不過修改three.js與threex.romemodels.js存放的位置
  • D:\work\WebGL Learning\WG.AnimalAndMincraft\examples\test requirejs code2.html 採用 D:\work\WebGL Learning\WG.requirejs testing\index.html(未使用require.js)的code能夠run
  • 反覆失敗後，測試用老派的方法，index.html外面的資料夾有著我們的threex.romemodels.js與model資料夾，看看會有什麼效果，經實測後可以run
  • 路徑：D:\work\WebGL Learning\WG.requirejs testing\old way，進去old way\example\index_oldWay.html
  • 後來回去讀threex.romemodels.js的code發現，在threex.romemodels.js裡，與我們的model有關的，是show 動畫的index.html與models資料夾的相對位置。
  • 為了測試，我把D:\work\WebGL Learning\WG.requirejs testing\bower_components\threex.romemodelsWG下面的threex.romemodels.js改名為threex.romemodelsRorReq.js
  • 把threex.romemodelsRorReq.js裡的THREEx.RomeModels.baseUrl從 '../'改成'./bower_components/threex.romemodelsWG/'，如此一來我們的index.html才會相對應到model資料夾所在的位置


  • 我把D:\work\WebGL Learning\WG.requirejs testing下的index.html改名為：index_success romemodel.html
  • 對於require.js的測試，我改用WG.requirejs testing底下的index_do_requirejs，無聊試了一下require.js依舊無法run，明天有必要好好研究一下require.js怎麼用了。
張貼者： 於 沒有留言:
標籤：

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新增)




張貼者： 於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)