20141031 今日學習

找到用Python寫影像處理的free source

• Programming Computer Vision with Python

備份，以前讀過，現在沒時間再讀一次

• 二度休學！16歲勇闖歐洲，在德國擁有熱愛的工作 82年次賴奎吾的故事

備份，一樣沒時間讀完，有稍微瞄過前面

• PunNode選書座談：《從0到1》之Peter Thiel在台灣創業會成功嗎？ | beLIEve

堅持只做自己喜歡的事，恩.....我喜歡，跟我很像 XD

• 妞專訪：「堅持只做喜歡的事！」讓你跌破眼鏡的眼鏡工作室 

相關聯的三篇文章

• JavaScript Objects in Detail | JavaScript is Sexy
• Understand JavaScript’s “this” With Clarity, and Master It | JavaScript is Sexy
• JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals

第一篇文章，開始

• JavaScript Objects in Detail | JavaScript is Sexy

我滿喜歡他這裡對object的解釋，他就像是一個清單，告訴你這object裡有什麼，透過名字(name)來取得相關的資訊(value)

• An object is an unordered list of primitive data (and sometimes reference data types) types that are stored as name-value pairs. Each item in the list is called a property (functions are called methods) and each property name has to be unique and can be a string or a number.
• Think of an object as a list that contains items and each item (a property) in the list is stored by a name-value pair. 

裡頭提到一個有趣的東西，reference data type與primitive data type，其實概念滿簡單的，reference data type在 reference primitve的value後，就取了當下primitve的value，以後primitive的value不管怎麼更動，都不會影響到reference的value。(見第三個paradigm，解釋的非常清楚)

• One of the main differences between reference data type and primitive data types is reference data type’s value is stored as a reference, it is not stored directly on the variable

好，休息!!! 我們來看程式碼吧 XD， by blogger record，今天就來看如何做出選單 ^_^

• src\threex.tvset\examples

直接開來玩玩發現有點類似超連結的感覺，稍微讀了一下牠的code，他是利用CSS的技巧，修改<style>去改button大小，說穿了就只是個超連結 =..=

恩..........有點弱，去看別的好了，loading與Start的選項

• D:/work/WebGL%20Learning/three.js-master/examples/webgl_loader_scene.html

稍微瀏覽，好長喔 QQ

休息一下，找到一個在three.js裡loading Blender裡面的 model的資料

• Playing around with Three.JS -- Part Two of a not quite a tutorial series

無聊搜尋資料時，發現似乎可以用jQuery與CSS做浮動下拉式選單

• javascript menu教學 - Google 搜尋

找到一個人家已經寫好的各種選單樣式的網站，可以直接拿來用

• CSS MenuMaker | HTML, CSS, & jQuery Menus

下拉選單製作教學

• Create a multilevel Dropdown menu with CSS and improve it via jQuery

回頭繼續讀JavaScript Objects in Detail，讀到Constructor Pattern for Creating Objects這節，這節的paradigm教我們如何做出類似以前寫C時，寫個可以input東西進去的副程式，by this keyword，這非常之實用

這節接著提幫我們稍微複習一下prototype

• An inherited property is defined on the object’s prototype property. 
• For example: someObject.prototype.firstName = “rich”;

接著下一節的標題就是Prototype Pattern for Creating Objects，簡單來說prototype就是讓你寫好的property與method，可以給其他人調用，而且prototype的好處是，不用直接定義在object的body裡面，請閱讀Practical Patterns for Creating Objects的paradigm與Prototype Pattern for Creating Objects的paradigm，相互比較就能體會prototype的強大了!!!

對於兩種模式想要進一步學習可以去讀別的資料

• read Chapter 6 of Professional JavaScript for Web Developers  (現在已出到3rd了)

接著繼續讀時讀到一個字"enumerable"，翻譯：枚舉、列舉，恩......不懂!!! 找到一篇文章，我覺得他的解釋我滿喜歡的

• object oriented - What does 'enumerable' mean? - Programmers Stack Exchange
• Mathematically, enumerable means "can be placed into a one to one correspondence with the natural numbers". Most representations in computing are enumerable because they are made of strings of bits, and strings of bits can be taken to denote numbers in the binary system.

有稍微了解一點點，但還是沒什麼感覺，下一篇

• JavaScript properties: inheritance and enumerability

讀這篇時讀到下面這段話有感

• Enumerable properties. You can hide properties from some operations by making them non-enumerable. Enumerability is one of the three attributes of a property: writability, enumerability, configurability

默默地想起現在讀JavaScript Objects in Detail時就曾看過這幾句話：

Each data property (object property that store data) has not only the name-value pair, but also 3 attributes (the three attributes are set to true by default):

• Configurable Attribute: Specifies whether the property can be deleted or changed.
• Enumerable: Specifies whether the property can be returned in a for/in loop.
• Writable: Specifies whether the property can be changed.

接著讀到prototype這keyword，於是估狗一下這作者寫過的prototype文章，在此備份，相信很快就會讀到

• JavaScript Prototype in Plain Language | JavaScript is Sexy

先到這邊，明天繼續從JavaScript Objects in Detail的Own and Inherited Properties這節開始

20141030 靈格斯頓與WebStorm設定

今天去鞋店看了寶傑12，難得這麼亮的配色我會覺得好漂亮好正，出了我喜歡的低調配色時一定要買這雙!!!

• 封面故事 / NIKE LEBRON 12 全新動能 科技剖析

難得的台灣之光，勝文還要緊急切割 XD

• 紐約時報：台灣是亞洲同志的燈塔 | 國內 | 新聞 | 風傳媒

一則不錯的臉書動態，但目前還沒時間去看

• 織田紀香 - 早上朋友跟我談到教育，談到大學教育應該教出什麼樣的人。 ....

CMJ音樂節大支與人人有功練的表演

• CMJ音樂節大支與他的嘻哈團隊現場演出畫面(大京藝術提供) - TAVIS.tw

啊啊啊啊啊，一個瘋狂的念頭，繼剛剛突然決定認真治療Cindy男友的癌症後，自己也決定了治癒後我會得到10萬這靈性的報酬 (雖然來源未知，但我相信宇宙)，剛剛突然想到要怎麼處理KMT，每天看他們耍白癡真的覺得好煩喔，後來腦中突然產生一個詭異的靈感，邀請孫運璿與蔣經國共同淨化KMT這邪惡的怪獸，好一個驚奇有趣的念頭，來玩玩吧 :D

略讀了一篇建議如何學習JavaScript的文章，滿好的滿好的

• How to Learn JavaScript Properly | JavaScript is Sexy

他推薦用WebStorm，恩....我有但鮮少用 XD 另外也推薦了一本好書

• Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript 
• 電子書

(以下2015/03/05新增)
最近發現，javascriptissexy這部落格臭掉了，教基本技術的部落格文章居然要收錢，如果出成一本書我還滿甘願去買的，但直接把部落格文章全都鎖起來，實在讓人不太舒服。剛剛參考了Best resources to learn JavaScript - Stack Overflow，有推薦下面幾本

• JavaScript: The Definitive Guide, 6th Edition (電子書)
• JavaScript: The Good Parts (圖書館有，電子書)
• Secrets of the javascript ninja (圖書館有，電子書)

(以下2015/03/05新增)

剛好做遊戲有5K的錢可以花，就拿一成去買這本書吧，另外明天要記得打去問這要怎麼核銷經費，以及能不能拿來買書。

由於剛剛看了推薦用WebStorm，但我一直覺得他很醜，所以沒用他，但是剛剛估狗看到，如何改背景改字體，讓它變得很漂亮，所以，我們開始吧

• WebStorm 自定义字体+颜色+语法高亮+导入导出用户设置 - MainTao - 博客园
• WebStorm的另一个技能 - 银狐的笔记 - 前端网（W3Cfuns）
• 怎么为WebStorm更换主题 修改字体样式 - NodeNpm社区
• C:\Users\Administrator\.WebStorm6\config\colors

(以下2015/02/14新增)

• JetBrain WebStorm 注册码 - PeterLee - ITeye技术网站

(以上2015/02/14新增)

(以下2014/12/11新增)
先前看到WebStorm的另一个技能 - 银狐的笔记，就很想把主題弄黑，弄了很久不知道要怎麼把主題弄黑，，現在終於成功了。Ctrl+Alt+s，然後取IDE Settings > Appearance > Theme > Darcula，朝思暮想的深色系終於出現了，已感動 ^_^

