# 測試 google blockly 紀錄
### (2022/7/20)
* log time 19:30.

:::success
https://blocklycodelabs.dev/codelabs/getting-started/index.html#5

老實說這邊直接用到了CDN(?)，直接引用。
:::

* log time 19:47
:::info

'' 和 " " 搞死人了。
:::

* log 20:00
紀錄下workspace(s)，還有button的序列化

function loadWorkspace(button) {
    const workspace = Blockly.common.getWorkspace();
    if (button.blocklySave) {
      Blockly.serialization.workspaces.load(button.blocklySave, workspace);
    }
}

* log 20:39

##### :+1: 程式碼執行沒問題，要注意的部分還在於API。
---------------------------------------------
* 參考資料
https://blocklycodelabs.dev/codelabs/getting-started/index.html#8
* 範例(可是Blockly的東西還是得看API)
https://github.com/google/blockly-samples
---------------------------------------------

### 這邊是單純測試(2022/7/21)

// 在 cmd 輸入 
 npm init @vitejs/app my-vue-app --template vue

* 卡

### 2022/7/22
* log 09:30
:::info
嘗試語法ing
* 使用 object(prototype)
:::
* 這邊使用上述測試

// if download npm please ctrl + shift + ` in vscode 
// and enter node filename.js on your cmd
function testbox(leftcreate, rightcreate){
    this.leftcreate = leftcreate;
    this.rightcreate = rightcreate;
    this.test = null;
}

testbox.prototype.To_Test = function(test){
    this.test = test;
}

let abc_1 = new testbox('單純測試', '500');
abc_1.To_Test('這裡原本是null');

// console.log(abc_1);
console.log(abc_1.leftcreate);
console.log(abc_1.rightcreate);
console.log(abc_1.test);
console.log(abc_1.To_Test)

* 不可列舉

// if download npm please ctrl + shift + ` in vscode 
// and enter node filename.js on your cmd

let o = {x:1, y:2, z:3};
// 不可列舉
o.propertyIsEnumerable("toString");
for (let test in o) {
    console.log(test);
}

* 回應複製類

// if download npm please ctrl + shift + ` in vscode 
// and enter node filename.js on your cmd

let tar = {x : 1};
let test = {y : 2, z : 3};
let o = {...tar, ...test};
console.log(o)

let a = Object.assign({},test, tar);
console.log(a)

for(let p of Object.keys(test)){
    tar[p] = test[p];
}
console.log(tar)

* ES5 ES6 在小地方省略了 function

let area = {
    wid() {return this.height * this.height;},
    height: 50
}

console.log(area.wid())

* 以下箭頭函式...
* log 10:14

// 無引數
(
    function(test) {
        console.log(100)
    }
)()

* 老實說不管第幾次看到都有點邪門

const a = (b, c) => {return b + c};
console.log(a(1, 23))
// 24

const a = (b, c) => b + c;
console.log(a(1, 23))
// 省略 return 好邪教啊....

* 堆疊

