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，醬如果以後數據資料越來越多，也不會讓我們的程式看起來很長很複雜~ 課堂練習網址...

 第五堂 課程內容 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 = [ "標題", "", "",...

第三堂 課程內容 W2作業檢討 if (i==0 && x==-1) {}   → i在架設中已經為0，{}內可直接空白，代表 不進行改變 else {i=i+x; document.getElementById("demo").innerHTML = '<img src=' + cars[i] + ' alt="Trulli"width="500" height="333">'; } → 將此指令直接放在else裡面，醬if和else if的假設就 不用再蓋一次照片 return → 停止當下function的操作，重新判斷， 退出function ! ()  →  如()不成立，則...... // 文字  →  註解 不用條件判斷 →  餘數 ，i=(i+x+cars.length) % cars.length 自動撥放 settimeout  → 延遲一段時間，且只執行一次 setInterval  → 每隔一段時間執行一次 停止執行 var myVar......clearInterval(myVar);  → 記得要先宣告myVar，告訴clearInterval要停止什麼 使按Play按鈕後不會重複執行 重複按play鍵                          →多次執行setInterval，使 原本的setInterval被覆蓋 ，醬按了stop後，被覆蓋掉的                                         setInterval會找不到、無法停止                     ...

 第二堂 課程內容 把上禮拜body上的字串換成照片呈現 注意""&''要成對出現 <img src=" 照片網址 " alt="Trulli" width="500" height="333">→ 絕對位置 用myFunction1.第一張、 myFunction2.第二張，對照各自照片網址→ not good 一按鈕對依照片效率差 字串常數變數 將照片網址用函數X替換對照                               <button onclick="myFunction1( ' 網址 ' )">上一張</button>                               myFunction1(x)                          '<img src="' + x + '" alt="Trulli" width="500" height="333">'→ +表連接                       💣字串常數必用一引號→變成 一字元                             變數 不可用引號 陣列(Javascript Array) 將var cars內各個網址對應到myFunction1的0、1      ...

 第一堂 課程內容 HTML5 TOTORIALS⟶主網頁 <> Markup⟶標籤多成對， ex：<>~</> <！DOCTYPE html›>⟶第一行必放 <head>事先定義&<body>顯示區⟶完整html必具 <title>⟶頁籤 <H1>~<H6>⟶字型大小 <p>⟶paragraph 文字內容 Tap鍵⟶養成縮排習慣! 超連結語法 HTML Link ⟶<a href:" 網址 " target="_blank"> 字、圖 </a>，  相對路徑⟶需存在同一資料夾! 區塊語法 HTML Layout (動態網頁，把字圖換成另一自己寫的程式，固定每個區塊丟什麼東西)⟶(body)<div Id" A ">；(head)<script>間可放一程式(java script)，ex:function 函數名稱 ( 函數 ){真正執行* 註一 } ；(body)<bottom onclick=" 函數名稱 ( 函數 )"> 按鈕上的字 </bottom>      註一 ⟶ex:document.getElementById(" A ").innerHTML= 換成甚麼 ；alert(" 上跳對話框內的警告文字 ") 課程心得         第一次接觸html，總結覺得是一門真的能學到東西的課，從基本結構語法開始，慢慢往下層內容建構，head和body的部分也要互相連結替換，大小寫或僅是一個空格都有可能造成執行錯誤，雖然感覺以後可能會抓蟲抓得很頭痛，但有預感我會蠻喜歡html這個工具和課程，以前端工程師為目標，可以做自己喜歡的事又可以賺錢錢，開開心心，希望我的樂觀及對學習新知的野心能夠持續到學期末！