html5心得 蔡逸蕙

  第七堂 課程內容 HTML Forms → <input type="text" id="fname" name="fname" value="John" ><br> → 空格、勾選 ； 命名 ； 呼應<label for="fname"> ； 預設表單空格內的Answer if() {}  → 大誇號內為一範圍，後不可加；，；是指一動作結束，要加在{}內，可用來區隔if成立後要執行的多個動作 →  大誇號要養成習慣用獨立行! 目的: 在表單尚未完成就送出時，跳出警告視窗，同時提醒有哪些空格還沒填 var str="";  → 宣告一空字串為str if (m==null || m==""){str += "姓名不可為空白!\n"; }  → 當m空格內容不成立時，在str內增加一字串內容 if (str != ""){alert(str)}  → 當str不等於空字串時，宣告str 目的: 結合window.open範例，使我們自己製作的表單頁面可以透過my submit將值回傳到google表單的試算表 <form class="col s12"  name="form1" action="javascript: formresponse() ;"> → 將我們的表單命名成form1 ，並執行formresponse的function var m = document.forms[" form1 "][" name "].value; →  呼叫試算表內name欄為form1的m值 使用者填寫表單 var MySubmit = "https://docs.google.com/forms/d/e/1FAIpQLSenWul2KMJPmx5hlNvECjSlCykt3K1wvRZxK0QpzieIOti5mQ/formResponse?usp=pp_url&entry.1028248596=" +

 第六堂 課程內容 目標： 將前端網頁連結到後端資料庫 nchu-mis-html5-blogger(more plugins)→Tabletop.js→範例資料 前情提點 google試算表內的 電話 要從數值改成 純文字 ，開頭才可以存在0 要記得先把檔案發佈到網路上 var publicSpreadsheetUrl = ' 網址 ' → 把/d/後面改成試算表 序號 網頁載入過程 window.addEventListener('DOMContentLoaded', init ) → 整個網頁載入後再執行init key: publicSpreadsheetUrl → 連結到SpreadsheetUrl的網址，載入google試算表的內容 simpleSheet: true → if成功載入 callback: showInfo → 執行showInfo (callback→function1執行完後再進行function2) alert('Successfully processed!')  → 跳出警示對話框 console.log( data )  → 載入各個data for (i = 0; i < data .length; i++ )  →  把原本有i的地方都改成 ' data[i].表格標題 '  課堂心得         今天的課程主要是為了要建立我們前、後端資料的概念，但因為後端資料庫要學的範圍太多，所以改成以google試算表來建立簡易的資料庫。         一開始我們先用了老師教學網頁裡面Tabletop的範例資料，引出了publicSpreadsheetUrl = '試算表網址'，讓我們的網頁程式可以成功連結到我們後端的google試算表，接著在用for迴圈的概念將我們試算表內的data引用到card內各種title、picture和content，如此一來，我們的網頁就不再像上次一樣是死的，僅僅是將我們要呈現的內容丟在程式裡，而是變成一種活的資料，可以自由引用我們所需要範圍內的data，醬如果以後數據資料越來越多，也不會讓我們的程式看起來很長很複雜~ 課堂練習網址(test1)： https://jsbin.com/ruziyobudu/e

 第五堂 課程內容 nchu-mis-html5-blogger(JS教學)→"這個解析網址參數例子"→複製test2的head部分 目標： 從網頁1連結到網頁2 在網頁1的網址後面加上?     =     在read more後連結到 網頁2 →<a href="2nd.html"? 變數1 = 常數1 & 變數2 = 常數2 & 變數3 = 常數3 ...>→ 網頁2網址=網頁1網址? 變數1 = 常數1 & 變數2 = 常數2 & 變數3 = 常數3 ...... →呼叫變數後，常數組成網頁2 <a href="2nd.html"> 網址 </a>→另開新視窗為 2nd.html <a href="test2.html"?a=1&b=2&c=3...> 網址</a> Var x/y/z= decode URLComponent(GetUrlVar("a/b/c")) ; alert(x+y+z)→宣告x/y/z為變數a/b/c，再將x+y+z的內容alert到嵌入式警示視窗 網頁2網址=1st html網址?a= 1 &b= 2 &c= 3 → if為中文 (網址內不可有中文)，會先encode(編碼將中文字以編碼形式儲存)再decode(解碼) 上週作業的 圖片加上商品頁連結 '<a href="test2.html?pid=' + i + '"><img src="' + pictures[ i ] + '"></a>'; → 連結要與陣列內變數i同步 陣列內文""內可直接用html語法改變字型 GOMAJI內文可能是用google blogger編輯完轉換成html語法再儲存為字串 *用notepad++時，如要複製別的網頁內容，而其中已經有中文字，要去Encoding改成UTF-8-BOM才可正常運作 課堂心得         今天的目標是將上禮拜作業的每張商品card連結到我們目標的商

 第四堂 課程內容 網頁外觀→CSS(教學網)、 Materialize CSS (組合套件) 網頁調整→ RWD (縮放視窗時能自動調整頁面編排) Navbor(頁首)、Footer(頁尾) class→ 引用以定義好的CSS ，ex：class="left hide-on-med-and-down"→when解析度降低(手機、平板)時，隱藏選單並改為下拉式 <li> →項目符號，ex：<ol>→1.2.3...<ul>→· Grid →將頁面分成x等分；Card→ex：s12 m6 l3→始符合RWD for迴圈 (</body前>)→ 陣列 (把卡片標題、圖片、內文等，以陣列表示) var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"]; var text = ""; →宣告 text為空字串 var i; for ( i = 0 ; i < cars.length ; i++ ) → 1st做的動作 ； 條件判斷(守門人) ； 進入迴圈後要幹麻 {text += cars[i] + "<br>" ;} = {text = text+ cars[i] +  "<br>" } → 換行 ， ex：第一次(text = ""→text=""+"BMW<br>"，此時i=1)，第二次(text="BMW<br>"→(text="BMW<br>Volvo<br>")，以此類推，第六次(i不小於6→不符合條件判斷→進入document.getElementById)                     1.~5.為字串迴圈範例，接下來要將其套用在card的標題和圖片上 ↓ var cars = [ "標題", "", "",