Author: lioajimzen

RESTful API 是什麼?
圖片來源: https://itznihal.medium.com/api-rest-api-and-restful-api-7767d9997854

參考資料如下:
- https://tw.alphacamp.co/blog/rest-restful-api?gclid=CjwKCAjw9-6oBhBaEiwAHv1QvNrYIyfsJRxjXW7dv3h9mqu5q8V0Zz47AqtJFO_HP6N01ufCWITsUxoCfaAQAvD_BwE
- https://www.explainthis.io/zh-hant/swe/restful-api
- ChatGPT : https://chat.openai.com/
- https://hackmd.io/@monkenWu/Sk9Q5VoV4/https%3A%2F%2Fhackmd.io%2F%40gen6UjQISdy0QDN62cYPYQ%2FHJh9zOE7V?type=book
API 是什麼?

當我們談論API（應用程式編程界面）時，實際上在討論一種使不同軟體應用程式能夠互相通信和互動的機制。API遵循特定的規則和協議，使不同軟體系統能夠交換資訊、執行操作，而無需了解對方的內部運作細節。API是現代軟體開發中不可或缺的一部分，它使開發人員能夠輕鬆地訪問和使用其他軟體、服務或函式庫的功能。

*由ChatGPT潤稿

RESTful 是什麼?

RESTful（Representational State Transfer）。

它基於一系列原則和約定，確保API具有可伸縮性、簡單性、可理解性和可靠性。

RESTful API使用HTTP協議進行通信，將資源表示為唯一的URL，使用HTTP方法（如GET、POST、PUT、DELETE等）執行各種操作，資源的表示通常以通用的數據格式（最常見的是JSON或XML）進行傳輸。

RESTful設計風格的一些特點，這些特點有助於更深入了解它的運作方式：
1. 資源表示：每個資源都有唯一的URL，可以使用HTTP方法對其進行各種操作。
2. 無狀態性：RESTful通信是無狀態的，每個請求都必須包含所有必要的資訊，服務器不保留客戶端狀態資訊。
3. 使用HTTP方法：HTTP方法（如GET、POST、PUT、DELETE）執行不同的操作，包括創建、讀取、更新和刪除（CRUD）等操作。
4. 支援多種數據格式：RESTful API通常支援多種數據格式，最常見的是JSON，簡化了數據交換。
5. 自描述性：RESTful API提供足夠的信息，使客戶端能夠理解如何使用API，無需深入了解API細節。
總之，API是軟體開發的關鍵，RESTful是一種重要的API設計風格，使用HTTP協議和設計原則創建可伸縮且易於理解的API。這些概念的理解對於軟體開發至關重要。

Was this response better or worse?BetterWorseSame

*由ChatGPT潤稿

RESTful API 請求資源的方法

需要包含的元件為：
- 唯一資源識別符：伺服器通常使用統一的 URL 來執行資源識別。
- 方法：通常用 HTTP 來實作，因此需要告訴 Server 用什麼樣的方法操作
  - GET：獲得資源
  - POST：新增資源
  - PUT：修改資源（若原本無資料則新增）
  - PATCH：修改資源（只修改部分資源）
  - DELETE：刪除資源
- HTTP 標頭：Client 與 Server 之間的中繼資料，當中包含所需參數（路徑參數、Cookie 參數等）
當我們在使用URL對特定資源請求動作時，首先需要明確我們的意圖。

這就好比在日常生活中，當你想要對某個物品，比如一個杯子，進行操作，但又需要協助時，你必須清晰地表達你希望對這個杯子進行的操作，以使他人能夠理解你的意圖並協助你完成任務，例如「拿杯子」或「丟杯子」。

在網際網路上也是如此，只不過這裡我們使用的是電腦可理解的語言，例如“GET”這個URL或”DELETE”這個URL。

動作物品
日常生活動作拿、丟杯子
網際網路( 與你的電腦溝通) GET, DELETE URL

表格內容來源: https://tw.alphacamp.co/blog/rest-restful-api?gclid=CjwKCAjw9-6oBhBaEiwAHv1QvNrYIyfsJRxjXW7dv3h9mqu5q8V0Zz47AqtJFO_HP6N01ufCWITsUxoCfaAQAvD_BwE

