HTML5 WEB APP 程式設計心得

今天我們試著做出一個類似google表單的網頁 然後把資料輸入我們的google試算表 這樣我們就可以建立一個小小資料庫  我們先使用google表單簡單製作一個問卷 然後它可以連結到google試算表 把輸入的資料列在試算表上 再利用google表單網址的固定格式和window.open這個function 我們就可以不用透過google表單 直接用我們html5做的網站輸入資料進試算表 運用html forms弄出簡單的問卷 再用materialize CSS美化我們的網站                               <script type="text/javascript"> function formresponse() { var m = document.forms["form1"]["message"].value; <!-- var d = document.forms["form1"]["tel"].value; --> var str = ""; if (m==null || m=="") {str += "不要耍我 我知道你甚麼都沒寫\n";   //alert("姓名不可為空白!");   //return false; } if (str != "") alert(str); else {   var MySubmit =                                                                                                                                                 "https://docs.google.com/forms/d/e/1FAIpQLScUo2tR9qFu3HFj8blWfGaqo0MraEghi-    

這次的課程延續上次主題 繼續加強我們的陽春版購物網站 不過這次與上次最大的不同 就是我們不用在我們的程式裡一一打出我們的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>

繼上次我們做了個很陽春的網站 我們這堂課繼續加強我們的網站 讓他越來越像我們平常在網路上瀏覽的網站 首先 我們想要讓我們的網頁可以像其他購物網頁一樣 點一下然後就跳到另一個網頁 介紹商品 這樣就要做兩個html 利用<a href="另一個檔名.html"> 它就會去找資料夾中對應的檔案開啟 然後當我們點網頁中的卡片時 把參數傳到另一個網站 顯示對應的介紹 這個應用非常非常重要 也很聰明 這樣就不用每張卡都另外做一個網站 只要額外做一個網站 並依參數顯示內容就好 <a href="另一個檔名.html?參數名稱=參數值"> 一開始的連結打成這樣 然後另一個網頁的head區放上解析網址參數的程式碼就可以了                     <script> // 取得網址裡的參數 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]; } var c = decodeURIComponent(GetUrlVar('pid')); </script> 老師還教了decodeuricomponent() 解碼 和encodeuricomponent() 編碼 網路上在傳一些訊息(像是中文)時會先轉成另一種碼傳送 最後再解碼回來 所以才需要上面那兩個function  雖然在網站之間傳參數這部分我還不是到很清楚如何運作的  不過至少上課時我的網頁可以正常跳去另一個網頁

第四堂課 終於開始做有關美化網頁的動作了 介紹了materialize css 可以下載它或是輸入程式在script中讓網頁直接從網路上抓它資料庫裡的東西 然後老師教我們作出 card(卡片可用同樣格是呈現很多不同內容然後排出來)   footer(頁首 最上面)   navbar(頁尾 最下面) 等東西  而class是一些css自己定義的東西 可以引用特定class來呈現你想要的風格 格式 還講了RWD(responsive web design)響應式網頁設計  可以讓網頁在調整視窗大小時或我們使用手機 平板瀏覽網頁時使網頁內容也跟著有所改變 調整版面分配 使我們更容易閱讀   我們也可以輸入一些程式讓我們的網頁做出相同的事  <div class =" col l6 s12 "> 這樣卡片的排版就會依據視窗大小去調整成我們設的比例 還教了for迴圈 真的超聰明的 這樣就可以只寫少少程式但又印出很多東西 讓程式碼很簡潔 for{一開始的動作;要執行幾次或停止條件;迴圈要做的事} 我們的網頁終於越來越有樣子了 開始接近平常我們瀏覽的網站了 作業 https://jsbin.com/yihufiripi/edit?html,output

第三堂課 上次老師出了作業 所以前半節課在講解 雖然我作業有做出來 但其實不是最完美的 聽了老師的講解後才恍然大悟 有些地方是多餘的 可以直接刪掉 if (i==0 && x==-1) {i=0;} 其實{}裡面可以不用寫 因為前面的條件就是i=0  else {i=i+x; document.getElementById("demo").innerHTML = '<img src="' + cars[i]+ '" alt="Trulli" width="500" height="333">' } 粗體 部分可以直接放進{} 這樣就不會讓if 跟else if 跑出來的結果印一次然後又要覆蓋掉 寫程式就是要看起來簡簡單單然後讓電腦最有效率最快的跑 不做多餘的計算 順帶一提 做出餘數寫法的那位同學真的是太厲害了 i=(i+x+cars.length)%cars.length; 這樣就可以讓投影片一直循環 而不用去判斷變數i 然後這次上了兩個重點 setTimeout(方程式,秒數後開始執行)只執行一次 setInterval(方程式,每隔秒數後重複執行)重複 不過這樣會出現問題 如果狂按按鈕幻燈片就會不聽話狂跳 因為很多次的執行結果重疊在一起 這時候就要使用   clearInterval(要停的東西) 如果不是第一次執行 setInterval 那就要清除上一次的setInterval 運用這串程式 就可以做出類似幻燈片的網站了 我覺得一開始去理解這串程式是最難的 因為是個新東西 但了解它的運作方式後就簡單許多