另外最近在用node.js，卻發現沒出現API提示，估狗查到webstorm 如何配置nodejs的 代码提示？ - CNode這篇文章，測試成功，作法如下：Ctrl+Alt+s，然後取Project Settings > JavaScript >Libraries >把它們都打勾

如此一來寫node.js就會有API 提示了。

(以上2014/12/11新增)

另外我發現每天都只有思考基礎JavaScript的知識真的好累喔，應該每過半小時稍微看看code，這樣會更加快樂 XD

Higher-Order Functions :: Eloquent JavaScript這章讀完Higher-order functions就沒繼續讀了，換一個領域，發現了一組相關聯的三篇文章，今天備份之，明天續讀

• JavaScript Objects in Detail | JavaScript is Sexy
• Understand JavaScript’s “this” With Clarity, and Master It | JavaScript is Sexy
• JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals

手邊有了Effective JavaScript: 68 Specific Ways的pdf，但是愁沒有立即翻譯，沒關係，我已經找到可用的外掛程式了

• [免費] Lingoes 靈格斯詞霸 v2.9.1 全功能翻譯軟體、電子字典 | 重灌狂人

上面那載點無法弄，找了另一個

• Lingoes 靈格斯詞霸2.4.2 綠色版 V.S. Babylon 7 免費中文即時翻譯 @ 英語大師部落格

終於找到靈格斯頓的載點成功下載並實測後感想：不知怎麼用，砍!!!!!! 後來又去估狗後發現，原來是我沒設定好，所以無法即時翻譯  QQ

• 部落格評選必裝軟體第六名揭曉：Lingoes @ 阿瑋師的分享 :: 痞客邦 PIXNET ::

(以下2014/12/11新增)
在閱讀【轉貼】翻譯軟體 § Lingoes靈格斯詞霸 & PDF閱讀利器 § Foxit Reader @ 無痕水月 :: 痞客邦 PIXNET ::這篇文章時有提到要想要一邊讀pdf檔一邊翻譯，需要Foxit Reader這軟體，由於最新版只有英文版，於是我去Foxit Reader v6.1.3 比 Acrobat 更快、輕巧的免費PDF閱讀器（繁體中文版）載了繁體中文版，為了要能取得更多辭典資訊，所以我按照翻譯軟體 § Lingoes靈格斯詞霸 & PDF閱讀利器 § Foxit Reader @ 無痕水月安裝了字型，但是Win7安裝字型的方式與XP不太一樣，所以又去讀了一點通 - 如何在 Windows 7 安裝字型 (MVP 撰寫)這篇文章，繼續按照無痕水月的文章設定好後，發現要靈格斯詞霸螢幕取詞熱鍵，於是又去讀了Lingoes Translator 靈格斯詞霸-- 免費的詞典與文本翻譯軟件的屏幕取词這章，只要使用Ctrl+滑鼠右鍵按住，就可以即時翻譯，已經測試成功如下圖

(以上2014/12/11新增)
剩下的明天再設定吧

(以下2014/12/11新增)
林映丞推薦有道詞典，但是估狗一下發現都是簡體的，此問題已解決。

(以上2014/12/11新增)

20141029 今日學習

讀到洪士灝老師一篇談科學研究、邏輯訓練、學術強者卻真井底之蛙，滿有趣的紀錄一下

• 洪士灝 - 這篇【同學只聊電玩 小科學人孤獨探索路】...

偶然讀到一個講作業系統的投影片，做得滿不錯的

• 20110824作業系統基本觀念複習

看到這個讓我想起以前曾看過Jserv的投影片，也是上傳到slideshare這網站，當初就在想上傳到這網站的slide可以弄動畫嗎，結論：果然可以，下次一定要來玩玩 XD

• 中輟生談教育

看到偉大的物理學家霍金，其生平故事改編電影，一定要看，太正了

閒談：剛剛估狗看到tumbler blog，讀這篇文章時看到Medium，以及看了許久中於今天知道是什麼的logdown，天啊，這兩個網站的畫面真的太正了，害我都想跳槽了，估狗部落格真是醜死了 XD

這操縱者太強大了!!!!     ‪#‎四足‬ ‪#‎怪手‬ ‪#‎媲美機械獸‬ ‪#‎再度跪在電腦面前‬

今日目標：先學完higher order function，再回去複習module patern，最後回去讀recursion

higher order function學習教材

• Nested Higher-Order Functions in JavaScript : Iterating
• Understand JavaScript Callback Functions and Use Them | JavaScript is Sexy
• Higher Order Functions — Functional JavaScript — Medium   (讀不懂)

今日從Higher-Order Functions :: Eloquent JavaScript的Abstracting array traversal這節開始，提到我先前卡關許久的forEach()，這篇提到這function的用法

forEach(array, action)

他是個JavaScript裡內建的function，你可以在forEach外面定義一個array與array裡面的element，然後把這個array放入forEach()的第一個parameter，第二個parameter是讓我們來寫一個function來執行對array要進行的操作，function(number){...}，裡面的number就是我們array裡的element，就像傳統的寫for loop去操作arry，不過比傳統寫法更簡潔易讀

• This looks quite a lot like the classical for loop, with its body written as a block below it. However, now the body is inside the function value, as well as inside the parentheses of the call to forEach. This is why it has to be closed with the closing brace and closing parenthesis.
• Using this pattern, we can specify a variable name for the current element (number), rather than having to pick it out of the array manually.

forEach是JavaScript內定義的function，在此附上它的定義

Array.prototype.forEach = function(callback,thisObject) {};

由於尚未讀過CH4的two array-traversing loops，這篇用forEach改寫的讀不太懂，去找別篇資料繼續學習forEach

讀這篇時才知道Higher-order function又稱之為Callback function

• Understand JavaScript Callback Functions and Use Them | JavaScript is Sexy

這篇不錯，提到JavaScript的function是first-class object，所以function可以當作一個parameter傳入另一個function去

• In JavaScript, functions are first-class objects; that is, functions are of the type Object and they can be used in a first-class manner like any other object (String, Array, Number, Object, etc.), since they are in fact objects themselves. They can be “stored in variables, passed as arguments to functions, created within functions, and returned from functions”1.

這篇提到一個term(專業術語)，functional programming，Higher-order function被廣泛用於jQuery

喔喔喔，他提到forEach與Callback function時有順便講到Anoymous function的定義

• anonymous function (a function without a name) 

原來我們只是傳function的定義當作另一個function的parameter

• When we pass a callback function as an argument to another function, we are only passing the function definition. We are not executing the function in the parameter.

換個口味稍微略讀一下Eloquent JavaScript的Higher-Order Functions 這節，老實說寫得不好，沒抓到精隨，略讀後就打算直接跳過，繼續讀其他篇資料

這篇不錯，雖然標題是Higher-order function但是前面有很長一大串在討論Closure (第I與II節)

• Nested Higher-Order Functions in JavaScript : Iterating

這篇文章很正的一點在於他討論了parentheses "()" 在JavaScript裡的用途，對於Higher-order function理論的解釋不多，但是解釋function與Closure非常之清楚，難怪JavaScript is Sexy要說Callback Functions Are Closures。

回頭繼續讀Understand JavaScript Callback Functions and Use Them 

疲勞了，剩下的明天再作業

20141028 今日學習

今天讀了一篇好文章，我太喜歡下面這句話了，所以摘錄下來

• 博客來OKAPI-《大叔》馬家輝：如果到了這個年齡還不懂取捨，也太不長進了
• 有位英國劇作家說過，所謂知識分子，就是他發現世界上有些事情比做愛更好玩。 但人的時間精力有限，最理想的狀況是邊做愛邊讀書，可是搖來搖去怎麼讀書？所以要取捨。所謂老去或成長，就是要懂得取捨。

看到一張有趣的圖

讀Eloquent JavaScript的CH2

• Program Structure :: Eloquent JavaScript

對於expression，Eloquent JavaScript這本書的作者有著下面美好的描述

• A fragment of code that produces a value is called an expression. Every value that is written literally (such as 22 or "psychoanalysis") is an expression. An expression between parentheses is also an expression, as is a binary operator applied to two expressions or a unary operator applied to one.

對於expression與statement的差異，也有著很好的解釋