RESTful API 的路由語義化設計

RESTful API的路由語義化設計是一種設計原則。

旨在使API的路由（或端點）具有清晰的、易於理解的語義，以便開發人員和用戶能夠更容易地理解和使用API。

這種設計風格的主要目標是提高API的可讀性、可維護性和可用性。

以下是RESTfuZl API的路由語義化設計的一些重要特點：
- 使用清晰的URL結構：URL應該具有語義，能夠反映API端點的目的。例如，如果你設計一個部落格應用的API，則可以使用像/posts來表示所有部落格文章，而/posts/{id}則用於單獨一篇文章。
- 使用HTTP動詞：HTTP方法（GET、POST、PUT、DELETE等）應該與API端點的操作相關聯。例如，使用GET方法來檢索資源，使用POST方法來創建資源，使用PUT方法來更新資源，使用DELETE方法來刪除資源。
- 使用複數名詞：對於表示多個資源的端點，應該使用複數名詞，例如/users表示所有用戶，而不是/user。
- 使用子資源：如果需要表示資源之間的關係，可以使用子資源路由。例如，/posts/{post_id}/comments表示一篇文章的所有評論。
- 使用選擇性的篩選器和參數：允許客戶端使用選擇性的篩選器和參數來自訂請求，以便獲取特定子集的資源。例如，/products?category=electronics可以用於檢索特定類別的產品。
- 使用HTTP狀態碼：使用適當的HTTP狀態碼來指示請求的結果，例如200表示成功，404表示資源不存在，201表示創建成功等。
- 提供詳細的API文檔：除了清晰的路由設計，還應該提供詳細的API文檔，以幫助開發人員理解如何使用API，包括端點的語義和支持的請求參數。
October 3, 2023

JS 函式內仍可以執行函式

在JAVASCRIPT 函式裡面，我們時常會安插其他函示的屬性資訊，所以今天來探討一下這個有趣的議題。

這次我們會在函式內部呼叫其他不同型別內容的函式，以及探討函式內的參數呼叫順序!

還記得火影忍者裡的配恩六道，一口氣轟掉木葉村?

當時的鳴人知道自己匯集仙術能量的掌握度不成熟，便用了作弊的方法…

把影分身藏在妙木山，3個影分身專注於匯集仙術能量，一旦真實的自己在戰場上沒有了查克拉或式仙術能量…

就是直接呼叫! 可讓自己隨時瞬間充滿能量!

然而… 我們等下說的函式內執行函式也與這個招大同小異!

範例程式

let varA =1;
console.log(varA);

function peparationOfWork(){
console.log('得知需求');
console.log('寫下項目並分析');

};

function DoingWork(){
console.log('準備好工具');
console.log('電腦既定的檔案與程式');
console.log('電錶量測');
}


function DoubleCheckYourWork() {
    console.log('階段性檢點');
    console.log('階段式物理性測試');

  }

將peparationOfWork() 裡面安插函式DoingWork()

let varA =1;
console.log(varA);

function peparationOfWork(){
console.log('得知需求');
DoingWork();
console.log('寫下項目並分析');

};

function DoingWork(){
console.log('準備好工具');
console.log('電腦既定的檔案與程式');
console.log('電錶量測');
}


function DoubleCheckYourWork() {
    console.log('階段性檢點');
    console.log('階段式物理性測試');

  }

  console.log(peparationOfWork());

peparationOfWork() 確實在執行了DoingWork()!

換做把DoubleCheckYourWork() 換到最前面執行

let varA =1;
console.log(varA);

function peparationOfWork(){
console.log('得知需求');
DoingWork();
console.log('寫下項目並分析');

};

function DoingWork(){
console.log('準備好工具');
console.log('電腦既定的檔案與程式');
console.log('電錶量測');
}


function DoubleCheckYourWork() {
    console.log('階段性檢點');
    console.log('階段式物理性測試');

  }
  DoubleCheckYourWork();
  console.log(peparationOfWork());

呼叫Function 順序以及參數有差?

有!

先來測試一下呼叫函式(para1,para2) 的陳述式。

OrderBy()只給para1

function OrderBy(num1,num2) { 
    console.log(num1,num2);
}

OrderBy(2);

OrderBy(3);

OrderBy()給para1,para2

