CSS樣式優先權

http://hungred.com/useful-information/css-priority-order-tips-tricks/

stopPropagation, preventDefault和return false的區別

stopPropagation, preventDefault和return false的區別

http://www.neoease.com/stoppropagation-and-preventdefault-and-return-false/

重點：
1. 自訂事件處理器在前，瀏覽器預設動作在後
2. return false = stopPropagation() + preventDefault()

補充：
之所以會「自訂事件處理器在前，瀏覽器預設動作在後」，似乎是因為瀏覽器預設動作的event handler是綁在最上層的window或document物件上。所以當event bubble up時，瀏覽器預設動作會最後才處理。

JavaScript 閉包

https://developer.mozilla.org/zh-TW/docs/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%96%89%E5%8C%85%E7%9A%84%E9%81%8B%E7%94%A8

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures 

總結：
閉包是一種特殊的物件，裡面包含了兩個東西：函數以及函數建立時的環境

JavaScript心得

1.
var o = new Object();
等於
var o = {};

2.
ride.make
等於
ride['make']
等於ride['m' + 'a' + 'k' + 'e']，依此類推

3.
在頂層(任何函數外)使用var宣告變數時，變數實際上是成為預先定義的window物件上的property。
unqualified的變數也會被認為是window物件的property
例如：var foobar = bar; 等於 window.foo = bar; 等於 foo = bar

4.
在JavaScript裡面下面的程式碼：
function foo()
{
    alert('bar');
}
實際上是建立了一個function物件，然後讓foo這個函數名稱reference到該物件

5.
this這個變數名稱會reference到「函數環境物件」
任何物件都可以作為函數環境物件
哪個物件會作為環境物件是由「函數如何被呼叫」而決定(ex. 一般呼叫時，環境物件為呼叫該函數的物件；用call()或apply()呼叫函數時，環境物件是傳入的第一個參數)

6.
閉包

Bootstrap Grid System運作流程

注意：我不確定底層到底是怎麼實作的，至少我用這個想法去看bootstrap官網的example是可以解釋的通的


Bootstrap Grid System運作流程：
1. 檢查裝置的寬度，依照不同的寬度套用xs, sm, md或lg。
2. 遇到有col-**-*的class時，由本身開始往下檢查。
3. 如果檢查到最後沒有符合，grid就會stack起來。


例子1：
例如你使用超大螢幕，然後在一個row裡面有三個grid：
<div class="col-xs-2">.col-xs-2</div>
<div class="col-xs-8">.col-xs-8</div>
<div class="col-xs-2">.col-xs-2</div>

當你瀏覽該網頁時，會先看有沒有col-lg-*，在這個例子裏面並沒有col-lg-*，所以會往下檢查有沒有col-md-*，在這裡還是沒有。
依此類推，最後發現有col-xs-*，於是就以col-xs-*作為排版，也就是以2-8-2作為外觀。



例子2：
例如你使用中等大小的螢幕(或者你用超大螢幕，然後把瀏覽器縮小成md class的大小)，以致於被瀏覽器歸類為md class，然後在一個row裡面有三個grid：
<div class="col-lg-2">.col-lg-2</div>
<div class="col-lg-8">.col-lg-8</div>
<div class="col-lg-2">.col-lg-2</div>

瀏覽器會先從col-md-*開始往下檢查，但在這個例子裡，一直到最後的col-xs-*都沒辦法找到，所以這三個grid就會stack起來

從PHP到MySQL，再從MySQL回到PHP的這個過程，字串編碼發生了什麼事？

1. 重要觀念：
(1) 字串本質上就只是一堆二進位資料。字串要配合字元編碼使用，才有意義。
(2) 如何從A編碼轉換至B編碼：到A的表格查表，再到B的表格查表

2.
PHP讀取MySQL的整個過程，編碼發生了什麼事：
(1) PHP送出字串到MySQL server。MySQL server會認為接收到的字串，其編碼為character_set_client system variable
(2) MySQL server會將該字串的編碼由character_set_client轉換至character_set_connection編碼
(3) 執行讀取
(4) 將讀取的結果由column的編碼轉換為character_set_results編碼，然後送回給PHP

