JavaScript的原生類型以及Microsoft AJAX Library的相關擴展(1)

原創 y63964632 2018-08-31 23:37
ajax服務器端還有部分內容,我沒有完全理解,所以就直接記錄下客戶端的編成,等理解了回頭繼續記錄下

1,Microsoft AJAX Library
    Microsoft Ajax Library就是asp.net ajax的客戶端部分,是一個純客戶端框架,並且提供了javaScript擴展和基礎類庫

2,javaScript的原生類型

Object原生類型: 
                   1,  一個無須的集合,可以存放任意類型的對象.
                   2,  常作爲字典使用,如: var o=new Object();
                                                     o.ItemName="";
                                                     o["ItemName"]="";
                   3,  可以使用for-in遍歷字典中的每一項
                   4, 禁止擴展其prototype對象
                   注意: Microsoft Ajax Library並沒有擴展object對象
 下面的方法出現在所有對象中,新對象一般都覆蓋了這些方法
  1,toString()   得到表示當前對象與環境無有關的字符串
  2, valueOf()   返回表示該對象的value    
  3, hasOwnProperty(prorertyName)  對象上是否直接定義了某個屬性
  4, isPrototypeOf(obj)  obj是不是當前對象的prototype對象
  5,propertyIsEnumerable(properyName) 某屬性是否可遍歷                 
Object常用方法例子:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.     <title>無標題頁</title>
  5. </head>
  6. <body>
  7. <div id="message"></div>
  8. <script type="text/javascript" language="javascript">
  9.     function display(text){
  10.         document.getElementById("message").innerHTML+=(text+"<br />");
  11.     }
  12.     function useAsDictionary(){
  13.         var o=new Object();
  14.         //倆種賦值方法
  15.         o["name"]="Zhang San";
  16.         o.age=25;
  17.         //倆種取值方法
  18.         display("Name: "+o.name);
  19.         display("Age: "+o["age"]);
  20.         display("---------------------");
  21.         //也可以這麼娶值
  22.         display("Name:  "+o["name"]);
  23.         display("Age: "+o.age);
  24.         display("---------------------");
  25.     }
  26.     
  27.     function useForIn(){
  28.        //作爲字典覆值取值
  29.         var oo=new Object();
  30.         for(var i=0;i<10;i++){
  31.             var key="key_"+i;
  32.             oo[key]=Math.random();
  33.         }
  34.         //刪除一個元素
  35.         delete oo["key_5"];
  36.         for( var key in oo){
  37.             display("Key:"+key +", Value: "+oo[key]);
  38.         }
  39.     }
  40.     //函數調用
  41.     useAsDictionary();
  42.     useForIn();
  43. </script>
  44. </body>
  45. </html>
Array原生類型
   1,是一個長度可變數組對象的數組對象
   2,構造Array對象方法: new Array();定義空數組
                                 new Array(3);長度爲2的數組
                                 new Array(1,"haha");有倆個元素的數組
  屬性方法:
　　　　　length屬性：　數組長度，可讀寫
　　　　　toString()方法：　返回逗號分割的字符串
　　　　　concat([item1[,item2[,...]]])方法：返回一個新數組，保存了原數組所有的元素和所有的參數

　　　　　push([item1[,item2[,...]]])方法：在數組尾添加一個或多個元素
　　　　　pop()方法：從數組尾去除並返回元素
　　　　　shift()方法：從數組頭去除並返回元素
　　　　　unshift([item1[,item2[,...]]])方法：在數組頭添加一個或多個元素
　　　　　　　
　　　　　join(separator)方法：返回以separator作爲分隔符得到一個連接所有元素的字符串，  類似StringBuilder加快連接字符串
　　　　　reverse()方法：將數組內所有元素逆轉
　　　　　sort(compareFunction)方法：參數爲一個方法，用於比較倆個元素
　　　　　　　　　　　　　　　　　　　省略了參數則直接使用<,==,>比較倆個元素
　　　　　
　　　　　slice(start,end)方法：返回新數組，不影響舊數組
　　　　　　　　　　　　　　　新數組包含從下標start開始到下標end-1的元素
　　　　　　　　　　　　　　　如果省略了end則包含從下標start開始至末尾的所有元素
　　　　　　　　　　　　　　　如果參數爲負數，則表示數組的“倒數”第幾個的下標
　　　　　　　　　　　　　　　如果start元素在end之後或者相同，則返回空數組
　　　　　splice(start,deletCount[,item1[,item2[,...]]])方法：
　　　　　　　　　　　　最靈活，影響當前數組
　　　　　　　　　　　　從下標start的元素開始，刪除deleteCount個元素，並在當前位置開始插入剩餘參數的元素
　　　　　　　　　　　　刪除元素：splice(2,1) 從第２個元素刪除一個元素
　　　　　　　　　　　　插入元素：splice(2,0,"hello","world")  從第２個元素開始刪除０個元素，並插入倆個元素
　　　　　　　　　　　　替換元素：splice(2,1,"hello","world") 從第２個元素開始刪除１個元素，並插入倆個(也就是說倆個參數替換了刪除掉的那個元素)

