第六堂

這次的課程延續上次主題 繼續加強我們的陽春版購物網站 不過這次與上次最大的不同 就是我們不用在我們的程式裡一一打出我們的array了 因為這樣很麻煩 也會讓程式碼落落長 要把所有資訊打出來 我們可以利用更方便的google試算表 比較好編輯我們的資料 先在上面列好我們每項數據名稱跟內容然後上傳發布還有更改權限 並把表單的網址複製下來 接著在我們的html5程式碼中加入你要引用tabletop.js的程式碼然後把網址改成你的 最後一件事就是更改你的變數的名稱 這樣就可以完全達成跟之前網站一樣的效果 而且不用在程式碼裡寫你的資料 利用前端後端連結 運用更方便的google表單編輯你的資料庫 做出活的網站而不是單純填充式的死網站

 <script type='text/javascript'>

 var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1C1GmnuNbGnw6gZ1ho-E2veIlKxdvpUJ59V1NtieIvwE/pubhtml';

 function init() {

Tabletop.init( { key: publicSpreadsheetUrl,

callback: showInfo,

simpleSheet: true } )

 }

 function showInfo(data, tabletop) {

alert('Successfully processed!')

console.log(data);

這邊就可以運用  data[第幾列].試算表中資料欄名稱   的模式去抓你試算表的資料

 }

 window.addEventListener('DOMContentLoaded', init)→在整個網站load完後 再去呼叫function 防止有時候還沒load完而找不到程式碼在哪 

</script>