3.
PHP插入資料到MySQL的整個過程，編碼發生了什麼事：
(1) PHP送出字串到MySQL server。MySQL server會認為接收到的字串，其編碼為character_set_client system variable
(2) MySQL server會將該字串的編碼由character_set_client轉換至character_set_connection編碼
(3) 將字串的編碼由character_set_connection轉換至column的編碼
(4) 寫入字串到欄位裡


總結：
讀：character_set_client -> character_set_connection -> 讀取結果 -> column -> character_set_results
寫：character_set_client -> character_set_connection -> column -> 寫入字串

基本觀念：MySQL字元集和校對

http://dev.mysql.com/doc/refman/5.0/en/charset.html

結論：
1. Character Sets(字元集) and Collations(校對)：
Character Sets: a set of symbols and encodings
example:
A => 0
B => 1
C => 2


Collations: Given a character set, a set of rules for comparing characters in a character set. That is, given a character set, how are you going to compare two strings?
example:
Suppose that we want to compare two string values, "A" and "B".
The simplest way to do this is to look at the encodings: 0 for "A" and 1 for "B". Because 0 is less than 1, we say "A" is less than "B". What we've just done is apply a collation to our character set.
(註：Collations是根據encodings做判斷，而不是以symbols做為判斷)
(註：Any given character set always has at least one collation.)


2.
每一個connection有自己的Character Sets和Collations，詳情請看：
http://dev.mysql.com/doc/refman/5.0/en/charset-connection.html

此外，There are default settings for character sets and collations at four levels: server, database, table, and column. (由上層到下層)
如果創建下層的時候完全沒有指定Character Set and Collation，該層就會沿用上層的Character Set and Collation。例如你在CREATE TABLE的時候完全沒有設定Character Set and Collation的話，該TABLE就會沿用database的Character Set and Collation。
但是如果你在CREATE TABLE的時候只設定character set，那麼MySQL就會幫你把該TABLE的collation設定為該character set的default collation。如果只有指定TABLE的collation，那麼該TABLE的character set就會被設定為該collation對應的character set。

CSS筆記：Positioning

1. 重要觀念
(1) 把網頁想成有兩層：下層跟上層

2. position的方式
(1) position: static
瀏覽器處理HTML元素的預設方式

(2) position: relative
相對於原本在下層的位置做指定的偏移

(3) position: absolute
元素會被移到上層，相對於容器元素做指定的偏移

(4) position: fixed
固定在瀏覽器視窗的某個位置

(5) float
float屬性可以將元素移到上層，並將它放在容器元素的最左側或最右側。位在容器元素中的其他下層元素會沿著float元素流動。
方框的高度會影響後續元素的位置。clear屬性可以讓你表明方框的左側或右側不應該碰到其他任何一個float元素(在同一個容器元素裡面)

CSS筆記：Font

優化之道p.267, 268 FONT Family
serif, san-serif, monospace




優化之道p.267, 268 FONT Size
font-size自動會inherit
可用px, %, em設定
瀏覽器預設文字大小是16px
如果<h1>的font-size是2em, 那麼大小將會是2 * (<h1>所繼承的font-size大小) %亦是如此
h1 { line-height: 1.2em } means that the line height of "h1" elements will be 20% greater than the font size of the "h1" elements. On the other hand:
h1 { font-size: 1.2em } means that the font-size of "h1" elements will be 20% greater than the font size inherited by "h1" elements.
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
http://www.w3.org/Style/Examples/007/units.en.html




優化之道p.267, 268 line-height
行距(leading) = 此行文字的最低點到下一行文字的最高點之間的距離
line-height屬性設定了整行文字的高度，所以font-size和line-height之間的差異就是行距
增加line-height會使得文字行之間的垂直間距變大
http://www.mukispace.com/css-line-height/

CSS筆記：一般原則

優化之道p.238 選擇器的種類
global selector: *
type selector: h1
class selector: p.note, .note (選擇class屬於note的p)
id selector: #nav
child selector: li>a (選擇身為li的小孩的a)
descendant selector: li a (選擇身為li的子孫的a)
adjacent sibling selector: h1+p (The selector matches if E1 and E2 share the same parent in the document tree and h1 immediately precedes p, ignoring non-element nodes (such as text nodes and comments). If this is the case, select that p.)
general sibling selector:h1~p (選取和h1有相同父元素的所有p)