• If an expression corresponds to a sentence fragment, a JavaScript statement corresponds to a full sentence in a human language. A program is simply a list of statements.

提到expresson後面可以不加分號 " ; "

• In some cases, JavaScript allows you to omit the semicolon at the end of a statement. In other cases, it has to be there, or the next line will be treated as part of the same statement. The rules for when it can be safely omitted are somewhat complex and error-prone. 

喔喔喔，有趣了，我原本以為是可以都不用加分號，原來是有選擇性的，所以我們再來估狗讀讀其他資料吧

讀到的第一篇資料的第一個範例就很正

• Your Guide to Semicolons in JavaScript | Codecademy

在瀏覽另一篇時，讀到一句話，想到threex.cubecamera-master\examples\demmo.html在實作匿名函數時有用到

• Semicolons in JavaScript are optional

這篇前面其實我也沒認真讀，但是一定要看最下面那個範例，講到JavaScript裡semicolon與parentheses在進行interpreting時容易搞混的地方

• when a line starts with parenthesis, prepend a semicolon to it.

OK，學習到這邊對expression與statement稍微有點概念了，根據昨天的紀錄，現在讓我們回去學習Functions :: Eloquent JavaScript的Declaration notation這一節吧

Declaration notation這節除了解釋了為何可以先調用function的名字，後面再定義function，也說明了在if時不適合用function

• What happens when you put such a function definition inside a conditional (if) block or a loop? Well, don’t do that. Different JavaScript platforms in different browsers have traditionally done different things in that situation, and the latest standard actually forbids it.

現在，CH2 - The call stack這節

其實就只是在說你function調用時會放在stack的頂端，用完後再把它從stack中移除

• The place where the computer stores this context is the call stack. Every time a function is called, the current context is put on top of this “stack”. When the function returns, it removes the top context from the stack and uses it to continue execution.

現在，CH2 - Optional Arguments

這段期時就在說JavaScript心胸寬大，你多傳argument進來，他也不會報錯，只會取原本function定義的，換句話說：在argument的處理自己要小心，complier不會幫你debug

• JavaScript is extremely broad-minded about the number of arguments you pass to a function. If you pass too many, the extra ones are ignored. If you pass too few, the missing parameters simply get assigned the value undefined.
• The downside of this is that it is possible—likely, even—that you’ll accidentally pass the wrong number of arguments to functions and no one will tell you about it.

現在，CH2 - Closure

這篇提到Closure閉包，在先前(20141017 今日學習)曾花一天時間的時間學習之，現在來讀讀跟先前學習的有什麼差別，也許會有不同的領悟

稍微讀了一下後，恩.......很好，我過去把Closure與匿名函數搞混了，今天似乎有必要把Closure、module pattern重新釐清才對

找到這篇，對於Closure的描述清楚多了

• Understand JavaScript Closures With Ease | JavaScript is Sexy

簡單來說就是一個function裡面再包一個function，而裡面的function可以調用外面function的variable以及parameter

• A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

這裡又說到Closure另一個有趣的地方，內部的function可以調用外部function的parameter，但如果你外部的function放入一個argument object，內部的function無法調用外部的這一個argument object

• The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly.

喔喔喔，這篇提到Closure廣泛用於Node.js與jQuery，另外這篇也討論了Closure與side effect的關聯，對side effect這詞有印象，所以繼續讀下去

• Closures have access to the outer function’s variable even after the outer function returns

讀完了這篇對於Closure與side effect的關聯，讓我想起曾在Functions :: Eloquent JavaScript這章Closure的那節讀到的multiplier()這個範例，有讀到相同的概念，現在以multiplier()來解釋，以下是我自己的理解

一開始declare twice時，variable twice be reference to a function mutliper(2)，在一開始的時候twice就有parameter = 2 放入multiplier()的factor裡

而我們的twice如code所示，是由一個function定義的，twice它的本質是function，所以我們可以再給twice一個parameter

由於一開始 var twice時，outer function的parameter已經給了2，所以再放個5到twice的parameter時，5只能放到inner function的parameter去

Understand JavaScript Closures With Ease這篇還有提到Closure的其他用法，像是用在array或是Closures store references to the outer function’s variables，至於這些等以後有用到時再讀吧

另外還有一篇對Closure做了精美的解釋，不紀錄對不起自己啊

• Closures | JavaScript Tutorial

稍微瀏覽一下，這篇似乎講到JavaScript更底層的東西，甚至出現以前未曾讀過的LexicalEnvironment object，瀏覽僅知 var a=5; 這樣一條expression就是根據LexicalEnvironment object去寫的，這篇講得又更深入了，改天有空再讀吧。

OK，現在回頭去讀Functions :: Eloquent JavaScript的Closure那節，應該更容易理解。讀後感想，這節的解釋手法其實還好 XD 並不好讀，不過我已經從其他資源懂了Closure，所以沒差。

現在，CH2 - Recursion

喔喔，有趣了，上週末回去前，對Recusion有更深一層體悟，明天(10/29)來做個紀錄吧。

現在想換個口味讀，所以來讀Higher-Order Functions :: Eloquent JavaScript

讀前面幾句感想，程式短小精幹且優美很重要，厚重肥大的程式碼很解

Higher order function，其實就是在說一個function的parameter放另一個function，這篇開頭的範例以兩種加總的寫法來說明為何要寫Higher order function，其實是因為定義明確，以加總為例，最簡單的寫法寫個while loop或是for loop即可，行數又短，但是它可能遭遇的問題是定義不明確，其他人需要去猜你的code在幹嘛，這不是一個elegant coding style in JavaScript

為了讓我們能更清楚每段程式碼在幹嘛，我們在為每個function命名時要考慮，這個名字是否是個恰當的abstraction，這樣才夠清楚

•  Abstractions hide details and give us the ability to talk about problems at a higher (or more abstract) level.

有點倦怠了，在此備份明天要讀的資料，先學完higher order function，再回去複習module patern，最後回去讀recursion

10/29 higher order function學習教材備份

• Nested Higher-Order Functions in JavaScript : Iterating
• Understand JavaScript Callback Functions and Use Them | JavaScript is Sexy
• Higher Order Functions — Functional JavaScript — Medium

20141027 今日學習

看到一篇給予Maker建議的文章

• 給Maker初學者的免費軟體 - Make 國際中文版 

厚著臉皮跑去參加柯P健走活動，11/22(六) 600NT，上午八點半到十二點

• 「夢想。希望 Let's Go! 改變台灣，從台北開始」全民走出來，全力挺柯P

這篇滿有趣的，我喜歡她所說美國人不要別人的結論

• 台灣工程師的矽谷故事: 矽谷台灣人物：姚彥慈(Sha) - 因為這裡就是最好的地方

今天以悠哉地讀這篇文章作開始

• The Document Object Model :: Eloquent JavaScript

由於要寫loop runner要理解JavaScript的function邏輯(跟我習慣的C、JAVA的不太一樣)，所以回去讀底層JavaScript想了解始末，另外也找了一些JavaScript裡的requestAnimationFrame的資料

這篇不錯，由淺入深並且詳述為何不要用setInterval與setTimeout。

• requestAnimationFrame | CreativeJS

這篇內容有點少，但是有提供其他連結可看

• requestAnimationFrame | DWB

學而知不足，回頭去讀Functions :: Eloquent JavaScript讀到lexical scoping時一直難有體會，後來估狗找到這篇時，再去回想C語言的function寫法，終於有所感受

• Closures - JavaScript | MDN

簡單來說，function裡面的code可以操作funtion外面的variable，可以從下面這一個網站的第一個demo code看出相同的結論

• Lexical Scoping and Nested Functions (JavaScript: The Definitive Guide, 4th Edition)

讀Functions :: Eloquent JavaScript說到的function value，說穿了就是function的名字，就像

var sayHi = function (){...}

上面的sayHi就是我們的function value，這是expression的寫法

function fuckU(){...}

這是在說，declare fuckU to be a function，這是statement的寫法，注意fuckU一詞在此是一個variable。

• A function value can do all the things that other values can do—you can use it in arbitrary expressions, not just call it. It is possible to store a function value in a new place, pass it as an argument to a function, and so on. 

為了value一詞，回去讀Values, Types, and Operators :: Eloquent JavaScript， 裡頭有著下面一段敘述