使用例子：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.     <title>無標題頁</title>
  5. </head>
  6. <body>
  7. <div id="message"></div>
  8. <script type="text/javascript" language="javascript">
  9.     function display(text){
  10.         document.getElementById("message").innerHTML+=(text+"<br />");
  11.     }
  12.     Array.prototype.display=function(){
  13.         //調用了上面的display方法,然後傳入自己字符串
  14.         window.display("a: "+this);
  15.     }
  16.     
  17.     var a=new Array(1,2,3,4,5);//輸出: a={1,2,3,4,5};
  18.     display("Array Test:");
  19.     //給數組尾添加倆個元素
  20.     display("a.push(6,7)");
  21.     a.push(6,7);//{1,2,3,4,5,6,7}
  22.     a.display();
  23.     //給數組頭刪除一個元素並返回刪除的元素
  24.     display("a.shift():"+a.shift());
  25.     a.display();//{2,3,4,5,6,7}
  26.     
  27.     //給數組頭添加一個元素
  28.     display("a.unshift(8)");
  29.     a.unshift(8);
  30.     a.display();//{8,2,3,4,5,6,7}
  31.     
  32.     //數組末尾刪除一個元素並返回刪除元素
  33.     display("a.pup():"+a.pop());
  34.     a.display();//{8,2,3,4,5,6}
  35.     
  36.     //返回一個新數組包含原數組的元素和參數
  37.     
  38.     display("a.concat(9,10):"+a.concat(9,10)); //{8,2,3,4,5,6,9,10}
  39.     a.display(); //{8,2,3,4,5,6}
  40.     
  41.     //用"]["分割數組
  42.     display("'['+a.join('][')+']':"+"["+a.join("][")+"]");//{[8][2][3][4][5][6]}
  43.     a.display();//原數組不變{8,2,3,4,5,6}
  44.     
  45.     //在原來數組中取新數組
  46.     display("a.slice(2,5):"+a.slice(2,5));//得到新數組{3,4,5}
  47.     display("a.slice(2,-2):"+a.slice(2,-2)); //得到新數組{3,4}
  48.     a.display();//原數組不變{8,2,3,4,5,6}
  49.     
  50.     display("a.splice(3,2):"+a.splice(3,2));//刪除(4,5)
  51.     a.display();//{8,2,3,6}
  52.     
  53.     display("a.splice(2,0,7,8):"+a.splice(2,0,7,8));
  54.     a.display();//{8,2,7,8,3,6}
  55.     
  56.     display("a.splice(3,1,9,10):"+a.splice(3,1,9,10));
  57.     a.display();//{8,2,7,9,10,3}
  58.     
  59.     display("a.sort():"+a.sort());
  60.     a.display();//{10,2,3,6,7,8,9}
  61.     
  62.     display("a.sort(function(x,y){return y-x;})");
  63.     a.sort(function(x,y){return y-x;});
  64.     a.display();//{10,9,8,7,3,2}
  65.     
  66.     
  67. </script>
  68. </body>
  69. </html>
Array原生類的擴展(Microsoft ajax Library)

      全都是靜態方法，爲了和其他類庫兼容(Prototype)，提供了一些方用的方法主要是對原來類方法的簡單封裝，主要是爲了提供語義良好的方法名。