function OrderBy(num1,num2) { 
    console.log(num1);
    console.log(num2);
}

OrderBy(1,2);

OrderBy(3,4);

觀察最後給他們執行的順序，你給他們甚麼他們就式按步就班做給你。

結論

函式呼叫方式… 其實跟其他框架的 “插斷執行” 很類似但…不能說相同!

我們一般提到的 “插斷執行” 是在不同運作模式下的權限之分，這一個很嚴謹的規定。

同樣都在於… 事先宣告好內部資料型別以及演算法，再來後面執行時編排順序。

October 2, 2023

Javascript -JSON 格式介紹與實作

JSON是什麼

JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，是 Javascript Object Notation 的縮寫。

通常先學 Javascript 再學 JSON ，因為它是 Javascript 衍生出的一項功能。 JSON 是根據 JavaScript 的物件實字 (object literal) 發展出來的。

市面上也有另一個資料交換格式 XML，許多.Net 專案也是常常在使用。之後我在寫一篇文章介紹!

本文章參考資料:

https://tw.alphacamp.co/blog/json

https://miniaspreading.github.io/guide-to-json/1-what-is-json.html

https://blog.csdn.net/weiwei9363/article/details/117805722

JSON 與 XML

XML (Extensible Markup Language) 是一種描述語言。資料的描述在本質上與 JSON 類似。使用XML中的Tags進行描述，工作量較大。資料不僅可以透過標籤來描述，還可以透過屬性（例如：文字）來描述。因此，當交換資料時，發送方和接收方必須具有關協定方便非常明確的資訊。

相較之下，JSON 中的結構非常靈活，在任何情況下都可以被接收者完全理解，並且無需事先達成任何結構協議即可轉換為物件。

因此，XML適合定義明確的資料接口，JSON適合靈活的資料交換。

給予支持-是我繼續寫下去的動力

JSON格式

Copy 過來的時候，OpenData一開始是不會這麼乾淨的!

以下是在Javascript 整理好的畫面。

JSON 資料來源

以下不囉嗦，直接示範給你看看!

https://data.kcg.gov.tw/

開放資料的內容

開放JSON資料

點選進去的之前，瀏覽器建議安裝JSON View。(下方安裝連結)

https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=zh-TW

JSON資料-檢視網頁原始資料

進入網頁原始資料

你會發現官方給的資料非常不易整理，我們會需要整理工具。

以下工具可幫助你JSON整理格式!

https://jsoneditoronline.org/

https://jsonformatter.curiousconcept.com/

https://tw.piliapp.com/json/formatter/

https://coding.tools/tw/json-formatter

開啟VS 建立一個新的JS檔案

新增一個空物件，等會賦予裡面的資料。

用瀏覽器閱讀該資料

September 24, 2023
JS – Read the Data in Object讀取物件內屬性的另一個方法

如題

僅演示該方法

讀取物件內屬性

當你的物件建立完成後, 你可以利用 [ 中括號 ] 去讀取屬性資料!

執行結果

July 15, 2023
JS Delete the Data in Object刪除物件資料

延用物件Dynamics 的範例去解說刪除物件內的屬性!

https://www.educative.io/answers/what-is-the-delete-operator-in-javascript

加入刪除物件_屬性

加入delete 語句

執行結果

July 15, 2023
JS- Object is Empty 空物件/你的物件內屬性常常變動嗎?
理解物件的概念之後, 這裡示範空物件產生

空物件的用法, 一般是用在時常變動內部屬性的的物件名稱

何謂空物件

格式: Let 物件名稱 = {大括號}Object is Empty

執行結果

物件作用域外_新增屬性

把該物件名稱 Dynamics

加入其他的屬性
- dog
- playStation
- food
執行結果

更改屬性內部值

執行結果
July 15, 2023
C++ 來搞懂函數的傳值Call by value、傳址Call by pointer以及傳參考Call by reference。
學生時代…
作者在學這一章節時, 坦白講….腦袋一片空白, 幾乎是用死背阿!

當出了社會後幾年(本行是玩PLC、Software platform、數位原理以及通訊拆解), 之後再來看CPP 這一章節, 變得很好從底層出發, 去了解這個語言獨有的一些記憶體操作方法。

