【心得】HTML5 WEB APP程式設計

今天學到使用「HTML Forms」搭配「Google表單、Google試算表」，使用表單，就需要搭配後端的程式，才能把輸入完的資料紀錄至資料庫。 每個綱要（資料別）一定要命名，才能在資料庫找到資料，value="預設值"可留可不留，為顯示在，type=submit為送出填入的資料，利用後端程式「action_page.php」把填入的資料送到後端資料庫。 < form   name = "form1"   action = "javascript:formresponse();" >      姓名:  < input   type = "text"   name = "name" >< br   />      電話:  < input   type = "text"   name = "tel" >< br   />          　 < input   type = "submit"   value = "Submit" > </ form > 將原本的的程式(//備註)改為以str空字串，隨著條件多寡顯示，原本的寫法若兩格都空白僅會顯示「姓名不可為空白」，改良後會兩行皆顯示，若送出時姓名與電話都有填妥，就會跑至else的部分，轉跳至填完表單的頁面。 轉跳頁面的網址為：https://docs.google.com/forms/d/e/表單編號/formResponse?usp=pp_url&entry.姓名的編號串=" + 填入的姓名資料 + "&entry.電話的編號串=" + 填入的電話資料，若直接在網頁的網址列輸入「填入的姓名資料」、「填入的電話資料」就會直接把資料傳至資料庫，成為一筆資料。 var   str  =  "" ; if  ( m  ==  null  ||  m  ==  "" ) { ...

 今天學習到「資料庫」的概念，使用了Google試算表的表格資料替代先前用array儲存的資料，除了可以方便更動資料，也能一次儲存大量的資料，也不會因為在程式碼區直接輸入大量資料，發生筆誤時還需要從編譯器debug才能正常運作，只是網頁會跑的比直接在程式碼輸入資料還要久才會顯示畫面，上次學到的分頁也能跟主頁從同一個資料庫呼叫資料來使用。 引算表時需開啟編輯頁複製目標頁面從d/到/pubhtml之間這段 < script   src = 'https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js' ></ script >      < script   type = 'text/javascript' >             var   publicSpreadsheetUrl  =  'https://docs.google.com/spreadsheets/d/ 編輯頁網址 /pubhtml' ; data就是試算表的資料，利用迴圈，可顯示「data[i].每欄名稱」，為那一欄的資料。      function   init () {      Tabletop . init ({           key:   publicSpreadsheetUrl ,           callback:   showInfo ,           simpleSheet:   true           })      }      function   showIn...

今天學習到「傳遞參數」的概念，也就是一個網頁連結到另一個網頁，也是架設網站必學的基礎概念，像是一個商品網站的首頁就有許多其他分頁，能連結到會員登入頁面、各個商品的資訊、品牌故事介紹...等。這次上課主要應用傳遞參數是讓上次做的卡牌們點進去能連接到其更詳細資訊，我上次做了寶可夢的圖鑑，在將其延伸，點擊每隻寶可夢即會進入其介紹頁面， 當分頁網站叫「1012.html」時，在圖片或式整個卡片的語法前方添加以下這行程式碼，即可點擊整個卡片或式圖片就能連接到分頁「1012.html」。 ' <a href="1012.html?pid=　' 傳遞參數語法： < 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 )            ...

今天使用了materializecss套件開始接觸更美觀的CSS語法，CSS能將整個單調的基礎html網頁美化，影響著整個網頁的排版，在materializecss裡面有很多現成素材可以自己去探索、改編，是個很棒很實用的網頁！今天主要使用到的是卡片（CARD）的效果，可以調整卡片大小以及縮放時的排版，隨著視窗大小不同排版也就不同，因此常常看同一個網頁時手機跟電腦排版不同，這就是就是「RWD網站」。 今天也學習到一種常見的基本語法－「迴圈」，可以解決很多重複的程式碼，非常方便，但是需要思考一下才能活用它，是個比較需要邏輯思考的語法，以往寫C或是Python時都是印出一個圖形或是用來計算，今天竟然能用在跑出多張圖卡上！一開始跟著老師寫的時候少了幾個「</div>」一直跑不出來有點挫折，後來跑出來覺得又驚又喜，還有這種用法！（迴圈利用用text+=每段語法） 我的作業選擇「寶可夢圖鑑」去模仿，平常就很喜歡可愛的寶可夢，剛好這次作業很彈性可以把喜歡的元素加入其中，我創了三個array，一個放置圖片；一個放置他們的名字；一個放他們的屬性，利用迴圈就能將12隻寶可夢的完整資訊輕鬆排列出來，不用一行一行複製貼上再修改，真的很方便，我還自我感覺良好，覺得有做到原網頁的60%雛形，很開心地到處分享，希望日後能夠寫出更多好作品！ 作業:https://jsfiddle.net/racoons5/uxd743yf/3/#&togetherjs=by2KxwC3Aa