【心得】HTML5 WEB APP程式設計

 今天老師介紹了4、5種免費由materialize建構出的版型，並教我們如何去應用模板(ex.<a href="___.html">放入連接的網頁)，我使用了第三種版型，主題為一家常吃的麵包店設立官方網站，預計首頁會使用模板，商品介紹頁面會使用的「卡片」以及「資料庫」的概念，其他連接還尚無規劃，但每周上課能慢慢做出成果。

今天使用Google Maps JavaScript API，將Google地圖嵌入網頁，使用「iframe」語法， 稱為內置框架或內聯框架，常用來在網頁內嵌入另外一個網頁。 < iframe   id = "demo"      src = " http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=經緯度座標或地址&z=比例&      t=h衛星圖或p地形圖&output=embed "      width = "600"   height = "450"   frameborder = "0"   style = " border:0; "   allowfullscreen = ""        aria-hidden = "false"   tabindex = "0" > </ iframe > 也實作了地圖切換功能， 我們將 google map 網址中經緯度的部分改成變數，就可以切換好幾個不同的地圖   < a   href = "javascript:f('24.121308,120.677175');" > 中興大學 </ a >   < a   href = "javascript:f('24.1371547,120.6865921');" > 台中火車站 </ a >   改變參數使用 getElementbyId 抓住網址，再搭配 js 當中的 setAttribute。 < script >     function   f ( loc ) {     var   str  =  'http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=...

原本上次上課使用到的「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  =  resp...