var app = new Vue({
    el:"#app",
    data:{
        //...
    },
    methods:{
        enterOne: function(){
            //... 對應使用者按下 "1" 數字鍵的函數
        },
        clickPlus: function(){
            //... 對應使用者按下 "+" 運算鍵的函數
        }
    }
})

var app = new Vue({
    el:"#app",
    data:{
        currentValue: 0
        // 先設定一個初始值來接數字鍵輸入的數值，"現有值"
    },
    methods:{
        enterOneNum: function(){
            this.currentValue = this.currentValue * 10 + 1;
        },
        // 數值型別做法：因計算機是十進位，先按 1 再按 2，預期是 12
        // 也就是"現有值"乘以 10，再加上該按鍵的數字
        enterOneString: function(){
            this.currentValue += "1";
        },
        // 字串型別做法：字串的加法，就是在現有值後方直接加上按鍵的字串
        // 不論現有值是 "1" 或 1，在加了 "2" 之後，都會變成 "12"
        
        clickPoint: function(){
            this.currentValue += ".";
        },
        // 使用字串型別讓小數點的輸入變得相當直覺
    }
})

var app = new Vue({
    el:"#app",
    data:{
        currentValue: 0,
        isDecimal: false,
    },
    methods:{
        enterZero: function(){
            this.currentValue += "0";
            if (this.isDecimal === false){
                this.currentValue = Number(this.currentValue);
            }
            // 對進入小數狀態的現有值，不轉回數字，才能順利輸入 1.01, 1.001
            // 但非小數狀態的現有值，則與其他數字輸入鍵相同，轉回數值型別
        },
        enterOne: function(){
            this.currentValue += "1";
            this.currentValue = Number(this.currentValue);
            // 非 0, 00 輸入鍵，現有值一律轉回數值型別儲存
        },
        
        clickPoint: function(){
            this.isDecimal = true;
            // 按下小數點，使得 isDecimal 轉為 true
            this.currentValue += ".";
        },
    }
})

var app = new Vue({
    el:"#app",
    data:{
        currentValue: 0,
        isDecimal: false,
        mathOperator: ""
        // 初始化先帶入空值
        previousValue: ""
        // 待運算的值
        resultValue: ""
        // 結果值
    },
    methods:{
        //...
        clickPlus: function(){
            this.previousValue = this.currentValue;
            this.currentValue = 0;
            // 歸零現有值
            this.mathOperator = "plus";
            this.isDecimal = false;
            // 讓新輸入的值有能也有小數點
        },
        clickEqual: function(){
            if(this.mathOperator === "plus"){
                this.resultValue = this.previousValue + this.currentValue;
            } else if (this.mathOperator === "minus"){
                this.resultValue = this.previousValue - this.currentValue;
            } else if (this.mathOperator === "multiply"){
                this.resultValue = this.previousValue * this.currentValue;
            } else if (this.mathOperator === "divide"){
                this.resultValue = this.previousValue / this.currenValue;
            }
            // 搭配 mathOperator 的判斷式，讓使用者按下等於時可以計算結果
        },
    }
})

var app = new Vue({
    el:"#app",
    computed:{
        showOperator: function(){
            if (this.mathOperator === "plus") {
                return "\u002B";
                // 當按下加運算符號時，回傳加號
            } else if (this.mathOperator === "minus") {
                return "\u2212";
                // 回傳減號
            } else if (this.mathOperator === "multiply") {
                return "\u00D7";
                // 回傳乘號
            } else if (this.mathOperator === "divide") {
                return "\u00F7";
                // 回傳除號
            } else {
                return "";
                // 初始狀態，回傳空字串
            }
        },
    },
})

var app = new Vue({
    el:"#app",
    data:{
        notResult: true,
        previousValue: "",
        currentValue: 0,
        mathOperator: "",
        equationText: "",
        resultValue: ""
    },
    computed:{
        equationDisplay: function(){
            if (this.notResult === true){
                // "運算態" (還在輸入兩個數字跟運算符號) 時，動態顯示在 .formula
                return (this.previousValue + " " + this.showOperator + " " + this.currentValue);
            } else {
                // 等號事件(clickEqual)最後會組成的字串，於"結果態"時顯示
                // 因最後會清空 previousValue, mathOperator，並讓 currentValue = resultValue
                // 所以先組成字串丟進去顯示
                return this.equationText;
            }
        },
        mainDisplay: function(){
            // 主顯示區，"運算態"時顯示 currentValue，"結果態"時顯示 resultValue
            if (this.notResult === true){
                return this.currentValue;
            } else {
                return this.resultValue;
            }
        },
        showOperator: function(){
            //...
        },
    },
})

