Virgo_S
- 浏览: 1140729 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
RebeccaZhong：
严重: StandardWrapper.Throwableco ...
三步发布java方式的rest服务 -
RebeccaZhong：
严重: StandardWrapper.Throwableco ...
三步发布java方式的rest服务 -
冷酷月光：
楼主。请教一下。arcgis for android 有提供地 ...
ArcGIS API For Android离线地图的实现 -
winney117：
请问如何GET已有网页上的指定内容？比如百度文库中的某一篇文章 ...
三步发布java方式的rest服务 -
zige1012：
您好，我想问问我想换个自己地图的切片，也有4层（L0-L3）， ...
ArcGIS API For Android离线地图的实现
Prototype实战教程----1.$$
Prototype实战教程----2.$A
Prototype实战教程----3.$F
Prototype实战教程----4.$H
Prototype实战教程----5.$R
Prototype实战教程----6.$
Prototype实战教程----7.AJAX
Prototype实战教程----8.顶层对象
Prototype实战教程----9.Array
Prototype实战教程----10.Element
Prototype实战教程----11.Inserttion
Prototype实战教程----12.Event.observe
Prototype实战教程----13.Form.Element.Observer
Prototype实战教程----14.Hash
Prototype实战教程----15.ObjectRange
Prototype实战教程----16.string
prototype 1.5 【转】
一直没有没有时间看prototype,现在好了，已经更新到了1.5 pre1,呵呵,强大的功能不得不学习啊,这个是提升自己JS能力的又一个捷径.
1. Prototype是什么?
或许你还没有用过它， prototype.js 是一个由Sam Stephenson写的JavaScript包。这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端， 高交互性WEB应用程序的重担。轻松加入Web 2.0特性。
如果你最近体验了这个程序包，你很可能会发现文档并不是它的强项之一。像所有在我之前的开发者一样，我只能一头扎进prototype.js的源代码中并且试验其中的每一个部分。 我想当我学习他的时候记写笔记然后分享给其他人将会很不错。
我也一起提供了这个包的对象，类，方法和扩展的 非官方参考 。
2. 通用性方法
这个程序包里面包含了许多预定义的对象和通用性方法。编写这些方法的明显的目的就是为了减少你大量的重复编码和惯用法。
从Prototype1.5.x版本开始，你可以更方便的如下面代码一样操作DOM对象了:
程序代码
这样的改变有什么益处呢？ 我觉得一来是更面向对象了，二来就是便于将来IDE里的代码提示。
2.1. 使用 $()方法
$() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写，
就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。
比起DOM中的方法，这个更胜一筹。你可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。下面的例子会向你描述这些。
程序代码
这个方法的另一个好处就是你可以传入id字符串或者元素对象自己，这使得在创建可以传入任何形式参数的方法的时候， 它变得非常有用。
2.2. 使用$F()方法
$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值，如文本框或下拉框。 这个方法可以传入元素的id或者元素自己。
程序代码
2.3. 使用Try.these()方法
Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易， 他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。
在下面的例子中， xmlNode.text在一些浏览器中好用，但是xmlNode.textContent在另一些浏览器中正常工作。 使用Try.these()方法我们可以得到正常工作的那个方法的返回值。
程序代码
3. Ajax 对象
上面提到的共通方法非常好，但是面对它吧，它们不是最高级的那类东西。它们是吗？你很可能自己编写了这些甚至在你的脚本里面有类似功能的方法。但是这些方法只是冰山一角。
我很肯定你对prototype.js感兴趣的原因很可能是由于它的AJAX能力。所以让我们解释当你需要完成AJAX逻辑的时候，这个包如何让它更容易。
Ajax 对象是一个预定义对象，由这个包创建，为了封装和简化编写AJAX 功能涉及的狡猾的代码。 这个对象包含一系列的封装AJAX逻辑的类。我们来看看它们的一些。
3.1. 使用 Ajax.Request类
如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程， 然后解析出响应 然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。
为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。
假如你有一个应用程序可以通过url http://yoursever/app/get_sales?empID=1234&year=1998与服务器通信。它返回下面这样的XML 响应。
程序代码
用 Ajax.Request对象和服务器通信并且得到这段XML是非常简单的。下面的例子演示了它是如何完成的。
程序代码
你看到传入 Ajax.Request构造方法的第二个对象了吗？ 参数{method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get'的属性，另一个属性名为 parameters 包含HTTP请求的查询字符串，和一个onComplete 属性/方法包含函数showResponse。
还有一些其它的属性可以在这个对象里面定义和设置，如 asynchronous，可以为true 或 false 来决定AJAX对服务器的调用是否是异步的（默认值是 true）。
这个参数定义AJAX调用的选项。在我们的例子中，在第一个参数通过HTTP GET命令请求那个url，传入了变量 pars包含的查询字符串， Ajax.Request 对象在它完成接收响应的时候将调用showResponse 方法。
也许你知道， XMLHttpRequest在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法 ，Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。 就像我们例子中的 onComplete 。你传入的方法将会被用一个参数调用，这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP结果代码的 status 属性。
还有另外两个有用的选项用来处理结果。我们可以在onSuccess 选项处传入一个方法，当AJAX无误的执行完后调用， 相反的，也可以在onFailure选项处传入一个方法，当服务器端出现错误时调用。正如onXXXXX 选项传入的方法一样，这两个在被调用的时候也传入一个带有AJAX请求的XMLHttpRequest对象。
我们的例子没有用任何有趣的方式处理这个 XML响应， 我们只是把这段XML放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息，然后更新页面中的某些元素， 或者甚至可能做某些XSLT转换而在页面中产生一些HTML。
3.2. 使用 Ajax.Updater 类
如果你的服务器的另一端返回的信息已经是HTML了，那么使用这个程序包中 Ajax.Updater 类将使你的生活变得更加得容易。用它你只需提供哪一个元素需要被AJAX请求返回的HTML填充就可以了，例子比我写说明的更清楚。
程序代码
你可以看到，这段代码比前面的例子更加简洁，不包括 onComplete 方法，但是在构造方法中传入了一个元素id。 我们来稍稍修改一下代码来描述如何在客户端处理服务器段错误成为可能。
我们将加入更多的选项， 指定处理错误的一个方法。这个是用 onFailure 选项来完成的。
我们也指定了一个 placeholder 只有在成功请求之后才会被填充。为了完成这个目的我们修改了第一个参数从一个简单的元素id到一个带有两个属性的对象， success (一切OK的时候被用到) 和 failure (有地方出问题的时候被用到) 在下面的例子中没有用到failure属性，而仅仅在 onFailure 处使用了 reportError 方法。
程序代码
如果你的服务器逻辑是返回JavaScript 代码而不是单纯的 HTML 标记， Ajax.Updater对象可以执行那段JavaScript代码。为了使这个对象对待响应为JavaScript，你只需在最后参数的对象构造方法中简单加入evalScripts: true属性。
<html>
<head>
<title>Test $$</title>
<script src="prototype.js"></script>
<script>
function test$$(){
/**//*
in case CSS is not your forte, the expression below says
'find all the INPUT elements that are inside
elements with class=field that are inside a DIV
with id equal to loginForm.'
*/
var f = $$('div#loginForm .field input');
var s = '';
for(var i=0; i<f.length; i++){
s += f[i].value + '/';
}
alert(s); // shows: "joedoe1/secret/"
//now passing more than one expression
f = $$('div#loginForm .field input', 'div#loginForm .fieldName');
s = '';
for(var i=0; i<f.length; i++){
s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/';
}
alert(s); //shows: "joedoe1/secret/User name:/Password:/"
var temp=$$('div#loginForm .field');
alert(temp.innerHTML);
}
function testtoColorPart()
{
var num=new Number(50);
alert(num.toColorPart());
}
</script>
<div id='loginForm'>
<div class='field'>
<span class='fieldName'>User name:</span>
<input type='text' id='txtName' value='joedoe1'/>
</div>
<div class='field'>
<span class='fieldName'>Password:</span>
<input type='password' id='txtPass' value='secret' />
</div>
<input type='submit' value='login' />
</div>
<input type=button value='test $$()' onclick='test$$();' />
<input type=button value='testtoColorPart' onclick='testtoColorPart();' />
</body>
</html>
Prototype实战教程----2.$A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>$A</title>
<script language="javascript" src="prototype.js"
type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function showOptions() {
var someNodeList = $("lstFramework").getElementsByTagName("option");
var nodes = $A(someNodeList);
var info = [];
nodes.each (function(node){
info.push(node.value + ": " + node.innerHTML);
});
alert(info.join("\r\n"));
}
</script>
</head>
<body>
<form>
<select id="lstFramework" size="10">
<option value="1">Prototype</option>
<option value="2">Script.aculo.us</option>
<option value="3">Dojo</option>
<option value="4">YUI</option>
</select>
<input onclick="showOptions();" type="button" value="Show the options">
</form>
</body>
</html>
Prototype实战教程----3.$F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>$F</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script type="text/javascript" language="javascript">
function test()
{
alert($F("userName"));
}
</script>
</head>
<body>
<form>
<input type="text" id="userName" value="test username">
<input type="button" value="click" onclick="test()">
</form>
</html>
Prototype实战教程----4.$H
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>$H</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script>
function test()
{
// 创建一个对象
var obj = {
key1: 1,
key2: 2,
key3: 3
};
// 将其转换为Hash对象
var hash = $H(obj);
alert(hash.toQueryString());
}
</script>
</head>
<body>
<form>
<input type="button" value="click" onclick="test()" />
</form>
</body>
</html>
Prototype实战教程----5.$R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>$R</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script>
// 依次输出1，2，3，4
function test_R1(){
var range = $R(1, 5, true);
range.each(function(value, index){
alert(value);
});
}
// 依次输出1，2，3，4，5
function test_R2(){
var range = $R(1, 5, false);
range.each(function(value, index){
alert(value);
});
}
</script>
</head>
<body>
<form>
<input type="button" value="click (exclusive = true)"
onclick="test_R1()" />
<input type="button" value="click (exclusive = false)"
onclick="test_R2()" />
</form>
</body>
</html>
Prototype实战教程----6.$
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>$</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script type="text/javascript" language="javascript">
function test1() {
var div = $("div1"); // 单个参数
alert(div.innerHTML);
}
function test2() {
var divs = $("div1", "div2"); // 多个参数
for (var i = 0; i < divs.length; i++) {
alert(divs[i].innerHTML);
}
}
</script>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<input type="button" value="click1" onclick="test1()" />
<input type="button" value="click2" onclick="test2()" />
</body>
</html>
Prototype实战教程----7.AJAX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ajax</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script type="text/javascript" language="javascript">
function test() {
var myAjax = new Ajax.Request(
'http://www.wanfangdata.com.cn',
{
method: 'get',
onComplete: showResponse
}
);
}
function showResponse(response) {
$('divResult').innerHTML = response.responseText;
}
var handle = {
onCreate: function() {
Element.show('loading');
},
onComplete: function() {
if (Ajax.activeRequestCount == 0) {
Element.hide('loading');
}
}
};
Ajax.Responders.register(handle);//把handle注册到全局的Ajax.Responders，Ajax.Responders用来维护一个正在运行的Ajax对象列表
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id="divResult" ></div>
<div id='loading' style="display:none">
<img src="loading2.gif">Loading
</div>
</body>
</html>
Prototype实战教程----8.顶层对象
<html>
<head>
<title>顶层元素</title>
<script src="prototype.js"></script>
<script>
var Person=Class.create();
Person.prototype={
initialize:function(){},
name:'',
birthday:'',
age:'',
Show:function(){alert("This is "+this.name);}
};
function TestPerson()
{
var p=new Person();
p.name="Tom";
p.age=4;
p.birthday="1997-7-1";
p.Show();
};
var User=Class.create();
User.prototype={
initialize:function(){},
userid:'',
Report:function()
{
alert("UserID:"+this.userid+" Name:"+this.name+" Age:"+this.age+" Birthday:"+this.birthday);
}
};
Object.extend(User.prototype,Person.prototype);
function TestUser()
{
var user=new User();
user.name="Chou Fat";
user.age=4;
user.userid=2396
user.birthday="1997-7-1";
user.Show();
user.Report();
}
function ShowPrototypeInfo()
{
alert(Prototype.Version+" "+Prototype.ScriptFragment);
}
function TestInspect()
{
var s="wanfangsoftcenter";
alert(Object.inspect(s));
}
//-------------------------------------------------------
function testFunctionBind()
{
var person=new Person();
person.name="Jerry";
person.age=4;
person.birthday="1997-7-1";
var user=new User();
user.name="Tom";
user.age=5;
user.userid=2396
user.birthday="1999-12-20";
var handler=user.Report.bind(person);
handler();
}
var Listener=new Class.create();
Listener.prototype={
initialize:function(btn,message)
{
$(btn).onclick=this.showMessage.bindAsEventListener(message);
},
showMessage:function(message){
alert(message);
}
};
var listener=new Listener("testEventListener","点击！");
</script>
<body>
<input type=button value="ShowPrototypeInfo" onclick='return ShowPrototypeInfo();' />显示Prototype的基本信息<br><hr>
<input type=button value="TestPerson" onclick='return TestPerson();' />利用我们创建的Person类生成一个p对象 检测一下是否成功<br>
<input type=button value="TestUser" onclick='return TestUser();' />User类继承Person类，生成一个User对象 检测一下是否成功<br>
<input type=button value="TestInspect" onclick='return TestInspect();' />测试一下Object的Inspect方法<br>
<input type=button value="testFunctionBind" onclick='return testFunctionBind();' />测试一下Object的FunctionBind方法<br>
<input type=button value="testEventListener" id="testEventListener" />testEventListener<br>
<script>
var Listener=new Class.create();
Listener.prototype={
initialize:function(btn,message)
{
this.message=message;
$(btn).onclick=this.showMessage.bindAsEventListener(this);
},
showMessage:function(){
alert(this.message);
}
};
var listener=new Listener("testEventListener","点击！");
</script>
<hr>
<script>
function TimeExe()
{
var timerExe=new PeriodicalExecuter(showTime,1);
}
function showTime()
{
var time =new Date();
var d = $('myDiv');
d.innerHTML=time;
}
</script>
<div id="myDiv">
<p>This is a paragraph</p>
<input type="button" value=定时器测试 onclick="TimeExe();"><br></div>
<hr>
<script>
function TestNumber()
{
var n=50;
var b=3;
alert(n.toColorPart());
alert(n.succ());
alert(b.toPaddedString());
//b.times(alert());
}
</script>
<input type="button" value='Number测试' onclick="return TestNumber();"/><br>
</body>
</html>
Prototype实战教程----9.Array
<script src="prototype.js"></script>
<script>
var arr = [1,2,3,4,8,5,4,3];
// 依次输出1,2,3,4,5,4,3
arr.each(
function (item, index) {
if (item < 6) {
alert(item);
} else {
throw $continue;
}
}
);
// 依次输出1,2,3,4
arr.each(
function (item, index) {
if (item < 6) {
alert(item);
} else {
throw $break;
}
}
);
var arr = [1,2,3,4,5];
arr = [1,2,3,4,5]
arr.reverse(false);
alert(arr.inspect());
arr = [5,4,3,2,1]
arr.reverse();
alert(arr.inspect());
var arr = [1,2,3,4,5];
arr.reverse();
// 返回2在arr中的序号：1
var index = arr.indexOf(2);
alert(index)
var arr = [1,2,3,4,5];
// 不包含2和4，返回[1,3,5]
var newArr = arr.without(2,4);
alert(newArr.inspect());
var arr = [1,2,3,4,5];
arr.clear();
alert(arr[2]);
var arr = [1,2,3,4,5];
var arr2 = [2,4,6,8,10];
//[ [1,2],[2,4],[3,6],[4,8],[5,10]]
var newArr = arr.zip(arr2);
// [[1,4],[4,16],[9,36],[16,64],[25,100]]
var newArr2 = arr.zip(
arr2,
function (item) {
var newItem = item.collect(
function (item, index) {
return item * item;
}
);
return newItem;
}
);
alert(newArr.inspect());
alert(newArr2.inspect());
var arr = [5,2,3,1,4];
// 将arr排序
var arr = arr.sortBy(
function (item, index) {
return item;
}
);
arr.each(
function (item, index) {
alert(item);
}
);
var arr = [
{root: 1, square: 1},
{root: 2, square: 4},
{root: 3, square: 9},
{root: 4, square: 16},
{root: 5, square: 25}
];
var newArr = arr.pluck("square");
alert(newArr[4]);
var arr = [1,2,3,4,5];
var ptArr = arr.partition(
function (item, index) {
return item%2 == 1;
}
);
var oddArr = ptArr[0];
var evenArr = ptArr[1];
oddArr.each(
function (item) {
alert(item);
}
);
evenArr.each(
function (item) {
alert(item);
}
);
var arr = [1,2,3,4,5];
// 最大值
var max = -arr.min(
function (item, index) {
return -item;
}
);
// 最小值
var min = arr.min();
alert(max);
alert(min);
var arr = [1,2,3,4,5];
// 最大值
var max = arr.max();
// 最小值
var min = -arr.max(
function (item, index) {
return -item;
}
);
alert(max);
alert(min);
// 求集合中每一个元素的平方
Number.prototype.square = function () {
return this * this;
}
var arr = [1,2,3,4,5];
var newArr = arr.invoke("square");
alert(newArr[4]);
// 计算arr中所有数的乘积
var factorial = arr.inject(
1,
function (accumulator, item, index) {
return accumulator * item;
}
);
alert(factorial)
// 判断集合中是否包含”2“
var inc = arr.include(2);
alert(inc);
var arr = ["12345", "abc2", "cde", "fgh", "132ba"];
var newArray = arr.grep(
/2/,
function (item, index) {
return item + " contains 2";
}
)
newArray.each(
function (item) {
alert(item);
}
);
var arr = [1,2,3,4,5];
// 返回集合中所有的奇数
var oddArr = arr.findAll(
function (item, index) {
return item%2 == 1;
}
);
alert(oddArr[2]);
// 返回第一个大于3的元素
var ele = arr.find(
function (item, index) {
return (item > 3);
}
);
alert(ele);
var newArr = arr.collect(
function (item, index) {
return item * (index + 1);
}
);
var hasNegative = arr.any(
function (item, index) {
return (item < 0);
}
);
// 测试集合中的所有元素是否大于0
var allPositive = arr.all(
function(item, index) {
return (item > 0);
}
)
alert(allPositive);
arr.each(
function (item, index) {
alert("arr[" + index + "] = " + item);
}
);*/
</script>
Prototype实战教程----10.Element
<html><head><script src="prototype.js"></script>
<script>
function testRemove()
{
Element.remove("mydiv3");
}
function testReplace()
{
Element.replace("myDiv2",'<img src="200607061129268fc45.jpg">');
}
</script>
</head>
<body>
<div id="myDiv"> 2002 </div>
<div id="myDiv1"> 2003 </div>
<div id="myDiv2"> 2004 </div>
<div id="myDiv3"> 将被删除的部分 </div>
<div id="myDiv4"> 2006 </div>
<div id="myDiv5"> 2007 </div>
<div id="myDiv6"> 2008 </div>
<hr>
<input type="button" value='removeTest' onclick="return testRemove();"/><br>
<input type="button" value='testReplace' onclick="return testReplace();"/><br>
</body>
</html>
Prototype实战教程----11.Inserttion
<script src="prototype.js"></script>
<div id="div1" style="font-size:20px;font-weight:bold">
<hr>基线<hr>
</div>
<script>
new Insertion.After("div1", " After");
new Insertion.Bottom("div1", " Bottom");
new Insertion.Top("div1", " Top");
new Insertion.Before("div1", " Before");
</script>
Prototype实战教程----12.Event.observe
<script src="prototype.js"></script>
<input type="button" id="btn" value="click" />
<input type="button" id="reg" value="register" />
<input type="button" id="unreg" value="unregister" />
<div id="status"></div>
<script>
function test() {
alert("clicked");
}
Event.observe("reg", "click", function () {
Event.observe("btn", "click", test, false);
$("status").innerHTML = "event registered";
}, false
);
Event.observe("unreg", "click", function () {
Event.stopObserving("btn", "click", test, false);
$("status").innerHTML = "event unregistered";
}, false
);
</script>
Prototype实战教程----13.Form.Element.Observer
<script src="prototype.js"></script>
<form id="frm">
<div id="div1">
<input type="text" id="txt" name="txt" onchange="return alert('Now')"/>
<input type="text" id="txt2" name="txt2" />
<input type="button" id="btn" name="btn" value="click" onclick="test(event)" />
<input type="submit" />
<a href="http://www.google.com" onclick="test2(event)">Google</a>
<input type="button" id="btn1" name="btn1"
value="click" onclick="test3(event)" />
</div>
</form>
<script>
function test(evt) {
alert($("btn") === Event.element(evt));
}
function test2(evt) {
alert("clicked");
Event.stop(evt);
}
function test3(evt) {
alert($("div1") === Event.findElement(evt, "div"))
}
new Form.EventObserver("frm", function () {
alert("form changed");
}
);
new Form.Element.EventObserver("txt", function () {
alert("txt changed");
}
);
new Form.Observer("frm", 1, function () {
alert("form changed");
}
);
new Form.Element.Observer("txt", 1, function () {
alert("changed");
}
);
</script>
Prototype实战教程----14.Hash
<script src="prototype.js"></script>
<script>
// 创建一个对象
var obj = {
key1: 1,
key2: 2,
key3: 3
};
// 将其转换为Hash对象
var hash = $H(obj);
// 输出 #<Hash: {'key1': 1, 'key2' : 2, 'key3': 3}>
// 输出key1=1&key2=2&key3=3
alert("hash.inspect()"+hash.inspect()+"\r\ntoQueryString: "+hash.toQueryString()+"\r\n"+"values: "+hash.values()+"\r\n keys: "+hash.keys());
</script>
Prototype实战教程----15.ObjectRange
<script src="prototype.js"></script> <div id="div1" style="font-size:20px;font-weight:bold"> ObjectRange </div> <script> var range = $R(1, 10, false); var range2 = $R(1, 10, true); alert(range.merge(range2)); // true alert(range.include(1)); // true alert(range.include(5)); // true alert(range.include(10)); // true alert(range2.include(1)); // true alert(range2.include(5)); // false alert(range2.include(10)); </script>
Prototype实战教程----16.string
<html>
<head>
<title>String Test</title>
<script src="prototype.js"></script>
<script>
function testStrip()
{
var str=new String(' wanfangdata ');
alert(str.strip());
}
function teststripTags()
{
var str=new String('<html>2002<head>2005<body> ');
alert(str.stripTags());
}
function testtruncate()
{
var str=new String('king123456789987654321');
alert(str.truncate(8,'*'));
}
function testcamelize()
{
var str=new String('Background-color')
alert(str.camelize())
}
function testcapitalize()
{
var str=new String('back');
alert(str.capitalize());
}
function testDasherize()
{
var str=new String('Hello_World');
alert(str.dasherize());
}
function testinspect()
{
alert("sdfj\"sfa".inspect() );
}
function testgsub()
{
alert("skdjfAsfdjkAdk".gsub(/A/,function(match) {return match[0].toLowerCase()}));
}
function testScan()
{
alert("skdjfAsfdjkAdk".scan(/A/,function(){alert('have a A')}));
}
function testUnderscore()
{
alert('borderBottomWidth'.underscore());
}
function testTemplate()
{
var temp = new Template("被替换");
alert(temp.evaluate('aAklkljkjAkka'));
}
function testTimes()
{
alert('['+'Q'.times(10)+']');
}
function testEval()
{
var str="<script"+">alert('ok');<"+"/script>";
str.evalScripts();
}
</script>
<body>
<p><input type=button value='Strip' onclick='testStrip();' />" wanfangdata " ---> 'wanfangdata'去掉两边的空格</p><br/>
<p><input type=button value='stripTags' onclick='teststripTags();' />“<html>2002<head>2005<body>” ---> '20022005'去掉html标签</p><br/>
<p><input type=button value='truncate' onclick='testtruncate();' />“123456789>987654321” ---> '123456>'字符串截断</p><br/>
<p><input type=button value='camelize' onclick='testcamelize();' />Background-color --->BackgroundColor</p><br/>
<p><input type=button value='capitalize' onclick='testcapitalize();' />back--->Back</p><br/>
<p><input type=button value='inspect' onclick='testinspect();' />sdfj\"sfa--->sdfj"sfa</p><br/>
<p><input type=button value='testgsub' onclick='testgsub();' />skdjfAsfdjkAdk--->skdjfasfdjkadk</p><br/>
<p><input type=button value='testScan' onclick='testScan();' />字符串检测</p><br/>
<p><input type=button value='testTemplate（）' onclick='testTemplate();' />字符串模板</p><br/>
<p><input type=button value='testTimes' onclick='testTimes();' />字符串重复</p><br/>
<p><input type=button value='执行脚本' onclick='return testEval();' />执行字符串脚本</p><br/>
<p><input type=button value='testUnderscore' onclick='testUnderscore();' />'borderBottomWidth’.underscore() -> 'border_bottom_width’
</p><br/>
<p><input type=button value='testDasherize' onclick='testDasherize();' />'Hello_World' ---> 'Hello-World'把下划线转化成-</p><br/>
</body>
</html>
prototype 1.5 【转】
一直没有没有时间看prototype,现在好了，已经更新到了1.5 pre1,呵呵,强大的功能不得不学习啊,这个是提升自己JS能力的又一个捷径.
1. Prototype是什么?
或许你还没有用过它， prototype.js 是一个由Sam Stephenson写的JavaScript包。这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端， 高交互性WEB应用程序的重担。轻松加入Web 2.0特性。
如果你最近体验了这个程序包，你很可能会发现文档并不是它的强项之一。像所有在我之前的开发者一样，我只能一头扎进prototype.js的源代码中并且试验其中的每一个部分。 我想当我学习他的时候记写笔记然后分享给其他人将会很不错。
我也一起提供了这个包的对象，类，方法和扩展的 非官方参考 。
2. 通用性方法
这个程序包里面包含了许多预定义的对象和通用性方法。编写这些方法的明显的目的就是为了减少你大量的重复编码和惯用法。
从Prototype1.5.x版本开始，你可以更方便的如下面代码一样操作DOM对象了:
程序代码
var ele = $("myelement");
ele.hide(); //隐藏DOM对象对比从前的版本var ele = $("myelement");
Element.hide(ele); //隐藏DOM对象
这样的改变有什么益处呢？ 我觉得一来是更面向对象了，二来就是便于将来IDE里的代码提示。
2.1. 使用 $()方法
$() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写，
就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。
比起DOM中的方法，这个更胜一筹。你可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。下面的例子会向你描述这些。
程序代码
<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.3.1.js"></script>
<script>
function test1()
{
var d = $('myDiv');
alert(d.innerHTML);
}
function test2()
{
var divs = $('myDiv','myOtherDiv');
for(i=0; i<divs.length; i++)
{
alert(divs[i].innerHTML);
}
}
</script>
</HEAD>
<BODY>
<div id="myDiv">
<p>This is a paragraph</p>
</div>
<div id="myOtherDiv">
<p>This is another paragraph</p>
</div>
<input type="button" value=Test1 onclick="test1();"><br>
<input type="button" value=Test2 onclick="test2();"><br>
</BODY>
</HTML>
这个方法的另一个好处就是你可以传入id字符串或者元素对象自己，这使得在创建可以传入任何形式参数的方法的时候， 它变得非常有用。
2.2. 使用$F()方法
$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值，如文本框或下拉框。 这个方法可以传入元素的id或者元素自己。
程序代码
<script>
function test3()
{
alert( $F('userName') );
}
</script>
<input type="text" id="userName" value="Joe Doe"><br>
<input type="button" value=Test3 onclick="test3();"><br>
2.3. 使用Try.these()方法
Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易， 他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。
在下面的例子中， xmlNode.text在一些浏览器中好用，但是xmlNode.textContent在另一些浏览器中正常工作。 使用Try.these()方法我们可以得到正常工作的那个方法的返回值。
程序代码
<script>
function getXmlNodeValue(xmlNode){
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;}
);
}
</script>
3. Ajax 对象
上面提到的共通方法非常好，但是面对它吧，它们不是最高级的那类东西。它们是吗？你很可能自己编写了这些甚至在你的脚本里面有类似功能的方法。但是这些方法只是冰山一角。
我很肯定你对prototype.js感兴趣的原因很可能是由于它的AJAX能力。所以让我们解释当你需要完成AJAX逻辑的时候，这个包如何让它更容易。
Ajax 对象是一个预定义对象，由这个包创建，为了封装和简化编写AJAX 功能涉及的狡猾的代码。 这个对象包含一系列的封装AJAX逻辑的类。我们来看看它们的一些。
3.1. 使用 Ajax.Request类
如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程， 然后解析出响应 然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。
为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。
假如你有一个应用程序可以通过url http://yoursever/app/get_sales?empID=1234&year=1998与服务器通信。它返回下面这样的XML 响应。
程序代码
<?xml version="1.0" encoding="utf-8" ?> <ajax-response> <response type="object" id="productDetails"> <monthly-sales> <employee-sales> <employee-id>1234</employee-id> <year-month>1998-01</year-month> <sales>$8,115.36</sales> </employee-sales> <employee-sales> <employee-id>1234</employee-id> <year-month>1998-02</year-month> <sales>$11,147.51</sales> </employee-sales> </monthly-sales> </response> </ajax-response>
用 Ajax.Request对象和服务器通信并且得到这段XML是非常简单的。下面的例子演示了它是如何完成的。
程序代码
<script>
function searchSales()
{
var empID = $F('lstEmployees');
var y = $F('lstYears');
var url = 'http://yoursever/app/get_sales';
var pars = 'empID=' + empID + '&year=' + y;
var myAjax = new Ajax.Request(
url,
{method: 'get', parameters: pars, onComplete: showResponse}
);
}
function showResponse(originalRequest)
{
//put returned XML in the textarea
$('result').value = originalRequest.responseText;
}
</script>
<select id="lstEmployees" size="10" onchange="searchSales()">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" onchange="searchSales()">
<option selected="selected" value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>
<br>
<textarea id=result cols=60 rows=10 ></textarea>
你看到传入 Ajax.Request构造方法的第二个对象了吗？ 参数{method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get'的属性，另一个属性名为 parameters 包含HTTP请求的查询字符串，和一个onComplete 属性/方法包含函数showResponse。
还有一些其它的属性可以在这个对象里面定义和设置，如 asynchronous，可以为true 或 false 来决定AJAX对服务器的调用是否是异步的（默认值是 true）。
这个参数定义AJAX调用的选项。在我们的例子中，在第一个参数通过HTTP GET命令请求那个url，传入了变量 pars包含的查询字符串， Ajax.Request 对象在它完成接收响应的时候将调用showResponse 方法。
也许你知道， XMLHttpRequest在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法 ，Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。 就像我们例子中的 onComplete 。你传入的方法将会被用一个参数调用，这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP结果代码的 status 属性。
还有另外两个有用的选项用来处理结果。我们可以在onSuccess 选项处传入一个方法，当AJAX无误的执行完后调用， 相反的，也可以在onFailure选项处传入一个方法，当服务器端出现错误时调用。正如onXXXXX 选项传入的方法一样，这两个在被调用的时候也传入一个带有AJAX请求的XMLHttpRequest对象。
我们的例子没有用任何有趣的方式处理这个 XML响应， 我们只是把这段XML放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息，然后更新页面中的某些元素， 或者甚至可能做某些XSLT转换而在页面中产生一些HTML。
3.2. 使用 Ajax.Updater 类
如果你的服务器的另一端返回的信息已经是HTML了，那么使用这个程序包中 Ajax.Updater 类将使你的生活变得更加得容易。用它你只需提供哪一个元素需要被AJAX请求返回的HTML填充就可以了，例子比我写说明的更清楚。
程序代码
<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', parameters: pars});
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>
你可以看到，这段代码比前面的例子更加简洁，不包括 onComplete 方法，但是在构造方法中传入了一个元素id。 我们来稍稍修改一下代码来描述如何在客户端处理服务器段错误成为可能。
我们将加入更多的选项， 指定处理错误的一个方法。这个是用 onFailure 选项来完成的。
我们也指定了一个 placeholder 只有在成功请求之后才会被填充。为了完成这个目的我们修改了第一个参数从一个简单的元素id到一个带有两个属性的对象， success (一切OK的时候被用到) 和 failure (有地方出问题的时候被用到) 在下面的例子中没有用到failure属性，而仅仅在 onFailure 处使用了 reportError 方法。
程序代码
<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater(
{success: 'placeholder'},
url,
{method: 'get', parameters: pars, onFailure: reportError}
);
}
function reportError(request)
{
alert('Sorry. There was an error.');
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>
如果你的服务器逻辑是返回JavaScript 代码而不是单纯的 HTML 标记， Ajax.Updater对象可以执行那段JavaScript代码。为了使这个对象对待响应为JavaScript，你只需在最后参数的对象构造方法中简单加入evalScripts: true属性。
分享到：
发表评论
-
EXT新手建议：建立自己的工具箱（Toolkit）
2008-12-11 09:56 2006转自：http://www.iteye.com/topic/1 ... -
JavaScript实现双击编辑
2008-12-09 19:20 3109其实就是元素的替代 <!DOCTYPE html ... -
JavaScript时间选择控件
2008-12-09 15:42 2820<!DOCTYPE HTML PUBLIC &quo ... -
ExtJS学习笔记 layout的9种样式风格总结
2008-12-08 17:09 35717extjs的容器组件都可以设置它的显示风格，它的有效值有 ab ... -
ExtJS学习笔记二 Tree的Treepanel使用
2008-12-05 11:04 11065最近学习extjs发现了一个问题，extjs是一个Ja ... -
extjs学习资源
2008-12-02 16:49 1869ExtJs官方网 http://www.extjs.com/ ... -
extjs的Tooltips与QuickTips
2008-12-02 16:03 6365ExtJs是通过Ext.ToolTip和Ext.QuickTi ... -
ExtJS学习笔记一 ExtJS开发环境的配置
2008-11-26 11:03 3427<link rel="stylesheet ... -
自定义对象
2008-10-28 14:55 1146一，概述 在Java语言中，我们可以定义自己的类，并根据这些 ... -
javascript this详解
2008-10-28 13:04 1244在面向对象编程语言中，对于this关键字我们是非常熟悉的。比如 ... -
多选图片一次上传
2008-08-18 16:34 8058做上传图片功能的时候，经常会遇到这样一个问题，有时候可能需要一 ... -
使用external实现javscript调用flash的function
2008-08-18 15:22 1537先看Flash帮助的对于addCallback相关说明: p ... -
Javascript与flash交互通信控制的方法
2008-08-18 14:55 3290下面是一些在Flash和使用Javascript的HTML文件 ... -
控制 Flash Player 的 JavaScript 方法一览表
2008-08-18 12:14 4488播放动画：Play() 例：(网页中的 Flash id) ... -
利用数组提高IE拼接字符串效率
2008-08-17 15:54 1516今天终于静下心来研究程序的效率问题，竟然发现一个普通的循环拼接 ... -
多文件上传组件SWFUpload java环境小例子
2008-08-16 23:32 8919前几周做一个web企业项目，用户一定要求要有批量上传功能,而且 ... -
JS三种编解码方式
2008-08-14 12:28 1710js对文字进行编码涉及3个函数：escape,encodeUR ... -
深入JavaScript(apply和call函数)
2008-07-31 14:22 44631、关于javascript的apply和 ... -
关于JavaScript中apply与call的用法意义及区别
2008-07-31 14:12 2721JavaScript中有一个call和ap ... -
prototype实例一则
2008-07-31 13:21 3076为什么我还没有点击链接 zhuanyi函数就运行了。。。 & ...
相关推荐
Prototype Codes TextBook.rar:Prototype实战教程(爆爽,推荐); 2.Prototype API: Prototype1.5.1_API_CN_A.CHM:Prototype1.5.1中文API,版本一(推荐); prototype1.5.1_API_CN_B.CHM:Prototype1.5.1中文API,版本二...
prototype教程有JS文件及三个版本的CHM或PDF
万一你没有使用过大名鼎鼎的 prototype.js，那么让我来告诉你，prototype.js 是由 Sam Stephenson 写的一个 javascript 类库。这个构思奇妙，而且兼容标准的类库，能帮助你轻松建立有高度互动的 Web 2.0 特性的富...
AJAX教程。包括了ext,jquery,dwr,prototype等方面的教程和文档。感觉都是些不错的资源，放到网上共享给大家！！绝对超值的！！！
prototype.js是由Sam Stephenson写的一个javascript类库.prototype 中文教程
Prototype.js 中文chm教程 Prototype.js 中文电子图书 Prototype.js 中文帮助文档
Serena Prototype Composer简明教程。根据作者: admin的教程制作而成。
serena prototype composer 2008 实例，曾经因为做的功能不完善，我很难过...请珍惜被人的劳动成果！认真评论下吧！
prototype的api文档，pdf格式
prototype.js使用教程.zip
serena prototype composer 2008自己做的练习啊，我也是刚学了三天就做了这个东西，不好的地方还望大家多多包涵，同学同进，共同成长，谢谢。
这份 API 文档只是一份参考手册，如果你想要学习如何使用 Prototype，或者想熟悉 Prototype 的某些特性，请参考教程。 非常高兴能够制作这份文档! 关于这份文件 CHM 文件制作： Remigijus Jodelis. 最后更新...
最新版的prototype框架入门好书，不容错过的最新教程!!!
API 参考 欢迎使用 Prototype API 参考手册。...这份 API 文档只是一份参考手册，如果你想要学习如何使用 Prototype，或者想熟悉 Prototype 的某些特性，请参考教程。 非常高兴能够制作这份文档!
prototype.pdf教程，详细介绍。
这是英文原版教程，对基于Prototype 和 Scripttaculous 的开发项目有益
prototype 1.6.0.2+使用DEMO例子，PDF和JS都在压缩包内
Prototype1.6中文手册欢迎使用 Prototype API 参考手册。... 我们尽力为你提供最新的、叙述清楚的...这份 API 文档只是一份参考手册，如果你想要学习如何使用 Prototype，或者想熟悉 Prototype 的某些特性，请参考教程。
prototype1.4中文手册（.chm） prototype1.5 英文手册 （.chm） 中文教程.pdf,.doc