　　Array.enqueua(array,item)方法：　入隊列操作，將item添加至array末尾
　　Array.dequeue(array)方法：　出隊列操作，返回並刪除array的第一個元素
　　Array.addRange(array,items)方法：將items數組中所有元素添加至array末尾
　　Array.contains(array,item)方法:　如果array中包含item元素，則返回true，否則返回false
      Array.clear(array)方法：　清除array中的所有元素

　　Array.insert(array,index,item)方法：　將item插入至array中下標爲index的位置
　　Array.remove(array,item)方法：　從array中移除下標爲index的元素
　　Array.removeAt(array,index)方法：　從array中移除下標爲index的元素
　　Array.clone(array)方法：　放回一個與array相同的新數組
　　Array.parse(value)方法：　將表示數組的json 字符串變爲一個數組對象　
　　Array.indexOf(array,item,start)方法：獲得item在array中的下標，從下標爲start開始查找．如果array中沒有item元素，那麼返回-1
     Ａrray.add(array,item)方法：將item添加至array末尾，它和Array.enqueue其實是同一個函數
　  Array.forEach(array,method,instance)方法: 移instance爲上下文this引用，將array中的每個元素依次作爲參數，循環調用method方法
　　
　下面的例子介紹下　Array.forEach()方法：　
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXEnabledWebApplication5._Default" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" >
  6. <head runat="server">
  7.     <title>Untitled Page</title>
  8. </head>
  9. <body>
  10.     <form id="form1" runat="server">
  11.         <asp:ScriptManager ID="ScriptManager1" runat="server" />
  12.        <script type="text/javascript" language="javascript">
  13.        function method(elt,index,array){
  14.             this.reslut+="["+index+"."+elt+"]";
  15.        }
  16.        var array="I am Zhang San".split(" ");
  17.        var obj={reslut:""};
  18.        Array.forEach(array,method,obj);
  19.        alert(obj.reslut);
  20.        </script>
  21.     </form>
  22. </body>
  23. </html>
　　　
Error元生類型

　　表示錯誤對象　子類有：　EvalError,URIError等
　　捕獲方式：　
　　　　　　　try{throw new Error()} carch(e){...}
      Error對象IE和fireFoc共有屬性：　message錯誤信息
　　　　　　　　　　　　特定屬性：　　　
　　　　　　　　　　　　IE:description:同message屬性
　　　　　　　　　　　　　number:錯誤編號，只有腳本引擎拋出的錯誤纔有該屬性
　　　　　　　　　　　　FireFox:fileName:創建錯誤的文件
　　　　　　　　　　　　　　　　lineNumber:創建錯誤對象的行號
　　　　　　　　　　　　　　　　stack:創建錯誤時的堆棧信息
例子：　拋出捕獲顯示錯誤：　
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.     <title>無標題頁</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript" language="javascript">
  8. function throwError(){
  9.     throw new Error("Custom Error!");
  10. }
  12. try{
  13.     throwError();
  14. }catch(e){
  15.     var errorMsg=("Message:"+e.message+"/n");
  16.     if(!e.stack)//IE
  17.     {
  18.         errorMsg+=("Description:"+e.description+"/n");
  19.         errorMsg+=("Number:"+e.number+"/n");
  20.     }else{
  21.         errorMsg+=("Line Number:"+e.lineNumber+"/n");
  22.         errorMsg+=("File Name:"+e.fileName+"/t/n");
  23.         errorMsg+=("Stack:"+e.stack);
  24.     }
  25.     alert(errorMsg);
  26. }
  28. </script>
  29. </body>
  30. </html>
Error原生類型的擴展
　Error.create(message,errorInfo)方法：創建新的Error對象
　　　　　　　　　　　　　　　　　　　 將Error對象的message屬性設爲true
                                                          將errorInfo上的信息附加到Error對象
　Error.prototype.popStackFrame()方法：爲Error對象整理出更優雅的信息對ie無效，方法是返回Error對象而不是拋出則在返回前條用這個方法