• To be able to work with such quantities of bits without getting lost, you can separate them into chunks that represent pieces of information. In a JavaScript environment, those chunks are called values. Though all values are made of bits, they play different roles. Every value has a type that determines its role. There are six basic types of values in JavaScript: numbers, strings, Booleans, objects, functions, and undefined values.

對於function的用法，我很喜歡Functions :: Eloquent JavaScript裡頭summary所寫的這段話

• The function keyword, when used as an expression, can create a function value. When used as a statement, it can be used to declare a variable and give it a function as its value.

換句話說，function(){...}，就是我們的function value

至於什麼是expression，什麼又是statement，我又回頭去讀Eloquent JavaScript的CH2

• Program Structure :: Eloquent JavaScript

好累，現在臨晨三點半，剩下的明天補齊

20141025 今日學習

繼續昨天的reading

• Data Structures: Objects and Arrays :: Eloquent JavaScript
• Properties that contain functions are generally called methods of the value they belong to.

• Higher-Order Functions :: Eloquent JavaScript
• Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions. 
• 原來JSON就直接讀作"Jason" =..=

一樣是討論Higher-Order Function，這篇寫得太正了

• Nested Higher-Order Functions in JavaScript : Iterating

Eloquent JavaScript的第五章有談到apply()、bind()這兩個method

20141024 今日學習

今天不安排任何工作，就只有讀書與看動畫

第一節

• Functions :: Eloquent JavaScript
• This code works, even though the function is defined below the code that uses it. This is because function declarations are not part of the regular top-to-bottom flow of control.
• 這篇提到JavaScript的確可以把function定義在後面，然後在前面先調用
•  Variables declared outside of any function are called global, because they are visible throughout the program.
• 讀這篇時發現，昨天卡我卡很久的requestAnimationFrame是透過Recursion的寫法(遞迴)

讀到Recursion的部分未讀完，回台北繼續。

今晚讀到CH4，要準備讀Object

• Data Structures: Objects and Arrays :: Eloquent JavaScript

20141023 今日學習

備份一些東西，目前沒空看

• Snap Circuits 電子積木
• 你也可以寫程式！在 JSDC 上認識普及全世界的 JavaScript！ | 女人迷 womany 

先前都只有改改參數與找能用的東西，昨天終於開始coding時，發現東西都設好了，卻沒有render出任何東西出來，後來去參考threex.minecraft裡的player.html，發現沒有東西出來，好像是因為我沒有寫loop runner這段，然後看了一下裡面的內容，requestAnimationFrame恩.....很好，這是什麼，我已經忘得差不多了，估狗看到以前曾閱讀的The Beginner's Guide to three.js，看到他的程式碼裡的註解

• requestAnimationFrame for smart animating - Paul Irish

恩.....好吧，我讀的沒有很懂，於是找了另一篇

• Efficient Animations with requestAnimationFrame | Treehouse Blog
• 這篇讀懂多了，原來以前做動畫是用setTimeout與setInterval，後來有人開發出效率更好的requestAnimationFrame
• 讀了這篇教學，看到下面這段，終於懂player.html裡的loop runner是怎麼寫的

終於看懂player.html在寫什麼鬼了，原本作者超愛炫耀自己的，code寫得那麼難懂幹嘛 =..=

現在搞懂後，看到裡面的forEach用法，連續找了幾篇後，終於找到一篇看得較懂

• JavaScript forEach Tutorial
• 簡單來說你寫一個array，array裡面的element你也都有了，如此一來你的array就能調用forEach(function)這方法來取得attay裡面的每個element
• forEach()裡面的parameter要放一個callback function
• 讀這篇時，我發現我真的不懂第一個例子的寫法，但是回顧player.html，發現她就適用第一個例子的寫法去實作forEach()

var a = ["a", "b", "c"];
a.forEach(function(entry) {
  alert(entry)
});

太崩潰了，我覺得我真的該回去好好讀讀JavaScript裡function的用法

• Functions :: Eloquent JavaScript

結果發現這作者的CH5就提到forEach了......該好好把這兩篇讀完!!!  (握拳)

• Higher-Order Functions :: Eloquent JavaScript

這作者跟我當初會寫JAVA後想說JavaScript應該是差不多的東西一樣，其實差很多 XD

• Javascript: use the forEach Method and Do not Bother with Scopes - Zsolt Fabók

明日學習

今天休息吧，明天開始先讀下面這兩篇文章

• Functions :: Eloquent JavaScript
• Higher-Order Functions :: Eloquent JavaScript

20141022 今日學習

恩......晚上九點左右進實驗室，快十點才準備要開始功做，今晚又是個美好的夜晚 ^_^

看到一個滿有趣的討論串，讓我來紀錄一下我看到的這留言，因為他提到OpenGL XD

• 陳鍾誠-邏輯很重要嗎？ 我不知道ㄟ！-程式人雜誌FB
• 至於邏輯的驗證，在資訊圈子最大宗的邏輯驗證是「電腦圖形」，觀察 OpenGL 的發展歷史，簡直就是史無前例的「驗證學」！OpenGL 為了讓傳統製圖圈子的人信服電腦運算可以處理幾何投影 (Projective Geometry)，把理論都搬出來驗證，請數學家、物理學者、電腦科學專家交叉驗證 ...要使用 OpenGL 的過程得以順暢，沒有投影幾何的概念，說實在的，玩不出東西 ... 面對數千個函式，不懂投影幾何的邏輯，你就慢慢試吧 ...

一篇清明夢的文章

• 全面啟動清明夢 | PanSci 泛科學

Coding

銜接昨天進度，看package.require.js裡的東西，看到路徑的寫法也忘得差不多了，所以辜狗之備份一下

• js调用相对路径如何写！（同一目录下） 问一个JS问题 html文件里有调用js
• java筆記: JavaScript src 路徑

讀了treex.minecraft裡的package.require.js，還不是很懂，回去讀昨天找到的初探 RequireJS - 網站製作學習誌，(搜尋：Namespace)裡面探討的require用法，再回去看package.require.js發現

PS: 一直在想THREEx.MincraftChar是哪來的，後來估狗發現自己的blogger寫說是來自於threex.minecraft.js。恩......有點蠢蠢的，但感謝自己 XD

PS: '/.. /' 這寫法看得不是很懂，暫時不要管他

咦??  他用define耶，不過在讀namespace時那段，已了解function(module){...}裡的module是什麼，回頭去看這篇文章的上面(搜尋：模組化)

找到另一個教學，感覺不錯

• Require.js – 陈三
• 稍微略讀後，理解要先define之後才能require
• define是AMD的寫法，當然我現在也不知道AMD是什麼東西

稍微了解之後回去讀昨天那篇，並繼續做筆記

• 初探 RequireJS - 網站製作學習誌
• define(id, dependencies, factory);
• id 格式為字串，代表模組的名稱，可以不寫。如果要寫的話，就必須是相對於 js/main.js 的檔案路徑，但不用加上 js 副檔名
• dependencies 格式為陣列，作用與 require 中的 dependencies 相同
• factory 則為一個工廠方法，它必須回傳一個物件，也就是我們的模組，不過他並不是用return

今晚拿threex.minecraft/player.html測試camera，我要如何旋轉camera

• How to ROTATE a camera? · Issue #730 · mrdoob/three.js · GitHub

20141021 今日學習

看了那麼久，終於找到去偏鄉教小朋友的一絲曙光了

• 葉丙成 - 隨著少子化日益嚴重，每一個孩子都台灣重要的資產。但城鄉教育的差距依然存在。偏鄉的學校每年缺老師，經過五招、六招、七招，都還...

同場加映，Teach for Taiwan的臉書

• 為臺灣而教 Teach For Taiwan

看了一篇漂浮板的文章，非常有趣，它的靈感來自於建築

• 想要一塊懸浮滑板？付出 US$10,000 就可以了

讀了第二篇文章，這女孩是如此聰慧勇敢，勇於築夢與造福人群

• 她從 9 歲就想做沒人辦得到的事 – 血液檢測女王 Elizabeth Holmes | CAREhER

讀了第三篇文章，裡頭提到一個點子"尋找當地的非營利組織，提供免費設計服務"，我喜歡這點子，可以提供自己不錯的練等機會

• 設計師自學完全手冊，讓你從零基礎到成為專業設計師 | TechOrange

