# JS read and set JSON data - 請先裝 VS code 及 live server 套件 ## JS read JSON data - JS 解析 JSON 資料範例 ```htmlembedded= <html> <head> </head> <body></body> <script> // 定義一個 JSON 物件 var Jas = { "resourceType": "Patient", "name": [{ "use": "official", "text": "林帶玉", "family": "林", "given": ["帶玉"] }], "gender": "female", "birthDate": "1773-01-21", }; // 將 Jas 物件 birthDate 資料指定給 ret 變數 var ret = Jas.birthDate; alert(ret); // 網頁彈出顯示 ret 結果 </script> </html> ``` - 上述範例用到 JavaScript 程式基礎語法； JS var 設定變數與物件，JS alert 在提示視窗呈現資訊，以及 [JS 處理 JSON 物件](https://www.w3schools.com/js/js_json.asp)。有人可協助準備十分鐘 JS 快速上手線上教材嗎? ### 執行 JSON.html 程式範例 - 在 VS code 開發環境，可選擇 r_JSON.html，按滑鼠右鍵，點選 open with live 執行範例程式 ![](https://i.imgur.com/3WhqzRH.png) - 執行後，在瀏覽器會看到如下結果: ![](https://i.imgur.com/d6erHir.png) ### Pratice - 若要使用 JS 從上述範例取得 "family" 標籤的資料("林")，範例程式第 18 行要如何修改? ## JS set JSON data - JS 在 JSON 模板中設定資料範例 - 執行 w_JSON.html 範例程式 ![](https://i.imgur.com/xhboZHy.png) - 瀏覽器會看到的結果如下: ![](https://i.imgur.com/hRzWZuv.png) ### Pratice - 若要將"林帶玉"改為"林黛玉"，"帶玉"改為"黛玉"，範例程式要如何修改 ### 醫學資訊跨域人才培育大挑戰(論述不夠清楚，再修改) - 現行醫學及資訊兩領域皆包含浩瀚的知能。每個時間有限，知識無窮。需要進一步分工合作，確立 哪些是必要知能； - 我們可先建立一安全、穩定、可共通運用之伺服器平台；基於 FHIR 及 DICOMweb，可發展許多網路前端健康醫療應用 - 但網路前端也有許多開發環境及程式，本課程以網頁前端(HTML,JavaScript, CSS) 程式為範例 - 但 HTML, JavaScript, CSS 又各包含許多指令及語法，本課程主要專注在 HTML 輸入及呈現標籤，以及 JS 處理 JSON 物件 - 但 JS 又有許多套件及寫法(瘋狂的世界)，本課程以 JS 基礎語法處理 JSON 資料，如上範例 - 從頭開始撰寫上述範例包含以下步驟 : 0. 產生基礎 HTML 1. 在 HTML 當中加入 JS 程式 2. 設定 JS JSON 物件 3.撰寫取得、設定、及顯示 JSON 資料程式 4. VS code 環境執行 HTML JS 程式。 - 但從無到有撰寫程式過程很容易出錯，而初學者又不知如何偵錯(debug)，因此建議使用複製、貼上、修改 - 後續會提供與臨床作業流程整合應用之範例程式，及修改維護說明，以利修改擴充實際應用； - 在此發展模式當中，最大的挑戰在於訂立各式 JSON 模板；我們需要許多醫資跨域人才專注在某健康醫療應用領域，以確立模板規格 - 可公告確立的模板，以利跨系統依循，發展可在多地應用之商品。建議與標準推動組織合作(報名參與方式後續提供)，以利確立及公告專業領域所需之標準互通規格