var app = new Vue({
    el: "#app",
    data:{
        //...
    },
    methods:{
        clickBack: function(){
            // 將 currentValue 字串化
            let currentString = String(this.currentValue);
            // 依照字元組成陣列元素
            let currentStringArray = currentString.split("");
            // 清除最後一個陣列元素
            currentStringArray.pop();
            // 組回字串再轉回數字
            this.currentValue = Number(currentStringArray.join(""));
        },
        clickClean: function(){
            // 讓 data 的內容回歸初始設定
            this.currentValue = 0;
            this.isDecimal = false;
            this.previousValue = "";
            this.mathOperator = "";
            this.resultValue = "";
            this.notResult = true;
            this.equationText = "";            
        },
    }
})

var app = new Vue({
    el: "#app",
    data: {
        //...
    },
    computed:{
        // 使用 Vue 的 $refs 功能來抓取 DOM 元素
        mainDisplay: function(){
            //...
            let stringArray = String(this.currentValue).split("");
            // 超過 10 的數字就會破版
            if (stringArray.length > 10){
                this.$refs.result.style.fontSize = "1.5rem";
            } else {
                // 初始化的時候就去抓 this.$refs.result 會是 undefined，加上判斷式來避免這種情形
                if (this.$refs.result){
                    this.$refs.result.style.fontSize = "3.5rem"
                }
            }
            //...
        },
        // 使用原生的 JS 語法選取的做法如下
        mainDisplay: function(){
            //...
            const result = document.querySelector(".result");
            let stringArray = String(this.currentValue).split("");
            if (stringArray.length > 10){
                result.setAttribute("style", "font-size: 1.5rem");
            } else {
                result.setAttribute("style", "font-size: 3.5rem");
            }
        },
    },
})

// 會失敗的寫法 (元素選取在 Vue 實體外)
const result = document.querySelector(".result");
var app = new Vue({
    el: "#app",
    computed:{
        mainDisplay: function(){
            result.setAttribute("style","font-size: 1.5rem")
        }
    },
})

// 到達檔案的目錄路徑
console.log(__dirname);
// e.g. C:\Users\(User Name)\Desktop\Node.js Project

// 含有檔案的完整路徑
console.log(__filename);
// e.g. C:\Users\(User Name)\Desktop\Node.js Project\app.js

// 載入內建的 path 模組
var path = require("path");

// 抓取到檔案的目錄路徑
console.log(path.dirname("/firstFolder/secondFolder/thirdFolder/target.js"));
// firstFolder/secondFolder/thirdFolder

// 合併前後的兩個路徑，通常後者是更下一層的路徑
console.log(path.join(__dirname, "/xx/yy"));
// C:\Users\(User Name)\Desktop\Node.js Project\xx\yy

// 抓取檔案名稱
console.log(path.basename("/xx/yy/zz.js"));
// zz.js

// 抓副檔名
console.log(path.extname("/xx/yy/zz.js"));
// .js

// 路徑分析 (集大成！)
console.log(path.parse("/xx/yy/zz.js"));
// {root:"/", dir:"/xx/yy", base:"zz.js", ext:".js", name:"zz"}

global.addThis = "Hello!"
// 如果像瀏覽器一樣寫 var addThis = "Hello!"
// 則此變數會宣告在 local 下，而非全域共通

// 載入另一支位於同層的 JS 檔
var moduleTest = require('./moduleTest');
// 寫 moduleTest 即是代表去抓 moduleTest.js
// 若要抓上一層，使用 '../'

console.log(moduleTest); // {} 空物件

// 在 moduleTest.js 中，使用 module.exports，寫在物件中的內容就會被傳到 app.js 的 moduleTest 裡
var myVar = "Hello world."
module.exports = {
    strData: "example",
    numData: 12345,
    booleanData: true,
    varData: myVar,
    myGreet: function(name){
        console.log(name + ", how's it going?");
    },
}
// 各項 value 可以使用經前面程式處理過的變數
// module.exports = myExports;
// 傳出物除了上例使用的物件，也可是一支函數，一個純值等

// 另一種載入方式
exports.myExports = "hello";

// 此種寫法等同
module.exports = {
    myExports: "hello"
}

// 在 app.js 取用引入的各項資料
moduleTest.varData // "Hello world."
moduleTest.myGreet("Eugene") // "Eugene, how's it going?"

exports.myData = 666;
module.exports = {
    myData: 999
}
// myData 為 999，會蓋掉 666

// 引入 HTTP 模組
var http = require("http");

// 建立一個網頁伺服器
http.createServer(function(req, res){
    // ...
});

// 寫一個回應給客戶端
http.createServer(function(req, res){
    // 顯示請求的 URL
    console.log(req.url);
    // 回應的檔頭 1. 狀態碼 (200, OK) 2. 回傳的格式為普通文字
    res.writeHead(200, {"Content-Type": "text/plain"});
    // 回應的主要內容，此處為字串 "Hello!"
    res.write("Hello!");
    // 結束回應
    res.end();
}).listen(8080); // 使用 8080 的連接埠