讀了第四篇好文章，我喜歡他親自走入田野，理解老人的需求然後設計出優異的餐飲工具給失智老人

• 台灣女孩姚彥慈為失智奶奶設計的餐具，美國療養院也買單！ - NPOst 公益交流站

讀了第五篇文章，幸福丹麥，希望有生之年能看到台灣也能如此

• 地球上有一個疑似共產主義的國家，你知道是哪兒嗎？ LIFE生活網

讀了第六篇文章，依舊令人感動，窮人需要的不是施捨，而是自己自足與尊嚴

• 國際：模糊窮人與富人的界線 ── 聽聽 Kiva.org 創辦人 Jessica Jackley 如何讓愛與金錢一起發揮效用 - NPOst 公益交流站

今天報備了一下進度，有了一些討論，來紀錄一下，首先，我們的目標設定為兩階段。

第一階段

在第一階段裡，我自己按照章節設計基礎題目，如下圖所示

我們的學生以三人為一組，每組有一個Micraft的小人可以操控，在一個世界中走動，在這世界之中會遇到怪物，每個怪物代表一個章節裡面的基本觀念，他會出文字題目讓學生去解，每個怪物涵蓋有6~8題題目，戰鬥的構想如先前討論過的，採用血條與各種招式，而我們需要的畫面選單、畫面切換、下拉選單，在以前有找到一些demo，可以去看他們的原始碼，來構思如何寫 (此圖從mike-map去改的)

• slides/howtomakeagame-nextgamefrontier-2014/demos/mike-map at master · jeromeetienne/slides

程式碼位置

• D:/work/WebGL%20Learning/slides-master/howtomakeagame-nextgamefrontier-2014/demos/mike-map/index.html

怪物取自2014/9/30的"各種動物的動作效果與現成的model"

第二階段

在第一階段我自己設計題目，讓他們可以揣摩與思考自己需要哪些知識，到了第二階段，讓他們互相出題目給對方，但是有一些麻煩的問題，最重要的一點：我要如何讓他們上傳題目。在第一階段，設計題目上傳題目，解題觀念寫條與答案血條都可以我自己設定，但是要如何寫一個外部授權，讓他們來input他們的題目，與學生自己所設計的觀念與題目答案，目前對於這問題還無解，先搞定第一階段吧。

開始coding

今天開始決定自己coding，為了要測試遊戲的戰鬥畫面，其概念以前有紀錄過，寫出一整個畫面，採用自己想要的動作與camera視角 (由上往下斜視角)

寫程式時看到一個沒看過的CSS要素，overflow: hidden

• CSS overflow 屬性用法讓你掌握控制捲軸效果 - 網頁設計教學站

開始仿效D:\work\WebGL Learning\threex.cubecamera-master\examples\demo.html來進行coding，一開頭就遇到require.js相關的問題

上圖中有看到，我用紅圈圈出逗號，後來就去想require()，後面的")"在哪裡，怎麼我用Sublime Text2 找老半天找不到，後來改用WebStorm去查才發現

居然把所有程式碼都寫在require()裡面，恩.....頗扯 XD   所以我們先來研究一下require.js吧

以前曾找到這份資料，不過內容不夠扎實

• 合併與模組化javascript- RequireJS- 紅色死神

這篇太正了，寫得真好!!!

• 初探 RequireJS - 網站製作學習誌
• require(dependencies, callback);
• dependencies 的格式必須為陣列， callback 則為函式，於是我頓悟剛剛上面那個超長的程式碼為何要這樣寫的用意了 XD
• dependencies 表示我們要載入的 js，而且不需要寫副檔名，讀到這有趣了，怎麼我印象中看到的demo有副檔名???

• 仔細一看發現他是用package.require.js這js檔，於是我去開了D:\work\WebGL Learning\threex.wgworld\bower_components\threex.minecraft裡面的package.require.js把它打開來看

• Wooooooo，酷。的確不用寫.js副檔名
• 這篇文章還有提到，模組化、順序問題、路徑別名、Namespace...etc的用法，不過目前我們還沒用到，所以先放著納涼 ^_<

這作者的教學太正，然後我想說先前有找過如何如何讓blogger顯示的code更加漂亮美觀，沒想到他也有寫，真的太感激了

• 用CSS顯示程式碼 - 網站製作學習誌

恩.....進度有點弱，剩下的明天再弄好了 XD

20141020 今日學習

今天讀了一篇中國作家寫的文章，他所感動的事卻讓我覺得如呼吸喝水般自然，且理所當然，現在的中國充斥著狼性，失去了人性，難怪我總是對中國不感興趣

• 韓寒遊台灣：我們失去的他們都留下了

今天看了Learning Three.js的twitter裡面的一篇技術文章

• Implementing a "sketch" style of rendering in webGL | Floored

裡頭有個小視窗，上面寫著"Click to explore" 點了之後就可以看到它的效果，但是網頁的操作會變得很慢，這讓我想起昨天在天馬行空畫面的構思，是否畫面要考慮用框框，框框裡頭跑WebGL，外面做其他的事，用了這網頁後，我決定暫時擱置這念頭 XD

晚上看了葉丙成老師分享的文章，裡頭談到如何用微信督促學生，覺得滿不錯的，在台灣可以用LINE或Facebook的社團來弄

• 「濟南傳道」

今天又回去看昨天找到的How To Make Games in THREE.js，這slide的p55有個demo：mike-map，我想是我要的，於是我去GitHub把他載了下來，它的路徑如下

• slides/howtomakeagame-nextgamefrontier-2014/demos/mike-map at master · jeromeetienne/slides

程式碼位置

• file:///D:/work/WebGL%20Learning/slides-master/howtomakeagame-nextgamefrontier-2014/demos/mike-map/index.html

今天下午開始看了threex.cubecamera-master\examples\demo.html

可以從上面截圖看到，人物模型繞著中間的金球旋轉走動，前陣子一直在構思要如何讓人物走直線，因為我需要走直線的動作，後來去讀demo.html，發現他並不是用自己寫的方法，而是採用three.js提供的Object3D裡面的rotateY這method，於是我想，是否我也可以用裡面的Up這方法或其他方法來達到我要的走直線動作

• up - Up direction.

發現一些有趣的東西

這demo裡有黃色小鴨的model，也許可以拿來用

• D:\work\WebGL Learning\three.js-master\examples\webgl_loader_gltf.html

這demo裡有loading與Start的選項，可以參考他是怎麼做的

• D:/work/WebGL%20Learning/three.js-master/examples/webgl_loader_scene.html
• D:\work\WebGL Learning\three.js-master\examples\webgl_loader_scene_blender

這demo裡有教下拉選單，老實說我滿想用個下拉選單，然後用什麼邏輯讓學生自己選

• D:/work/WebGL%20Learning/three.js-master/examples/webgl_morphtargets_md2.html

這demo裡有我要的向前走的動作

• D:\work\WebGL Learning\three.js-master\examples\webgl_shadowmap
• D:\work\WebGL Learning\three.js-master\examples\webgldeferred_animation

這demo可有趣囉，可以做出火影忍者裡頭的多重影分身之術 XD

• D:\work\WebGL Learning\three.js-master\examples\webgl_shadowmap_performance

另外附上一些以前找到的可以用的參考資料：2014/9/30 今日學習

回頭估狗，鍵入：three.js move object forward，發現可以用Object3D.translateZ( distance )來達到前進的效果

• Move Forward Relative to Object Rotation in Three.js - Stack Overflow
• Three.js matrix to rotate and move forward - Stack Overflow
• Move Forward · Issue #70 · mrdoob/three.js

不過測試時一直失敗，看到demo.html裡的code有delta，讓我想起以前曾去找過相關資料

onRenderFcts.push(function(delta, now){
 var delta = -0.15 * Math.PI*2*delta
 angle += delta
 position.x = Math.cos(angle)*radius
 position.z = Math.sin(angle)*radius
 object3d.rotateY(-delta)
})

關於delta請見

• Time-based Animation with HTML 5 Canvas and JavaScript | Viget

經過反覆測試終於有一點小成果，進到demo.html，搜尋comment區塊的code

如截圖，裡面有一段註解：一直轉一直轉一直轉，那就是讓我們的人一直繞圈圈轉的關鍵，當我們把他們都用註解，如下

則我們就能看到我們的人都集中在中心點

若我加入object3d.translateZ(1)