NOTE:
    *[lang=fr] and [lang=fr] are equivalent.
    *.warning and .warning are equivalent.
    *#myid and #myid are equivalent.

關鍵想法: 把h1+p, h1~p等等想成跟regular expression一樣，背後有一個解譯器在運作，只要regular expression合乎語法，解譯器就能按照你的意思去運作。 (我自己是這樣想啦)



優化之道p.239 優先權
如果兩個選擇器相同的話，後者優先
如果一個選擇器較其他選擇器更具指定性，較具指定性規則會凌駕一般性的選擇器。 ex. p b > p, h1 > *
可以在任何屬性值後面加上!important，來表示此規則有最高優先權。




優化之道p.239 繼承
有些屬性會繼承給子孫元素
可以在屬性中用inherit來強迫繼承父元素的屬性值




CSS將每個HTML元素視為獨立的方框。這個方框若非「區塊」方框，就是「行內」方框(block and inline)

FORM的欄位為空時，PHP的處理

FORM的欄位為空時，PHP的處理


背後核心的觀念：
(1) FORM在HTTP背後運作的原理
(2) 有出現在Request裡面的欄位，PHP才會幫它配置記憶體


1.情況一：text欄位為空
<form action='test2.php' method='POST'>
    <input type='text' name='str' />
    <input type='submit' />
</form>

如果str欄位什麼都不輸入就按下submit的話，HTTP在傳送POST Request時會有：
(其他變數)&str=&(其他變數)

PHP接收到(其他變數)&str=&(其他變數)以後，因為看到裡面有str=，所以會配置空間給$_POST['str']這個變數(有在Request裡面的欄位，PHP才會幫它配置記憶體)
由於等號後面並沒有東西，這相當於是"空字串"，所以PHP會把$_POST['str']的值設定為""
也就是說PHP最後的處理是：$_POST['str'] = "";

2. 情況二：checkbox欄位為空
<form action='test2.php' method='POST'>
    <input type='checkbox' name='str[A]' value='A' />
    <input type='checkbox' name='str[B]' value='B' />
    <input type='submit' />
</form>

如果str[A]項目有被勾選，但str[B]項目沒被勾選，那麼POST Request時會有：
(其他變數)&str[A]=A&(其他變數)

也就是說，沒被勾選的項目不會出現在Request裡面，既然沒出現在Request裡，PHP也不會為沒被勾選的項目配置記憶體。
換句話說，PHP不會配置變數$_POST['B']的記憶體。

isset(), empty() and is_null()

http://techtalk.virendrachandak.com/php-isset-vs-empty-vs-is_null/

大致上做個總結：
NULL是用來代表變數尚未被給值，或者變數還沒被配置記憶體

1. isset() - Determines if a variable is set(配置記憶體) and is not NULL
換句話說，只有變數是not null時isset()才會回傳true

2. empty() - Determines if a variable is empty
empty()在下面這些值時會回傳true：an empty string, false, array(), NULL, “0?, 0, and an unset variable

3. is_null() - Finds whether a variable is NULL
要注意，isset()可以被用在unknown variables上，但is_null只能被用在declared variables

題外話：unset()是用來把變數從記憶體中釋放

HTML FORM的input陣列

1.
如果
<input type="checkbox" name="a[100]" value="1" />
<input type="checkbox" name="a[101]" value="2" />
有被勾選

那麼在HTTP傳送時會有：a[100]=1&a[101]=2
PHP收到後會處理成：
$a[100]="1"; <--- 注意，是字串"1"，不是數字1
$a[101]="2";


2.
如果
<input type="checkbox" name="a[]" value="5" />
<input type="checkbox" name="a[]" value="6" />
有被勾選

那麼在HTTP傳送時會有：a[]=5&a[]=6
PHP收到後會處理成：
$a[]="5";
$a[]="6";
所以$a陣列會有兩個元素：5和6

LayoutIt!

http://www.layoutit.com

Interface builder for Bootstrap

Learn CSS Layout

http://learnlayout.com/