例子：　

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AJAXEnabledWebApplication5.WebForm1" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" >
  6. <head runat="server">
  7.     <title>無標題頁</title>
  8. </head>
  9. <body>
  10.     <form id="form1" runat="server">
  11.     <div>
  12.         <asp:ScriptManager ID="ScriptManager1" runat="server">
  13.         </asp:ScriptManager>
  14.         <script type="text/javascript" language="javascript">
  15.         function niceError(){
  16.             var e=Error.create("Error Message",{customMessage:"Custom Message"});
  17.             e.popStackFrame();
  18.             return e;
  19.         }
  20.         try{
  21.             throw niceError();
  22.         }catch(e){
  23.              var errorMsg=("Message:"+e.message+"/n");
  24.              errorMsg+=("Line Number:"+e.lineNumber+"/n");
  25.              errorMsg+=("File Name:"+e.fileName+"/t/n");
  26.              errorMsg+=("Stack:"+e.stack);
  27.                 alert(errorMsg);
  28.         }
  29.         </script>
  30.     </div>
  31.     </form>
  32. </body>
  33. </html>
Function原生類型

　與Array,String等類型處於同等地位，每個方法均爲Function類型的實例
 　　如：typeof(Array)==typeof(Function)=="function"
　方法調用時候根據發起的對象來確定this上下文的引用：
　Function.prototype.apply(instance,args)　
   Function.prototype.call(instance,[arg1[,arg2[,...]]])　

使用例子：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.     <title>無標題頁</title>
  5. </head>
  6. <body>
  7. <div id="message"></div>
  8. <script type="text/javascript" language="javascript">
  9. function display(text){
  10.     document.getElementById("message").innerHTML+=(text+"<br />");
  11. }
  12. function aMethod(){
  13.     var result=this.toString();
  14.     for(var i=0;i<arguments.length;i++){
  15.         result+=(","+arguments[i]);
  16.     }
  17.     return result;
  18. }
  20. var a=new String("I am String A");
  21. var b=new String("I am String B");
  22. a.aMethod=b.aMethod=aMethod;
  24. display("aMethod():"+aMethod());
  25. display("a.aMethod():"+a.aMethod());
  26. display("b.aMethod():"+b.aMethod());
               display("a.aMethod.call(b,1,2,3):"+a.aMethod.call(b,1,2,3));
               display("b.aMethod.apply(a,[1,2,3]):"+b.aMethod.apply(a,[1,2,3]));
  1. </script>
  2. </body>
  3. </html>

Function原生類型擴展

  Function.createDelegate(instance,method)方法：得到一個方法引用，執行它時則會調用method方法，並保證method方                                                                         的上下文飲用爲instance
　Function.createCallBack(method,context)方法：得到一個方法引用，執行它時則調用method方法,並將context作爲額外　　　　　　　　　　　　　　　　　　　　　　　　的參數傳入

例子：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="AJAXEnabledWebApplication5.WebForm2" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" >
  6. <head runat="server">
  7.     <title>無標題頁</title>
  8. </head>
  9. <body>
  10.     <form id="form1" runat="server"  >
  11.     
  12.     <asp:ScriptManager ID="ScriptManager1" runat="server">
  13.     </asp:ScriptManager>
  14.     <input id="btn" type="button" value="Click Me--Function.createDelegate" />
  15.     <input id="btn2" type="button" value="Click Me--Function.createCallBack" />  
  16.     <script language="javascript" type="text/javascript">
  17.     var obj={
  18.         text:"hello",
  19.         onClick:function(e){
  20.             alert(this.text);
  21.         }
  22.     };
  23.     //直接調用 返回hello
  24.     //obj.onClick();
  25.     
  26.     // $addHandler($get("btn"),"click",obj.onClick);
  27.     var onClickDeleget=Function.createDelegate(obj,obj.onClick);
  28.     $addHandler($get("btn"),"click",onClickDeleget);
  29.     
  30.     var obj2={
  31.      text:"world",
  32.      onClick:function(e,args){
  33.         alert(this.text+" " +args );
  34.      }
  35.     };
  36.     var onClickDelegate2=Function.createCallback(Function.createDelegate(obj2,obj2.onClick),"world");
  37.     $addHandler($get("btn2"),"click",onClickDelegate2);
  38.     </script>
  39.     </form>
  40. </body>
  41. </html>



　　
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

C#序列化對象轉爲爲XML格式字符串

實習公司原來的左側菜單是通過js進行ajax請求一個xml文件得到一個xml對象，然後拼接html文件，現在需要從數據庫取數據生成xml，因爲保密關係，太詳細的不能放出來，簡單說下流程 1、C#後臺執行SQL，得到DataTable對象

