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

介绍
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);

// 向数组末尾处添加一个元素
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(1980, 2, 14)
};

// 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>