let test = {
    op1 : 1,
    op2 : 2,
     add(){
        this.ans = this.op1 + this.op2;
    }
}
test.add()
console.log(test.ans
// 3
// 可是覺得很奇怪，改成
const test = {
    op1 : 1,
    op2 : 2,
    add : () => {
        this.ans = this.op1 + this.op2
        return this.ans
    }
}
console.log(test.add())
// NaN
// 這樣出不來，有點小尷尬，估計是調用的問題。
// p.s. 12:22 (小睡)

* log 14:02(重啟)
* 回到繼續調用方針紀錄。

function toFindMaxNumber(fir = -Infinity, ...number){
    let maxNumber = fir;
    for(let n of number){
        if(n > maxNumber){
            maxNumber = n;
        }
    }
    return maxNumber;
}

let a = toFindMaxNumber(1, 580, -690, 100)

console.log(a)
// 主要是調用()，然後...的部分為數字的延伸。
// 這點可以注意一下，在調用json或資料庫的時候也能這樣整理。
// log 14:30(沒偷懶)，在思考參數和物件上的處理，信我。

* arguments 相對來說有點累贅了

function toFindMaxNumber(x){
    let maxValue = -Infinity;
    for (let i = 0; i < arguments.length; i++){
        if(arguments[i] > maxValue){
            maxValue = arguments[i];
        }
    }
    return maxValue;
}

let a = toFindMaxNumber(1, 580, -690, 100)

console.log(a)

* 陣列

function textList([x, y, ...args], ...rest) {
    return [x + y, ...args, ...rest];
}

let a = textList([1, 2, 3, 4], 5, 6)
console.log(a)

* log 17:21 剛從外面回來，晚餐去市場一趟，累，再寫點就休息。
* 離譜一點的用法。

const a = [x => x * 100, 50]
let b = a[0](a[1])
console.log(b)
// 簡單來說，傳遞的問題...
// 你a[0]是a[1] * 50，這個看的真的會頭痛。

* 這個東西就想成 Array.sort() 去理解，保證彈性極佳。

#### 閉包

(
    function test(){
        console.log("1111");
    }
)();

* 區域變數，全域變數問題

let test = (
    function(){
        let count = 0;
        return function(){
            return count++
        };
    }
());

console.log(test());
console.log(test());
// 0
// 1

* log 18:51 結束

### 2022/7/23 (剛起床)
* log 14:16
* 早上被抓去爬山.jpg
* 可以看看 getter setter

function tester(n){
    return{
        get test(){
            return n++;
        },
        set test(a){
            if (a > n) n = a;
            else throw Error("錯誤")
        }
    }
}
let c = tester(50);

console.log(c.test)
console.log(c.test)

c.test = 1000;

console.log(c.test)
console.log(c.test)

c.test = 1000
console.log(c.test)
// 50
// 51
// 1000
// 1001
// C:\Users\a9132\Desktop\測試\1.js:8
//             else throw Error("錯誤")
//                  ^

// Error: 錯誤

* log 14:55
* closures(閉包太複雜了)...

// 共享私有變數的存取權(當然也可以多個)
function test(a){
    return () => a;
}

let testfunc = []
for (let i = 0; i < 10; i++) testfunc[i] = test(i)

console.log(testfunc[6]())
// 6

* function 建構器

const a = new Function("x", "y", "return x + y;");
console.log(a(4, 10));

// 不過還是直接寫會比較方便許多
const b = function(x, y){return x + y};
console.log(b(4, 15));

// 繼續
const c = (a, b) => {return a + b};
console.log(c(10, 20))
// 最後還是回到了箭頭函式

* log 15:07 (休息一下，wait)
* log 15:57
* 高階函式看的頭痛

function test(k){
    return function(...args){
        let ans = k.apply(this, args);
        return !ans
    }
}

const even = x => x % 2 === 0;
const odd = test(even)
let a = [1, 3, 5, 7, 9]
console.log(a.every(odd))
// 完全沒理解，哭死。
// log 16:06 嘗試理解中

* log 16:11
* 直接跳了，bind, apply先跳過
* node 模組的引用與匯入匯出就不寫了，export, extend, import...

import {test, test_1, test_2} form "../../state.js"

const express = 
//....

* log 16:37
* 關於副程式，好複雜，看過一次頭暈腦脹。
* 再來非同步的部分，async await 可以用 python 的方式套入，不過還是有點小差別。
* regex正規化的部分就跟python差不了多少

* log 16:43
* 回去看看網頁的部分了。
* 寫了個玩意

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documents</title> 
    <style>
        .callout{
            border: 1px solid #ff0080;
            margin: 2px 4px;
            padding: 2px 6px;
        }
        .code{
            background: #ccc;
            margin: 1px 2px;
            padding: 1px 4px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <header>
        <h1>
            Simple
        </h1>
    </header>
    <div id="content">
        <p>簡單的HTML</p>
        <div class="callout">
            <p>callout的div</p>
        </div>
        <p>Classes (such as <span class = "code"> #content</span>) are unique</p>
        <p>Classes (such as <span class = "code"> #callout</span>) are unique</p>
        <div id="callout2" class = "callout fancy">
            <p>Sinle html</p>
        </div>
    </div>
</body>
</html>

function printDOM(node, prefix){
    console.log(prefix + node.nodeName);
    for(let i = 0; i < node.childNodes.length; i++){
        printDOM(node.childNodes[i], prefix + '\t')
    }
}
printDOM(document, '')

* f12主控台

* log 17:26 (休息)
* 本日有好幾個問題捏，promise, closure, 副程式啥的，其實副程式直覺理解就是直接呼叫

function test(a){
    function *(...arge){
        console.log('{}, {}, {...args}')
    }
}

test(function a[0, ...args])

* 理解的有點亂，上面的是隨便打的，看看就好
* log 17:28 吃晚餐。
* 本日結束

{%hackmd BJrTq20hE %}