1.平穩退化
要支持平穩退化，也就是在瀏覽器禁用js時，不會造成無法瀏覽，知識用戶體驗變差了而已，功能還是實現了的。此時就不能使用javascript偽協議加href屬性來解決。如下。
2.分離js
分離js的關鍵技術就是要結合HTML生命周期，和window對象的onload方法以及元素對象擁有事件函數進行相應的自定義函數綁定。
3.兼容性（對象檢查技術、其實用來確定代碼錯誤位置也很好用）
4.優化代碼(使用特定壓縮工具，壓縮js代碼)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Image Gallery</title>
6 </head>
7 <body>
8 <h1>Snapshots</h1>
9 <ul id = "imagegallery">
10 <li>
11 <a href="images/fireworks.jpg" title="A fireworks display">
12 Fireworks
13 </a>
14 </li>
15 <li>
16 <a href="images/coffee.jpg" title="A cup of black coffee">
17 Coffee
18 </a>
19 </li>
20 <li>
21 <a href="images/rose.jpg" title="A red. red rose">
22 Rose
23 </a>
24 </li>
25 <li>
26 <a href="images/bigben.jpg" title="The famous clock">
27 Big Ben
28 </a>
29 </li>
30 </ul>
31 <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
32 <p id="desp">Choose an Image</p>
33 <script type="text/javascript" src="./scripts/showPic.js">
34 </script>
35 </body>
36 </html>
g 1 function showPic(whichPic) {3 <head>
4 <meta charset="utf-8" />
5 <title>Image Gallery</title>
6 </head>
7 <body>
8 <h1>Snapshots</h1>
9 <ul id = "imagegallery">
10 <li>
11 <a href="images/fireworks.jpg" title="A fireworks display">
12 Fireworks
13 </a>
14 </li>
15 <li>
16 <a href="images/coffee.jpg" title="A cup of black coffee">
17 Coffee
18 </a>
19 </li>
20 <li>
21 <a href="images/rose.jpg" title="A red. red rose">
22 Rose
23 </a>
24 </li>
25 <li>
26 <a href="images/bigben.jpg" title="The famous clock">
27 Big Ben
28 </a>
29 </li>
30 </ul>
31 <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
32 <p id="desp">Choose an Image</p>
33 <script type="text/javascript" src="./scripts/showPic.js">
34 </script>
35 </body>
36 </html>
2 alert("showPic");
3 var source = whichPic.getAttribute("href");
4 var placeholder = document.getElementById("placeholder");
5 placeholder.setAttribute("src",source);
6 var text = whichPic.getAttribute("title");
7 var txtNode = document.getElementById("desp").firstChild;
8 txtNode.nodeValue = text;
9 return false;
10 /*
11 經驗總結:
12 1.由于js是動態語言，所以存在一個很嚴重的問題，
13 那就是你自己取的變量名稱時，盡可能的采用駱駝峰寫法，
14 并且最后借助好的編輯器，有自動補全功能的編輯器，一面
15 拼寫錯誤，這種錯誤低級，而且查找起來十分困難。
16
17 2.如果站點用到多個js文件，因該把它合并到一個文件中。以減少請求次數，提高性能。
18
19 */
20 }
21
22 function addLoadEvent(func) {
23 var oldLoad = window.onload;
24 if(typeof oldLoad == 'function') {
25 window.onload = function() {
26 oldLoad();
27 func();
28 }
29 }else {
30 window.onload = func;
31 }
32 }
33
34 function prepareGallery() {
35 //使用對象檢查技術，檢查所要用到的方法是否可以用。
36 //在js dom中，一切都可視為對象，包括方法，
37 //所以說這是對象檢測技術，檢測這個對象存不存在
38 //下面主要是檢查瀏覽器是否支持這些DOM接口
39 //alert("jsss");
40
41 if(!document.getElementsByTagName) {alert("tag");return false};
42 if(!document.getElementById) return false;
43 if(!document.getElementById("imagegallery")) return false;
44 var gl = document.getElementById("imagegallery");
45 var links = gl.getElementsByTagName("a");
46 //alert(typeof links);
47 for(var i = 0; i < links.length; i++) {
48 links[i].onclick = function() {
49 return showPic(this);
50 }
51 }
52 //alert("end");
53 }
54 addLoadEvent(prepareGallery);
55 /*
56 這里介紹下HTML的聲明周期，當HTML文檔完成加載時，此時DOM節點樹立即構建起來，此時會出發window對象的onload事件
57 所以我們在這個時候執行prepareGallery()函數進行，相應節點對象上的事件綁定是最合適的，因為此時我們能確保整顆節點
58 樹已經構建完畢，我們綁定只要代碼不出錯，就肯定不會出錯。要是不用這個事件來處理。而只是通過srcipt標簽引入，不管是放在
59 head區域還是body結束之前，都無法保證此時DOM節點樹已經構建完成，所以要實現js分離我們一定要用到HTML的聲明周期中的加載完成
60 ，構建完成DOM節點樹而觸發的window.onload事件，有人會問此時document對象是否存在，在BOM中，window對象含有一個成員變量，
61 就是document，所以有window對象，就有document對象。
62 */
63
g3 var source = whichPic.getAttribute("href");
4 var placeholder = document.getElementById("placeholder");
5 placeholder.setAttribute("src",source);
6 var text = whichPic.getAttribute("title");
7 var txtNode = document.getElementById("desp").firstChild;
8 txtNode.nodeValue = text;
9 return false;
10 /*
11 經驗總結:
12 1.由于js是動態語言，所以存在一個很嚴重的問題，
13 那就是你自己取的變量名稱時，盡可能的采用駱駝峰寫法，
14 并且最后借助好的編輯器，有自動補全功能的編輯器，一面
15 拼寫錯誤，這種錯誤低級，而且查找起來十分困難。
16
17 2.如果站點用到多個js文件，因該把它合并到一個文件中。以減少請求次數，提高性能。
18
19 */
20 }
21
22 function addLoadEvent(func) {
23 var oldLoad = window.onload;
24 if(typeof oldLoad == 'function') {
25 window.onload = function() {
26 oldLoad();
27 func();
28 }
29 }else {
30 window.onload = func;
31 }
32 }
33
34 function prepareGallery() {
35 //使用對象檢查技術，檢查所要用到的方法是否可以用。
36 //在js dom中，一切都可視為對象，包括方法，
37 //所以說這是對象檢測技術，檢測這個對象存不存在
38 //下面主要是檢查瀏覽器是否支持這些DOM接口
39 //alert("jsss");
40
41 if(!document.getElementsByTagName) {alert("tag");return false};
42 if(!document.getElementById) return false;
43 if(!document.getElementById("imagegallery")) return false;
44 var gl = document.getElementById("imagegallery");
45 var links = gl.getElementsByTagName("a");
46 //alert(typeof links);
47 for(var i = 0; i < links.length; i++) {
48 links[i].onclick = function() {
49 return showPic(this);
50 }
51 }
52 //alert("end");
53 }
54 addLoadEvent(prepareGallery);
55 /*
56 這里介紹下HTML的聲明周期，當HTML文檔完成加載時，此時DOM節點樹立即構建起來，此時會出發window對象的onload事件
57 所以我們在這個時候執行prepareGallery()函數進行，相應節點對象上的事件綁定是最合適的，因為此時我們能確保整顆節點
58 樹已經構建完畢，我們綁定只要代碼不出錯，就肯定不會出錯。要是不用這個事件來處理。而只是通過srcipt標簽引入，不管是放在
59 head區域還是body結束之前，都無法保證此時DOM節點樹已經構建完成，所以要實現js分離我們一定要用到HTML的聲明周期中的加載完成
60 ，構建完成DOM節點樹而觸發的window.onload事件，有人會問此時document對象是否存在，在BOM中，window對象含有一個成員變量，
61 就是document，所以有window對象，就有document對象。
62 */
63
代碼中的注釋已經詳細說明了代碼是要來干什么的。其實今天改進版本的圖片庫，本來是想學習下HTML生命周期和DOM節點樹的關系，以及和window.onload的關聯。還有學習怎么平穩退化。結果卡殼，卡了半天，差錯，差了半天，起初是其中一個字符編碼有問題，運行結果不對。找了半天才找到。
這里總結寫js的快速調試辦法，當然有點麻煩。
我們在寫js時，如果在定位元素時，我們應該分步定位，步步縮進，在定位時，利用對象檢查技術，我們可以很輕易找到我們出錯的地方。本來這項技術是用來保證兼容性的，但是我們還可以用它來定位錯誤！，在沒有該對象的時候使用alert進行提示。在調試時，我們就可以快速定位錯誤的位置，因為大多數時候我們寫的代碼在我們理解的邏輯上是不會有錯的，但是我們有時可能為定位某個元素，給其加了給id，但是定位時卻拼錯了，這時我們通過對象檢查技術，就可以很快找到錯誤的地方。
2014.07.11
02：44
于福州
]]>
2 <html>
3 <!--我們希望做到的是
4 1.當點擊某個鏈接，我們3希望能留在這個網頁而不是轉到另外一個窗口
5 2.當點擊某個鏈接，我們希望能在這個網頁上同事看到那張圖片和原有的圖片清單
6 -->
7 <!--
8 1.當我們觸發onclick事件時，不僅showPic函數會被調用，鏈接也會起作用，而跳轉到另外一個窗口
9 所以，這里有個知識點，對于a標簽的onclick函數，如果你讓onclick函數返回false，那么瀏覽器
10 會認為你沒有點擊鏈接，也就不會發生跳轉。
11 2.如果吧a標簽看成對象，你會發現這個很容易理解,我們給a標簽增加了onclick函數具體的做什么事情，
12 也就是說onclick函數是a對象里的一個方法，那么這里的this就是指的就是a標簽這個對象。現在你明白
13 為什么要用this了吧（想想C++、java）
14 -->
15 <head>
16 <meta charset="utf-8" />
17 <title>Image Gallery</title>
18 </head>
19 <body>
20 <h1>Snapshots</h1>
21 <ul>
22 <li><a href="images/fireworks.jpg" title="A fireworks display" onclick="return showPic(this);">Fireworks</a></li>
23 <li><a href="images/coffee.jpg" title="A cup of black coffee" onclick="return showPic(this);">Coffee</a></li>
24 <li><a href="images/rose.jpg" title="A red. red rose" onclick="return showPic(this);">Rose</a></li>
25 <li><a href="images/bigben.jpg" title="The famous clock" onclick="return showPic(this);">Big Ben</a></li>
26 </ul>
27 <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
28 <p id="desp">Choose an Image</p>
29 <script type="text/javascript" src="scripts/showPic.js"></script>
30 </body>
31 </html>
showPic.js
function showPic(whichPic) {
var source = whichPic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichPic.getAttribute("title");
var txtNode = document.getElementById("desp").firstChild;
txtNode.nodeValue = text;
return false;
/*
經驗總結:
1.由于js是動態語言，所以存在一個很嚴重的問題，
那就是你自己取的變量名稱時，盡可能的采用駱駝峰寫法，
并且最后借助好的編輯器，有自動補全功能的編輯器，一面
拼寫錯誤，這種錯誤低級，而且查找起來十分困難。
2.如果站點用到多個js文件，因該把它合并到一個文件中。以減少請求次數，提高性能。
*/
}
]]>
]]>
編寫javascript并不需要復雜的工具，其編寫的代碼必須通過HTML/XHTML文檔執行。有兩種方式可以做到，第一種是在head標簽中的script標簽中寫生javascript代碼。
另外一種方式使我們推薦的使用的方式，把js代碼放在外部，在引用進去，引用的位置最好是在HTML文檔最后，</body>之前，這樣可以加快瀏覽器加載頁面的速度。引
用的方式就是在script標簽中的src屬性上賦值，所寫js代碼的路徑。
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 </head>
7 <body>
8
..
9 <script src="file.js"></script>
10 </body>
11 </html>
語法：4 <meta charset="utf-8" />
5 <title></title>
6 </head>
7 <body>
8
..9 <script src="file.js"></script>
10 </body>
11 </html>
一.語句：js的語句可以不加分號而把他們放在不同行上，但這不是好的編程習慣，為了培養好的編程習慣，我們每條語句都給它加上分號，不管是不同行的還是同一行的。
二.注釋：（1）行注釋// (2)段注釋/**/ (3)HTML風格行注釋<!--(不推薦使用，容易于HTML注釋混淆)
三.變量：使用var進行聲明，由于js是動態語言，可以直接用變量賦值代替變量聲明（test = “fuck”，將自動聲明test變量）。但是為了培養編程習慣，請在使用前聲明。
四.變量類型：
（1）字符串：包含在單引號或者雙引號里的字符序列，選擇的簡單原則是：如果字符串包含單引號，則使用雙引號，如果字符串包含雙引號，則是同單引號。如：var mood = "don't ask";淡然也可以用轉義字符,那么你仍然可以使用單引號，var mood = 'don\'t ask';
(2) 數值：可以直接使用整數，浮點數。var a = 3, b= 2.32;
(3) 布爾值:var test=true,sleeping = false;注意布爾值true于字符串"true"是兩碼事
Tips:標量--如果某個數是標量（scalar），它在任意時刻只能有一個值。（1）-（3）都是標量。
(4) 數組:相對于標量，如果想用變量存儲一組值，就得用數組。
4.1創建數組：
使用數組有兩種方式：一種是先聲明數組，在對數字賦值。一種是在聲明是就賦值。
第一種的話，如果使用整數索引，0開始表示第一個。第二種方式，是var test = Array("waht",1,"fuck","come",1.23);//創建了有五個元素的數組
Tips:數組的元素還可以是數組。
4.2關聯數組：（哈希數組）
var test = array();test["first"] = 1;//不推薦使用關聯數組，因為在js中，每中類型其實都是實例對象，所以這種方法的本質是給Array()對象添加
屬性，如上，添加就是first屬性。最好的情況下不應該修改Array對象屬性，而是使用OBject對象。
（5）對象：
與數組一樣的是，對象也是使用一個名字表示一組值。
5.1:創建對象，使用Object關鍵字。如：var lesson = Object();
5.2:使用.號了添加或者獲取對象的屬性。如 lesson.name = "John";
5.3:創建對象的另外一種簡單方法----花括號方法:
var lesson = {name:"John",year:1945};
Tips:
var beatles = {};//創建一個Object對象
beatles.vocalist = lesson;//為Object對象添加vocalist屬性，值為lesson對象。
于是我們這樣獲取值beatles.vacalist.name,beatles.vacalist.year
五.操作： （1）算數操作運算符（+ - * / ）(2)字符串拼接運算符（+）。so：10 + 20 ---30;"10" + 20 --- 1020;(3)另外一個特殊的很好用的是+=，如：var year=2000;var message = "this is "; message += year;---"This is 2000";
六. 條件語句、循環語句、函數（函數有點區別）:略（于C、C++、Java差不多）
七.變量的作用域:
全局變量:可以在腳本任何位置引用。
局部變量：存在于指定函數內部。在函數內部，使用var關鍵字的變量一定是局部變量，而沒有使用的這是全局變量。
function square(num) {
total = num * num;//total為全局
return total;
}
var total = 50;
var number = square(20);//改變total，因為其實全局的。
alert(total);//400
function square(num) {
return total;
}
var total = 50;
var number = square(20);//改變total，因為其實全局的。
alert(total);//400
var total = num * num;//改成這樣就安全了
return total;
}
八:對象：一個對象包含屬性和方法，都可以通過.來訪問屬性和方法。return total;
}
內建對象（其實應該成為類）：Array().可以使用new關鍵字來創建var beatles = new Array();還有Date類、Math類。
宿主對象():也即是JS寄生的環境，如瀏覽器環境，則此時有瀏覽器提供的對象被成為宿主對象，Form、IMage、Element、document
總結:JS對對象的定義有點奇葩，這里總結下，首先同意觀點，可以把它所說的對象看成類，而實例化對象的方法有兩種，一種是使用關鍵字如Array()、Object()等即可，一種是
最通用的顯示的使用new關鍵字，進行對象的創建如new Array()等。
]]>
]]>
1.所謂左連接，其實就是左表不懂，用條件去匹配右表，為true時把右表相應的行并到左表，false時在其上填上NULL。語法規則就是 Atb left join Btb ON conditions;這句話其實可以直接把它當作就是一張表對待。而所謂的右連接只是相對于左連接而言，兩個其實是等價的，Atb left join Btb ON conditions;~Btb right join Atb ON conditions，所以你只要記住左連接，再記住右連接是相對于左連接，其實是等價的就夠了。
2.所謂的內連接，其實就是左右連接的交集，內連接不會把沒匹配的行加入結果集中，但是左右連接會，并且他們會為其填上NULL。語法格式是Atb inner join Btb On conditions
3.如果說左連接時，左表有幾條數據那么，連接后的表的數據條數和左表一樣。對嗎？這是一個錯誤的概念，因為結果集的條數是左右兩個表共同決定的，如果右表中對于左表有兩條符合的記錄，那么在結果集中對應也有兩條，而不是一條。
4.左右連接和內連接相對于全相乘效率上當然是高了很多，這是因為一般而言它們用到了索引。
]]>
from型：
from型主要是為了把某次查詢結果當作查詢表再查詢。一般書寫規則是（sql） as tmp,這里sql是指某次查詢結果，tmp是其別名。
EXISTS型：
EXISTS子查詢，就是用外層的sql作為內層sql的條件，如果條件為真那么輸出外層sql。講的有點抽象，我會再分別整理補充完整這三種子查詢的各個典型例子。
]]>
知識點二：order by還可以和limit結合起來使用，達到取某幾個值的目的，如取第四名到，第六名的值，就是order by desc limit 3,3;即可，至于這兩個參數，第一個其實就是C語言數組中的索引，也是從零開始計數，所以第四名也就是第四個是3，而第二個參數就是從第四名到第六名的個數，6-4+1=3，所以當然是3啦~。
知識點三：如果繼續完善上次的模型，order by是放在最終結果集之后，而limit是作用于order by長生的結果集，所以可以認為，limit長生的結果集是sql查詢中最頂層的結果集。
]]>
這個我們暫且把它稱為結果集1(result1),接著就是聚集函數（max、sum、min、count、avg）和group by還有各個列的計算結果作用于result1長生result2，圖類似，不再畫了。一般聚集函數是配合group by使用才比較有意義。這里還提到了計算結果這一動作，其實說白了，可以把每一個字段看成變量，各個變量在一起計算的過程。這個字段即可用在where、having、group by之后，也可用在select上，但是我們應該注意的是如果你這樣操作如下：
select a,(c -d) as dis from st where dis < 60 group by a;這是錯誤，想想為什么，where子句作用于result0長生result1，也就是dis是屬于result1的，但是where無法作用與result1，如果要再次篩選可以用having，它就相當于第二次的where。這就是我介紹這個模型幫助理解sql語句的重要性，同時也是你理解sql的重要知識。這個相信很多所謂的大學老師是不會講滴。
接著having字句作用與result2長生result3，圖和上圖一樣，你可以自己畫出完整的圖有利于加深理解。
這里再提一個十分重要的概念，上面有提過，就是列看成變量。這十分重要， 這樣你可像寫C語言一樣思考如何寫出簡潔有效率合適的sql語句（結合剛才那個模型），如有張表st，有score字段，該字段記錄學生成績，如果用統計不及格人數你可以這樣做select sum(score < 60) as num from st;這里其實運算score < 60 和sum都是作用于result2.重要的是score < 60比較出來的是布爾值 1 或者0也就是真或者假，這個是很好利用的一點。
以上這兩個例子有助于更深的理解和記憶這個模型，而該模型反過來有助于你sql對語句的理解。
]]>
增加st表：
alter table st add colname type...
修改st表：
alter table st modify colname type...
刪除st表指定列
alter table st drop colname;
更改st表指定列
alter table st change colOldName colNewName type...
自己找數據庫練習上10篇即可。
]]>
date、time、datetime、year
date 表示的范圍是1000 01 01 - 9999 12 31
time 表示的范圍是-838：59：59 - 839：59：59
datetime表示范圍就是兩者的組合
year的表示范圍是以1901為基準，其只用一個字節表示，一共有255中變化，所以可表示到2155年。
還有一種比較特殊的類型是timestamp，它會自動填入日期和時間，值為當前計算機的日期時間值。如創建一張表
create table test(
mytime timestamp default CURRENT_TIMESTAMP,
id int
);
然后插入兩條數據看看，insert into test (id) values(1),(2);
再select * from test；就能看到timestamp的作用了。
]]>
在計算機中我們用二進制表示數字，假設是一個字節，則它有8位
對于正整數表示范圍為：
0000 0000 - 0111 1111
最高位表示符號位，0表示整數
對于負數可能你回認為就是
1000 0000 -1111 1111
表示-0 到 -127
但是這個就和正整數有了重復即-0等于0。而從0到 -127一共有128中變化，0已經重復，那么我們要做的就是消除重復，多表示一種，也就是多表示-128這種變化
那么如何表示呢。我們發現當他們減去-128時剛好為-1 到 -128，所以負數的補碼要轉換成正常的整數就是減去2 ^ N N為其位數
]]>
]]>
3.改
4.查
]]>
我們要解決的問題是怎么連接數據庫（需要的接口，和各種相應參數是什么），怎么選中對應的庫來使用（于是有了怎么查看庫，刪除庫，創建庫的問題），選中庫后怎么查看對應表（于是有了刪除表，清空表的問題，創建表的問題）。
1.首先在windows中我們在cmd下來連接mysql作為對數據庫的一些基本聯系，連接數據庫的命令為mysql -u用戶名 -p密碼，我的root用戶密碼為111111，所以連接語句為mysql -uroot -p111111。
2.接著是怎么選中庫，在這之前你可以查看相應的庫SHOW DATABASES;然后選中庫用USE，假設我選中mydb庫，語法就是USE mydb;對應的刪除庫為DROP DATABASE mydb；
3.是查看表SHOW TABLES查看所有表，查看指定表詳細內容用SELECT語句，最基本的為SELECT * FROM shop;輸出shop表內容。刪除表為DROP TABLE shop，
清空表為truncate tablename，如truncate shop就清空了shop表，改表名，即rename table tablename to newtablename。如果決定全部清空，truncate比delete更快些。
]]>
第一步是去下載php、mysql、apache軟件，mysql軟件可以去官網下、如果覺得下載速度慢，用專用的下載工具，開個會員什么滴，下載還是很快滴、下載要注意的事項是，如果你下載的是apache2 or apache1對應下載php軟件必須是下載VC6編譯版本的，將會被淘汰，如果是xp系統就裝這個吧，如果是win7及之后系統，建議到這里下載http://www.apachelounge.com/，選擇對應版本的vc11的話，php也要是vc11版本的，建議選擇vc11版本。
第二步，安裝mysql、安裝mysql在window下很簡單，有幾個要注意的是，我們一般在安裝時候自己配置安裝環境，在安裝時第一先選擇軟件安裝的位置，第二部選擇（mysql server datafiles）mysql數據庫數據文件存放的位置，第三要記得選擇數據庫默認的編碼為utf8，這樣有較好的兼容性。
第三步，注意選擇時選擇開發者模式還是服務器模式幾乎沒什么差別，無非是內存占用的多少，在選擇數據庫類型時，有三個選項，分別是包含事務型，一種是只支持事務，一種是不支持事務型，我們一般選擇第一個。接著還有一個數據存放位置，這個與剛才那個不同，這個數據專門指定了事務型數據存放的位置，這種數據對應的表叫做innoDB表。
]]>