posts - 615, comments - 10492, trackbacks - 594, articles - 0
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

公告

新瓶旧酒ASP.NET AJAX(4) - 客户端脚本编程(JavaScript基本类型扩展 - JavaScript Base Type Extensions)

Posted on 2007-06-07 08:47 webabcd 阅读(...) 评论(...) 编辑 收藏
[索引页]
[源码下载]


新瓶旧酒ASP.NET AJAX(4) - 客户端脚本编程(JavaScript基本类型扩展 - JavaScript Base Type Extensions)


作者:webabcd


介绍
Microsoft AJAX Library中的JavaScript基本类型扩展是基于ECMAScript (JavaScript)对象的。关于JavaScript对象的更多信息可以参看http://msdn2.microsoft.com/en-us/library/29f83a2c-48c5-49e2-9ae0-7371d2cda2ff


关键
1、恶补JavaScript
    ·http://www.w3schools.com/js/default.asp
    ·http://msdn2.microsoft.com/en-us/library/hbxc2t98.aspx
    ·《JavaScript 语言参考》中文版
    ·JavaScript 参考教程


示例
Array.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Array.aspx.cs"
    Inherits
="ClientScripting_TypeExtensions_Array" Title="Array Type Extensions" 
%>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    
<script type="text/javascript">
        
    
function btnArray_onclick()
    
{
        Sys.Debug.clearTrace();
    
        
var ary = ['a''b''c'];
        
var result;

        
// 向数组末尾处添加一个元素
        Array.add(ary, 'd');
        Sys.Debug.trace(
"数组ary的元素数:" + ary.length + ",最后一个为:" + ary[ary.length - 1]);

        
var b = ['e''f'];
        
// 向数组末尾处添加一个数组
        Array.addRange(ary, b);
        Sys.Debug.trace(
"数组ary的元素数:" + ary.length + ",最后一个为:" + ary[ary.length - 1]);
        
        
// clone一个数组
        var c = Array.clone(ary);
        Sys.Debug.trace(
"数组c的元素数:" + c.length + ",最后一个为:" + c[c.length - 1]);
        
        
// 清除数组内所有元素
        Array.clear(c)
        Sys.Debug.trace(
"数组c的元素数:" + c.length + ",最后一个为:" + c[c.length - 1]);
        
        
// 移除数组首元素,返回值为移除的元素
        result = Array.dequeue(ary);
        Sys.Debug.trace(
"数组ary的元素数:" + ary.length + ",移除的元素:" + result);
        
        
// 向数组末尾处添加一个元素(enqueue是供client-script底层使用的,不能直接写在我们的代码里,实际应用中请使用add)
        Array.enqueue(ary, "g");
        Sys.Debug.trace(
"数组ary的元素数:" + ary.length + ",最后一个为:" + ary[ary.length - 1]);
        
        
// 数组内是否包含某个元素,返回true或false
        result = Array.contains(ary, "c");
        Sys.Debug.trace(
"数组ary的元素数:" + ary.length + ",其中有“c”吗?" + result);
        
        
// 移除数组中的某个元素
        Array.remove(ary, 'g');
        Sys.Debug.trace(
"数组ary的元素数:" + ary.length + ",最后一个为:" + ary[ary.length - 1]);
   
        
// 移除数组中的某个元素
        Array.removeAt(ary, 4);
        Sys.Debug.trace(
"数组ary的元素数:" + ary.length + ",最后一个为:" + ary[ary.length - 1]);
        
        
// 向数组中添加一个元素
        Array.insert(ary, 4'f');
        Sys.Debug.trace(
"数组ary的元素数:" + ary.length + ",最后一个为:" + ary[ary.length - 1]);

        
// 数组中某个元素的位置,返回值为某元素的位置索引
        result = Array.indexOf(ary, 'd');
        Sys.Debug.trace(
"数组ary的元素数:" + ary.length + ",搜索其中“d”的位置:" + result);
        result 
= Array.indexOf(ary, 'd'3);
        Sys.Debug.trace(
"数组ary的元素数:" + ary.length + ",从索引“3”处开始,搜索其中“d”的位置:" + result);
    
        
var s = "['g', 'h']";
        
// 将字符串解析为数组
        Array.addRange(ary, Array.parse(s));
        Sys.Debug.trace(
"数组ary的元素数:" + ary.length + ",最后一个为:" + ary[ary.length - 1]);
        
        
// foreach
        Array.forEach(ary, appendToString, "|");
    }

    
    
