iuilab web programming 20140731
TRANSCRIPT
iuiLab Bootcamp Web Programming
Obie!20140731
Agenda
10:00-11:30 HTML/CSS 101(1)
11:30-12:30 JavaScript 101(2)
12:30-13:30 Lunch Break
13:30-15:00 Bootstrap
15:00-17:00 Parse
<Morning>
10:00-11:00 HTML + CSS 101
11:00-11:10 Coffee Break
11:00-12:30 JavaScript 101
12:30-13:30 Lunch Break
open-source code editor built with the web for the web
HTML!Markup Language
為你的內容貼標籤
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="utf-‐8">5 <title>iuiObie</title>6 </head>
7 <body>8 HTML架構就是這樣簡單。9 </body>10 </html>
A closer look at <TAG>
Opening TAG
<p> </p>Closing TAG
character character
p stands for paragraph.
語意標籤!⾮非語意標籤!巢狀標籤
當然，絕對不⽌止這 些。舉凡可以讓⽂文 字有任何⾏行為改變 的都可以叫語意標 籤。但時間有限。
標籤、元素、屬性
<input type="checkbox" name="tos" id=“chk-tos">
單⼀一標籤<input>構建的checkbox元素，具有type、name、id等屬性
!
<label for=“chk-tos">我已詳閱並同意使⽤用者條款</label> Start TAG
for attribute
End TAG
TAG AttributeElement
標籤、元素、屬性TAG AttributeElement
⼤大部分element具有下列屬性： class, id: 在element加上classname/id以便CSS/JavaScript找到對應的區塊。
title: ⼯工具提⽰示(tooltip)。
style: ⽤用以加上CSS宣告(inline)。⾮非<style>標籤。 tabindex: 決定可focus元素的tab順序。 contenteditable: 可任意編輯元素內容。
MDN HTML Elements
無語意標籤
<div>、<span>
!
通常⽤用來做包裝，以便套⽤用CSS或作為JavaScript的對象
<div> <span>
巢狀標籤
還是得有幾個⼤大規則 • <p><h1~6>只能包parsing content • <ul><ol>只能包<li> • <tr>只能包<td><th>⽽而且本⾝身必需包在<table>裡⾯面
!
更多資訊參閱 HTML elements
⼤大腸包⼩小腸套來套去
nested_tag.html
練 習 時 間10 mins
「網⾴頁設計就像製造⼀一台上好的⾞車。」
⼤大概會⻑⾧長這樣
套⽤用到現有HTML的⽅方法：
1. 直接加⼊入html中並以<style>標籤包住。 (<head>或<body>中皆可)
2. 在<head>中加⼊入外部css檔案連結。<link rel="stylesheet" type="text/css" href=“path/to/file.css">
3. 以inline⽅方式直接編輯 (不太推薦，你不知道會被誰蓋掉)
但是瀏覽器本⾝身也會有預設的CSS，
如果我的網⾴頁版型因此跑掉怎麼辦？
Inheritance!某些屬性預設會繼承⽗父元素
如：color
Cascading Style SheetCascading!元素的最後外觀來⾃自多個樣式定義
1. 瀏覽器預設樣式 2. 瀏覽器使⽤用者樣式 3. 網⾴頁作者指定樣式
—————————————優先權越底下越⾼高
如何判斷優先權待會再說
CSS Reset/Normalization簡單說就像變數宣告完給⼀一個初始值＝0
正常CSS 取消瀏覽器預設樣式 統⼀一不同瀏覽器樣式
CSS SelectorMDN Selector Reference
• Type Selector element { style properties }
• Class Selector element.classname { style properties }
• ID Selectoridname { style properties }
• Group Selector element1, element2 { style properties }
Exercise #n css_selector.html
(basic)
Too much to tell, go get a book.
定義到同⼀一塊元素怎麼辦？
What isCSS Specificity?
Inline Style0
IDs1
Elements!pseudo-elements
2Classes!
Attributes!pseudo-classes
0
Classes
Inline Style
IDs
Elements
0010
1000
0100
0001(C)oder
(In)sane
(I)s
(E)very
每個CSS表⽰示法都可算出Specificity!再來⽐比⼤大⼩小決定優先權。
排!版!這!件!事!之!前
CSS快講完了忍⼀一下
CSS是⼀一堆盒⼦子 疊起來的東⻄西
Inline-level boxes
block-level boxes
其實還省略了很多東⻄西
display
boarder
positioning
align
margin
descendent selector
pixel/em
typography
sibling selector
attribute selector
pseudo-‐element
pseudo-‐class
child selector
z-‐index
有空⾃自⼰己查吧
do { break; }while (ready);
MVC結構
JavaScript可操作DOM API 進⾏行節點的新增移除等操作
試試JavaScript主控台CTRL Shift J CMD OPT J
變數與型態• JavaScript為弱型態(Weak typing)語⾔言。 • ⽤用var定義所有變數。變數可以是任何型態。
var a = 3; 則a的型態為number。 • 有分⼤大⼩小寫(case sensitive)
基本運算
負數：- 算數：* / % + - ⼤大⼩小：== != >= <= > < 邏輯運算：&& || ! 三元運算：? 指派：= += -= *= /= %=
數字 + 數字 是加法。 任何東⻄西 + 字串、字串 + 任何東⻄西：字串串接 轉字串時會嘗試呼叫其 toString() ⽅方法
運算⼦子 ⽂文字與數字
來寫個JavaScript吧
來寫個JavaScript吧
<script>寫在<head>或<body>都可以，執⾏行到就會開始跑(load-and-go)
開始來⼀一點Programming
if條件 /*註解*/swich-‐casefor迴圈
JavaScript其實跟C/C++很像但是⼜又有⼀一點不⼀一樣
variables宣告⽅方式
var a = 100, b;
var c = func(argument);
var d = “string”;
function宣告⽅方式
if-‐else if-‐else-‐endif
if條件式
在HTML中設定好js後可以將⼀一切需要計算的輸出都交給JavaScript處理。
存放位置預設為同⺫⽬目錄，如有較結構化的檔案架構，例如上個⺫⽬目錄裡⾯面可使⽤用src=“../xxx.js”
迴圈for break continuewhile
前⾯面可以加上label搭配break與continue進⾏行彈性操作
迴圈for break continuewhile
迴圈for break continuewhile
⼀一樣不要忘記break;
switch-‐case
無法當作變數使⽤用的字串保留字 / 關鍵字
abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function
goto if implements import in instanceof int interface long native new null package private
protected public return short static super switch synchronized this throw throws transient true try
typeof var volatile void while with
⼀一⼤大堆其他事項特殊值
undefinedNaNnull———————————
String
單引號與雙引號效果相同。\n \\\”\’
length屬性：⻑⾧長度。MDN String Instance
———————————
Objectvar objectname = { key1: value1, key2: value2, … }
———————————
• value可以是函數。 • this代表⾃自⼰己這個物件 • 可隨時增刪成員 • ⽤用key存取成員。如：objectname.key1objectname[“key1”]
class 紅⻱⿔龜粿 { 形狀: 幾何圖形; ⼝口味: 內餡; }
var a = new 紅⻱⿔龜粿(); a.形狀 = 圓形; a.⼝口味 = 紅⾖豆; var b = new 紅⻱⿔龜粿(); b.形狀 = 橢圓形; b.⼝口味 = ⾁肉燥; ...
喘⼝口氣，我們要進化到jQuery了！
第⼀一個!jQuery範例
其!實!也!沒!有!這!麼!難
$使⽤用⽅方式
!$(SELECTOR) or $(“HTML TAG”)
• $是⼀一種function。 • 傳⼊入css selector —> 回傳找到的element • 傳⼊入HTML Tag —> 回傳新蓋的element
jQuery API提供操作DOM結構與屬性的⽅方法 DOM Manipulation -‐ jQuery API
本來的CSS有⼀一個叫做 clearstyle的class
進階操作
複製了原本的<p> 並且加上class
設定新<p>內容
把新<p>內容插⼊入DOM
Event 事件操作
事件與互動
事件被觸發後會執⾏行處理該事件的function，稱作callback。
事件是互動的主要元素。 !
$物件.on(‘事件’, handler); $物件.on(‘事件’, selector, handler);
Event - jQuery API
事件傳遞
「你打我，我跟我媽說。」
是⼀一種泡沫效應
⼦子元素的事件觸發時， ⽗父元素的該事件也會跟 著被觸發 (bubbling)。
終⽌止訊號傳遞的⽅方法event.stopPropagation();
Programmer真的很懶
.on('click', handler) → .click(handler) .on('submit', handler) → .submit(handler)
會重複做很多次的API就⽤用更簡單的⽅方式改寫
如果不加上handler，可以直接跑callback。 .submit()還可以直接送表單XD
Event Object - jQuery APIEvent - jQuery API
常⽤用events整理表單相關 滑⿏鼠相關
• focus, blur：得到/失去focus時 • focusin, focusout：⾃自⼰己或裡⾯面元素得到/失去focus時
• change：表單值(value)改變時 • submit: 表單送出前
• click：被點擊(按下滑⿏鼠＋在元素內放開滑⿏鼠)時
• mousedown, mousemove, mouseup: 按下/移動/放開滑⿏鼠時
• mouseenter，mouseleave：滑⿏鼠進⼊入/離開某元素
鍵盤相關 載⼊入相關• keyup, keydown：按下 / 放開鍵盤時
• ready：DOM載⼊入完成時 • error：圖⽚片載⼊入錯誤時
2
時間限制關係，只能講必須講的。!沒提到的東⻄西請⾃自⾏行參考，領進⾨門⽽而已。!!學(各種)語⾔言有很多要注意的。!命名、效能都是值得研究的部分。!
LU NCHbreak;
Time doesn’t matter, we’ll come back in 1.5 hrs.
<Afternoon>
13:30-15:00 Bootstrap + AngularJS 101
15:00-15:10 Coffee Break
15:10-17:30 Parse 101
17:30-?
所以要寫三四種版型的網⾴頁？
Bui
ld y
our o
wn
bootstrap/!├ less/!├ js/!├ fonts/!├ dist/!│ ├ css/!│ ├ js/!│ └ fonts/!└ docs/! └ examples/
It’s all about lookups.http://www.w3schools.com/
Bootstrap Templates
http://www.parse.com/docs/js/
功能都是「拼」出來的
#endifObie@iuiLab, NCCUDCT!⼤大仁樓R104 #62282!