javascript學習筆記[8]–BOM基本應用[原創]銀行MIS系統前台開發總結（3）-dataTable控制項應用2

           玩了好幾天，玩的也好累了，天天打dota，打cf，和弟弟兩個人開黑，然後老是被殺，弄得英雄1200的初始積分被我刷到了1分，看來我真的不是玩遊戲這塊料，算了，算了，看點書吧，大家新年快樂。

           7.1BOM之源---window對象

           基礎知識：BOM是（Browser Object Model--瀏覽器物件模型），由於瀏覽器是javascript程式的宿主，所以window對象，以及有它產生的對象都稱為宿主對象，它們包括（document，location，navigator，event，history，screen等）。

           如果看過我前面的文章的話，肯定會記得一個印表機的效果，它就是用setInterval()和clearInterval()----定時器，還有setTimeout()和clearTimeout()方法實現延遲調用，用這兩對方法的時候注意估計一下函數執行時間，如果調用的函數執行的時間超過間隔期就會導致不可預知的問題。

           基本的互動操作：

           1. 警告對話方塊----alert(msg);--這個沒啥好說的呢，總應該都會的吧

           2. 確認對話方塊----confirm(msg);--彈出訊息提示框，有是否選項，該方法返回true就是“是”，false就是“否”。

           3. 提示輸入訊息對話方塊---prompt(msg,[input]);--該方法的傳回值是一個整數或者一個字串，表示使用者輸入的訊息。（用的挺少的）

           4. 增強互動式對話方塊---showModalDialog(sURL[, vArguments])---很強大，可以參考這篇文章JS中showModalDialog 詳細使用,個人感覺現在這種方式用的挺少的，貌似記得好像有注入風險，只是有那麼個印象，也不知道對不對，反正我是不太用的

           5. 我自己的辦法：在[原創]銀行MIS系統前台開發總結（3）-dataTable控制項應用2中也有用到，其實很簡單，但是依賴了easyui這個控制項，其他控制項也有類似的辦法，看一下下面的代碼：

<div id="addRowDialog" title="資訊編輯" closed='true'  class="dialog"><!-- //這裡面寫文檔 --></div>
//如果需要使用，就用下面的一段，就可以彈出對話方塊了，個人感覺很棒。
$('#addRowDialog').dialog('open');

          window.open---開啟新視窗，window.close關閉當前視窗，window.focus使視窗擷取焦點。

           7.2 BOM基本應用—管理瀏覽曆史、解析地址和擷取瀏覽器資訊

               1. history（曆史）對象指瀏覽器的瀏覽曆史，使用該對象的方法和屬性，就可以自訂前進和後退功能，具體可以使用以下幾個：

                        back()--表示後退，文法格式為history.back([num])，參數num可選，如果沒有參數，則預設倒退一步。

                        forward()--表示前進，該方法沒有參數

                        go()--跳轉到一個特定的地址，文法格式為history.go([location]);參數location可以是整數或者是URL字串，正數是前進，負數時後                              退，0表示重新整理當前頁，與location.reload()等效。

               2. location對象--很重要的一個對象，使用console.log(window.location);就會得到下面的一系列資訊：

               接下來你就可以通過location.擷取各個屬性，location.XXX()擷取各個方法。

             3.navigator對象 ，使用console.log(window.navigator);查看一些該類的各個方法和屬性，然後需要的話調用就行了。一般用來檢測瀏覽器的。

     7.3 用戶端資料存放區技術

              Web儲存機制是一種通過字串形式的key/value對來安全地儲存和使用資料的方法。

             1. 本機存放區--localStorage，沒有時間限制的資料存放區。

                 使用非常簡單，按照名值對的形式擷取和賦值，如下代碼：    

 var oStorage = window.localStorage;oStorage.userName = "tonylp";

 

              如果是用chorme瀏覽器的話，按一下f12，在Resources下的Local Storage下就可以看到部落格園下博文臨時儲存key為DraftBody，裡面儲存的value值為文章臨時資訊，key為DraftTitle，裡面儲存的是博文title。（我指的是你用網頁編譯器發表博文）。

                還有一個瀏覽器安全色問題，較早版本的FireFox沒有實現localStorage，但它提供了globalStorage屬性用於為指定域建立本機存放區地區。如下代碼實現相容：

var StrDomain = "host.yourDomain"   //指定當前域var oStorage = window.localStorage?window.localStorage:window.globalStorage[strDomain];

 

            2. 會話儲存--sessionStorage，針對一個會話期的資料存放區。

                 sessionStorage針對一個Session進行資料存放區，當使用者關閉瀏覽器視窗後，資料會被刪除。用法與localStorage相同，可以使用者提交表單錯誤時恢複有效資料。

           3. Storage介面--HTML 5規定window.sessionStorage和window.localStorage屬性返回的資料類型都是Storage

               setItem(key,value)--設定key和value值

               getItem(key)--通過key擷取value值

               removeItem(key)--刪除value值

               oStorage.clear()--清除所有key/value對

               oStorage.key(index)--擷取key值。

             3. Web SQL Database

                 （1）使用window對象的window.openDatabase()方法可以再網頁內建立和使用Web SQL Database。

                 （2）執行SQL操作：

                           1）Database.transaction(callback[,errorCallback[, successCallback]]);允許執行讀寫操作

                           2) Database.readTransaction(callback[,errorCallback[, successCallback]]);僅允許執行讀操作

                              參數callback定義一個事物操作要執行的回呼函數，該函數內執行的SQL操作都是事物的，要麼全部成功，要麼全部失敗。

                              參數errorCallback可選，定義一個事物操作失敗時要執行的回呼函數，需要一個參數，參數是SQLError對象。

                              參數successCallback可選，定義一個事物操作成功時要執行的回呼函數，該回呼函數沒有參數。

                 （3） 執行SQL語句：

                            SQLTransaction對象定義了executeSql()方法用於執行SQL操作，文法格式：

                            oSQLTranscation.executeSql(sqlStatement[,arguments[,callback[,errorCallback]]]);

        7.4 新的伺服器通訊技術

                   簡單的說一下伺服器通訊技術，如果需要詳細瞭解還是去看找專門的書吧，我和同學參加的一個html5開發大賽就是用到了web Socket來實現遠端桌面監控。

                   HTTP協議是“請求/響應”模型，現在的通訊方式基本都是這種類型，為了打破HTTP協議的限制，HTML5規範定義了Server-Sent Event和Web Socket，協助伺服器將資料“推送”到用戶端瀏覽器。        

                   1. 伺服器推送技術使用事件來實現(Server-sent Event),用戶端使用EventSource對象實現。

source = new EventSource(url);source.onopen = function(event){};source.onmessage = function(event){};source.onerror = function(event){};

 

                   2.Web Socket可使用戶端Web應用程式與服務端進程實現雙向通訊。

socket= new WebSocket(url);socket.onopen = function(event){};socket.onmessage = function(event){};socket.onerror = function(event){};

 

              好了，就這些吧，看書然後總結也就這些東西，接下來就該開始DOM篇了。書也看了一半多了。

              以上全部都屬個人辛辛苦苦總結，請大家轉載的時候附上原創連結： http://www.cnblogs.com/tonylp