function appendToString(arrayElement, index, array)
    
{
        
// “this”在这里代表上下文参数,即“|”
        Sys.Debug.trace(arrayElement + this + index);
    }

    
    
</script>
    
    
<p>
        
<input type="button" id="btnArray" value="Array测试" onclick="btnArray_onclick()" />
    
</p>
    
<p>
        
<textarea id="TraceConsole" style="width: 500px; height: 500px;"></textarea>
    
</p>
</asp:Content>

运行结果
数组ary的元素数:4,最后一个为:d
数组ary的元素数:6,最后一个为:f
数组c的元素数:6,最后一个为:f
数组c的元素数:0,最后一个为:undefined
数组ary的元素数:5,移除的元素:a
数组ary的元素数:6,最后一个为:g
数组ary的元素数:6,其中有“c”吗?true
数组ary的元素数:5,最后一个为:f
数组ary的元素数:4,最后一个为:e
数组ary的元素数:5,最后一个为:f
数组ary的元素数:5,搜索其中“d”的位置:2
数组ary的元素数:5,从索引“3”处开始,搜索其中“d”的位置:-1
数组ary的元素数:7,最后一个为:h
b|0
c|1
d|2
e|3
f|4
g|5
h|6


Boolean.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Boolean.aspx.cs"
    Inherits
="ClientScripting_TypeExtensions_Boolean" Title="Boolean Type Extensions" 
%>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    
<script type="text/javascript">

    
function btnBoolean_onclick(isShow)
    
{
        
// 解析字符串为Boolean类型
        var bln = Boolean.parse(isShow);
        
        
if (bln)
        
{
            $get('divTestBoolean').style.visibility 
= 'visible';
        }

        
else
        
{
            $get('divTestBoolean').style.visibility 
= 'hidden';
        }

    }


    
</script>

    
<div id="divTestBoolean">
        aaabbbccc
</div>
    
<p>
        
<input type="button" id="btnBooleanTrue" value="Boolean测试(显示)" onclick="btnBoolean_onclick('true')" />
    
</p>
    
<p>
        
<input type="button" id="btnBooleanFalse" value="Boolean测试(隐藏)" onclick="btnBoolean_onclick('false')" />
    
</p>
</asp:Content>

运行结果
单击“Boolean测试(隐藏)”按钮则“divTestBoolean”隐藏
单击“Boolean测试(显示)”按钮则“divTestBoolean”显示


Date.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Date.aspx.cs"
    Inherits
="ClientScripting_TypeExtensions_Date" Title="Date Type Extensions" 
%>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    
<script type="text/javascript">
    
    
var d = new Date();
    
    
// d.localeFormat();
    // 格式化Date
    document.write(d.format("yyyy年MM月dd日HH时mm分ss秒,星期dddd"));
    
    document.write(
"<br />");  
    
    
// Date.parseLocale();
    // 将字符串解析为Date
    document.write(Date.parseInvariant("1980-02-14""yyyy-MM-dd"));
    
    
</script>

</asp:Content>

运行结果
2007年06月07日08时34分17秒,星期Thursday
Thu Feb 14 00:00:00 UTC+0800 1980


Error.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Error.aspx.cs"
    Inherits