就能看到人物向我們移動一步

若我改寫成object3d.translateZ(-1)，則人物就會向後移一步

而我們剛剛註解掉的那段code

onRenderFcts.push(function(delta, now){
 var delta = -0.15 * Math.PI*2*delta
 angle += delta
 position.x = Math.cos(angle)*radius
 position.z = Math.sin(angle)*radius
 object3d.rotateY(-delta)
})

就是人物會一直轉的關鍵，他其實是在說，你的動畫是用一個array去呈現，所以你每次push一張畫面進來，所以我要改應該是要改這段，但是我覺得明天自己重頭寫一個html檔會比較妥當，因為理想狀況我希望我的camera是用側拍，這樣才看得清楚我要的移動動作

20141019 今日學習

蘇文鈺老師推薦的文章

• 從零到一：Paypal 創辦人 Peter Thiel 在史丹佛的創業課，第一堂課 | 有物報告

程式碼解析

在threex.godrays\examples\basic.html裡看到一個奇怪的寫法

var mesh = new THREE.Mesh(geometry, material)
mesh.userData.domClasses += 'godRays'

用WebStorm去查發現居然找不到出處，估狗才發現是IE專屬的寫法 (不喜歡)

• JavaScript本地存储(2) : IE Only的userData | 王晔的流水账

下面這篇感覺滿詳細的

• js本地存储解决方案(localStorage与userData) - BeiYuu - 博客园
• WEB應用的快速發展，是的本地存儲一些數據也成為一種重要的需求，實現的方案也有很多，最普通的就是cookie了，大家也經常都用，但是cookie的缺點是顯而易見的，其他的方案比如：IE6以上的userData，Firefox下面的globalStorage

讀這篇時，裡頭說有一個object .addBehavior ("#default#userData")，但是我回去看basic.html時發現找不到這玩意，於是估狗了另一個關鍵字：mesh.userData，發現

• User Data in mesh object? - Babylon.js - HTML5 Game Devs Forum
• in Three.js there is a User Data object in mesh to store any json data you might want/need

於是我回去找Three.js的documentation，在Object3D()裡找到userData

• three.js - documentation - Reference - Object3D

不過讀了一下大都是採用object3D.userData，而不是範例裡的mesh.userData

• javascript - With three.js, can I attach information to an object, such as a URL? - Stack Overflow

不過在這篇文章發現也有人用mesh.userData

• tooltip - THREE.JS Update 64 - SpriteMaterial - definition changed - Stack Overflow

推測mesh.userData是舊版的寫法

找了老半天終於給我找到原因了

• How can I set the position of a mesh before I add it to the scene in three.js - Stack Overflow
• http://threejs.org/docs/#Reference/Objects/Mesh As you can see on the top of the docu-page, Mesh inherits from "Object3D". That means that you can use all methods or properties that are provided by Object3D. 

Object3D裡的userData

• An object that can be used to store custom data about the Object3d.

看到basic.html裡有

mesh.scale.set(1,1,1).multiplyScalar(1)

回去documentation找，發現scale會跑去Vector3，裡面有set() 這method，也有multiplyScalar()這method

看到basic.html裡有
mesh.userData.domClasses
奇怪，這個domClasses是什麼??? 估狗一下發現那似乎是自定義的，估狗一下發現兩篇

• With three.js, can I attach information to an object, such as a URL? - Stack Overflow
• javascript - three.js can't select the objects with Raycaster - Stack Overflow

他們的userData後面也接不同的東西，目前已看過接了domClasses、id、URL，跑去three.js-master\src\core\Object3D.js看原始碼，也沒看到類似的東西，所以應該要回到JavaScript的本質去找了

水!!!我找到了，辜狗鍵入：JavaScript 建構式，在下面這篇文章的範例code裡找到

• [JavaScript] 談物件, 實字與建構式 - apa  (搜尋：實字與建構式)

白天時在hree.js-master\src\core\Object3D.js裡看過userData的定義，就如同這篇文章的範例一樣，只有給個 userData = {}; 感謝估狗大神，從這篇可以知道mesh.userData.domClasses，是給userData一個屬性domClasses

疲勞了，今晚來看有什麼能用

各種火焰與控制火焰教學，還有聲音可用

• threex-master\src\threex.flamethrower

有點疲勞，跑去THREEx的網頁看了一個如何製作遊戲的投影片

• How To Make Games in THREE.js

這個如何製作雲端遊戲的GitHub

• jeromeetienne/threex.cloudgaming

裡面還提到一個管理前端的工具Bower，改天研究一下這能幹嘛用

• Bower
• Bower 管理網站套件的好工具 | 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY

沒靈感來看Jerome Etienne的Learning Three.js blogger，讀到這篇

• Live Cube Maps Reflections In Your Three.js Game With threex.cubecamera

這篇提供的demo，threex.cubecamera-master\examples\basic.html裡面有我要的元素，場景，人物自動移動，其他物體，所以明天來研究他的code

20141018 今日學習

一開頭先來第一篇文章，濁水溪以南最強

• MOSUT台南開放原始碼系統使用者聚會 創辦人 Jserv 專訪 – TechSea · 科技海

原本要繼續夜戰，但從昨天到今天只睡四小時不到，我想我還是回家睡覺好了

20141017 今日學習

現在大量閱讀英文網站，看到一個不錯的google extension，可以在瀏覽器上即時翻譯

• ParrotTalks抄筆記
• 快捷鍵：在網頁裡直接按下e，就可自動開啟，按下esc就可以跳出
• 不過在辜狗的blogger裡無法使用上述方式

看到一篇不錯的Sublime Text教學文

• Sublime Text 全程指南 - Lucida

超甜蜜的台灣高雄媽媽咪呀求婚影片

開始分析threex-master\src\threex.godrays裡的code

• D:\work\WebGL Learning\threex-master\src\threex.godrays\examples\basic.html

有趣了，這個basic.html檔裡引用了很多以前沒看過的.js檔

• <script src="../../../vendor/three.js/examples/js/postprocessing/EffectComposer.js"></script>
• <script src="../../../vendor/three.js/examples/js/postprocessing/RenderPass.js"></script>
• <script src="../../../vendor/three.js/examples/js/postprocessing/ShaderPass.js"></script>
• <script src="../../../vendor/three.js/examples/js/postprocessing/MaskPass.js"></script>
• <script src="../../../vendor/three.js/examples/js/shaders/CopyShader.js"></script>
• <script src="../../../vendor/three.js/examples/js/shaders/HorizontalBlurShader.js"></script>
• <script src="../../../vendor/three.js/examples/js/shaders/VerticalBlurShader.js"></script>
• <script src="../../../vendor/three.js/examples/js/shaders/BasicShader.js"></script>
• <script src="../threex.radialblurshader.js"></script>
• <script src="../threex.godrays.js"></script>
• <script src='../../../vendor/three.js/examples/js/libs/dat.gui.min.js'></script>
• <script src="../threex.godrays2datgui.js"></script>
• <script src="../../../vendor/three.js/examples/js/shaders/BlendShader.js"></script>

為數不少檔案都從shaders這folder裡出來，點進去瞧，裡面全都是.js檔

• threex-master\vendor\three.js\examples\js\shaders

shader，著色器。所以是為model上色的玩意，改天該好好研究如何操作每一種shader。

不過這有趣了，render渲染器與shader著色器有什麼差別

• What is the difference between "shaded" and "rendered" surfaces?
• What is the difference between shading and rendering? | Yahoo

感覺起來shader是處理一個小物體，render是處理整體。

在讀basic.html時馬上就看到奇怪的寫法

;(function(){  var geometry = new THREE.TorusGeometry(0.5-0.1, 0.1, 32,16)
  var material = new THREE.MeshPhongMaterial()
  material.color.set('red')
  var mesh = new THREE.Mesh( geometry, material)
  mesh.scale.set(1,1,1).multiplyScalar(2)
  mesh.position.x = 1;
  mesh.rotation.y = Math.PI/2
  scene.add( mesh )
})()

很好，這是什麼東西???

;(function(){
....
....
})()

印象中以前有看過，所以認真重讀一遍吧

• JavaScript 語言核心（19）名稱空間管理 by caterpillar | CodeData

