JavaScript的原生类型以及Microsoft AJAX Library的相关扩展

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) 从第2个元素删除一个元素
            插入元素:splice(2,0,"hello","world")  从第2个元素开始删除0个元素,并插入俩个元素
            替换元素:splice(2,1,"hello","world") 从第2个元素开始删除1个元素,并插入俩个(也就是说俩个参数替换了删除掉的那个元素)

使用例子:

  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.enqueue(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
     Array.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" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5.     <title>Untitled Page</title>
  6. </head>
  7. <body>
  8.     <form id="form1" runat="server">
  9.         <asp:ScriptManager ID="ScriptManager1" runat="server" />
  10.        <script type="text/javascript" language="javascript">
  11.        function method(elt,index,array){
  12.             this.reslut+="["+index+"."+elt+"]";
  13.        }
  14.        var array="I am Zhang San".split(" ");
  15.        var obj={reslut:""};
  16.        Array.forEach(array,method,obj);
  17.        alert(obj.reslut);
  18.        </script>
  19.     </form>
  20. </body>
  21. </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. }
  11. try{
  12.     throwError();
  13. }catch(e){
  14.     var errorMsg=("Message:"+e.message+"/n");
  15.     if(!e.stack)//IE
  16.     {
  17.         errorMsg+=("Description:"+e.description+"/n");
  18.         errorMsg+=("Number:"+e.number+"/n");
  19.     }else{
  20.         errorMsg+=("Line Number:"+e.lineNumber+"/n");
  21.         errorMsg+=("File Name:"+e.fileName+"/t/n");
  22.         errorMsg+=("Stack:"+e.stack);
  23.     }
  24.     alert(errorMsg);
  25. }
  26. </script>
  27. </body>
  28. </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" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5.     <title>无标题页</title>
  6. </head>
  7. <body>
  8.     <form id="form1" runat="server">
  9.     <div>
  10.         <asp:ScriptManager ID="ScriptManager1" runat="server">
  11.         </asp:ScriptManager>
  12.         <script type="text/javascript" language="javascript">
  13.         function niceError(){
  14.             var e=Error.create("Error Message",{customMessage:"Custom Message"});
  15.             e.popStackFrame();
  16.             return e;
  17.         }
  18.         try{
  19.             throw niceError();
  20.         }catch(e){
  21.              var errorMsg=("Message:"+e.message+"/n");
  22.              errorMsg+=("Line Number:"+e.lineNumber+"/n");
  23.              errorMsg+=("File Name:"+e.fileName+"/t/n");
  24.              errorMsg+=("Stack:"+e.stack);
  25.                 alert(errorMsg);
  26.         }
  27.         </script>
  28.     </div>
  29.     </form>
  30. </body>
  31. </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. }
  19. var a=new String("I am String A");
  20. var b=new String("I am String B");
  21. a.aMethod=b.aMethod=aMethod;
  22. display("aMethod():"+aMethod());
  23. display("a.aMethod():"+a.aMethod());
  24. 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" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5.     <title>无标题页</title>
  6. </head>
  7. <body>
  8.     <form id="form1" runat="server"  >
  9.     
  10.     <asp:ScriptManager ID="ScriptManager1" runat="server">
  11.     </asp:ScriptManager>
  12.     <input id="btn" type="button" value="Click Me--Function.createDelegate" />
  13.     <input id="btn2" type="button" value="Click Me--Function.createCallBack" />  
  14.     <script language="javascript" type="text/javascript">
  15.     var obj={
  16.         text:"hello",
  17.         onClick:function(e){
  18.             alert(this.text);
  19.         }
  20.     };
  21.     //直接调用 返回hello
  22.     //obj.onClick();
  23.     
  24.     // $addHandler($get("btn"),"click",obj.onClick);
  25.     var onClickDeleget=Function.createDelegate(obj,obj.onClick);
  26.     $addHandler($get("btn"),"click",onClickDeleget);
  27.     
  28.     var obj2={
  29.      text:"world",
  30.      onClick:function(e,args){
  31.         alert(this.text+" " +args );
  32.      }
  33.     };
  34.     var onClickDelegate2=Function.createCallback(Function.createDelegate(obj2,obj2.onClick),"world");
  35.     $addHandler($get("btn2"),"click",onClickDelegate2);
  36.     </script>
  37.     </form>
  38. </body>
  39. </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值