在這裡我們將學習 Plain Vanilla JS，而不使用 NodeJS 或外部函式庫。我們將從一個開箱即用的用例開始，將一些 Google 工作表資料轉換為 JSON 並將其儲存在 AWS S3 儲存桶中，然後使用純 js 取得它。大多數課程都是從 hello world 程式開始，沒有太多其他內容，但在這裡我們實際上有一些東西可以立即編程，這樣我們就可以練習數組和循環，它們是任何編程語言的關鍵支柱。另外，您可以在這裡涉足數據科學的世界，也許可以像我一樣以此為職業。
當我們第一次研究資料時，我們會想到 SQL，但在許多應用程式中 SQL 是多餘的並且不需要。在有一些指標的儀表板中，我們可以使用簡單的 JSON 平面檔案作為我們的資料來源，與其他資料無關。儀表板可以使用這種 NoSQL 格式，是滿足行銷團隊報告需求的熱門選擇。
為了設定我們的環境，我們只需要 Google Chrome 和 json chrome 擴充功能來將電子表格資料轉換為 json。然後我們需要免費的 AWS 和 S3 儲存桶作為我們的通用網站。對於 IDE，我們將只使用 Windows 記事本。我們還需要一個本地網路來獲取數據，因為從 C 驅動器獲取數據將不起作用，因為 javascript fetch api 使用 http 協議，因此需要一個 Web 伺服器。在免費 AWS 上公開之前，我們將首先設定一個本機 Web 伺服器來測試我們的資料。為此，我們將使用簡單的 Python。
設定環境
設定本機 Python 伺服器和索引檔案的步驟
在建立 AWS 遠端伺服器之前，我們需要先使用 Python 設定本機 Web 伺服器..以下是如何執行此操作
首先找出是否安裝了 Python...開啟命令提示符，預設為您的主資料夾 c:Usersyourname 並輸入 python。如果顯示版本訊息，則已安裝，您可以轉到下面的步驟 6（但請確保首先將索引檔案保存在您的主資料夾中）
如果您沒有安裝 python，請按照以下說明操作
Windows 中的 Python 伺服器
1 進入搜尋區域並輸入 cmd 然後點擊命令提示符，將開啟一個黑屏，其中顯示您的主資料夾路徑（通常為 C:UsersyourName）
2 輸入python，如果安裝了會顯示版本號碼
3 如果未安裝，則會出現獲取按鈕，按此按鈕，下載將在幾分鐘內安裝（或只是從 chrome 下載 python）
4 完全安裝後重新開啟cmd提示符號並再次輸入python
將顯示 5 版本資訊...如果已經安裝了 python，這裡就是我們開始的地方
6 輸入 python -m http.server 這將啟動伺服器（保持此 cmd 視窗開啟）
7 確保您在主資料夾中儲存了索引檔案（在檔案總管中按 c:，然後按一下用戶，然後按一下您的姓名以開啟主資料夾）
7a 在步驟 8 中前往本機時保持 cmd 開啟...關閉 cmd 需要重新開啟並重新開始
8 前往 chrome 並輸入 localhost:8000，您的預設索引頁面將會出現....請參閱下面的建立索引檔
Mac 上的 Python 伺服器
在 Mac 上開啟終端並從上面的步驟 2 開始....除了可能需要嘗試上面 3 個不同的選項，具體取決於預先安裝的 python 版本。我們的主資料夾應該是安裝Python的資料夾，並且與我們啟動伺服器的終端資料夾相同。
先試試這個
- 輸入 python -m http.server 或
- 如果上面不起作用，請輸入 python3 -m http.server
按下回車鍵，Python 3 將立即從執行指令的目錄啟動一個簡單的 HTTP 伺服器。這個目錄還應該有一個索引文件
或選項 3（如果其他方法不起作用）
- 舊版請輸入 python -m SimpleHTTPServer 8000
如何在 Python 路徑中建立索引（主）檔案..將其儲存到 Web 伺服器所在的相同資料夾中。複製此程式碼並另存為index.html
<!DOCTYPE html>
<html lang="en-US">
<header>
</header>
<body>
<p> hi there, this is our first html page </p>
</body>
</html>
登入後複製
登入後複製
登入後複製
準備一些資料
1 複製此資料並將其貼到空白的 Google 工作表中
這是我們虛構的公司，有一個訂單資料庫
order_no,order_date,product_line,dollar_amt,product1,product2,product3
12340,01-03-22,prod1,400,400,0,0
12341,01-02-22,prod2,50,0,50,0
12342,1-16-22,prod3,50,0,0,50
12343,1-17-22,prod1,100,100,0,0
12344,1-15-22,prod2,50,0,50,0
12345,2-5-22,prod1,100,100,0,0
12346,2-6-22,prod3,20,0,0,20
12347,2-7-22,prod1,100,100,0,0
12348,3-23-22,prod2,200,0,200,0
12349,3-5-22,prod3,20,0,0,20
123410,3-29-22,prod1,100,100,0,0
123411,3-25-22,prod1,100,100,0,0
123412,4-23-22,prod1,500,500,0,0
123413,4-24-22,prod2,100,0,100,0
123414,5-10-22,prod3,50,0,0,50
123415,5-15-22,prod1,500,500,0,0
123416,5-25-22,prod2,50,0,50,0
登入後複製
登入後複製
登入後複製
非常重要 - 貼上數據後，當它仍然突出顯示時，在 Google 表格中按數據，然後將文字拆分為列
2 取得 json chrome 擴充
在建立工作表之前啟用 chrome 將其另存為 json。
我發現了這個簡單的快捷方式，可以將 JSON 圖示新增到 google 工作表工具列...這是一個 chrome 擴充功能
首先到此連結 https://chromewebstore.google.com/detail/sheets-to-json/enmkalgdnmcaljdfkojckdbhkjmffmoa
然後按下加入 chrome，到頁面最右側
然後打開一個空白的Google工作表，您將看到 JSON 圖示作為頁面頂部附近工具列中的最後一項
3 將資料轉換為json
將以上資料貼到工作表中，然後將文字貼到列中，然後按 json 圖示並前往下載以取得 json 檔案
4 將此 json 檔案保存在 python 和索引檔案所在的相同資料夾中...我將其另存為 order.json
執行我們的程式
5 從索引檔案取得資料...測試我們的伺服器和檔案設定
更改您的index.html檔案以包含以下程式碼，該程式碼與我們將在下面用於從公共伺服器存取資料的程式碼不同
<!DOCTYPE html>
<html lang="en-US">
<header>
</header>
<body>
<p> hi there, this is our first html page </p>
</body>
</html>
登入後複製
登入後複製
登入後複製
6 呼叫localhost:8000並查看資料
7 在本機伺服器上使用 json 之後，我們可以在 AWS 中建立一個公用 S3 儲存桶
將 AWS S3 儲存桶配置為我們的公用伺服器
遠端儲存 JSON 檔案最簡單的方法是在 AWS S3 中。透過不在傳統資料伺服器中創建模式，我們變得無伺服器。我們在具有 S3 的 AWS 雲端中，可以從任何地方連接到我們的儲存桶連結。如前所述，noSQL S3 方法有一些限制。但它也有很大的好處。在處理資料時，人性傾向於只使用一張表，就像過去我們嚴重依賴一張 Excel 表一樣。這種平面文件格式可以處理一些指標，因此我們不會用複雜性轟炸我們的受眾。平面文件的理想用例是簡單的儀表板。
首先我們建立一個 AWS s3 儲存桶，然後上傳 JSON 檔案。我們的做法如下：
1 註冊免費套餐 AWS，從 AWS 控制台前往 S3 並建立唯一的儲存桶名稱
2 將其公開，方法是轉到儲存桶權限標籤以關閉阻止公共存取 - 前往阻止公共存取部分，編輯、取消選取並儲存
3 留在權限標籤中，然後編輯儲存桶策略，刪除其中的內容並替換為以下內容，然後儲存變更（請記住將下面的儲存桶名稱替換為實際名稱）
order_no,order_date,product_line,dollar_amt,product1,product2,product3
12340,01-03-22,prod1,400,400,0,0
12341,01-02-22,prod2,50,0,50,0
12342,1-16-22,prod3,50,0,0,50
12343,1-17-22,prod1,100,100,0,0
12344,1-15-22,prod2,50,0,50,0
12345,2-5-22,prod1,100,100,0,0
12346,2-6-22,prod3,20,0,0,20
12347,2-7-22,prod1,100,100,0,0
12348,3-23-22,prod2,200,0,200,0
12349,3-5-22,prod3,20,0,0,20
123410,3-29-22,prod1,100,100,0,0
123411,3-25-22,prod1,100,100,0,0
123412,4-23-22,prod1,500,500,0,0
123413,4-24-22,prod2,100,0,100,0
123414,5-10-22,prod3,50,0,0,50
123415,5-15-22,prod1,500,500,0,0
123416,5-25-22,prod2,50,0,50,0
登入後複製
登入後複製
登入後複製
4 然後，在權限標籤中前往跨來源 (cors)，編輯並替換為以下內容並儲存
<!DOCTYPE html>
<body>
<div id="myData"></div> <!--data result displays in this html div-->
<script type="text/javascript">
convert(); //run the convert function..this converts json to html and displays to the front end in the myData div
// async is needed to run await which is the newest way to return a promise..await must be used inside a function
//When you then put await in front of a function you're instructing the program to wait until that operation is complete before moving on.
async function convert() {
//let response = await fetch('https://rickd.s3.us-east-2.amazonaws.com/orders4.json'); //get data from rickd s3 bucket in aws
//replace rickd with your bucket name
let response = await fetch('orders.json'); //get data locally instead of from s3..orders.json is in same folder where python is installed
let data = await response.json(); //getting data array in json format...waiting for all the data to come in
//then iterate over javascript array for as many times as there are js objects inside the array
for (var i = 0; i < data.length; i++) {
data[i].product1 = parseInt(data[i].product1); //this converts from string to int just the val for product1
} //end for loop
//we are rendering the array and not data in table format
myData.innerHTML = JSON.stringify(data, null, "\t"); //first stringify json object then render result inside html div tag
console.log(JSON.stringify(data, null, "\t")) //this is more readable, this is the pretty print..press ctrl-shift-J to view
//console.log(JSON.stringify(data)) //prints all as one line / a string, this is the record format
} //end function
</script>
</body>
<!-- next up..we need to return this data in table format-->
</html>
登入後複製
5 前往屬性選項卡，然後按靜態網站寄存，最後一項。然後按一下編輯然後啟用然後儲存。這會將您的儲存桶連結轉換為公共網站。
6 傳回物件標籤並按上傳，然後前往儲存新建立的 JSON 檔案的位置並完成此操作。您的 json 檔案現在將位於 s3 中。
7 JSON 檔案上傳成功後，它將出現在您的 s3 儲存桶的物件部分中。雙擊 JSON 文件，您將進入屬性選項卡，在其中您可以看到物件概述。按一下提供的物件 url，將顯示原始 JSON 資料。複製此 url 連結並將其保存在某處，因為您將需要它從 Javascript 獲取資料。此 url 連結提供對新創建的通用網站的訪問，這是一個可公開訪問的 S3 儲存桶，用作臨時網站。您可以將文件保存到此儲存桶並隨時與他人分享。
8 從 AWS 存取我們的 json 檔案需要與本機伺服器中使用的編碼不同的編碼。首先，我們需要向使用者提供我們網頁的連結。我的虛構訂單資料的公開連結是
https://rickd.s3.us-east-2.amazonaws.com/orders4.json 那麼我們的程式碼應該如下所示，這與我們的原始程式碼不同。對於此程式碼，我們不顯示數組，而是添加表格元素，以便以表格格式顯示
<!DOCTYPE html>
<html lang="en-US">
<header>
</header>
<body>
<p> hi there, this is our first html page </p>
</body>
</html>
登入後複製
登入後複製
登入後複製
接下來，這是我們添加標題和樣式的相同代碼
order_no,order_date,product_line,dollar_amt,product1,product2,product3
12340,01-03-22,prod1,400,400,0,0
12341,01-02-22,prod2,50,0,50,0
12342,1-16-22,prod3,50,0,0,50
12343,1-17-22,prod1,100,100,0,0
12344,1-15-22,prod2,50,0,50,0
12345,2-5-22,prod1,100,100,0,0
12346,2-6-22,prod3,20,0,0,20
12347,2-7-22,prod1,100,100,0,0
12348,3-23-22,prod2,200,0,200,0
12349,3-5-22,prod3,20,0,0,20
123410,3-29-22,prod1,100,100,0,0
123411,3-25-22,prod1,100,100,0,0
123412,4-23-22,prod1,500,500,0,0
123413,4-24-22,prod2,100,0,100,0
123414,5-10-22,prod3,50,0,0,50
123415,5-15-22,prod1,500,500,0,0
123416,5-25-22,prod2,50,0,50,0
登入後複製
登入後複製
登入後複製
第二部
陣列、循環與函數、一些編碼建構塊、程式設計的基礎要素
陣列 - 最重要的資料結構
在 javascript 中，我們的資料被建構為由大括號括起來並由逗號分隔的鍵值對，一個數組包含多個 javascript 對象，每個對象代表一行資料。這稱為 JSON 格式或 Javascript 物件表示法。
循環/迭代 - 最重要的循環是 for 循環，但你應該研究其他類型的循環。 for 迴圈迭代資料數組並為每次傳遞執行一個操作。在我們的用例中，它只是透過獲取請求向前端顯示資料。
函數
函數是一段程式碼、一組指令，它會回應某種事件（例如按下按鈕）而執行。在某些情況下，函數不是必需的，但在其他情況下，某些程式碼需要函數才能正常運作。函數要么有名稱，要么是匿名的。它們可以被調用，也可以自行執行。可怕的箭頭符號一開始很嚇人，但它被廣泛使用，所以要習慣它。
條件邏輯最後但並非最不重要的一點是我們還有 if / else 語句。 if(條件) {則執行此操作} else {執行此操作}
總之，有必要研究所有這些主題以獲得更多知識，因為我在本課中只提供一個小概要。我只提供一個路線圖，某種入門讀物，而你作為程式設計師必須學習其餘的。
編碼愉快！ ！
附錄
我們的普通js、nosql 用例是一個長條圖，您可以在此處找到程式碼...在https://dev.to/rickdelpo1/stacked-bar-chart-using-a- json-data- source-plain-vanilla-javascript-plain-css-and-no-chart-libraries-2j29
關於作者 Rick Delpo.. https://javasqlweb.org/about.html
以上是簡單的 Javascript 複習，適合那些感覺落後或不知道從哪裡開始使用函數、陣列、循環、JSON 和 NoSQL 的人的詳細內容。更多資訊請關注PHP中文網其他相關文章！
