Advanced JS Chapter 3

JavaScript撰寫模式：
http://shichuan.github.io/javascript-patterns/

fs函式官方文件：
http://nodejs.org/api/fs.html

main.js (高亮為讀檔部分)

var fs = require("fs");

var multiplication_table = function() {
    var i = 0, j = 0, output = "";
    for(i=1;i<=9;i++) {
        for(j=1;j<=9;j++) {
            output += j + "*" + i + "=" + j*i + ((j==9)?"":"\t");
        }
        output += ((i==9)?"":"\r\n");
    }
    return output;
};

var data = multiplication_table();

//Method A
fs.writeFile("tableA.txt", data, function (err) {
    if(err) throw err;
    console.log("A Write done.");
    
    fs.readFile("tableA.txt", "utf8", function (err, utf8Read) {
        if(err) throw err;
        console.log(utf8Read);
        console.log("A Read done.");
    });
});

//Method B
fs.open("tableB.txt", "w", 0644, function(err, fd) {
    if(err) throw err;
    fs.write(fd, data, 0, "utf8", function(err) {
        if(err) throw err;
        fs.closeSync(fd);
        console.log("B Write done.");
        
        fs.stat("tableB.txt", function(err, stats) {
            fs.open("tableB.txt", "r", function(error, fd) {
                var buffer = new Buffer(stats.size);
                fs.read(fd, buffer, 0, buffer.length, null, function(error, bytesRead, buffer) {
                    var utf8Read = buffer.toString("utf8", 0, buffer.length);
                    console.log(utf8Read);
                    fs.close(fd);
                    console.log("B Read done.");
                });
            });
        });
    });
});

輸出結果：

B Write done.
A Write done.
1*1=1   2*1=2   3*1=3   4*1=4   5*1=5   6*1=6   7*1=7   8*1=8   9*1=9
1*2=2   2*2=4   3*2=6   4*2=8   5*2=10  6*2=12  7*2=14  8*2=16  9*2=18
1*3=3   2*3=6   3*3=9   4*3=12  5*3=15  6*3=18  7*3=21  8*3=24  9*3=27
1*4=4   2*4=8   3*4=12  4*4=16  5*4=20  6*4=24  7*4=28  8*4=32  9*4=36
1*5=5   2*5=10  3*5=15  4*5=20  5*5=25  6*5=30  7*5=35  8*5=40  9*5=45
1*6=6   2*6=12  3*6=18  4*6=24  5*6=30  6*6=36  7*6=42  8*6=48  9*6=54
1*7=7   2*7=14  3*7=21  4*7=28  5*7=35  6*7=42  7*7=49  8*7=56  9*7=63
1*8=8   2*8=16  3*8=24  4*8=32  5*8=40  6*8=48  7*8=56  8*8=64  9*8=72
1*9=9   2*9=18  3*9=27  4*9=36  5*9=45  6*9=54  7*9=63  8*9=72  9*9=81
B Read done.
1*1=1   2*1=2   3*1=3   4*1=4   5*1=5   6*1=6   7*1=7   8*1=8   9*1=9
1*2=2   2*2=4   3*2=6   4*2=8   5*2=10  6*2=12  7*2=14  8*2=16  9*2=18
1*3=3   2*3=6   3*3=9   4*3=12  5*3=15  6*3=18  7*3=21  8*3=24  9*3=27
1*4=4   2*4=8   3*4=12  4*4=16  5*4=20  6*4=24  7*4=28  8*4=32  9*4=36
1*5=5   2*5=10  3*5=15  4*5=20  5*5=25  6*5=30  7*5=35  8*5=40  9*5=45
1*6=6   2*6=12  3*6=18  4*6=24  5*6=30  6*6=36  7*6=42  8*6=48  9*6=54
1*7=7   2*7=14  3*7=21  4*7=28  5*7=35  6*7=42  7*7=49  8*7=56  9*7=63
1*8=8   2*8=16  3*8=24  4*8=32  5*8=40  6*8=48  7*8=56  8*8=64  9*8=72
1*9=9   2*9=18  3*9=27  4*9=36  5*9=45  6*9=54  7*9=63  8*9=72  9*9=81
A Read done.

Hint：由於JS為事件導向，可能因Method B處理速度較快而造成Method A的結果較晚輸出。

學習步驟：
1. 學習如何使用fs寫檔及讀檔。
2. 學習JSON結構及應用。

作業3：
1. 利用讀檔寫檔設計一個可編輯公告內容的網站。

Advanced JS Chapter 2

Form的種類：
http://codeboxy.blogspot.com/2011/07/html-form.html

開放源Node.js中文電子書：
https://github.com/nodejs-tw/nodejs-wiki-book

動態GET、POST函式：
http://codeboxy.blogspot.com/2014/01/dynamic-post-with-iframe.html

main.js:

var express = require("./node_modules/express"),
    url = require("url");
var app = express();
var port = 1337;

app.listen(port);

app.use('/', express.static(__dirname + '/'));

app.get("/", function(req, res) {
    res.send("Hello World!!");
});

app.post("/getdata", function(req, res) {
    var urlData = url.parse(req.url, true);
    console.log(urlData.query.t1);
    res.send("你的名字是: " +urlData.query.t1);
});

console.log("Start express server");

學習步驟：
1. 首先學習如何統一網頁的樣式表。
2. 了解JavaScript事件導向概念。
3. 了解網頁具有讀取順序的概念，若物件不存在則JavaScript無法取得物件。
4. 看Node.js中文電子書。

作業2：
1. 延伸自我介紹的網站，設計一個表單，可以提供客戶輸入資料，並傳回發送成功的訊息。

Advanced JS Chapter 1

記事本編輯器：
http://qqboxy.blogspot.com/2010/06/emeditor-6004.html

Node.js官方網站：
http://nodejs.org/

Node.js架設教學：
http://qqboxy.blogspot.com/2013/07/portable-nodejsnpmexpress-windows.html

Express官方網站：
http://expressjs.com/

w3school教學網站：
http://www.w3schools.com/

main.js:

var express = require("./node_modules/express");
var app = express();
var port = 1337;
app.listen(port);

app.use('/', express.static(__dirname + '/'));

app.get('/', function(req, res) {
    res.send("Hello World!!");
});

console.log("Start express server");

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW"><!--標籤--><!--屬性-->
<head><!--元素-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
</head>
<body>
<script type="text/javascript"></script>
<h1>My First Page.</h1>
</body>
</html>

學習步驟：
1. 首先了解如何配置一個Node.js伺服器。
2. 在伺服器執行一個js腳本。
3. 學習簡單的html架構。
4. 了解如何在伺服器上連結html檔案。
5. 看w3school網站HTML語法教學。

作業1：
1. 設計一個自我介紹的網站，具備多個分頁標籤，能夠超連結進入各個頁面。