看來這寫法是處理，函式也想作為其他物件上的特性，這樣寫的目的是因為，在撰寫 JavaScript 時，要儘量避免使用全域變數，JavaScript裡所有東西都是object，function也是一個object，上面這寫法是為了不要污染全域名稱空間。

這篇文章提到一個關鍵字：JavaScript模組化設計 (module pattern)

• 深入了解JavaScript模組化模式 « EasonLin's Blog

在閱讀module pattern時常看到匿名兩字，後來估狗發現有人稱這種寫法為JavaScript的匿名函數

• JavaScript匿名函数_JavaScript编程学院_IT学院   (這篇寫得不錯)
• 匿名函數，可以理解為定了一個函數，但是沒有將它賦值給變量
• 匿名函數沒有函數名，也沒有指向它的變量，不能像具名函數一樣可以在任何地方調用，匿名函數必需在定義後立即執行
• 小括號的作用是將代碼塊作為函數執行，在小括號內一樣可以傳遞參數

辜狗到這篇也不錯，連JavaScript為什麼要用匿名函數的由來(functional language)都寫出來了

• javascript 匿名函數 « FreedomKnight's Blog   (這篇太棒了)
• 用匿名的最大大大優點就是「船過水無痕」。 任何你在裡頭做的事情，所佔的任何空間，到最後會馬上釋放。
• 在小型 js 看不出來，但是再大型一點的程式，大家一股腦的宣告了一堆全域函數跟變數，如果瀏覽器還沒離開這個頁面，這些空間就一直被佔著，無法釋放。

讀完javascript 匿名函數 « FreedomKnight's這篇後再回去讀JavaScript匿名函数_IT學院這篇會更加理解第二篇在說什麼

這篇整理得也不錯

• JavaScript中的匿名函数及函数的闭包 - Rain Man - 博客园
• 閉包closure的含義：閉包說白了就是函數的嵌套，內層的函數可以使用外層函數的所有變量，即使外層函數已經執行完畢

看basic.html時，前面有一大票的外部引用，但是剛好看到一篇文章談如何處理這問題

• 合併與模組化javascript- RequireJS- 紅色死神

20141016 今日學習

今天讀了"交大首辦線上課程、實體認證考試"這篇文章後，找了交大的開放式課程

• 國立交通大學開放式課程(OpenCourseWare, OCW)

另外還有

• 台灣開放式課程聯盟

最近一點感想，對教育沒熱忱的人真的不適合教書 XD

Try and get it 

今日目標，就玩出各種動作，然後把他們保留下來就可了

