【心得8】11/09

原本上次上課使用到的「Tabletop.js」今年之後將會停擺，因其為Google舊版API所做出的東西，而今年Google即將停止此服務，因為今天的課我們改用「Google Chart」來替代，原本是將試算表發佈到網路，而使用Google Chart則是按共用並複製知道連結的使用者皆可以看到，差異為發佈的話可以選擇性公開部分資料（有三個工作表，公開一個其他可以選擇不公開），而共用的話則是選擇此檔案就全部公開，因此使用Google Chart時不要放敏感的資料。

讀取資料，要將自己的試算表讀進去要把網址做修改：https://docs.google.com/spreadsheets/d/自己試算表編碼/gviz/tq?sheet=工作表1'，若要變更選取範圍則需要使用到SQL語法。

google.charts.setOnLoadCallback(init);

function init() {

    var url =

    'https://docs.google.com/spreadsheets/d/1IKPjk0k_oXVprfuLVUVX77apCgyR64FQpCjC9MvsAlw/gviz/tq?sheet=工作表1';

    var query = new google.visualization.Query(url);

    query.setQuery('select *'); // 要全部的資料

    query.send(processSheetsData);

    }

row(0,0)為「張三」；row(0,1)為「0912345678」以此類推。

function processSheetsData(response) {

    var data = response.getDataTable();

    var columns = data.getNumberOfColumns();

    var rows = data.getNumberOfRows();

    var str = "";

    for (var r = 0; r < rows; r++) {

        str += data.getFormattedValue(r, 0) + "(" + data.getFormattedValue(r, 1) + ")" +

 " 訂 " + data.getFormattedValue(r, 2) + " : " + data.getFormattedValue(r, 3) + "個 <br />";

        }

        document.getElementById("demo").innerHTML = str;

        }

期末作業：

第一個頁面：(一定要叫)index.html

第二個頁面：(不一定要叫)page1.html；第三個頁面：page2.html...以此類推。

使用netlify將網頁發佈至網路，免費讓人發佈的網站，小缺點是有變更網頁資料的話要刪除整個網站重新上傳。

最後，謝謝老師今天提早下課讓我們準備期中考！！太佛心了