nodejs-03 讀取靜態html、fs組件


Ercrta 嵐
server端的主程式：index.js var fs = require('fs');
var http=require('http');
http.createServer(function(req, res) {
fs.readFile('index.html', function(err, data) {
if(err) {
res.writeHead(200);
res.end('no index.html');
} else {
res.writeHead(200);
res.end(data);
}
});
}).listen(8888);
 解說
var fs = require('fs');//使用fs模組，開啟檔案相關用的
fs.readFile('index.html', function(err, data) { //讀檔，err:錯誤；data:讀得的檔案
res.writeHead(200); //我看網路上寫500，會顯示'找不到網頁'，我想要顯示只自己的文字，所以改成200
res.end(data);//顯示index.html的檔案
靜態網頁：index.html
只要是html檔，內容隨意
Category: 0 意見

nodejs-02 在網頁顯示hello~、關於 require('http')、callback


Ercrta 嵐
callback的觀念參考：http://www.nodebeginner.org/index-zh-tw.html
server端的主程式：index.js var http=require('http');
http.createServer(function(req,res){
console.log("http request running...");
res.writeHead(200,{"Content-Type":"text/plain"});
res.end('hello~~');
}).listen(8888);
console.log("index.js running...");
 在chrome或ie上執行http://localhost:8888/或127.0.0.1:8888，觀察執行結果

解說：
var http=require('http'); //載入http模組，nodejs內建，類似php的include、as的import
http.createServer(function(req,res){ //req：HTTP request的所有資料；res：HTTP response的所有資料
console.log("http request running...");//當有連線需求時，便會執行
res.writeHead(200,{"Content-Type":"text/plain"});//HTTP標頭檔狀態碼，200是指成功
res.end('hello~~');//在網頁端顯示hello~
}).listen(8888);//監聽8888port
console.log("index.js running...");//server執行成功時執行

關於HTTP標頭檔的狀態碼：
中文參考網址http://thobian.info/?p=318
英文詳細狀態碼http://en.wikipedia.org/wiki/List_of_HTTP_status_codes
200 用來表示請求成功.
300 來表示重定向.
400 用來表示請求出現問題.
500 用來表示伺服器出現問題.

[[2015-05-24補充 同步與非同步]]
1.建立一個文字檔，存成file.txt，內容為This is my file....
2. 非同步
2.1建立readfile.js，內容為：

var fs=require('fs');
fs.readFile('file.txt','utf-8',function(err,data){
if(err){
console.error(err);
}else{
console.log(data);
}
});
console.log('end');

2.2執行結果為：
end
This is my file....

3.同步
3.1建立readfilesync.js，內容為：
var fs=require('fs');
var data=fs.readFileSync('file.txt','utf-8');
console.log(data);
console.log('end');

3.2執行結果為：
end
This is my file....

4.會發現readfile.js跟readfilesync.js產生的結果順序不同，書上提到並非所有的api都提供同步跟非同步的版本，node.js並不推同步I/O
Category: 0 意見

nodejs-01 hello~


Ercrta 嵐
1.第一支NodeJS程式檔
1.1用文字檔建立一支hello.js檔，內容為 console.log('Hello');
1.2執行Node.js command promot後，使用cd 指令進入檔案所在目錄
1.3輸入node hello.js 出現Hello
1.4關於console
console是Node.js提供的主控台物件
console.log是最常用的輸出指令，類似C語言的printf、php的echo
1.5關於Node.js command promot的node指令
1.5.1執行Node.js command promot後，輸入node --help 會顯示關於node指令的用法：

node [options] [ -e script | script.js ] [arguments]
node debug script.js [arguments]

裡面看到[ -e script | script.js ] 表示這裡可以輸入"-e script"或者是"js檔名"
-e script的用法，參nodejs-00 前言的2.2跟2.3
js檔名的用法，就是本章上面的1.3

2.介紹REPL(Real-eval-print loop)模式
2.1所謂REPL，就是"輸入-求值-輸出"的迴圈，方便測試模組用
2.2參nodejs-00 前言的 3.測試是否安裝成功(使用 Node.js)

3.建立HTTP伺服器
3.1建立app.js，內容為
var http=require('http');
http.createServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/html'});
res.write('Node.js');
res.end('Hello
');
}).listen(3000);
console.log("HTTP server is listener at port 3000");

3.2執行Node.js command promot後，使用cd 指令進入檔案所在目錄，執行app.js，出現 HTTP server is listener at port 3000，表示伺服器運作正常
3.3開啟瀏覽器，網址輸入http://localhost:3000/，便會顯示頁面
3.4發現它不會像1.的範例hello.js一樣執行後會立即退出，要按Ctrl+C才會結束，因為這建立了事件監事器，使得nodejs不會退出事件迴圈

4使用supervisor快速開發
4.1修改app.js裡html的內容後，再重新整理瀏覽器，會發現內容沒改變，一定要終止Node.js command promot後，再重新執行才有效，這是因為nodejs只有第一次執行才會解析script，之後都存取記憶體，這種方式效能較高，但開發階段麻煩，因此使用supervisor套件來幫助
4.2執行Node.js command promot，輸入npm install -g supervisor
(套件安裝說明參考 nodejs-05 安裝套件-supervisor)
Category: 0 意見

nodejs-00 前言


Ercrta 嵐
關於nodejs，本來想寫很詳細，安裝步驟、每一行程式的意義，但…認真寫下去的話，不知道要寫到何時，網路上也已經滿多資料的了，所以...就只留下別人寫好的連結，方便自己查詢用
基本概念
http://mitblog.pixnet.net/blog/post/37525108
安裝並執行第一個程式
http://mitblog.pixnet.net/blog/post/37599366


[2015-05-23]新增自己安裝步驟筆記
1.安裝NodeJS(Windows版)
進入 https://nodejs.org/，點Install，下載msi檔，一直按"Next"安裝

2.測試是否安裝成功(使用 Node.js command promot)
2.1執行Node.js command promot

2.2輸入 node -e "console.log('Hello');" 出現 Hello
2.3輸入 node -e "console.log(3+5);" 出現 8

3.測試是否安裝成功(使用 Node.js)
3.1執行Node.js
3.2輸入 'Hello' 出現 'Hello'
3.3輸入 3+5 出現 8


4.安裝nvm(多版本管理員)
略(書本 p.2-9~2-13 因提到它不支援windows，先跳過)
Category: 0 意見

Away3D-01


Ercrta 嵐
最近在學習Away3D，雖然覺得目前用到的機會不大，但玩玩也好~~^^

下載Away3D
 Away3D 官網：http://away3d.com/
先進入Away3D的官網，點Download後，進入Download頁面，會看到下面的內容：
 Flash Version: Flash 11 or newer //目前最新的版本Away3D4.0，需要Flash player 11以上的版本才可正常執行
Source files: Download //點擊下載相關的AS檔案
SWC File: Download //SWC是把相關的AS包成一個SWC檔，不想下載後看到一堆AS的人，可以載SWC
 Example source: Download **//官網的範例檔，載下後執行，就可看到一些做好的範例，還滿精彩的 

安裝FlashDevelop
建議安裝FlashDevelop-4.0.1以上版本，它會自動裝好Flash player11和相關的SDK，不需要做太多的設定

第一個程式：

//View=>3D場景
package {
    import flash.display.Sprite;
    import flash.events.Event;
    import away3d.containers.View3D;
    
    public class Away3D_0101 extends Sprite {
        private var view:View3D;
        public function Away3D_0101():void {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        
        private function init(e:Event = null):void {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            view = new View3D();   
            view.antiAlias = 4;        

            addChild(view);            
            addEventListener(Event.ENTER_FRAME, function(e:Event):void { 
                view.render();
            } );
            
        }    
    }
}

view = new View3D(); //建立3D場景
view.antiAlias = 4; //抗鋸齒(4.0.0新屬性)//0，2，4和16是有效的設值，值愈高愈平滑，預設是0
//view.x = stage.stageWidth/2; // 消失點-x
//view.y = stage.stageHeight/2; // 消失點-y
addChild(view); //將3D場景加入場景中
Category: 0 意見

XML相關文參考網址


Ercrta 嵐
xml手冊 http://por.tw/Website_Design/PHP5/ref.dom.html
xpath教學 http://mi.hosp.ncku.edu.tw/km/index.php/dotnet/48-netdisk/57-xml-xpath
xPath手冊 http://www.w3school.com.cn/xpath/xpath_syntax.asp

最近都在用php抓xml資料，稍微整理一後發現，原來PHP跟AS3的語法差這麼多，寫了PHP就忘了AS3；寫了AS3就忘了PHP...，不知道JS又是什麼語法@@"

簡單的抓節點練習(PHP)：

<?
$xml_str="<?xml version='1.0' encoding='UTF-8'?><root attr='rootAttr'><A attr1='attrVal1' attr2='attrVal2'>aa</A><B attr='attrB'>bb</B></root>";
$doc = DOMDocument::loadXML($xml_str); //載入xml字串
//抓節點
echo $doc->documentElement->nodeName."<BR>";//根節點節點名稱
echo $doc->documentElement->firstChild->nodeName."<BR>";//根節點下第一個node的nodeName
echo $doc->documentElement->firstChild->textContent."<BR>";//根節點下第一個node的內容
$nl= $doc->documentElement->childNodes;//根節點下所有的子節點列表
foreach($nl as $k =>$v){//根節點下所有的子節點的nodeName
    echo $v->nodeName."<BR>";
}

echo $doc->documentElement->childNodes->item(0)->nodeName."<BR>";//根節點下第一個node的nodeName

//抓屬性
echo $doc->documentElement->getAttribute("attr")."<BR>";//根節點的attr屬性值

$al=$doc->documentElement->firstChild->attributes;
foreach($al as $k =>$v){//根節點下第一個node的所有屬性
    echo $k.",".$v->textContent."<BR>";
}
?>


簡單的抓節點練習(AS3)：

var str:String = "<?xml version='1.0' encoding='UTF-8'?><root attr='rootAttr'><A attr1='attrVal1' attr2='attrVal2'>aa</A><B attr='attrB'>bb</B></root>";
var xml:XML = XML(str);
//抓節點
trace(xml.name());//根節點節點名稱
trace(xml.children()[0].name());//根節點下第一個node的nodeName
trace(xml.children()[0].text());//根節點下第一個node的內容
var nl:XMLList = xml.children();//根節點下所有的子節點列表
for (var i:Object in nl) {//根節點下所有的子節點的nodeName
   trace(nl[i].name());
}
//抓屬性
trace(xml.@attr);//根節點的attr屬性值
var al:XMLList = xml.children()[0].attributes();
for (var j:Object in al) {//根節點下所有的子節點的nodeName
   trace(al[j].name()+","+al[j]);
}
Category: , , 0 意見

AdvancED Game Design with Flash-1-1


Ercrta 嵐
p.42
Verlet integration:高度可靠的遊戲物理系統
MVC(Model-View-Controller):把物件分成三個部份的設計模式

p.44 Euler integration vs. Verlet integration




function get vx():Number{
return posX-prevX;
}
function set vx(value:Number):void{
prevX=posX-value;
}
function set setX(value:Number):void{
prevX=value-vx;
posX=value;
}

範例下載

p.63

Model:所有資料的集合，包含加速度、速度、旋轉速度、角度和一些不可視的資訊,調度改變時，資料的變化。
View:所有在場景上可看到的東西，依Model的指令而改變場景上的東西。
Controller:所有邏輯層面，執行使用者的輸入
Category: 0 意見
訂閱： 文章 (Atom)