http.createServer(function(req, res){
    res.writeHead(200, {"Content-Type": "text/html"});
    res.write("<h2>Hello world.</h2><p>This is the main content.</p>");
    res.end();
}).listen(8080);

var express = require('express');
var app = express();

// 不設路徑參數，代表對全網域都作用
app.use(express.json());

// 在主要的 app.js 中，把同一父路徑下的子路徑拆分到新檔案管理 (分層)
// app.js 與 routes 在同一資料夾下
var news = require("./routes/news");
// 遇到要進 "/news" 路徑下的請求，跑伺服器上 "./routes/news.js" 的內容
app.use("/news", news);

// 以下寫在 news.js 內
// 建立環境
var express = require("express");
var router = express.Router();

// 設定各項子路徑的回應
router.get("/breaking", function(req, res){
    res.send("<h2>Latest news you should know.</h2>");
});
router.get("/international", function(req, res){
    res.send("<h2>What's new around the world?</h2>");
});

// 最後，匯出這兩個回應設定
module.exports = router;

// 圖片、給 ejs 載入的 <script scr="/js/all.js"> 等靜態檔案
// public 下可再開設 img, js 等資料夾
app.use(express.static("public"));

// 不設路徑參數，代表對全網域作用
app.use(express.urlencoded({extended: false}));

// 註冊 ejs 引擎
var engine = require("ejs-locals");
app.engine("ejs", engine);
app.set("views", "./views");
app.set("view engine", "ejs");

// 以 views 下的 product.ejs 檔案回應客戶端對 domain/product 的請求
app.get("/product", function(req, res){
    res.render("product")
})

// 帶入物件給 ejs 檔使用
app.get("/index", function(req, res){
    res.render("index", {
        name: "Tina",
        age: 31,
        gender: "female",
        family: "<em>Chen</em>"
        isQualified: true,
        interest:["hands", "jogging", "shopping"]
    })
})

app.get('/', function(req, res){
    res.send('GET request to homepage success!');
})

var express = require('express');
var app = express();
// app.listen(3000); 在自己可控制的主機上可以寫死

// 若無預設的 port 則使用 3000
var port = process.env.PORT || 3000;
app.listen(port);

app.post('/', function (req, res) {
  res.send('POST request to homepage')
})

// 一般應用
app.set('title', 'My Site');
app.get('title') // 'My Site'

// 設定 ejs 模板引擎，兩個皆為 Express 保留的控制用字
app.set("views", "./views");
app.set("view engine", "ejs");

// 不設定路徑，即對每個進入該網域的客戶請求都執行下列 callback
app.use(function(req, res, next){
    console.log("Time: %d", Date.now());
    // 進入後續程式碼
    next();
})

// 解析 application/json 資料 
app.use(express.json())
// 解析 application/x-www-form-urlencoded 資料
app.use(express.urlencoded({ extended: true }))

// 接收對 "/profile" 提出的 POST 請求，查看客戶端送出的資料，並以 JSON 格式回應
app.post("/profile", function (req, res, next) {
  console.log(req.body)
  res.json(req.body)
})

// 可支援轉向到其他網域
res.redirect("https://google.com")

// 支援從根路徑出發的相對路徑寫法
res.redirect("/admin") // 導向到 http://example.com/admin

// 支援從現有網址出發的相對路徑寫法
// 現在網址：http://example.com/blog/admin/ (注意此處結尾有斜線)
res.redirect("post/new") // 導向到 http://example.com/blog/admin/post/new
// 若結尾無斜線：http://example.com/blog/admin
// 則會導到 http://example.com/blog/post/new

// 回到上一層
// 現在網址：http://example.com/admin/post/new
res.redirect("..") // http://example.com/admin/post

// 回到上一頁 (back to the referer)
res.redirect('back')

// 傳送已渲染的 view 給客戶端
res.render('index')

// 傳送本地變數給 view 的檔案使用
res.render('user', { name: 'Tobi' }, function (err, html) {
    // ...
})

res.send(Buffer.from('whoop'));
// 當參數為物件或是陣列時，回應會使用 JSON 呈現
res.send({ some: 'json' });
// 當參數為字串時，"Content-Type" 會被設成 "text/html"
res.send('<p>some html</p>');
// 與狀態碼進行鏈式寫法
res.status(404).send('Sorry, we cannot find that!');
res.status(500).send({ error: 'something blew up' });