在C++ 世界裡面, 我們常常會利用函數去做運算, 甚至是處理些重複性高的工作

在講解函數之前，必須先把何謂函數的引數和參數弄個清楚。

函數引數(argument)以及參數(parameter)

以下介紹參考來源

函數的引數（argument） v.s. 函數的參數（parameter）
使用函數（或稱函式或副程式）時，常常會遇到這兩個名詞，本人也時常混淆，每個編輯的翻譯也不盡相同，但由於非常重要，必須做好釐清。
1. 參數（parameter）用於「函數的宣告」，也就是在定義函數，或者宣告函數的原型時使用。由於必須要在函數的小括號內寫上參數的型態，故又稱為「形式參數」，可記為「參數的型式」。
  A. 在定義函數時：
  void swapfunction（int x, int y） // x , y稱為參數（parameter），小括號內要寫上參數的型態
  { 函數定義域的程式碼，以參數x、y來撰寫敘述 ………
  }
2. 引數（argument）是用於「呼叫函式」，也就是「執行函數」時的「輸入值」。
  B. 呼叫（執行）函數時：
  swapfunction（a,b）; // （）中的a , b稱為引數（argument），不需要寫上型態
透過呼叫的方式來執行函數

我們是在B.中設定兩個引數a、b來使用這個函數。當電腦看到引數a、b後，便會將a、b傳遞給A.內的參數x、y，以執行函數所定義的運算，所以傳遞的方向是：「由引數（a、b）傳遞給參數（x、y）」。

傳值 Call by value

如果你要簡單暴力的傳遞值的方式。
- 把變數資料移動到記憶體裡面
```
//函數定義
int MathFun(int x, int y) {
    return x + y;
}
```
傳址 Call by pointer

Call by pointer 在我看到的網站以及資料…. 很多人稱作 Call by addres，我比較喜歡用 Call by pointer 這名子，
這邊以最簡單的swapfun作為範例
其中在傳址時相當於 int *x = &a; int *y = &b; 這樣的寫法。

檢測記憶體位置_會交換??
```
int a = 6;
int b = 10;

// 觀察記憶體位置會不會變化?? 

void swapfun(int* x, int* y) {

	cout << x << endl;

	cout << y << endl;

	int tmp = *x;
	*x = *y;
	*y = tmp;

	cout << x <<endl;

	cout << y << endl;
}

int main(void) {
	
// 傳址* 型態 只會接受參考& 

	swapfun(&a, &b);

}
```
不會!

a、b、x、y 記憶體位址都不一樣!!!!

*註釋:

參數與引數 https://notfalse.net/6/arg-vs-param
- void swapfun (參數)
- swapfun (引數)
- & (參考)
傳址:

*x = &y 經過這個address 等式指派給另一個地址, 這個傳址才算是完成!

變數會交換??
```
// 檢測 變數會不會交換??

void swapfun(int* x, int* y) {
	cout << *x << endl;

	cout << *y << endl;

	int tmp = *x;
	*x = *y;
	*y = tmp;

	cout << *x <<endl;

	cout << *y << endl;
}

int main(void) {

	// 傳址* 型態 只會接受參考& 

	swapfun(&a, &b);

}
```
它們交換了彼此!
一旦接觸到記憶體交換的”用法” ，請在交換的陳述式裡面繼續使用這些方法

傳參考Call by reference

int a =0;

int& Ref_variable =a;
- 有趣的事情…. Ref_variable 沒有分配記憶體空間，而是Ref_variable 跟a共用了記憶體空間!
- 這是很多語言都沒有的記憶體操作方法!
參考連結
```
int main(void) {
    // a 為字串變數
    string a = "There is pointer A.";
    cout << a << endl;

    // b 為對 a 的指標
    string* b = &a;
    cout << b << endl;

    // c 為對 a 的參考
    string& c = a;
    cout << c << endl;

    return 0;
}
```
March 5, 2023

C++ Array

陣列的宣告要包含三個資訊:

每個元素儲存的資料類型
陣列名稱
陣列元素的數目

以下是在C++ 簡單的宣告陳述

// 型態  陣列名稱month [陣列個數]; 

short month[12]; // 產生有12個 型態為short 的元素的陣列

建立一個抽象名稱months 的陣列, 且擁有12個元素, 每個元素儲存 short 型態的數值,

