由於最近很閑，都不知道干啥，隨便看了一本書-javaScript從入門到精通！每當看到某某書有”精通“兩個字，我都very好奇的，無不對時刻對作者投以欽佩之情，總在想要是我偷偷看了的話，是不是也非常非常厲害了的，是不是也能爐火純青，登峰造極,是不是也能....等等等等.但是我又好害怕的，因為第一篇隨筆呀，怕別人看了都不關注我，我又少了好多粉絲呢，而且都說博客寫的不好的長得丑呢，怎么辦才好呢！坐立不安啊..................
因為javaScript是在瀏覽器里解釋執行的，為了早日能看到修煉成果，我不得不去偷學其他的東西了了不容易啊！清晰的記得有一天我不小心點到了網頁源碼，為此我精簡如下：
<html> <head> <style type="text/css"> selector {property: value} </style> <script language="javascript"> function name(){} </script> </head> <body> hello...world </body> </html>
還有如下口訣：
HTML:
超文本標記語言（HyperText Markup Language）html元素由很多成對的標簽構成,標簽有各種莫名其妙的屬性！其實，碰到這種敵人我只能先翻下書；
CSS：
指層疊樣式表（Cascading Style Sheets) 是能夠真正做到網頁表現與內容分離的一種樣式設計語言，樣式定義如何顯示 HTML 元素 樣式通常存儲在樣式表中 要是沒這的話，估計復雜的好看頁面會死人的；
Dom：
文檔對象模型 (Document Object Model) 在應用程序中，基於Dom的Html分析器將html文檔轉換成一個對象模型的集合（通常稱作是Dom樹），一個html分析器，在對html文檔分析后，不管這個文檔有多簡單或復雜，其中的消息都會被轉化成一顆對象樹 ，通過Dom接口，應用程序可以在任何時候訪問Html文檔的任何一部分數據，因此利用Dom接口的機制也可以被稱為隨機訪問機制。Dom接口提供了一種通過分層對象模型來訪問html文檔的信息的方式，這些分層對象模型依據html文檔結構形成了一個節點樹。
DOM的設計是以對象管理組織（OMG）的規約為基礎的，因此可以用於任何編程語言；要改變頁面的某個東西，JavaScript 就需要獲得對 HTML 文檔中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。
JavaScript：
是一種原型化繼承，面向對象的，動態類型的客戶端腳本語言。是因特網上最流行的腳本語言 ，主要目的是為了解決服務器端語言，比如：Perl遺留的速度問題，為客戶端提供更流暢的瀏覽效果：：有 利於頁面顯示和行為的分離，瀏覽器事件作出響應 瀏覽器事件作出響應；
------是一種解釋性腳本語言（代碼不進行預編譯）
什么是解釋性呢,呢呢，？？？？？？如下：
編譯器翻譯的方式有兩種：一個是編譯，一個是解釋。兩種方式之間的區別在於翻譯時間點的不同。
編譯型程序執行速度快，同等條件下對系統要求較低；解釋型邊解釋邊運行，，效率相對比較低但是不同系統平台間的兼容性較好。
它的基本特點如下：
嵌入動態文本於HTML頁面；
對瀏覽器事件作出響應 ；
讀寫HTML元素 ；
在數據被提交到服務器之前驗證數據；
檢測訪客的瀏覽器信息，控制cookies，包括創建和修改等；
額，我都覺得我很啰嗦了！
0 . 整體
前面我們看到了這個<script>..</script>那這個東西什么作用來的啊？我又千辛萬苦百度了下，發現如下：
<script> 標簽用於定義客戶端腳本，比如 JavaScript。
script 元素既可以包含腳本語句，也可以通過 src 屬性指向外部腳本文件（如:js文件的地址URI）
必需的 type 屬性規定腳本的 MIME 類型。例如:type="text/javascript");
這時我又在想，在頁面這個關系復雜的地方，它是何時何地執行的呢？
head標簽是前於body標簽處理的，在head標簽的所有文件加載完前是沒法進行body內容的展示，且Javascript在頁面裝載時執行的順序就是其引入標記<script />的出現順序， 請看下：
<html> <head> <script language="javascript"> alert("one"); </script> </head> <body onload="alert('three')" > <script language="javascript"> alert("two"); </script> </body> </html> //one two three
知道了它從哪里開始了，那么着既然是一門語言，那又有和其它語言有什么不同呢？（都說了時解釋性的了，啰嗦！）
- 變量：
不像其他語言有固定的數據類型，int,float,javaScript變量可以存放任何類型的值, 內部快速自動的進行兩種不同的類型的轉換;(特么神奇啊，是吧？是啊！)，也有兩個煩人的類型，null，undefined，
如果沒有聲明，默認為undefined，如果聲明了，但是沒賦值，就是null,不知道是不是這個樣子的呢？算了，為了加快速度，我閃了！但為了回憶還是留下點啥！如下：
<html> <head> <script language="javascript"> function cmp(){ alert(null===undefined); //false; alert(typeof null); //Object alert(typeof undefined) //undefined } cmp(); </script> <script language="javascript"> alert(tmp); //輸出 undefined var tmp = 1; alert(tmp); // 1
//也說明是邊解釋邊執行哦
var i,j; i=5;j=7; alert(""+i+j); //57 alert(""+(i+j)); //12; alert(j/i);//1.4 alert(Math.floor(j/i)); //1 </script> </head> <body> hello..木有..world </body> </html>
對於上面，你也會發現：var ={int ,bool ,float,Object,String,undefined,null......}各種數據類型的集合，Ps:對象是一種構造數據類型；
2 . 語法：
好歹我先前也練了乾坤大挪移，什么語法的小菜了，（不過也有她自身的獨特語法，，whih,,in,,等，）
函數：function name(){......} 、、呵呵很簡單了
還有其他兩個函數有必要說出來，這樣我們才可以看到我們程序的結果了：document.write("hello"); alert（“提示什么結果不”）；請看：
<html> <head> <script language="javascript"> function find( ){ document.write("hello"); //會清除原有的內容！ // document.getElementById("id").value="不好"; //沒有注釋的話，報錯，無法設置屬性value，對象為空或未定義， } // find(); </script> </head> <body>dfd <input type="button" onclick="find()"> <input type="text" id="id" name="id" value="你好嗎？"> </body> </html> 看到結果后，會驚奇的發現，因為document.write()把頁面原來存在標簽按鈕的覆蓋了，為什么啊？尼瑪，趕速度啊，先這樣吧！於是你也會驚奇不，看到了吧，可以有事件哎！
因為如此，才增加了它的可練性啊，因為有了互動么！
3.事件：
簡單理解，事件機制是一種觸發機制，要想客戶端的ｊａｖａＳｃｒｉｐｔ程序有 機會唄激活並運行，就必須有一個觸發的事件；（好比老鼠夾子，嘻嘻）；
如何綁定呢：
------1.綁定到元素屬性：即標簽中的屬性，屬性名由事件屬性有一個“ｏｎ”前綴＋事件類型；如：onClick OnMouseOver 這些屬性也被稱為事件處理器：
------2.綁定到對象屬性: Ｄｏｍ節點中的對象屬性, document.getElementById("myButton").onclick=myFunction;
<html> <head> <script language="javascript"> var i=0; function find( ){ document.getElementById("myButton").onclick=find; alert(i); i++; } </script> </head> <body> <input type="button" value="先點元素"onclick="find()"> <input type="button" value="后點對象" id="myButton"> </body> </html>
//結果為 alert（0），alert（1），
不寫了，再寫的話，本來很好的別人也會差評的呢，。但是既然學了那么多，還是留下個數字拼圖游戲吧：如下：很好玩的哦，不信算了。。
截圖炫耀：（其實你不用羡慕了）
<html> <head> <title> five </title> <style type="text/css"> td input { background-color: #00ff00 padding: 0px; padding-top: 0px; padding-right: 0px; padding-bottom:0px; padding-left: 0px; width: 100px; height: 100px; font-size: 80px; } </style> <script language="javascript"> var hasvalue = new array(5); for(i=0;i<=4;i++) hasvalue[i]=new array(5); var s=0,m=0,t; function timecount(){ s++; if (s<10) s="0" + s; else if(s>59){ s-=60; m++; } document.getelementbyid('time').value=m+":"+s; t=settimeout("timecount()",1000) } function reducerandom(){ s=m=0; timecount(); //為何不是遞歸呢？？？？一直在此循環？？ var isok = new array(8); var i,num ; var t=0; for(i=0;i<=8;i++) isok[i]=false; for(i=0;i<=4;i++) for(j=0;j<=4;j++) hasvalue[i][j]=1; hasvalue[3][3]=0; while(1){ num = math.floor(math.random()*8+1) ; if(isok[num]) continue; isok[num]=true; t++; document.getelementbyid(""+t).value=num; if(t==8) break; } document.getelementbyid("9").value=""; } function exchange(button){ var i , j; if(button.value=="") return; if(button.value!=""){ i=math.floor((button.id-1)/3+1); if(button.id%3==0) j=3; else j=button.id%3; hasvalue[i][j]=0; if(hasvalue[i-1][j]==0) { hasvalue[i-1][j]=1;document.getelementbyid(""+((i-2)*3+j)).value=button.value ;button.value=""; } else if(hasvalue[i+1][j]==0) { hasvalue[i+1][j]=1;document.getelementbyid(""+(i*3+j)).value=button.value ;button.value=""; } else if(hasvalue[i][j-1]==0) { hasvalue[i][j-1]=1;document.getelementbyid(""+((i-1)*3+j-1)).value=button.value;button.value=""; } else if(hasvalue[i][j+1]==0) { hasvalue[i][j+1]=1;document.getelementbyid(""+((i-1)*3+j+1)).value=button.value;button.value=""; } else hasvalue[i][j]=1; if(checkover()) { alert("congratulation!!"); cleartimeout(t); } } } function checkover(){ var i; var target; for(i=1;i<=8;i++){ target=document.getelementbyid(""+i); if(target.id!=target.value) return false; } return true; } </script> </head> <body> <br> <center> <input type="button" style="color:#ff0000;" value="開始游戲" onclick="reducerandom()"> <input type="text" id="time" style="color:#ff0000;" > </center> <br><h4 align="center" style="color:#ff66cc;">author:five</h4> <hr> <table align="center" border="0" width="10%" > <tr> <td><input type="button" id="1" onclick="exchange(this)"></td> <td><input type="button" id="2" onclick="exchange(this)"></td> <td><input type="button" id="3" onclick="exchange(this)"></td> </tr> <tr> <td><input type="button" id="4" onclick="exchange(this)"></td> <td><input type="button" id="5" onclick="exchange(this)"></td> <td><input type="button" id="6" onclick="exchange(this)"></td> </tr> <tr> <td><input type="button" id="7" onclick="exchange(this)"></td> <td><input type="button" id="8" onclick="exchange(this)" ></td> <td><input type="button" id="9" onclick="exchange(this)" ></td> </tr> </table> </body> </html>
好了，累死我了；
不會排版，丑死了！
2013-10-22 21:57:57,