fr0ntend-br2dge 零時前端教學松 # 1Lesson 1Lesson 2 (7/26) @ 優仕資訊光華旗艦店2F報名：http://g0v-mini.kktix.cc/events/fr0ntend-br2dge時間：7/26 18:00~
選擇器複習、css 元素位置概念、經典的版型javascript則分成兩部分：變數到流程控制、簡單的網頁互動(換背景顏色的按鈕)css和js希望都將時間控制在30分鐘之內，給大家30分鐘的練習時間，屆時要靠助教們補充。最後一個小時，則是希望助教能夠引導學生完成一個小的作品，會保留5-10分鐘的展示時間。當天文字轉播selectortype selector對應到 html 的 tag nameeg:<p>..</p>, <h1>..</h1> ...etcclass selector用 . 號當開頭整份 html 裡面同一個 class 的可以有好幾個eg:<p class='a'> ...</p>.a { ....} // select it.id selector用 # 號當開頭整份 html 裡面同一個 id 只會有一個eg:<p id='b'> .... </p>#b { .... } attribute用 [] 框起來通常用在 input 裡面，因為表單的輸入欄位會有一些比較奇怪的屬性combinatorselector 的組合技 www參考網頁結構的樹狀圖，中間空一個空白的話代表所有直系卑親屬中間一個 > 代表直系卑親屬中的一等親+ 代表下一個弟妹~ 代表任何弟妹用 , 分隔代表社團... (group)pseudo class:first-child 代表長子:nth-child(k) 代表第k個孩子(k從1開始):hover:linkpseudo element雖然 css2 的一個冒號 : 也可以，但 css3 以後用兩個 ::，請大家盡量用兩個冒號::after::before這兩個常用來顯示 icon::first-letter::first-linecss specificity同時符合很多條 css 規則的時候，到底要聽誰的呢？有個用四位數字的算法可以看 specificity 程度，寫網頁的時候，盡量把數字減到越小越好。 specificity calculatorbox modelmargin, border, padding, contentfloatclear:both在上層寫 overflow: auto 會自動幫 clear，跨 browser不用多寫一個 element 來負責 clear！by hannah++css namingoocsssmacssbem參考作法：layout 用的 div 命名也可以考慮用 id，跟 class 區隔，不會不小心選到 by hannah++JavaScriptvar //宣告變數變數像是一個盒子，可以把東西放進去又拿出來js 是一個弱型別語言，型別就是資料的類型，有字串、數字、物件…等，弱型別的意思就是變數沒有一定要講清楚他是什麼型別 (?)應該說js會自動去判斷並且轉換型別?operator +, - , * , / , % (取餘數) 一 &&(and) , ||(or), ! (not)(condition) ? (true) : (false) == vs === ( == 會強制轉型 ex: '1' == 1 為 true) 參考: http://zero.milosz.ca/Control Flowif跟switch中選一個來用，建議用if ，因為在大型專案中，效能會好很多