宣告陣列語法

型態  陣列名稱[陣列個數];

陣列是複合型態

由於C++ 用 “衍生” 表示類別關係, 所以我們每次必須自己寫一個新的名詞!

來源: The-C-20-Masterclass-Source-Code

範例_01 宣告

int main(){

    //Declare an array of ints
    int scores [10]; // Junk data

    //Read data

    std:: cout << " scores [0] : " << scores[0] << std::endl;
    std:: cout << " scores [1] : " << scores[1] << std::endl;

    return 0;

  }

// scores [0] : -858993460
// scores [1] : -858993460

不清空初始化陣列，會有初始化資料在裡面。

範例_02 陣列給予初始值

int main(){

    //Declare an array of ints
    int scores[10]{0}; // Junk data

    //Read data

    std:: cout << " scores [0] : " << scores[0] << std::endl;
    std:: cout << " scores [1] : " << scores[1] << std::endl;
   
 return 0;
}

// scores [0] : 0
// scores [1] : 0

初始化數值可以只給一個, 全部的陣列都會給予初始值!

範例_03 每個陣列給予值

int main(){

    //Declare an array of ints
    int scores[10]{1,1,1,1,1,1,1,1,1,1}; 

     //Read with a loop
    
    for( size_t i {0} ; i < 10 ; ++i){
        std::cout << "scores [" << i << "] : " << scores[i] << std::endl;
    }
    
 return 0;
}

scores [0] : 1
scores [1] : 1
scores [2] : 1
scores [3] : 1
scores [4] : 1
scores [5] : 1
scores [6] : 1
scores [7] : 1
scores [8] : 1
scores [9] : 1

此時你能一個個給予數值到每個陣列。

範例_03 特定陣列初始化數值

int main(){

//Declare an array of ints
int scores[10]{0}; // Junk data


   
    scores[0] = 20;
    scores[1] = 21;
    scores[2] = 22;

    ////Print the data out
    for( size_t i {0} ; i < 10 ; ++i){
        std::cout << "scores [" << i << "] : " << scores[i] << std::endl;
    }

    return 0;
}

scores [0] : 20
scores [1] : 21
scores [2] : 22
scores [3] : 0
scores [4] : 0
scores [5] : 0
scores [6] : 0
scores [7] : 0
scores [8] : 0
scores [9] : 0

其餘沒有給予值的陣列，都會給予 =0 的數值。

February 19, 2023

C++ Precedence And Associativity

當你有算數的經驗時，你會知道在做四則運算時會有先乘除後加減的規則

程式當然也有，C++ 裡面也有相關的先後順序與關聯性

C++ Precedence and associativity

先前觀念

What is the purpose of {} in C++?

{} can be used to initialise variables in C++11 in the same way that they are used to initialise arrays and structures in C.

{} 可用於將C++ 已宣告的變數做 初始值代入。

範例01

#include <iostream>


int main(){

//初始值代入
    int a {6};
    int b {3};
    int c {8};
    int d {9};
    int e {3};
    int f {2};
    int g {5};
        
    int result = a + b * c -d/e -f + g; //  6 +  24  -   3 - 2 + 5
    
    std::cout << "result : " << result << std::endl;

    system("pause");

    return 0;
}

//結果:  6 +  24  -   3 - 2 + 5 = 30

範例02

#include <iostream>


int main(){

    int a {6};
    int b {3};
    int c {8};
    int d {9};
    int e {3};
    int f {2};
    int g {5};
        
    int result = a + b * c -d/e -f + g; //  6 +  24  -   3 - 2 + 5
    
    std::cout << "result : " << result << std::endl;

    result = a/b*c +d - e + f;  //   16 + 9 - 3 + 2
    std::cout << "result : " << result << std::endl;

    system("pause");

    return 0;
}

//結果:  6 +  24  -   3 - 2 + 5 = 30
//結果:   16 + 9 - 3 + 2 =24

February 18, 2023

JS-DOM (Document Object Model)文檔物件模型
首先我們要了解DOM 的概念!

DOM 全名為: Document Object Model

文檔物件模型 (DOM) 是提供我們寫程式的一種介面，可讓腳本語言（如 JavaScript）訪問網頁的結構和內容。

