對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.html2.
http://www.javapassion.com/handsonlabs/ajaxprototype/