对JavaScript的印象从来不好，莫名地情愫。:)
Ajax的盛行，不得不学。
这里记录的是一些网络资源的整合，也是自己的学习过程。
prototype.js 1.4版开发者手册(强烈推荐)是很好的资料，唯一的缺陷或许就是只有代码片段，没有独立运行的Demo。我在阅读的过程中，就顺带做起了Demo。但是好玩的是：在做完部分之后，意外发现，这样的工作原来别人已经做了。并且，意图之一致，自己都觉得有趣。
Using Prototype JavaScript Library
既然别人都做好了，那我拿来就是！
不废话了，开始吧。
一、通用方法
1. $()方法是在DOM中使用过于频繁的document.getElementById()
示例：
dollar.html
< HTML > < HEAD > < TITLE > Test Page </ TITLE > < script src ="prototype-1.4.0.js" ></ script > < script > 
function test1()
{ // Get element whose id is 'myDiv' via $() var d = $('myDiv'); alert(d.innerHTML);
} function test2() { // Get elements into an array via $() var divs = $('myDiv','myOtherDiv'); // Display child node of the each item in the array for (i = 0 ; i < divs.length; i ++ ) { alert(divs[i].innerHTML); } } 
</ script > </ HEAD > < BODY > < h3 > The $() function </ h3 > < hr /> < p > The $() function is a handy shortcut to the all-too-frequent document.getElementById() function of the DOM. Like the DOM function, this one returns the element that has the id passed as an argument. Unlike the DOM function, though, this one goes further. You can pass more than one id and $() will return an Array object with all the requested elements. </ p > < hr /> < div id ="myDiv" > < p > This is the first paragraph </ p > </ div > < div id ="myOtherDiv" > < p > This is the second paragraph </ p > </ div > < input type ="button" value =Test1 onclick ="test1();" >< br >< br > < input type ="button" value =Test2 onclick ="test2();" >< br >< br > </ BODY > </ HTML >
2. $F()函数是另一个大受欢迎的“快捷键”，它能用于返回任何表单输入控件的值，比如text box,drop-down list。这个方法也能用元素id或元素本身做为参数。
dollarF.html
< HTML > < HEAD > < TITLE > Test Page </ TITLE > < script src ="prototype-1.4.0.js" ></ script > < script > function test3() { // Display the value of the input form field whose id // is "userName" alert( $F('userName') ); } </ script > </ HEAD > < BODY > < h3 > The $F() function </ h3 > < hr /> < p > The $F() function is a another welcome shortcut. It returns the value of any field input control, like text boxes or drop-down lists. The function can take as argument either the element id or the element object itself. </ p > // Input form field whose value is set to Joe Doe < input type ="text" id ="userName" value ="Joe Doe" >< br > < input type ="button" value =Test3 onclick ="test3();" >< br > </ BODY > </ HTML >
3. $A()函数能把它接收到的单个的参数转换成一个Array对象。
dollarA.html
<HTML> <HEAD> <TITLE> Test Page </TITLE> <script src="prototype-1.4.0.js"></script> <script> function showOptions(){ // Get all nodes whose tag name is 'option' var someNodeList = $('lstEmployees').getElementsByTagName('option'); // Create an array from the node list var nodes = $A(someNodeList); // Display name of the node and innerHTML value from the array nodes.each(function(node){ alert(node.nodeName + ': ' + node.innerHTML); }); } </script> </HEAD> <BODY> <h3> The $A() function </h3> <hr/> <p> The $A() function converts the single argument it receives into an Array object. This function, combined with the extensions for the Array class, makes it easier to convert or copy any enumerable list into an Array object. One suggested use is to convert DOM NodeLists into regular arrays, which can be traversed more efficiently. </p> <select id="lstEmployees" size="10" > <option value="5">Buchanan, Steven</option> <option value="8">Callahan, Laura</option> <option value="1">Davolio, Nancy</option> </select> <input type="button" value="Show the options" onclick="showOptions();" > </BODY></HTML>
4.$H()函数把一些对象转换成一个可枚举的和联合数组类似的Hash对象
dollarH.html
<HTML> <HEAD> <TITLE> Test Page </TITLE> <script src="prototype-1.4.0.js"></script> <script> function testHash() { //let's create the object var a = { first: 10, second: 20, third: 30 }; //now transform it into a hash var h = $H(a); alert(h.toQueryString()); //displays: first=10&second=20&third=30 } </script> </HEAD> <BODY> <h3> The $H() function </h3> <hr/> <p> The $H() function converts objects into enumerable Hash objects that resemble associative arrays. </p> <input type="button" value="Generate hash" onclick="testHash();" > </BODY></HTML>
5. $R()是new ObjectRange(lowBound,upperBound,excludeBounds)的缩写
dollarR.html
<HTML> <HEAD> <TITLE> Test Page </TITLE> <script src="prototype-1.4.0.js"></script> <script> function demoDollar_R(){ var range = $R(10, 15, false); range.each(function(value, index){ alert(value); }); } </script> </HEAD> <BODY> <h3> The $R() function </h3> <hr/> <p> The $R() function is simply a short hand to writing new ObjectRange(lowerBound, upperBound, excludeBounds). Jump to the ObjectRange class documentation for a complete explanation of this class. In the meantime, let's take a look at a simple example that also shows the usage of iterators through the each method. </p> <input type="button" value="Sample Count" onclick="demoDollar_R();" > </BODY></HTML>
6.Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易，它把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。
Trythese.html
<HTML> <HEAD> <TITLE> Test Page </TITLE> <script src="prototype-1.4.0.js"></script> <script> function getXmlNodeValue(){ var value = Try.these( function() { return 1; }, function() { return 2;} ); alert("value returned = " + value); } </script> </HEAD> <BODY> <h3> Try.these </h3> <hr/> <p> The Try.these() function makes it easy when you want to, ahem, try different function calls until one of them works. It takes a number of functions as arguments and calls them one by one, in sequence, until one of them works, returning the result of that successful function call. In the example, the function xmlNode.text works in some browsers, and xmlNode.textContent works in the other browsers. Using the Try.these() function we can return the one that works. </p> <input type="button" value="Try.these" onclick="getXmlNodeValue();" > </BODY></HTML>
只要需要用到JS的地方，尽量用prototype.js。这是最好的方式。:)
（未完待续）
第二部分：Ajax对象
参考资料：
1. http://thinhunan.cnblogs.com/archive/2006/04/01/DeveloperNotesForPrototype.html
2. http://www.javapassion.com/handsonlabs/ajaxprototype/
|
|
|
