W6

 第六堂

課程內容

  • 目標：將前端網頁連結到後端資料庫

    1. nchu-mis-html5-blogger(more plugins)→Tabletop.js→範例資料

  • 前情提點

    1. google試算表內的電話要從數值改成純文字，開頭才可以存在0
    2. 要記得先把檔案發佈到網路上
    3. var publicSpreadsheetUrl = '網址' → 把/d/後面改成試算表序號

  • 網頁載入過程

    1. window.addEventListener('DOMContentLoaded', init) → 整個網頁載入後再執行init
    2. key: publicSpreadsheetUrl → 連結到SpreadsheetUrl的網址，載入google試算表的內容
    3. simpleSheet: true → if成功載入
    4. callback: showInfo → 執行showInfo (callback→function1執行完後再進行function2)
    5. alert('Successfully processed!') → 跳出警示對話框
    6. console.log(data) → 載入各個data
    7. for (i = 0; i < data.length; i++ ) →  把原本有i的地方都改成 'data[i].表格標題' 

課堂心得

        今天的課程主要是為了要建立我們前、後端資料的概念，但因為後端資料庫要學的範圍太多，所以改成以google試算表來建立簡易的資料庫。

        一開始我們先用了老師教學網頁裡面Tabletop的範例資料，引出了publicSpreadsheetUrl = '試算表網址'，讓我們的網頁程式可以成功連結到我們後端的google試算表，接著在用for迴圈的概念將我們試算表內的data引用到card內各種title、picture和content，如此一來，我們的網頁就不再像上次一樣是死的，僅僅是將我們要呈現的內容丟在程式裡，而是變成一種活的資料，可以自由引用我們所需要範圍內的data，醬如果以後數據資料越來越多，也不會讓我們的程式看起來很長很複雜~

          課堂練習(test2)：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Tabletop.js範例程式</title>
<!-- 利用Tabletop.JS讀取Google Sheet https://github.com/jsoma/tabletop -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<script type='text/javascript'> 
// 取得網址裡的參數 
function GetUrlVar(VarName) 
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + VarName + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.href);
  if (results == null)
    return "";
  else
return results[1];
}
  // 於Google Spreadsheet建立的範例資料為 https://docs.google.com/spreadsheets/d/e/2PACX-1vR9LivzlVjV3Mp9EOw0rCh46tDacBY6uQ8AT4k6ObLecvL8P-BpgKza9IOyGfFkP3tEdNSereSt8wxT/pubhtml
  var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1e-2FL8XJOJVCeXtIz5Ff-10XNiZ65iKPCy6WtXtn8a0/pubhtml';

  function init() {
Tabletop.init( { key: publicSpreadsheetUrl,
callback: showInfo,
simpleSheet: true } )
  }

  function showInfo(data, tabletop) {
// alert('Successfully processed!')
console.log(data);
var i = decodeURIComponent(GetUrlVar('pid'));
var str = '<img src="' +data[i].pics
document.getElementById("demo").innerHTML = data[i].title;
  }

  window.addEventListener('DOMContentLoaded', init)
</script>
<head>

<body>








</body>
</html>

留言

張貼留言

這個網誌中的熱門文章

 穿戴式監控裝置利弊 "No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to attacks upon his honour and reputation Everyone has the right to the protection of the law against such interference or attacks." --Universal Declaration of Human Rights , Article 12. 前言 　　根據聯合國所頒布的 《世界人權宣言》中第十二條 明確指出，任何人皆有權享有私生活、家庭、住宅和通信等隱私保護，然今科技日新月異，在許多方面，科技往往走在法律之前，並逐漸威脅到人們的隱私甚至人身安全，其中隱含著高度風險的領域即為醫療與個人健康資訊，而其監控核心便是穿戴式裝置，我們又如何能斷定在成功獲取我們的心律、腦波後，未來不會藉此進一步分析我們的所思所想？本文我們將針對穿戴式裝置進行科技與隱私的深入探討與分析。 何謂 穿戴式裝置         在醫療保健領域中，穿戴式裝置意即消費者可以配戴的電子設備，目的是收集用戶的個人健康數據並即時傳送給醫療專業人士，最原始的穿戴技術用於健身方面，是配備了感測器的腕帶，能追蹤用戶的身體活動和心律，並與智慧型手機同步，提供用戶健康健身方面建議，此後隨者市場對於穿戴式監控裝置需求的日益增長，發展出了各式監控血壓、呼吸律抑或溫度的相關裝置，知名企業有如 Proteus 、 Neurotech 、 Augmedix 等( 2022 Top10穿戴式醫療裝置開發公司 )。 優點         在過去5年中，穿戴式健康監控裝置的使用率增加了兩倍之多，其於市場中的高接受度絕非毫無來由，對醫生來說，他的最大優勢為便利性，他提供了一個能自動紀錄並追蹤病人即時狀況的機會，這也使我們不難理解為何他能在近年的開發市場中有著爆炸性的成長，以下我們將探討穿戴式裝置在醫學領域帶來的助益： 1.  方便－ 穿戴式裝置通常穿戴簡便，能夠即時追蹤病人狀況，並回傳給醫療機構，對醫院來說減少了時間與成本，對病人來說也省下掛號及復診的時間、
閱讀完整內容

W2

 第二堂 課程內容 把上禮拜body上的字串換成照片呈現 注意""&''要成對出現 <img src=" 照片網址 " alt="Trulli" width="500" height="333">→ 絕對位置 用myFunction1.第一張、 myFunction2.第二張，對照各自照片網址→ not good 一按鈕對依照片效率差 字串常數變數 將照片網址用函數X替換對照                               <button onclick="myFunction1( ' 網址 ' )">上一張</button>                               myFunction1(x)                          '<img src="' + x + '" alt="Trulli" width="500" height="333">'→ +表連接                       💣字串常數必用一引號→變成 一字元                             變數 不可用引號 陣列(Javascript Array) 將var cars內各個網址對應到myFunction1的0、1                               <button onclick="myFunction1( '0' )">上一張</button>                               <button onclick="myFunction1( '1' )">下一張</button>                                myFunction1(x)                               
閱讀完整內容