// 針對全網域的 404 錯誤的回應
app.use(function(req, res){
    res.status(404).send("<h2>抱歉，找不到您要的頁面</h2>")
})
// 針對全網域的 500 (伺服器程式錯誤，Internal Server Error) 的回應
app.use(function(req, res){
    res.status(500).send("<h2>伺服器程式出現問題，請稍後再試</h2>")
})
// 官方範例
res.status(403).end()
res.status(400).send('Bad Request')
res.status(404).sendFile('/absolute/path/to/404.png')

// 宣告一個中介層函式 myLogger
// 在通過此中介層後，console 會印出 "Logged!"
var myLogger = function(req, res, next){
    console.log("Logged!");
    next();
};

// 在 req 物件下新增一個 reqTime 屬性，記錄 timestamp
var reqTime = function(req, res, next){
    req.reqTime = Date.now();
    next();
};
app.use(reqTime);
app.get('/', function(req, res){
    var resText = "Hello, guest!";
    resText += "Requested at: " + req.reqTime + "";
    res.send(resText);
});
app.listen(3000);

let dataArray = [
    {name: "cityA", background: "bg-primary"}, 
    {name: "cityB", background: "bg-seconday"}, 
    {name: "cityC", background: "bg-info"},
]

let htmlStr = "";
for (let i = 0; i < newCities.length; i++) {
    if (i % 3 == 0) {
        // 除 3 的餘數為零時，加 .row 的起始標籤
        htmlStr += `<div class="row mt-md-3">`;
    }
    htmlStr += `
            <div class="col-md">
                <div class="timebox">
                </div>
            </div>`;
    // 除 3 的餘數為 2 時，或是最後一個地區時，加上 .row 的關閉標籤
    if (i % 3 == 2 || i == newCities.length - 1) {
      htmlStr += `</div>`;
    }
}
mainNode.innerHTML = htmlStr;

const date = new Date(); // 建立新的 Date 物件
date.getDate(); // 取得為該月幾號
date.getDay(); // 取得星期幾，回傳 0-6，0 為星期日
date.getMinutes(); // 取得幾分
date.getHours(); // 取得幾點鐘
date.getMonths(); // 取得月份，回傳 0-11，0 為一月
date.getFullYear(); // 取得公元紀年
date.getTime(); 
// ※ 取得自 1970/01/01 00:00:00 (UTC) 到當下的毫秒數
// 非常實用，因為是獨一無二的，常做為存取資料時的 unique ID 使用

let newCities = cities.map(function (cityObj) {
    let option = {
        day: "numeric", // "10"
        month: "short", // "01"
        year: "numeric", // "2020"
        hour: "2-digit", // "24"
        minute: "2-digit", // "59"
        hour12: false, // 24 時制
        timeZone: cityObj.timezone,
    }
    cityObj.date = new Date().toLocaleDateString("zh-TW", option);
    return cityObj;
});
// 對既有的 cities 陣列，使用 map() 方法，讓原陣列成員 (各城市物件) 取得當地的時間後，變成物件的新屬性 "timezone"，並建立一個新的陣列 newCities

function isNight(hour) {
  if (hour >= 6 && hour < 18) {
    return false;
  } else {
    return true;
  }
}
// ... 各城市的幾點鐘做為參數帶入判斷式
if (isNight(cityHour)) {
    rightDiv.parentNode.setAttribute("class", "timebox night");
} else {
    rightDiv.parentNode.setAttribute("class", "timebox");
}

const prefixStr = `
    <div class="titlebox d-flex direction-vertical space-between align-center"> // 預先定義的 css 樣式
        <div class="d-flex">
            <p>X&nbsp;&nbsp;</p> // 形成兩個空格
            <hr /> // 分割線
            <p>&nbsp;&nbsp;X</p>
        </div>
        <div class="main-title">
            <h3>九九乘法表</h3>
            <h4>MULTIPLICATION TABLE</h4>
        </div>
        <div class="d-flex">
            <p>X&nbsp;&nbsp;</p>
            <hr />
            <p>&nbsp;&nbsp;X</p>
        </div>
    </div>
`;

const divisionNum = 4;

for (let i = 2; i < 10; i++) {
    var leftStr = ``;
    var rightStr = ``;
    for (let j = 1; j < 10; j++) {
      if (j < divisionNum) {
        leftStr += `<p>${i} x ${j} = ${i * j}</p>`;
      } else {
        rightStr += `<p>${i} x ${j} = ${i * j}</p>`;
      }
    }
    //...每做完一個乘數(j)後，要另外加上起始的大數字(新的被乘數)
}

allBoxStr += `
<div class="numbox">
    <div class="left-sec">
        <h2>${i}</h2> // 起始的大數字
        ${leftStr} // 乘數小於 4 的區塊
    </div>
    <div class="right-sec">
        ${rightStr} // 乘數大於等於 4 ，小於 10 的區塊
    </div>
    <div class="clearfix"></div> // 清除浮動的設定
</div>
`;

$("#content").html(prefixStr + allBoxStr)