做出升龍拳的動作，但是只有手臂，身體還沒有旋轉

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {        armLRotationZ : 0,
 armRRotationZ : Math.PI,  
 armRRotationY : Math.PI+2*Math.PI/5    
}).pushKeyframe(0.3, {
 armLRotationZ : 0,
 armRRotationZ : Math.PI, 
 armRRotationY : Math.PI+Math.PI/5  
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

一個小技巧，如果要看位置在哪，可以前後兩張frame，相同的座標軸設一樣的參數 

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {    armLRotationZ: 0,
    armRRotationZ: Math.PI-Math.PI/5,  
    armRRotationY: Math.PI+Math.PI/5   //設一樣的參數 
}).pushKeyframe(0.3, {
    armLRotationZ: 0,
    armRRotationZ: Math.PI-Math.PI/5, 
    armRRotationY: Math.PI+Math.PI/5   //設一樣的參數 
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

Math.PI = 180度，+theta 向外轉， -theta向內轉，(theta角度)

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, { armLRotationZ: 0,
    armRRotationZ: -Math.PI,  //-Math.PI = 手臂向外轉180度
}).pushKeyframe(0.3, {
    armLRotationZ: 0,
    armRRotationZ: -Math.PI, 
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

歷史性的一刻

• armRRotationZ : -Math.PI/2

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {
    armLRotationZ: 0,
    armRRotationZ: -Math.PI/2,   
}).pushKeyframe(0.3, {
    armLRotationZ: 0,
    armRRotationZ: -Math.PI/2,  
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

測試code時發現一些不太一樣的地方

• armRotationX，armRotationX它是兩手一起動

---

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {    armLRotationZ: 0,
    armRotationX: 0
}).pushKeyframe(0.3, {
    armLRotationZ: 0,
    armRotationX: +Math.PI/2   //兩手一起動
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

基於此概念，我測試了legRotationX，legRotationX也是兩腳前後擺動

先前自定義了bodyRotationY，今天終於來測試，結果就悲劇了

可以從上面的圖看到，只有身體轉動，手臂、腳都沒有轉 QAQ

當初身體旋轉的程式碼設定如下：

var onUpdate = function(position){
  ...
  character.body.rotation.y
            = position.bodyRotationY ?  position.bodyRotationY : 0; 
  character.body.rotation.y
            = position.bodyRotationY ? -position.bodyRotationY : 0;
  ...
}

var onCapture = function(position){
   ...
   position.bodyRotationY  = character.body.rotation.y;
   ...
}

var propTweens = {
   ...
   bodyRotationY : tweenAngle,
   ...
}

有必要重新修改這段code，可參考player.html裡，靠鍵盤按鈕就讓身體整個旋轉

• player.html，按"A"或是"arrow left"

用WebStorm查code之後，身體的控制是透過threex.minecraftcontrols.js

必須要找出player.html與animation.html兩者update frame的差異

需要查一下threex.minecraftplayer.js裡頭update()是怎麼寫的

THREEx.MinecraftPlayer = function(){
 var updateFcts= [];
 this.update = function(delta, now){
   updateFcts.forEach(function(updateFct){ 
     updateFct(delta, now)
   })
 }.bind(this)
   ...
   ...
}

必須要寫一個判斷機制，還有搞清楚下面每一個功能後，去改寫player.html

• armRRotationZ   // 右手左右擺動，+theta向右，-theta向左
• armLRotationZ

• armRotationX   // 手同時前後擺動

• legRRotationZ  // 右腳左右擺動，+theta向右，-theta向左
• legLRotationZ

• legRotationX   // 腳同時向左右擺動

• bodyRotationY  // 自定義，只有身體旋轉 (fail)

• armRRotationY // 自定義，手臂靠緊身體，螺旋轉
• armLRotationY // 自定義

目標

改寫player.html的code，試著做到前進五步，身體旋轉


有必要好好研究一下threex.minecraftplayer.js裡頭前進後退的code是怎麼寫的，剛剛測試按鍵不要一直按住，改用點點點點點去點按鍵，看看效果如何，結果改用此方法，則手腳擺動的幅度不大

研究threex.minecraftplayer.js裡面定義了

var controls = new THREEx.MinecraftControls(character.root)

所以我回頭去看threex.minecraftcontrols.js的code

THREEx.MinecraftControls = function(object3d, input){
  input = input || {}
  this.speed = 2;
  this.angularSpeed = 0.2 * Math.PI * 2;
  this.input = input;
  this.object3d = object3d;

  // user control
  this.update = function(delta, now){
     ...
     ...
     ...
     // up/down
     var distance = 0;
     if( input.up ) distance = +this.speed * delta;  //向前
     if( input.down ) distance = -this.speed * delta;  //向後
     if( distance ){
        var velocity = new THREE.Vector3(0, 0, distance);
        var matrix = new THREE.Matrix4()
                         .makeRotationY(object3d.rotation.y);
        velocity.applyMatrix4( matrix );
        object3d.position.add(velocity);
     }
  }
}

於是乎，查了一下mrdoob給的three.js library

• Vector3( x, y, z )這就只是個向量
• Matrix4，其實是指一個4 x 4 的矩陣

現在我們在回來看一次上面的code吧

紅色框框裡的那幾行都只是為了產生我要移動到的"位置"  ，也就是下面這條

• object3d.position.add(velocity);

剛剛無聊把裡面的code改成3倍速，結果看起來會有殘影的效果 XD

• if( input.up ) distance = +3*this.speed * delta;  //向前
• if( input.down ) distance= -3*this.speed * delta;  //向後

測試了幾種寫法，想到剛剛開給Bosh看各種效果時，舊文裡頭

threex-master\src\threex.godrays\examples，它的雷射光就是固定路徑巡迴

而我遊戲戰鬥中的設計，應該是走上前攻擊，在原路徑回來，換句話說我該去改變我camera的視角，camera在斜上方，由上往下側拍，紀錄戰鬥畫面

恩....看來該去研究一下threex-master\src\threex.godrays裡的code，看看他是怎麼寫的，以及如何在一個畫面放入兩個東西，圓環與雷射光

20141015 今日學習

讀了一篇好文章

• 最美的愛，是讓你從自己身上發現愛 | 女人迷 womany 

讀了另一篇創業的文章，男性時尚穿搭

• 還在為經營網站苦手？Famousoutfits 教你用 30 天突破 30 萬瀏覽量！ | TechOrange

接續昨天的工作，讓blogger裡的程式碼漂亮些，找到一篇不錯的整理文章

• 在網頁中嵌入顯示程式碼：全系列效果比較及教學整理 @ 符碼記憶
• 稍微瀏覽一下後，我覺得我比較喜歡Pastie的作法

各種鑲嵌程式碼的測試

1. Pastie

(程式碼放置處)

• 缺點，在blogger的編輯模式、預覽模式都看不到code，這點我不太喜歡
• 要複製code時會把第幾行也複製進去

2. CSS Block

var bodyAnims = new THREEx.MinecraftCharBodyAnimations(character); updateFcts.push(function(delta, now){
   bodyAnims.update(delta, now)
 })
var switchBodyValue = function(value){
 bodyAnims.start(value)
 }

• 可以在編輯時看到我的code，但是code的排版會跑掉很難搞很麻煩 =..=

試了上面兩個後，估狗發現另一個在blogger弄程式碼的東西Gist

• GitHub Gist 在部落格、網頁中內嵌入高亮程式碼 – 香腸炒魷魚

• 經測試後，它可以在預覽模式看到code，恩....有比較好一點
• 不過一樣在編輯模式看不到code，很容易不小心就刪掉它 =..=

剛剛想到一個方法，如下面所示，要弄code時就用分隔線隔開，把code放在裡面

示意：

-----

code block

-----

用Gist實際操作：

-----

-----

• 如此一來就不用擔心刪到code

3. Highlight

• 把軟體安裝完後，進入發現一次要弄一整個檔案，我就不想用這軟體了...

4. google-code-prettify

• 研發筆記: 使用 Google Code Prettify 顯示程式碼    (我用此教學)
• 在 Blogger 文章中利用 CSS Block 及 Google Code Prettify 顯示程式碼
• 程式設計雜筆: 用 google-code-prettify 在網頁中嵌入代碼

格式：

<pre class="codeblock prettyprint">

程式碼

</pre>

測試：

var bodyAnims = new THREEx.MinecraftCharBodyAnimations(character);
updateFcts.push(function(delta, now){
  bodyAnims.update(delta, now) 
 })
var switchBodyValue = function(value){
  bodyAnims.start(value)
 }

• 就決定用這個了，排版也不會跑掉，輕鬆方便快速多了  ^_^

用完後想測試一下能不能加註解：

var bodyAnims = new THREEx.MinecraftCharBodyAnimations(character);
updateFcts.push(function(delta, now){
  bodyAnims.update(delta, now) 
 })
var switchBodyValue = function(value){   //安安你好，我是註解
  bodyAnims.start(value)
 }

• 結果是可行的，感到非常愉悅

最後總結一下：

在google-code-prettify的部分我是用這教學

• 研發筆記: 使用 Google Code Prettify 顯示程式碼

但是老實說我不喜歡它顯示的codeblock，所以我改用原本的CSS block裡的格式

• [教學] 如何在 Blogger 文章裡顯示程式碼？ @ ChaoFree免費軟體下載中心

明日工作：

先寫一則網誌來紀錄今天學到的吧，難得的教學文 XD

20141014 今日學習

讀了一篇好文章

• [分享] 研究所與研究生的意義 - 看板 graduate - 批踢踢實業坊

回到家看到台大電機週做的東西，好強喔!!!點進去後發現可以用臉書帳號，這讓我想到下學期為訊號課製作的遊戲可以加入臉書帳號的功能

• EE Week 2014

閱讀昨晚找到的資料，學習了一些新東西，紀錄在昨天的筆記裡：20141013 今日學習

看了一下日誌，晚上要撥空了解一下JavaScript裡forEach()與bind()的用法

該準備來player.html裡，加入控制鍵'U'，啟動'right punch'

開始撰寫，不過無法仿造如下的coding方式

var input = player.controls.input
if( event.keyCode === 'W'.charCodeAt(0) ) input.up = true

因為我所需要的並不是一個按鈕一個動作的，我需要的是一個按鈕一連串動作，所以該參考animation.html裡的，在browser頁面上顯示一個按鈕，按下按鈕後啟動動作，他是如何觸發的，然後改寫成按按鈕與頁面的按鈕。

觀察一下他的寫法都是在<div></div>裡面寫入下面這行的寫法

• <button onclick='switchBodyValue(this.innerText);'>stand</button>

OK，那麼switchBodyValue()這是什麼???

透過WebStorm的查詢，switchBodyValue()定義在下面的load Character裡面，稍微研讀一下後覺得，直接寫一個按鈕在player.html裡會比用鍵盤觸發事件好寫多了

在animation.html裡，寫了兩個function：switchHeadValue()與switchBodyValue()，code如下

var bodyAnims = new THREEx.MinecraftCharBodyAnimations(character);
updateFcts.push(function(delta, now){
  bodyAnims.update(delta, now) 
 })
var switchBodyValue = function(value){
  bodyAnims.start(value)
 }

在animation.html上面的<div></div>裡已經定義了如下的button，下面的stand就是上面的bodyAnims.start(value)，所傳入的value，裡面的value，決定你要做什麼動作，像是: walk、jump...etc

• <button onclick='switchBodyValue(this.innerText);'>stand</button>

在threex.minecraftcharbodyanim.js裡，我已經定義了'right punch'的動作，現在可以一樣畫狐狸，在player.html裡做一個button來run我的'right punch'

剛剛在寫code時，發現threex.minecraftcharbodyanim.js最下面也有定義個'rightPunch'，恩.....很好，不能用這名字了，於是我估狗一下金臂勾的英文：clothesline，就改用它吧!!!


另外備份一下各種摔角招式的英文名字

• [摔角字典]摔角招式的中英文 @ 聯合翻譯有限公司/聯合翻譯社 :: 痞客邦 PIXNET 

參考animation.html改寫player.html時，又發現個小趣聞，回頭看上面的code

• bodyAnims.start(value)

這裡的start()，這function是定義在threex.animations.js裡面，剛剛看了一下player.html，也有引用threex.animations.js，所以就放心用吧 ^_^

測試過在player.character.loadWellKnownSkin('3djesus')之後加入player.start('yes');

• 失敗

尚未查明原因，改用animation.html測試clothesline，也失敗，開始參考threex.minecraftcharbodyanim.js裡面定義的'rightPunch'

另外去查了一下在Sublime Text 2裡，註解的快捷鍵

• Sublime Text 基礎熱鍵表 | Camdemy

按住 Ctrl 再按 / ，要消除註解也是同樣的按法

在threex.minecraftcharbodyanim.js裡面測試後發現

• armRRotationY : +Math.PI/10,  

這一行沒有發生作用，fail，看了一下animation.html裡的動作，決定先來研究一下'wave'與'hiwave'的cdoe

剛剛測試時發現一個有趣的東西，如果我的code打如下兩種寫法

第一種：  (失敗)

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {

  armLRotationZ : 0,
  armRRotationZ : Math.PI+2*Math.PI/5,

}).pushKeyframe(0.3, {

  armLRotationZ : 0,
  //armRRotationZ : Math.PI+Math.PI/10,   (這行用註解，不會run)

}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

第二種：(成功)

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, { 
 armLRotationZ : 0,
 armRRotationZ : Math.PI+2*Math.PI/5,

}).pushKeyframe(0.3, {

  armLRotationZ : 0,
  armRRotationZ : Math.PI+Math.PI/10,   //(這行未用註解，程式終於可以run)  

}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

經過這樣的概念，去修改code，成功做到手臂Y軸旋轉，雖然效果不是我想要的 XD

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {  armRRotationY : Math.PI+2*Math.PI/5  
}).pushKeyframe(0.3, {
  armRRotationY : Math.PI+Math.PI/5  
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

不過已經有進展了，明天再繼續構思手臂的動作 ^_^

明日開始

研究怎麼讓blogger裡面code的排版變好看，實在醜到我快受不了了