DOM 每一層都有自己的節點(Node)，每個節點都有屬於自己的物件。

我們能透過DOM內建的屬性與方法去讀取或更改內容。

What is Document Object Model(DOM) ? How JS interacts with DOM

我們可以看到 Document 在最上層的級別，到下面的節點都有自己的子孫。
- Document 本身就是一個document node
- 所有的HTML elements也都是element nodes
- 所有的HTML attributes也都是attribute nodes
- 在HTML element內的text內容也是text node
- 所有的comments也都是comment nodes
用DOM Tree 來解釋的話。

甚麼是DOM Tree?

當我們打開HTML 是以下範例

範例來源
```
<body>
    <div>
        <p style="color: purple;">Paragraph text</p>
    </div>
    <div>
        <ul>
            <li>First item</li>
            <li>Second item</li>
        </ul>
    </div>
</body>
```
當用樹狀圖來看的時候
```
body
 \_ div
 |   \_ p
 |      \_ [text]
 |      |
 |      \_ [attribute]
 \_ div
     \_ ul
         \_ li
         |   \_ [text]
         |
         \_ li
             \_ [text]
```
DOM HTML 環境

DOM 環境配置

https://medium.com/vicky-notes/dom-%E9%81%B8%E5%8F%96%E7%B6%B2%E9%A0%81%E5%85%83%E7%B4%A0-2c338afd238f
```
**<script src="qurey.js"></script>**
```
以上一段程式碼，可以放在 <head> 裡，或是 <body> 裡。

但是在 DOM 裡，此段 <script src="qurey.js"></script> 程式碼必須放在 </body> 前面。
- 網頁瀏覽器一打開，HTML 程式碼會一行一行執行，HTML 標籤由上到下都解析成 DOM 節點，才可以使用 JavaScript 去抓取裡頭的內容。
若把 <script src="qurey.js"></script> 程式碼放在 <head> 裡，就抓取不到 HTML 的節點。(因為 HTML 標籤節點還沒解析出來)
```
<body>

    <h1> 這是海景第一排</h1>
    <h2 class="header"> 就是我啊! </h2>
    <a href="https://products.aspose.app/cells/zh-hant/editor/html" class="link">這個連結給它點下去!</a>


    <script src="JS\qurey.js"></script>
</body>
```
JavaScript 篩選器
```
// 選取網頁上的元素  css 選擇器  .header 是層級
const q2_head = document.querySelector('.header');


const qh1 =document.querySelector('h1');


const link_e = document.querySelector('.link');
```
網頁瀏覽器內執行

q2_head

qh1

link_e
February 16, 2023

	動作	物品
日常生活動作	拿、丟	杯子
網際網路( 與你的電腦溝通)	GET, DELETE	URL

Author: lioajimzen

參考資料如下:

API 是什麼?

RESTful 是什麼?

RESTful API 請求資源的方法

RESTful API 的路由語義化設計

範例程式

將peparationOfWork() 裡面安插函式DoingWork()

換做把DoubleCheckYourWork() 換到最前面執行

呼叫Function 順序以及參數有差?

OrderBy()只給para1

OrderBy()給para1,para2

結論

JSON是什麼

JSON 與 XML

給予支持-是我繼續寫下去的動力

JSON格式

JSON 資料來源

開放資料的內容

開放JSON資料

JSON資料-檢視網頁原始資料

進入網頁原始資料

開啟VS 建立一個新的JS檔案

用瀏覽器閱讀該資料

讀取物件內屬性

執行結果

加入刪除物件_屬性

執行結果

何謂空物件

執行結果

物件作用域外_新增屬性

執行結果

更改屬性內部值

執行結果

函數引數(argument)以及參數(parameter)

傳值 Call by value

傳址 Call by pointer

檢測記憶體位置_會交換??

*註釋:

變數會交換??

傳參考Call by reference

宣告陣列語法

陣列是複合型態

範例_01 宣告

範例_02 陣列給予初始值

範例_03 每個陣列給予值

範例_03 特定陣列初始化數值

先前觀念

範例01

範例02

甚麼是DOM Tree?

當用樹狀圖來看的時候

DOM HTML 環境

DOM 環境配置

JavaScript 篩選器

網頁瀏覽器內執行