="ClientScripting_TypeExtensions_Error" Title="Error Type Extensions" 
%>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    
<script type="text/javascript">
    
    
// 运行一下就知道了
    // Error还有很多扩展功能,可以参看官方文档
    var err = Error.argument("参数""信息");
    
throw err;
    
    
</script>

</asp:Content>

运行结果
弹出确认框,提示内容如下:
出现了运行时间错误。
是否要进行调试?
行249
错误: Sys.ArgumentException: 信息
Parameter name: 参数


Number.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Number.aspx.cs"
    Inherits
="ClientScripting_TypeExtensions_Number" Title="Number Type Extensions" 
%>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    
<script type="text/javascript">
 
    
var a = 999;
    
    
// a.localeFormat();
    // 格式化数字
    document.write(a.format("p"));
    document.write(
"<br />");
    document.write(a.format(
"d"));
    document.write(
"<br />");
    document.write(a.format(
"c"));
    document.write(
"<br />");
    document.write(a.format(
"n"));
    document.write(
"<br />");

    
var x = "100";
    
var y = "200";
    
// Number.parseLocale();
    // 解析字符串为数字
    document.write(Number.parseInvariant(x) + Number.parseInvariant(y));
 
    
</script>

</asp:Content>

运行结果
999.00 %
999
¤999.00
999.00
300


Object.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Object.aspx.cs"
    Inherits
="ClientScripting_TypeExtensions_Object" Title="Object Type Extensions" 
%>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    
<script type="text/javascript">
    
    Type.registerNamespace(
"Demo");
    Demo.Message 
= function(content, publishTime) {
        
this._content = content;
        
this._publishTime = publishTime;
    }

    Demo.Message.registerClass('Demo.Message');

    
var d = new Date();
    
var testMessage = new Demo.Message('hello', d);
    
    
// 顾名思义:getTypeName
    document.write(Object.getTypeName(testMessage));
    
    document.write(
"<br />");
    
    
// 顾名思义:getType
    document.write(Object.getType(testMessage));
    
    
</script>

</asp:Content>

运行结果
Demo.Message
function(content, publishTime) { this._content = content; this._publishTime = publishTime; }


String.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="String.aspx.cs"
    Inherits
="ClientScripting_TypeExtensions_String" Title="String Type Extensions" 
%>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    
<script type="text/javascript">
    
    
var a = " abc ";

    
// 同 C#
    document.write(a.startsWith("a"));
    document.write(
" ");
    document.write(a.endsWith(
"c"));
    document.write(
"<br />");
    
    a 
= a.trimStart();
    document.write(a.startsWith(
"a"));
    document.write(
"<br />");

    a 
= a.trimEnd();
    document.write(a.endsWith(
"c"));
    document.write(
"<br />");
    
    a 
= " " + a + " ";
    a 
= a.trim();
    document.write(a.startsWith(
"a"));
    document.write(
" ");
    document.write(a.endsWith(
"c"));
    document.write(
"<br />");
    
    
var user = 
    
{
        Name: 
"webabcd",
        Birthday: 
new Date(1980214)
    }
;
    
    
// String.localeFormat();
    document.write(String.format("Name:{0},Birthday:{1:yyyy-MM-dd}", user.Name, user.Birthday));
    document.write(
"<br />");
    
    
    
// 自定义格式化的实现
    Type.registerNamespace('Demo');
    
    Demo.CustomFormattedString 
= function() 
    
{
    
    }

    Demo.CustomFormattedString.prototype 
= 
    
{
        
// 实现toFormattedString方法,从而实现自定义格式化
        toFormattedString: function(format) 
        
{
            
return "自定义格式化:" + format;
        }

    }

    Demo.CustomFormattedString.registerClass('Demo.CustomFormattedString');

    document.write(String.format(
"{0:测试信息}"new Demo.CustomFormattedString()));   
              
    
</script>

</asp:Content>

运行结果
false false
true
true
true true
Name:webabcd,Birthday:1980-03-14
自定义格式化:测试信息


OK
[源码下载]