请叫我算术嘉 2020-07-08 10:17:16

asp.net 傳值

在通過傳值打開另一個頁面時 判斷是否有值傳過來     在Page_Load()中寫入 if(!Page.IsPostBack) { if(Request.querystring[ "傳值 "]!=null)  // Request

该用户懒的设置 2020-07-08 07:54:47

在ASP.NET 2.0中建立站點導航層次

站點導航提供程序--ASP.NET 2.0中的站點導航提供程序暴露了應用程序中的頁面的導航信息，它允許你單獨地定義站點的結構，而不用考慮頁面的實際物理佈局。默認的站點導航提供程序是基於XML的，但是你也可以通過編寫自定義的提供程序，從任何

yazoli2002 2020-07-08 03:08:01

Request.ServerVariables[] 學習

Request.ServerVariables("Url")  返回服務器地址 Request.ServerVariables("Path_Info")  客戶端提供的路徑信息 Request.ServerVariables("Appl_

leonkin 2020-07-08 11:23:15

Request.Browser 學習

SP中的Browser Capbilities組件嫩構獲取更深層次的瀏覽器信息，ASP.NET中的Browser對象可以認爲是Browser Capabilities組件的升級版本，只是ASP.NET中的Browser對象是通過調用Req

leonkin 2020-07-08 11:23:15

微信第三方平臺開發-從開始到測試

一：說明 *當前文檔比較簡陋，如果有其他方法不明確可以留言。 項目框架：.net freamwork 4.6.1 開發工具：vs2019 本次開發使用了Senparc.Weixin組件，地址：https://github.com/Jeff

a123_z 2020-07-08 08:40:05

ASP FSO文件操作

FSO 不能操作二進制文件，要操作二進制文件，請使用：ADODB.Stream。 創建文件 dim fso, f set fso = server.CreateObject("Scripting.FileSystemObject

该用户懒的设置 2020-07-08 07:54:47

ASP.NET鏈接網站的兩種方法

(1) System.Diagnostics.Process.Start("http://www.baidu.com"); (2)using System.Diagnostics //ProcessStartInfo startI

z0203153008 2020-07-08 06:36:40

System.ArgumentException: 指定字符串與主題所要求的形式不符。 在 System.Net.Mail.Message.set_Subject(String value)

最近看系統日誌時，常常發現下面錯誤： System.ArgumentException: 指定字符串與主題所要求的形式不符。  在 System.Net.Mail.Message.set_Subject(String value) 後用

Jimcn2009 2020-07-08 05:52:13

Repeater datalist

前臺:<ul> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <li><%#Eval("字段")%></li> </ItemTemplate

delphiorang 2020-07-08 05:31:17

在ADO.NET中用參數化查詢縮短開發時間

 一段時間以來，存儲過程一直是企業應用程序開發數據訪問的首選方法。存儲過程的安全性更高、封裝能力更強，並能執行復雜的邏輯，且不會打亂應用程序代碼。但是

li_yu_hai 2020-07-08 05:05:37

ASP.NET實現登錄驗證碼

製作驗證碼主要是利用了C#的GDI繪製，效果如下圖所示： html代碼： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="te

HerryDong 2020-07-08 04:12:25

Bootstrap TreeView使用教程三：製作樹形下拉框

前兩篇博客介紹了Bootstrap TreeView的使用方法，這篇博客就來介紹一下如何利用Bootstrap TreeView製作一個樹形下拉框，先來看一下效果： 其實原理很簡單，先創建一個文本框，然後在文本框下方創建樹，讓其

HerryDong 2020-07-08 04:12:25

Bootstrap TreeView使用教程一：樹的構造和顯示

很多時候我們需要在網頁上顯示存在層級隸屬關係的數據，例如省、市、區這三者就存在隸屬關係，如果要對它們進行顯示就需要用到樹控件。百度了很久，發現同志們經常用的有zTree、jsTree等等，但考慮到工作中的前端庫是Bootstrap

HerryDong 2020-07-08 04:12:25

刪除GridView記錄時給確認消息

如果你想在刪除GridView中一行記錄的時候讓系統給出一個提示信息，使得用戶能在確認刪除前能選擇放棄此操作，我認爲最簡單的方法是給GridView增

lijigang1982 2020-07-08 03:02:56